@umami/react-zen 0.102.0 → 0.103.0

package/dist/index.css

@@ -3955,24 +3955,24 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
-.List_list__ZDQ2Z {
+.List_list__YjBiO {
   display: grid;
   outline: none;
   overflow: auto;
   gap: var(--spacing-1);
 }
-.List_separator__ZTZiM {
+.List_separator__MjkwN {
   border-bottom: var(--border);
 }
-.List_section__ZTliN:not(:last-child) {
+.List_section__NmQzZ:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.List_header__YWIzN {
+.List_header__MjQ4N {
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.List_item__YmJhM {
+.List_item__MWYwM {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3985,43 +3985,28 @@ body a.Button_button__NDYwM {
   outline: none;
   border-radius: var(--border-radius);
 }
-.List_item__YmJhM[data-disabled] {
+.List_item__MWYwM[data-disabled] {
   color: var(--font-color-disabled);
 }
-.List_item__YmJhM[data-focus],
-.List_item__YmJhM[data-focus-visible] {
+.List_item__MWYwM[data-focus],
+.List_item__MWYwM[data-focus-visible] {
   background: var(--highlight-color);
 }
-.List_item__YmJhM:hover {
+.List_item__MWYwM:hover {
   background: var(--highlight-color);
 }
-.List_item__YmJhM[data-selected] {
+.List_item__MWYwM[data-selected] {
   font-weight: bold;
-  & .List_check__ZTc4Z {
+  & .List_checkmark__YjhhM {
     display: flex;
     justify-content: flex-end;
     flex: 1;
   }
 }
-.List_variant-1__NWM2N {
-  & .List_item__YmJhM:hover,
-  .List_item__YmJhM[data-selected] {
-    background: var(--base-color-2);
-  }
-}
-.List_variant-2__MGZhY {
-  & .List_item__YmJhM:hover,
-  .List_item__YmJhM[data-selected] {
-    background: var(--base-color-3);
-  }
-}
-.List_variant-3__MmJkZ {
-  & .List_item__YmJhM:hover,
-  .List_item__YmJhM[data-selected] {
-    background: var(--base-color-4);
-  }
+.List_checkmark__YjhhM {
+  display: none;
 }
-.List_check__ZTc4Z {
+.List_hideCheckmark__OTEyO .List_checkmark__YjhhM {
   display: none;
 }
 

package/dist/index.d.ts

@@ -609,14 +609,16 @@ declare module '@umami/react-zen/Label' {
 
 declare module '@umami/react-zen/List' {
     import { ListBoxProps, SeparatorProps, ListBoxSectionProps, ListBoxItemProps } from 'react-aria-components';
+    import { HoverColor } from '@/lib/types';
     export interface ListProps extends ListBoxProps<any> {
         items?: any[];
         idProperty?: string;
         labelProperty?: string;
         separatorProperty?: string;
-        variant?: '1' | '2' | '3';
+        highlightColor?: HoverColor;
+        showCheckmark?: boolean;
     }
-    export function List({ items, idProperty, labelProperty, separatorProperty, variant, className, children, ...props }: ListProps): import("react").JSX.Element;
+    export function List({ items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, className, style, children, ...props }: ListProps): import("react").JSX.Element;
     export interface ListItemProps extends ListBoxItemProps<any> {
         showCheckmark?: boolean;
     }

package/dist/index.js

@@ -30719,7 +30719,7 @@ var import_react184 = require("react");
 var import_classnames32 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\List.module.css
-var List_default = { "list": "List_list__ZDQ2Z", "separator": "List_separator__ZTZiM", "section": "List_section__ZTliN", "header": "List_header__YWIzN", "item": "List_item__YmJhM", "check": "List_check__ZTc4Z", "variant-1": "List_variant-1__NWM2N", "variant-2": "List_variant-2__MGZhY", "variant-3": "List_variant-3__MmJkZ" };
+var List_default = { "list": "List_list__YjBiO", "separator": "List_separator__MjkwN", "section": "List_section__NmQzZ", "header": "List_header__MjQ4N", "item": "List_item__MWYwM", "checkmark": "List_checkmark__YjhhM", "hideCheckmark": "List_hideCheckmark__OTEyO" };
 
 // src/components/List.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
@@ -30728,8 +30728,10 @@ function List({
   idProperty = "id",
   labelProperty = "label",
   separatorProperty = "separatpr",
-  variant = "1",
+  highlightColor,
+  showCheckmark = true,
   className,
+  style,
   children,
   ...props
 }) {
@@ -30739,7 +30741,8 @@ function List({
       "aria-label": "list",
       ...props,
       items,
-      className: (0, import_classnames32.default)(List_default.list, className, variant && List_default[`variant-${variant}`]),
+      className: (0, import_classnames32.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();
@@ -30767,7 +30770,7 @@ function ListItem({
       textValue: typeof children === "string" ? children : id?.toString(),
       children: [
         children,
-        showCheckmark && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { "aria-hidden": "true", className: List_default.check, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icons.Check, {}) }) })
+        showCheckmark && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { "aria-hidden": "true", className: List_default.checkmark, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icons.Check, {}) })
       ]
     }
   );
@@ -30781,6 +30784,12 @@ function ListSection({ title, className, children, ...props }) {
     children
   ] });
 }
+function getHighlightColor(color) {
+  if (!color) return;
+  if (/\d+/.test(color.toString())) {
+    return { "--highlight-color": `var(--base-color-${color})` };
+  }
+}
 
 // src/components/Loading.tsx
 var import_classnames33 = __toESM(require_classnames());

package/dist/index.mjs

@@ -30608,7 +30608,7 @@ import { Fragment as Fragment6 } from "react";
 var import_classnames32 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\List.module.css
-var List_default = { "list": "List_list__ZDQ2Z", "separator": "List_separator__ZTZiM", "section": "List_section__ZTliN", "header": "List_header__YWIzN", "item": "List_item__YmJhM", "check": "List_check__ZTc4Z", "variant-1": "List_variant-1__NWM2N", "variant-2": "List_variant-2__MGZhY", "variant-3": "List_variant-3__MmJkZ" };
+var List_default = { "list": "List_list__YjBiO", "separator": "List_separator__MjkwN", "section": "List_section__NmQzZ", "header": "List_header__MjQ4N", "item": "List_item__MWYwM", "checkmark": "List_checkmark__YjhhM", "hideCheckmark": "List_hideCheckmark__OTEyO" };
 
 // src/components/List.tsx
 import { jsx as jsx42, jsxs as jsxs21 } from "react/jsx-runtime";
@@ -30617,8 +30617,10 @@ function List({
   idProperty = "id",
   labelProperty = "label",
   separatorProperty = "separatpr",
-  variant = "1",
+  highlightColor,
+  showCheckmark = true,
   className,
+  style,
   children,
   ...props
 }) {
@@ -30628,7 +30630,8 @@ function List({
       "aria-label": "list",
       ...props,
       items,
-      className: (0, import_classnames32.default)(List_default.list, className, variant && List_default[`variant-${variant}`]),
+      className: (0, import_classnames32.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();
@@ -30656,7 +30659,7 @@ function ListItem({
       textValue: typeof children === "string" ? children : id?.toString(),
       children: [
         children,
-        showCheckmark && /* @__PURE__ */ jsx42("div", { "aria-hidden": "true", className: List_default.check, children: /* @__PURE__ */ jsx42(Icon, { children: /* @__PURE__ */ jsx42(Icons.Check, {}) }) })
+        showCheckmark && /* @__PURE__ */ jsx42(Icon, { "aria-hidden": "true", className: List_default.checkmark, children: /* @__PURE__ */ jsx42(Icons.Check, {}) })
       ]
     }
   );
@@ -30670,6 +30673,12 @@ function ListSection({ title, className, children, ...props }) {
     children
   ] });
 }
+function getHighlightColor(color) {
+  if (!color) return;
+  if (/\d+/.test(color.toString())) {
+    return { "--highlight-color": `var(--base-color-${color})` };
+  }
+}
 
 // src/components/Loading.tsx
 var import_classnames33 = __toESM(require_classnames());

package/package.json

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

package/styles.css

@@ -4271,24 +4271,24 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
-.List_list__ZDQ2Z {
+.List_list__YjBiO {
   display: grid;
   outline: none;
   overflow: auto;
   gap: var(--spacing-1);
 }
-.List_separator__ZTZiM {
+.List_separator__MjkwN {
   border-bottom: var(--border);
 }
-.List_section__ZTliN:not(:last-child) {
+.List_section__NmQzZ:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.List_header__YWIzN {
+.List_header__MjQ4N {
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.List_item__YmJhM {
+.List_item__MWYwM {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4301,43 +4301,28 @@ body a.Button_button__NDYwM {
   outline: none;
   border-radius: var(--border-radius);
 }
-.List_item__YmJhM[data-disabled] {
+.List_item__MWYwM[data-disabled] {
   color: var(--font-color-disabled);
 }
-.List_item__YmJhM[data-focus],
-.List_item__YmJhM[data-focus-visible] {
+.List_item__MWYwM[data-focus],
+.List_item__MWYwM[data-focus-visible] {
   background: var(--highlight-color);
 }
-.List_item__YmJhM:hover {
+.List_item__MWYwM:hover {
   background: var(--highlight-color);
 }
-.List_item__YmJhM[data-selected] {
+.List_item__MWYwM[data-selected] {
   font-weight: bold;
-  & .List_check__ZTc4Z {
+  & .List_checkmark__YjhhM {
     display: flex;
     justify-content: flex-end;
     flex: 1;
   }
 }
-.List_variant-1__NWM2N {
-  & .List_item__YmJhM:hover,
-  .List_item__YmJhM[data-selected] {
-    background: var(--base-color-2);
-  }
-}
-.List_variant-2__MGZhY {
-  & .List_item__YmJhM:hover,
-  .List_item__YmJhM[data-selected] {
-    background: var(--base-color-3);
-  }
-}
-.List_variant-3__MmJkZ {
-  & .List_item__YmJhM:hover,
-  .List_item__YmJhM[data-selected] {
-    background: var(--base-color-4);
-  }
+.List_checkmark__YjhhM {
+  display: none;
 }
-.List_check__ZTc4Z {
+.List_hideCheckmark__OTEyO .List_checkmark__YjhhM {
   display: none;
 }