@ceebee/ui 0.3.3 → 0.4.0

package/dist/client.d.ts

@@ -596,15 +596,25 @@ interface MenuItem {
     checked?: boolean;
     onSelect?: () => void;
 }
-interface DropdownMenuProps {
-    trigger: ReactElement;
+interface MenuSection {
+    label?: ReactNode;
     items: MenuItem[];
+}
+interface DropdownMenuBaseProps {
+    trigger: ReactElement;
     align?: 'start' | 'center' | 'end';
     side?: 'top' | 'right' | 'bottom' | 'left';
     className?: string;
 }
+type DropdownMenuProps = DropdownMenuBaseProps & ({
+    items: MenuItem[];
+    sections?: never;
+} | {
+    items?: never;
+    sections: MenuSection[];
+});
 /** Typeahead, roving focus, and dismissal are Base UI's; the surface and the rhythm are ours. */
-declare function DropdownMenu({ trigger, items, align, side, className }: DropdownMenuProps): react.JSX.Element;
+declare function DropdownMenu({ trigger, items, sections, align, side, className }: DropdownMenuProps): react.JSX.Element;
 
 interface NavItem {
     label: ReactNode;
@@ -929,4 +939,4 @@ interface StaggerProps {
 /** Wraps each child in a Reveal with an increasing delay — the list arrives, it does not pop. */
 declare function Stagger({ children, step, from, onView, className }: StaggerProps): react.JSX.Element;
 
-export { Alert, type AlertProps, type Align, type AutoplayConditions, Button, type ButtonProps, Carousel, type CarouselProps, type CarouselSkeletonProps, type CarouselSlideProps, Checkbox, type CheckboxProps, Checklist, type ChecklistProps, type ChecklistTask, Coachmark, type CoachmarkProps, type Column, Combobox, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, DataTable, type DataTableProps, type DataTableSkeletonProps, DateInput, type DateInputProps, type DayCell, Dialog, DialogClose, type DialogProps, DropdownMenu, type DropdownMenuProps, type DurationToken, Field, type FieldProps, FileDrop, type FileDropProps, type FileRules, Image, type ImageProps, type Labels, LabelsProvider, type LabelsProviderProps, type MenuItem, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type NumberBounds, NumberInput, type NumberInputProps, type PageRange, Pagination, type PaginationProps, type PaletteCommand, Popover, type PopoverProps, RadioGroup, type RadioGroupProps, type RadioOption, type RankedCommand, type Rejection, Reveal, type RevealProps, type SeenStore, Select, type SelectOption, type SelectProps, type Side, Sidebar, type SidebarProps, type SortDirection, type SortState, type SpringPreset, Stagger, type StaggerProps, type StepTarget, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, TextInput, type TextInputProps, Textarea, type TextareaProps, type ThemeChoice, ThemeProvider, TimeInput, type TimeInputProps, type TimeValue, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, TopBar, type TopBarProps, Tour, type TourAction, type TourProps, type TourState, type TourStatus, type TourStep, ariaSortFor, canStep, clamp, decimalPlaces, describeAccept, filterCommands, formatISO, formatTime, groupCommands, hasEnded, initialTourState, isOutOfRange, isSameDay, isTimeOutOfRange, matchesAccept, monthMatrix, nextSort, pageRange, parseDateInput, parseNumber, parseTime, partitionFiles, rankCommand, resolveTarget, shouldAutoplay, startOfDay, stepBy, timeOptions, timeToMinutes, tourReducer, useFieldWiring, useLabels, useMotionSettings, useTheme, useToast };
+export { Alert, type AlertProps, type Align, type AutoplayConditions, Button, type ButtonProps, Carousel, type CarouselProps, type CarouselSkeletonProps, type CarouselSlideProps, Checkbox, type CheckboxProps, Checklist, type ChecklistProps, type ChecklistTask, Coachmark, type CoachmarkProps, type Column, Combobox, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, DataTable, type DataTableProps, type DataTableSkeletonProps, DateInput, type DateInputProps, type DayCell, Dialog, DialogClose, type DialogProps, DropdownMenu, type DropdownMenuProps, type DurationToken, Field, type FieldProps, FileDrop, type FileDropProps, type FileRules, Image, type ImageProps, type Labels, LabelsProvider, type LabelsProviderProps, type MenuItem, type MenuSection, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type NumberBounds, NumberInput, type NumberInputProps, type PageRange, Pagination, type PaginationProps, type PaletteCommand, Popover, type PopoverProps, RadioGroup, type RadioGroupProps, type RadioOption, type RankedCommand, type Rejection, Reveal, type RevealProps, type SeenStore, Select, type SelectOption, type SelectProps, type Side, Sidebar, type SidebarProps, type SortDirection, type SortState, type SpringPreset, Stagger, type StaggerProps, type StepTarget, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, TextInput, type TextInputProps, Textarea, type TextareaProps, type ThemeChoice, ThemeProvider, TimeInput, type TimeInputProps, type TimeValue, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, TopBar, type TopBarProps, Tour, type TourAction, type TourProps, type TourState, type TourStatus, type TourStep, ariaSortFor, canStep, clamp, decimalPlaces, describeAccept, filterCommands, formatISO, formatTime, groupCommands, hasEnded, initialTourState, isOutOfRange, isSameDay, isTimeOutOfRange, matchesAccept, monthMatrix, nextSort, pageRange, parseDateInput, parseNumber, parseTime, partitionFiles, rankCommand, resolveTarget, shouldAutoplay, startOfDay, stepBy, timeOptions, timeToMinutes, tourReducer, useFieldWiring, useLabels, useMotionSettings, useTheme, useToast };

package/dist/client.js

@@ -1,6 +1,6 @@
 "use client";
-import { createContext, forwardRef, useContext, useMemo, useState, useRef, useEffect, useCallback, useId, useReducer, Children } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, forwardRef, useContext, useMemo, useState, useRef, useEffect, useCallback, useId, Fragment, useReducer, Children } from 'react';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { motion } from 'motion/react';
 import { Select as Select$1 } from '@base-ui/react/select';
 import { ChevronLeft, ChevronRight, ChevronsUpDown, Check, Minus, X, CalendarDays, Clock, Upload, Plus, Search, PanelLeftOpen, PanelLeftClose, ArrowUp, ArrowDown, XCircle, AlertTriangle, CheckCircle2, Info } from 'lucide-react';
@@ -1371,26 +1371,33 @@ function Tabs({ items, value, defaultValue, onValueChange, variant = "underline"
     }
   );
 }
-function DropdownMenu({ trigger, items, align = "end", side = "bottom", className }) {
+function DropdownMenu({ trigger, items, sections, align = "end", side = "bottom", className }) {
+  const groups = sections ?? [{ items }];
   return /* @__PURE__ */ jsxs(Menu.Root, { children: [
     /* @__PURE__ */ jsx(Menu.Trigger, { render: trigger }),
-    /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { side, align, sideOffset: 6, children: /* @__PURE__ */ jsx(Menu.Popup, { className: cn("cb-menu", className), children: items.map(
-      (item, index) => item.separator ? /* @__PURE__ */ jsx(Menu.Separator, { className: "cb-menu__separator" }, `separator-${index}`) : /* @__PURE__ */ jsxs(
-        Menu.Item,
-        {
-          className: "cb-menu__item",
-          "data-tone": item.tone,
-          disabled: item.disabled,
-          onClick: item.onSelect,
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "cb-menu__icon", children: item.checked ? /* @__PURE__ */ jsx(Check, { size: 14 }) : item.icon }),
-            /* @__PURE__ */ jsx("span", { className: "cb-menu__label", children: item.label }),
-            item.shortcut ? /* @__PURE__ */ jsx("kbd", { className: "cb-menu__shortcut", children: item.shortcut }) : null
-          ]
-        },
-        `${String(item.label)}-${index}`
-      )
-    ) }) }) })
+    /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { side, align, sideOffset: 6, children: /* @__PURE__ */ jsx(Menu.Popup, { className: cn("cb-menu", className), children: groups.map((section, sectionIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      sectionIndex > 0 ? /* @__PURE__ */ jsx(Menu.Separator, { className: "cb-menu__separator" }) : null,
+      /* @__PURE__ */ jsxs(Menu.Group, { className: "cb-menu__group", children: [
+        section.label ? /* @__PURE__ */ jsx(Menu.GroupLabel, { className: "cb-menu__group-label", children: section.label }) : null,
+        section.items.map(
+          (item, itemIndex) => item.separator ? /* @__PURE__ */ jsx(Menu.Separator, { className: "cb-menu__separator" }, `separator-${itemIndex}`) : /* @__PURE__ */ jsxs(
+            Menu.Item,
+            {
+              className: "cb-menu__item",
+              "data-tone": item.tone,
+              disabled: item.disabled,
+              onClick: item.onSelect,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "cb-menu__icon", children: item.checked ? /* @__PURE__ */ jsx(Check, { size: 14 }) : item.icon }),
+                /* @__PURE__ */ jsx("span", { className: "cb-menu__label", children: item.label }),
+                item.shortcut ? /* @__PURE__ */ jsx("kbd", { className: "cb-menu__shortcut", children: item.shortcut }) : null
+              ]
+            },
+            `${String(item.label)}-${itemIndex}`
+          )
+        )
+      ] })
+    ] }, `section-${sectionIndex}`)) }) }) })
   ] });
 }
 var hasActiveChild = (item) => Boolean(item.items?.some((child) => child.active));
@@ -1434,7 +1441,7 @@ function SidebarEntry({ item, collapsed }) {
   if (collapsed) {
     return /* @__PURE__ */ jsx(Flyout, { label: item.label, items: children, children: /* @__PURE__ */ jsx(SidebarRow, { item: { ...item, active: item.active || hasActiveChild(item) }, collapsed: true }) });
   }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -1455,7 +1462,7 @@ function SidebarEntry({ item, collapsed }) {
   ] });
 }
 function SidebarRow({ item, collapsed, nested }) {
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+  const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
     item.icon ? /* @__PURE__ */ jsx("span", { className: "cb-sidebar__icon", children: item.icon }) : null,
     /* @__PURE__ */ jsx("span", { className: "cb-sidebar__label", children: item.label }),
     item.adornment && !collapsed ? /* @__PURE__ */ jsx("span", { className: "cb-sidebar__adornment", children: item.adornment }) : null
@@ -1883,7 +1890,7 @@ function Coachmark({
   const labels = useLabels();
   const rect = useAnchorRect(anchor, open && spotlight !== false);
   const padding = typeof spotlight === "number" ? spotlight : 8;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     rect ? /* @__PURE__ */ jsx(
       "div",
       {
@@ -2058,7 +2065,7 @@ function Tour({ id, steps, open = false, onOpenChange, seenStore, onFinish, onSk
       spotlight: step.spotlight,
       progress: { current: state.index + 1, total: steps.length },
       onDismiss: skip,
-      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+      actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [
         state.index > 0 ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", tone: "neutral", onClick: () => rawDispatch({ type: "prev" }), children: text2.back }) : /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", tone: "neutral", onClick: skip, children: text2.skip }),
         /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => rawDispatch({ type: "next" }), children: isLast ? text2.done : text2.next })
       ] }),

package/dist/styles.css

@@ -2106,7 +2106,7 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 /* nav/nav.css */
 .cb-menu {
   box-sizing: border-box;
-  min-width: 12rem;
+  min-width: 14rem;
   padding: var(--cb-space-1);
   background: var(--cb-surface-raised);
   border: var(--cb-border-width) solid var(--cb-border);
@@ -2118,6 +2118,14 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   transition: opacity var(--cb-duration-fast) var(--cb-ease-entrance),
     transform var(--cb-duration-fast) var(--cb-ease-entrance);
 }
+.cb-menu__group-label {
+  padding: var(--cb-space-2) var(--cb-space-2) var(--cb-space-1);
+  color: var(--cb-fg-subtle);
+  font-size: var(--cb-text-xs);
+  font-weight: var(--cb-weight-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
 .cb-menu[data-starting-style],
 .cb-menu[data-ending-style] { opacity: 0; transform: scale(0.97); }
 @media (prefers-reduced-motion: reduce) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceebee/ui",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
   "license": "MIT",
   "repository": {