@borisj74/bv-ds 0.1.3 → 0.1.5

package/dist/index.js

@@ -1,6 +1,7 @@
 import * as React28 from 'react';
 import React28__default, { forwardRef, isValidElement, cloneElement, Children, useContext, useMemo, createContext, Fragment, useState, PureComponent, createElement, Component, useRef, useEffect, useCallback, useId, useImperativeHandle } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { LogOut01, ChevronSelectorVertical, ChevronDown as ChevronDown$1, XClose as XClose$1, Menu02 } from '@borisj74/bv-ds-icons';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -6096,6 +6097,97 @@ function ButtonUtility({
     ) : null
   ] });
 }
+var dotClasses = {
+  neutral: "bg-utility-neutral-500",
+  brand: "bg-utility-brand-500",
+  emerald: "bg-utility-emerald-500",
+  blue: "bg-utility-blue-500",
+  indigo: "bg-utility-indigo-500",
+  purple: "bg-utility-purple-500",
+  pink: "bg-utility-pink-500",
+  orange: "bg-utility-orange-500",
+  amber: "bg-utility-amber-500"
+};
+var filledClasses = {
+  neutral: "bg-utility-neutral-50 border-utility-neutral-200 text-utility-neutral-700",
+  brand: "bg-utility-brand-50 border-utility-brand-200 text-utility-brand-700",
+  emerald: "bg-utility-emerald-50 border-utility-emerald-200 text-utility-emerald-700",
+  blue: "bg-utility-blue-50 border-utility-blue-200 text-utility-blue-700",
+  indigo: "bg-utility-indigo-50 border-utility-indigo-200 text-utility-indigo-700",
+  purple: "bg-utility-purple-50 border-utility-purple-200 text-utility-purple-700",
+  pink: "bg-utility-pink-50 border-utility-pink-200 text-utility-pink-700",
+  orange: "bg-utility-orange-50 border-utility-orange-200 text-utility-orange-700",
+  amber: "bg-utility-amber-50 border-utility-amber-200 text-utility-amber-700"
+};
+var filledHoverClasses = {
+  neutral: "bg-utility-neutral-100",
+  brand: "bg-utility-brand-100",
+  emerald: "bg-utility-emerald-100",
+  blue: "bg-utility-blue-100",
+  indigo: "bg-utility-indigo-100",
+  purple: "bg-utility-purple-100",
+  pink: "bg-utility-pink-100",
+  orange: "bg-utility-orange-100",
+  amber: "bg-utility-amber-100"
+};
+var timeClasses = {
+  neutral: "text-utility-neutral-600",
+  brand: "text-utility-brand-600",
+  emerald: "text-utility-emerald-600",
+  blue: "text-utility-blue-600",
+  indigo: "text-utility-indigo-600",
+  purple: "text-utility-purple-600",
+  pink: "text-utility-pink-600",
+  orange: "text-utility-orange-600",
+  amber: "text-utility-amber-600"
+};
+function CalendarEvent({
+  title,
+  time: time2,
+  color: color2 = "neutral",
+  filled = false,
+  breakpoint = "desktop",
+  state = "default",
+  className
+}) {
+  if (breakpoint === "mobile") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: clsx_default("inline-block size-2 rounded-full", dotClasses[color2], className),
+        role: "img",
+        "aria-label": time2 ? `${title}, ${time2}` : title
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx_default(
+        "flex w-full items-center gap-md rounded-sm border px-md py-xs font-body text-xs",
+        filled ? clsx_default(filledClasses[color2], state === "hover" && filledHoverClasses[color2]) : clsx_default(
+          "border-border-secondary bg-bg-primary text-text-secondary",
+          state === "hover" && "bg-bg-primary-hover"
+        ),
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: clsx_default("size-2 shrink-0 rounded-full", dotClasses[color2]), "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: title }),
+        time2 ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx_default(
+              "ml-auto shrink-0 font-normal",
+              filled ? timeClasses[color2] : "text-text-tertiary"
+            ),
+            children: time2
+          }
+        ) : null
+      ]
+    }
+  );
+}
 function PlusIcon2() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsx(
     "path",
@@ -6110,19 +6202,26 @@ function PlusIcon2() {
 }
 function CalendarCell({
   date: date2,
+  events,
   children,
   moreCount,
-  muted = false,
+  isToday,
+  isSelected = false,
+  isDisabled,
   current = false,
+  muted = false,
+  breakpoint = "desktop",
   onAdd,
   className
 }) {
+  const today = isToday ?? current;
+  const disabled = isDisabled ?? muted;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: clsx_default(
         "group relative flex min-h-[120px] flex-col gap-xs bg-bg-primary p-md font-body",
-        muted && "bg-bg-secondary",
+        disabled && "bg-bg-secondary",
         className
       ),
       children: [
@@ -6130,12 +6229,31 @@ function CalendarCell({
           "span",
           {
             className: clsx_default(
-              "text-xs font-semibold",
-              current ? "text-text-brand-secondary" : muted ? "text-text-quaternary" : "text-text-secondary"
+              "flex size-6 items-center justify-center text-xs font-semibold",
+              today ? "rounded-full bg-bg-brand-solid text-white" : isSelected ? "rounded-full bg-bg-secondary text-text-secondary" : disabled ? "text-text-quaternary" : "text-text-secondary"
             ),
             children: date2
           }
         ),
+        events && events.length > 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx_default(
+              breakpoint === "mobile" ? "flex flex-row flex-wrap gap-xxs" : "flex flex-col gap-xs"
+            ),
+            children: events.map((ev, i) => /* @__PURE__ */ jsx(
+              CalendarEvent,
+              {
+                title: ev.title,
+                time: ev.time,
+                color: ev.color,
+                filled: true,
+                breakpoint
+              },
+              i
+            ))
+          }
+        ) : null,
         children ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-xs", children }) : null,
         moreCount && moreCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-text-tertiary", children: [
           moreCount,
@@ -6155,6 +6273,13 @@ function CalendarCell({
     }
   );
 }
+var heightClasses = {
+  empty: "h-[48px]",
+  "30min": "h-[48px]",
+  "60min": "h-[96px]",
+  "90min": "h-[144px]",
+  "120min": "h-[192px]"
+};
 function PlusIcon3() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsx(
     "path",
@@ -6168,6 +6293,8 @@ function PlusIcon3() {
   ) });
 }
 function CalendarCellDayWeekView({
+  type,
+  state = "default",
   children,
   onAdd,
   muted = false,
@@ -6177,8 +6304,9 @@ function CalendarCellDayWeekView({
     "div",
     {
       className: clsx_default(
-        "group relative min-h-[64px] border-b border-border-secondary p-xs font-body",
-        muted ? "bg-bg-secondary" : "bg-bg-primary",
+        "group relative border-b border-border-secondary p-xs font-body transition-colors hover:bg-bg-secondary",
+        type ? heightClasses[type] : "min-h-[64px]",
+        muted ? "bg-bg-secondary" : state === "hover" ? "bg-bg-secondary" : "bg-bg-primary",
         className
       ),
       children: [
@@ -6200,16 +6328,20 @@ function CalendarCellDayWeekView({
 function CalendarColumnHeader({
   weekday,
   date: date2,
+  type,
   current = false,
   orientation = "vertical",
+  breakpoint = "desktop",
   className
 }) {
+  const state = type ?? (current ? "selected" : "default");
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: clsx_default(
         "flex items-center justify-center gap-md py-md font-body",
         orientation === "vertical" && "flex-col gap-xs",
+        breakpoint === "desktop" && "w-[160px]",
         className
       ),
       children: [
@@ -6219,9 +6351,11 @@ function CalendarColumnHeader({
           {
             className: clsx_default(
               "flex items-center justify-center text-xs font-semibold",
-              current ? "size-6 rounded-full bg-bg-brand-solid text-white" : "text-text-secondary"
+              state === "selected" && "size-6 rounded-full bg-bg-brand-solid text-white",
+              state === "today" && "border-b-2 border-border-brand pb-xxs text-text-brand-secondary",
+              state === "default" && "text-text-secondary"
             ),
-            "aria-current": current ? "date" : void 0,
+            "aria-current": state !== "default" ? "date" : void 0,
             children: date2
           }
         )
@@ -6244,51 +6378,6 @@ function CalendarDateIcon({ month, day, className }) {
     }
   );
 }
-var dotClasses = {
-  neutral: "bg-utility-neutral-500",
-  brand: "bg-utility-brand-500",
-  emerald: "bg-utility-emerald-500",
-  blue: "bg-utility-blue-500",
-  indigo: "bg-utility-indigo-500",
-  purple: "bg-utility-purple-500",
-  pink: "bg-utility-pink-500",
-  orange: "bg-utility-orange-500",
-  amber: "bg-utility-amber-500"
-};
-var filledClasses = {
-  neutral: "bg-utility-neutral-100 text-utility-neutral-700",
-  brand: "bg-utility-brand-100 text-utility-brand-700",
-  emerald: "bg-utility-emerald-100 text-utility-emerald-700",
-  blue: "bg-utility-blue-100 text-utility-blue-700",
-  indigo: "bg-utility-indigo-100 text-utility-indigo-700",
-  purple: "bg-utility-purple-100 text-utility-purple-700",
-  pink: "bg-utility-pink-100 text-utility-pink-700",
-  orange: "bg-utility-orange-100 text-utility-orange-700",
-  amber: "bg-utility-amber-100 text-utility-amber-700"
-};
-function CalendarEvent({
-  title,
-  time: time2,
-  color: color2 = "neutral",
-  filled = false,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx_default(
-        "flex w-full items-center gap-md rounded-sm px-md py-xs font-body text-xs",
-        filled ? filledClasses[color2] : "border border-border-secondary bg-bg-primary text-text-secondary",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: clsx_default("size-2 shrink-0 rounded-full", dotClasses[color2]), "aria-hidden": true }),
-        /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: title }),
-        time2 ? /* @__PURE__ */ jsx("span", { className: clsx_default("ml-auto shrink-0 font-normal", !filled && "text-text-tertiary"), children: time2 }) : null
-      ]
-    }
-  );
-}
 var accentClasses = {
   neutral: "border-l-utility-neutral-500",
   brand: "border-l-utility-brand-500",
@@ -6355,11 +6444,13 @@ function CalendarEventDayWeekView({
 function CalendarHeader({
   title,
   range: range6,
+  supportingText,
   badge,
   dateIcon,
   actions,
   className
 }) {
+  const subtitle = range6 ?? supportingText;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -6375,7 +6466,7 @@ function CalendarHeader({
               /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-text-primary", children: title }),
               badge
             ] }),
-            range6 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-text-tertiary", children: range6 }) : null
+            subtitle ? /* @__PURE__ */ jsx("p", { className: "text-sm text-text-tertiary", children: subtitle }) : null
           ] })
         ] }),
         actions ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-md", children: actions }) : null
@@ -6383,7 +6474,7 @@ function CalendarHeader({
     }
   );
 }
-function CalendarRowLabel({ label, className }) {
+function CalendarRowLabel({ label, time: time2, className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -6391,7 +6482,7 @@ function CalendarRowLabel({ label, className }) {
         "pr-md text-right text-xs font-medium text-text-quaternary font-body",
         className
       ),
-      children: label
+      children: time2 ?? label
     }
   );
 }
@@ -6401,15 +6492,17 @@ var Label = ({ time: time2 }) => /* @__PURE__ */ jsx("span", { className: "shrin
 function CalendarTimemarker({
   time: time2,
   align = "left",
+  breakpoint = "desktop",
   className
 }) {
+  const showLabel = breakpoint === "desktop";
   return /* @__PURE__ */ jsx("div", { className: clsx_default("flex w-full items-center gap-xs font-body", className), children: align === "center" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(Dot, {}),
     /* @__PURE__ */ jsx(Line, {}),
-    /* @__PURE__ */ jsx(Label, { time: time2 }),
+    showLabel ? /* @__PURE__ */ jsx(Label, { time: time2 }) : null,
     /* @__PURE__ */ jsx(Line, {})
   ] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(Label, { time: time2 }),
+    showLabel ? /* @__PURE__ */ jsx(Label, { time: time2 }) : null,
     /* @__PURE__ */ jsx(Dot, {}),
     /* @__PURE__ */ jsx(Line, {})
   ] }) });
@@ -6434,10 +6527,19 @@ function Chevron2() {
 function CalendarViewDropdown({
   value,
   onChange,
+  onSelect,
+  open: openProp,
+  onOpenChange,
   options = DEFAULT_OPTIONS,
   className
 }) {
-  const [open, setOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : internalOpen;
+  const setOpen = (next) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
   const selected = options.find((o) => o.value === value) ?? options[0];
   return /* @__PURE__ */ jsxs("div", { className: clsx_default("relative inline-block font-body", className), children: [
     /* @__PURE__ */ jsxs(
@@ -6446,7 +6548,7 @@ function CalendarViewDropdown({
         type: "button",
         "aria-haspopup": "listbox",
         "aria-expanded": open,
-        onClick: () => setOpen((v) => !v),
+        onClick: () => setOpen(!open),
         className: "inline-flex items-center gap-md rounded-md border border-border-primary bg-bg-primary px-lg py-md text-sm font-semibold text-text-secondary shadow-skeuomorphic transition-colors hover:bg-bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
         children: [
           selected.label,
@@ -6467,6 +6569,7 @@ function CalendarViewDropdown({
               type: "button",
               onClick: () => {
                 onChange?.(opt.value);
+                onSelect?.(opt.value);
                 setOpen(false);
               },
               className: "flex w-full items-center gap-md rounded-sm px-md py-xs text-sm font-medium text-text-secondary transition-colors hover:bg-bg-primary-hover",
@@ -31833,17 +31936,7 @@ function MultiSelect({
     hint && /* @__PURE__ */ jsx("span", { className: clsx_default("text-sm", invalid ? "text-text-error-primary" : "text-text-tertiary"), children: hint })
   ] });
 }
-var ChevronSelector = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M5 6l3-3 3 3M5 10l3 3 3-3", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var LogOut = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsx(
-  "path",
-  {
-    d: "M10.67 11.33 14 8m0 0-3.33-3.33M14 8H6M6 2H4.67c-.93 0-1.4 0-1.76.18-.31.16-.57.42-.73.73C2 3.27 2 3.73 2 4.67v6.66c0 .94 0 1.4.18 1.76.16.31.42.57.73.73.36.18.83.18 1.76.18H6",
-    stroke: "currentColor",
-    strokeWidth: "1.33",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-) });
+var IconBox16 = ({ children }) => /* @__PURE__ */ jsx("span", { className: "overflow-clip relative shrink-0 size-[16px] flex items-center justify-center", children });
 var LayeredAvatar = ({ src, online }) => /* @__PURE__ */ jsxs("span", { className: "relative inline-flex size-10 shrink-0 rounded-full border-[0.75px] border-border-secondary-alt bg-bg-primary p-[1px] shadow-xs", children: [
   /* @__PURE__ */ jsx("span", { className: "flex size-full overflow-hidden rounded-full border-[0.5px] border-[rgba(0,0,0,0.16)]", children: /* @__PURE__ */ jsx("img", { src, alt: "", className: "size-full rounded-full object-cover" }) }),
   online !== void 0 && /* @__PURE__ */ jsx(
@@ -31899,7 +31992,7 @@ function NavAccountCard({
               onClick: onSignOut,
               "aria-label": "Sign out",
               className: "absolute right-0 top-[15px] flex items-center justify-center rounded-sm p-sm text-fg-quaternary transition-colors hover:text-fg-quaternary-hover",
-              children: /* @__PURE__ */ jsx(LogOut, {})
+              children: /* @__PURE__ */ jsx(IconBox16, { children: /* @__PURE__ */ jsx(LogOut01, { className: "w-full h-full" }) })
             }
           )
         ]
@@ -31922,7 +32015,7 @@ function NavAccountCard({
                 "absolute right-[7px] top-[7px] flex items-center justify-center rounded-sm p-sm text-fg-quaternary",
                 open && "bg-bg-primary-hover"
               ),
-              children: /* @__PURE__ */ jsx(ChevronSelector, {})
+              children: /* @__PURE__ */ jsx(IconBox16, { children: /* @__PURE__ */ jsx(ChevronSelectorVertical, { className: "w-full h-full" }) })
             }
           )
         ]
@@ -32063,7 +32156,6 @@ function NavFeaturedCard({
     }
   );
 }
-var ChevronDown2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function NavItemBase({
   current = false,
   icon,
@@ -32098,14 +32190,13 @@ function NavItemBase({
               /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left text-sm font-semibold text-text-secondary", children: label })
             ] }),
             badge != null && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full border border-utility-neutral-200 bg-utility-neutral-50 px-md py-xxs text-xs font-medium text-utility-neutral-700", children: badge }),
-            trailingChevron && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-fg-quaternary", children: /* @__PURE__ */ jsx(ChevronDown2, {}) })
+            trailingChevron && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-fg-quaternary", children: /* @__PURE__ */ jsx("span", { className: "overflow-clip relative shrink-0 size-[16px] flex items-center justify-center", children: /* @__PURE__ */ jsx(ChevronDown$1, { className: "w-full h-full" }) }) })
           ]
         }
       )
     }
   );
 }
-var Chevron5 = ({ up }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: up ? "M4 10l4-4 4 4" : "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function NavItemDropdownBase({
   current = false,
   open = false,
@@ -32137,7 +32228,12 @@ function NavItemDropdownBase({
                 icon && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center text-fg-quaternary [&>svg]:size-5", children: icon }),
                 /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left text-sm font-semibold text-text-secondary", children: label })
               ] }),
-              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-fg-quaternary", children: /* @__PURE__ */ jsx(Chevron5, { up: open }) })
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-fg-quaternary", children: /* @__PURE__ */ jsx("span", { className: "overflow-clip relative shrink-0 size-[16px] flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                ChevronDown$1,
+                {
+                  className: clsx_default("w-full h-full transition-transform", open && "rotate-180")
+                }
+              ) }) })
             ]
           }
         )
@@ -32146,8 +32242,7 @@ function NavItemDropdownBase({
     open && /* @__PURE__ */ jsx("div", { className: "flex flex-col pb-xs", children })
   ] });
 }
-var Menu = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M2.5 10h15M2.5 5h15M2.5 15h15", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var XClose4 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M15 5 5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var IconBox = ({ children }) => /* @__PURE__ */ jsx("span", { className: "overflow-clip relative shrink-0 size-[20px] flex items-center justify-center", children });
 function NavMenuButton({
   opened = false,
   className,
@@ -32166,7 +32261,7 @@ function NavMenuButton({
         className
       ),
       ...rest,
-      children: opened ? /* @__PURE__ */ jsx("span", { className: "opacity-70", children: /* @__PURE__ */ jsx(XClose4, {}) }) : /* @__PURE__ */ jsx(Menu, {})
+      children: opened ? /* @__PURE__ */ jsx("span", { className: "opacity-70", children: /* @__PURE__ */ jsx(IconBox, { children: /* @__PURE__ */ jsx(XClose$1, { className: "w-full h-full" }) }) }) : /* @__PURE__ */ jsx(IconBox, { children: /* @__PURE__ */ jsx(Menu02, { className: "w-full h-full" }) })
     }
   );
 }
@@ -32254,7 +32349,7 @@ function NumberInput({
   const inc = () => set2(value + step);
   const Minus = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4.167 10h11.666", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round" }) });
   const Plus = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M10 4.167v11.666M4.167 10h11.666", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round" }) });
-  const Chevron6 = ({ up }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", className: clsx_default("size-3", up && "rotate-180"), "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M3 4.5 6 7.5 9 4.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  const Chevron5 = ({ up }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", className: clsx_default("size-3", up && "rotate-180"), "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M3 4.5 6 7.5 9 4.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) });
   const numberEl = /* @__PURE__ */ jsx(
     "input",
     {
@@ -32280,9 +32375,9 @@ function NumberInput({
   ] }) : /* @__PURE__ */ jsxs("div", { className: clsx_default(boxClasses(destructive), "gap-0 overflow-hidden p-0"), children: [
     numberEl,
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col self-stretch border-l border-border-primary", children: [
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: inc, disabled, "aria-label": "Increase", className: "flex flex-1 items-center justify-center px-md text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: /* @__PURE__ */ jsx(Chevron6, { up: true }) }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: inc, disabled, "aria-label": "Increase", className: "flex flex-1 items-center justify-center px-md text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: /* @__PURE__ */ jsx(Chevron5, { up: true }) }),
       /* @__PURE__ */ jsx("span", { className: "h-px w-full bg-border-primary" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: dec, disabled, "aria-label": "Decrease", className: "flex flex-1 items-center justify-center px-md text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: /* @__PURE__ */ jsx(Chevron6, { up: false }) })
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: dec, disabled, "aria-label": "Decrease", className: "flex flex-1 items-center justify-center px-md text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: /* @__PURE__ */ jsx(Chevron5, { up: false }) })
     ] })
   ] });
   return /* @__PURE__ */ jsx(FieldWrapper, { label, required, hint, destructive, className, children: box });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@borisj74/bv-ds",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "bv-ds — React component library synced from Figma (Untitled UI v8.0), built on Tailwind CSS",
   "license": "MIT",
   "type": "module",
@@ -35,7 +35,8 @@
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "@borisj74/bv-ds-icons": ">=0.1.0"
   },
   "devDependencies": {
     "@borisj74/bv-ds-icons": "^0.1.0",

package/src/components/CalendarCell/CalendarCell.tsx

@@ -1,17 +1,40 @@
 import type { ReactNode } from "react";
 import clsx from "clsx";
+import { CalendarEvent, type CalendarEventColor } from "../CalendarEvent";
+
+export type CalendarCellBreakpoint = "desktop" | "mobile";
+
+export interface CalendarCellEvent {
+  title: string;
+  time?: string;
+  color?: CalendarEventColor;
+}
 
 export interface CalendarCellProps {
   /** Day-of-month number. */
   date: string | number;
+  /**
+   * Declarative events for this day — rendered as filled `CalendarEvent`
+   * chips (collapsed to dots on mobile). Use `children` instead for full
+   * control over each chip.
+   */
+  events?: CalendarCellEvent[];
   /** Event chips for this day — typically `CalendarEvent` instances. */
   children?: ReactNode;
   /** "+N more" overflow count shown beneath the events. */
   moreCount?: number;
+  /** Today — date number in a brand-solid circle. */
+  isToday?: boolean;
+  /** Selected day — date number in a secondary-fill circle. */
+  isSelected?: boolean;
   /** Other-month / disabled styling. */
-  muted?: boolean;
-  /** Marks today (date number in brand). */
+  isDisabled?: boolean;
+  /** Legacy alias for `isToday`. */
   current?: boolean;
+  /** Legacy alias for `isDisabled`. */
+  muted?: boolean;
+  /** Desktop renders full chips; mobile collapses chips to dots. */
+  breakpoint?: CalendarCellBreakpoint;
   /** Renders a hover "+" add button bottom-right. */
   onAdd?: () => void;
   className?: string;
@@ -34,33 +57,63 @@ function PlusIcon() {
 /** A single day cell in the month grid. Composes CalendarEvent chips. */
 export function CalendarCell({
   date,
+  events,
   children,
   moreCount,
-  muted = false,
+  isToday,
+  isSelected = false,
+  isDisabled,
   current = false,
+  muted = false,
+  breakpoint = "desktop",
   onAdd,
   className,
 }: CalendarCellProps) {
+  const today = isToday ?? current;
+  const disabled = isDisabled ?? muted;
+
   return (
     <div
       className={clsx(
         "group relative flex min-h-[120px] flex-col gap-xs bg-bg-primary p-md font-body",
-        muted && "bg-bg-secondary",
+        disabled && "bg-bg-secondary",
         className,
       )}
     >
       <span
         className={clsx(
-          "text-xs font-semibold",
-          current
-            ? "text-text-brand-secondary"
-            : muted
-              ? "text-text-quaternary"
-              : "text-text-secondary",
+          "flex size-6 items-center justify-center text-xs font-semibold",
+          today
+            ? "rounded-full bg-bg-brand-solid text-white"
+            : isSelected
+              ? "rounded-full bg-bg-secondary text-text-secondary"
+              : disabled
+                ? "text-text-quaternary"
+                : "text-text-secondary",
         )}
       >
         {date}
       </span>
+      {events && events.length > 0 ? (
+        <div
+          className={clsx(
+            breakpoint === "mobile"
+              ? "flex flex-row flex-wrap gap-xxs"
+              : "flex flex-col gap-xs",
+          )}
+        >
+          {events.map((ev, i) => (
+            <CalendarEvent
+              key={i}
+              title={ev.title}
+              time={ev.time}
+              color={ev.color}
+              filled
+              breakpoint={breakpoint}
+            />
+          ))}
+        </div>
+      ) : null}
       {children ? <div className="flex flex-col gap-xs">{children}</div> : null}
       {moreCount && moreCount > 0 ? (
         <span className="text-xs font-medium text-text-tertiary">

package/src/components/CalendarCell/index.ts

@@ -1,2 +1,6 @@
 export { CalendarCell } from "./CalendarCell";
-export type { CalendarCellProps } from "./CalendarCell";
+export type {
+  CalendarCellProps,
+  CalendarCellEvent,
+  CalendarCellBreakpoint,
+} from "./CalendarCell";