@luxfi/ui 7.4.10 → 7.4.11

package/dist/accordion.cjs

@@ -1,10 +1,8 @@
 "use client";
 'use strict';
 
-var AccordionPrimitive = require('@radix-ui/react-accordion');
+var gui = require('@hanzo/gui');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -25,185 +23,128 @@ function _interopNamespace(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 ink = (children, Wrap = gui.Text, props = {}) => {
+  let hasText = false;
+  React.Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return React.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? React.createElement(Wrap, props, child) : child);
+};
+var IndicatorIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", 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 BAR = "var(--color-text-primary)";
+var Indicator = ({ open, variant }) => variant === "faq" ? /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { width: 12, height: 12, flexShrink: 0, alignItems: "center", justifyContent: "center", position: "relative", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(gui.View, { position: "absolute", width: "100%", height: 2, borderRadius: 2, backgroundColor: BAR }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    gui.View,
+    {
+      position: "absolute",
+      width: 2,
+      height: "100%",
+      borderRadius: 2,
+      backgroundColor: BAR,
+      rotate: open ? "90deg" : "0deg"
+    }
+  )
+] }) : /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { flexShrink: 0, alignItems: "center", rotate: open ? "270deg" : "180deg", children: /* @__PURE__ */ jsxRuntime.jsx(IndicatorIcon, {}) });
+var Variant = React__namespace.createContext(void 0);
+var AccordionRoot = ({
+  value,
+  defaultValue,
+  onValueChange,
+  variant,
+  size,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsxRuntime.jsx(Variant.Provider, { value: variant, children: /* @__PURE__ */ jsxRuntime.jsx(
+  gui.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__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 AccordionItem = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  gui.Accordion.Item,
+  {
+    unstyled: true,
+    borderBottomWidth: 1,
+    borderColor: "var(--color-border-divider)",
+    ...props
   }
 );
-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,
+var AccordionItemTrigger = ({
+  children,
+  indicatorPlacement: placementProp,
+  variant: variantProp,
+  noIndicator,
+  headingLevel = 3,
+  ...rest
+}) => {
+  const variant = variantProp ?? React__namespace.useContext(Variant);
+  const placement = variant === "faq" ? "start" : placementProp ?? "end";
+  return /* @__PURE__ */ jsxRuntime.jsx(gui.Accordion.Header, { unstyled: true, render: `h${headingLevel}`, "aria-level": headingLevel, display: "flex", width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
+    gui.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        placement === "start" && !noIndicator && /* @__PURE__ */ jsxRuntime.jsx(Indicator, { open, variant }),
+        ink(children, void 0, { color: "inherit", textAlign: "left" }),
+        placement === "end" && !noIndicator && /* @__PURE__ */ jsxRuntime.jsx(Indicator, { open, variant })
+      ] }))
     }
-  ) }) });
-});
-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 })
-    }
-  );
-});
+  ) });
+};
+var AccordionItemContent = ({ children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  gui.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__namespace.useState([]);
-  const onValueChange = React__namespace.useCallback(({ value: value2 }) => {
-    setValue(value2);
+  const onValueChange = React__namespace.useCallback(({ value: next }) => {
+    setValue(next);
   }, []);
   const scrollToItemFromUrl = React__namespace.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__namespace.useMemo(() => {
-    return {
-      value,
-      onValueChange,
-      scrollToItemFromUrl
-    };
-  }, [value, onValueChange, scrollToItemFromUrl]);
+  return React__namespace.useMemo(
+    () => ({ value, onValueChange, scrollToItemFromUrl }),
+    [value, onValueChange, scrollToItemFromUrl]
+  );
 }
 
 exports.AccordionItem = AccordionItem;

package/dist/accordion.d.cts

@@ -1,74 +1,41 @@
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { Accordion } from '@hanzo/gui';
 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). */
+interface AccordionRootProps extends Omit<React.ComponentProps<typeof Accordion>, 'type' | 'value' | 'defaultValue' | 'onValueChange' | 'size'> {
+    /** Controlled open items. */
     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.
-     */
+    /** Fires with the full set of open items. */
     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'> {
+declare const AccordionRoot: ({ value, defaultValue, onValueChange, variant, size, children, ...rest }: AccordionRootProps) => React.ReactElement;
+type AccordionItemProps = React.ComponentProps<typeof Accordion.Item>;
+declare const AccordionItem: (props: AccordionItemProps) => React.ReactElement;
+type AccordionItemTriggerProps = React.ComponentProps<typeof Accordion.Trigger> & {
     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>>;
+    readonly headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** The DOM button type — see (3) above. Defaults to `button`, not submit. */
+    readonly type?: 'button' | 'submit' | 'reset';
+};
+declare const AccordionItemTrigger: ({ children, indicatorPlacement: placementProp, variant: variantProp, noIndicator, headingLevel, ...rest }: AccordionItemTriggerProps) => React.ReactElement;
+type AccordionItemContentProps = React.ComponentProps<typeof Accordion.Content>;
+declare const AccordionItemContent: ({ children, ...rest }: AccordionItemContentProps) => React.ReactElement;
+/** Open state for an accordion whose items are addressable by URL fragment. */
 declare function useAccordion(items: Array<{
     id: string;
 }>): {
     value: string[];
-    onValueChange: ({ value }: {
+    onValueChange: ({ value: next }: {
         value: Array<string>;
     }) => void;
     scrollToItemFromUrl: () => void;
 };
 
-export { AccordionItem, AccordionItemContent, type AccordionItemContentProps, AccordionItemTrigger, AccordionRoot, useAccordion };
+export { AccordionItem, AccordionItemContent, type AccordionItemContentProps, type AccordionItemProps, AccordionItemTrigger, type AccordionItemTriggerProps, AccordionRoot, type AccordionRootProps, useAccordion };

package/dist/accordion.d.ts

@@ -1,74 +1,41 @@
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { Accordion } from '@hanzo/gui';
 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). */
+interface AccordionRootProps extends Omit<React.ComponentProps<typeof Accordion>, 'type' | 'value' | 'defaultValue' | 'onValueChange' | 'size'> {
+    /** Controlled open items. */
     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.
-     */
+    /** Fires with the full set of open items. */
     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'> {
+declare const AccordionRoot: ({ value, defaultValue, onValueChange, variant, size, children, ...rest }: AccordionRootProps) => React.ReactElement;
+type AccordionItemProps = React.ComponentProps<typeof Accordion.Item>;
+declare const AccordionItem: (props: AccordionItemProps) => React.ReactElement;
+type AccordionItemTriggerProps = React.ComponentProps<typeof Accordion.Trigger> & {
     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>>;
+    readonly headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** The DOM button type — see (3) above. Defaults to `button`, not submit. */
+    readonly type?: 'button' | 'submit' | 'reset';
+};
+declare const AccordionItemTrigger: ({ children, indicatorPlacement: placementProp, variant: variantProp, noIndicator, headingLevel, ...rest }: AccordionItemTriggerProps) => React.ReactElement;
+type AccordionItemContentProps = React.ComponentProps<typeof Accordion.Content>;
+declare const AccordionItemContent: ({ children, ...rest }: AccordionItemContentProps) => React.ReactElement;
+/** Open state for an accordion whose items are addressable by URL fragment. */
 declare function useAccordion(items: Array<{
     id: string;
 }>): {
     value: string[];
-    onValueChange: ({ value }: {
+    onValueChange: ({ value: next }: {
         value: Array<string>;
     }) => void;
     scrollToItemFromUrl: () => void;
 };
 
-export { AccordionItem, AccordionItemContent, type AccordionItemContentProps, AccordionItemTrigger, AccordionRoot, useAccordion };
+export { AccordionItem, AccordionItemContent, type AccordionItemContentProps, type AccordionItemProps, AccordionItemTrigger, type AccordionItemTriggerProps, AccordionRoot, type AccordionRootProps, useAccordion };