@luxfi/ui 8.2.7 → 8.2.9

package/dist/select.js

@@ -1,72 +1,19 @@
 'use client';
 import { Select as Select$1 } from '@hanzo/gui';
-import { Box, sx, cn, css } from '@hanzo/ui';
+import { Box, cn, sx, css } from '@hanzo/ui';
 import { useDebounce } from '@uidotdev/usehooks';
-import * as React2 from 'react';
+import * as React from 'react';
+import { Skeleton } from './skeleton.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-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
-    )) });
-  }
-);
 function createListCollection(config) {
   return { items: config.items };
 }
 var ArrowIcon = (props) => /* @__PURE__ */ jsx("svg", { ...props, 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 CheckIcon = (props) => /* @__PURE__ */ jsx("svg", { ...props, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M16.667 5L7.5 14.167 3.333 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function FilterInput({ placeholder, initialValue = "", onChange }) {
-  const [value, setValue] = React2.useState(initialValue);
-  const handleChange = React2.useCallback((e) => {
+  const [value, setValue] = React.useState(initialValue);
+  const handleChange = React.useCallback((e) => {
     setValue(e.target.value);
     onChange?.(e.target.value);
   }, [onChange]);
@@ -86,15 +33,15 @@ function FilterInput({ placeholder, initialValue = "", onChange }) {
     }
   );
 }
-var SelectInternalContext = React2.createContext(null);
+var SelectInternalContext = React.createContext(null);
 function useSelectInternalContext() {
-  const ctx = React2.useContext(SelectInternalContext);
+  const ctx = React.useContext(SelectInternalContext);
   if (!ctx) {
     throw new Error("Select compound components must be rendered inside <SelectRoot>");
   }
   return ctx;
 }
-var SelectRoot = React2.forwardRef(
+var SelectRoot = React.forwardRef(
   function SelectRoot2(props, ref) {
     const {
       children,
@@ -125,21 +72,21 @@ var SelectRoot = React2.forwardRef(
       hideFrom: _hideFrom
     } = props;
     const collection = collectionProp ?? createListCollection({ items: [] });
-    const [internalValue, setInternalValue] = React2.useState(defaultValueArr ?? []);
+    const [internalValue, setInternalValue] = React.useState(defaultValueArr ?? []);
     const currentValue = valueProp ?? internalValue;
-    const selectedItems = React2.useMemo(() => {
+    const selectedItems = React.useMemo(() => {
       return currentValue.map((v) => collection.items.find((item) => item.value === v)).filter(Boolean);
     }, [currentValue, collection.items]);
-    const [open, setOpen] = React2.useState(defaultOpen ?? false);
+    const [open, setOpen] = React.useState(defaultOpen ?? false);
     const isOpen = openProp ?? open;
-    const handleOpenChange = React2.useCallback((nextOpen) => {
+    const handleOpenChange = React.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.(nextOpen);
       if (!nextOpen) {
         onInteractOutside?.();
       }
     }, [onOpenChange, onInteractOutside]);
-    const handleRadixValueChange = React2.useCallback((radixValue) => {
+    const handleRadixValueChange = React.useCallback((radixValue) => {
       const nextArr = [radixValue];
       if (!valueProp) {
         setInternalValue(nextArr);
@@ -147,7 +94,7 @@ var SelectRoot = React2.forwardRef(
       const items = collection.items.filter((item) => nextArr.includes(item.value));
       onValueChangeProp?.({ value: nextArr, items });
     }, [valueProp, collection.items, onValueChangeProp]);
-    const ctxValue = React2.useMemo(() => ({
+    const ctxValue = React.useMemo(() => ({
       value: currentValue,
       selectedItems,
       collection,
@@ -167,7 +114,7 @@ var SelectRoot = React2.forwardRef(
       if (typeof v === "string") return v;
       return v.base ?? v.lg ?? Object.values(v)[0];
     };
-    const inlineStyle = React2.useMemo(() => {
+    const inlineStyle = React.useMemo(() => {
       const s = { ...style };
       const rw = resolveVal(w);
       if (rw) s.width = rw;
@@ -204,7 +151,7 @@ var SelectRoot = React2.forwardRef(
     ) });
   }
 );
-var SelectControl = React2.forwardRef(
+var SelectControl = React.forwardRef(
   function SelectControl2(props, ref) {
     const { children, noIndicator, triggerProps, loading, defaultValue } = props;
     const ctx = useSelectInternalContext();
@@ -242,11 +189,11 @@ var SelectControl = React2.forwardRef(
     return trigger;
   }
 );
-var SelectClearTrigger = React2.forwardRef(
+var SelectClearTrigger = React.forwardRef(
   function SelectClearTrigger2(props, ref) {
     const { className, ...rest } = props;
     const ctx = useSelectInternalContext();
-    const handleClick = React2.useCallback(() => {
+    const handleClick = React.useCallback(() => {
       ctx.onValueChange({ value: [], items: [] });
     }, [ctx]);
     return /* @__PURE__ */ jsx(
@@ -264,7 +211,7 @@ var SelectClearTrigger = React2.forwardRef(
     );
   }
 );
-var SelectContent = React2.forwardRef(
+var SelectContent = React.forwardRef(
   function SelectContent2(props, _ref) {
     const { portalled: _portalled, portalRef: _portalRef, children, className, ...rest } = props;
     let n = 0;
@@ -287,13 +234,13 @@ var SelectContent = React2.forwardRef(
     );
   }
 );
-var stampIndices = (children, next) => React2.Children.map(children, (child) => {
-  if (!React2.isValidElement(child)) return child;
-  if (child.type === SelectItem) return React2.cloneElement(child, { index: next() });
+var stampIndices = (children, next) => React.Children.map(children, (child) => {
+  if (!React.isValidElement(child)) return child;
+  if (child.type === SelectItem) return React.cloneElement(child, { index: next() });
   const kids = child.props.children;
-  return kids === void 0 ? child : React2.cloneElement(child, void 0, stampIndices(kids, next));
+  return kids === void 0 ? child : React.cloneElement(child, void 0, stampIndices(kids, next));
 });
-var SelectItem = React2.forwardRef(
+var SelectItem = React.forwardRef(
   function SelectItem2(props, ref) {
     const { item, children, className, index, ...rest } = props;
     return /* @__PURE__ */ jsxs(
@@ -321,7 +268,7 @@ var SelectItem = React2.forwardRef(
     );
   }
 );
-var SelectValueText = React2.forwardRef(
+var SelectValueText = React.forwardRef(
   function SelectValueText2(props, ref) {
     const { children, size, required, invalid, errorText, mode, className, style, placeholder: placeholderProp, ...rest } = props;
     const ctx = useSelectInternalContext();
@@ -378,7 +325,7 @@ var SelectValueText = React2.forwardRef(
     );
   }
 );
-var SelectItemGroup = React2.forwardRef(
+var SelectItemGroup = React.forwardRef(
   function SelectItemGroup2(props, ref) {
     const { children, label, className, ...rest } = props;
     return /* @__PURE__ */ jsxs(Select$1.Group, { ref, ...sx("py-1", className), ...rest, children: [
@@ -389,7 +336,7 @@ var SelectItemGroup = React2.forwardRef(
 );
 var SelectLabel = Select$1.Label;
 var SelectItemText = Select$1.ItemText;
-var Select = React2.forwardRef((props, ref) => {
+var Select = React.forwardRef((props, ref) => {
   const { collection, placeholder, portalled = true, loading, errorText, contentProps, contentHeader, itemFilter, mode, ...rest } = props;
   return /* @__PURE__ */ jsxs(
     SelectRoot,
@@ -411,7 +358,7 @@ var Select = React2.forwardRef((props, ref) => {
         ) }),
         /* @__PURE__ */ jsxs(SelectContent, { portalled, ...contentProps, children: [
           contentHeader,
-          collection.items.filter(itemFilter ?? (() => true)).map((item) => /* @__PURE__ */ jsxs(React2.Fragment, { children: [
+          collection.items.filter(itemFilter ?? (() => true)).map((item) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
             /* @__PURE__ */ jsx(SelectItem, { item, children: item.renderLabel ? item.renderLabel("item") : item.label }),
             item.afterElement
           ] }, item.value))
@@ -420,19 +367,19 @@ var Select = React2.forwardRef((props, ref) => {
     }
   );
 });
-var SelectAsync = React2.forwardRef((props, ref) => {
+var SelectAsync = React.forwardRef((props, ref) => {
   const { placeholder, portalled = true, loading, loadOptions, extraControls, onValueChange, errorText, mode, contentHeader, ...rest } = props;
-  const [collection, setCollection] = React2.useState(createListCollection({ items: [] }));
-  const [inputValue, setInputValue] = React2.useState("");
-  const [value, setValue] = React2.useState([]);
+  const [collection, setCollection] = React.useState(createListCollection({ items: [] }));
+  const [inputValue, setInputValue] = React.useState("");
+  const [value, setValue] = React.useState([]);
   const debouncedInputValue = useDebounce(inputValue, 300);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     loadOptions(debouncedInputValue, value).then(setCollection);
   }, [debouncedInputValue, loadOptions, value]);
-  const handleFilterChange = React2.useCallback((val) => {
+  const handleFilterChange = React.useCallback((val) => {
     setInputValue(val);
   }, []);
-  const handleValueChange = React2.useCallback(({ value: v, items }) => {
+  const handleValueChange = React.useCallback(({ value: v, items }) => {
     setValue(v);
     onValueChange?.({ value: v, items });
   }, [onValueChange]);