@fabio.caffarello/react-design-system 3.8.0 → 3.10.0

package/README.md

@@ -119,6 +119,7 @@ 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 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.
@@ -142,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` and `./hooks` 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.
+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,447 @@
+"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 s, FONT_WEIGHT_TOKENS as d, 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 h } 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 se } 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 De } 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 { FilterChips as We } from "./ui/components/FilterChips/FilterChips.js";
+import { default as qe } from "./ui/components/Form/Form.js";
+import { Header as Ve, Header as Ue } from "./ui/components/Header/Header.js";
+import { default as Qe } from "./ui/primitives/Info/Info.js";
+import { default as Je } from "./ui/primitives/Input/Input.js";
+import { default as $e } from "./ui/primitives/Label/Label.js";
+import { default as oo } from "./ui/components/LoginBox/LoginBox.js";
+import { default as to } from "./ui/components/Menu/Menu.js";
+import { default as fo } from "./ui/components/Menu/MenuContent.js";
+import { default as mo } from "./ui/components/Menu/MenuItem.js";
+import { default as lo } from "./ui/components/Menu/MenuSeparator.js";
+import { default as io } from "./ui/components/Menu/MenuTrigger.js";
+import { default as no } from "./ui/components/Modal/Modal.js";
+import { default as So } from "./ui/components/MultiSelect/MultiSelect.js";
+import { NavLink as To } from "./ui/primitives/NavLink/NavLink.js";
+import { default as vo } from "./ui/components/SideNavbar/components/Navbar/Navbar.js";
+import { default as co } from "./ui/components/SideNavbar/components/Navbar/NavbarItem.js";
+import { default as Ro } from "./ui/components/SideNavbar/components/Navbar/NavbarSeparator.js";
+import { default as Oo } from "./ui/components/SideNavbar/components/Navbar/NavbarToggle.js";
+import { Navigation as Do, Navigation as Eo } from "./ui/components/Navigation/Navigation.js";
+import { PageHeader as Fo, PageHeader as Io } from "./ui/components/PageHeader/PageHeader.js";
+import { default as Ho } from "./ui/components/Pagination/Pagination.js";
+import { default as _o } from "./ui/components/Popover/Popover.js";
+import { default as Bo } from "./ui/primitives/Progress/Progress.js";
+import { default as Ko } from "./ui/primitives/Radio/Radio.js";
+import { default as Wo } from "./ui/components/Rating/Rating.js";
+import { default as qo } from "./ui/components/SearchInput/SearchInput.js";
+import { default as Vo } from "./ui/primitives/Select/Select.js";
+import { default as Zo } from "./ui/primitives/Separator/Separator.js";
+import { default as jo } from "./ui/components/SideNavbar/SideNavbar.js";
+import { default as Xo } from "./ui/components/SideNavbar/components/SideNavbarBackdrop.js";
+import { default as er } from "./ui/components/SideNavbar/components/SideNavbarResizeHandle.js";
+import { default as rr } from "./ui/components/SideNavbar/components/SideNavbarRoot.js";
+import { default as ar } from "./ui/components/SideNavbar/components/SideNavbarToggle.js";
+import { default as pr } from "./ui/components/SideNavbar/components/Sidebar/Sidebar.js";
+import { default as xr } from "./ui/components/SideNavbar/components/Sidebar/SidebarContent.js";
+import { default as sr } from "./ui/components/SideNavbar/components/Sidebar/SidebarFooter.js";
+import { default as ir } from "./ui/components/SideNavbar/components/Sidebar/SidebarGroup.js";
+import { default as nr } from "./ui/components/SideNavbar/components/Sidebar/SidebarHeader.js";
+import { default as Sr } from "./ui/primitives/Skeleton/Skeleton.js";
+import { default as Tr } from "./ui/primitives/Slider/Slider.js";
+import { default as vr } from "./ui/primitives/Spinner/Spinner.js";
+import { default as cr } from "./ui/components/Stepper/Stepper.js";
+import { default as Rr } from "./ui/primitives/Switch/Switch.js";
+import { default as Or } from "./ui/components/Table/Table.js";
+import { default as Dr } from "./ui/components/Table/TableActions.js";
+import { default as yr } from "./ui/components/Table/TableBody.js";
+import { default as Ir } from "./ui/components/Table/TableCell.js";
+import { default as Hr } from "./ui/components/Table/TableEmptyState.js";
+import { default as _r } from "./ui/components/Table/TableFilters.js";
+import { default as Br } from "./ui/components/Table/TableHeader.js";
+import { default as Kr } from "./ui/components/Table/TableHeaderCell.js";
+import { default as Wr } from "./ui/components/Table/TableHeaderRow.js";
+import { default as qr } from "./ui/components/Table/TablePagination.js";
+import { default as Vr } from "./ui/components/Table/TableRow.js";
+import { default as Zr } from "./ui/components/Tabs/Tabs.js";
+import { default as jr } from "./ui/primitives/Text/Text.js";
+import { default as Xr } from "./ui/primitives/Textarea/Textarea.js";
+import { default as et } from "./ui/components/TimePicker/TimePicker.js";
+import { default as rt } from "./ui/components/Timeline/Timeline.js";
+import { default as at } from "./ui/primitives/Tooltip/Tooltip.js";
+import { AMBER as pt, BLUE as mt, CYAN as xt, EMERALD as lt, FUCHSIA as st, GRAY as dt, GREEN as it, INDIGO as ut, LIME as nt, ORANGE as gt, PINK as St, PRIMITIVE_COLORS as Ct, PURPLE as Tt, RED as bt, ROSE as vt, SKY as Nt, SLATE as ct, TEAL as Pt, VIOLET as Rt, YELLOW as At, getPrimitiveColor as Ot, getPrimitiveColorPalette as ht } from "./ui/tokens/colors/primitives.js";
+import { AvatarGroup as Et } from "./ui/primitives/Avatar/AvatarGroup.js";
+import { BRAND_PRIMARY as Ft, BRAND_SECONDARY as It } from "./ui/tokens/colors/brand.js";
+import { COLOR_SCALES as Ht } from "./ui/tokens/colors/types.js";
+import { ConfigProvider as _t, useConfig as kt } from "./ui/providers/ConfigProvider.js";
+import { DashboardLayout as Gt } from "./ui/components/DashboardLayout/DashboardLayout.js";
+import { DataTablePattern as wt } from "./ui/components/DataTablePattern/DataTablePattern.js";
+import { DatePickerCalendar as Yt } from "./ui/components/DatePicker/DatePickerCalendar.js";
+import { DatePickerInput as zt } from "./ui/components/DatePicker/DatePickerInput.js";
+import { DatePickerProvider as Ut } from "./ui/components/DatePicker/DatePickerProvider.js";
+import { DialogClose as Qt } from "./ui/components/Dialog/DialogClose.js";
+import { DialogContent as Jt } from "./ui/components/Dialog/DialogContent.js";
+import { DialogContext as $t, useDialogContext as ea, useDialogContextOptional as oa } from "./ui/providers/DialogContext.js";
+import { DialogDescription as ta } from "./ui/components/Dialog/DialogDescription.js";
+import { DialogFooter as fa } from "./ui/components/Dialog/DialogFooter.js";
+import { DialogHeader as ma } from "./ui/components/Dialog/DialogHeader.js";
+import { DialogProvider as la } from "./ui/providers/DialogProvider.js";
+import { DialogTitle as da } from "./ui/components/Dialog/DialogTitle.js";
+import { DialogTrigger as ua } from "./ui/components/Dialog/DialogTrigger.js";
+import { FormContext as ga, useFormContext as Sa, useFormContextOptional as Ca } from "./ui/components/Form/FormContext.js";
+import { FormField as ba } from "./ui/components/Form/FormField.js";
+import { FormProvider as Na } from "./ui/components/Form/FormProvider.js";
+import { FormWizardPattern as Pa } from "./ui/components/FormWizardPattern/FormWizardPattern.js";
+import { HeaderActions as Aa } from "./ui/components/Header/components/HeaderActions.js";
+import { HeaderHamburger as ha } from "./ui/components/Header/components/HeaderHamburger.js";
+import { HeaderLogo as Ea } from "./ui/components/Header/components/HeaderLogo.js";
+import { HeaderMobileMenu as Fa } from "./ui/components/Header/components/HeaderMobileMenu.js";
+import { HeaderNavigation as La } from "./ui/components/Header/components/HeaderNavigation.js";
+import { HeaderProvider as Ma, useHeaderContext as _a } from "./ui/components/Header/contexts/HeaderContext.js";
+import { NavbarContext as Ba, useNavbar as Ga, useNavbarRequired as Ka } from "./ui/components/SideNavbar/contexts/NavbarContext.js";
+import { NavbarGroup as Wa } from "./ui/components/SideNavbar/components/Navbar/NavbarGroup.js";
+import { SEMANTIC_COLORS as qa, SEMANTIC_COLORS_DARK as za, SEMANTIC_COLORS_LIGHT as Va, getSemanticColor as Ua, getSemanticColorRole as Za } from "./ui/tokens/colors/semantic.js";
+import { SearchAndFilterPattern as ja } from "./ui/components/SearchAndFilterPattern/SearchAndFilterPattern.js";
+import { SideNavbarConfigContext as Xa, defaultConfigValues as $a, useSideNavbarConfig as ef, useSideNavbarConfigRequired as of } from "./ui/components/SideNavbar/contexts/SideNavbarConfigContext.js";
+import { SideNavbarConfigProvider as tf } from "./ui/components/SideNavbar/providers/SideNavbarConfigProvider.js";
+import { SideNavbarProvider as ff } from "./ui/components/SideNavbar/providers/SideNavbarProvider.js";
+import { SideNavbarStateContext as mf, useSideNavbarState as xf, useSideNavbarStateRequired as lf } from "./ui/components/SideNavbar/contexts/SideNavbarStateContext.js";
+import { SideNavbarStateProvider as df } from "./ui/components/SideNavbar/providers/SideNavbarStateProvider.js";
+import { SideNavbarThemeContext as nf, defaultThemeValues as gf, useSideNavbarTheme as Sf, useSideNavbarThemeRequired as Cf } from "./ui/components/SideNavbar/contexts/SideNavbarThemeContext.js";
+import { SideNavbarThemeProvider as bf } from "./ui/components/SideNavbar/providers/SideNavbarThemeProvider.js";
+import { SideNavbarToggleContext as Nf, useSideNavbarToggleContext as cf, useSideNavbarToggleContextRequired as Pf } from "./ui/components/SideNavbar/contexts/SideNavbarToggleContext.js";
+import { SidebarContext as Af, useSidebar as Of, useSidebarRequired as hf } from "./ui/components/SideNavbar/contexts/SidebarContext.js";
+import { SidebarSlot as Ef } from "./ui/components/SideNavbar/components/Sidebar/SidebarSlot.js";
+import { SidebarSlotContent as Ff } from "./ui/components/SideNavbar/components/Sidebar/SidebarSlotContent.js";
+import { SidebarSlotContext as Lf, useSidebarSlot as Hf, useSidebarSlotRequired as Mf } from "./ui/components/SideNavbar/contexts/SidebarSlotContext.js";
+import { SidebarSlotProvider as kf } from "./ui/components/SideNavbar/providers/SidebarSlotProvider.js";
+import { Stat as Gf } from "./ui/components/Stat/Stat.js";
+import { StatGroup as wf } from "./ui/components/Stat/StatGroup.js";
+import { TableContext as Yf, useTableContext as qf, useTableContextOptional as zf } from "./ui/components/Table/TableContext.js";
+import { TableProvider as Uf } from "./ui/components/Table/TableProvider.js";
+import { TabsContent as Qf } from "./ui/components/Tabs/TabsContent.js";
+import { TabsContext as Jf, useTabsContext as Xf, useTabsContextOptional as $f } from "./ui/components/Tabs/TabsContext.js";
+import { TabsList as op } from "./ui/components/Tabs/TabsList.js";
+import { TabsProvider as tp } from "./ui/components/Tabs/TabsProvider.js";
+import { TabsTrigger as fp } from "./ui/components/Tabs/TabsTrigger.js";
+import { ThemeProvider as mp, useTheme as xp } from "./ui/providers/ThemeProvider.js";
+import { Toast as sp } from "./ui/components/Toast/Toast.js";
+import { ToastContainer as ip } from "./ui/components/Toast/ToastContainer.js";
+import { ToastContext as np, useToastContext as gp, useToastContextOptional as Sp } from "./ui/providers/ToastContext.js";
+import { ToastProvider as Tp } from "./ui/providers/ToastProvider.js";
+import { blendColors as vp, darken as Np, getColor as cp, getColorClass as Pp, getContrastColor as Rp, getFocusColorClass as Ap, getFocusRingClass as Op, getHoverColorClass as hp, getSemanticColorClass as Dp, getSemanticColorValue as Ep, isLightColor as yp, lighten as Fp, withOpacity as Ip } from "./ui/tokens/colors/utils.js";
+import { clampWidth as Hp, parseWidthToPixels as Mp, validateWidthBounds as _p } from "./ui/components/SideNavbar/utils/parseWidth.js";
+import { cn as Bp } from "./ui/utils/cn.js";
+import { formatKeyboardShortcut as Kp, parseKeyboardShortcut as wp } from "./ui/components/SideNavbar/utils/parseKeyboardShortcut.js";
+import { useColumnResizing as Yp } from "./ui/components/Table/useColumnResizing.js";
+import { useFocusManagement as zp } from "./ui/components/SideNavbar/hooks/useFocusManagement.js";
+import { useFormFieldArray as Up } from "./ui/components/Form/useFormFieldArray.js";
+import { useGroupState as Qp } from "./ui/components/SideNavbar/hooks/useGroupState.js";
+import { useKeyboardShortcut as Jp } from "./ui/components/SideNavbar/hooks/useKeyboardShortcut.js";
+import { useNavLink as $p } from "./ui/primitives/NavLink/hooks/useNavLink.js";
+import { useResize as om } from "./ui/components/SideNavbar/hooks/useResize.js";
+import { useResponsiveSidebar as tm } from "./ui/components/SideNavbar/hooks/useResponsiveSidebar.js";
+import { useSideNavbarCombined as fm } from "./ui/components/SideNavbar/hooks/useSideNavbar.js";
+import { useSideNavbarContent as mm } from "./ui/components/SideNavbar/hooks/useSideNavbarContent.js";
+import { useSideNavbarNavigation as lm } from "./ui/components/SideNavbar/hooks/useSideNavbarNavigation.js";
+import { useToast as dm } from "./ui/components/Toast/useToast.js";
+import { useVirtualScrolling as um } from "./ui/components/Table/useVirtualScrolling.js";
+export {
+  pt as AMBER,
+  q as Accordion,
+  V as AlertDialog,
+  G as AppProvider,
+  Z as Autocomplete,
+  j as AutocompleteList,
+  X as AutocompleteOption,
+  ee as Avatar,
+  Et as AvatarGroup,
+  mt as BLUE,
+  c as BRAND_COLORS,
+  Ft as BRAND_PRIMARY,
+  It as BRAND_SECONDARY,
+  R as BREAKPOINT_TOKENS,
+  re as Badge,
+  ae as Breadcrumb,
+  A as BreakpointTokenFactory,
+  pe as Button,
+  Ht as COLOR_SCALES,
+  xt as CYAN,
+  xe as Card,
+  se as Checkbox,
+  ie as Chip,
+  ne as Collapsible,
+  Se as ColorPicker,
+  Te as CommandPalette,
+  _t as ConfigProvider,
+  Gt as DashboardLayout,
+  ve as DataGrid,
+  wt as DataTablePattern,
+  ce as DatePicker,
+  Yt as DatePickerCalendar,
+  zt as DatePickerInput,
+  Ut as DatePickerProvider,
+  Re as Dialog,
+  Qt as DialogClose,
+  Jt as DialogContent,
+  $t as DialogContext,
+  ta as DialogDescription,
+  fa as DialogFooter,
+  ma as DialogHeader,
+  la as DialogProvider,
+  da as DialogTitle,
+  ua as DialogTrigger,
+  Oe as Drawer,
+  De as DrawerContent,
+  ye as DrawerFooter,
+  Ie as DrawerHeader,
+  He as Dropdown,
+  lt as EMERALD,
+  _e as EmptyState,
+  Be as ErrorMessage,
+  s as FONT_FAMILY_TOKENS,
+  d as FONT_WEIGHT_TOKENS,
+  st as FUCHSIA,
+  Ke as FileUpload,
+  We as FilterChips,
+  qe as Form,
+  ga as FormContext,
+  ba as FormField,
+  Na as FormProvider,
+  Pa as FormWizardPattern,
+  dt as GRAY,
+  it as GREEN,
+  Ve as Header,
+  Aa as HeaderActions,
+  Ue as HeaderComponent,
+  ha as HeaderHamburger,
+  Ea as HeaderLogo,
+  Fa as HeaderMobileMenu,
+  La as HeaderNavigation,
+  Ma as HeaderProvider,
+  ut as INDIGO,
+  Qe as Info,
+  Je as Input,
+  nt as LIME,
+  $e as Label,
+  oo as LoginBox,
+  to as Menu,
+  fo as MenuContent,
+  mo as MenuItem,
+  lo as MenuSeparator,
+  io as MenuTrigger,
+  no as Modal,
+  So as MultiSelect,
+  To as NavLink,
+  vo as Navbar,
+  Ba as NavbarContext,
+  Wa as NavbarGroup,
+  co as NavbarItem,
+  Ro as NavbarSeparator,
+  Oo as NavbarToggle,
+  Do as Navigation,
+  Eo as NavigationComponent,
+  gt as ORANGE,
+  St as PINK,
+  Ct as PRIMITIVE_COLORS,
+  Tt as PURPLE,
+  Fo as PageHeader,
+  Io as PageHeaderComponent,
+  Ho as Pagination,
+  _o as Popover,
+  Bo as Progress,
+  bt as RED,
+  vt as ROSE,
+  Ko as Radio,
+  Wo as Rating,
+  qa as SEMANTIC_COLORS,
+  za as SEMANTIC_COLORS_DARK,
+  Va as SEMANTIC_COLORS_LIGHT,
+  r as SIDEBAR_TOKENS,
+  Nt as SKY,
+  ct as SLATE,
+  f as SPACING_TOKENS,
+  ja as SearchAndFilterPattern,
+  qo as SearchInput,
+  Vo as Select,
+  Zo as Separator,
+  jo as SideNavbar,
+  Xo as SideNavbarBackdrop,
+  Xa as SideNavbarConfigContext,
+  tf as SideNavbarConfigProvider,
+  ff as SideNavbarProvider,
+  er as SideNavbarResizeHandle,
+  rr as SideNavbarRoot,
+  mf as SideNavbarStateContext,
+  df as SideNavbarStateProvider,
+  nf as SideNavbarThemeContext,
+  bf as SideNavbarThemeProvider,
+  ar as SideNavbarToggle,
+  Nf as SideNavbarToggleContext,
+  pr as Sidebar,
+  xr as SidebarContent,
+  Af as SidebarContext,
+  sr as SidebarFooter,
+  ir as SidebarGroup,
+  nr as SidebarHeader,
+  Ef as SidebarSlot,
+  Ff as SidebarSlotContent,
+  Lf as SidebarSlotContext,
+  kf as SidebarSlotProvider,
+  Sr as Skeleton,
+  Tr as Slider,
+  p as SpacingTokenFactory,
+  vr as Spinner,
+  Gf as Stat,
+  wf as StatGroup,
+  cr as Stepper,
+  Rr as Switch,
+  Pt as TEAL,
+  i as TYPOGRAPHY_TOKENS,
+  Or as Table,
+  Dr as TableActions,
+  yr as TableBody,
+  Ir as TableCell,
+  Yf as TableContext,
+  Hr as TableEmptyState,
+  _r as TableFilters,
+  Br as TableHeader,
+  Kr as TableHeaderCell,
+  Wr as TableHeaderRow,
+  qr as TablePagination,
+  Uf as TableProvider,
+  Vr as TableRow,
+  Zr as Tabs,
+  Qf as TabsContent,
+  Jf as TabsContext,
+  op as TabsList,
+  tp as TabsProvider,
+  fp as TabsTrigger,
+  jr as Text,
+  Xr as Textarea,
+  mp as ThemeProvider,
+  et as TimePicker,
+  rt as Timeline,
+  sp as Toast,
+  ip as ToastContainer,
+  np as ToastContext,
+  Tp as ToastProvider,
+  at as Tooltip,
+  u as TypographyTokenFactory,
+  Rt as VIOLET,
+  At as YELLOW,
+  vp as blendColors,
+  Hp as clampWidth,
+  Bp as cn,
+  Np as darken,
+  $a as defaultConfigValues,
+  gf as defaultThemeValues,
+  Kp as formatKeyboardShortcut,
+  E as getAnimation,
+  y as getAnimationClass,
+  O as getBreakpoint,
+  cp as getColor,
+  Pp as getColorClass,
+  Rp as getContrastColor,
+  Ap as getFocusColorClass,
+  Op as getFocusRingClass,
+  hp as getHoverColorClass,
+  h as getMediaQuery,
+  t as getNestedIndentClass,
+  _ as getOpacity,
+  k as getOpacityClass,
+  Ot as getPrimitiveColor,
+  ht as getPrimitiveColorPalette,
+  Ua as getSemanticColor,
+  Dp as getSemanticColorClass,
+  Za as getSemanticColorRole,
+  Ep 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,
+  yp as isLightColor,
+  Fp as lighten,
+  wp as parseKeyboardShortcut,
+  Mp as parseWidthToPixels,
+  K as useApp,
+  Yp as useColumnResizing,
+  kt as useConfig,
+  ea as useDialogContext,
+  oa as useDialogContextOptional,
+  zp as useFocusManagement,
+  Sa as useFormContext,
+  Ca as useFormContextOptional,
+  Up as useFormFieldArray,
+  Qp as useGroupState,
+  _a as useHeaderContext,
+  Jp as useKeyboardShortcut,
+  $p as useNavLink,
+  Ga as useNavbar,
+  Ka as useNavbarRequired,
+  om as useResize,
+  tm as useResponsiveSidebar,
+  W as useScrollSpy,
+  fm as useSideNavbarCombined,
+  ef as useSideNavbarConfig,
+  of as useSideNavbarConfigRequired,
+  mm as useSideNavbarContent,
+  lm as useSideNavbarNavigation,
+  xf as useSideNavbarState,
+  lf as useSideNavbarStateRequired,
+  Sf as useSideNavbarTheme,
+  Cf as useSideNavbarThemeRequired,
+  cf as useSideNavbarToggleContext,
+  Pf as useSideNavbarToggleContextRequired,
+  Of as useSidebar,
+  hf as useSidebarRequired,
+  Hf as useSidebarSlot,
+  Mf as useSidebarSlotRequired,
+  qf as useTableContext,
+  zf as useTableContextOptional,
+  Xf as useTabsContext,
+  $f as useTabsContextOptional,
+  xp as useTheme,
+  dm as useToast,
+  gp as useToastContext,
+  Sp as useToastContextOptional,
+  um as useVirtualScrolling,
+  _p as validateWidthBounds,
+  Ip 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":";;;;;;;;;AAqDA,SAAwBA,EAAU;AAAA,EAChC,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAmB;AACjB,QAAMC,IAAiB,MACjBH,MAAgB,SAAkB,CAAA,IAC/B,MAAM,QAAQA,CAAW,IAAIA,IAAc,CAACA,CAAW,GAG1D,CAACI,GAAWC,CAAY,IAAIC,EAAmBH,CAAc,GAE7DI,IAAe,CAACC,MAAmB;;AACvC,SAAIC,IAAAX,EAAM,KAAK,CAACY,MAASA,EAAK,OAAOF,CAAM,MAAvC,QAAAC,EAA0C,SAAU;AAExD,QAAIE;AAEJ,IAAIZ,MAAS,WACXY,IAAeP,EAAU,SAASI,CAAM,IAAI,CAAA,IAAK,CAACA,CAAM,IAExDG,IAAeP,EAAU,SAASI,CAAM,IACpCJ,EAAU,OAAO,CAACQ,MAAOA,MAAOJ,CAAM,IACtC,CAAC,GAAGJ,GAAWI,CAAM,GAG3BH,EAAaM,CAAY,GACzBV,KAAA,QAAAA,EAAgBF,MAAS,WAAWY,EAAa,CAAC,KAAK,KAAKA;AAAA,EAC9D;AAEA,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAW,GAAGC,EAAgB,MAAM,SAAS,CAAC,IAAIZ,CAAS,IAC7D,UAAAJ,EAAM,IAAI,CAACY,MAAS;AACnB,UAAMK,IAASX,EAAU,SAASM,EAAK,EAAE,GACnCM,IAAaN,EAAK;AAExB,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWC;AAAA,UACT;AAAA,UACAC,EAAe,IAAI;AAAA,UACnB;AAAA,UACAT,EAAK;AAAA,QAAA;AAAA,QAGP,UAAA;AAAA,UAAA,gBAAAO;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAMV,EAAaG,EAAK,EAAE;AAAA,cACnC,UAAUM;AAAA,cACV,WAAWE;AAAA,gBACT;AAAA,gBACAJ,EAAgB,QAAQ,IAAI;AAAA,gBAC5BA,EAAgB,MAAM,IAAI;AAAA,gBAC1BM,EAAqB,OAAO;AAAA,gBAC5B;AAAA,gBACA;AAAA,gBACAC,EAAkB,MAAM;AAAA,gBACxBL,IAAa,kCAAkC;AAAA,gBAC/CN,EAAK;AAAA,cAAA;AAAA,cAEP,iBAAeK;AAAA,cACf,iBAAe,qBAAqBL,EAAK,EAAE;AAAA,cAC3C,iBAAeM;AAAA,cAEf,UAAA;AAAA,gBAAA,gBAAAH,EAAC,QAAA,EAAM,YAAK,MAAA,CAAM;AAAA,gBAClB,gBAAAA;AAAA,kBAACS;AAAA,kBAAA;AAAA,oBACC,WAAW;AAAA,oBACPR,EAAgB,MAAM,IAAI,CAAC;AAAA,oBAC3BO,EAAkB,MAAM,CAAC;AAAA,oBACzBN,IAAS,yBAAyB,EAAE;AAAA,oBACpCC,IAAa,eAAe,EAAE;AAAA;AAAA,oBAElC,eAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACd;AAAA,YAAA;AAAA,UAAA;AAAA,UAKF,gBAAAH;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,qBAAqBH,EAAK,EAAE;AAAA,cAChC,WAAWQ;AAAA,gBACT;AAAA,gBACAG,EAAkB,MAAM;AAAA,gBACxBN,IACI,gCACA;AAAA,cAAA;AAAA,cAEN,eAAa,CAACA;AAAA,cAEd,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWK;AAAA,oBACTJ,EAAgB,QAAQ,IAAI;AAAA,oBAC5BA,EAAgB,MAAM,IAAI;AAAA,oBAC1B;AAAA,oBACAJ,EAAK;AAAA,kBAAA;AAAA,kBAGN,UAAAA,EAAK;AAAA,gBAAA;AAAA,cAAA,EACR,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAhEKA,EAAK;AAAA,IAAA;AAAA,EAmEhB,CAAC,EAAA,CACH;AAEJ;"}