@umami/react-zen 0.136.0 → 0.137.0

package/dist/index.d.mts

@@ -443,8 +443,11 @@ interface ListProps extends ListBoxProps<any> {
     separatorProperty?: string;
     highlightColor?: string;
     showCheckmark?: boolean;
+    label?: string;
+    value?: string[];
+    onChange?: (value: string[]) => void;
 }
-declare function List({ items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, className, style, children, ...props }: ListProps): react.JSX.Element;
+declare function List({ items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, label, value, onChange, className, selectedKeys, defaultSelectedKeys, onSelectionChange, style, children, ...props }: ListProps): react.JSX.Element;
 interface ListItemProps extends ListBoxItemProps<any> {
     showCheckmark?: boolean;
 }

package/dist/index.d.ts

@@ -443,8 +443,11 @@ interface ListProps extends ListBoxProps<any> {
     separatorProperty?: string;
     highlightColor?: string;
     showCheckmark?: boolean;
+    label?: string;
+    value?: string[];
+    onChange?: (value: string[]) => void;
 }
-declare function List({ items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, className, style, children, ...props }: ListProps): react.JSX.Element;
+declare function List({ items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, label, value, onChange, className, selectedKeys, defaultSelectedKeys, onSelectionChange, style, children, ...props }: ListProps): react.JSX.Element;
 interface ListItemProps extends ListBoxItemProps<any> {
     showCheckmark?: boolean;
 }

package/dist/index.js

@@ -31251,29 +31251,47 @@ function List({
   separatorProperty = "separatpr",
   highlightColor,
   showCheckmark = true,
+  label,
+  value,
+  onChange,
   className,
+  selectedKeys,
+  defaultSelectedKeys,
+  onSelectionChange,
   style,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-    $eed445e0843c11d0$export$41f133550aa26f48,
-    {
-      "aria-label": "list",
-      ...props,
-      items,
-      className: (0, import_classnames33.default)(List_default.list, className, !showCheckmark && List_default.hideCheckmark),
-      style: { ...style, ...getHighlightColor(highlightColor) },
-      children: children || items?.map((item) => {
-        const id = item[idProperty] || item.toString();
-        const label = item[labelProperty] || item.toString();
-        return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react183.Fragment, { children: [
-          item[separatorProperty] && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListItem, { id, className: List_default.item, children: label })
-        ] }, id);
-      })
+  const handleSelectionChange = (keys) => {
+    onSelectionChange?.(keys);
+    if (keys !== "all") {
+      onChange?.([...keys].map(String));
     }
-  );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Label2, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      $eed445e0843c11d0$export$41f133550aa26f48,
+      {
+        "aria-label": "list",
+        ...props,
+        selectedKeys: value || selectedKeys,
+        defaultSelectedKeys: value || defaultSelectedKeys,
+        items,
+        className: (0, import_classnames33.default)(List_default.list, className, !showCheckmark && List_default.hideCheckmark),
+        onSelectionChange: handleSelectionChange,
+        style: { ...style, ...getHighlightColor(highlightColor) },
+        children: children || items?.map((item) => {
+          const id = item[idProperty] || item.toString();
+          const label2 = item[labelProperty] || item.toString();
+          return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react183.Fragment, { children: [
+            item[separatorProperty] && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListItem, { id, className: List_default.item, children: label2 })
+          ] }, id);
+        })
+      }
+    )
+  ] });
 }
 function ListItem({
   id,

package/dist/index.mjs

@@ -31128,7 +31128,7 @@ function getHighlightColor(color) {
 var List_default = { "list": "List_list__ZTQ5M", "separator": "List_separator__Zjk5Y", "section": "List_section__MDgwZ", "header": "List_header__MjUxO", "item": "List_item__NTg2Z", "checkmark": "List_checkmark__M2M5Y", "hideCheckmark": "List_hideCheckmark__YmNlM" };
 
 // src/components/List.tsx
-import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
 function List({
   items,
   idProperty = "id",
@@ -31136,29 +31136,47 @@ function List({
   separatorProperty = "separatpr",
   highlightColor,
   showCheckmark = true,
+  label,
+  value,
+  onChange,
   className,
+  selectedKeys,
+  defaultSelectedKeys,
+  onSelectionChange,
   style,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx48(
-    $eed445e0843c11d0$export$41f133550aa26f48,
-    {
-      "aria-label": "list",
-      ...props,
-      items,
-      className: (0, import_classnames33.default)(List_default.list, className, !showCheckmark && List_default.hideCheckmark),
-      style: { ...style, ...getHighlightColor(highlightColor) },
-      children: children || items?.map((item) => {
-        const id = item[idProperty] || item.toString();
-        const label = item[labelProperty] || item.toString();
-        return /* @__PURE__ */ jsxs25(Fragment7, { children: [
-          item[separatorProperty] && /* @__PURE__ */ jsx48($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }),
-          /* @__PURE__ */ jsx48(ListItem, { id, className: List_default.item, children: label })
-        ] }, id);
-      })
+  const handleSelectionChange = (keys) => {
+    onSelectionChange?.(keys);
+    if (keys !== "all") {
+      onChange?.([...keys].map(String));
     }
-  );
+  };
+  return /* @__PURE__ */ jsxs25(Fragment8, { children: [
+    label && /* @__PURE__ */ jsx48(Label2, { children: label }),
+    /* @__PURE__ */ jsx48(
+      $eed445e0843c11d0$export$41f133550aa26f48,
+      {
+        "aria-label": "list",
+        ...props,
+        selectedKeys: value || selectedKeys,
+        defaultSelectedKeys: value || defaultSelectedKeys,
+        items,
+        className: (0, import_classnames33.default)(List_default.list, className, !showCheckmark && List_default.hideCheckmark),
+        onSelectionChange: handleSelectionChange,
+        style: { ...style, ...getHighlightColor(highlightColor) },
+        children: children || items?.map((item) => {
+          const id = item[idProperty] || item.toString();
+          const label2 = item[labelProperty] || item.toString();
+          return /* @__PURE__ */ jsxs25(Fragment7, { children: [
+            item[separatorProperty] && /* @__PURE__ */ jsx48($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }),
+            /* @__PURE__ */ jsx48(ListItem, { id, className: List_default.item, children: label2 })
+          ] }, id);
+        })
+      }
+    )
+  ] });
 }
 function ListItem({
   id,
@@ -31321,12 +31339,12 @@ function NavMenuItem({ isSelected, className, children, ...props }) {
 // src/components/PasswordField.tsx
 import { useState as useState15 } from "react";
 var import_classnames39 = __toESM(require_classnames());
-import { Fragment as Fragment8, jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
 function PasswordField({ label, className, ...props }) {
   const [show, setShow] = useState15(false);
   const type = show ? "text" : "password";
   const handleShowPassword = () => setShow((state) => !state);
-  return /* @__PURE__ */ jsxs29(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs29(Fragment9, { children: [
     label && /* @__PURE__ */ jsx54(Label2, { children: label }),
     /* @__PURE__ */ jsxs29($bcdf0525bf22703d$export$2c73285ae9390cec, { "aria-label": "Password", ...props, className: (0, import_classnames39.default)(TextField_default.field, className), children: [
       /* @__PURE__ */ jsx54($3985021b0ad6602f$export$f5b8910cec6cf069, { type }),
@@ -31354,10 +31372,10 @@ var import_classnames41 = __toESM(require_classnames());
 var ProgressBar_default = { "progressbar": "ProgressBar_progressbar__YzdlO", "track": "ProgressBar_track__YzgzY", "fill": "ProgressBar_fill__ZTJlM", "value": "ProgressBar_value__NDk1Z" };
 
 // src/components/ProgressBar.tsx
-import { Fragment as Fragment9, jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
 function ProgressBar2({ className, showPercentage, ...props }) {
   return /* @__PURE__ */ jsx56($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames41.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
-    return /* @__PURE__ */ jsxs30(Fragment9, { children: [
+    return /* @__PURE__ */ jsxs30(Fragment10, { children: [
       /* @__PURE__ */ jsx56("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ jsx56("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
       showPercentage && /* @__PURE__ */ jsx56("div", { className: ProgressBar_default.value, children: valueText })
     ] });
@@ -31371,13 +31389,13 @@ var import_classnames42 = __toESM(require_classnames());
 var ProgressCircle_default = { "progresscircle": "ProgressCircle_progresscircle__NGMyY", "track": "ProgressCircle_track__YzY2M", "fill": "ProgressCircle_fill__ZmMzM", "value": "ProgressCircle_value__YjM0Y" };
 
 // src/components/ProgressCircle.tsx
-import { Fragment as Fragment10, jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
 function ProgressCircle({ className, showPercentage, ...props }) {
   return /* @__PURE__ */ jsx57($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames42.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
     const radius = 45;
     const circumference = radius * 2 * Math.PI;
     const offset = circumference - percentage / 100 * circumference;
-    return /* @__PURE__ */ jsxs31(Fragment10, { children: [
+    return /* @__PURE__ */ jsxs31(Fragment11, { children: [
       /* @__PURE__ */ jsxs31("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
         /* @__PURE__ */ jsx57("circle", { className: ProgressCircle_default.track, cx: "50", cy: "50", r: "45" }),
         /* @__PURE__ */ jsx57(
@@ -31432,7 +31450,7 @@ function Radio2({ children, className, ...props }) {
 // src/components/SearchField.tsx
 import { useState as useState16, useEffect as useEffect12 } from "react";
 var import_classnames44 = __toESM(require_classnames());
-import { Fragment as Fragment11, jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
 function SearchField2({
   label,
   placeholder,
@@ -31463,7 +31481,7 @@ function SearchField2({
       onSearch?.(searchValue);
     }
   }, [searchValue, delay]);
-  return /* @__PURE__ */ jsxs33(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs33(Fragment12, { children: [
     label && /* @__PURE__ */ jsx59(Label2, { children: label }),
     /* @__PURE__ */ jsxs33(
       $440f4836bcb56932$export$b94867ecbd698f21,
@@ -31661,7 +31679,7 @@ var import_classnames47 = __toESM(require_classnames());
 var Slider_default = { "slider": "Slider_slider__MjBhO", "header": "Slider_header__ZTE2M", "track": "Slider_track__ODk5M", "fill": "Slider_fill__YzdhM", "thumb": "Slider_thumb__NGEzM" };
 
 // src/components/Slider.tsx
-import { Fragment as Fragment12, jsx as jsx62, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx62, jsxs as jsxs36 } from "react/jsx-runtime";
 function Slider2({ className, showValue = true, label, ...props }) {
   return /* @__PURE__ */ jsxs36($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames47.default)(Slider_default.slider, className), children: [
     /* @__PURE__ */ jsxs36("div", { className: Slider_default.header, children: [
@@ -31670,7 +31688,7 @@ function Slider2({ className, showValue = true, label, ...props }) {
     ] }),
     /* @__PURE__ */ jsx62($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
       const isHorizontal = state.orientation === "horizontal";
-      return /* @__PURE__ */ jsxs36(Fragment12, { children: [
+      return /* @__PURE__ */ jsxs36(Fragment13, { children: [
         /* @__PURE__ */ jsx62(
           "div",
           {
@@ -31715,10 +31733,10 @@ var import_classnames49 = __toESM(require_classnames());
 var Switch_default = { "switch": "Switch_switch__NzI0O", "track": "Switch_track__ZWU0O", "knob": "Switch_knob__YjFmZ" };
 
 // src/components/Switch.tsx
-import { Fragment as Fragment13, jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
 function Switch2({ label, children, className, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-  return /* @__PURE__ */ jsxs38(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs38(Fragment14, { children: [
     label && /* @__PURE__ */ jsx64(Label2, { children: label }),
     /* @__PURE__ */ jsxs38(
       $8e59e948500a8fe1$export$b5d5cf8927ab7262,
@@ -31810,10 +31828,10 @@ var import_classnames51 = __toESM(require_classnames());
 var Toggle_default = { "toggle": "Toggle_toggle__OWVjZ" };
 
 // src/components/Toggle.tsx
-import { Fragment as Fragment14, jsx as jsx67, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx67, jsxs as jsxs40 } from "react/jsx-runtime";
 function Toggle({ label, children, className, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-  return /* @__PURE__ */ jsxs40(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs40(Fragment15, { children: [
     label && /* @__PURE__ */ jsx67(Label2, { children: label }),
     /* @__PURE__ */ jsx67(
       $efde0372d7a700fe$export$d2b052e7b4be1756,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.136.0",
+  "version": "0.137.0",
   "description": "Modern, minimalist React component library",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",