@assure-one/design-system 0.8.0 → 0.9.0

package/dist/index.d.ts

@@ -151,7 +151,10 @@ declare const BreadcrumbSeparator: React$1.ForwardRefExoticComponent<BreadcrumbS
  *   - accent     → bg-accent (cyan CTA)
  *   - dashed     → full-bleed "+ Add another" CTA, transparent fill + dashed border
  *
- * Sizes match shadcn convention; default `md` is 8px/14px padding.
+ * Control text scale (shared across the button-family control primitives
+ * Button / MultiFilterPill / FilterChip): sm = 13px, md = 14px, lg = 16px.
+ * `sm` is the dense tier used in toolbars; `md` is the default. (SearchInput
+ * keeps its own one-step-denser inputSize scale, 12/13/14.)
  * Use `asChild` to render as a different element (e.g. an anchor / next/link).
  */
 declare const buttonVariants: (props?: ({
@@ -815,8 +818,15 @@ interface MultiFilterPillProps {
     }[];
     onToggle: (key: string) => void;
     onClear: () => void;
+    /**
+     * Control size shared with Button / FilterChip: sm = h-8 / 13px, md = h-9 /
+     * 14px, lg = h-10 / 16px. Defaults to the dense `sm` tier since filter pills
+     * are toolbar controls — a pill then sits at the same 32px height and 13px
+     * text as a Button sm / FilterChip sm in the same row.
+     */
+    size?: "sm" | "md" | "lg";
 }
-declare function MultiFilterPill({ label, icon, selected, options, onToggle, onClear, }: MultiFilterPillProps): react_jsx_runtime.JSX.Element;
+declare function MultiFilterPill({ label, icon, selected, options, onToggle, onClear, size, }: MultiFilterPillProps): react_jsx_runtime.JSX.Element;
 declare namespace MultiFilterPill {
     var displayName: string;
 }
@@ -2100,20 +2110,31 @@ declare const NotificationFilter: React$1.ForwardRefExoticComponent<Notification
 type NotificationListProps = React.HTMLAttributes<HTMLDivElement>;
 declare const NotificationList: React$1.ForwardRefExoticComponent<NotificationListProps & React$1.RefAttributes<HTMLDivElement>>;
 interface NotificationItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
+    /**
+     * Primary headline — one scannable line (feed the human sentence here, e.g.
+     * "Sara uploaded W-2.pdf", not a generic type label). Clamps to 2 lines,
+     * then ellipsis.
+     */
     title: React.ReactNode;
+    /** Muted secondary line (a message snippet, etc.). Single line, truncates. */
     body?: React.ReactNode;
-    /** Small caption, joined with `client` and `time` on the meta line. */
+    /** Quiet caption shown on the meta line only when there is no `body`. */
     typeLabel?: React.ReactNode;
     client?: React.ReactNode;
-    /** Preformatted relative time, e.g. "5m". */
+    /** Preformatted relative time, e.g. "5m". Top-right, baseline with `title`. */
     time?: React.ReactNode;
     /** People-driven rows: shows the sender avatar instead of the icon tile. */
     sender?: {
         name: string;
         src?: string | null;
     };
-    /** System rows: icon rendered inside a neutral tile. Ignored when `sender` is set. */
+    /** System rows: icon rendered inside a tile. Ignored when `sender` is set. */
     icon?: React.ReactNode;
+    /**
+     * Tint the icon tile per type, e.g. "bg-amber-bg text-amber". The consumer
+     * owns the type-to-colour map. Defaults to a neutral tile.
+     */
+    iconClassName?: string;
     unread?: boolean;
 }
 declare const NotificationItem: React$1.ForwardRefExoticComponent<NotificationItemProps & React$1.RefAttributes<HTMLButtonElement>>;
@@ -2127,6 +2148,7 @@ type ToolbarProps = React.HTMLAttributes<HTMLDivElement>;
 declare const Toolbar: React$1.ForwardRefExoticComponent<ToolbarProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const filterChipVariants: (props?: ({
     active?: boolean | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FilterChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof VariantProps<typeof filterChipVariants>>, VariantProps<typeof filterChipVariants> {
     count?: number;

package/dist/index.js

@@ -2695,7 +2695,7 @@ var buttonVariants = cva(
         dashed: "border-2 border-dashed border-rule bg-transparent text-fg-3 hover:border-fg-4 hover:bg-bg-2 hover:text-fg"
       },
       size: {
-        sm: "h-8 px-3 text-sm gap-1.5",
+        sm: "h-8 px-3 text-[13px] gap-1.5",
         md: "h-10 px-4 text-sm gap-2",
         lg: "h-12 px-6 text-base gap-2",
         // Icon-only sizes. Hit target ≥ 24px (WCAG 2.5.5 floor).
@@ -3624,20 +3624,27 @@ var ContextMenuSubTrigger = React36.forwardRef(({ className, inset, children, ..
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  ContextMenuPrimitive.SubContent,
-  {
-    ref,
-    className: cn(
-      "rounded-card border-rule bg-surface text-fg shadow-pop z-[var(--z-dropdown)] min-w-[8rem] overflow-hidden border p-1",
-      "transition-[opacity,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-      "data-[state=closed]:scale-95 data-[state=closed]:opacity-0",
-      "data-[state=open]:scale-100 data-[state=open]:opacity-100",
-      "motion-reduce:transition-none",
-      className
-    ),
-    ...props
-  }
+var ContextMenuSubContent = React36.forwardRef(({ className, ...props }, ref) => (
+  // Portal the sub-content to the body. The parent Content keeps a persistent
+  // `scale-100` transform (its open-state animation), which makes it the
+  // containing block for `position: fixed` descendants — and its
+  // `overflow-hidden` would then clip this Popper-positioned flyout to nothing.
+  // Portaling escapes both the transformed ancestor and the clip.
+  /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.SubContent,
+    {
+      ref,
+      className: cn(
+        "rounded-card border-rule bg-surface text-fg shadow-pop z-[var(--z-dropdown)] min-w-[8rem] overflow-hidden border p-1",
+        "transition-[opacity,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+        "data-[state=closed]:scale-95 data-[state=closed]:opacity-0",
+        "data-[state=open]:scale-100 data-[state=open]:opacity-100",
+        "motion-reduce:transition-none",
+        className
+      ),
+      ...props
+    }
+  ) })
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 var ContextMenuContent = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
@@ -4049,20 +4056,27 @@ var DropdownMenuSubTrigger = React36.forwardRef(({ className, inset, children, .
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.SubContent,
-  {
-    ref,
-    className: cn(
-      "rounded-card border-rule bg-surface text-fg shadow-pop z-[var(--z-dropdown)] min-w-[8rem] overflow-hidden border p-1",
-      "transition-[opacity,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-      "data-[state=closed]:scale-95 data-[state=closed]:opacity-0",
-      "data-[state=open]:scale-100 data-[state=open]:opacity-100",
-      "motion-reduce:transition-none",
-      className
-    ),
-    ...props
-  }
+var DropdownMenuSubContent = React36.forwardRef(({ className, ...props }, ref) => (
+  // Portal the sub-content to the body. The parent Content keeps a persistent
+  // `scale-100` transform (its open-state animation), which makes it the
+  // containing block for `position: fixed` descendants — and its
+  // `overflow-hidden` would then clip this Popper-positioned flyout to nothing.
+  // Portaling escapes both the transformed ancestor and the clip.
+  /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.SubContent,
+    {
+      ref,
+      className: cn(
+        "rounded-card border-rule bg-surface text-fg shadow-pop z-[var(--z-dropdown)] min-w-[8rem] overflow-hidden border p-1",
+        "transition-[opacity,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+        "data-[state=closed]:scale-95 data-[state=closed]:opacity-0",
+        "data-[state=open]:scale-100 data-[state=open]:opacity-100",
+        "motion-reduce:transition-none",
+        className
+      ),
+      ...props
+    }
+  ) })
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 var DropdownMenuContent = React36.forwardRef(({ className, sideOffset = 6, align = "start", ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
@@ -4730,13 +4744,19 @@ function Logo({
     }
   );
 }
+var TRIGGER_SIZE = {
+  sm: "h-8 gap-1.5 px-2.5 text-[13px]",
+  md: "h-9 gap-2 px-3 text-sm",
+  lg: "h-10 gap-2 px-3.5 text-base"
+};
 function MultiFilterPill({
   label,
   icon,
   selected,
   options,
   onToggle,
-  onClear
+  onClear,
+  size = "sm"
 }) {
   const active = selected.size > 0;
   const displayLabel = active ? selected.size === 1 ? options.find((o) => o.key === [...selected][0])?.label ?? label : `${label} \xB7 ${selected.size}` : label;
@@ -4745,7 +4765,8 @@ function MultiFilterPill({
       PopoverTrigger,
       {
         className: cn(
-          "rounded-pill font-body inline-flex items-center gap-1.5 border px-2.5 py-1 text-xs font-medium",
+          "rounded-pill font-body inline-flex items-center border font-medium",
+          TRIGGER_SIZE[size],
           "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
           "motion-reduce:transition-none",
           "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
@@ -5460,7 +5481,10 @@ var searchInputVariants = cva(
   {
     variants: {
       inputSize: {
-        sm: "h-8 pl-8 pr-8 text-xs",
+        // `sm` is the dense control tier: h-8 + 13px, so a search box lines up
+        // pixel-for-pixel (height AND text) with Button / MultiFilterPill /
+        // FilterChip at their `sm` tier in a toolbar row.
+        sm: "h-8 pl-8 pr-8 text-[13px]",
         md: "h-9 pl-9 pr-9 text-[13px]",
         lg: "h-11 pl-10 pr-10 text-sm"
       }
@@ -8757,16 +8781,16 @@ var NotificationFilter = forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx("div", { className: "bg-bg-2 inline-flex rounded-md p-0.5 text-xs font-medium", children: FILTER_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "bg-bg-2 inline-flex rounded-lg p-0.5 text-xs font-medium", children: FILTER_OPTIONS.map((option) => /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: () => onValueChange(option),
               "aria-pressed": value === option,
               className: cn(
-                "rounded-[6px] px-2.5 py-1 capitalize transition-colors",
+                "rounded-md px-2.5 py-1 capitalize transition-colors",
                 "focus-visible:ring-accent outline-none focus-visible:ring-2",
-                value === option ? "bg-surface text-fg shadow-quiet" : "text-fg-3 hover:text-fg"
+                value === option ? "bg-surface text-fg shadow-quiet ring-rule-soft ring-1" : "text-fg-3 hover:text-fg"
               ),
               children: option
             },
@@ -8794,45 +8818,51 @@ var NotificationList = forwardRef(
 );
 NotificationList.displayName = "NotificationList";
 var NotificationItem = forwardRef(
-  function NotificationItem2({ title, body, typeLabel, client, time, sender, icon, unread, className, ...props }, ref) {
-    const meta = [typeLabel, client, time].filter(Boolean);
+  function NotificationItem2({ title, body, typeLabel, client, time, sender, icon, iconClassName, unread, className, ...props }, ref) {
+    const meta = body ? [] : [typeLabel, client].filter(Boolean);
     return /* @__PURE__ */ jsxs(
       "button",
       {
         ref,
         type: "button",
         className: cn(
-          "flex w-full gap-3 px-4 py-3 text-left outline-none",
+          "flex w-full gap-3 px-4 py-2.5 text-left outline-none",
           "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-          "hover:bg-bg-2/60 focus-visible:bg-bg-2/60",
-          unread && "bg-accent/[0.06]",
+          unread ? "bg-pro-bg hover:bg-pro-bg-hover focus-visible:bg-pro-bg-hover" : "hover:bg-bg-2/60 focus-visible:bg-bg-2/60",
           className
         ),
         ...props,
         children: [
+          /* @__PURE__ */ jsx("span", { className: "flex w-1.5 shrink-0 justify-center", "aria-hidden": "true", children: unread && /* @__PURE__ */ jsx("span", { className: "bg-pro-fg mt-[13px] size-1.5 rounded-full" }) }),
           sender ? /* @__PURE__ */ jsx(Avatar, { size: "sm", name: sender.name, src: sender.src, className: "mt-0.5" }) : /* @__PURE__ */ jsx(
             "div",
             {
               "aria-hidden": "true",
-              className: "bg-bg-2 text-fg-3 mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full [&_svg]:size-3.5",
+              className: cn(
+                "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-lg [&_svg]:size-3.5",
+                iconClassName ?? "bg-bg-2 text-fg-3"
+              ),
               children: icon
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
             unread && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Unread. " }),
-            /* @__PURE__ */ jsx("p", { className: cn("text-fg text-sm leading-snug", unread ? "font-semibold" : "font-medium"), children: title }),
-            body && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-0.5 truncate text-xs", children: body }),
-            meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "text-fg-4 mt-1 flex flex-wrap items-center gap-1.5 text-[11px]", children: meta.map((part, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
               /* @__PURE__ */ jsx(
-                "span",
+                "p",
                 {
                   className: cn(
-                    i === 0 && typeLabel ? "font-medium tracking-wide uppercase" : "tabular-nums"
+                    "line-clamp-2 min-w-0 flex-1 text-[13.5px] leading-snug font-medium",
+                    unread ? "text-fg" : "text-fg-2"
                   ),
-                  children: part
+                  children: title
                 }
-              )
+              ),
+              time && /* @__PURE__ */ jsx("span", { className: "text-fg-4 shrink-0 text-xs whitespace-nowrap tabular-nums", children: time })
+            ] }),
+            body ? /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-0.5 truncate text-xs", children: body }) : meta.length > 0 && /* @__PURE__ */ jsx("p", { className: "text-fg-4 mt-0.5 truncate text-[11.5px]", children: meta.map((part, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+              i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
+              part
             ] }, i)) })
           ] })
         ]
@@ -8847,7 +8877,7 @@ var Toolbar = forwardRef(function Toolbar2({ className, children, ...props }, re
 Toolbar.displayName = "Toolbar";
 var filterChipVariants = cva(
   cn(
-    "inline-flex items-center gap-1.5 h-8 px-3 rounded-pill text-xs font-medium border",
+    "inline-flex items-center gap-1.5 rounded-pill font-medium border",
     "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
     "motion-reduce:transition-none",
     "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
@@ -8858,21 +8888,29 @@ var filterChipVariants = cva(
       active: {
         true: "bg-pro-bg text-pro-fg border-pro-fg/30 hover:bg-pro-bg-hover",
         false: "bg-bg-2 text-fg-2 border-rule hover:bg-bg-3"
+      },
+      // Control text scale shared with Button / MultiFilterPill: sm = 13px,
+      // md = 14px, lg = 16px. Defaults to the dense `sm` tier (toolbar control).
+      size: {
+        sm: "h-8 px-3 text-[13px]",
+        md: "h-9 px-3.5 text-sm",
+        lg: "h-10 px-4 text-base"
       }
     },
     defaultVariants: {
-      active: false
+      active: false,
+      size: "sm"
     }
   }
 );
-var FilterChip = forwardRef(function FilterChip2({ active = false, count, className, children, type, ...props }, ref) {
+var FilterChip = forwardRef(function FilterChip2({ active = false, size, count, className, children, type, ...props }, ref) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
       ref,
       type: type ?? "button",
       "aria-pressed": active ?? false,
-      className: cn(filterChipVariants({ active }), className),
+      className: cn(filterChipVariants({ active, size }), className),
       ...props,
       children: [
         children,