@luxfi/ui 7.4.10 → 7.4.12

package/dist/close-button.cjs

@@ -56,23 +56,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 = React__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",

package/dist/close-button.js

@@ -34,23 +34,19 @@ var CloseButtonFrame = styled(View, {
     }
   }
 });
-var CLOSE_BUTTON_CLASSES = [
-  "text-[var(--closeButton-fg,currentColor)]",
-  "hover:text-[var(--hover-color,currentColor)]",
-  "disabled:opacity-40"
-].join(" ");
 var CloseButton = React.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsx(
     CloseButtonFrame,
     {
       ref,
-      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      className,
       ...rest,
       children: children ?? /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "size-5",
+          width: 20,
+          height: 20,
           viewBox: "0 0 20 20",
           fill: "none",
           "aria-hidden": "true",

package/dist/collapsible.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var Collapsible = require('@radix-ui/react-collapsible');
+var gui = require('@hanzo/gui');
 var React3 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -25,7 +25,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var Collapsible__namespace = /*#__PURE__*/_interopNamespace(Collapsible);
 var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
 // src/collapsible.tsx
@@ -485,66 +484,76 @@ function useUpdateEffect(effect, deps) {
   }, deps);
 }
 function scrollToElement(id) {
-  const el = document.getElementById(id);
-  if (el) {
-    el.scrollIntoView({ behavior: "smooth", block: "start" });
-  }
+  document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
 }
 var CUT_ID = "CollapsibleDetails";
 var CollapsibleDetails = (props) => {
-  const { children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false, text: textProp, loading, noScroll, ...rest } = props;
+  const {
+    children,
+    id = CUT_ID,
+    onClick,
+    isExpanded: isExpandedProp = false,
+    text: textProp,
+    loading,
+    noScroll,
+    ...rest
+  } = props;
   const [isExpanded, setIsExpanded] = React3__namespace.default.useState(isExpandedProp);
   const handleClick = React3__namespace.default.useCallback((event) => {
     setIsExpanded((flag) => !flag);
-    if (!noScroll) {
-      scrollToElement(id);
-    }
+    if (!noScroll) scrollToElement(id);
     onClick?.(event);
   }, [id, noScroll, onClick]);
   useUpdateEffect(() => {
     setIsExpanded(isExpandedProp);
-    if (isExpandedProp && !noScroll) {
-      scrollToElement(id);
-    }
+    if (isExpandedProp && !noScroll) scrollToElement(id);
   }, [isExpandedProp, id, noScroll]);
   const text = isExpanded ? textProp?.[1] ?? "Hide details" : textProp?.[0] ?? "View details";
-  return /* @__PURE__ */ jsxRuntime.jsxs(Collapsible__namespace.Root, { open: isExpanded, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(gui.Collapsible, { open: isExpanded, onOpenChange: setIsExpanded, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       Link,
       {
         className: "text-sm underline decoration-dashed w-fit",
+        "aria-expanded": isExpanded,
         onClick: handleClick,
         loading,
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx("span", { id, children: text })
       }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Content, { children })
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(gui.Collapsible.Content, { children })
   ] });
 };
+var CUT_LENGTH = 3;
 var CollapsibleList = (props) => {
-  const CUT_LENGTH = 3;
-  const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, text: textProp, defaultExpanded = false, className, ...rest } = props;
+  const {
+    items,
+    renderItem,
+    triggerProps,
+    cutLength = CUT_LENGTH,
+    text: textProp,
+    defaultExpanded = false,
+    ...rest
+  } = props;
   const [isExpanded, setIsExpanded] = React3__namespace.default.useState(defaultExpanded);
   React3__namespace.default.useEffect(() => {
     setIsExpanded(defaultExpanded);
   }, [defaultExpanded]);
-  const handleToggle = React3__namespace.default.useCallback(() => {
-    setIsExpanded((flag) => !flag);
-  }, []);
+  const handleToggle = React3__namespace.default.useCallback(() => setIsExpanded((flag) => !flag), []);
   const text = isExpanded ? textProp?.[1] ?? "Hide" : textProp?.[0] ?? "Show all";
-  return /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Root, { open: isExpanded, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col w-full", className), ...rest, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { width: "100%", ...rest, children: [
     items.slice(0, isExpanded ? void 0 : cutLength).map(renderItem),
-    items.length > cutLength && /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    items.length > cutLength && /* @__PURE__ */ jsxRuntime.jsx(
       Link,
       {
         className: "text-sm underline decoration-dashed w-fit min-w-0",
+        "aria-expanded": isExpanded,
         onClick: handleToggle,
         ...triggerProps,
         children: text
       }
-    ) })
-  ] }) });
+    )
+  ] });
 };
 
 exports.CollapsibleDetails = CollapsibleDetails;

package/dist/collapsible.d.cts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { YStack } from '@hanzo/gui';
 import React__default from 'react';
 import { LinkProps } from './link.cjs';
 
@@ -10,7 +11,7 @@ interface CollapsibleDetailsProps extends LinkProps {
     noScroll?: boolean;
 }
 declare const CollapsibleDetails: (props: CollapsibleDetailsProps) => react_jsx_runtime.JSX.Element;
-interface CollapsibleListProps<T> extends React__default.ComponentPropsWithoutRef<'div'> {
+interface CollapsibleListProps<T> extends Omit<React__default.ComponentProps<typeof YStack>, 'children' | 'text' | 'items'> {
     items: Array<T>;
     renderItem: (item: T, index: number) => React__default.ReactNode;
     triggerProps?: LinkProps;

package/dist/collapsible.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { YStack } from '@hanzo/gui';
 import React__default from 'react';
 import { LinkProps } from './link.js';
 
@@ -10,7 +11,7 @@ interface CollapsibleDetailsProps extends LinkProps {
     noScroll?: boolean;
 }
 declare const CollapsibleDetails: (props: CollapsibleDetailsProps) => react_jsx_runtime.JSX.Element;
-interface CollapsibleListProps<T> extends React__default.ComponentPropsWithoutRef<'div'> {
+interface CollapsibleListProps<T> extends Omit<React__default.ComponentProps<typeof YStack>, 'children' | 'text' | 'items'> {
     items: Array<T>;
     renderItem: (item: T, index: number) => React__default.ReactNode;
     triggerProps?: LinkProps;

package/dist/collapsible.js

@@ -1,5 +1,5 @@
 "use client";
-import * as Collapsible from '@radix-ui/react-collapsible';
+import { Collapsible, YStack } from '@hanzo/gui';
 import * as React3 from 'react';
 import React3__default from 'react';
 import { clsx } from 'clsx';
@@ -463,66 +463,76 @@ function useUpdateEffect(effect, deps) {
   }, deps);
 }
 function scrollToElement(id) {
-  const el = document.getElementById(id);
-  if (el) {
-    el.scrollIntoView({ behavior: "smooth", block: "start" });
-  }
+  document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
 }
 var CUT_ID = "CollapsibleDetails";
 var CollapsibleDetails = (props) => {
-  const { children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false, text: textProp, loading, noScroll, ...rest } = props;
+  const {
+    children,
+    id = CUT_ID,
+    onClick,
+    isExpanded: isExpandedProp = false,
+    text: textProp,
+    loading,
+    noScroll,
+    ...rest
+  } = props;
   const [isExpanded, setIsExpanded] = React3__default.useState(isExpandedProp);
   const handleClick = React3__default.useCallback((event) => {
     setIsExpanded((flag) => !flag);
-    if (!noScroll) {
-      scrollToElement(id);
-    }
+    if (!noScroll) scrollToElement(id);
     onClick?.(event);
   }, [id, noScroll, onClick]);
   useUpdateEffect(() => {
     setIsExpanded(isExpandedProp);
-    if (isExpandedProp && !noScroll) {
-      scrollToElement(id);
-    }
+    if (isExpandedProp && !noScroll) scrollToElement(id);
   }, [isExpandedProp, id, noScroll]);
   const text = isExpanded ? textProp?.[1] ?? "Hide details" : textProp?.[0] ?? "View details";
-  return /* @__PURE__ */ jsxs(Collapsible.Root, { open: isExpanded, children: [
-    /* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Collapsible, { open: isExpanded, onOpenChange: setIsExpanded, children: [
+    /* @__PURE__ */ jsx(
       Link,
       {
         className: "text-sm underline decoration-dashed w-fit",
+        "aria-expanded": isExpanded,
         onClick: handleClick,
         loading,
         ...rest,
         children: /* @__PURE__ */ jsx("span", { id, children: text })
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsx(Collapsible.Content, { children })
   ] });
 };
+var CUT_LENGTH = 3;
 var CollapsibleList = (props) => {
-  const CUT_LENGTH = 3;
-  const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, text: textProp, defaultExpanded = false, className, ...rest } = props;
+  const {
+    items,
+    renderItem,
+    triggerProps,
+    cutLength = CUT_LENGTH,
+    text: textProp,
+    defaultExpanded = false,
+    ...rest
+  } = props;
   const [isExpanded, setIsExpanded] = React3__default.useState(defaultExpanded);
   React3__default.useEffect(() => {
     setIsExpanded(defaultExpanded);
   }, [defaultExpanded]);
-  const handleToggle = React3__default.useCallback(() => {
-    setIsExpanded((flag) => !flag);
-  }, []);
+  const handleToggle = React3__default.useCallback(() => setIsExpanded((flag) => !flag), []);
   const text = isExpanded ? textProp?.[1] ?? "Hide" : textProp?.[0] ?? "Show all";
-  return /* @__PURE__ */ jsx(Collapsible.Root, { open: isExpanded, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col w-full", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs(YStack, { width: "100%", ...rest, children: [
     items.slice(0, isExpanded ? void 0 : cutLength).map(renderItem),
-    items.length > cutLength && /* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+    items.length > cutLength && /* @__PURE__ */ jsx(
       Link,
       {
         className: "text-sm underline decoration-dashed w-fit min-w-0",
+        "aria-expanded": isExpanded,
         onClick: handleToggle,
         ...triggerProps,
         children: text
       }
-    ) })
-  ] }) });
+    )
+  ] });
 };
 
 export { CollapsibleDetails, CollapsibleList };

package/dist/dialog.cjs

@@ -61,23 +61,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",

package/dist/dialog.d.cts

@@ -57,7 +57,7 @@ declare const DialogBackdrop: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetF
     unstyled?: boolean | undefined;
     elevation?: number | _hanzogui_web.SizeTokens | undefined;
     fullscreen?: boolean | undefined;
-}>, "forceMount" | "scope"> & {
+}>, "scope" | "forceMount"> & {
     forceMount?: boolean;
 } & {
     scope?: _hanzo_gui.DialogScopes;

package/dist/dialog.d.ts

@@ -57,7 +57,7 @@ declare const DialogBackdrop: _hanzogui_web.GuiComponent<Omit<_hanzogui_web.GetF
     unstyled?: boolean | undefined;
     elevation?: number | _hanzogui_web.SizeTokens | undefined;
     fullscreen?: boolean | undefined;
-}>, "forceMount" | "scope"> & {
+}>, "scope" | "forceMount"> & {
     forceMount?: boolean;
 } & {
     scope?: _hanzo_gui.DialogScopes;

package/dist/dialog.js

@@ -39,23 +39,19 @@ var CloseButtonFrame = styled(View, {
     }
   }
 });
-var CLOSE_BUTTON_CLASSES = [
-  "text-[var(--closeButton-fg,currentColor)]",
-  "hover:text-[var(--hover-color,currentColor)]",
-  "disabled:opacity-40"
-].join(" ");
 var CloseButton = React2.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsx(
     CloseButtonFrame,
     {
       ref,
-      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      className,
       ...rest,
       children: children ?? /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "size-5",
+          width: 20,
+          height: 20,
           viewBox: "0 0 20 20",
           fill: "none",
           "aria-hidden": "true",