@luxfi/ui 6.1.3 → 7.1.0

package/dist/collapsible.js

@@ -0,0 +1,532 @@
+"use client";
+import * as Collapsible from '@radix-ui/react-collapsible';
+import * as React3 from 'react';
+import React3__default from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/collapsible.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var SHIM_PROPS = [
+  "w",
+  "h",
+  "minW",
+  "maxW",
+  "display",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "fontWeight",
+  "textStyle",
+  "borderRadius",
+  "alignSelf",
+  "alignItems",
+  "justifyContent",
+  "color",
+  "mt",
+  "mb",
+  "ml",
+  "mr",
+  "height",
+  "overflow",
+  "whiteSpace",
+  "textOverflow",
+  "textTransform",
+  "gap",
+  "gridTemplateColumns",
+  "minWidth",
+  "boxSize",
+  "py",
+  "px",
+  "p",
+  "hideBelow",
+  "fontSize",
+  "flexWrap",
+  "wordBreak",
+  "lineHeight",
+  "marginRight",
+  "position",
+  "background"
+];
+var S = 4;
+function dim(v) {
+  if (v == null) return void 0;
+  if (typeof v === "number") return `${v * S}px`;
+  if (typeof v === "string") return v;
+  if (typeof v === "object") {
+    const o = v;
+    return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
+  }
+  return void 0;
+}
+function sp(v) {
+  if (v === void 0) return void 0;
+  return typeof v === "number" ? `${v * S}px` : v;
+}
+function shimToStyle(props) {
+  const s = {};
+  if (props.w !== void 0) s.width = dim(props.w);
+  if (props.h !== void 0) s.height = dim(props.h);
+  if (props.minW !== void 0) s.minWidth = dim(props.minW);
+  if (props.maxW !== void 0) s.maxWidth = dim(props.maxW);
+  if (props.display !== void 0) s.display = props.display;
+  if (props.flexGrow !== void 0) s.flexGrow = props.flexGrow;
+  if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
+  if (props.flexBasis !== void 0) s.flexBasis = props.flexBasis;
+  if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
+  if (props.borderRadius !== void 0) s.borderRadius = props.borderRadius;
+  if (props.alignSelf !== void 0) s.alignSelf = props.alignSelf;
+  if (props.alignItems !== void 0) s.alignItems = props.alignItems;
+  if (props.justifyContent !== void 0) s.justifyContent = props.justifyContent;
+  if (props.color !== void 0) s.color = props.color;
+  if (props.mt !== void 0) s.marginTop = sp(props.mt);
+  if (props.mb !== void 0) s.marginBottom = sp(props.mb);
+  if (props.ml !== void 0) s.marginLeft = sp(props.ml);
+  if (props.mr !== void 0) s.marginRight = sp(props.mr);
+  if (props.height !== void 0) s.height = props.height;
+  if (props.overflow !== void 0) s.overflow = props.overflow;
+  if (props.whiteSpace !== void 0) s.whiteSpace = props.whiteSpace;
+  if (props.textOverflow !== void 0) s.textOverflow = props.textOverflow;
+  if (props.textTransform !== void 0) s.textTransform = props.textTransform;
+  if (props.gap !== void 0) s.gap = sp(props.gap);
+  if (props.gridTemplateColumns !== void 0) s.gridTemplateColumns = props.gridTemplateColumns;
+  if (props.minWidth !== void 0) s.minWidth = props.minWidth;
+  if (props.boxSize !== void 0) {
+    const v = typeof props.boxSize === "number" ? `${props.boxSize * S}px` : props.boxSize;
+    s.width = v;
+    s.height = v;
+  }
+  if (props.py !== void 0) {
+    const v = sp(props.py);
+    s.paddingTop = v;
+    s.paddingBottom = v;
+  }
+  if (props.px !== void 0) {
+    const v = sp(props.px);
+    s.paddingLeft = v;
+    s.paddingRight = v;
+  }
+  if (props.p !== void 0) s.padding = sp(props.p);
+  if (props.fontSize !== void 0) s.fontSize = props.fontSize;
+  if (props.flexWrap !== void 0) s.flexWrap = props.flexWrap;
+  if (props.wordBreak !== void 0) s.wordBreak = props.wordBreak;
+  if (props.lineHeight !== void 0) s.lineHeight = props.lineHeight;
+  if (props.marginRight !== void 0) s.marginRight = props.marginRight;
+  if (props.position !== void 0) s.position = props.position;
+  if (props.background !== void 0) s.background = props.background;
+  return s;
+}
+function stripShims(props) {
+  const out = { ...props };
+  for (const k of SHIM_PROPS) delete out[k];
+  return out;
+}
+var SKELETON_CLASSES = [
+  "animate-skeleton-shimmer rounded-sm",
+  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
+  "bg-[length:200%_100%]"
+].join(" ");
+var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
+var Skeleton = React3.forwardRef(
+  function Skeleton2(props, ref) {
+    const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
+    const shimStyle = shimToStyle(props);
+    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
+    const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : void 0;
+    const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
+    const htmlRest = stripShims(allRest);
+    if (!loading) {
+      if (asChild && React3.isValidElement(children)) return children;
+      return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
+    }
+    if (asChild && React3.isValidElement(children)) {
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ref,
+          "data-loading": true,
+          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          style: mergedStyle,
+          ...htmlRest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        "data-loading": true,
+        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        style: mergedStyle,
+        ...htmlRest,
+        children
+      }
+    );
+  }
+);
+React3.forwardRef(
+  function SkeletonCircle2(props, ref) {
+    const { size = 40, loading = true, className, ...rest } = props;
+    const dimension = typeof size === "number" ? `${size}px` : size;
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        ref,
+        loading,
+        className: cn("rounded-full shrink-0", className),
+        style: { width: dimension, height: dimension, ...rest.style },
+        ...rest
+      }
+    );
+  }
+);
+React3.forwardRef(
+  function SkeletonText2(props, ref) {
+    const { noOfLines = 3, loading = true, className, ...rest } = props;
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        loading,
+        className: cn("h-4", index === noOfLines - 1 && "max-w-[80%]")
+      },
+      index
+    )) });
+  }
+);
+var ArrowIcon = ({ className, style }) => /* @__PURE__ */ jsx("svg", { className, style, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M11 3h6v6M17 3L7 13M14 11v6H3V6h6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function stripUtmParams(url) {
+  try {
+    const urlObj = new URL(url);
+    for (const param of ["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"]) {
+      urlObj.searchParams.delete(param);
+    }
+    return urlObj.toString();
+  } catch {
+    return url;
+  }
+}
+var VARIANT_CLASSES = {
+  primary: cn(
+    "text-[var(--color-link-primary)]",
+    "hover:no-underline hover:text-[var(--color-link-primary-hover)]",
+    "data-[hover]:no-underline data-[hover]:text-[var(--color-link-primary-hover)]"
+  ),
+  secondary: cn(
+    "text-[var(--color-link-secondary)]",
+    "hover:no-underline hover:text-[var(--color-hover)]",
+    "data-[hover]:no-underline data-[hover]:text-[var(--color-hover)]"
+  ),
+  subtle: cn(
+    "text-[var(--color-link-subtle)]",
+    "hover:text-[var(--color-link-subtle-hover)] hover:underline hover:decoration-[var(--color-link-subtle-hover)]",
+    "data-[hover]:text-[var(--color-link-subtle-hover)] data-[hover]:underline data-[hover]:decoration-[var(--color-link-subtle-hover)]"
+  ),
+  underlaid: cn(
+    "text-[var(--color-link-primary)] bg-[var(--color-link-underlaid-bg)]",
+    "px-2 py-1.5 rounded-md text-sm",
+    "hover:text-[var(--color-link-primary-hover)] hover:no-underline",
+    "data-[hover]:text-[var(--color-link-primary-hover)] data-[hover]:no-underline"
+  ),
+  menu: cn(
+    "text-[var(--color-link-menu)]",
+    "hover:text-[var(--color-hover)] hover:no-underline",
+    "data-[hover]:text-[var(--color-hover)] data-[hover]:no-underline"
+  ),
+  navigation: cn(
+    "text-[var(--color-link-nav-fg)] bg-transparent",
+    "hover:text-[var(--color-link-nav-fg-hover)] hover:no-underline",
+    "data-[hover]:text-[var(--color-link-nav-fg-hover)] data-[hover]:no-underline",
+    "data-[selected]:text-[var(--color-link-nav-fg-selected)] data-[selected]:bg-[var(--color-link-nav-bg-selected)]",
+    "data-[active]:text-[var(--color-link-nav-fg-active)]"
+  ),
+  plain: cn(
+    "text-inherit",
+    "hover:no-underline",
+    "data-[hover]:no-underline"
+  )
+};
+var BASE_CLASSES = "inline-flex items-center gap-0 cursor-pointer data-[disabled]:cursor-not-allowed";
+var LinkExternalIcon = ({ color }) => /* @__PURE__ */ jsx(
+  ArrowIcon,
+  {
+    className: cn(
+      "size-3 align-middle shrink-0",
+      "group-hover:text-inherit"
+    ),
+    style: color ? { color } : { color: "var(--color-icon-secondary)" },
+    "aria-hidden": "true"
+  }
+);
+var SPACING = 4;
+function resolveSpacing(v) {
+  if (v === void 0) return void 0;
+  if (typeof v === "number") return `${v * SPACING}px`;
+  if (typeof v === "string") return v;
+  if (typeof v === "object" && v !== null) {
+    const base = v.base;
+    if (base !== void 0) return typeof base === "number" ? `${base * SPACING}px` : base;
+    const lg = v.lg;
+    if (lg !== void 0) return typeof lg === "number" ? `${lg * SPACING}px` : lg;
+  }
+  return void 0;
+}
+var Link = React3__default.forwardRef(
+  function Link2(props, ref) {
+    const {
+      external,
+      loading,
+      href,
+      children,
+      disabled,
+      noIcon,
+      iconColor,
+      variant = "primary",
+      className,
+      asChild: _asChild,
+      // Strip Next.js-specific props (accepted for compat, not used)
+      shallow: _shallow,
+      prefetch: _prefetch,
+      scroll: _scroll,
+      // Strip Chakra style props
+      fontWeight: _fontWeight,
+      whiteSpace: _whiteSpace,
+      wordBreak: _wordBreak,
+      textStyle: _textStyle,
+      ml: _ml,
+      mr: _mr,
+      display: _display,
+      alignItems: _alignItems,
+      flexShrink: _flexShrink,
+      minW: _minW,
+      justifyContent: _justifyContent,
+      position: _position,
+      ...rest
+    } = props;
+    const shimStyle = {};
+    if (_fontWeight !== void 0) shimStyle.fontWeight = _fontWeight;
+    if (_whiteSpace) shimStyle.whiteSpace = _whiteSpace;
+    if (_wordBreak) shimStyle.wordBreak = _wordBreak;
+    if (_ml !== void 0) shimStyle.marginLeft = resolveSpacing(_ml);
+    if (_mr !== void 0) shimStyle.marginRight = resolveSpacing(_mr);
+    if (_display) shimStyle.display = _display;
+    if (_alignItems) shimStyle.alignItems = _alignItems;
+    if (_flexShrink !== void 0) shimStyle.flexShrink = _flexShrink;
+    if (_minW !== void 0) shimStyle.minWidth = typeof _minW === "number" ? `${_minW * SPACING}px` : _minW;
+    if (_justifyContent) shimStyle.justifyContent = _justifyContent;
+    if (_position) shimStyle.position = _position;
+    const linkClasses = cn(BASE_CLASSES, VARIANT_CLASSES[variant], className);
+    const linkStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
+    if (external) {
+      const processedHref = typeof href === "string" ? stripUtmParams(href) : href;
+      return /* @__PURE__ */ jsx(Skeleton, { loading, ref, asChild: true, children: /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: processedHref,
+          className: cn("group", linkClasses),
+          style: linkStyle,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          ...disabled ? { "data-disabled": true } : {},
+          ...rest,
+          children: [
+            children,
+            !noIcon && /* @__PURE__ */ jsx(LinkExternalIcon, { color: iconColor })
+          ]
+        }
+      ) });
+    }
+    if (href) {
+      return /* @__PURE__ */ jsx(Skeleton, { loading, ref, asChild: true, children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          className: linkClasses,
+          style: linkStyle,
+          ...disabled ? { "data-disabled": true } : {},
+          ...rest,
+          children
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx(Skeleton, { loading, ref, asChild: true, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: linkClasses,
+        ...disabled ? { "data-disabled": true } : {},
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+React3__default.forwardRef(
+  function LinkBox2(props, ref) {
+    const { className, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("relative", className),
+        ...rest
+      }
+    );
+  }
+);
+React3__default.forwardRef(
+  function LinkOverlay2(props, ref) {
+    const {
+      children,
+      external,
+      loading,
+      href,
+      noIcon,
+      iconColor,
+      variant = "primary",
+      className,
+      disabled,
+      asChild: _asChild2,
+      shallow: _shallow2,
+      prefetch: _prefetch2,
+      scroll: _scroll2,
+      fontWeight: _fw2,
+      whiteSpace: _ws2,
+      wordBreak: _wb2,
+      textStyle: _ts2,
+      ml: _ml2,
+      mr: _mr2,
+      display: _d2,
+      alignItems: _ai2,
+      flexShrink: _fs2,
+      minW: _mw2,
+      justifyContent: _jc2,
+      position: _p2,
+      ...rest
+    } = props;
+    const overlayClasses = cn(
+      BASE_CLASSES,
+      VARIANT_CLASSES[variant],
+      // Static positioning with a ::before pseudo-element that covers the LinkBox
+      "static",
+      'before:absolute before:inset-0 before:z-0 before:content-[""]',
+      className
+    );
+    if (external) {
+      const processedHref = typeof href === "string" ? stripUtmParams(href) : href;
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ref,
+          href: loading ? void 0 : processedHref,
+          className: overlayClasses,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          ...rest,
+          children: (children || !noIcon && href) && /* @__PURE__ */ jsxs(Skeleton, { display: "inline-flex", alignItems: "center", loading, maxW: "100%", h: "100%", children: [
+            children,
+            !noIcon && href && /* @__PURE__ */ jsx(LinkExternalIcon, { color: iconColor })
+          ] })
+        }
+      );
+    }
+    const content = children ? /* @__PURE__ */ jsx(Skeleton, { display: "inline-flex", alignItems: "center", loading, maxW: "100%", h: "100%", children }) : null;
+    if (href) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ref,
+          href,
+          className: overlayClasses,
+          ...rest,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: overlayClasses,
+        ...rest,
+        children: content
+      }
+    );
+  }
+);
+function useUpdateEffect(effect, deps) {
+  const isFirstMount = React3__default.useRef(true);
+  React3__default.useEffect(() => {
+    if (isFirstMount.current) {
+      isFirstMount.current = false;
+      return;
+    }
+    return effect();
+  }, deps);
+}
+function scrollToElement(id) {
+  const el = document.getElementById(id);
+  if (el) {
+    el.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+}
+var CUT_ID = "CollapsibleDetails";
+var CollapsibleDetails = (props) => {
+  const { children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false, text: textProp, loading, noScroll, ...rest } = props;
+  const [isExpanded, setIsExpanded] = React3__default.useState(isExpandedProp);
+  const handleClick = React3__default.useCallback((event) => {
+    setIsExpanded((flag) => !flag);
+    if (!noScroll) {
+      scrollToElement(id);
+    }
+    onClick?.(event);
+  }, [id, noScroll, onClick]);
+  useUpdateEffect(() => {
+    setIsExpanded(isExpandedProp);
+    if (isExpandedProp && !noScroll) {
+      scrollToElement(id);
+    }
+  }, [isExpandedProp, id, noScroll]);
+  const text = isExpanded ? textProp?.[1] ?? "Hide details" : textProp?.[0] ?? "View details";
+  return /* @__PURE__ */ jsxs(Collapsible.Root, { open: isExpanded, children: [
+    /* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Link,
+      {
+        className: "text-sm underline decoration-dashed w-fit",
+        onClick: handleClick,
+        loading,
+        ...rest,
+        children: /* @__PURE__ */ jsx("span", { id, children: text })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Collapsible.Content, { children })
+  ] });
+};
+var CollapsibleList = (props) => {
+  const CUT_LENGTH = 3;
+  const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, text: textProp, defaultExpanded = false, className, ...rest } = props;
+  const [isExpanded, setIsExpanded] = React3__default.useState(defaultExpanded);
+  React3__default.useEffect(() => {
+    setIsExpanded(defaultExpanded);
+  }, [defaultExpanded]);
+  const handleToggle = React3__default.useCallback(() => {
+    setIsExpanded((flag) => !flag);
+  }, []);
+  const text = isExpanded ? textProp?.[1] ?? "Hide" : textProp?.[0] ?? "Show all";
+  return /* @__PURE__ */ jsx(Collapsible.Root, { open: isExpanded, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col w-full", className), ...rest, children: [
+    items.slice(0, isExpanded ? void 0 : cutLength).map(renderItem),
+    items.length > cutLength && /* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Link,
+      {
+        className: "text-sm underline decoration-dashed w-fit min-w-0",
+        onClick: handleToggle,
+        ...triggerProps,
+        children: text
+      }
+    ) })
+  ] }) });
+};
+
+export { CollapsibleDetails, CollapsibleList };

package/dist/color-mode.cjs

@@ -0,0 +1,96 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var ColorModeContext = React__namespace.createContext(void 0);
+function ColorModeProvider(props) {
+  const { children, defaultTheme = "light", value: controlledValue, onValueChange } = props;
+  const [internalMode, setInternalMode] = React__namespace.useState(() => {
+    if (controlledValue === "dark" || controlledValue === "light") {
+      return controlledValue;
+    }
+    if (typeof document !== "undefined") {
+      if (document.documentElement.classList.contains("dark")) return "dark";
+    }
+    return defaultTheme === "dark" ? "dark" : "light";
+  });
+  const colorMode = controlledValue === "dark" || controlledValue === "light" ? controlledValue : internalMode;
+  const setColorMode = React__namespace.useCallback((mode) => {
+    const resolved = mode === "dark" ? "dark" : "light";
+    setInternalMode(resolved);
+    onValueChange?.(resolved);
+    if (typeof document !== "undefined") {
+      document.documentElement.classList.toggle("dark", resolved === "dark");
+      document.documentElement.classList.toggle("light", resolved === "light");
+    }
+  }, [onValueChange]);
+  const toggleColorMode = React__namespace.useCallback(() => {
+    setColorMode(colorMode === "dark" ? "light" : "dark");
+  }, [colorMode, setColorMode]);
+  const ctx = React__namespace.useMemo(
+    () => ({ colorMode, setColorMode, toggleColorMode }),
+    [colorMode, setColorMode, toggleColorMode]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ColorModeContext.Provider, { value: ctx, children });
+}
+function useColorMode() {
+  const ctx = React__namespace.useContext(ColorModeContext);
+  if (!ctx) {
+    const [mode, setMode] = React__namespace.useState(() => {
+      if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
+        return "dark";
+      }
+      return "light";
+    });
+    return {
+      colorMode: mode,
+      setColorMode: (m) => {
+        const resolved = m === "dark" ? "dark" : "light";
+        setMode(resolved);
+        if (typeof document !== "undefined") {
+          document.documentElement.classList.toggle("dark", resolved === "dark");
+          document.documentElement.classList.toggle("light", resolved === "light");
+        }
+      },
+      toggleColorMode: () => {
+        const next = mode === "dark" ? "light" : "dark";
+        setMode(next);
+        if (typeof document !== "undefined") {
+          document.documentElement.classList.toggle("dark", next === "dark");
+          document.documentElement.classList.toggle("light", next === "light");
+        }
+      }
+    };
+  }
+  return ctx;
+}
+function useColorModeValue(light, dark) {
+  const { colorMode } = useColorMode();
+  return colorMode === "dark" ? dark : light;
+}
+
+exports.ColorModeProvider = ColorModeProvider;
+exports.useColorMode = useColorMode;
+exports.useColorModeValue = useColorModeValue;

package/dist/color-mode.d.cts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type ColorMode = 'light' | 'dark';
+interface ColorModeContextValue {
+    readonly colorMode: ColorMode;
+    readonly setColorMode: (mode: string) => void;
+    readonly toggleColorMode: () => void;
+}
+interface ColorModeProviderProps {
+    readonly children?: React.ReactNode;
+    /** Initial/default color mode. Defaults to 'light'. */
+    readonly defaultTheme?: string;
+    /** Controlled color mode value from an external theme provider. */
+    readonly value?: string;
+    /** Called when the color mode changes. */
+    readonly onValueChange?: (mode: string) => void;
+    /** Any extra props are accepted and ignored for compat with next-themes ThemeProviderProps. */
+    readonly [key: string]: unknown;
+}
+declare function ColorModeProvider(props: ColorModeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useColorMode(): ColorModeContextValue;
+declare function useColorModeValue<T>(light: T, dark: T): T;
+
+export { type ColorMode, ColorModeProvider, type ColorModeProviderProps, useColorMode, useColorModeValue };

package/dist/color-mode.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type ColorMode = 'light' | 'dark';
+interface ColorModeContextValue {
+    readonly colorMode: ColorMode;
+    readonly setColorMode: (mode: string) => void;
+    readonly toggleColorMode: () => void;
+}
+interface ColorModeProviderProps {
+    readonly children?: React.ReactNode;
+    /** Initial/default color mode. Defaults to 'light'. */
+    readonly defaultTheme?: string;
+    /** Controlled color mode value from an external theme provider. */
+    readonly value?: string;
+    /** Called when the color mode changes. */
+    readonly onValueChange?: (mode: string) => void;
+    /** Any extra props are accepted and ignored for compat with next-themes ThemeProviderProps. */
+    readonly [key: string]: unknown;
+}
+declare function ColorModeProvider(props: ColorModeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useColorMode(): ColorModeContextValue;
+declare function useColorModeValue<T>(light: T, dark: T): T;
+
+export { type ColorMode, ColorModeProvider, type ColorModeProviderProps, useColorMode, useColorModeValue };