@luxfi/ui 6.1.2 → 7.0.0

package/dist/accordion.cjs

@@ -0,0 +1,213 @@
+"use client";
+'use strict';
+
+var AccordionPrimitive = require('@radix-ui/react-accordion');
+var React = 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 AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/accordion.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var IndicatorIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var AccordionRoot = React__namespace.forwardRef(
+  function AccordionRoot2(props, ref) {
+    const {
+      multiple: _multiple,
+      value,
+      defaultValue,
+      onValueChange,
+      variant,
+      size,
+      noAnimation: _noAnimation,
+      lazyMount: _lazyMount,
+      className,
+      children,
+      position: _position,
+      w: _w,
+      bgColor: _bgColor,
+      borderRadius: _borderRadius,
+      ...rest
+    } = props;
+    const handleValueChange = React__namespace.useCallback(
+      (next) => {
+        onValueChange?.({ value: next });
+      },
+      [onValueChange]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AccordionPrimitive__namespace.Root,
+      {
+        ref,
+        type: "multiple",
+        value,
+        defaultValue,
+        onValueChange: handleValueChange,
+        className: cn(
+          "w-full",
+          variant === "faq" && "accordion-faq",
+          size === "sm" && "accordion-sm",
+          className
+        ),
+        "data-variant": variant,
+        "data-size": size,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var AccordionItem = React__namespace.forwardRef(
+  function AccordionItem2(props, ref) {
+    const { className, as: _as, _first, _last, display: _display, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AccordionPrimitive__namespace.Item,
+      {
+        ref,
+        className: cn(
+          "border-b border-[var(--color-border-divider)]",
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+var AccordionItemTrigger = React__namespace.forwardRef(function AccordionItemTrigger2(props, ref) {
+  const {
+    children,
+    indicatorPlacement: indicatorPlacementProp,
+    variant,
+    noIndicator,
+    className,
+    // Strip Chakra style props
+    px: _px,
+    py: _py,
+    _hover,
+    wordBreak: _wordBreak,
+    textAlign: _textAlign,
+    cursor: _cursor,
+    display: _display,
+    alignItems: _alignItems,
+    columnGap: _columnGap,
+    ...rest
+  } = props;
+  const indicatorPlacement = variant === "faq" ? "start" : indicatorPlacementProp ?? "end";
+  const indicator = variant === "faq" ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "relative inline-block h-3 w-3 shrink-0",
+        // horizontal bar (always visible)
+        "before:absolute before:left-0 before:top-1/2 before:block before:h-[2px] before:w-full before:-translate-y-1/2 before:rounded-[2px] before:bg-current",
+        // vertical bar (rotates to 0 when open)
+        "after:absolute after:left-1/2 after:top-0 after:block after:h-full after:w-[2px]",
+        "after:-translate-x-1/2 after:rounded-[2px] after:bg-current",
+        "after:transition-transform after:duration-200 after:ease-in-out",
+        // When parent trigger has data-state="open", rotate vertical bar
+        "group-data-[state=open]/trigger:after:rotate-90"
+      )
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex shrink-0 transition-transform duration-200",
+        "rotate-180",
+        "group-data-[state=open]/trigger:rotate-[270deg]"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(IndicatorIcon, { className: "h-5 w-5" })
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    AccordionPrimitive__namespace.Trigger,
+    {
+      ref,
+      className: cn(
+        "group/trigger flex w-full cursor-pointer items-center gap-2 py-3 text-left text-[var(--color-text-primary)]",
+        "hover:text-[var(--color-hover)]",
+        "focus-visible:outline-none",
+        className
+      ),
+      ...rest,
+      children: [
+        indicatorPlacement === "start" && !noIndicator && indicator,
+        children,
+        indicatorPlacement === "end" && !noIndicator && indicator
+      ]
+    }
+  ) }) });
+});
+var AccordionItemContent = React__namespace.forwardRef(function AccordionItemContent2(props, ref) {
+  const { className, children, pb: _pb, pr: _pr, pl: _pl, w: _w, display: _display, flexDir: _flexDir, rowGap: _rowGap, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionPrimitive__namespace.Content,
+    {
+      ref,
+      className: cn(
+        "overflow-hidden text-[var(--color-text-primary)]",
+        "data-[state=open]:animate-accordion-down",
+        "data-[state=closed]:animate-accordion-up",
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-3", children })
+    }
+  );
+});
+function useAccordion(items) {
+  const [value, setValue] = React__namespace.useState([]);
+  const onValueChange = React__namespace.useCallback(({ value: value2 }) => {
+    setValue(value2);
+  }, []);
+  const scrollToItemFromUrl = React__namespace.useCallback(() => {
+    const hash = window.location.hash.replace("#", "");
+    if (!hash) {
+      return;
+    }
+    const itemToScroll = items.find((item) => item.id === hash);
+    if (itemToScroll) {
+      const el = document.getElementById(itemToScroll.id);
+      if (el) {
+        el.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+      setValue([itemToScroll.id]);
+    }
+  }, [items]);
+  return React__namespace.useMemo(() => {
+    return {
+      value,
+      onValueChange,
+      scrollToItemFromUrl
+    };
+  }, [value, onValueChange, scrollToItemFromUrl]);
+}
+
+exports.AccordionItem = AccordionItem;
+exports.AccordionItemContent = AccordionItemContent;
+exports.AccordionItemTrigger = AccordionItemTrigger;
+exports.AccordionRoot = AccordionRoot;
+exports.useAccordion = useAccordion;

package/dist/accordion.d.cts

@@ -0,0 +1,74 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as React from 'react';
+
+interface AccordionRootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'dir'> {
+    /** Open multiple items simultaneously. Defaults to true. */
+    readonly multiple?: boolean;
+    /** Controlled open items (array of `value` strings). */
+    readonly value?: Array<string>;
+    /** Uncontrolled initial open items. */
+    readonly defaultValue?: Array<string>;
+    /**
+     * Called when open items change.
+     * Wraps the value in `{ value }` to stay compatible with the Chakra callback shape
+     * that consumers already rely on.
+     */
+    readonly onValueChange?: (details: {
+        value: Array<string>;
+    }) => void;
+    readonly variant?: 'outline' | 'faq';
+    readonly size?: 'sm' | 'md';
+    /** Accepted for compatibility; not applied visually. */
+    readonly noAnimation?: boolean;
+    /** Accepted for compatibility; Radix defers rendering internally. */
+    readonly lazyMount?: boolean;
+    readonly children?: React.ReactNode;
+    readonly position?: string;
+    readonly w?: string;
+    readonly bgColor?: string | Record<string, string>;
+    readonly borderRadius?: string;
+}
+declare const AccordionRoot: React.ForwardRefExoticComponent<AccordionRootProps & React.RefAttributes<HTMLDivElement>>;
+interface AccordionItemProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
+    as?: string;
+    _first?: Record<string, unknown>;
+    _last?: Record<string, unknown>;
+    display?: string;
+}
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+interface AccordionItemTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>, 'dir'> {
+    readonly indicatorPlacement?: 'start' | 'end';
+    readonly noIndicator?: boolean;
+    readonly variant?: 'outline' | 'faq';
+    px?: number | string;
+    py?: number | string;
+    _hover?: Record<string, string>;
+    wordBreak?: string;
+    textAlign?: string;
+    cursor?: string;
+    display?: string;
+    alignItems?: string;
+    columnGap?: number | string;
+}
+declare const AccordionItemTrigger: React.ForwardRefExoticComponent<AccordionItemTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface AccordionItemContentProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
+    pb?: number | string;
+    pr?: number | string;
+    pl?: string;
+    w?: string;
+    display?: string;
+    flexDir?: string;
+    rowGap?: number | string;
+}
+declare const AccordionItemContent: React.ForwardRefExoticComponent<AccordionItemContentProps & React.RefAttributes<HTMLDivElement>>;
+declare function useAccordion(items: Array<{
+    id: string;
+}>): {
+    value: string[];
+    onValueChange: ({ value }: {
+        value: Array<string>;
+    }) => void;
+    scrollToItemFromUrl: () => void;
+};
+
+export { AccordionItem, AccordionItemContent, type AccordionItemContentProps, AccordionItemTrigger, AccordionRoot, useAccordion };

package/dist/accordion.d.ts

@@ -0,0 +1,74 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as React from 'react';
+
+interface AccordionRootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'dir'> {
+    /** Open multiple items simultaneously. Defaults to true. */
+    readonly multiple?: boolean;
+    /** Controlled open items (array of `value` strings). */
+    readonly value?: Array<string>;
+    /** Uncontrolled initial open items. */
+    readonly defaultValue?: Array<string>;
+    /**
+     * Called when open items change.
+     * Wraps the value in `{ value }` to stay compatible with the Chakra callback shape
+     * that consumers already rely on.
+     */
+    readonly onValueChange?: (details: {
+        value: Array<string>;
+    }) => void;
+    readonly variant?: 'outline' | 'faq';
+    readonly size?: 'sm' | 'md';
+    /** Accepted for compatibility; not applied visually. */
+    readonly noAnimation?: boolean;
+    /** Accepted for compatibility; Radix defers rendering internally. */
+    readonly lazyMount?: boolean;
+    readonly children?: React.ReactNode;
+    readonly position?: string;
+    readonly w?: string;
+    readonly bgColor?: string | Record<string, string>;
+    readonly borderRadius?: string;
+}
+declare const AccordionRoot: React.ForwardRefExoticComponent<AccordionRootProps & React.RefAttributes<HTMLDivElement>>;
+interface AccordionItemProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
+    as?: string;
+    _first?: Record<string, unknown>;
+    _last?: Record<string, unknown>;
+    display?: string;
+}
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+interface AccordionItemTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>, 'dir'> {
+    readonly indicatorPlacement?: 'start' | 'end';
+    readonly noIndicator?: boolean;
+    readonly variant?: 'outline' | 'faq';
+    px?: number | string;
+    py?: number | string;
+    _hover?: Record<string, string>;
+    wordBreak?: string;
+    textAlign?: string;
+    cursor?: string;
+    display?: string;
+    alignItems?: string;
+    columnGap?: number | string;
+}
+declare const AccordionItemTrigger: React.ForwardRefExoticComponent<AccordionItemTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface AccordionItemContentProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
+    pb?: number | string;
+    pr?: number | string;
+    pl?: string;
+    w?: string;
+    display?: string;
+    flexDir?: string;
+    rowGap?: number | string;
+}
+declare const AccordionItemContent: React.ForwardRefExoticComponent<AccordionItemContentProps & React.RefAttributes<HTMLDivElement>>;
+declare function useAccordion(items: Array<{
+    id: string;
+}>): {
+    value: string[];
+    onValueChange: ({ value }: {
+        value: Array<string>;
+    }) => void;
+    scrollToItemFromUrl: () => void;
+};
+
+export { AccordionItem, AccordionItemContent, type AccordionItemContentProps, AccordionItemTrigger, AccordionRoot, useAccordion };

package/dist/accordion.js

@@ -0,0 +1,186 @@
+"use client";
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/accordion.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var IndicatorIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var AccordionRoot = React.forwardRef(
+  function AccordionRoot2(props, ref) {
+    const {
+      multiple: _multiple,
+      value,
+      defaultValue,
+      onValueChange,
+      variant,
+      size,
+      noAnimation: _noAnimation,
+      lazyMount: _lazyMount,
+      className,
+      children,
+      position: _position,
+      w: _w,
+      bgColor: _bgColor,
+      borderRadius: _borderRadius,
+      ...rest
+    } = props;
+    const handleValueChange = React.useCallback(
+      (next) => {
+        onValueChange?.({ value: next });
+      },
+      [onValueChange]
+    );
+    return /* @__PURE__ */ jsx(
+      AccordionPrimitive.Root,
+      {
+        ref,
+        type: "multiple",
+        value,
+        defaultValue,
+        onValueChange: handleValueChange,
+        className: cn(
+          "w-full",
+          variant === "faq" && "accordion-faq",
+          size === "sm" && "accordion-sm",
+          className
+        ),
+        "data-variant": variant,
+        "data-size": size,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var AccordionItem = React.forwardRef(
+  function AccordionItem2(props, ref) {
+    const { className, as: _as, _first, _last, display: _display, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      AccordionPrimitive.Item,
+      {
+        ref,
+        className: cn(
+          "border-b border-[var(--color-border-divider)]",
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+var AccordionItemTrigger = React.forwardRef(function AccordionItemTrigger2(props, ref) {
+  const {
+    children,
+    indicatorPlacement: indicatorPlacementProp,
+    variant,
+    noIndicator,
+    className,
+    // Strip Chakra style props
+    px: _px,
+    py: _py,
+    _hover,
+    wordBreak: _wordBreak,
+    textAlign: _textAlign,
+    cursor: _cursor,
+    display: _display,
+    alignItems: _alignItems,
+    columnGap: _columnGap,
+    ...rest
+  } = props;
+  const indicatorPlacement = variant === "faq" ? "start" : indicatorPlacementProp ?? "end";
+  const indicator = variant === "faq" ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "relative inline-block h-3 w-3 shrink-0",
+        // horizontal bar (always visible)
+        "before:absolute before:left-0 before:top-1/2 before:block before:h-[2px] before:w-full before:-translate-y-1/2 before:rounded-[2px] before:bg-current",
+        // vertical bar (rotates to 0 when open)
+        "after:absolute after:left-1/2 after:top-0 after:block after:h-full after:w-[2px]",
+        "after:-translate-x-1/2 after:rounded-[2px] after:bg-current",
+        "after:transition-transform after:duration-200 after:ease-in-out",
+        // When parent trigger has data-state="open", rotate vertical bar
+        "group-data-[state=open]/trigger:after:rotate-90"
+      )
+    }
+  ) : /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex shrink-0 transition-transform duration-200",
+        "rotate-180",
+        "group-data-[state=open]/trigger:rotate-[270deg]"
+      ),
+      children: /* @__PURE__ */ jsx(IndicatorIcon, { className: "h-5 w-5" })
+    }
+  );
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { asChild: true, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        "group/trigger flex w-full cursor-pointer items-center gap-2 py-3 text-left text-[var(--color-text-primary)]",
+        "hover:text-[var(--color-hover)]",
+        "focus-visible:outline-none",
+        className
+      ),
+      ...rest,
+      children: [
+        indicatorPlacement === "start" && !noIndicator && indicator,
+        children,
+        indicatorPlacement === "end" && !noIndicator && indicator
+      ]
+    }
+  ) }) });
+});
+var AccordionItemContent = React.forwardRef(function AccordionItemContent2(props, ref) {
+  const { className, children, pb: _pb, pr: _pr, pl: _pl, w: _w, display: _display, flexDir: _flexDir, rowGap: _rowGap, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "overflow-hidden text-[var(--color-text-primary)]",
+        "data-[state=open]:animate-accordion-down",
+        "data-[state=closed]:animate-accordion-up",
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { className: "pb-3", children })
+    }
+  );
+});
+function useAccordion(items) {
+  const [value, setValue] = React.useState([]);
+  const onValueChange = React.useCallback(({ value: value2 }) => {
+    setValue(value2);
+  }, []);
+  const scrollToItemFromUrl = React.useCallback(() => {
+    const hash = window.location.hash.replace("#", "");
+    if (!hash) {
+      return;
+    }
+    const itemToScroll = items.find((item) => item.id === hash);
+    if (itemToScroll) {
+      const el = document.getElementById(itemToScroll.id);
+      if (el) {
+        el.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+      setValue([itemToScroll.id]);
+    }
+  }, [items]);
+  return React.useMemo(() => {
+    return {
+      value,
+      onValueChange,
+      scrollToItemFromUrl
+    };
+  }, [value, onValueChange, scrollToItemFromUrl]);
+}
+
+export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, useAccordion };