@umami/react-zen 0.101.0 → 0.103.0

package/dist/index.css

@@ -3955,25 +3955,24 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
-.List_list__NzVmN {
+.List_list__YjBiO {
   display: grid;
-  min-width: 100px;
   outline: none;
   overflow: auto;
   gap: var(--spacing-1);
 }
-.List_separator__M2U0O {
+.List_separator__MjkwN {
   border-bottom: var(--border);
 }
-.List_section__Y2Q0Z:not(:last-child) {
+.List_section__NmQzZ:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.List_header__M2ZhY {
+.List_header__MjQ4N {
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.List_item__YmFjO {
+.List_item__MWYwM {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3986,43 +3985,28 @@ body a.Button_button__NDYwM {
   outline: none;
   border-radius: var(--border-radius);
 }
-.List_item__YmFjO[data-disabled] {
+.List_item__MWYwM[data-disabled] {
   color: var(--font-color-disabled);
 }
-.List_item__YmFjO[data-focus],
-.List_item__YmFjO[data-focus-visible] {
+.List_item__MWYwM[data-focus],
+.List_item__MWYwM[data-focus-visible] {
   background: var(--highlight-color);
 }
-.List_item__YmFjO:hover {
+.List_item__MWYwM:hover {
   background: var(--highlight-color);
 }
-.List_item__YmFjO[data-selected] {
+.List_item__MWYwM[data-selected] {
   font-weight: bold;
-  & .List_check__NjUwZ {
+  & .List_checkmark__YjhhM {
     display: flex;
     justify-content: flex-end;
     flex: 1;
   }
 }
-.List_variant-1__MGY0O {
-  & .List_item__YmFjO:hover,
-  .List_item__YmFjO[data-selected] {
-    background: var(--base-color-2);
-  }
-}
-.List_variant-2__NTJlM {
-  & .List_item__YmFjO:hover,
-  .List_item__YmFjO[data-selected] {
-    background: var(--base-color-3);
-  }
-}
-.List_variant-3__NTEyY {
-  & .List_item__YmFjO:hover,
-  .List_item__YmFjO[data-selected] {
-    background: var(--base-color-4);
-  }
+.List_checkmark__YjhhM {
+  display: none;
 }
-.List_check__NjUwZ {
+.List_hideCheckmark__OTEyO .List_checkmark__YjhhM {
   display: none;
 }
 

package/dist/index.d.ts

@@ -609,19 +609,25 @@ 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 ListItem({ id, children, className, ...props }: ListBoxItemProps<any>): 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;
+    }
+    export function ListItem({ id, children, className, showCheckmark, ...props }: ListItemProps): import("react").JSX.Element;
     export function ListSeparator({ className, ...props }: SeparatorProps): import("react").JSX.Element;
-    export function ListSection({ title, className, children, ...props }: ListBoxSectionProps<any> & {
+    export interface ListSectionProps extends ListBoxSectionProps<any> {
         title?: string;
-    }): import("react").JSX.Element;
+    }
+    export function ListSection({ title, className, children, ...props }: ListSectionProps): import("react").JSX.Element;
 }
 
 declare module '@umami/react-zen/Loading' {

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__NzVmN", "separator": "List_separator__M2U0O", "section": "List_section__Y2Q0Z", "header": "List_header__M2ZhY", "item": "List_item__YmFjO", "check": "List_check__NjUwZ", "variant-1": "List_variant-1__MGY0O", "variant-2": "List_variant-2__NTJlM", "variant-3": "List_variant-3__NTEyY" };
+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();
@@ -30751,7 +30754,13 @@ function List({
     }
   );
 }
-function ListItem({ id, children, className, ...props }) {
+function ListItem({
+  id,
+  children,
+  className,
+  showCheckmark = true,
+  ...props
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     $eed445e0843c11d0$export$a11e76429ed99b4,
     {
@@ -30761,7 +30770,7 @@ function ListItem({ id, children, className, ...props }) {
       textValue: typeof children === "string" ? children : id?.toString(),
       children: [
         children,
-        /* @__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, {}) })
       ]
     }
   );
@@ -30769,17 +30778,18 @@ function ListItem({ id, children, className, ...props }) {
 function ListSeparator({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { ...props, className: (0, import_classnames32.default)(List_default.separator, className) });
 }
-function ListSection({
-  title,
-  className,
-  children,
-  ...props
-}) {
+function ListSection({ title, className, children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)($eed445e0843c11d0$export$dca12b0bb56e4fc, { ...props, className: (0, import_classnames32.default)(List_default.section, className), children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)($72a5793c14baf454$export$8b251419efc915eb, { className: List_default.header, children: title }),
     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__NzVmN", "separator": "List_separator__M2U0O", "section": "List_section__Y2Q0Z", "header": "List_header__M2ZhY", "item": "List_item__YmFjO", "check": "List_check__NjUwZ", "variant-1": "List_variant-1__MGY0O", "variant-2": "List_variant-2__NTJlM", "variant-3": "List_variant-3__NTEyY" };
+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();
@@ -30640,7 +30643,13 @@ function List({
     }
   );
 }
-function ListItem({ id, children, className, ...props }) {
+function ListItem({
+  id,
+  children,
+  className,
+  showCheckmark = true,
+  ...props
+}) {
   return /* @__PURE__ */ jsxs21(
     $eed445e0843c11d0$export$a11e76429ed99b4,
     {
@@ -30650,7 +30659,7 @@ function ListItem({ id, children, className, ...props }) {
       textValue: typeof children === "string" ? children : id?.toString(),
       children: [
         children,
-        /* @__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, {}) })
       ]
     }
   );
@@ -30658,17 +30667,18 @@ function ListItem({ id, children, className, ...props }) {
 function ListSeparator({ className, ...props }) {
   return /* @__PURE__ */ jsx42($431f98aba6844401$export$1ff3c3f08ae963c0, { ...props, className: (0, import_classnames32.default)(List_default.separator, className) });
 }
-function ListSection({
-  title,
-  className,
-  children,
-  ...props
-}) {
+function ListSection({ title, className, children, ...props }) {
   return /* @__PURE__ */ jsxs21($eed445e0843c11d0$export$dca12b0bb56e4fc, { ...props, className: (0, import_classnames32.default)(List_default.section, className), children: [
     title && /* @__PURE__ */ jsx42($72a5793c14baf454$export$8b251419efc915eb, { className: List_default.header, children: title }),
     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.101.0",
+  "version": "0.103.0",
   "description": "Modern, minimalist React component library",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",

package/styles.css

@@ -4271,25 +4271,24 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
-.List_list__NzVmN {
+.List_list__YjBiO {
   display: grid;
-  min-width: 100px;
   outline: none;
   overflow: auto;
   gap: var(--spacing-1);
 }
-.List_separator__M2U0O {
+.List_separator__MjkwN {
   border-bottom: var(--border);
 }
-.List_section__Y2Q0Z:not(:last-child) {
+.List_section__NmQzZ:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.List_header__M2ZhY {
+.List_header__MjQ4N {
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.List_item__YmFjO {
+.List_item__MWYwM {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4302,43 +4301,28 @@ body a.Button_button__NDYwM {
   outline: none;
   border-radius: var(--border-radius);
 }
-.List_item__YmFjO[data-disabled] {
+.List_item__MWYwM[data-disabled] {
   color: var(--font-color-disabled);
 }
-.List_item__YmFjO[data-focus],
-.List_item__YmFjO[data-focus-visible] {
+.List_item__MWYwM[data-focus],
+.List_item__MWYwM[data-focus-visible] {
   background: var(--highlight-color);
 }
-.List_item__YmFjO:hover {
+.List_item__MWYwM:hover {
   background: var(--highlight-color);
 }
-.List_item__YmFjO[data-selected] {
+.List_item__MWYwM[data-selected] {
   font-weight: bold;
-  & .List_check__NjUwZ {
+  & .List_checkmark__YjhhM {
     display: flex;
     justify-content: flex-end;
     flex: 1;
   }
 }
-.List_variant-1__MGY0O {
-  & .List_item__YmFjO:hover,
-  .List_item__YmFjO[data-selected] {
-    background: var(--base-color-2);
-  }
-}
-.List_variant-2__NTJlM {
-  & .List_item__YmFjO:hover,
-  .List_item__YmFjO[data-selected] {
-    background: var(--base-color-3);
-  }
-}
-.List_variant-3__NTEyY {
-  & .List_item__YmFjO:hover,
-  .List_item__YmFjO[data-selected] {
-    background: var(--base-color-4);
-  }
+.List_checkmark__YjhhM {
+  display: none;
 }
-.List_check__NjUwZ {
+.List_hideCheckmark__OTEyO .List_checkmark__YjhhM {
   display: none;
 }