@luxfi/ui 1.0.1

package/dist/color-mode.cjs

@@ -0,0 +1,36 @@
+"use client";
+'use strict';
+
+var nextThemes = require('next-themes');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ColorModeProvider(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    nextThemes.ThemeProvider,
+    {
+      attribute: "class",
+      scriptProps: { "data-cfasync": "false" },
+      disableTransitionOnChange: true,
+      ...props
+    }
+  );
+}
+function useColorMode() {
+  const { resolvedTheme, setTheme } = nextThemes.useTheme();
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  };
+  return {
+    colorMode: resolvedTheme,
+    setColorMode: setTheme,
+    toggleColorMode
+  };
+}
+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.js

@@ -0,0 +1,32 @@
+"use client";
+import { ThemeProvider, useTheme } from 'next-themes';
+import { jsx } from 'react/jsx-runtime';
+
+function ColorModeProvider(props) {
+  return /* @__PURE__ */ jsx(
+    ThemeProvider,
+    {
+      attribute: "class",
+      scriptProps: { "data-cfasync": "false" },
+      disableTransitionOnChange: true,
+      ...props
+    }
+  );
+}
+function useColorMode() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  };
+  return {
+    colorMode: resolvedTheme,
+    setColorMode: setTheme,
+    toggleColorMode
+  };
+}
+function useColorModeValue(light, dark) {
+  const { colorMode } = useColorMode();
+  return colorMode === "dark" ? dark : light;
+}
+
+export { ColorModeProvider, useColorMode, useColorModeValue };

package/dist/dialog.cjs

@@ -0,0 +1,279 @@
+"use client";
+'use strict';
+
+var RadixDialog = require('@radix-ui/react-dialog');
+var React2 = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+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 RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+// src/dialog.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
+var CloseButton = React2__namespace.forwardRef(function CloseButton2(props, ref) {
+  const { variant: _variant, size: _size, className, children, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Close",
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center",
+        "size-5 min-w-0 shrink-0 p-0",
+        "rounded-sm border-0 overflow-hidden",
+        "bg-transparent text-[var(--closeButton-fg,currentColor)]",
+        "hover:bg-transparent hover:text-[var(--hover-color,currentColor)]",
+        "disabled:opacity-40",
+        "cursor-pointer",
+        className
+      ),
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "size-5",
+          viewBox: "0 0 20 20",
+          fill: "none",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: CLOSE_ICON_PATH,
+              fill: "currentColor"
+            }
+          )
+        }
+      )
+    }
+  );
+});
+function BackToButton({ onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "inline-flex items-center justify-center size-8 rounded-md bg-transparent text-current hover:bg-[var(--color-button-subtle-bg)] cursor-pointer",
+      "aria-label": "Go back",
+      children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "size-5", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.5 15L7.5 10L12.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+    }
+  );
+}
+var DialogContext = React2__namespace.createContext({ size: "md" });
+function useDialogContext() {
+  return React2__namespace.useContext(DialogContext);
+}
+var CONTENT_SIZE_MAP = {
+  sm: "max-w-[400px]",
+  md: "max-w-[728px]",
+  full: "max-w-[100vw] min-h-dvh rounded-none [--dialog-margin:0]",
+  cover: "w-full h-full [--dialog-margin:0]"
+};
+function sizeClasses(size) {
+  if (typeof size === "string") {
+    return CONTENT_SIZE_MAP[size];
+  }
+  const parts = [];
+  const small = size.base ?? size.lgDown;
+  if (small) {
+    parts.push(CONTENT_SIZE_MAP[small]);
+  }
+  if (size.lg) {
+    const lgClasses = CONTENT_SIZE_MAP[size.lg].split(" ").map((c) => `lg:${c}`).join(" ");
+    parts.push(lgClasses);
+  }
+  return parts.join(" ");
+}
+var DialogRoot = ({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  size = "md",
+  modal = true
+  // motionPreset is intentionally unused — kept for API compat
+}) => {
+  const handleOpenChange = React2__namespace.useCallback(
+    (nextOpen) => {
+      onOpenChange?.({ open: nextOpen });
+    },
+    [onOpenChange]
+  );
+  const ctx = React2__namespace.useMemo(() => ({ size }), [size]);
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    RadixDialog__namespace.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: handleOpenChange,
+      modal,
+      children
+    }
+  ) });
+};
+var DialogContent = React2__namespace.forwardRef(function DialogContent2(props, ref) {
+  const {
+    children,
+    portalled = true,
+    portalRef,
+    backdrop = true,
+    className,
+    paddingTop: _paddingTop,
+    style: styleProp,
+    ...rest
+  } = props;
+  const contentInlineStyle = {
+    ...styleProp,
+    ..._paddingTop !== void 0 ? { paddingTop: typeof _paddingTop === "number" ? `${_paddingTop * 4}px` : _paddingTop } : {}
+  };
+  const { size } = useDialogContext();
+  let portalProps;
+  if (!portalled) {
+    portalProps = { container: void 0 };
+  } else if (portalRef) {
+    portalProps = { container: portalRef.current };
+  } else {
+    portalProps = {};
+  }
+  const Wrapper = portalled ? RadixDialog__namespace.Portal : React2__namespace.Fragment;
+  const wrapperProps = portalled ? portalProps : {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { ...wrapperProps, children: [
+    backdrop && /* @__PURE__ */ jsxRuntime.jsx(
+      RadixDialog__namespace.Overlay,
+      {
+        className: "fixed inset-0 z-[1400] bg-black/80"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 z-[1400] flex w-screen h-dvh",
+          "items-start lg:items-center justify-center",
+          "overflow-hidden"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          RadixDialog__namespace.Content,
+          {
+            ref,
+            className: cn(
+              // Base content styles
+              "relative flex flex-col w-full p-6 outline-none text-base",
+              "bg-dialog-bg text-dialog-fg shadow-lg rounded-xl",
+              "my-[var(--dialog-margin,var(--dialog-base-margin))]",
+              "mx-auto [--dialog-base-margin:4rem] lg:[--dialog-base-margin:auto]",
+              "max-h-[calc(100%-7.5rem)] overflow-hidden",
+              // Size variant
+              sizeClasses(size),
+              className
+            ),
+            style: Object.keys(contentInlineStyle).length > 0 ? contentInlineStyle : void 0,
+            ...rest,
+            children
+          }
+        )
+      }
+    )
+  ] });
+});
+var DialogCloseTrigger = React2__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
+});
+var DialogHeader = React2__namespace.forwardRef(function DialogHeader2(props, ref) {
+  const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
+  const startElement = startElementProp ?? (onBackToClick ? /* @__PURE__ */ jsxRuntime.jsx(BackToButton, { onClick: onBackToClick }) : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex-none p-0 mb-2 flex items-center gap-x-2 min-h-[40px]",
+        className
+      ),
+      ...rest,
+      children: [
+        startElement,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RadixDialog__namespace.Title,
+          {
+            className: cn(
+              "text-base lg:text-lg font-medium",
+              "whitespace-nowrap overflow-hidden text-ellipsis"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(DialogCloseTrigger, { className: "ml-auto" })
+      ]
+    }
+  );
+});
+var DialogBody = React2__namespace.forwardRef(function DialogBody2({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
+  const bodyStyle = {
+    ...styleProp,
+    ...pt !== void 0 ? { paddingTop: typeof pt === "number" ? `${pt * 4}px` : pt } : {},
+    ...display ? { display } : {},
+    ...flexDir ? { flexDirection: flexDir } : {}
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex-1 p-0 overflow-auto", className),
+      style: Object.keys(bodyStyle).length > 0 ? bodyStyle : void 0,
+      ...props
+    }
+  );
+});
+var DialogFooter = React2__namespace.forwardRef(function DialogFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center justify-start gap-6 p-0 mt-6", className),
+      ...props
+    }
+  );
+});
+var DialogBackdrop = RadixDialog__namespace.Overlay;
+var DialogTitle = RadixDialog__namespace.Title;
+var DialogDescription = RadixDialog__namespace.Description;
+var DialogTrigger = RadixDialog__namespace.Trigger;
+var DialogActionTrigger = RadixDialog__namespace.Close;
+
+exports.DialogActionTrigger = DialogActionTrigger;
+exports.DialogBackdrop = DialogBackdrop;
+exports.DialogBody = DialogBody;
+exports.DialogCloseTrigger = DialogCloseTrigger;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogRoot = DialogRoot;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;

package/dist/dialog.js

@@ -0,0 +1,246 @@
+"use client";
+import * as RadixDialog from '@radix-ui/react-dialog';
+import * as React2 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/dialog.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
+var CloseButton = React2.forwardRef(function CloseButton2(props, ref) {
+  const { variant: _variant, size: _size, className, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Close",
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center",
+        "size-5 min-w-0 shrink-0 p-0",
+        "rounded-sm border-0 overflow-hidden",
+        "bg-transparent text-[var(--closeButton-fg,currentColor)]",
+        "hover:bg-transparent hover:text-[var(--hover-color,currentColor)]",
+        "disabled:opacity-40",
+        "cursor-pointer",
+        className
+      ),
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "size-5",
+          viewBox: "0 0 20 20",
+          fill: "none",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: CLOSE_ICON_PATH,
+              fill: "currentColor"
+            }
+          )
+        }
+      )
+    }
+  );
+});
+function BackToButton({ onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "inline-flex items-center justify-center size-8 rounded-md bg-transparent text-current hover:bg-[var(--color-button-subtle-bg)] cursor-pointer",
+      "aria-label": "Go back",
+      children: /* @__PURE__ */ jsx("svg", { className: "size-5", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M12.5 15L7.5 10L12.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+    }
+  );
+}
+var DialogContext = React2.createContext({ size: "md" });
+function useDialogContext() {
+  return React2.useContext(DialogContext);
+}
+var CONTENT_SIZE_MAP = {
+  sm: "max-w-[400px]",
+  md: "max-w-[728px]",
+  full: "max-w-[100vw] min-h-dvh rounded-none [--dialog-margin:0]",
+  cover: "w-full h-full [--dialog-margin:0]"
+};
+function sizeClasses(size) {
+  if (typeof size === "string") {
+    return CONTENT_SIZE_MAP[size];
+  }
+  const parts = [];
+  const small = size.base ?? size.lgDown;
+  if (small) {
+    parts.push(CONTENT_SIZE_MAP[small]);
+  }
+  if (size.lg) {
+    const lgClasses = CONTENT_SIZE_MAP[size.lg].split(" ").map((c) => `lg:${c}`).join(" ");
+    parts.push(lgClasses);
+  }
+  return parts.join(" ");
+}
+var DialogRoot = ({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  size = "md",
+  modal = true
+  // motionPreset is intentionally unused — kept for API compat
+}) => {
+  const handleOpenChange = React2.useCallback(
+    (nextOpen) => {
+      onOpenChange?.({ open: nextOpen });
+    },
+    [onOpenChange]
+  );
+  const ctx = React2.useMemo(() => ({ size }), [size]);
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    RadixDialog.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: handleOpenChange,
+      modal,
+      children
+    }
+  ) });
+};
+var DialogContent = React2.forwardRef(function DialogContent2(props, ref) {
+  const {
+    children,
+    portalled = true,
+    portalRef,
+    backdrop = true,
+    className,
+    paddingTop: _paddingTop,
+    style: styleProp,
+    ...rest
+  } = props;
+  const contentInlineStyle = {
+    ...styleProp,
+    ..._paddingTop !== void 0 ? { paddingTop: typeof _paddingTop === "number" ? `${_paddingTop * 4}px` : _paddingTop } : {}
+  };
+  const { size } = useDialogContext();
+  let portalProps;
+  if (!portalled) {
+    portalProps = { container: void 0 };
+  } else if (portalRef) {
+    portalProps = { container: portalRef.current };
+  } else {
+    portalProps = {};
+  }
+  const Wrapper = portalled ? RadixDialog.Portal : React2.Fragment;
+  const wrapperProps = portalled ? portalProps : {};
+  return /* @__PURE__ */ jsxs(Wrapper, { ...wrapperProps, children: [
+    backdrop && /* @__PURE__ */ jsx(
+      RadixDialog.Overlay,
+      {
+        className: "fixed inset-0 z-[1400] bg-black/80"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 z-[1400] flex w-screen h-dvh",
+          "items-start lg:items-center justify-center",
+          "overflow-hidden"
+        ),
+        children: /* @__PURE__ */ jsx(
+          RadixDialog.Content,
+          {
+            ref,
+            className: cn(
+              // Base content styles
+              "relative flex flex-col w-full p-6 outline-none text-base",
+              "bg-dialog-bg text-dialog-fg shadow-lg rounded-xl",
+              "my-[var(--dialog-margin,var(--dialog-base-margin))]",
+              "mx-auto [--dialog-base-margin:4rem] lg:[--dialog-base-margin:auto]",
+              "max-h-[calc(100%-7.5rem)] overflow-hidden",
+              // Size variant
+              sizeClasses(size),
+              className
+            ),
+            style: Object.keys(contentInlineStyle).length > 0 ? contentInlineStyle : void 0,
+            ...rest,
+            children
+          }
+        )
+      }
+    )
+  ] });
+});
+var DialogCloseTrigger = React2.forwardRef(function DialogCloseTrigger2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
+});
+var DialogHeader = React2.forwardRef(function DialogHeader2(props, ref) {
+  const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
+  const startElement = startElementProp ?? (onBackToClick ? /* @__PURE__ */ jsx(BackToButton, { onClick: onBackToClick }) : void 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex-none p-0 mb-2 flex items-center gap-x-2 min-h-[40px]",
+        className
+      ),
+      ...rest,
+      children: [
+        startElement,
+        /* @__PURE__ */ jsx(
+          RadixDialog.Title,
+          {
+            className: cn(
+              "text-base lg:text-lg font-medium",
+              "whitespace-nowrap overflow-hidden text-ellipsis"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(DialogCloseTrigger, { className: "ml-auto" })
+      ]
+    }
+  );
+});
+var DialogBody = React2.forwardRef(function DialogBody2({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
+  const bodyStyle = {
+    ...styleProp,
+    ...pt !== void 0 ? { paddingTop: typeof pt === "number" ? `${pt * 4}px` : pt } : {},
+    ...display ? { display } : {},
+    ...flexDir ? { flexDirection: flexDir } : {}
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex-1 p-0 overflow-auto", className),
+      style: Object.keys(bodyStyle).length > 0 ? bodyStyle : void 0,
+      ...props
+    }
+  );
+});
+var DialogFooter = React2.forwardRef(function DialogFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center justify-start gap-6 p-0 mt-6", className),
+      ...props
+    }
+  );
+});
+var DialogBackdrop = RadixDialog.Overlay;
+var DialogTitle = RadixDialog.Title;
+var DialogDescription = RadixDialog.Description;
+var DialogTrigger = RadixDialog.Trigger;
+var DialogActionTrigger = RadixDialog.Close;
+
+export { DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger };