@okshaun/components 0.4.1 → 0.4.3

package/dist/index.js

@@ -1248,6 +1248,24 @@ const textinput = /* @__PURE__ */ Object.assign(memo(textinputFn.recipeFn), {
   },
   getVariantProps: textinputFn.getVariantProps
 });
+const themeSwitcherFn = /* @__PURE__ */ createRecipe("themeSwitcher", {}, []);
+const themeSwitcherVariantMap = {};
+const themeSwitcherVariantKeys = Object.keys(themeSwitcherVariantMap);
+const themeSwitcher = /* @__PURE__ */ Object.assign(memo(themeSwitcherFn.recipeFn), {
+  __recipe__: true,
+  __name__: "themeSwitcher",
+  __getCompoundVariantCss__: themeSwitcherFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: themeSwitcherVariantKeys,
+  variantMap: themeSwitcherVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe);
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, themeSwitcherVariantKeys);
+  },
+  getVariantProps: themeSwitcherFn.getVariantProps
+});
 const toggleInputFn = /* @__PURE__ */ createRecipe("toggle-input", {}, []);
 const toggleInputVariantMap = {};
 const toggleInputVariantKeys = Object.keys(toggleInputVariantMap);
@@ -8213,43 +8231,6 @@ function useTheme() {
   }
   return context2;
 }
-const themeSwitchStyles = css({
-  position: "relative",
-  borderWidth: "2",
-  borderStyle: "solid",
-  borderColor: "border",
-  color: "transparent",
-  margin: "8",
-  borderRadius: "100",
-  cursor: "pointer",
-  display: "grid",
-  lineHeight: "none",
-  width: "14",
-  height: "14",
-  transition: "all",
-  "&:before": {
-    content: '""',
-    position: "absolute",
-    inset: "0",
-    opacity: 0,
-    display: "block",
-    borderRadius: "100",
-    bg: "bg.neutral.bold",
-    transition: "all",
-    transitionTimingFunction: "default",
-    transitionDuration: "normal"
-  },
-  _hover: {
-    cursor: "pointer",
-    bg: { base: "darkNeutral.0", _dark: "neutral.0" },
-    borderColor: "bg.neutral.bold",
-    "&:before": {
-      inset: "-8",
-      bg: { base: "darkNeutral.0", _dark: "neutral.0" },
-      opacity: 0.25
-    }
-  }
-});
 function ThemeSwitcher() {
   const { theme, setTheme } = useTheme();
   const toggleTheme = () => {
@@ -8258,10 +8239,10 @@ function ThemeSwitcher() {
   return /* @__PURE__ */ jsx(
     "button",
     {
-      className: themeSwitchStyles,
+      className: themeSwitcher(),
       onClick: toggleTheme,
       "aria-label": `Switch to ${theme === "light" ? "dark" : "light"} theme`,
-      children: /* @__PURE__ */ jsx("span", {})
+      children: /* @__PURE__ */ jsx("span", { children: "0" })
     }
   );
 }