@cosxai/ui 1.0.0-alpha.12 → 1.0.0-alpha.14

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 1.0.0-alpha.14
+
+- ActionBar: an action can carry `divider` (a rule before it), `iconOnly` (just the icon, label in the tooltip) and `wrap` + `wrapKey` (wrap the button in a menu or popover trigger so it opens something anchored to itself).
+
+## 1.0.0-alpha.13 (2026-10-04)
+
+- BottomSheet: the scrolling list reaches the sheet's sides (its padding
+  is the sheet's) and never pans sideways — a row bleeding to the edges
+  with `-mx-4` made it scroll 32px sideways and showed a scrollbar.
+
 ## 1.0.0-alpha.12 (2026-10-04)
 
 From the Metaroom app (Motion & Native Feel §04, Account):

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "1.0.0-alpha.12",
+  "version": "1.0.0-alpha.14",
   "description": "COSX Design System 3.0 \u2014 tokens, Tailwind v4 theme and React components",
   "license": "UNLICENSED",
   "type": "module",

package/src/components/ActionBar.tsx

@@ -11,6 +11,7 @@ import {
   useRef,
   useState,
   type KeyboardEvent as ReactKeyboardEvent,
+  type ReactElement,
   type ReactNode,
 } from 'react';
 
@@ -35,6 +36,14 @@ export type ActionBarAction = {
   disabledReason?: string | undefined;
   /** Actions of a kind: more than two sharing a group fold into one menu. */
   group?: string | undefined;
+  /** A thin rule before it, setting it apart from the actions on its left. */
+  divider?: boolean | undefined;
+  /** Always just the icon (a star, ⋯); the label names it for screen readers and the tooltip. */
+  iconOnly?: boolean | undefined;
+  /** Wrap the button, e.g. in a menu's or popover's trigger (asChild), so it opens something anchored to itself. */
+  wrap?: ((button: ReactElement) => ReactElement) | undefined;
+  /** Changes when what `wrap` shows changes (the bar re-renders only when an action's fields change). */
+  wrapKey?: string | undefined;
 };
 
 export type ActionBarSelection = {
@@ -126,7 +135,7 @@ function editable(t: EventTarget | null): boolean {
 const dialogOpen = () => Boolean(document.querySelector('[role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"]'));
 
 const signature = (a: ActionBarAction[] | null | undefined) =>
-  a ? a.map((x) => [x.id, x.label, x.shortcut, x.active, x.disabled, x.disabledReason, x.group, x.icon?.displayName].join('\u0001')).join('\u0002') : '';
+  a ? a.map((x) => [x.id, x.label, x.shortcut, x.active, x.disabled, x.disabledReason, x.group, x.icon?.displayName, x.divider, x.iconOnly, x.wrapKey].join('\u0001')).join('\u0002') : '';
 
 // ─── Provider ─────────────────────────────────────────────────────────
 
@@ -465,8 +474,8 @@ export function ActionBar({ presentation, hidden: hiddenProp, maxActions = 6, la
   const renderAction = (a: ActionBarAction) => {
     const keys = a.shortcut ? formatShortcut(a.shortcut) : null;
     const Glyph = a.icon;
-    const iconOnly = shown === 'icons' && Glyph;
-    const button = (
+    const iconOnly = (shown === 'icons' || a.iconOnly) && Glyph;
+    const plain = (
       <button
         type="button"
         aria-label={iconOnly ? a.label : undefined}
@@ -479,16 +488,18 @@ export function ActionBar({ presentation, hidden: hiddenProp, maxActions = 6, la
       >
         {Glyph && <Glyph size={16} strokeWidth={1.75} aria-hidden />}
         {!iconOnly && <span>{a.label}</span>}
-        {shown === 'full' && keys && <kbd className="font-sans text-meta font-medium opacity-55">{keys}</kbd>}
+        {shown === 'full' && keys && !iconOnly && <kbd className="font-sans text-meta font-medium opacity-55">{keys}</kbd>}
       </button>
     );
-    const hint = a.disabledReason ?? (shown !== 'full' ? [a.label, keys].filter(Boolean).join(' · ') : null);
-    return hint && (iconOnly || a.disabledReason || keys) ? (
-      <Tooltip key={a.id} content={hint}>
-        {button}
-      </Tooltip>
-    ) : (
-      <Fragment key={a.id}>{button}</Fragment>
+    const button = a.wrap ? a.wrap(plain) : plain;
+    const rule = a.divider ? <span aria-hidden className="mx-1 h-5 w-px shrink-0 bg-white/20 ink:bg-ink/20" /> : null;
+    const hint = a.disabledReason ?? (shown !== 'full' || iconOnly ? [a.label, keys].filter(Boolean).join(' · ') : null);
+    const tipped = hint && (iconOnly || a.disabledReason || keys) ? <Tooltip content={hint}>{button}</Tooltip> : button;
+    return (
+      <Fragment key={a.id}>
+        {rule}
+        {tipped}
+      </Fragment>
     );
   };
 

package/src/components/BottomSheet.tsx

@@ -236,7 +236,9 @@ export function BottomSheet({
             {description && <DialogPrimitive.Description className="m-0 px-1 pb-2 text-small text-fg-secondary">{description}</DialogPrimitive.Description>}
           </div>
           <div
-            className={cn('flex min-h-0 flex-1 flex-col gap-0.5', two && !full ? 'overflow-hidden' : 'overflow-y-auto overscroll-contain')}
+            // Edge to edge (its padding is the sheet's): a row that bleeds
+            // to the sheet's sides with -mx-4 fits, and it never pans sideways
+            className={cn('-mx-4 flex min-h-0 flex-1 flex-col gap-0.5 px-4', two && !full ? 'overflow-hidden' : 'overflow-x-hidden overflow-y-auto overscroll-contain')}
             // At half height, a pull up on the list lifts the sheet first
             onWheel={(e) => two && !full && e.deltaY > 0 && setFull(true)}
             onTouchMove={() => two && !full && setFull(true)}