@crossed/demo/lib/module/styled/colorMode.js

A universal & performant styling library for React Native, Next.js & React

import { jsx, jsxs } from "react/jsx-runtime";
import { CrossedTheme, useCrossedTheme } from "@crossed/styled";
import { styled } from "@crossed/styled";
import { Pressable, Text } from "react-native";
const ButtonWithoutVariant = styled(Pressable, {
  className: [
    "px-2 py-1",
    "bg-neutral-300 text-black",
    "dark:bg-neutral-800 dark:text-white"
  ]
});
const ButtonWithVariant = styled(Pressable, {
  className: ["px-2 py-1"],
  variants: {
    variant: {
      filled: {
        className: [
          "bg-neutral-300 text-black",
          "dark:bg-neutral-800 dark:text-white"
        ]
      }
    }
  },
  defaultVariants: {
    variant: "filled"
  }
});
const ButtonTheme = () => {
  const { theme, setTheme } = useCrossedTheme();
  return /* @__PURE__ */ jsxs(
    "button",
    {
      className: "bg-neutral-500 dark:bg-neutral-800 px-2 py-1 text-black dark:text-white",
      onClick: () => setTheme(theme === "dark" ? "light" : "dark"),
      children: [
        "Change theme: ",
        theme
      ]
    }
  );
};
const ColorModeDemo = () => {
  return /* @__PURE__ */ jsx(CrossedTheme, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2", children: [
      /* @__PURE__ */ jsx(ButtonWithoutVariant, { children: /* @__PURE__ */ jsx(Text, { children: "Button without variant" }) }),
      /* @__PURE__ */ jsx(ButtonWithVariant, { children: /* @__PURE__ */ jsx(Text, { children: "Button with variant" }) })
    ] }),
    /* @__PURE__ */ jsx(ButtonTheme, {})
  ] }) });
};
export {
  ColorModeDemo
};
//# sourceMappingURL=colorMode.js.map