@umami/react-zen 0.101.0 → 0.102.0

package/dist/index.css

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

package/dist/index.d.ts

@@ -617,11 +617,15 @@ declare module '@umami/react-zen/List' {
         variant?: '1' | '2' | '3';
     }
     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 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__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" };
 
 // src/components/List.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
@@ -30751,7 +30751,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 +30767,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)("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, {}) }) })
       ]
     }
   );
@@ -30769,12 +30775,7 @@ 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

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__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" };
 
 // src/components/List.tsx
 import { jsx as jsx42, jsxs as jsxs21 } from "react/jsx-runtime";
@@ -30640,7 +30640,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 +30656,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("div", { "aria-hidden": "true", className: List_default.check, children: /* @__PURE__ */ jsx42(Icon, { children: /* @__PURE__ */ jsx42(Icons.Check, {}) }) })
       ]
     }
   );
@@ -30658,12 +30664,7 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.101.0",
+  "version": "0.102.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__ZDQ2Z {
   display: grid;
-  min-width: 100px;
   outline: none;
   overflow: auto;
   gap: var(--spacing-1);
 }
-.List_separator__M2U0O {
+.List_separator__ZTZiM {
   border-bottom: var(--border);
 }
-.List_section__Y2Q0Z:not(:last-child) {
+.List_section__ZTliN:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.List_header__M2ZhY {
+.List_header__YWIzN {
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.List_item__YmFjO {
+.List_item__YmJhM {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4302,43 +4301,43 @@ body a.Button_button__NDYwM {
   outline: none;
   border-radius: var(--border-radius);
 }
-.List_item__YmFjO[data-disabled] {
+.List_item__YmJhM[data-disabled] {
   color: var(--font-color-disabled);
 }
-.List_item__YmFjO[data-focus],
-.List_item__YmFjO[data-focus-visible] {
+.List_item__YmJhM[data-focus],
+.List_item__YmJhM[data-focus-visible] {
   background: var(--highlight-color);
 }
-.List_item__YmFjO:hover {
+.List_item__YmJhM:hover {
   background: var(--highlight-color);
 }
-.List_item__YmFjO[data-selected] {
+.List_item__YmJhM[data-selected] {
   font-weight: bold;
-  & .List_check__NjUwZ {
+  & .List_check__ZTc4Z {
     display: flex;
     justify-content: flex-end;
     flex: 1;
   }
 }
-.List_variant-1__MGY0O {
-  & .List_item__YmFjO:hover,
-  .List_item__YmFjO[data-selected] {
+.List_variant-1__NWM2N {
+  & .List_item__YmJhM:hover,
+  .List_item__YmJhM[data-selected] {
     background: var(--base-color-2);
   }
 }
-.List_variant-2__NTJlM {
-  & .List_item__YmFjO:hover,
-  .List_item__YmFjO[data-selected] {
+.List_variant-2__MGZhY {
+  & .List_item__YmJhM:hover,
+  .List_item__YmJhM[data-selected] {
     background: var(--base-color-3);
   }
 }
-.List_variant-3__NTEyY {
-  & .List_item__YmFjO:hover,
-  .List_item__YmFjO[data-selected] {
+.List_variant-3__MmJkZ {
+  & .List_item__YmJhM:hover,
+  .List_item__YmJhM[data-selected] {
     background: var(--base-color-4);
   }
 }
-.List_check__NjUwZ {
+.List_check__ZTc4Z {
   display: none;
 }