@luxfi/ui 7.4.9 → 7.4.11

package/dist/accordion.js

@@ -1,186 +1,129 @@
 "use client";
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { Accordion, Text, XStack, View } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { Children, createElement } from 'react';
+import { jsx, jsxs, Fragment } 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 ink = (children, Wrap = Text, props = {}) => {
+  let hasText = false;
+  Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? createElement(Wrap, props, child) : child);
+};
+var IndicatorIcon = () => /* @__PURE__ */ jsx("svg", { width: "20", height: "20", 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 BAR = "var(--color-text-primary)";
+var Indicator = ({ open, variant }) => variant === "faq" ? /* @__PURE__ */ jsxs(XStack, { width: 12, height: 12, flexShrink: 0, alignItems: "center", justifyContent: "center", position: "relative", children: [
+  /* @__PURE__ */ jsx(View, { position: "absolute", width: "100%", height: 2, borderRadius: 2, backgroundColor: BAR }),
+  /* @__PURE__ */ jsx(
+    View,
+    {
+      position: "absolute",
+      width: 2,
+      height: "100%",
+      borderRadius: 2,
+      backgroundColor: BAR,
+      rotate: open ? "90deg" : "0deg"
+    }
+  )
+] }) : /* @__PURE__ */ jsx(XStack, { flexShrink: 0, alignItems: "center", rotate: open ? "270deg" : "180deg", children: /* @__PURE__ */ jsx(IndicatorIcon, {}) });
+var Variant = React.createContext(void 0);
+var AccordionRoot = ({
+  value,
+  defaultValue,
+  onValueChange,
+  variant,
+  size,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsx(Variant.Provider, { value: variant, children: /* @__PURE__ */ jsx(
+  Accordion,
+  {
+    unstyled: true,
+    type: "multiple",
+    width: "100%",
+    value,
+    defaultValue,
+    onValueChange: onValueChange ? (next) => onValueChange({ value: next }) : void 0,
+    "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 AccordionItem = (props) => /* @__PURE__ */ jsx(
+  Accordion.Item,
+  {
+    unstyled: true,
+    borderBottomWidth: 1,
+    borderColor: "var(--color-border-divider)",
+    ...props
   }
 );
-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,
+var AccordionItemTrigger = ({
+  children,
+  indicatorPlacement: placementProp,
+  variant: variantProp,
+  noIndicator,
+  headingLevel = 3,
+  ...rest
+}) => {
+  const variant = variantProp ?? React.useContext(Variant);
+  const placement = variant === "faq" ? "start" : placementProp ?? "end";
+  return /* @__PURE__ */ jsx(Accordion.Header, { unstyled: true, render: `h${headingLevel}`, "aria-level": headingLevel, display: "flex", width: "100%", children: /* @__PURE__ */ jsx(
+    Accordion.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
-      ),
+      unstyled: true,
+      type: "button",
+      width: "100%",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+      paddingVertical: 12,
+      paddingHorizontal: 0,
+      borderWidth: 0,
+      backgroundColor: "transparent",
+      cursor: "pointer",
+      className: "lux-accordion-trigger",
       ...rest,
-      children: [
-        indicatorPlacement === "start" && !noIndicator && indicator,
-        children,
-        indicatorPlacement === "end" && !noIndicator && indicator
-      ]
+      children: (({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        placement === "start" && !noIndicator && /* @__PURE__ */ jsx(Indicator, { open, variant }),
+        ink(children, void 0, { color: "inherit", textAlign: "left" }),
+        placement === "end" && !noIndicator && /* @__PURE__ */ jsx(Indicator, { open, variant })
+      ] }))
     }
-  ) }) });
-});
-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 })
-    }
-  );
-});
+  ) });
+};
+var AccordionItemContent = ({ children, ...rest }) => /* @__PURE__ */ jsx(
+  Accordion.Content,
+  {
+    unstyled: true,
+    overflow: "hidden",
+    paddingBottom: 12,
+    backgroundColor: "transparent",
+    ...rest,
+    children: ink(children, void 0, { color: "var(--color-text-primary)" })
+  }
+);
 function useAccordion(items) {
   const [value, setValue] = React.useState([]);
-  const onValueChange = React.useCallback(({ value: value2 }) => {
-    setValue(value2);
+  const onValueChange = React.useCallback(({ value: next }) => {
+    setValue(next);
   }, []);
   const scrollToItemFromUrl = React.useCallback(() => {
     const hash = window.location.hash.replace("#", "");
-    if (!hash) {
-      return;
-    }
+    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]);
-    }
+    if (!itemToScroll) return;
+    document.getElementById(itemToScroll.id)?.scrollIntoView({ behavior: "smooth", block: "start" });
+    setValue([itemToScroll.id]);
   }, [items]);
-  return React.useMemo(() => {
-    return {
-      value,
-      onValueChange,
-      scrollToItemFromUrl
-    };
-  }, [value, onValueChange, scrollToItemFromUrl]);
+  return React.useMemo(
+    () => ({ value, onValueChange, scrollToItemFromUrl }),
+    [value, onValueChange, scrollToItemFromUrl]
+  );
 }
 
 export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, useAccordion };