@fabio.caffarello/react-design-system 3.7.0 → 3.9.0

package/README.md

@@ -118,9 +118,11 @@ Consumers can import from:
 
 - `@fabio.caffarello/react-design-system` — the default entry. Everything: providers, hooks, all primitives, components, layouts, tokens. The emitted bundle carries `"use client";` so RSC frameworks (Next App Router 15+/16, etc.) accept it from a Server Component without crashing on `React.createContext`. The whole module is treated as a client boundary by the consumer's bundler.
 - `@fabio.caffarello/react-design-system/server` — the opt-in server entry (issue #150). Re-exports only the components whose render tree is safe to evaluate inside a React Server Component: presentational primitives (`Text`, `Skeleton`, `Spinner`, `Progress`, `Chip`, `ErrorMessage`, `Info`), layout (`Container`, `Stack`), and structural / informational components (`Breadcrumb`, `Timeline`, `AutocompleteOption`, `DialogHeader`, `DialogFooter`, `DrawerHeader`, `DrawerFooter`, `HeaderActions`, `HeaderNavigation`, `MenuSeparator`, `NavbarSeparator`, `TableCell`). The bundle carries NO `"use client"` directive, so importing from it in a Server Component does NOT cross a client boundary — useful for SEO-critical / first-paint-critical routes where the shell shouldn't ship JS to the client.
+- `@fabio.caffarello/react-design-system/hooks` — the granular public-hooks entry (issue #203). Re-exports only the public hooks (today: `useScrollSpy`) as a tiny standalone client bundle (<1KB) with every dependency external. Use it when a route's client component needs a hook but nothing else from RDS: importing a hook from the main entry pulls the whole pre-bundled barrel into the route's client JS (+277KB minified measured on a Next 16 route), because the single-file `"use client"` bundle is opaque to the consumer bundler's tree-shaking. The same hooks remain available from the main entry for back-compat.
+- `@fabio.caffarello/react-design-system/granular` — the granular client entry (issue #208). The SAME public surface as the default entry, emitted as a `preserveModules` tree (one module per source file, `"use client"` on every module, all deps external). Use it for leaf component imports on size-critical routes: importing one component from the default entry pulls the whole pre-bundled barrel (+264KB minified measured for `Accordion` on a Next 16 route); the same import from `./granular` ships only that component's module graph (~36KB, 13% of the barrel payload — gated in CI). Keep app-wide setup (`AppProvider`/providers) on the default entry: the single bundle preserves provider initialization order by construction.
 - `@fabio.caffarello/react-design-system/styles` — the bundled CSS. Same stylesheet regardless of which JS entry you import.
 
-The two JS entries can be mixed in one Server Component — `import { Text } from "…/server"; import { Button } from "…"` is the normal pattern. The server entry is purely additive; consumers who never use it see no behavioural change.
+The JS entries can be mixed in one Server Component — `import { Text } from "…/server"; import { Button } from "…"` is the normal pattern. The server entry is purely additive; consumers who never use it see no behavioural change.
 
 ```tsx
 // app/profile/page.tsx — a Next 16 App Router Server Component.
@@ -141,7 +143,7 @@ export default function Profile() {
 }
 ```
 
-Sub-entries (`/primitives`, `/components`, `/tokens`, `/providers`) were removed in Phase 13d — they had been silently broken for external consumers since v1.0.0 because cross-chunk references to `cva` and other shared utilities failed at runtime. A single main entry collapses that class of bug structurally; tree-shaking still works at the named-export level via any modern bundler. The `./server` entry sidesteps the same regression by being its OWN independent Vite build with all third-party deps externalised — no chunks are shared between the two entries.
+Sub-entries (`/primitives`, `/components`, `/tokens`, `/providers`) were removed in Phase 13d — they had been silently broken for external consumers since v1.0.0 because cross-chunk references to `cva` and other shared utilities failed at runtime. A single main entry collapses that class of bug structurally; tree-shaking still works at the named-export level via any modern bundler. The `./server`, `./hooks`, and `./granular` entries sidestep the same regression by each being their OWN independent Vite build with all third-party deps externalised — no chunks are shared between entries, and `./granular`'s preserveModules layout has no extracted chunks at all (source modules map 1:1 to output files).
 
 ## Working with Claude Code
 

package/dist/granular/index.js

@@ -0,0 +1,445 @@
+"use client";
+import { SIDEBAR_TOKENS as r, getNestedIndentClass as t } from "./ui/tokens/sidebar.js";
+import { SPACING_TOKENS as f, SpacingTokenFactory as p, getSpacing as m, getSpacingClass as x } from "./ui/tokens/spacing.js";
+import { FONT_FAMILY_TOKENS as d, FONT_WEIGHT_TOKENS as s, TYPOGRAPHY_TOKENS as i, TypographyTokenFactory as u, getTypography as n, getTypographyClasses as g, getTypographyLineHeight as S, getTypographySize as C, getTypographySizeFromFontSize as T, getTypographyWeight as b, getTypographyWeightFromFontWeight as v } from "./ui/tokens/typography.js";
+import { BRAND_COLORS as c } from "./ui/tokens/colors/index.js";
+import { BREAKPOINT_TOKENS as R, BreakpointTokenFactory as A, getBreakpoint as O, getMediaQuery as D } from "./ui/tokens/breakpoints.js";
+import { getAnimation as E, getAnimationClass as y, getTransitionClass as F } from "./ui/tokens/animations.js";
+import { getZIndex as L, getZIndexClass as H } from "./ui/tokens/z-index.js";
+import { getOpacity as _, getOpacityClass as k } from "./ui/tokens/opacity.js";
+import { AppProvider as G, useApp as K } from "./ui/providers/AppProvider.js";
+import { useScrollSpy as W } from "./ui/hooks/useScrollSpy.js";
+import { default as q } from "./ui/components/Accordion/Accordion.js";
+import { AlertDialog as V } from "./ui/components/Dialog/AlertDialog.js";
+import { default as Z } from "./ui/components/Autocomplete/Autocomplete.js";
+import { default as j } from "./ui/components/Autocomplete/AutocompleteList.js";
+import { default as X } from "./ui/components/Autocomplete/AutocompleteOption.js";
+import { default as ee } from "./ui/primitives/Avatar/Avatar.js";
+import { default as re } from "./ui/primitives/Badge/Badge.js";
+import { default as ae } from "./ui/components/Breadcrumb/Breadcrumb.js";
+import { Button as pe } from "./ui/primitives/Button/Button.js";
+import { default as xe } from "./ui/components/Card/Card.js";
+import { default as de } from "./ui/primitives/Checkbox/Checkbox.js";
+import { default as ie } from "./ui/primitives/Chip/Chip.js";
+import { default as ne } from "./ui/primitives/Collapsible/Collapsible.js";
+import { default as Se } from "./ui/components/ColorPicker/ColorPicker.js";
+import { default as Te } from "./ui/components/CommandPalette/CommandPalette.js";
+import { default as ve } from "./ui/components/DataGrid/DataGrid.js";
+import { default as ce } from "./ui/components/DatePicker/DatePicker.js";
+import { default as Re } from "./ui/components/Dialog/Dialog.js";
+import { default as Oe } from "./ui/components/Drawer/Drawer.js";
+import { default as he } from "./ui/components/Drawer/DrawerContent.js";
+import { default as ye } from "./ui/components/Drawer/DrawerFooter.js";
+import { default as Ie } from "./ui/components/Drawer/DrawerHeader.js";
+import { default as He } from "./ui/components/Dropdown/Dropdown.js";
+import { default as _e } from "./ui/components/EmptyState/EmptyState.js";
+import { default as Be } from "./ui/primitives/ErrorMessage/ErrorMessage.js";
+import { default as Ke } from "./ui/components/FileUpload/FileUpload.js";
+import { default as We } from "./ui/components/Form/Form.js";
+import { Header as qe, Header as ze } from "./ui/components/Header/Header.js";
+import { default as Ue } from "./ui/primitives/Info/Info.js";
+import { default as Qe } from "./ui/primitives/Input/Input.js";
+import { default as Je } from "./ui/primitives/Label/Label.js";
+import { default as $e } from "./ui/components/LoginBox/LoginBox.js";
+import { default as oo } from "./ui/components/Menu/Menu.js";
+import { default as to } from "./ui/components/Menu/MenuContent.js";
+import { default as fo } from "./ui/components/Menu/MenuItem.js";
+import { default as mo } from "./ui/components/Menu/MenuSeparator.js";
+import { default as lo } from "./ui/components/Menu/MenuTrigger.js";
+import { default as io } from "./ui/components/Modal/Modal.js";
+import { default as no } from "./ui/components/MultiSelect/MultiSelect.js";
+import { NavLink as So } from "./ui/primitives/NavLink/NavLink.js";
+import { default as To } from "./ui/components/SideNavbar/components/Navbar/Navbar.js";
+import { default as vo } from "./ui/components/SideNavbar/components/Navbar/NavbarItem.js";
+import { default as co } from "./ui/components/SideNavbar/components/Navbar/NavbarSeparator.js";
+import { default as Ro } from "./ui/components/SideNavbar/components/Navbar/NavbarToggle.js";
+import { Navigation as Oo, Navigation as Do } from "./ui/components/Navigation/Navigation.js";
+import { PageHeader as Eo, PageHeader as yo } from "./ui/components/PageHeader/PageHeader.js";
+import { default as Io } from "./ui/components/Pagination/Pagination.js";
+import { default as Ho } from "./ui/components/Popover/Popover.js";
+import { default as _o } from "./ui/primitives/Progress/Progress.js";
+import { default as Bo } from "./ui/primitives/Radio/Radio.js";
+import { default as Ko } from "./ui/components/Rating/Rating.js";
+import { default as Wo } from "./ui/components/SearchInput/SearchInput.js";
+import { default as qo } from "./ui/primitives/Select/Select.js";
+import { default as Vo } from "./ui/primitives/Separator/Separator.js";
+import { default as Zo } from "./ui/components/SideNavbar/SideNavbar.js";
+import { default as jo } from "./ui/components/SideNavbar/components/SideNavbarBackdrop.js";
+import { default as Xo } from "./ui/components/SideNavbar/components/SideNavbarResizeHandle.js";
+import { default as er } from "./ui/components/SideNavbar/components/SideNavbarRoot.js";
+import { default as rr } from "./ui/components/SideNavbar/components/SideNavbarToggle.js";
+import { default as ar } from "./ui/components/SideNavbar/components/Sidebar/Sidebar.js";
+import { default as pr } from "./ui/components/SideNavbar/components/Sidebar/SidebarContent.js";
+import { default as xr } from "./ui/components/SideNavbar/components/Sidebar/SidebarFooter.js";
+import { default as dr } from "./ui/components/SideNavbar/components/Sidebar/SidebarGroup.js";
+import { default as ir } from "./ui/components/SideNavbar/components/Sidebar/SidebarHeader.js";
+import { default as nr } from "./ui/primitives/Skeleton/Skeleton.js";
+import { default as Sr } from "./ui/primitives/Slider/Slider.js";
+import { default as Tr } from "./ui/primitives/Spinner/Spinner.js";
+import { default as vr } from "./ui/components/Stepper/Stepper.js";
+import { default as cr } from "./ui/primitives/Switch/Switch.js";
+import { default as Rr } from "./ui/components/Table/Table.js";
+import { default as Or } from "./ui/components/Table/TableActions.js";
+import { default as hr } from "./ui/components/Table/TableBody.js";
+import { default as yr } from "./ui/components/Table/TableCell.js";
+import { default as Ir } from "./ui/components/Table/TableEmptyState.js";
+import { default as Hr } from "./ui/components/Table/TableFilters.js";
+import { default as _r } from "./ui/components/Table/TableHeader.js";
+import { default as Br } from "./ui/components/Table/TableHeaderCell.js";
+import { default as Kr } from "./ui/components/Table/TableHeaderRow.js";
+import { default as Wr } from "./ui/components/Table/TablePagination.js";
+import { default as qr } from "./ui/components/Table/TableRow.js";
+import { default as Vr } from "./ui/components/Tabs/Tabs.js";
+import { default as Zr } from "./ui/primitives/Text/Text.js";
+import { default as jr } from "./ui/primitives/Textarea/Textarea.js";
+import { default as Xr } from "./ui/components/TimePicker/TimePicker.js";
+import { default as et } from "./ui/components/Timeline/Timeline.js";
+import { default as rt } from "./ui/primitives/Tooltip/Tooltip.js";
+import { AMBER as at, BLUE as ft, CYAN as pt, EMERALD as mt, FUCHSIA as xt, GRAY as lt, GREEN as dt, INDIGO as st, LIME as it, ORANGE as ut, PINK as nt, PRIMITIVE_COLORS as gt, PURPLE as St, RED as Ct, ROSE as Tt, SKY as bt, SLATE as vt, TEAL as Nt, VIOLET as ct, YELLOW as Pt, getPrimitiveColor as Rt, getPrimitiveColorPalette as At } from "./ui/tokens/colors/primitives.js";
+import { AvatarGroup as Dt } from "./ui/primitives/Avatar/AvatarGroup.js";
+import { BRAND_PRIMARY as Et, BRAND_SECONDARY as yt } from "./ui/tokens/colors/brand.js";
+import { COLOR_SCALES as It } from "./ui/tokens/colors/types.js";
+import { ConfigProvider as Ht, useConfig as Mt } from "./ui/providers/ConfigProvider.js";
+import { DashboardLayout as kt } from "./ui/components/DashboardLayout/DashboardLayout.js";
+import { DataTablePattern as Gt } from "./ui/components/DataTablePattern/DataTablePattern.js";
+import { DatePickerCalendar as wt } from "./ui/components/DatePicker/DatePickerCalendar.js";
+import { DatePickerInput as Yt } from "./ui/components/DatePicker/DatePickerInput.js";
+import { DatePickerProvider as zt } from "./ui/components/DatePicker/DatePickerProvider.js";
+import { DialogClose as Ut } from "./ui/components/Dialog/DialogClose.js";
+import { DialogContent as Qt } from "./ui/components/Dialog/DialogContent.js";
+import { DialogContext as Jt, useDialogContext as Xt, useDialogContextOptional as $t } from "./ui/providers/DialogContext.js";
+import { DialogDescription as oa } from "./ui/components/Dialog/DialogDescription.js";
+import { DialogFooter as ta } from "./ui/components/Dialog/DialogFooter.js";
+import { DialogHeader as fa } from "./ui/components/Dialog/DialogHeader.js";
+import { DialogProvider as ma } from "./ui/providers/DialogProvider.js";
+import { DialogTitle as la } from "./ui/components/Dialog/DialogTitle.js";
+import { DialogTrigger as sa } from "./ui/components/Dialog/DialogTrigger.js";
+import { FormContext as ua, useFormContext as na, useFormContextOptional as ga } from "./ui/components/Form/FormContext.js";
+import { FormField as Ca } from "./ui/components/Form/FormField.js";
+import { FormProvider as ba } from "./ui/components/Form/FormProvider.js";
+import { FormWizardPattern as Na } from "./ui/components/FormWizardPattern/FormWizardPattern.js";
+import { HeaderActions as Pa } from "./ui/components/Header/components/HeaderActions.js";
+import { HeaderHamburger as Aa } from "./ui/components/Header/components/HeaderHamburger.js";
+import { HeaderLogo as Da } from "./ui/components/Header/components/HeaderLogo.js";
+import { HeaderMobileMenu as Ea } from "./ui/components/Header/components/HeaderMobileMenu.js";
+import { HeaderNavigation as Fa } from "./ui/components/Header/components/HeaderNavigation.js";
+import { HeaderProvider as La, useHeaderContext as Ha } from "./ui/components/Header/contexts/HeaderContext.js";
+import { NavbarContext as _a, useNavbar as ka, useNavbarRequired as Ba } from "./ui/components/SideNavbar/contexts/NavbarContext.js";
+import { NavbarGroup as Ka } from "./ui/components/SideNavbar/components/Navbar/NavbarGroup.js";
+import { SEMANTIC_COLORS as Wa, SEMANTIC_COLORS_DARK as Ya, SEMANTIC_COLORS_LIGHT as qa, getSemanticColor as za, getSemanticColorRole as Va } from "./ui/tokens/colors/semantic.js";
+import { SearchAndFilterPattern as Za } from "./ui/components/SearchAndFilterPattern/SearchAndFilterPattern.js";
+import { SideNavbarConfigContext as ja, defaultConfigValues as Ja, useSideNavbarConfig as Xa, useSideNavbarConfigRequired as $a } from "./ui/components/SideNavbar/contexts/SideNavbarConfigContext.js";
+import { SideNavbarConfigProvider as of } from "./ui/components/SideNavbar/providers/SideNavbarConfigProvider.js";
+import { SideNavbarProvider as tf } from "./ui/components/SideNavbar/providers/SideNavbarProvider.js";
+import { SideNavbarStateContext as ff, useSideNavbarState as pf, useSideNavbarStateRequired as mf } from "./ui/components/SideNavbar/contexts/SideNavbarStateContext.js";
+import { SideNavbarStateProvider as lf } from "./ui/components/SideNavbar/providers/SideNavbarStateProvider.js";
+import { SideNavbarThemeContext as sf, defaultThemeValues as uf, useSideNavbarTheme as nf, useSideNavbarThemeRequired as gf } from "./ui/components/SideNavbar/contexts/SideNavbarThemeContext.js";
+import { SideNavbarThemeProvider as Cf } from "./ui/components/SideNavbar/providers/SideNavbarThemeProvider.js";
+import { SideNavbarToggleContext as bf, useSideNavbarToggleContext as vf, useSideNavbarToggleContextRequired as Nf } from "./ui/components/SideNavbar/contexts/SideNavbarToggleContext.js";
+import { SidebarContext as Pf, useSidebar as Rf, useSidebarRequired as Af } from "./ui/components/SideNavbar/contexts/SidebarContext.js";
+import { SidebarSlot as Df } from "./ui/components/SideNavbar/components/Sidebar/SidebarSlot.js";
+import { SidebarSlotContent as Ef } from "./ui/components/SideNavbar/components/Sidebar/SidebarSlotContent.js";
+import { SidebarSlotContext as Ff, useSidebarSlot as If, useSidebarSlotRequired as Lf } from "./ui/components/SideNavbar/contexts/SidebarSlotContext.js";
+import { SidebarSlotProvider as Mf } from "./ui/components/SideNavbar/providers/SidebarSlotProvider.js";
+import { Stat as kf } from "./ui/components/Stat/Stat.js";
+import { StatGroup as Gf } from "./ui/components/Stat/StatGroup.js";
+import { TableContext as wf, useTableContext as Wf, useTableContextOptional as Yf } from "./ui/components/Table/TableContext.js";
+import { TableProvider as zf } from "./ui/components/Table/TableProvider.js";
+import { TabsContent as Uf } from "./ui/components/Tabs/TabsContent.js";
+import { TabsContext as Qf, useTabsContext as jf, useTabsContextOptional as Jf } from "./ui/components/Tabs/TabsContext.js";
+import { TabsList as $f } from "./ui/components/Tabs/TabsList.js";
+import { TabsProvider as op } from "./ui/components/Tabs/TabsProvider.js";
+import { TabsTrigger as tp } from "./ui/components/Tabs/TabsTrigger.js";
+import { ThemeProvider as fp, useTheme as pp } from "./ui/providers/ThemeProvider.js";
+import { Toast as xp } from "./ui/components/Toast/Toast.js";
+import { ToastContainer as dp } from "./ui/components/Toast/ToastContainer.js";
+import { ToastContext as ip, useToastContext as up, useToastContextOptional as np } from "./ui/providers/ToastContext.js";
+import { ToastProvider as Sp } from "./ui/providers/ToastProvider.js";
+import { blendColors as Tp, darken as bp, getColor as vp, getColorClass as Np, getContrastColor as cp, getFocusColorClass as Pp, getFocusRingClass as Rp, getHoverColorClass as Ap, getSemanticColorClass as Op, getSemanticColorValue as Dp, isLightColor as hp, lighten as Ep, withOpacity as yp } from "./ui/tokens/colors/utils.js";
+import { clampWidth as Ip, parseWidthToPixels as Lp, validateWidthBounds as Hp } from "./ui/components/SideNavbar/utils/parseWidth.js";
+import { cn as _p } from "./ui/utils/cn.js";
+import { formatKeyboardShortcut as Bp, parseKeyboardShortcut as Gp } from "./ui/components/SideNavbar/utils/parseKeyboardShortcut.js";
+import { useColumnResizing as wp } from "./ui/components/Table/useColumnResizing.js";
+import { useFocusManagement as Yp } from "./ui/components/SideNavbar/hooks/useFocusManagement.js";
+import { useFormFieldArray as zp } from "./ui/components/Form/useFormFieldArray.js";
+import { useGroupState as Up } from "./ui/components/SideNavbar/hooks/useGroupState.js";
+import { useKeyboardShortcut as Qp } from "./ui/components/SideNavbar/hooks/useKeyboardShortcut.js";
+import { useNavLink as Jp } from "./ui/primitives/NavLink/hooks/useNavLink.js";
+import { useResize as $p } from "./ui/components/SideNavbar/hooks/useResize.js";
+import { useResponsiveSidebar as om } from "./ui/components/SideNavbar/hooks/useResponsiveSidebar.js";
+import { useSideNavbarCombined as tm } from "./ui/components/SideNavbar/hooks/useSideNavbar.js";
+import { useSideNavbarContent as fm } from "./ui/components/SideNavbar/hooks/useSideNavbarContent.js";
+import { useSideNavbarNavigation as mm } from "./ui/components/SideNavbar/hooks/useSideNavbarNavigation.js";
+import { useToast as lm } from "./ui/components/Toast/useToast.js";
+import { useVirtualScrolling as sm } from "./ui/components/Table/useVirtualScrolling.js";
+export {
+  at as AMBER,
+  q as Accordion,
+  V as AlertDialog,
+  G as AppProvider,
+  Z as Autocomplete,
+  j as AutocompleteList,
+  X as AutocompleteOption,
+  ee as Avatar,
+  Dt as AvatarGroup,
+  ft as BLUE,
+  c as BRAND_COLORS,
+  Et as BRAND_PRIMARY,
+  yt as BRAND_SECONDARY,
+  R as BREAKPOINT_TOKENS,
+  re as Badge,
+  ae as Breadcrumb,
+  A as BreakpointTokenFactory,
+  pe as Button,
+  It as COLOR_SCALES,
+  pt as CYAN,
+  xe as Card,
+  de as Checkbox,
+  ie as Chip,
+  ne as Collapsible,
+  Se as ColorPicker,
+  Te as CommandPalette,
+  Ht as ConfigProvider,
+  kt as DashboardLayout,
+  ve as DataGrid,
+  Gt as DataTablePattern,
+  ce as DatePicker,
+  wt as DatePickerCalendar,
+  Yt as DatePickerInput,
+  zt as DatePickerProvider,
+  Re as Dialog,
+  Ut as DialogClose,
+  Qt as DialogContent,
+  Jt as DialogContext,
+  oa as DialogDescription,
+  ta as DialogFooter,
+  fa as DialogHeader,
+  ma as DialogProvider,
+  la as DialogTitle,
+  sa as DialogTrigger,
+  Oe as Drawer,
+  he as DrawerContent,
+  ye as DrawerFooter,
+  Ie as DrawerHeader,
+  He as Dropdown,
+  mt as EMERALD,
+  _e as EmptyState,
+  Be as ErrorMessage,
+  d as FONT_FAMILY_TOKENS,
+  s as FONT_WEIGHT_TOKENS,
+  xt as FUCHSIA,
+  Ke as FileUpload,
+  We as Form,
+  ua as FormContext,
+  Ca as FormField,
+  ba as FormProvider,
+  Na as FormWizardPattern,
+  lt as GRAY,
+  dt as GREEN,
+  qe as Header,
+  Pa as HeaderActions,
+  ze as HeaderComponent,
+  Aa as HeaderHamburger,
+  Da as HeaderLogo,
+  Ea as HeaderMobileMenu,
+  Fa as HeaderNavigation,
+  La as HeaderProvider,
+  st as INDIGO,
+  Ue as Info,
+  Qe as Input,
+  it as LIME,
+  Je as Label,
+  $e as LoginBox,
+  oo as Menu,
+  to as MenuContent,
+  fo as MenuItem,
+  mo as MenuSeparator,
+  lo as MenuTrigger,
+  io as Modal,
+  no as MultiSelect,
+  So as NavLink,
+  To as Navbar,
+  _a as NavbarContext,
+  Ka as NavbarGroup,
+  vo as NavbarItem,
+  co as NavbarSeparator,
+  Ro as NavbarToggle,
+  Oo as Navigation,
+  Do as NavigationComponent,
+  ut as ORANGE,
+  nt as PINK,
+  gt as PRIMITIVE_COLORS,
+  St as PURPLE,
+  Eo as PageHeader,
+  yo as PageHeaderComponent,
+  Io as Pagination,
+  Ho as Popover,
+  _o as Progress,
+  Ct as RED,
+  Tt as ROSE,
+  Bo as Radio,
+  Ko as Rating,
+  Wa as SEMANTIC_COLORS,
+  Ya as SEMANTIC_COLORS_DARK,
+  qa as SEMANTIC_COLORS_LIGHT,
+  r as SIDEBAR_TOKENS,
+  bt as SKY,
+  vt as SLATE,
+  f as SPACING_TOKENS,
+  Za as SearchAndFilterPattern,
+  Wo as SearchInput,
+  qo as Select,
+  Vo as Separator,
+  Zo as SideNavbar,
+  jo as SideNavbarBackdrop,
+  ja as SideNavbarConfigContext,
+  of as SideNavbarConfigProvider,
+  tf as SideNavbarProvider,
+  Xo as SideNavbarResizeHandle,
+  er as SideNavbarRoot,
+  ff as SideNavbarStateContext,
+  lf as SideNavbarStateProvider,
+  sf as SideNavbarThemeContext,
+  Cf as SideNavbarThemeProvider,
+  rr as SideNavbarToggle,
+  bf as SideNavbarToggleContext,
+  ar as Sidebar,
+  pr as SidebarContent,
+  Pf as SidebarContext,
+  xr as SidebarFooter,
+  dr as SidebarGroup,
+  ir as SidebarHeader,
+  Df as SidebarSlot,
+  Ef as SidebarSlotContent,
+  Ff as SidebarSlotContext,
+  Mf as SidebarSlotProvider,
+  nr as Skeleton,
+  Sr as Slider,
+  p as SpacingTokenFactory,
+  Tr as Spinner,
+  kf as Stat,
+  Gf as StatGroup,
+  vr as Stepper,
+  cr as Switch,
+  Nt as TEAL,
+  i as TYPOGRAPHY_TOKENS,
+  Rr as Table,
+  Or as TableActions,
+  hr as TableBody,
+  yr as TableCell,
+  wf as TableContext,
+  Ir as TableEmptyState,
+  Hr as TableFilters,
+  _r as TableHeader,
+  Br as TableHeaderCell,
+  Kr as TableHeaderRow,
+  Wr as TablePagination,
+  zf as TableProvider,
+  qr as TableRow,
+  Vr as Tabs,
+  Uf as TabsContent,
+  Qf as TabsContext,
+  $f as TabsList,
+  op as TabsProvider,
+  tp as TabsTrigger,
+  Zr as Text,
+  jr as Textarea,
+  fp as ThemeProvider,
+  Xr as TimePicker,
+  et as Timeline,
+  xp as Toast,
+  dp as ToastContainer,
+  ip as ToastContext,
+  Sp as ToastProvider,
+  rt as Tooltip,
+  u as TypographyTokenFactory,
+  ct as VIOLET,
+  Pt as YELLOW,
+  Tp as blendColors,
+  Ip as clampWidth,
+  _p as cn,
+  bp as darken,
+  Ja as defaultConfigValues,
+  uf as defaultThemeValues,
+  Bp as formatKeyboardShortcut,
+  E as getAnimation,
+  y as getAnimationClass,
+  O as getBreakpoint,
+  vp as getColor,
+  Np as getColorClass,
+  cp as getContrastColor,
+  Pp as getFocusColorClass,
+  Rp as getFocusRingClass,
+  Ap as getHoverColorClass,
+  D as getMediaQuery,
+  t as getNestedIndentClass,
+  _ as getOpacity,
+  k as getOpacityClass,
+  Rt as getPrimitiveColor,
+  At as getPrimitiveColorPalette,
+  za as getSemanticColor,
+  Op as getSemanticColorClass,
+  Va as getSemanticColorRole,
+  Dp as getSemanticColorValue,
+  m as getSpacing,
+  x as getSpacingClass,
+  F as getTransitionClass,
+  n as getTypography,
+  g as getTypographyClasses,
+  S as getTypographyLineHeight,
+  C as getTypographySize,
+  T as getTypographySizeFromFontSize,
+  b as getTypographyWeight,
+  v as getTypographyWeightFromFontWeight,
+  L as getZIndex,
+  H as getZIndexClass,
+  hp as isLightColor,
+  Ep as lighten,
+  Gp as parseKeyboardShortcut,
+  Lp as parseWidthToPixels,
+  K as useApp,
+  wp as useColumnResizing,
+  Mt as useConfig,
+  Xt as useDialogContext,
+  $t as useDialogContextOptional,
+  Yp as useFocusManagement,
+  na as useFormContext,
+  ga as useFormContextOptional,
+  zp as useFormFieldArray,
+  Up as useGroupState,
+  Ha as useHeaderContext,
+  Qp as useKeyboardShortcut,
+  Jp as useNavLink,
+  ka as useNavbar,
+  Ba as useNavbarRequired,
+  $p as useResize,
+  om as useResponsiveSidebar,
+  W as useScrollSpy,
+  tm as useSideNavbarCombined,
+  Xa as useSideNavbarConfig,
+  $a as useSideNavbarConfigRequired,
+  fm as useSideNavbarContent,
+  mm as useSideNavbarNavigation,
+  pf as useSideNavbarState,
+  mf as useSideNavbarStateRequired,
+  nf as useSideNavbarTheme,
+  gf as useSideNavbarThemeRequired,
+  vf as useSideNavbarToggleContext,
+  Nf as useSideNavbarToggleContextRequired,
+  Rf as useSidebar,
+  Af as useSidebarRequired,
+  If as useSidebarSlot,
+  Lf as useSidebarSlotRequired,
+  Wf as useTableContext,
+  Yf as useTableContextOptional,
+  jf as useTabsContext,
+  Jf as useTabsContextOptional,
+  pp as useTheme,
+  lm as useToast,
+  up as useToastContext,
+  np as useToastContextOptional,
+  sm as useVirtualScrolling,
+  Hp as validateWidthBounds,
+  yp as withOpacity
+};
+//# sourceMappingURL=index.js.map

package/dist/granular/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/granular/ui/components/Accordion/Accordion.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { ChevronDown as v } from "lucide-react";
+import { getSpacingClass as o } from "../../tokens/spacing.js";
+import { getAnimationClass as l } from "../../tokens/animations.js";
+import { getTypographyClasses as x } from "../../tokens/typography.js";
+import { getRadiusClass as N } from "../../tokens/radius.js";
+import { cn as t } from "../../utils/cn.js";
+function k({
+  items: f,
+  type: p = "single",
+  defaultOpen: a,
+  onValueChange: c,
+  className: u = ""
+}) {
+  const g = () => a === void 0 ? [] : Array.isArray(a) ? a : [a], [n, b] = h(g), y = (s) => {
+    var e;
+    if ((e = f.find((d) => d.id === s)) != null && e.disabled) return;
+    let r;
+    p === "single" ? r = n.includes(s) ? [] : [s] : r = n.includes(s) ? n.filter((d) => d !== s) : [...n, s], b(r), c == null || c(p === "single" ? r[0] || "" : r);
+  };
+  return /* @__PURE__ */ i("div", { className: `${o("xs", "space-y")} ${u}`, children: f.map((s) => {
+    const r = n.includes(s.id), e = s.disabled;
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        className: t(
+          "border border-line-default",
+          N("md"),
+          "overflow-hidden",
+          s.className
+        ),
+        children: [
+          /* @__PURE__ */ m(
+            "button",
+            {
+              type: "button",
+              onClick: () => y(s.id),
+              disabled: e,
+              className: t(
+                "w-full flex items-center justify-between",
+                o("base", "px"),
+                o("md", "py"),
+                x("label"),
+                "text-left text-fg-primary bg-surface-base hover:bg-surface-hover",
+                "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-line-focus",
+                l("base"),
+                e ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+                s.triggerClassName
+              ),
+              "aria-expanded": r,
+              "aria-controls": `accordion-content-${s.id}`,
+              "aria-disabled": e,
+              children: [
+                /* @__PURE__ */ i("span", { children: s.title }),
+                /* @__PURE__ */ i(
+                  v,
+                  {
+                    className: `
+                  ${o("sm", "ml")}
+                  ${l("base")}
+                  ${r ? "transform rotate-180" : ""}
+                  ${e ? "opacity-50" : ""}
+                `,
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ i(
+            "div",
+            {
+              id: `accordion-content-${s.id}`,
+              className: t(
+                "grid",
+                l("base"),
+                r ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+              ),
+              "aria-hidden": !r,
+              children: /* @__PURE__ */ i("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ i(
+                "div",
+                {
+                  className: t(
+                    o("base", "px"),
+                    o("md", "py"),
+                    "text-fg-secondary",
+                    s.contentClassName
+                  ),
+                  children: s.content
+                }
+              ) })
+            }
+          )
+        ]
+      },
+      s.id
+    );
+  }) });
+}
+export {
+  k as default
+};
+//# sourceMappingURL=Accordion.js.map

package/dist/granular/ui/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../../../../src/ui/components/Accordion/Accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getAnimationClass } from \"../../tokens/animations\";\nimport { getTypographyClasses } from \"../../tokens/typography\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { cn } from \"../../utils/cn\";\n\nexport type AccordionType = \"single\" | \"multiple\";\n\nexport interface AccordionItem {\n  id: string;\n  title: string;\n  content: ReactNode;\n  disabled?: boolean;\n  /** Extra classes for the item wrapper (the bordered card). Merged after the defaults, so conflicting Tailwind classes win. */\n  className?: string;\n  /** Extra classes for the header button — overrides the default `label` typography (e.g. `font-semibold text-base`). */\n  triggerClassName?: string;\n  /** Extra classes for the content padding wrapper inside the panel. */\n  contentClassName?: string;\n}\n\nexport interface AccordionProps {\n  items: AccordionItem[];\n  type?: AccordionType;\n  defaultOpen?: string | string[];\n  onValueChange?: (value: string | string[]) => void;\n  className?: string;\n}\n\n/**\n * Accordion Component\n *\n * A collapsible content component that can display multiple items.\n * Supports single and multiple selection modes.\n *\n * Open panels animate via `grid-template-rows: 0fr → 1fr`, so content of\n * any height expands fully — there is no max-height clamp (issue #202).\n *\n * @example\n * ```tsx\n * <Accordion\n *   type=\"single\"\n *   items={[\n *     { id: '1', title: 'Item 1', content: 'Content 1' },\n *     { id: '2', title: 'Item 2', content: 'Content 2' },\n *   ]}\n * />\n * ```\n */\nexport default function Accordion({\n  items,\n  type = \"single\",\n  defaultOpen,\n  onValueChange,\n  className = \"\",\n}: AccordionProps) {\n  const getInitialOpen = (): string[] => {\n    if (defaultOpen === undefined) return [];\n    return Array.isArray(defaultOpen) ? defaultOpen : [defaultOpen];\n  };\n\n  const [openItems, setOpenItems] = useState<string[]>(getInitialOpen);\n\n  const handleToggle = (itemId: string) => {\n    if (items.find((item) => item.id === itemId)?.disabled) return;\n\n    let newOpenItems: string[];\n\n    if (type === \"single\") {\n      newOpenItems = openItems.includes(itemId) ? [] : [itemId];\n    } else {\n      newOpenItems = openItems.includes(itemId)\n        ? openItems.filter((id) => id !== itemId)\n        : [...openItems, itemId];\n    }\n\n    setOpenItems(newOpenItems);\n    onValueChange?.(type === \"single\" ? newOpenItems[0] || \"\" : newOpenItems);\n  };\n\n  return (\n    <div className={`${getSpacingClass(\"xs\", \"space-y\")} ${className}`}>\n      {items.map((item) => {\n        const isOpen = openItems.includes(item.id);\n        const isDisabled = item.disabled;\n\n        return (\n          <div\n            key={item.id}\n            className={cn(\n              \"border border-line-default\",\n              getRadiusClass(\"md\"),\n              \"overflow-hidden\",\n              item.className,\n            )}\n          >\n            <button\n              type=\"button\"\n              onClick={() => handleToggle(item.id)}\n              disabled={isDisabled}\n              className={cn(\n                \"w-full flex items-center justify-between\",\n                getSpacingClass(\"base\", \"px\"),\n                getSpacingClass(\"md\", \"py\"),\n                getTypographyClasses(\"label\"),\n                \"text-left text-fg-primary bg-surface-base hover:bg-surface-hover\",\n                \"focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-line-focus\",\n                getAnimationClass(\"base\"),\n                isDisabled ? \"opacity-50 cursor-not-allowed\" : \"cursor-pointer\",\n                item.triggerClassName,\n              )}\n              aria-expanded={isOpen}\n              aria-controls={`accordion-content-${item.id}`}\n              aria-disabled={isDisabled}\n            >\n              <span>{item.title}</span>\n              <ChevronDown\n                className={`\n                  ${getSpacingClass(\"sm\", \"ml\")}\n                  ${getAnimationClass(\"base\")}\n                  ${isOpen ? \"transform rotate-180\" : \"\"}\n                  ${isDisabled ? \"opacity-50\" : \"\"}\n                `}\n                aria-hidden=\"true\"\n              />\n            </button>\n            {/* grid-rows 0fr→1fr animates open/close at any content height\n                (no max-height clamp — issue #202). The inner min-h-0 +\n                overflow-hidden row is what lets the fraction collapse. */}\n            <div\n              id={`accordion-content-${item.id}`}\n              className={cn(\n                \"grid\",\n                getAnimationClass(\"base\"),\n                isOpen\n                  ? \"grid-rows-[1fr] opacity-100\"\n                  : \"grid-rows-[0fr] opacity-0\",\n              )}\n              aria-hidden={!isOpen}\n            >\n              <div className=\"min-h-0 overflow-hidden\">\n                <div\n                  className={cn(\n                    getSpacingClass(\"base\", \"px\"),\n                    getSpacingClass(\"md\", \"py\"),\n                    \"text-fg-secondary\",\n                    item.contentClassName,\n                  )}\n                >\n                  {item.content}\n                </div>\n              </div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["Accordion","items","type","defaultOpen","onValueChange","className","getInitialOpen","openItems","setOpenItems","useState","handleToggle","itemId","_a","item","newOpenItems","id","jsx","getSpacingClass","isOpen","isDisabled","jsxs","cn","getRadiusClass","getTypographyClasses","getAnimationClass","ChevronDown"],"mappings":"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"}