@umami/react-zen 0.239.0 → 0.241.0

package/dist/index.js

@@ -385,6 +385,37 @@ var toast = tailwindVariants.tv({
     }
   }
 });
+var tag = tailwindVariants.tv({
+  slots: {
+    base: [
+      "inline-flex items-center gap-1 px-2 py-0.5 rounded text-sm",
+      "cursor-default outline-none",
+      "focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-1"
+    ],
+    removeButton: [
+      "flex items-center justify-center rounded-full p-0.5 -mr-1",
+      "cursor-pointer outline-none",
+      "hover:bg-black/10 dark:hover:bg-white/10",
+      "pressed:bg-black/20 dark:pressed:bg-white/20"
+    ]
+  },
+  variants: {
+    variant: {
+      default: {
+        base: "bg-interactive text-foreground-primary"
+      },
+      outline: {
+        base: "bg-transparent border border-edge text-foreground-primary"
+      },
+      primary: {
+        base: "bg-primary text-primary-foreground"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
 function Button({
   variant,
   size = "md",
@@ -1120,7 +1151,11 @@ var semanticColorMap = {
   "surface-sunken": { text: "", bg: "bg-surface-sunken" },
   "surface-overlay": { text: "", bg: "bg-surface-overlay" },
   "surface-inverted": { text: "", bg: "bg-surface-inverted" },
-  "surface-disabled": { text: "", bg: "bg-surface-disabled" }
+  "surface-disabled": { text: "", bg: "bg-surface-disabled" },
+  // Interactive colors
+  interactive: { text: "", bg: "bg-interactive" },
+  "interactive-hover": { text: "", bg: "bg-interactive-hover" },
+  "interactive-pressed": { text: "", bg: "bg-interactive-pressed" }
 };
 var tailwindColors = /* @__PURE__ */ new Set([
   "gray",
@@ -2396,7 +2431,6 @@ function Text({
   const colorStr = color === true ? "true" : color;
   const decorationColorStr = decorationColor === true ? "true" : decorationColor;
   const classes = cn(
-    "text-foreground-primary",
     mapFontSize(size),
     mapFontWeight(weight),
     mapTextAlign(align),
@@ -2520,6 +2554,7 @@ var Box = react.forwardRef(function Box2({
   flexBasis,
   flexGrow,
   flexShrink,
+  fill,
   gridArea,
   gridRow,
   gridColumn,
@@ -2607,6 +2642,7 @@ var Box = react.forwardRef(function Box2({
     ...flexBasis && { flexBasis },
     ...flexGrow !== void 0 && { flexGrow },
     ...flexShrink !== void 0 && { flexShrink },
+    ...fill && { flex: 1 },
     ...gridArea && { gridArea },
     ...gridRow && { gridRow },
     ...gridColumn && { gridColumn },
@@ -2871,20 +2907,12 @@ function Calendar({
 function Checkbox({ label, className, children, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
   const styles = checkbox();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.Checkbox,
-    {
-      ...props,
-      isSelected,
-      className: cn(styles.root(), className),
-      children: ({ isIndeterminate, isSelected: isSelected2 }) => {
-        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: styles.box(), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: styles.icon(), size: "sm", children: isIndeterminate ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Minus, {}) : isSelected2 ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Check, {}) : null }) }),
-          children
-        ] });
-      }
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Checkbox, { ...props, isSelected, className: cn(styles.root(), className), children: ({ isIndeterminate, isSelected: isSelected2 }) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: styles.box(), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: styles.icon(), size: "sm", children: isIndeterminate ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Minus, {}) : isSelected2 ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Check, {}) : null }) }),
+      children
+    ] });
+  } });
 }
 function Code({ className, children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2903,7 +2931,12 @@ function useFieldId(id) {
   const generatedId = react.useId();
   return id ?? generatedId;
 }
-function Label({ size = "base", weight = "semibold", lineHeight = "loose", ...props }) {
+function Label({
+  size = "base",
+  weight = "semibold",
+  lineHeight = "loose",
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Text,
     {
@@ -2976,10 +3009,6 @@ function getHighlightColor(color) {
 }
 function List({
   id,
-  items = [],
-  idProperty = "id",
-  labelProperty = "label",
-  separatorProperty = "separator",
   highlightColor,
   showCheckmark = true,
   isFullscreen,
@@ -3011,7 +3040,6 @@ function List({
         ...props,
         selectedKeys: value || selectedKeys,
         defaultSelectedKeys: value || defaultSelectedKeys,
-        items,
         className: cn(
           "grid outline-none overflow-auto gap-1",
           isFullscreen && "block p-3 rounded-none fixed inset-0 overflow-auto z-[9999] bg-surface-base",
@@ -3019,14 +3047,7 @@ function List({
         ),
         onSelectionChange: handleSelectionChange,
         style: { ...style, ...getHighlightColor(highlightColor) },
-        children: children || items?.map((item) => {
-          const id2 = item[idProperty] || item.toString();
-          const label2 = item[labelProperty] || item.toString();
-          return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-            item[separatorProperty] && /* @__PURE__ */ jsxRuntime.jsx(ListSeparator, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(ListItem, { id: id2, showCheckmark, children: label2 })
-          ] }, id2);
-        })
+        children
       }
     )
   ] });
@@ -3083,7 +3104,6 @@ function Popover({ children, isFullscreen, className, ...props }) {
   );
 }
 function ComboBox({
-  items,
   className,
   renderEmptyState,
   listProps,
@@ -3120,11 +3140,17 @@ function ComboBox({
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...popoverProps, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { padding: "2", border: true, borderRadius: "md", shadow: "lg", className: "bg-surface-overlay", children: /* @__PURE__ */ jsxRuntime.jsx(List, { items, renderEmptyState, ...listProps, children: children || items?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(ListItem, { textValue: item, children: item }, item)) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...popoverProps, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { padding: "2", border: true, borderRadius: "md", shadow: "lg", className: "bg-surface-overlay", children: /* @__PURE__ */ jsxRuntime.jsx(List, { renderEmptyState, ...listProps, children }) }) })
   ] });
 }
 var TIMEOUT = 2e3;
-function CopyButton({ value, timeout = TIMEOUT, className, children, ...props }) {
+function CopyButton({
+  value,
+  timeout = TIMEOUT,
+  className,
+  children,
+  ...props
+}) {
   const [copied, setCopied] = react.useState(false);
   const ref = react.useRef(timeout);
   const handleCopy = async () => {
@@ -3411,10 +3437,13 @@ function DataCard({ data = [], labelWidth = "auto", ...props }) {
       padding: "6",
       ...props,
       children: rows.map((row, index) => {
-        return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Row, { paddingY: "3", border: "bottom", borderColor: "muted", paddingRight: "6", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { weight: "bold", children: row?.label }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Row, { paddingY: "3", border: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { children: row?.value }) })
-        ] }, index);
+        return (
+          // biome-ignore lint/suspicious/noArrayIndexKey: rows are static display data
+          /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Row, { paddingY: "3", border: "bottom", borderColor: "muted", paddingRight: "6", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { weight: "bold", children: row?.label }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(Row, { paddingY: "3", border: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { children: row?.value }) })
+          ] }, index)
+        );
       })
     }
   );
@@ -3530,25 +3559,28 @@ function DataTable({
       return /* @__PURE__ */ react.createElement(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
     /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: rows.map((row, index) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
-        if (hidden) {
-          return null;
-        }
-        const value = typeof children2 === "function" ? children2(row, index) : children2 || row[id];
-        return /* @__PURE__ */ react.createElement(
-          TableCell,
-          {
-            ...cellProps,
-            key: id,
-            className: cn("items-center", className2)
-          },
-          as ? react.createElement(as, {}, value) : value
-        );
-      }) }, index);
+      return (
+        // biome-ignore lint/suspicious/noArrayIndexKey: row data may not have unique ids
+        /* @__PURE__ */ jsxRuntime.jsx(TableRow, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
+          if (hidden) {
+            return null;
+          }
+          const value = typeof children2 === "function" ? children2(row, index) : children2 || row[id];
+          return /* @__PURE__ */ react.createElement(
+            TableCell,
+            {
+              ...cellProps,
+              key: id,
+              className: cn("items-center", className2)
+            },
+            as ? react.createElement(as, {}, value) : value
+          );
+        }) }, index)
+      );
     }) })
   ] });
 }
-function DataColumn(props) {
+function DataColumn(_props) {
   return null;
 }
 var sizeMap2 = {
@@ -3589,7 +3621,12 @@ function Tooltip({ children, className, showArrow, ...props }) {
     children
   ] });
 }
-function TooltipBubble({ children, className, color: _color, ...props }) {
+function TooltipBubble({
+  children,
+  className,
+  color: _color,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...props, className, children });
 }
 function FloatingTooltip({ className, style, children, ...props }) {
@@ -3607,7 +3644,10 @@ function FloatingTooltip({ className, style, children, ...props }) {
     TooltipBubble,
     {
       ...props,
-      className: cn("fixed pointer-events-none z-[9999] -translate-x-1/2 -translate-y-[calc(100%+10px)]", className),
+      className: cn(
+        "fixed pointer-events-none z-[9999] -translate-x-1/2 -translate-y-[calc(100%+10px)]",
+        className
+      ),
       style: { ...style, left: position.x, top: position.y },
       children
     }
@@ -3754,7 +3794,12 @@ function FormFieldArray({
     children({ ...context, ...fieldProps })
   ] });
 }
-function FormResetButton({ values = {}, children, onPress, ...props }) {
+function FormResetButton({
+  values = {},
+  children,
+  onPress,
+  ...props
+}) {
   const { reset } = reactHookForm.useFormContext();
   const handleReset = (e) => {
     reset(values);
@@ -4045,7 +4090,7 @@ function Toast({
   return /* @__PURE__ */ jsxRuntime.jsxs(Row, { ...props, className: cn(toast({ variant }), className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Column, { flexGrow: 1, gap: "1", children: [
       title && /* @__PURE__ */ jsxRuntime.jsx(Text, { weight: "semibold", children: title }),
-      message && /* @__PURE__ */ jsxRuntime.jsx(Text, { color: "muted", children: message })
+      message && /* @__PURE__ */ jsxRuntime.jsx(Text, { color: title ? "muted" : void 0, children: message })
     ] }),
     hasActions && actions.map((action) => {
       return /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onPress: () => onClose?.(action), children: action }, action);
@@ -4065,13 +4110,13 @@ function Toast({
 }
 var positionClasses = {
   "top-left": "top-4 left-4 items-start",
-  "top": "top-4 left-1/2 -translate-x-1/2 items-center",
+  top: "top-4 left-1/2 -translate-x-1/2 items-center",
   "top-right": "top-4 right-4 items-end",
   "bottom-left": "bottom-4 left-4 items-start",
-  "bottom": "bottom-4 left-1/2 -translate-x-1/2 items-center",
+  bottom: "bottom-4 left-1/2 -translate-x-1/2 items-center",
   "bottom-right": "bottom-4 right-4 items-end",
-  "left": "top-1/2 left-4 -translate-y-1/2 items-start",
-  "right": "top-1/2 right-4 -translate-y-1/2 items-end"
+  left: "top-1/2 left-4 -translate-y-1/2 items-start",
+  right: "top-1/2 right-4 -translate-y-1/2 items-end"
 };
 var AnimatedBox = web.animated(Box);
 function Toaster({ duration = 0, position = "bottom-right" }) {
@@ -4389,6 +4434,11 @@ var PALETTE_LABELS = {
 };
 function PaletteSwitcher({ className }) {
   const { palette, setPalette } = useTheme();
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const currentPalette = mounted ? palette : "neutral";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -4402,13 +4452,13 @@ function PaletteSwitcher({ className }) {
           type: "button",
           onClick: () => setPalette(p),
           "aria-label": PALETTE_LABELS[p],
-          "aria-pressed": palette === p,
+          "aria-pressed": currentPalette === p,
           className: cn(
             "px-3 h-9 flex items-center justify-center cursor-pointer outline-none transition-colors text-sm",
             "[&:not(:first-child)]:border-l [&:not(:first-child)]:border-edge",
             "hover:bg-interactive",
             "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset",
-            palette === p ? "bg-interactive text-foreground-primary" : "text-foreground-muted"
+            currentPalette === p ? "bg-interactive text-foreground-primary" : "text-foreground-muted"
           ),
           children: PALETTE_LABELS[p]
         },
@@ -4417,7 +4467,7 @@ function PaletteSwitcher({ className }) {
     }
   );
 }
-var SvgEyeSlash = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", ...props, children: [
+var SvgEye = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", ...props, children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", d: "M0 0h256v256H0z" }),
   /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -4427,23 +4477,25 @@ var SvgEyeSlash = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "ht
       strokeLinecap: "round",
       strokeLinejoin: "round",
       strokeWidth: 16,
-      d: "m48 40 160 176M154.91 157.6a40 40 0 0 1-53.82-59.2M135.53 88.71a40 40 0 0 1 32.3 35.53"
+      d: "M128 56c-80 0-112 72-112 72s32 72 112 72 112-72 112-72-32-72-112-72"
     }
   ),
   /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
+    "circle",
     {
+      cx: 128,
+      cy: 128,
+      r: 40,
       fill: "none",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      strokeWidth: 16,
-      d: "M208.61 169.1C230.41 149.58 240 128 240 128s-32-72-112-72a126 126 0 0 0-20.68 1.68M74 68.6C33.23 89.24 16 128 16 128s32 72 112 72a118.05 118.05 0 0 0 54-12.6"
+      strokeWidth: 16
     }
   )
 ] });
-var EyeSlash_default = SvgEyeSlash;
-var SvgEye = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", ...props, children: [
+var Eye_default = SvgEye;
+var SvgEyeSlash = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", ...props, children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", d: "M0 0h256v256H0z" }),
   /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -4453,24 +4505,22 @@ var SvgEye = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://
       strokeLinecap: "round",
       strokeLinejoin: "round",
       strokeWidth: 16,
-      d: "M128 56c-80 0-112 72-112 72s32 72 112 72 112-72 112-72-32-72-112-72"
+      d: "m48 40 160 176M154.91 157.6a40 40 0 0 1-53.82-59.2M135.53 88.71a40 40 0 0 1 32.3 35.53"
     }
   ),
   /* @__PURE__ */ jsxRuntime.jsx(
-    "circle",
+    "path",
     {
-      cx: 128,
-      cy: 128,
-      r: 40,
       fill: "none",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      strokeWidth: 16
+      strokeWidth: 16,
+      d: "M208.61 169.1C230.41 149.58 240 128 240 128s-32-72-112-72a126 126 0 0 0-20.68 1.68M74 68.6C33.23 89.24 16 128 16 128s32 72 112 72a118.05 118.05 0 0 0 54-12.6"
     }
   )
 ] });
-var Eye_default = SvgEye;
+var EyeSlash_default = SvgEyeSlash;
 function PasswordField({ label, className, ...props }) {
   const [show, setShow] = react.useState(false);
   const type = show ? "text" : "password";
@@ -4660,7 +4710,6 @@ function SearchField({
   ] });
 }
 function Select({
-  items = [],
   value,
   defaultValue,
   label,
@@ -4733,7 +4782,6 @@ function Select({
                 List,
                 {
                   ...listProps,
-                  items,
                   isFullscreen,
                   ...isFullscreen && {
                     shouldSelectOnPressUp: true,
@@ -4856,6 +4904,20 @@ function Tab({ children, className, ...props }) {
 function TabPanel({ children, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.TabPanel, { ...props, className, children });
 }
+function TagGroup({ label, children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.TagGroup, { ...props, className: cn("flex flex-col gap-1", className), children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(Label, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.TagList, { className: "flex flex-wrap gap-1", children })
+  ] });
+}
+function Tag({ variant, children, className, ...props }) {
+  const textValue = typeof children === "string" ? children : void 0;
+  const styles = tag({ variant });
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Tag, { ...props, textValue, className: cn(styles.base(), className), children: ({ allowsRemoving }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    children,
+    allowsRemoving && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Button, { slot: "remove", className: styles.removeButton(), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.X, {}) }) })
+  ] }) });
+}
 function getElement(target) {
   return "current" in target ? target.current : target;
 }
@@ -5196,6 +5258,8 @@ exports.TableColumn = TableColumn;
 exports.TableHeader = TableHeader;
 exports.TableRow = TableRow;
 exports.Tabs = Tabs;
+exports.Tag = Tag;
+exports.TagGroup = TagGroup;
 exports.Text = Text;
 exports.TextField = TextField;
 exports.ThemeButton = ThemeButton;