@luxfi/ui 5.5.2 → 5.6.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.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 };