@borisj74/bv-ds 0.1.2 → 0.1.4

package/dist/index.js

@@ -5073,7 +5073,7 @@ function AdvancedFilterBar({
 }
 var hierarchyClasses = {
   Primary: "bg-bg-brand-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-bg-brand-solid-hover",
-  Secondary: "bg-bg-primary text-text-secondary border border-border-border-primary shadow-skeuomorphic hover:bg-bg-primary-hover",
+  Secondary: "bg-bg-primary text-text-secondary border border-border-primary shadow-skeuomorphic hover:bg-bg-primary-hover",
   Tertiary: "bg-transparent text-text-tertiary border-0 hover:bg-bg-secondary",
   "Link color": "bg-transparent text-text-brand-secondary border-0 p-0 hover:text-text-brand-secondary-hover",
   "Link gray": "bg-transparent text-text-tertiary border-0 p-0 hover:text-text-tertiary-hover"
@@ -5961,7 +5961,7 @@ function ButtonCloseX({
 }
 var hierarchyClasses2 = {
   Primary: "bg-bg-error-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-bg-error-solid-hover",
-  Secondary: "bg-bg-primary text-text-error-primary border border-border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
+  Secondary: "bg-bg-primary text-text-error-primary border border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
   Tertiary: "bg-transparent text-text-error-primary border-0 hover:bg-bg-error-primary",
   Link: "bg-transparent text-text-error-primary border-0 p-0 hover:text-text-error-primary"
 };
@@ -6096,6 +6096,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 +6201,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 +6228,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 +6272,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 +6292,8 @@ function PlusIcon3() {
   ) });
 }
 function CalendarCellDayWeekView({
+  type,
+  state = "default",
   children,
   onAdd,
   muted = false,
@@ -6177,8 +6303,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 +6327,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 +6350,11 @@ function CalendarColumnHeader({
           {
             className: clsx_default(
               "flex items-center justify-center text-xs font-semibold",
-              current ? "size-6 rounded-full 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 +6377,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 +6443,13 @@ function CalendarEventDayWeekView({
 function CalendarHeader({
   title,
   range: range6,
+  supportingText,
   badge,
   dateIcon,
   actions,
   className
 }) {
+  const subtitle = range6 ?? supportingText;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -6375,7 +6465,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 +6473,7 @@ function CalendarHeader({
     }
   );
 }
-function CalendarRowLabel({ label, className }) {
+function CalendarRowLabel({ label, time: time2, className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -6391,7 +6481,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 +6491,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 +6526,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 +6547,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 +6568,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",
@@ -6478,7 +6580,7 @@ function CalendarViewDropdown({
                       "flex size-4 shrink-0 items-center justify-center rounded-full border",
                       isSelected ? "border-border-brand" : "border-border-primary"
                     ),
-                    children: isSelected ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-brand-solid" }) : null
+                    children: isSelected ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-bg-brand-solid" }) : null
                   }
                 ),
                 /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: opt.label }),
@@ -28849,7 +28951,7 @@ function CheckControlVisual({
         "peer-focus-visible:ring-2 peer-focus-visible:ring-border-brand peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-bg-primary",
         type === "radio" ? "rounded-full" : "rounded-sm",
         boxSize[size],
-        disabled ? "border-border-primary bg-bg-tertiary" : active ? "border-brand-solid bg-brand-solid" : "border-border-primary bg-bg-primary"
+        disabled ? "border-border-primary bg-bg-tertiary" : active ? "border-bg-brand-solid bg-bg-brand-solid" : "border-border-primary bg-bg-primary"
       ),
       children: [
         type === "checkbox" && checked && !indeterminate ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: glyphSize[size], "aria-hidden": true, children: /* @__PURE__ */ jsx(
@@ -29298,7 +29400,7 @@ function ContentDivider({
   );
 }
 var sizeConfig = {
-  sm: { box: "p-3xl rounded-xl", heading: "text-lg", body: "text-md" },
+  sm: { box: "p-3xl rounded-2xl", heading: "text-lg", body: "text-md" },
   md: { box: "p-4xl rounded-2xl", heading: "text-xl", body: "text-lg" }
 };
 function ContentFeatureText({
@@ -29949,6 +30051,100 @@ function EmptyState({
     }
   );
 }
+var boxSize2 = {
+  sm: "size-8",
+  // 32px
+  md: "size-10",
+  // 40px
+  lg: "size-12",
+  // 48px
+  xl: "size-14"
+  // 56px
+};
+var iconPx = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28
+};
+function radiusFor(theme) {
+  if (theme === "light") return "rounded-full";
+  if (theme === "modern-neue") return "rounded-lg";
+  return "rounded-xl";
+}
+var lightBg = {
+  brand: "bg-bg-brand-secondary",
+  gray: "bg-bg-secondary",
+  error: "bg-bg-error-secondary",
+  warning: "bg-bg-warning-secondary",
+  success: "bg-bg-success-secondary"
+};
+var lightFg = {
+  brand: "text-fg-brand-primary",
+  gray: "text-fg-secondary",
+  error: "text-fg-error-primary",
+  warning: "text-fg-warning-primary",
+  success: "text-fg-success-primary"
+};
+var darkBg = {
+  brand: "bg-bg-brand-solid",
+  gray: "bg-bg-secondary-solid",
+  error: "bg-bg-error-solid",
+  warning: "bg-bg-warning-solid",
+  success: "bg-bg-success-solid"
+};
+var gradientFill = {
+  brand: "bg-gradient-to-br from-utility-brand-50 to-utility-brand-200",
+  gray: "bg-gradient-to-br from-utility-neutral-50 to-utility-neutral-200",
+  error: "bg-gradient-to-br from-utility-red-50 to-utility-red-200",
+  warning: "bg-gradient-to-br from-utility-amber-50 to-utility-amber-200",
+  success: "bg-gradient-to-br from-utility-green-50 to-utility-green-200"
+};
+function FeaturedIcon({
+  icon,
+  color: color2 = "brand",
+  theme = "light",
+  size = "md",
+  className,
+  ...rest
+}) {
+  const px = iconPx[size];
+  const themeClasses = clsx_default(
+    theme === "light" && [lightBg[color2], lightFg[color2]],
+    theme === "dark" && [
+      darkBg[color2],
+      "text-fg-white border-2 border-[rgba(255,255,255,0.12)] shadow-skeuomorphic"
+    ],
+    theme === "gradient" && [gradientFill[color2], "text-fg-white"],
+    theme === "modern" && [
+      "bg-bg-primary text-fg-secondary border border-border-primary shadow-skeuomorphic"
+    ],
+    theme === "modern-neue" && [
+      "bg-bg-primary text-fg-secondary border border-border-primary shadow-xs"
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: clsx_default(
+        "inline-flex shrink-0 items-center justify-center",
+        boxSize2[size],
+        radiusFor(theme),
+        themeClasses,
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          style: { width: px, height: px, display: "inline-flex" },
+          children: icon
+        }
+      )
+    }
+  );
+}
 var avatarSize2 = {
   sm: "size-8",
   // 32px
@@ -31399,7 +31595,7 @@ function MetricItem({
     }
   );
 }
-var FeaturedIcon = ({ children }) => /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border-primary text-fg-secondary shadow-xs", children });
+var FeaturedIcon2 = ({ children }) => /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border-primary text-fg-secondary shadow-xs", children });
 var XClose2 = () => /* @__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" }) });
 function ModalHeader({
   title,
@@ -31433,7 +31629,7 @@ function ModalHeader({
               isCenter && "items-center"
             ),
             children: [
-              icon && /* @__PURE__ */ jsx(FeaturedIcon, { children: icon }),
+              icon && /* @__PURE__ */ jsx(FeaturedIcon2, { children: icon }),
               /* @__PURE__ */ jsxs(
                 "div",
                 {
@@ -32091,7 +32287,7 @@ var GLYPH = {
   error: "M10 6.67V10m0 3.33h.01M18.33 10a8.33 8.33 0 1 1-16.66 0 8.33 8.33 0 0 1 16.66 0Z"
 };
 var XClose5 = () => /* @__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 FeaturedIcon2 = ({ variant }) => /* @__PURE__ */ jsxs("span", { className: clsx_default("relative inline-flex size-5 shrink-0 items-center justify-center", RING[variant].split(" ")[1]), children: [
+var FeaturedIcon3 = ({ variant }) => /* @__PURE__ */ jsxs("span", { className: clsx_default("relative inline-flex size-5 shrink-0 items-center justify-center", RING[variant].split(" ")[1]), children: [
   /* @__PURE__ */ jsx("span", { className: clsx_default("absolute inset-[-20%] rounded-full border-2 opacity-30", RING[variant].split(" ")[0]) }),
   /* @__PURE__ */ jsx("span", { className: clsx_default("absolute inset-[-45%] rounded-full border-2 opacity-10", RING[variant].split(" ")[0]) }),
   /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "relative size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: GLYPH[variant], stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) })
@@ -32116,7 +32312,7 @@ function Notification({
       ),
       ...rest,
       children: [
-        leadingMedia ?? /* @__PURE__ */ jsx(FeaturedIcon2, { variant }),
+        leadingMedia ?? /* @__PURE__ */ jsx(FeaturedIcon3, { variant }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-lg pr-8", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xs", children: [
             /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-fg-primary", children: title }),
@@ -33852,6 +34048,6 @@ object-assign/index.js:
   *)
 */
 
-export { ActivityFeed, ActivityGauge, AdvancedFilterBar, Alert, Avatar, AvatarAddButton, AvatarGroup, AvatarLabelGroup, AvatarProfilePhoto, BadgeCloseX, BadgeGroup, BreadcrumbButtonBase, Breadcrumbs, Button, ButtonCloseX, ButtonDestructive, ButtonGroup, ButtonGroupSegment, ButtonUtility, CalendarCell, CalendarCellDayWeekView, CalendarColumnHeader, CalendarDateIcon, CalendarEvent, CalendarEventDayWeekView, CalendarHeader, CalendarRowLabel, CalendarTimemarker, CalendarViewDropdown, CardHeader, CarouselArrow, CarouselImage, Change, ChartLegend, ChartMarker, ChartMini, ChartTooltip, Checkbox, CodeSnippet, CodeSnippetTabs, ColorBadge, CommandBar, CommandBarFooter, CommandBarMenuSection, CommandBarNavigationIcon, CommandDropdownMenuItem, CommandInput, CommandShortcut, ContentDivider, ContentFeatureText, ContentHeading, ContentParagraph, ContentQuote, ContentRule, ContextMenu, DatePickerCell, DatePickerListItem, DatePickerMenu, DropdownAccountListItem, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuItemInsetIcon, DropdownMenuListItem, EmptyState, FeedItemBase, FileUpload, FileUploadBase, FileUploadItemBase, FilterBar, FilterTabs, FiltersDropdownMenu, FiltersSlideoutMenu, HeaderNavigation, HelpIcon2 as HelpIcon, InputField, LeadingInputField, LineAndBarChart, LinkMessage, LoadingIndicator, MediaMessage, MegaInputFieldBase, Message, MessageAction, MessageActionButton, MessageActionPanel, MessageReaction, MessageStatusIcon, MetricItem, Modal, ModalActions, ModalHeader, ModernBadge, MultiSelect, NavAccountCard, NavAccountCardMenuItem, NavButton2 as NavButton, NavFeaturedCard, NavItemBase, NavItemDropdownBase, NavMenuButton, Notification, NumberInput, PageHeader, Pagination, PaginationButtonGroupBase, PaginationCards, PaginationDotGroup, PaginationDotIndicator, PaginationNumberBase, PieChart2 as PieChart, PillBadge, ProgressBar, ProgressCircle, RadarChart2 as RadarChart, Radio, RadioGroup, RadioGroupItem, SectionFooter, SectionHeader, SectionLabel, Select, SelectMenuItem, SidebarNavigation, SlideOutMenuHeader, SlideoutMenu, Slider, SocialButton, StatusIcon, StepBase, StepIconBase, TabButtonBase, TableCell, TableHeaderCell, TableHeaderLabel, Tabs, Tag, TagsInputField, TextEditorToolbar, TextEditorToolbarDivider, TextEditorTooltip, TextareaInputField, Toggle, Tooltip2 as Tooltip, TrailingInputField, TreeView, TreeViewConnector, TreeViewItem, VerificationCodeInput, illustrations_exports as illustrations, useContextMenu };
+export { ActivityFeed, ActivityGauge, AdvancedFilterBar, Alert, Avatar, AvatarAddButton, AvatarGroup, AvatarLabelGroup, AvatarProfilePhoto, BadgeCloseX, BadgeGroup, BreadcrumbButtonBase, Breadcrumbs, Button, ButtonCloseX, ButtonDestructive, ButtonGroup, ButtonGroupSegment, ButtonUtility, CalendarCell, CalendarCellDayWeekView, CalendarColumnHeader, CalendarDateIcon, CalendarEvent, CalendarEventDayWeekView, CalendarHeader, CalendarRowLabel, CalendarTimemarker, CalendarViewDropdown, CardHeader, CarouselArrow, CarouselImage, Change, ChartLegend, ChartMarker, ChartMini, ChartTooltip, Checkbox, CodeSnippet, CodeSnippetTabs, ColorBadge, CommandBar, CommandBarFooter, CommandBarMenuSection, CommandBarNavigationIcon, CommandDropdownMenuItem, CommandInput, CommandShortcut, ContentDivider, ContentFeatureText, ContentHeading, ContentParagraph, ContentQuote, ContentRule, ContextMenu, DatePickerCell, DatePickerListItem, DatePickerMenu, DropdownAccountListItem, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuItemInsetIcon, DropdownMenuListItem, EmptyState, FeaturedIcon, FeedItemBase, FileUpload, FileUploadBase, FileUploadItemBase, FilterBar, FilterTabs, FiltersDropdownMenu, FiltersSlideoutMenu, HeaderNavigation, HelpIcon2 as HelpIcon, InputField, LeadingInputField, LineAndBarChart, LinkMessage, LoadingIndicator, MediaMessage, MegaInputFieldBase, Message, MessageAction, MessageActionButton, MessageActionPanel, MessageReaction, MessageStatusIcon, MetricItem, Modal, ModalActions, ModalHeader, ModernBadge, MultiSelect, NavAccountCard, NavAccountCardMenuItem, NavButton2 as NavButton, NavFeaturedCard, NavItemBase, NavItemDropdownBase, NavMenuButton, Notification, NumberInput, PageHeader, Pagination, PaginationButtonGroupBase, PaginationCards, PaginationDotGroup, PaginationDotIndicator, PaginationNumberBase, PieChart2 as PieChart, PillBadge, ProgressBar, ProgressCircle, RadarChart2 as RadarChart, Radio, RadioGroup, RadioGroupItem, SectionFooter, SectionHeader, SectionLabel, Select, SelectMenuItem, SidebarNavigation, SlideOutMenuHeader, SlideoutMenu, Slider, SocialButton, StatusIcon, StepBase, StepIconBase, TabButtonBase, TableCell, TableHeaderCell, TableHeaderLabel, Tabs, Tag, TagsInputField, TextEditorToolbar, TextEditorToolbarDivider, TextEditorTooltip, TextareaInputField, Toggle, Tooltip2 as Tooltip, TrailingInputField, TreeView, TreeViewConnector, TreeViewItem, VerificationCodeInput, illustrations_exports as illustrations, useContextMenu };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@borisj74/bv-ds",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "bv-ds — React component library synced from Figma (Untitled UI v8.0), built on Tailwind CSS",
   "license": "MIT",
   "type": "module",
@@ -38,20 +38,22 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
+    "@borisj74/bv-ds-icons": "^0.1.0",
+    "@storybook/addon-a11y": "^8.0.0",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/react-vite": "^8.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.0",
+    "clsx": "^2.1.0",
+    "postcss": "^8.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "recharts": "^2.15.4",
+    "storybook": "^8.0.0",
     "tailwindcss": "^3.4.0",
-    "postcss": "^8.4.0",
-    "autoprefixer": "^10.4.0",
-    "clsx": "^2.1.0",
     "tsup": "^8.0.0",
-    "typescript": "^5.4.0",
-    "@storybook/react-vite": "^8.0.0",
-    "@storybook/addon-essentials": "^8.0.0",
-    "@storybook/addon-a11y": "^8.0.0",
-    "storybook": "^8.0.0"
+    "typescript": "^5.4.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Button/Button.tsx

@@ -34,7 +34,7 @@ const hierarchyClasses: Record<ButtonHierarchy, string> = {
     "bg-bg-brand-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic " +
     "hover:bg-bg-brand-solid-hover",
   Secondary:
-    "bg-bg-primary text-text-secondary border border-border-border-primary shadow-skeuomorphic " +
+    "bg-bg-primary text-text-secondary border border-border-primary shadow-skeuomorphic " +
     "hover:bg-bg-primary-hover",
   Tertiary:
     "bg-transparent text-text-tertiary border-0 " +

package/src/components/ButtonDestructive/ButtonDestructive.tsx

@@ -17,12 +17,12 @@ export interface ButtonDestructiveProps
 
 // Destructive palette (design.md §3 / Figma Button destructive 6218:85578).
 // Primary/Secondary carry the skeuomorphic shadow stack; focus ring is the
-// error ring (border-error).
+// error ring (border-border-error).
 const hierarchyClasses: Record<ButtonDestructiveHierarchy, string> = {
   Primary:
     "bg-bg-error-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-bg-error-solid-hover",
   Secondary:
-    "bg-bg-primary text-text-error-primary border border-border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
+    "bg-bg-primary text-text-error-primary border border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
   Tertiary:
     "bg-transparent text-text-error-primary border-0 hover:bg-bg-error-primary",
   Link: "bg-transparent text-text-error-primary border-0 p-0 hover:text-text-error-primary",