@altinn/altinn-components 0.7.0 → 0.7.1

package/dist/assets/ListItemBase.css

@@ -1 +1 @@
-._item_jxdl8_1{position:relative;width:100%;display:flex;align-items:stretch;justify-content:stretch}._item_jxdl8_1[data-shadow=xs]{box-shadow:var(--ds-shadow-xs)}._item_jxdl8_1[data-size=xs]{min-height:36px}._item_jxdl8_1[data-size=sm]{min-height:44px}._item_jxdl8_1[data-size=md]{min-height:56px}._item_jxdl8_1[data-size=lg]{min-height:64px}._item_jxdl8_1[data-size=xl]{min-height:72px}._item_jxdl8_1{background-color:var(--theme-background-default)}._item_jxdl8_1:hover{outline:2px solid var(--theme-border-strong);z-index:2}._item_jxdl8_1:hover strong,._item_jxdl8_1:hover h2{text-decoration:underline}._item_jxdl8_1[data-active=true],._item_jxdl8_1[data-color=accent]{background-color:var(--theme-surface-default)}._item_jxdl8_1[data-color=accent]:hover{background-color:var(--theme-surface-hover)}._link_jxdl8_69{padding:0;border:0;background-color:transparent;color:inherit;font:inherit;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer}._link_jxdl8_69{flex-grow:1;display:flex;align-items:center}
+._item_us7f0_1{position:relative;width:100%;display:flex;align-items:center;justify-content:stretch}._item_us7f0_1[aria-selected=true]{background-color:var(--theme-background-subtle);outline:2px solid}._item_us7f0_1[data-shadow=xs]{box-shadow:var(--ds-shadow-xs)}._item_us7f0_1[data-size=xs]{min-height:36px}._item_us7f0_1[data-size=sm]{min-height:44px}._item_us7f0_1[data-size=md]{min-height:56px}._item_us7f0_1[data-size=lg]{min-height:64px}._item_us7f0_1[data-size=xl]{min-height:72px}._item_us7f0_1{background-color:var(--theme-background-default)}._item_us7f0_1:hover{outline:2px solid var(--theme-border-strong);z-index:2}._item_us7f0_1:hover strong,._item_us7f0_1:hover h2{text-decoration:underline}._item_us7f0_1[data-active=true],._item_us7f0_1[data-color=accent]{background-color:var(--theme-surface-default)}._item_us7f0_1[data-color=accent]:hover{background-color:var(--theme-surface-hover)}._link_us7f0_74{align-self:stretch;padding:0;border:0;background-color:transparent;color:inherit;font:inherit;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer}._link_us7f0_74{flex-grow:1;display:flex;align-items:center}

package/dist/assets/ListItemControls.css

@@ -0,0 +1 @@
+._controls_dduzt_1{position:absolute;right:0;display:flex;align-items:center;gap:.625rem;padding:0 .625rem}._controls_dduzt_1:empty{display:none}._linkText_dduzt_14{font-size:.875rem;white-space:nowrap}._linkIcon_dduzt_19{font-size:1.5rem}

package/dist/assets/ListItemSelect.css

@@ -0,0 +1 @@
+._label_hd89l_1{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background-color:transparent;padding:.75rem;border-radius:50%;border:0}._label_hd89l_1[data-size=lg],._label_hd89l_1[data-size=md]{font-size:1.25rem;margin-left:.375rem;margin-right:-.25rem}._label_hd89l_1[data-size=sm],._label_hd89l_1[data-size=xs]{font-size:1rem;padding:.625rem;margin-left:.325rem;margin-right:-.5rem}._label_hd89l_1[data-size=xs]{font-size:1rem;padding:.5rem;margin-left:.25rem;margin-right:-.5rem}._label_hd89l_1:hover{background-color:var(--theme-surface-default)}._input_hd89l_38{position:absolute;opacity:0}._icon_hd89l_43{color:var(--theme-base-default)}._icon_hd89l_43 [data-hover=true]{opacity:0}._label_hd89l_1:hover [data-hover=true]{opacity:1}

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -6,5 +6,6 @@ export interface ContextMenuProps {
     placement?: DropdownPlacement;
     size?: ContextMenuSize;
     groups?: MenuItemGroups;
+    className?: string;
 }
-export declare const ContextMenu: ({ id, placement, size, groups, items, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenu: ({ id, placement, size, groups, className, items, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ContextMenu/ContextMenu.js

@@ -3,19 +3,30 @@ import { jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
-import { MenuItems as u } from "../Menu/MenuItems.js";
-import { useRootContext as s } from "../RootProvider/RootProvider.js";
-import { ContextMenuBase as x } from "./ContextMenuBase.js";
-const M = ({
+import { MenuItems as s } from "../Menu/MenuItems.js";
+import { useRootContext as x } from "../RootProvider/RootProvider.js";
+import { ContextMenuBase as c } from "./ContextMenuBase.js";
+const a = ({
   id: t = "context-menu",
   placement: e = "right",
   size: r,
   groups: n = {},
-  items: m
+  className: m,
+  items: i
 }) => {
-  const { currentId: i, toggleId: p } = s();
-  return /* @__PURE__ */ o(x, { size: r, placement: e, expanded: i === t, onToggle: () => p(t), children: /* @__PURE__ */ o(u, { groups: n, items: m }) });
+  const { currentId: p, toggleId: u } = x();
+  return /* @__PURE__ */ o(
+    c,
+    {
+      size: r,
+      placement: e,
+      className: m,
+      expanded: p === t,
+      onToggle: () => u(t),
+      children: /* @__PURE__ */ o(s, { groups: n, items: i })
+    }
+  );
 };
 export {
-  M as ContextMenu
+  a as ContextMenu
 };

package/dist/components/ContextMenu/ContextMenuBase.d.ts

@@ -5,7 +5,8 @@ export interface ContextMenuBaseProps {
     placement: DropdownPlacement;
     expanded: boolean;
     size?: ContextMenuSize;
+    className?: string;
     onToggle?: () => void;
     children?: ReactNode;
 }
-export declare const ContextMenuBase: ({ size, placement, expanded, onToggle, children, }: ContextMenuBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenuBase: ({ size, placement, expanded, className, onToggle, children, }: ContextMenuBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ContextMenu/ContextMenuBase.js

@@ -1,24 +1,25 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import "../../index-L8X2o7IH.js";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { c as m } from "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
-import { IconButton as c } from "../Button/IconButton.js";
+import { IconButton as l } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
-import { DropdownBase as m } from "../Dropdown/DropdownBase.js";
-import '../../assets/ContextMenuBase.css';const l = "_toggle_ya7jy_1", d = "_button_ya7jy_5", p = "_icon_ya7jy_14", _ = "_dropdown_ya7jy_18", o = {
-  toggle: l,
-  button: d,
-  icon: p,
-  dropdown: _
-}, f = ({
+import { DropdownBase as d } from "../Dropdown/DropdownBase.js";
+import '../../assets/ContextMenuBase.css';const p = "_toggle_ya7jy_1", _ = "_button_ya7jy_5", y = "_icon_ya7jy_14", g = "_dropdown_ya7jy_18", o = {
+  toggle: p,
+  button: _,
+  icon: y,
+  dropdown: g
+}, B = ({
   size: n = "sm",
   placement: r = "right",
-  expanded: e = !1,
-  onToggle: s,
-  children: i
-}) => /* @__PURE__ */ a("div", { className: o.toggle, "data-theme": "neutral", children: [
+  expanded: s = !1,
+  className: e,
+  onToggle: a,
+  children: c
+}) => /* @__PURE__ */ i("div", { className: m(o.toggle, e), "data-theme": "neutral", children: [
   /* @__PURE__ */ t(
-    c,
+    l,
     {
       className: o.button,
       size: n,
@@ -26,11 +27,11 @@ import '../../assets/ContextMenuBase.css';const l = "_toggle_ya7jy_1", d = "_but
       iconSize: "md",
       variant: "text",
       color: "secondary",
-      onClick: s
+      onClick: a
     }
   ),
-  /* @__PURE__ */ t(m, { className: o.dropdown, placement: r, expanded: e, children: i })
+  /* @__PURE__ */ t(d, { className: o.dropdown, placement: r, expanded: s, children: c })
 ] });
 export {
-  f as ContextMenuBase
+  B as ContextMenuBase
 };

package/dist/components/Dialog/DialogListItem.js

@@ -1,9 +1,9 @@
 import { jsx as r, jsxs as m } from "react/jsx-runtime";
 import { ListItemBase as p } from "../List/ListItemBase.js";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import { ListItemLabel as M } from "../List/ListItemLabel.js";
 import "react";
+import "../Icon/SvgIcon.js";
 import { DialogBorder as h } from "./DialogBorder.js";
 import { DialogMetadata as g } from "./DialogMetadata.js";
 import { DialogHeaderBase as S } from "./DialogHeaderBase.js";
@@ -28,8 +28,8 @@ import '../../assets/DialogListItem.css';const C = "_item_vo44o_1", E = "_select
   recipient: N,
   grouped: v,
   updatedAt: i,
-  updatedAtLabel: c,
-  archivedAt: s,
+  updatedAtLabel: s,
+  archivedAt: c,
   archivedAtLabel: B,
   trashedAt: l,
   trashedAtLabel: b,
@@ -44,17 +44,17 @@ import '../../assets/DialogListItem.css';const C = "_item_vo44o_1", E = "_select
   summary: _,
   ...f
 }) => {
-  const T = l ? "trashed" : s ? "archived" : u;
+  const T = l ? "trashed" : c ? "archived" : u;
   return o === "xs" || o === "sm" ? /* @__PURE__ */ r(p, { ...f, size: o, className: t.item, children: /* @__PURE__ */ m(h, { className: t.border, size: o, seen: e, children: [
     /* @__PURE__ */ r(M, { size: o, title: d, description: _ }),
-    /* @__PURE__ */ r(g, { updatedAt: i, updatedAtLabel: c })
+    /* @__PURE__ */ r(g, { updatedAt: i, updatedAtLabel: s })
   ] }) }) : /* @__PURE__ */ r(
     p,
     {
       ...f,
       size: o,
       className: t.item,
-      action: a && /* @__PURE__ */ r(w, { className: t.select, ...a }),
+      controls: a && /* @__PURE__ */ r(w, { className: t.select, ...a }),
       children: /* @__PURE__ */ m(h, { className: t.border, size: o, seen: e, children: [
         /* @__PURE__ */ m(S, { size: o, children: [
           /* @__PURE__ */ r(k, { size: o, variant: T, label: x, seen: e, children: d }),
@@ -67,8 +67,8 @@ import '../../assets/DialogListItem.css';const C = "_item_vo44o_1", E = "_select
             {
               status: y,
               updatedAt: i,
-              updatedAtLabel: c,
-              archivedAt: s,
+              updatedAtLabel: s,
+              archivedAt: c,
               archivedAtLabel: B,
               trashedAt: l,
               trashedAtLabel: b,

package/dist/components/List/List.js

@@ -2,9 +2,10 @@ import { jsx as p } from "react/jsx-runtime";
 import { createElement as s } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
+import "../RootProvider/RootProvider.js";
 import { ListItem as n } from "./ListItem.js";
 import { ListBase as f } from "./ListBase.js";
-const x = ({ theme: r, size: t = "md", spacing: m = "md", items: e = [] }) => /* @__PURE__ */ p(f, { theme: r, spacing: m, children: e.map((o, i) => /* @__PURE__ */ s(n, { ...o, size: t, key: "item" + i })) });
+const h = ({ theme: r, size: t = "md", spacing: m = "md", items: o = [] }) => /* @__PURE__ */ p(f, { theme: r, spacing: m, children: o.map((e, i) => /* @__PURE__ */ s(n, { ...e, size: t, key: "item" + i })) });
 export {
-  x as List
+  h as List
 };

package/dist/components/List/ListItem.d.ts

@@ -32,4 +32,4 @@ export interface ListItemProps extends ListItemBaseProps {
     /** Child items */
     items?: ListItemProps[];
 }
-export declare const ListItem: ({ as, color, loading, selected, disabled, size, icon, avatar, avatarGroup, title, description, children, collapsible, expanded, badge, linkText, linkIcon, menu, action, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItem: ({ as, color, loading, size, icon, avatar, avatarGroup, title, description, children, collapsible, expanded, badge, linkText, linkIcon, menu, select, controls, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItem.js

@@ -1,49 +1,45 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { ListItemAction as j } from "./ListItemAction.js";
-import { ListItemBase as v } from "./ListItemBase.js";
-import { ListItemFooter as x } from "./ListItemFooter.js";
-import { ListItemHeader as g } from "./ListItemHeader.js";
-import { ListItemLabel as u } from "./ListItemLabel.js";
+import { jsx as o, jsxs as j } from "react/jsx-runtime";
+import { ListItemBase as u } from "./ListItemBase.js";
+import { ListItemControls as v } from "./ListItemControls.js";
+import { ListItemHeader as x } from "./ListItemHeader.js";
+import { ListItemLabel as g } from "./ListItemLabel.js";
 import { ListItemMedia as w } from "./ListItemMedia.js";
-const J = ({
-  as: s = "a",
+const E = ({
+  as: n = "a",
   color: r,
-  loading: A,
-  selected: B,
-  disabled: F,
+  loading: B,
   size: t = "sm",
-  icon: p,
-  avatar: I,
-  avatarGroup: L,
-  title: a,
-  description: d,
-  children: l,
-  collapsible: i,
-  expanded: m,
-  badge: f,
-  linkText: h,
-  linkIcon: b,
-  menu: e,
-  action: n,
-  ...k
-}) => /* @__PURE__ */ c(
-  v,
+  icon: e,
+  avatar: s,
+  avatarGroup: c,
+  title: p,
+  description: I,
+  children: L,
+  collapsible: m,
+  expanded: i,
+  badge: a,
+  linkText: l,
+  linkIcon: f,
+  menu: d,
+  select: h,
+  controls: k,
+  ...b
+}) => /* @__PURE__ */ o(
+  u,
   {
-    as: s,
+    as: n,
     size: t,
     color: r,
-    expanded: m,
-    action: n || e && /* @__PURE__ */ o(j, { menu: e, children: n }),
-    ...k,
-    children: [
-      /* @__PURE__ */ c(g, { size: t, children: [
-        /* @__PURE__ */ o(w, { color: r, size: t, icon: p, avatar: I, avatarGroup: L }),
-        /* @__PURE__ */ o(u, { title: a, description: d, size: t, children: l })
-      ] }),
-      /* @__PURE__ */ o(x, { linkIcon: i && m ? "chevron-up" : i ? "chevron-down" : b, linkText: h, badge: f })
-    ]
+    expanded: i,
+    select: h,
+    controls: k || /* @__PURE__ */ o(v, { linkIcon: m && i ? "chevron-up" : m ? "chevron-down" : f, linkText: l, menu: d, badge: a }),
+    ...b,
+    children: /* @__PURE__ */ j(x, { size: t, children: [
+      /* @__PURE__ */ o(w, { color: r, size: t, icon: e, avatar: s, avatarGroup: c }),
+      /* @__PURE__ */ o(g, { title: p, description: I, size: t, children: L })
+    ] })
   }
 );
 export {
-  J as ListItem
+  E as ListItem
 };

package/dist/components/List/ListItem.stories.js

@@ -1,14 +1,14 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Fragment as p, useState as g } from "react";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { Fragment as d, useState as g } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import { Button as k } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import { MetaItem as r } from "../Meta/MetaItem.js";
 import { ListItem as t } from "./ListItem.js";
-import { ListBase as c } from "./ListBase.js";
-import { List as y } from "./List.js";
-const s = ["lg", "md", "sm", "xs"], T = {
+import { ListBase as s } from "./ListBase.js";
+import { List as b } from "./List.js";
+const a = ["lg", "md", "sm", "xs"], T = {
   title: "List/ListItem",
   component: t,
   tags: ["autodocs"],
@@ -21,7 +21,7 @@ const s = ["lg", "md", "sm", "xs"], T = {
   }
 }, B = {
   args: {}
-}, E = (n) => /* @__PURE__ */ a(c, { children: [
+}, E = (n) => /* @__PURE__ */ c(s, { children: [
   /* @__PURE__ */ e(t, { ...n }),
   /* @__PURE__ */ e(r, { children: "No media" }),
   /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear" }),
@@ -106,7 +106,7 @@ const s = ["lg", "md", "sm", "xs"], T = {
     }
   ),
   /* @__PURE__ */ e(r, { children: "Company group" })
-] }), H = (n) => /* @__PURE__ */ a(c, { children: [
+] }), H = (n) => /* @__PURE__ */ c(s, { children: [
   /* @__PURE__ */ e(t, { ...n, linkIcon: "chevron-right" }),
   /* @__PURE__ */ e(r, { children: "Link icon, emphasising that this will take you somewhere" }),
   /* @__PURE__ */ e(t, { ...n, linkIcon: "chevron-right", linkText: "Åpne" }),
@@ -129,26 +129,49 @@ const s = ["lg", "md", "sm", "xs"], T = {
       }
     }
   ),
-  /* @__PURE__ */ e(r, { children: "List item with context menu and linkIcon" }),
+  /* @__PURE__ */ e(r, { children: "List item with badge, linkIcon and context menu" }),
   /* @__PURE__ */ e(
     t,
     {
       ...n,
-      action: /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", margin: "0.625rem" }, children: /* @__PURE__ */ e(k, { icon: "pencil", reverse: !0, size: "sm", variant: "outline", children: "Rediger" }) })
+      controls: /* @__PURE__ */ e("div", { style: { position: "absolute", right: 0, display: "flex", alignItems: "center", margin: "0.625rem" }, children: /* @__PURE__ */ e(k, { icon: "pencil", size: "sm", variant: "outline", children: "Rediger" }) })
     }
   ),
-  /* @__PURE__ */ e(r, { children: "List item with custom action" })
-] }), M = (n) => /* @__PURE__ */ a(c, { children: [
+  /* @__PURE__ */ e(r, { children: "List item with custom controls" })
+] }), M = (n) => /* @__PURE__ */ e(s, { children: a == null ? void 0 : a.map((o) => /* @__PURE__ */ c(d, { children: [
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      size: o,
+      select: {
+        checked: !1
+      }
+    }
+  ),
+  /* @__PURE__ */ e(
+    t,
+    {
+      ...n,
+      size: o,
+      select: {
+        checked: !0
+      },
+      selected: !0
+    }
+  ),
+  /* @__PURE__ */ e(r, { children: o })
+] }, o)) }), S = (n) => /* @__PURE__ */ c(s, { children: [
   /* @__PURE__ */ e(t, { ...n }),
   /* @__PURE__ */ e(r, { children: "Default" }),
   /* @__PURE__ */ e(t, { ...n, color: "accent" }),
   /* @__PURE__ */ e(r, { children: "Accent" })
-] }), P = (n) => /* @__PURE__ */ e(c, { children: s == null ? void 0 : s.map((o) => /* @__PURE__ */ a(p, { children: [
+] }), _ = (n) => /* @__PURE__ */ e(s, { children: a == null ? void 0 : a.map((o) => /* @__PURE__ */ c(d, { children: [
   /* @__PURE__ */ e(t, { ...n, icon: "teddy-bear", size: o, selected: o === (n == null ? void 0 : n.size), linkIcon: "chevron-right" }),
   /* @__PURE__ */ e(r, { children: o })
-] }, o)) }), _ = (n) => {
-  const [o, d] = g(!1), m = () => {
-    d((i) => !i);
+] }, o)) }), j = (n) => {
+  const [o, p] = g(!1), m = () => {
+    p((i) => !i);
   }, l = [
     {
       name: "Per Ove Ludvigsen",
@@ -185,7 +208,7 @@ const s = ["lg", "md", "sm", "xs"], T = {
       type: "person"
     }))
   };
-  return /* @__PURE__ */ a(p, { children: [
+  return /* @__PURE__ */ c(d, { children: [
     /* @__PURE__ */ e(
       t,
       {
@@ -197,15 +220,16 @@ const s = ["lg", "md", "sm", "xs"], T = {
         as: "button"
       }
     ),
-    o && /* @__PURE__ */ e(y, { size: "sm", spacing: "none", items: h })
+    o && /* @__PURE__ */ e(b, { size: "sm", spacing: "none", items: h })
   ] });
 };
 export {
-  H as ActionProps,
-  _ as Collapsible,
-  M as Colors,
+  j as Collapsible,
+  S as Colors,
+  H as Controls,
   B as Default,
   E as MediaTypes,
-  P as Sizes,
+  M as Selectable,
+  _ as Sizes,
   T as default
 };

package/dist/components/List/ListItemBase.d.ts

@@ -1,4 +1,5 @@
 import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
+import { ListItemSelectProps } from './ListItemSelect';
 export type ListItemColor = 'default' | 'accent';
 export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ListItemShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -13,12 +14,14 @@ export interface ListItemBaseProps {
     hidden?: boolean;
     collapsible?: boolean;
     disabled?: boolean;
+    select?: ListItemSelectProps;
     selected?: boolean;
     expanded?: boolean;
     onClick?: () => void;
     onKeyPress?: KeyboardEventHandler;
     action?: ReactNode;
+    controls?: ReactNode;
     children?: ReactNode;
     style?: React.CSSProperties;
 }
-export declare const ListItemBase: ({ as, children, className, href, size, color, active, hidden, shadow, disabled, selected, expanded, action, onClick, onKeyPress, style, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemBase: ({ as, children, className, href, size, color, active, hidden, shadow, select, selected, disabled, expanded, controls, onClick, onKeyPress, style, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItemBase.js

@@ -1,62 +1,64 @@
-import { jsxs as I, jsx as N } from "react/jsx-runtime";
-import { c as u } from "../../index-L8X2o7IH.js";
-import '../../assets/ListItemBase.css';const v = "_item_jxdl8_1", w = "_link_jxdl8_69", r = {
-  item: v,
-  link: w
-}, E = ({
-  as: m,
+import { jsxs as L, jsx as m } from "react/jsx-runtime";
+import { c as N } from "../../index-L8X2o7IH.js";
+import { ListItemSelect as v } from "./ListItemSelect.js";
+import '../../assets/ListItemBase.css';const w = "_item_us7f0_1", B = "_link_us7f0_74", r = {
+  item: w,
+  link: B
+}, k = ({
+  as: c,
   children: l,
-  className: c,
-  href: n,
-  size: e,
-  color: x,
-  active: o = !1,
-  hidden: _ = !1,
-  shadow: p = "xs",
-  disabled: f,
-  selected: j,
-  expanded: d,
-  action: h,
+  className: n,
+  href: o,
+  size: t,
+  color: f,
+  active: x = !1,
+  hidden: p = !1,
+  shadow: _ = "xs",
+  select: s,
+  selected: h,
+  disabled: u,
+  expanded: i,
+  controls: I,
   onClick: a,
-  onKeyPress: t,
-  style: i
+  onKeyPress: e,
+  style: b
 }) => {
-  const b = m || "a";
-  return /* @__PURE__ */ I(
+  const j = c || "a";
+  return /* @__PURE__ */ L(
     "article",
     {
       className: r.item,
-      "data-color": x,
-      "data-size": e,
-      "data-shadow": p,
-      "data-active": o,
-      "aria-hidden": _,
-      "aria-disabled": f,
-      "aria-selected": j,
-      "aria-expanded": d,
-      style: i,
+      "data-color": f,
+      "data-size": t,
+      "data-shadow": _,
+      "data-active": x,
+      "aria-hidden": p,
+      "aria-disabled": u,
+      "aria-selected": h,
+      "aria-expanded": i,
       children: [
-        /* @__PURE__ */ N(
-          b,
+        s && /* @__PURE__ */ m(v, { ...s, size: t }),
+        /* @__PURE__ */ m(
+          j,
           {
-            className: u(r.link, c),
-            "data-size": e,
-            "aria-expanded": d,
-            style: i,
-            href: n,
-            onKeyPress: (s) => {
-              s.key === "Enter" && (a == null || a()), t == null || t(s);
+            className: N(r.link, n),
+            "data-size": t,
+            "aria-expanded": i,
+            style: b,
+            href: o,
+            onKeyPress: (d) => {
+              d.key === "Enter" && (a == null || a()), e == null || e(d);
             },
             onClick: a,
             tabIndex: -1,
             children: l
           }
         ),
-        h
+        I
       ]
     }
   );
 };
 export {
-  E as ListItemBase
+  k as ListItemBase
 };

package/dist/components/List/ListItemControls.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { BadgeProps } from '../Badge';
+import { ContextMenuProps } from '../ContextMenu';
+import { IconName } from '../Icon';
+interface ListItemControlsProps {
+    badge?: BadgeProps;
+    linkText?: string;
+    linkIcon?: IconName;
+    menu?: ContextMenuProps;
+    children?: ReactNode;
+}
+export declare const ListItemControls: ({ badge, linkText, linkIcon, menu, children }: ListItemControlsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/List/ListItemControls.js

@@ -0,0 +1,19 @@
+import { jsx as t, jsxs as l, Fragment as m } from "react/jsx-runtime";
+import { Badge as i } from "../Badge/Badge.js";
+import { ContextMenu as a } from "../ContextMenu/ContextMenu.js";
+import { Icon as d } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import "../../index-L8X2o7IH.js";
+import '../../assets/ListItemControls.css';const _ = "_controls_dduzt_1", p = "_linkText_dduzt_14", x = "_linkIcon_dduzt_19", o = {
+  controls: _,
+  linkText: p,
+  linkIcon: x
+}, T = ({ badge: s, linkText: r, linkIcon: c, menu: n, children: e }) => /* @__PURE__ */ t("div", { className: o.controls, "data-menu": n && !0, children: e || /* @__PURE__ */ l(m, { children: [
+  s && /* @__PURE__ */ t(i, { ...s }),
+  r && /* @__PURE__ */ t("span", { className: o.linkText, children: r }),
+  c && /* @__PURE__ */ t(d, { name: c, className: o.linkIcon }),
+  n && /* @__PURE__ */ t(a, { ...n, className: o.menu })
+] }) });
+export {
+  T as ListItemControls
+};

package/dist/components/List/ListItemSelect.d.ts

@@ -0,0 +1,12 @@
+import { ChangeEventHandler } from 'react';
+import { ListItemSize } from './ListItemBase';
+export type ListItemSelectProps = {
+    size?: ListItemSize;
+    checked?: boolean;
+    onChange?: ChangeEventHandler;
+    className?: string;
+};
+/**
+ * Dialog checkbox
+ */
+export declare const ListItemSelect: ({ size, checked, onChange, className }: ListItemSelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItemSelect.js

@@ -0,0 +1,15 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { c as a } from "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { CheckboxIcon as i } from "../Icon/CheckboxIcon.js";
+import '../../assets/ListItemSelect.css';const r = "_label_hd89l_1", m = "_input_hd89l_38", p = "_icon_hd89l_43", t = {
+  label: r,
+  input: m,
+  icon: p
+}, h = ({ size: l, checked: e = !1, onChange: s, className: c }) => /* @__PURE__ */ n("label", { className: a(t.label, c), "data-size": l, children: [
+  /* @__PURE__ */ o("input", { type: "checkbox", checked: e, onChange: s, className: t.input, tabIndex: -1 }),
+  /* @__PURE__ */ o(i, { hover: !0, checked: e, className: t.icon })
+] });
+export {
+  h as ListItemSelect
+};

package/dist/components/List/index.d.ts

@@ -1,8 +1,9 @@
 export * from './ListItemBase';
 export * from './ListItemHeader';
-export * from './ListItemFooter';
 export * from './ListItemLabel';
 export * from './ListItemMedia';
+export * from './ListItemControls';
+export * from './ListItemSelect';
 export * from './ListItem';
 export * from './ListBase';
 export * from './List';