@luxfi/ui 7.4.10 → 7.4.12

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 };

package/dist/alert.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var React2 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var gui = require('@hanzo/gui');
-var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -28,9 +28,6 @@ function _interopNamespace(e) {
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
 // src/alert.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 CloseButtonFrame = gui.styled(gui.View, {
   name: "LuxCloseButton",
@@ -61,23 +58,19 @@ var CloseButtonFrame = gui.styled(gui.View, {
     }
   }
 });
-var CLOSE_BUTTON_CLASSES = [
-  "text-[var(--closeButton-fg,currentColor)]",
-  "hover:text-[var(--hover-color,currentColor)]",
-  "disabled:opacity-40"
-].join(" ");
 var CloseButton = React2__namespace.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     CloseButtonFrame,
     {
       ref,
-      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      className,
       ...rest,
       children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
         {
-          className: "size-5",
+          width: 20,
+          height: 20,
           viewBox: "0 0 20 20",
           fill: "none",
           "aria-hidden": "true",
@@ -93,6 +86,17 @@ var CloseButton = React2__namespace.forwardRef(function CloseButton2(props, ref)
     }
   );
 });
+var ink = (children, Wrap = gui.Text, props = {}) => {
+  let hasText = false;
+  React2.Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return React2.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? React2.createElement(Wrap, props, child) : child);
+};
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
 var SHIM_PROPS = [
   "w",
   "h",
@@ -276,22 +280,30 @@ React2__namespace.forwardRef(
     )) });
   }
 );
-var IndicatorIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 10a.75.75 0 011.5 0v3a.75.75 0 01-1.5 0v-3z" }) });
-var ALERT_BASE = "w-full flex items-start relative rounded text-[var(--color-alert-fg)]";
-var STATUS_CLASSES = {
-  info: "bg-[var(--color-alert-bg-info)]",
-  warning: "bg-[var(--color-alert-bg-warning)]",
-  warning_table: "bg-[var(--color-alert-bg-warning-table)]",
-  success: "bg-[var(--color-alert-bg-success)]",
-  error: "bg-[var(--color-alert-bg-error)]"
+var IndicatorIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 10a.75.75 0 011.5 0v3a.75.75 0 01-1.5 0v-3z" }) });
+var ALERT_BASE = {
+  width: "100%",
+  position: "relative",
+  alignItems: "flex-start",
+  borderRadius: 4,
+  gap: 8,
+  paddingVertical: 8
+};
+var ALERT_FG = "var(--color-alert-fg)";
+var STATUS_BG = {
+  info: "var(--color-alert-bg-info)",
+  warning: "var(--color-alert-bg-warning)",
+  warning_table: "var(--color-alert-bg-warning-table)",
+  success: "var(--color-alert-bg-success)",
+  error: "var(--color-alert-bg-error)"
 };
-var SIZE_CLASSES = {
-  sm: "gap-2 px-2 py-2 text-xs",
-  md: "gap-2 px-3 py-2 text-base"
+var SIZE = {
+  sm: { paddingHorizontal: 8, fontSize: 12 },
+  md: { paddingHorizontal: 12, fontSize: 16 }
 };
-var INDICATOR_SIZE_CLASSES = {
-  sm: "w-5 h-5 my-0",
-  md: "w-5 h-5 my-[2px]"
+var INDICATOR_SIZE = {
+  sm: { marginVertical: 0 },
+  md: { marginVertical: 2 }
 };
 var Alert = React2__namespace.forwardRef(
   function Alert2(props, ref) {
@@ -320,7 +332,8 @@ var Alert = React2__namespace.forwardRef(
     const alertStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
     const [isOpen, setIsOpen] = React2__namespace.useState(true);
     const resolvedSize = size ?? "md";
-    const defaultIcon = /* @__PURE__ */ jsxRuntime.jsx(IndicatorIcon, { className: "w-5 h-5" });
+    const fontSize = SIZE[resolvedSize].fontSize;
+    const defaultIcon = /* @__PURE__ */ jsxRuntime.jsx(IndicatorIcon, {});
     const iconElement = (() => {
       if (startElement !== void 0) {
         return startElement;
@@ -328,10 +341,20 @@ var Alert = React2__namespace.forwardRef(
       if (!showIcon && icon === void 0) {
         return null;
       }
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-        "inline-flex items-center justify-center shrink-0 text-[var(--color-alert-fg)] [&>svg]:w-full [&>svg]:h-full",
-        INDICATOR_SIZE_CLASSES[resolvedSize]
-      ), children: icon || defaultIcon });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        gui.XStack,
+        {
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          width: 20,
+          height: 20,
+          ...INDICATOR_SIZE[resolvedSize],
+          className: "lux-icon",
+          style: { color: ALERT_FG },
+          children: icon || defaultIcon
+        }
+      );
     })();
     const handleClose = React2__namespace.useCallback(() => {
       setIsOpen(false);
@@ -360,35 +383,34 @@ var Alert = React2__namespace.forwardRef(
       ...descRowGap !== void 0 ? { rowGap: typeof descRowGap === "number" ? `${descRowGap * 4}px` : descRowGap } : {},
       ...descColumnGap !== void 0 ? { columnGap: typeof descColumnGap === "number" ? `${descColumnGap * 4}px` : descColumnGap } : {}
     };
+    const ContentFrame = inline ? gui.XStack : gui.YStack;
     return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { loading, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      gui.XStack,
       {
         ref,
-        className: cn(ALERT_BASE, STATUS_CLASSES[status], SIZE_CLASSES[resolvedSize], className),
+        ...ALERT_BASE,
+        paddingHorizontal: SIZE[resolvedSize].paddingHorizontal,
+        backgroundColor: STATUS_BG[status],
+        className,
         style: alertStyle,
         ...alertRest,
         children: [
           iconElement,
-          children ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-1", inline ? "inline-flex flex-row items-center" : "flex flex-col"), children: [
-            title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold", children: title }),
+          children ? /* @__PURE__ */ jsxRuntime.jsxs(ContentFrame, { flex: 1, alignItems: inline ? "center" : void 0, children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontWeight: "600", fontSize, color: ALERT_FG, children: title }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+              gui.XStack,
               {
-                className: cn("inline-flex flex-wrap", descClassName),
+                flexWrap: "wrap",
+                className: descClassName,
                 style: Object.keys(descStyle).length > 0 ? descStyle : void 0,
                 ...descRest,
-                children
+                children: ink(children, void 0, { fontSize, color: ALERT_FG })
               }
             )
-          ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold flex-1", children: title }),
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { flex: 1, fontWeight: "600", fontSize, color: ALERT_FG, children: title }),
           endElement,
-          closable && /* @__PURE__ */ jsxRuntime.jsx(
-            CloseButton,
-            {
-              className: "relative self-start",
-              onClick: handleClose
-            }
-          )
+          closable && /* @__PURE__ */ jsxRuntime.jsx(gui.View, { position: "relative", alignSelf: "flex-start", children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: handleClose }) })
         ]
       }
     ) });