impact-nova 2.1.0-alpha.4 → 2.1.0-alpha.5

package/dist/components/data/expandable-list-item/expandable-list-item-parts.js

@@ -0,0 +1,233 @@
+import { jsx as n, jsxs as v } from "react/jsx-runtime";
+import * as i from "react";
+import { ChevronRight as y } from "impact-nova-icons";
+import { AccordionContent as R, Accordion as A, AccordionItem as k, AccordionTrigger as T } from "../../primitives/accordion/accordion.js";
+import { Checkbox as P } from "../../forms/checkbox/checkbox.js";
+import { createCompoundPart as I } from "../../../lib/primitives/create-compound.js";
+import { cn as r } from "../../../lib/utils.js";
+import { useExpandableListItemContext as x, ExpandableListItemProvider as E, EXPANDABLE_LIST_ITEM_ACCORDION_VALUE as c } from "./expandable-list-item-context.js";
+function N(e, t) {
+  return r(
+    "rounded-xl transition-[background-color,border-color,box-shadow] duration-200",
+    e ? "border-stroke-accent/40 bg-canvas-accent shadow-sm" : "border-stroke bg-canvas-elevated",
+    t
+  );
+}
+function V(e) {
+  return i.isValidElement(e) && e.type.displayName === "ExpandableListItemContent";
+}
+const D = i.forwardRef(
+  ({
+    className: e,
+    selected: t,
+    expanded: a,
+    defaultExpanded: o = !1,
+    onExpandedChange: s,
+    disabled: l,
+    expandAriaLabel: m = "Expand details",
+    collapseAriaLabel: b = "Collapse details",
+    children: p,
+    ...f
+  }, h) => {
+    const d = !!t, L = i.Children.toArray(p).find(V) != null, u = i.useMemo(
+      () => ({
+        showSelectionChrome: d,
+        disabled: l,
+        expandAriaLabel: m,
+        collapseAriaLabel: b
+      }),
+      [d, l, m, b]
+    );
+    if (!L)
+      return /* @__PURE__ */ n(E, { value: u, children: /* @__PURE__ */ n(
+        "div",
+        {
+          ref: h,
+          "data-component": "expandable-list-item-row",
+          "data-expandable": "false",
+          "data-selected": t ? "" : void 0,
+          "data-selection-chrome": d ? "" : void 0,
+          className: N(d, e),
+          ...f,
+          children: p
+        }
+      ) });
+    const g = a !== void 0, C = g ? a ? c : "" : void 0;
+    return /* @__PURE__ */ n(E, { value: u, children: /* @__PURE__ */ n(
+      "div",
+      {
+        ref: h,
+        "data-component": "expandable-list-item",
+        "data-expandable": "true",
+        "data-expanded": a ?? void 0,
+        "data-selected": t ? "" : void 0,
+        "data-selection-chrome": d ? "" : void 0,
+        className: N(d, e),
+        ...f,
+        children: /* @__PURE__ */ n(
+          A,
+          {
+            type: "single",
+            collapsible: !0,
+            disabled: l,
+            ...g ? { value: C } : {
+              defaultValue: o ? c : void 0
+            },
+            onValueChange: (w) => s?.(w === c),
+            children: /* @__PURE__ */ n(
+              k,
+              {
+                value: c,
+                className: "overflow-visible rounded-none border-0 bg-transparent p-0 shadow-none",
+                children: p
+              }
+            )
+          }
+        )
+      }
+    ) });
+  }
+);
+D.displayName = "ExpandableListItemRoot";
+const W = I("expandable-list-item", {
+  part: "row",
+  displayName: "ExpandableListItemRow",
+  className: "flex items-start gap-3 px-3 py-3"
+}), M = i.forwardRef(({ className: e, onCheckedChange: t, ...a }, o) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: r("pt-0.5", e),
+    "data-component": "expandable-list-item-checkbox",
+    onClick: (s) => s.stopPropagation(),
+    onKeyDown: (s) => s.stopPropagation(),
+    children: /* @__PURE__ */ n(
+      P,
+      {
+        ref: o,
+        onCheckedChange: (s) => t?.(s === !0),
+        ...a
+      }
+    )
+  }
+));
+M.displayName = "ExpandableListItemCheckbox";
+const S = i.forwardRef(({ className: e, children: t, ...a }, o) => {
+  const { disabled: s, expandAriaLabel: l, collapseAriaLabel: m } = x();
+  return /* @__PURE__ */ v(
+    T,
+    {
+      ref: o,
+      variant: "plain",
+      "data-component": "expandable-list-item-trigger",
+      className: r(
+        "min-w-0 items-center gap-2 text-left",
+        s && "pointer-events-none opacity-50",
+        e
+      ),
+      disabled: s,
+      ...a,
+      children: [
+        t,
+        /* @__PURE__ */ n(
+          "span",
+          {
+            className: "mt-0.5 inline-flex shrink-0 text-content-icon transition-transform duration-200 motion-reduce:transition-none group-data-[state=open]:rotate-180",
+            "aria-hidden": !0,
+            children: /* @__PURE__ */ n(y, { className: "size-4 rotate-90" })
+          }
+        ),
+        /* @__PURE__ */ v("span", { className: "sr-only", children: [
+          l,
+          " / ",
+          m
+        ] })
+      ]
+    }
+  );
+});
+S.displayName = "ExpandableListItemTrigger";
+const _ = i.forwardRef(({ className: e, ...t }, a) => {
+  const { showSelectionChrome: o } = x();
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      ref: a,
+      "data-component": "expandable-list-item-title",
+      className: r(
+        "text-sm font-semibold leading-6 text-content",
+        o && "tracking-tight",
+        e
+      ),
+      ...t
+    }
+  );
+});
+_.displayName = "ExpandableListItemTitle";
+const j = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: a,
+    "data-component": "expandable-list-item-description",
+    className: r("mt-0.5 text-xs font-medium leading-4 text-secondary-foreground", e),
+    ...t
+  }
+));
+j.displayName = "ExpandableListItemDescription";
+const B = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: a,
+    "data-component": "expandable-list-item-media",
+    className: r("flex flex-wrap items-center gap-2", e),
+    ...t
+  }
+));
+B.displayName = "ExpandableListItemMedia";
+const F = i.forwardRef(({ className: e, ...t }, a) => {
+  const { disabled: o } = x();
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: a,
+      "data-component": "expandable-list-item-header",
+      className: r(
+        "min-w-0 flex-1",
+        o && "pointer-events-none opacity-50",
+        e
+      ),
+      ...t
+    }
+  );
+});
+F.displayName = "ExpandableListItemHeader";
+const H = i.forwardRef(({ className: e, children: t, ...a }, o) => /* @__PURE__ */ n(R, { className: "border-0 bg-transparent p-0 pb-[0.01rem]", children: /* @__PURE__ */ n(
+  "div",
+  {
+    ref: o,
+    "data-component": "expandable-list-item-content",
+    className: r(
+      "mx-2 mb-2 overflow-hidden rounded-lg bg-canvas-subtle pt-2",
+      e
+    ),
+    ...a,
+    children: t
+  }
+) }));
+H.displayName = "ExpandableListItemContent";
+const Y = I("expandable-list-item", {
+  part: "footer",
+  displayName: "ExpandableListItemFooter",
+  className: "px-4 py-3 sm:px-5"
+});
+export {
+  M as ExpandableListItemCheckbox,
+  H as ExpandableListItemContent,
+  j as ExpandableListItemDescription,
+  Y as ExpandableListItemFooter,
+  F as ExpandableListItemHeader,
+  B as ExpandableListItemMedia,
+  D as ExpandableListItemRoot,
+  W as ExpandableListItemRow,
+  _ as ExpandableListItemTitle,
+  S as ExpandableListItemTrigger
+};

package/dist/components/data/expandable-list-item/expandable-list-item-preset.d.ts

@@ -0,0 +1,18 @@
+import { ExpandableListItemSection, ExpandableListItemSelection } from './expandable-list-item.types';
+import * as React from "react";
+export interface ExpandableListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
+    title: string;
+    description?: React.ReactNode;
+    badge?: React.ReactNode;
+    selection?: ExpandableListItemSelection;
+    selected?: boolean;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (open: boolean) => void;
+    disabled?: boolean;
+    sections?: ReadonlyArray<ExpandableListItemSection>;
+    panelFooter?: React.ReactNode;
+    expandAriaLabel?: string;
+    collapseAriaLabel?: string;
+}
+export declare const ExpandableListItem: React.ForwardRefExoticComponent<ExpandableListItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data/expandable-list-item/expandable-list-item-preset.js

@@ -0,0 +1,133 @@
+import { jsx as l, jsxs as d } from "react/jsx-runtime";
+import * as R from "react";
+import { ExpandableListItemAttributes as T } from "./expandable-list-item-attributes.js";
+import { ExpandableListItemMetrics as v } from "./expandable-list-item-metrics.js";
+import { ExpandableListItemRoot as f, ExpandableListItemRow as o, ExpandableListItemCheckbox as C, ExpandableListItemHeader as E, ExpandableListItemMedia as I, ExpandableListItemTitle as k, ExpandableListItemDescription as L, ExpandableListItemTrigger as y, ExpandableListItemContent as j, ExpandableListItemFooter as M } from "./expandable-list-item-parts.js";
+function O(e) {
+  switch (e.type) {
+    case "metrics":
+      return /* @__PURE__ */ l(
+        v,
+        {
+          sectionId: e.id,
+          columns: e.columns
+        },
+        e.id
+      );
+    case "attributes":
+      return /* @__PURE__ */ l(
+        T,
+        {
+          title: e.title,
+          tags: e.tags,
+          maxVisibleTags: e.maxVisibleTags,
+          formatOverflow: e.formatOverflow
+        },
+        e.id
+      );
+    case "custom":
+      return /* @__PURE__ */ l(V, { section: e }, e.id);
+    default:
+      return null;
+  }
+}
+function V({ section: e }) {
+  return /* @__PURE__ */ l("div", { className: "px-4 py-4 sm:px-5", children: e.content });
+}
+const $ = R.forwardRef(
+  ({
+    className: e,
+    title: t,
+    description: n,
+    badge: m,
+    selection: a,
+    selected: g,
+    expanded: w,
+    defaultExpanded: S = !1,
+    onExpandedChange: P,
+    disabled: c,
+    sections: i,
+    panelFooter: h,
+    expandAriaLabel: s = "Expand details",
+    collapseAriaLabel: u = "Collapse details",
+    ...b
+  }, p) => {
+    const x = !!(g || a?.checked);
+    return i != null && i.length > 0 || h != null ? /* @__PURE__ */ d(
+      f,
+      {
+        ref: p,
+        className: e,
+        selected: x,
+        expanded: w,
+        defaultExpanded: S,
+        onExpandedChange: P,
+        disabled: c,
+        expandAriaLabel: s,
+        collapseAriaLabel: u,
+        ...b,
+        children: [
+          /* @__PURE__ */ d(o, { children: [
+            a ? /* @__PURE__ */ l(
+              C,
+              {
+                checked: a.checked,
+                disabled: a.disabled,
+                onCheckedChange: (r) => {
+                  r !== a.checked && a.onCheckedChange(r);
+                },
+                "aria-label": a["aria-label"] ?? `Select ${t}`
+              }
+            ) : null,
+            /* @__PURE__ */ l(y, { children: /* @__PURE__ */ d(E, { children: [
+              /* @__PURE__ */ d(I, { children: [
+                /* @__PURE__ */ l(k, { children: t }),
+                m
+              ] }),
+              n ? /* @__PURE__ */ l(L, { children: n }) : null
+            ] }) })
+          ] }),
+          /* @__PURE__ */ d(j, { children: [
+            i?.map((r) => O(r)),
+            h ? /* @__PURE__ */ l(M, { children: h }) : null
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ l(
+      f,
+      {
+        ref: p,
+        className: e,
+        selected: x,
+        disabled: c,
+        expandAriaLabel: s,
+        collapseAriaLabel: u,
+        ...b,
+        children: /* @__PURE__ */ d(o, { children: [
+          a ? /* @__PURE__ */ l(
+            C,
+            {
+              checked: a.checked,
+              disabled: a.disabled,
+              onCheckedChange: (r) => {
+                r !== a.checked && a.onCheckedChange(r);
+              },
+              "aria-label": a["aria-label"] ?? `Select ${t}`
+            }
+          ) : null,
+          /* @__PURE__ */ d(E, { children: [
+            /* @__PURE__ */ d(I, { children: [
+              /* @__PURE__ */ l(k, { children: t }),
+              m
+            ] }),
+            n ? /* @__PURE__ */ l(L, { children: n }) : null
+          ] })
+        ] })
+      }
+    );
+  }
+);
+$.displayName = "ExpandableListItem";
+export {
+  $ as ExpandableListItem
+};

package/dist/components/data/expandable-list-item/expandable-list-item.d.ts

@@ -0,0 +1,5 @@
+export { ExpandableListItem, type ExpandableListItemProps, } from './expandable-list-item-preset';
+export { ExpandableListItemRoot, ExpandableListItemRow, ExpandableListItemCheckbox, ExpandableListItemTrigger, ExpandableListItemTitle, ExpandableListItemDescription, ExpandableListItemMedia, ExpandableListItemHeader, ExpandableListItemContent, ExpandableListItemFooter, type ExpandableListItemRootProps, type ExpandableListItemCheckboxProps, } from './expandable-list-item-parts';
+export { ExpandableListItemMetrics, type ExpandableListItemMetricsProps } from './expandable-list-item-metrics';
+export { ExpandableListItemAttributes, type ExpandableListItemAttributesProps, } from './expandable-list-item-attributes';
+export type { ExpandableListItemAttributesSection, ExpandableListItemCustomSection, ExpandableListItemMetricColumn, ExpandableListItemMetricsSection, ExpandableListItemSelection, ExpandableListItemSection, } from './expandable-list-item.types';

package/dist/components/data/{expandable-sku/expandable-sku.types.d.ts → expandable-list-item/expandable-list-item.types.d.ts}

@@ -1,16 +1,16 @@
 import { ReactNode } from 'react';
-export type SkuRowMetricColumn = {
+export type ExpandableListItemMetricColumn = {
     label: string;
     value: string;
 };
 /** Horizontal metrics row (any column count). */
-export type SkuRowMetricsSection = {
+export type ExpandableListItemMetricsSection = {
     id: string;
     type: "metrics";
-    columns: ReadonlyArray<SkuRowMetricColumn>;
+    columns: ReadonlyArray<ExpandableListItemMetricColumn>;
 };
 /** Tag pills with optional overflow summary (e.g. `+64`). */
-export type SkuRowAttributesSection = {
+export type ExpandableListItemAttributesSection = {
     id: string;
     type: "attributes";
     title?: string;
@@ -21,13 +21,13 @@ export type SkuRowAttributesSection = {
     formatOverflow?: (hiddenCount: number) => string;
 };
 /** Arbitrary block inside the expanded panel. */
-export type SkuRowCustomSection = {
+export type ExpandableListItemCustomSection = {
     id: string;
     type: "custom";
     content: ReactNode;
 };
-export type SkuRowSection = SkuRowMetricsSection | SkuRowAttributesSection | SkuRowCustomSection;
-export type SkuRowSelection = {
+export type ExpandableListItemSection = ExpandableListItemMetricsSection | ExpandableListItemAttributesSection | ExpandableListItemCustomSection;
+export type ExpandableListItemSelection = {
     checked: boolean;
     onCheckedChange: (checked: boolean) => void;
     disabled?: boolean;

package/dist/components/data/expandable-list-item/index.d.ts

@@ -0,0 +1,5 @@
+export { ExpandableListItem, type ExpandableListItemProps, } from './expandable-list-item-preset';
+export { ExpandableListItemRoot, ExpandableListItemRow, ExpandableListItemCheckbox, ExpandableListItemTrigger, ExpandableListItemTitle, ExpandableListItemDescription, ExpandableListItemMedia, ExpandableListItemHeader, ExpandableListItemContent, ExpandableListItemFooter, type ExpandableListItemRootProps, type ExpandableListItemCheckboxProps, } from './expandable-list-item-parts';
+export { ExpandableListItemMetrics, type ExpandableListItemMetricsProps } from './expandable-list-item-metrics';
+export { ExpandableListItemAttributes, type ExpandableListItemAttributesProps, } from './expandable-list-item-attributes';
+export type { ExpandableListItemAttributesSection, ExpandableListItemCustomSection, ExpandableListItemMetricColumn, ExpandableListItemMetricsSection, ExpandableListItemSelection, ExpandableListItemSection, } from './expandable-list-item.types';

package/dist/components/data/expandable-list-item/index.js

@@ -0,0 +1,19 @@
+import { ExpandableListItem as a } from "./expandable-list-item-preset.js";
+import { ExpandableListItemCheckbox as p, ExpandableListItemContent as x, ExpandableListItemDescription as m, ExpandableListItemFooter as n, ExpandableListItemHeader as o, ExpandableListItemMedia as s, ExpandableListItemRoot as b, ExpandableListItemRow as d, ExpandableListItemTitle as r, ExpandableListItemTrigger as l } from "./expandable-list-item-parts.js";
+import { ExpandableListItemMetrics as I } from "./expandable-list-item-metrics.js";
+import { ExpandableListItemAttributes as f } from "./expandable-list-item-attributes.js";
+export {
+  a as ExpandableListItem,
+  f as ExpandableListItemAttributes,
+  p as ExpandableListItemCheckbox,
+  x as ExpandableListItemContent,
+  m as ExpandableListItemDescription,
+  n as ExpandableListItemFooter,
+  o as ExpandableListItemHeader,
+  s as ExpandableListItemMedia,
+  I as ExpandableListItemMetrics,
+  b as ExpandableListItemRoot,
+  d as ExpandableListItemRow,
+  r as ExpandableListItemTitle,
+  l as ExpandableListItemTrigger
+};

package/dist/components/data/nested-list/components/NestedListHeader.js

@@ -1,7 +1,7 @@
 import { jsx as t, jsxs as o } from "react/jsx-runtime";
 import "react";
-import { Checkbox as N } from "../../../forms/checkbox/checkbox.js";
-import { Input as v } from "../../../forms/input/input.js";
+import { Checkbox as v } from "../../../forms/checkbox/checkbox.js";
+import { Input as N } from "../../../forms/input/input.js";
 import { ChevronRight as k, Search as g } from "impact-nova-icons";
 import { cn as C } from "../../../../lib/utils.js";
 import { useImpactNovaI18n as z } from "../../../../i18n/use-impact-nova-i18n.js";
@@ -12,8 +12,8 @@ const E = ({
   enableSearch: n,
   enableSelectAll: e,
   groupLabel: i,
-  allChecked: m,
-  isIndeterminate: a = !1,
+  allChecked: a,
+  isIndeterminate: m = !1,
   onSelectAll: d,
   searchText: x,
   onSearchChange: l,
@@ -28,7 +28,7 @@ const E = ({
     {
       type: "button",
       onClick: y,
-      className: "p-1 hover:bg-muted rounded-full transition-colors flex items-center text-content-icon hover:text-brand",
+      className: "p-1 hover:bg-canvas-muted rounded-full transition-colors flex items-center text-content-icon hover:text-brand",
       "aria-label": u(c ? "nestedList.expandAll" : "nestedList.collapseAll"),
       children: /* @__PURE__ */ t(
         k,
@@ -46,14 +46,14 @@ const E = ({
     ] }),
     /* @__PURE__ */ o("div", { className: "flex items-center gap-1", children: [
       e && /* @__PURE__ */ t(
-        N,
+        v,
         {
-          checked: a ? "indeterminate" : m,
+          checked: m ? "indeterminate" : a,
           onCheckedChange: d
         }
       ),
       n ? /* @__PURE__ */ t("div", { className: "flex-1 ml-auto", children: /* @__PURE__ */ t(
-        v,
+        N,
         {
           type: "text",
           placeholder: p,
@@ -66,14 +66,14 @@ const E = ({
   ] }) : /* @__PURE__ */ o("div", { className: "flex items-center gap-1 mb-3", children: [
     s && r && h,
     e && /* @__PURE__ */ t(
-      N,
+      v,
       {
-        checked: a ? "indeterminate" : m,
+        checked: m ? "indeterminate" : a,
         onCheckedChange: d
       }
     ),
     n ? /* @__PURE__ */ t("div", { className: "flex-1 ml-auto", children: /* @__PURE__ */ t(
-      v,
+      N,
       {
         type: "text",
         placeholder: p,

package/dist/components/data/nested-list/components/SortableItem.js

@@ -102,7 +102,7 @@ const E = (e, r) => {
                   d.stopPropagation(), i(e.id);
                 },
                 onMouseDown: (d) => d.stopPropagation(),
-                className: "flex h-4 w-4 items-center justify-center rounded-full p-0 hover:bg-muted transition-colors text-content-icon hover:text-brand",
+                className: "flex h-4 w-4 items-center justify-center rounded-full p-0 hover:bg-canvas-muted transition-colors text-content-icon hover:text-brand",
                 "aria-label": h(a ? "nestedList.expand" : "nestedList.collapse"),
                 children: /* @__PURE__ */ t(
                   P,
@@ -130,7 +130,7 @@ const E = (e, r) => {
                 ...C,
                 ...I,
                 "aria-label": `${h("aria.dragHandle")}: ${e.label}`,
-                className: "shrink-0 mt-0.5 cursor-grab active:cursor-grabbing p-0 hover:bg-muted rounded flex items-center h-4",
+                className: "shrink-0 mt-0.5 cursor-grab active:cursor-grabbing p-0 hover:bg-canvas-muted rounded flex items-center h-4",
                 style: {
                   pointerEvents: "auto",
                   position: "relative",

package/dist/components/data-display/avatar/avatar.types.d.ts

@@ -3,5 +3,7 @@ import { avatarVariants } from './avatar.variants';
 import type * as React from "react";
 import type * as AvatarPrimitive from "@radix-ui/react-avatar";
 export type AvatarProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & VariantProps<typeof avatarVariants>;
+/** Image slot — Radix `Avatar.Image`. Cross-fades to `AvatarFallback` on load failure. */
 export type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>;
+/** Shown when the image is loading or failed. Use 1–2 initials or an icon. */
 export type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>;

package/dist/components/data-display/badge/badge.types.d.ts

@@ -2,6 +2,8 @@ import { VariantProps } from 'class-variance-authority';
 import { badgeVariants } from './badge.variants';
 import type * as React from "react";
 export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, Omit<VariantProps<typeof badgeVariants>, "layout"> {
+    /** Optional leading icon (16px). Omit `children` for icon-only badge (`data-layout="iconOnly"`). */
     icon?: React.ReactNode;
+    /** Inactive visual — `pointer-events-none` and disabled token colors. */
     disabled?: boolean;
 }

package/dist/components/data-display/calendar/calendar-day-picker-classnames.js

@@ -1,7 +1,7 @@
 import "react-day-picker";
 import { cn as e } from "../../../lib/utils.js";
 function s(o) {
-  const { defaultClassNames: t, pickerType: n, calendarType: l, showOutsideDays: a, classNames: r } = o;
+  const { defaultClassNames: t, pickerType: r, calendarType: l, showOutsideDays: a, classNames: n } = o;
   return {
     root: e("w-fit", t.root),
     months: e("relative", t.months),
@@ -33,39 +33,39 @@ function s(o) {
     ),
     weekday: e(
       "flex-1 select-none rounded-md font-normal text-center",
-      "text-[11px] text-content-muted pb-2",
+      "text-[11px] text-secondary-foreground pb-2",
       "[&:nth-child(2)]:pl-2",
       t.weekday
     ),
     week: e("mt-1 flex w-full items-stretch group/week", t.week),
     week_number_header: e(
       "select-none font-normal text-center h-[30px] flex items-center justify-center",
-      "text-[11px] text-content-muted w-[30px] flex-shrink-0",
+      "text-[11px] text-secondary-foreground w-[30px] flex-shrink-0",
       t.week_number_header
     ),
     week_number: e(
       "select-none flex items-center justify-center h-[30px]",
-      "text-[11px] text-content-muted w-[30px] flex-shrink-0 transition-colors",
-      n === "week" && "group-hover/week:bg-accent group-hover/week:rounded-l-lg",
+      "text-[11px] text-secondary-foreground w-[30px] flex-shrink-0 transition-colors",
+      r === "week" && "group-hover/week:bg-accent group-hover/week:rounded-l-lg",
       t.week_number
     ),
     day: e(
       "group/day relative select-none p-0 text-center flex-1 h-[30px] flex items-center justify-center [&:nth-child(2)]:pl-2 rdp-day",
-      n === "week" && "group-hover/week:bg-accent [&:nth-child(2)]:group-hover/week:rounded-l-full [&:nth-child(8)]:group-hover/week:rounded-r-full",
-      n === "week" && "[&.rdp-selected:nth-child(2)]:rounded-l-full [&.rdp-selected:nth-child(8)]:rounded-r-full",
-      r?.day
+      r === "week" && "group-hover/week:bg-accent [&:nth-child(2)]:group-hover/week:rounded-l-full [&:nth-child(8)]:group-hover/week:rounded-r-full",
+      r === "week" && "[&.rdp-selected:nth-child(2)]:rounded-l-full [&.rdp-selected:nth-child(8)]:rounded-r-full",
+      n?.day
     ),
     range_start: e("bg-accent rounded-l-full", t.range_start),
     range_middle: e("bg-accent rounded-none", t.range_middle),
     range_end: e("bg-accent rounded-r-full", t.range_end),
     today: e("text-brand", t.today),
     outside: e(
-      l === "fiscal" || a ? "text-content-muted opacity-50" : "invisible",
+      l === "fiscal" || a ? "text-secondary-foreground opacity-50" : "invisible",
       t.outside
     ),
-    disabled: e("text-content-muted opacity-50", t.disabled),
+    disabled: e("text-secondary-foreground opacity-50", t.disabled),
     hidden: e("invisible", t.hidden),
-    ...r
+    ...n
   };
 }
 export {

package/dist/components/data-display/calendar/calendar-month-picker-panel.js

@@ -7,7 +7,7 @@ import { isMonthRangeSelection as q } from "../../forms/date-picker/calendar-sel
 function K({
   yearOffset: s = 0,
   displayYear: e,
-  monthMode: u,
+  monthMode: h,
   monthsShort: N,
   showFooter: p,
   pendingMonthSelection: w,
@@ -15,7 +15,7 @@ function K({
   resolvedStartYear: S,
   resolvedEndYear: j,
   yearOptions: k,
-  previousYearLabel: h,
+  previousYearLabel: u,
   nextYearLabel: g,
   isMonthSelected: z,
   getMonthRangeProps: R,
@@ -33,8 +33,8 @@ function K({
           variant: "ghost",
           size: "icon",
           className: "h-7 w-7 shrink-0",
-          "aria-label": h,
-          title: h,
+          "aria-label": u,
+          title: u,
           disabled: e <= S,
           onClick: () => P(e),
           children: /* @__PURE__ */ t(v, { size: 16, className: "rotate-180" })
@@ -54,7 +54,7 @@ function K({
           menuWidth: "140px"
         }
       ) }),
-      (u === "single" || s === 1) && /* @__PURE__ */ t(
+      (h === "single" || s === 1) && /* @__PURE__ */ t(
         m,
         {
           variant: "ghost",
@@ -69,7 +69,7 @@ function K({
       )
     ] }),
     /* @__PURE__ */ t("div", { className: "grid grid-cols-4 gap-x-0 gap-y-4", children: N.map((r, o) => {
-      const f = z(e, o), { isStart: l, isEnd: i, isMiddle: a } = R(e, o), c = u === "range", b = p ? w : C, I = q(b) && !!b.to, n = M(e, o);
+      const f = z(e, o), { isStart: l, isEnd: i, isMiddle: a } = R(e, o), c = h === "range", b = p ? w : C, I = q(b) && !!b.to, n = M(e, o);
       return /* @__PURE__ */ d("div", { className: "group relative flex h-10 w-full items-center justify-center", children: [
         c && I && (a || l || i) && !n && /* @__PURE__ */ t(
           "div",
@@ -95,7 +95,7 @@ function K({
               c && (l || i) && !n && "rounded-lg bg-brand text-brand-foreground hover:bg-brand/90 hover:text-brand-foreground",
               !f && !n && "border border-transparent hover:border-brand hover:bg-accent hover:text-accent-foreground",
               a && !n && "text-accent-foreground",
-              n && "cursor-not-allowed text-content-muted opacity-50"
+              n && "cursor-not-allowed text-content-placeholder opacity-50"
             ),
             children: r
           }