@okshaun/components 0.3.2 → 0.3.4

package/dist/index.js

@@ -1,6 +1,7 @@
 import * as React from "react";
-import { forwardRef, useMemo, createElement, useEffect, createContext, useState, useContext, useRef } from "react";
+import { forwardRef, useMemo, createElement, useEffect, useState, useRef, createContext, useContext, useSyncExternalStore } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { b as breakpoints, c as containerSizes } from "./size.primitives-j2MFgtrT.js";
 function isObject(value) {
   return typeof value === "object" && value != null && !Array.isArray(value);
 }
@@ -97,10 +98,10 @@ function mapObject(obj, fn) {
   if (!isObject(obj)) return fn(obj);
   return walkObject(obj, (value) => fn(value));
 }
-function toResponsiveObject(values, breakpoints) {
+function toResponsiveObject(values, breakpoints2) {
   return values.reduce(
     (acc, current, index) => {
-      const key = breakpoints[index];
+      const key = breakpoints2[index];
       if (current != null) {
         acc[key] = current;
       }
@@ -2034,9 +2035,7 @@ const Icon = ({
   fill = "current",
   ...props
 }) => {
-  const [cssProps, otherProps] = splitCssProps(props);
-  const { css: cssProp, ...styleProps } = cssProps;
-  const className = css(cssProp, styleProps);
+  const [className, otherProps] = splitProps(props);
   useEffect(() => {
     injectSprite();
   }, []);
@@ -2350,10 +2349,26 @@ const IconNames = {
   "zoom-out": "zoom-out"
 };
 const Button = React.forwardRef(
-  ({ appearance, size, href, className, children, loading, disabled, iconBefore, iconAfter, ...props }, ref) => {
+  ({
+    appearance,
+    size,
+    href,
+    className,
+    children,
+    loading,
+    disabled,
+    iconBefore,
+    iconAfter,
+    ...props
+  }, ref) => {
     const trulyDisabled = loading || disabled;
     const asComponent = href ? "a" : "button";
-    const classes = button({ appearance, size, iconBefore: Boolean(iconBefore), iconAfter: Boolean(iconAfter) });
+    const classes = button({
+      appearance,
+      size,
+      iconBefore: Boolean(iconBefore),
+      iconAfter: Boolean(iconAfter)
+    });
     return (
       // @ts-expect-error - Polymorphic type inference issue
       /* @__PURE__ */ jsx(
@@ -2373,7 +2388,18 @@ const Button = React.forwardRef(
               children,
               iconAfter && /* @__PURE__ */ jsx(Icon, { name: iconAfter, className: classes.icon })
             ] }),
-            loading && /* @__PURE__ */ jsx(Grid, { position: "absolute", top: "0", left: "0", right: "0", bottom: "0", placeItems: "center", children: /* @__PURE__ */ jsx(Spinner, {}) })
+            loading && /* @__PURE__ */ jsx(
+              Grid,
+              {
+                position: "absolute",
+                top: "0",
+                left: "0",
+                right: "0",
+                bottom: "0",
+                placeItems: "center",
+                children: /* @__PURE__ */ jsx(Spinner, {})
+              }
+            )
           ] })
         }
       )
@@ -2398,7 +2424,16 @@ const Badge = React.forwardRef(
   }
 );
 const IconButton = React.forwardRef(
-  ({ appearance, size, href, className, loading, disabled, iconName, ...props }, ref) => {
+  ({
+    appearance,
+    size,
+    href,
+    className,
+    loading,
+    disabled,
+    iconName,
+    ...props
+  }, ref) => {
     const trulyDisabled = loading || disabled;
     const asComponent = href ? "a" : "button";
     const classes = iconButton({ appearance, size });
@@ -2417,7 +2452,18 @@ const IconButton = React.forwardRef(
           ...props,
           children: /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(HStack, { gap: "2", opacity: loading ? 0 : 1, children: /* @__PURE__ */ jsx(Icon, { name: iconName || "menu", className: classes.icon }) }),
-            loading && /* @__PURE__ */ jsx(Grid, { position: "absolute", top: "0", left: "0", right: "0", bottom: "0", placeItems: "center", children: /* @__PURE__ */ jsx(Spinner, {}) })
+            loading && /* @__PURE__ */ jsx(
+              Grid,
+              {
+                position: "absolute",
+                top: "0",
+                left: "0",
+                right: "0",
+                bottom: "0",
+                placeItems: "center",
+                children: /* @__PURE__ */ jsx(Spinner, {})
+              }
+            )
           ] })
         }
       )
@@ -2784,101 +2830,6 @@ const CheckboxInput = ({
     }
   );
 };
-const THEME_STORAGE_KEY = "okshaun-theme-preference";
-function getInitialTheme() {
-  const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
-  if (storedTheme) {
-    return storedTheme;
-  }
-  if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-    return "dark";
-  }
-  return "light";
-}
-const ThemeContext = createContext(void 0);
-function ThemeProvider({ children }) {
-  const [theme, setThemeState] = useState(() => getInitialTheme());
-  const setTheme = (newTheme) => {
-    setThemeState(newTheme);
-    localStorage.setItem(THEME_STORAGE_KEY, newTheme);
-  };
-  useEffect(() => {
-    document.documentElement.removeAttribute("data-color-mode");
-    document.documentElement.removeAttribute("data-theme");
-    document.documentElement.setAttribute("data-color-mode", theme);
-  }, [theme]);
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = (e) => {
-      const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
-      if (!storedTheme) {
-        setThemeState(e.matches ? "dark" : "light");
-      }
-    };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, []);
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, setTheme }, children });
-}
-function useTheme() {
-  const context2 = useContext(ThemeContext);
-  if (context2 === void 0) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  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 = () => {
-    setTheme(theme === "light" ? "dark" : "light");
-  };
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      className: themeSwitchStyles,
-      onClick: toggleTheme,
-      "aria-label": `Switch to ${theme === "light" ? "dark" : "light"} theme`,
-      children: /* @__PURE__ */ jsx("span", {})
-    }
-  );
-}
 const Tooltip = ({
   trigger = "onHover",
   caret = true,
@@ -3230,14 +3181,240 @@ const Menu = ({ menuSection, iconPlacement, variant, multiSelectType, onChange }
     }) })
   ] });
 };
+const THEME_STORAGE_KEY = "okshaun-theme-preference";
+function getInitialTheme() {
+  const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+  if (storedTheme) {
+    return storedTheme;
+  }
+  if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return "dark";
+  }
+  return "light";
+}
+const ThemeContext = createContext(void 0);
+function ThemeProvider({ children }) {
+  const [theme, setThemeState] = useState(() => getInitialTheme());
+  const setTheme = (newTheme) => {
+    setThemeState(newTheme);
+    localStorage.setItem(THEME_STORAGE_KEY, newTheme);
+  };
+  useEffect(() => {
+    document.documentElement.removeAttribute("data-color-mode");
+    document.documentElement.removeAttribute("data-theme");
+    document.documentElement.setAttribute("data-color-mode", theme);
+  }, [theme]);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+      if (!storedTheme) {
+        setThemeState(e.matches ? "dark" : "light");
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, setTheme }, children });
+}
+function useTheme() {
+  const context2 = useContext(ThemeContext);
+  if (context2 === void 0) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  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 = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: themeSwitchStyles,
+      onClick: toggleTheme,
+      "aria-label": `Switch to ${theme === "light" ? "dark" : "light"} theme`,
+      children: /* @__PURE__ */ jsx("span", {})
+    }
+  );
+}
+function useMediaQuery(breakpoint, direction = "min") {
+  const query = useMemo(() => {
+    const breakpointValue = breakpoints[breakpoint];
+    const breakpointNum = parseInt(breakpointValue, 10);
+    return direction === "min" ? `(min-width: ${breakpointValue})` : `(max-width: ${breakpointNum - 1}px)`;
+  }, [breakpoint, direction]);
+  const mediaQuery = useMemo(() => {
+    if (typeof window === "undefined") {
+      return {
+        matches: false,
+        addEventListener: () => {
+        },
+        removeEventListener: () => {
+        }
+      };
+    }
+    return window.matchMedia(query);
+  }, [query]);
+  return useSyncExternalStore(
+    (callback) => {
+      mediaQuery.addEventListener("change", callback);
+      return () => {
+        mediaQuery.removeEventListener("change", callback);
+      };
+    },
+    () => mediaQuery.matches,
+    // SSR fallback - return false on server
+    () => false
+  );
+}
+function useContainerQuery(containerRef, size, direction = "min") {
+  const query = useMemo(() => {
+    const sizeValue = containerSizes[size].value;
+    const sizeNum = parseFloat(sizeValue);
+    return direction === "min" ? `(min-width: ${sizeValue})` : `(max-width: ${sizeNum - 0.0625}rem)`;
+  }, [size, direction]);
+  return useSyncExternalStore(
+    (callback) => {
+      if (typeof window === "undefined" || !containerRef.current) {
+        return () => {
+        };
+      }
+      const element = containerRef.current;
+      const sizeValue = containerSizes[size].value;
+      const sizeNum = parseFloat(sizeValue);
+      const threshold = direction === "min" ? sizeNum : sizeNum - 0.0625;
+      const checkSize = () => {
+        if (!element) return false;
+        const width = element.offsetWidth;
+        const widthInRem = width / parseFloat(getComputedStyle(document.documentElement).fontSize);
+        return direction === "min" ? widthInRem >= threshold : widthInRem < threshold;
+      };
+      if ("queryContainer" in element) {
+        try {
+          const containerQuery = element.queryContainer(query);
+          containerQuery.addEventListener("change", callback);
+          return () => {
+            containerQuery.removeEventListener("change", callback);
+          };
+        } catch {
+        }
+      }
+      let currentMatches = checkSize();
+      const callbacks = /* @__PURE__ */ new Set();
+      let observer = null;
+      if (typeof ResizeObserver !== "undefined") {
+        observer = new ResizeObserver(() => {
+          const newMatches = checkSize();
+          if (newMatches !== currentMatches) {
+            currentMatches = newMatches;
+            callbacks.forEach((cb) => cb());
+          }
+        });
+        observer.observe(element);
+      }
+      callbacks.add(callback);
+      return () => {
+        callbacks.delete(callback);
+        if (callbacks.size === 0 && observer) {
+          observer.disconnect();
+        }
+      };
+    },
+    () => {
+      if (typeof window === "undefined" || !containerRef.current) {
+        return false;
+      }
+      const element = containerRef.current;
+      const sizeValue = containerSizes[size].value;
+      const sizeNum = parseFloat(sizeValue);
+      const threshold = direction === "min" ? sizeNum : sizeNum - 0.0625;
+      if ("queryContainer" in element) {
+        try {
+          const containerQuery = element.queryContainer(query);
+          return containerQuery.matches;
+        } catch {
+        }
+      }
+      const width = element.offsetWidth;
+      const widthInRem = width / parseFloat(getComputedStyle(document.documentElement).fontSize);
+      return direction === "min" ? widthInRem >= threshold : widthInRem < threshold;
+    },
+    // SSR fallback - return false on server
+    () => false
+  );
+}
+function BreakpointIndicator() {
+  const isXs = useMediaQuery("xs");
+  const isSm = useMediaQuery("sm");
+  const isMd = useMediaQuery("md");
+  const isLg = useMediaQuery("lg");
+  const isXl = useMediaQuery("xl");
+  const is2Xl = useMediaQuery("2xl");
+  let breakpoint = /* @__PURE__ */ jsx(Tag, { hue: "red", appearance: "bold", children: "@media/base" });
+  if (is2Xl) {
+    breakpoint = /* @__PURE__ */ jsx(Tag, { hue: "blue", appearance: "bold", children: "@media/2xl" });
+  } else if (isXl) {
+    breakpoint = /* @__PURE__ */ jsx(Tag, { hue: "teal", appearance: "bold", children: "@media/xl" });
+  } else if (isLg) {
+    breakpoint = /* @__PURE__ */ jsx(Tag, { hue: "green", appearance: "bold", children: "@media/lg" });
+  } else if (isMd) {
+    breakpoint = /* @__PURE__ */ jsx(Tag, { hue: "lime", appearance: "bold", children: "@media/md" });
+  } else if (isSm) {
+    breakpoint = /* @__PURE__ */ jsx(Tag, { hue: "yellow", appearance: "bold", children: "@media/sm" });
+  } else if (isXs) {
+    breakpoint = /* @__PURE__ */ jsx(Tag, { hue: "orange", appearance: "bold", children: "@media/xs" });
+  }
+  return breakpoint;
+}
 export {
   Badge,
   Box,
   Breadcrumbs,
+  BreakpointIndicator,
   Button,
   Card,
   Checkbox,
   CheckboxInput,
+  Code,
   Divider,
   Heading,
   Icon,
@@ -3260,6 +3437,8 @@ export {
   ToggleInput,
   Tooltip,
   splitProps,
+  useContainerQuery,
+  useMediaQuery,
   useTheme
 };
 //# sourceMappingURL=index.js.map