@luxfi/ui 8.2.7 → 8.2.9

package/dist/alert.cjs

@@ -2,9 +2,11 @@
 'use strict';
 
 var gui = require('@hanzo/gui');
-var React2 = require('react');
+var React = require('react');
+var closeButton_cjs = require('./close-button.cjs');
+var ink_cjs = require('./ink.cjs');
+var skeleton_cjs = require('./skeleton.cjs');
 var jsxRuntime = require('react/jsx-runtime');
-var ui = require('@hanzo/ui');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -24,128 +26,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-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",
-  render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close" }),
-  role: "button",
-  cursor: "pointer",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: 20,
-  height: 20,
-  minWidth: 0,
-  flexShrink: 1,
-  padding: 0,
-  borderRadius: 4,
-  borderWidth: 0,
-  overflow: "hidden",
-  backgroundColor: "transparent",
-  hoverStyle: {
-    backgroundColor: "transparent"
-  },
-  variants: {
-    disabled: {
-      true: {
-        opacity: 0.4,
-        pointerEvents: "none"
-      }
-    }
-  }
-});
-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,
-      ...rest,
-      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
-        {
-          width: 20,
-          height: 20,
-          viewBox: "0 0 20 20",
-          fill: "none",
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              d: CLOSE_ICON_PATH,
-              fill: "currentColor"
-            }
-          )
-        }
-      )
-    }
-  );
-});
-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);
-};
-var SKELETON_CLASSES = "lux-skeleton rounded-sm";
-var Skeleton = React2__namespace.forwardRef(
-  function Skeleton2(props, ref) {
-    const { loading = true, asChild, className, children, style, ...rest } = props;
-    if (!loading) {
-      if (asChild && React2__namespace.isValidElement(children)) return children;
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { ref, className, style, ...rest, children });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        "data-loading": true,
-        ...ui.sx(
-          SKELETON_CLASSES,
-          asChild || children ? "[&_*]:invisible" : "min-h-5",
-          className
-        ),
-        style,
-        ...rest,
-        children
-      }
-    );
-  }
-);
-React2__namespace.forwardRef(
-  function SkeletonCircle2(props, ref) {
-    const { size = 40, loading = true, className, ...rest } = props;
-    const dimension = typeof size === "number" ? `${size}px` : size;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton,
-      {
-        ref,
-        loading,
-        ...ui.sx("rounded-full shrink-0", className),
-        style: { width: dimension, height: dimension, ...rest.style },
-        ...rest
-      }
-    );
-  }
-);
-React2__namespace.forwardRef(
-  function SkeletonText2(props, ref) {
-    const { noOfLines = 3, loading = true, className, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { ref, className: ui.cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton,
-      {
-        loading,
-        ...ui.sx(ui.cn("h-4", index === noOfLines - 1 && "max-w-[80%]"))
-      },
-      index
-    )) });
-  }
-);
 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%",
@@ -171,7 +53,7 @@ var INDICATOR_SIZE = {
   sm: { marginVertical: 0 },
   md: { marginVertical: 2 }
 };
-var Alert = React2__namespace.forwardRef(
+var Alert = React__namespace.forwardRef(
   function Alert2(props, ref) {
     const {
       title,
@@ -196,7 +78,7 @@ var Alert = React2__namespace.forwardRef(
     if (_mb !== void 0) shimStyle.marginBottom = typeof _mb === "number" ? `${_mb * 4}px` : _mb;
     if (_mt !== void 0) shimStyle.marginTop = typeof _mt === "number" ? `${_mt * 4}px` : _mt;
     const alertStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
-    const [isOpen, setIsOpen] = React2__namespace.useState(true);
+    const [isOpen, setIsOpen] = React__namespace.useState(true);
     const resolvedSize = size ?? "md";
     const fontSize = SIZE[resolvedSize].fontSize;
     const defaultIcon = /* @__PURE__ */ jsxRuntime.jsx(IndicatorIcon, {});
@@ -222,7 +104,7 @@ var Alert = React2__namespace.forwardRef(
         }
       );
     })();
-    const handleClose = React2__namespace.useCallback(() => {
+    const handleClose = React__namespace.useCallback(() => {
       setIsOpen(false);
       onClose?.();
     }, [onClose]);
@@ -250,7 +132,7 @@ var Alert = React2__namespace.forwardRef(
       ...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(
+    return /* @__PURE__ */ jsxRuntime.jsx(skeleton_cjs.Skeleton, { loading, children: /* @__PURE__ */ jsxRuntime.jsxs(
       gui.XStack,
       {
         ref,
@@ -271,12 +153,12 @@ var Alert = React2__namespace.forwardRef(
                 className: descClassName,
                 style: Object.keys(descStyle).length > 0 ? descStyle : void 0,
                 ...descRest,
-                children: ink(children, void 0, { fontSize, color: ALERT_FG })
+                children: ink_cjs.ink(children, void 0, { fontSize, color: ALERT_FG })
               }
             )
           ] }) : /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { flex: 1, fontWeight: "600", fontSize, color: ALERT_FG, children: title }),
           endElement,
-          closable && /* @__PURE__ */ jsxRuntime.jsx(gui.View, { position: "relative", alignSelf: "flex-start", children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: handleClose }) })
+          closable && /* @__PURE__ */ jsxRuntime.jsx(gui.View, { position: "relative", alignSelf: "flex-start", children: /* @__PURE__ */ jsxRuntime.jsx(closeButton_cjs.CloseButton, { onClick: handleClose }) })
         ]
       }
     ) });

package/dist/alert.js

@@ -1,130 +1,11 @@
 'use client';
-import { styled, View, XStack, YStack, Text } from '@hanzo/gui';
-import * as React2 from 'react';
-import { Children, createElement } from 'react';
+import { XStack, YStack, Text, View } from '@hanzo/gui';
+import * as React from 'react';
+import { CloseButton } from './close-button.js';
+import { ink } from './ink.js';
+import { Skeleton } from './skeleton.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Box, sx, cn } from '@hanzo/ui';
 
-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 = styled(View, {
-  name: "LuxCloseButton",
-  render: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close" }),
-  role: "button",
-  cursor: "pointer",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: 20,
-  height: 20,
-  minWidth: 0,
-  flexShrink: 1,
-  padding: 0,
-  borderRadius: 4,
-  borderWidth: 0,
-  overflow: "hidden",
-  backgroundColor: "transparent",
-  hoverStyle: {
-    backgroundColor: "transparent"
-  },
-  variants: {
-    disabled: {
-      true: {
-        opacity: 0.4,
-        pointerEvents: "none"
-      }
-    }
-  }
-});
-var CloseButton = React2.forwardRef(function CloseButton2(props, ref) {
-  const { variant: _variant, size: _size, className, children, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    CloseButtonFrame,
-    {
-      ref,
-      className,
-      ...rest,
-      children: children ?? /* @__PURE__ */ jsx(
-        "svg",
-        {
-          width: 20,
-          height: 20,
-          viewBox: "0 0 20 20",
-          fill: "none",
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: CLOSE_ICON_PATH,
-              fill: "currentColor"
-            }
-          )
-        }
-      )
-    }
-  );
-});
-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 SKELETON_CLASSES = "lux-skeleton rounded-sm";
-var Skeleton = React2.forwardRef(
-  function Skeleton2(props, ref) {
-    const { loading = true, asChild, className, children, style, ...rest } = props;
-    if (!loading) {
-      if (asChild && React2.isValidElement(children)) return children;
-      return /* @__PURE__ */ jsx(Box, { ref, className, style, ...rest, children });
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        "data-loading": true,
-        ...sx(
-          SKELETON_CLASSES,
-          asChild || children ? "[&_*]:invisible" : "min-h-5",
-          className
-        ),
-        style,
-        ...rest,
-        children
-      }
-    );
-  }
-);
-React2.forwardRef(
-  function SkeletonCircle2(props, ref) {
-    const { size = 40, loading = true, className, ...rest } = props;
-    const dimension = typeof size === "number" ? `${size}px` : size;
-    return /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        ref,
-        loading,
-        ...sx("rounded-full shrink-0", className),
-        style: { width: dimension, height: dimension, ...rest.style },
-        ...rest
-      }
-    );
-  }
-);
-React2.forwardRef(
-  function SkeletonText2(props, ref) {
-    const { noOfLines = 3, loading = true, className, ...rest } = props;
-    return /* @__PURE__ */ jsx(Box, { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        loading,
-        ...sx(cn("h-4", index === noOfLines - 1 && "max-w-[80%]"))
-      },
-      index
-    )) });
-  }
-);
 var IndicatorIcon = () => /* @__PURE__ */ jsx("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ 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%",
@@ -150,7 +31,7 @@ var INDICATOR_SIZE = {
   sm: { marginVertical: 0 },
   md: { marginVertical: 2 }
 };
-var Alert = React2.forwardRef(
+var Alert = React.forwardRef(
   function Alert2(props, ref) {
     const {
       title,
@@ -175,7 +56,7 @@ var Alert = React2.forwardRef(
     if (_mb !== void 0) shimStyle.marginBottom = typeof _mb === "number" ? `${_mb * 4}px` : _mb;
     if (_mt !== void 0) shimStyle.marginTop = typeof _mt === "number" ? `${_mt * 4}px` : _mt;
     const alertStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
-    const [isOpen, setIsOpen] = React2.useState(true);
+    const [isOpen, setIsOpen] = React.useState(true);
     const resolvedSize = size ?? "md";
     const fontSize = SIZE[resolvedSize].fontSize;
     const defaultIcon = /* @__PURE__ */ jsx(IndicatorIcon, {});
@@ -201,7 +82,7 @@ var Alert = React2.forwardRef(
         }
       );
     })();
-    const handleClose = React2.useCallback(() => {
+    const handleClose = React.useCallback(() => {
       setIsOpen(false);
       onClose?.();
     }, [onClose]);