@optimum-intelligence/opti-ui 0.3.0 → 0.5.0

package/README.md

@@ -4,6 +4,25 @@ Optimum Intelligence's shared React component library. It is built on [Base UI](
 behaviour and accessibility, with a Poppins/Montserrat look: deep purple `#271645`, accent `#63537d`,
 soft tinted borders and rounded controls. Everything is themeable through CSS variables.
 
+## API docs for humans and AI agents
+
+The package ships its own API reference, generated from the source on every build, so it always matches
+the installed version:
+
+| File | Use |
+| --- | --- |
+| `llms.txt` | Short index: setup plus every component with a one-line description. Start here. |
+| `llms-full.txt` | Full reference in markdown: every component and part, props with types, allowed values, defaults and descriptions, examples. |
+| `components.json` | The same data as JSON (`import manifest from '@optimum-intelligence/opti-ui/components.json'`). |
+| `dist/**/*.d.ts` | Exact prop types with JSDoc, shown by editors on hover. |
+
+AI agents: read `node_modules/@optimum-intelligence/opti-ui/llms.txt` before using the library, then look
+up a component in `llms-full.txt`. Do not guess prop names.
+
+Docs come from JSDoc in `src/`. To improve them, document the component (`/** … */` with an optional
+`@example`) and its props, then run `npm run build`; the build fails while an export or prop is
+undocumented. Contributor and agent rules are in `AGENTS.md`.
+
 ## Showcase
 
 ```sh
@@ -53,24 +72,26 @@ so the components work in Next.js App Router.
 
 | Area | Components |
 | --- | --- |
-| Layout | `AppShell`, `Navbar` (+ `NavbarHeader/Brand/Section/SectionLabel/Item/Footer`), `PageHeader`, `Grid`, `Stack`, `Card` (+ parts), `StatCard`, `Separator`, `ScrollArea` |
+| Layout | `AppShell`, `Navbar` (+ `NavbarHeader/Brand/Section/SectionLabel/Item/Group/Footer`), `PageHeader`, `Grid`, `Stack`, `Card` (+ parts), `StatCard`, `Separator`, `ScrollArea` |
 | Actions | `Button`, `IconButton`, `Toggle`, `ToggleGroup`, `SegmentedControl`, `Menu.*`, `ContextMenu.*`, `Toolbar.*` |
 | Forms | `Field.*`, `Fieldset.*`, `Form`, `Input`, `TextField`, `PasswordInput`, `PasswordField`, `Textarea`, `TextareaField`, `Select` (+ parts), `Combobox` (+ parts), `Checkbox`, `CheckboxGroup`, `Radio`, `RadioGroup`, `Switch`, `NumberField`, `Slider`, `SearchInput`, `DatePicker`, `DateTimePicker`, `DateRangePicker`, `Calendar`, `RangeCalendar`, `FileUpload`, `Dropzone`, `FileItem` |
 | Overlays | `Dialog.*` (modal, or a sheet with `placement`), `AlertDialog.*`, `Drawer` (detail side panel), `Popover.*`, `PreviewCard.*`, `Tooltip`, `ToastProvider` + `useToast()`, `CommandPalette` |
 | Disclosure & navigation | `Tabs.*`, `Accordion.*`, `Collapsible.*`, `Breadcrumbs` + `Breadcrumb`, `Pagination`, `Stepper` |
 | Feedback & data | `Alert`, `Badge`, `Tag`, `Avatar`, `AvatarGroup`, `Progress`, `Meter`, `Skeleton`, `SkeletonText`, `Spinner`, `Table` (+ parts), `DataTable`, `EmptyState`, `Heading`, `Text`, `Eyebrow`, `Link` |
-| Theme | `ThemeProvider`, `createTheme`, `themeToStyle`, icons (`CheckIcon`, `ChevronDownIcon`, …) |
+| Theme | `ThemeProvider`, `createTheme`, `themeToStyle`, `DateConfigProvider`, `useDateConfig`, icons (`CheckIcon`, `ChevronDownIcon`, …) |
 
 Components with a common one-line form can be called directly, and their parts are attached for full
 control: `<Select items={…} />` or `<Select.Root>…<Select.Trigger/>…</Select.Root>`; the same applies to
 `Combobox` and `Tooltip`. Compound components (`Dialog`, `Menu`, `Tabs`, …) mirror Base UI's part names,
 so the [Base UI docs](https://base-ui.com/react/overview/quick-start) apply to them directly.
 
-`DatePicker` and `DateTimePicker` use ISO strings as values (`"2026-03-09"`, `"2026-03-09T14:30"`), the
-same format as native date inputs; `DateRangePicker` uses `{ start, end }` with both days inclusive.
-Dates are displayed the same way in every locale, on a 24-hour clock: `2026-03-09 14:30:00` in fields
-(`formatDate`) and `2026. March 9. 14:30` where they are written out (`formatDateLong`); the locale only
-translates month and weekday names.
+Calendar dates are plain ISO strings (`"2026-03-09"`), the same format as native date inputs;
+`DateRangePicker` uses `{ start, end }` with both days inclusive. Date-times are UTC instants
+(`"2026-03-09T13:30:00Z"`), shown and edited in `timeZone` (the browser's by default) and converted back on
+commit. `granularity` (`year` … `second`) picks the grid or time fields and cuts the value to that unit.
+Display is ISO-style on a 24-hour clock (`2026-03-09 14:30`) unless you pass a `format` pattern
+(`"DD.MM.YYYY"`, `"MMMM YYYY"`). `formatDate` formats values the same way outside the pickers, and
+`DateConfigProvider` sets app-wide defaults for locale, time zone, week start and formats.
 
 `DataTable` handles search, filters, sorting, pagination, selection, row actions and inline editing for
 rows held in memory. Columns declare what they take part in:

package/dist/components/accordion/Accordion.d.ts

@@ -8,6 +8,18 @@ declare function AccordionItem({ className, ref, ...props }: BaseAccordion.Item.
 /** Header + trigger + chevron in one. */
 declare function AccordionTrigger({ className, children, ref, ...props }: BaseAccordion.Trigger.Props): import("react").JSX.Element;
 declare function AccordionPanel({ className, children, ref, ...props }: BaseAccordion.Panel.Props): import("react").JSX.Element;
+/**
+ * Expandable sections. Compose `Accordion.Root` › `Accordion.Item` (give each a `value`) ›
+ * `Accordion.Trigger` + `Accordion.Panel`. Pass `multiple` to `Root` to allow several open at once.
+ *
+ * @example
+ * <Accordion.Root defaultValue={['a']}>
+ *   <Accordion.Item value="a">
+ *     <Accordion.Trigger>Billing</Accordion.Trigger>
+ *     <Accordion.Panel>…</Accordion.Panel>
+ *   </Accordion.Item>
+ * </Accordion.Root>
+ */
 export declare const Accordion: {
     Root: typeof AccordionRoot;
     Item: typeof AccordionItem;

package/dist/components/accordion/Accordion.js

@@ -192,6 +192,18 @@ function AccordionPanel(t0) {
 	} else t3 = $[13];
 	return t3;
 }
+/**
+* Expandable sections. Compose `Accordion.Root` › `Accordion.Item` (give each a `value`) ›
+* `Accordion.Trigger` + `Accordion.Panel`. Pass `multiple` to `Root` to allow several open at once.
+*
+* @example
+* <Accordion.Root defaultValue={['a']}>
+*   <Accordion.Item value="a">
+*     <Accordion.Trigger>Billing</Accordion.Trigger>
+*     <Accordion.Panel>…</Accordion.Panel>
+*   </Accordion.Item>
+* </Accordion.Root>
+*/
 var Accordion$1 = {
 	Root: AccordionRoot,
 	Item: AccordionItem,

package/dist/components/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["Accordion","BaseAccordion","withClass","ChevronDownIcon","AccordionRootProps","Root","Props","variant","AccordionRoot","t0","$","_c","className","props","ref","t1","undefined","t2","t3","AccordionItem","AccordionTrigger","children","Symbol","for","t4","AccordionPanel","Item","Trigger","Panel","_c","BaseAccordion","Accordion"],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { Accordion as BaseAccordion } from '@base-ui/react/accordion';\nimport { withClass } from '../../utils/cx';\nimport { ChevronDownIcon } from '../../icons';\n\nexport interface AccordionRootProps extends BaseAccordion.Root.Props {\n  /** `separated` renders each item as its own card; `plain` uses dividers. */\n  variant?: 'separated' | 'plain';\n}\n\nfunction AccordionRoot({ variant = 'plain', className, ref, ...props }: AccordionRootProps) {\n  return (\n    <BaseAccordion.Root ref={ref} className={withClass('oui-accordion', className)} data-variant={variant} {...props} />\n  );\n}\n\nfunction AccordionItem({ className, ref, ...props }: BaseAccordion.Item.Props) {\n  return <BaseAccordion.Item ref={ref} className={withClass('oui-accordion__item', className)} {...props} />;\n}\n\n/** Header + trigger + chevron in one. */\nfunction AccordionTrigger({ className, children, ref, ...props }: BaseAccordion.Trigger.Props) {\n  return (\n    <BaseAccordion.Header className=\"oui-accordion__header\">\n      <BaseAccordion.Trigger ref={ref} className={withClass('oui-accordion__trigger', className)} {...props}>\n        <span className=\"oui-accordion__trigger-label\">{children}</span>\n        <ChevronDownIcon className=\"oui-accordion__chevron\" />\n      </BaseAccordion.Trigger>\n    </BaseAccordion.Header>\n  );\n}\n\nfunction AccordionPanel({ className, children, ref, ...props }: BaseAccordion.Panel.Props) {\n  return (\n    <BaseAccordion.Panel ref={ref} className={withClass('oui-accordion__panel', className)} {...props}>\n      <div className=\"oui-accordion__content\">{children}</div>\n    </BaseAccordion.Panel>\n  );\n}\n\nexport const Accordion = {\n  Root: AccordionRoot,\n  Item: AccordionItem,\n  Trigger: AccordionTrigger,\n  Panel: AccordionPanel,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","names":["Accordion","BaseAccordion","withClass","ChevronDownIcon","AccordionRootProps","Root","Props","variant","AccordionRoot","t0","$","_c","className","props","ref","t1","undefined","t2","t3","AccordionItem","AccordionTrigger","children","Symbol","for","t4","AccordionPanel","Item","Trigger","Panel","_c","BaseAccordion","Accordion"],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { Accordion as BaseAccordion } from '@base-ui/react/accordion';\nimport { withClass } from '../../utils/cx';\nimport { ChevronDownIcon } from '../../icons';\n\nexport interface AccordionRootProps extends BaseAccordion.Root.Props {\n  /** `separated` renders each item as its own card; `plain` uses dividers. */\n  variant?: 'separated' | 'plain';\n}\n\nfunction AccordionRoot({ variant = 'plain', className, ref, ...props }: AccordionRootProps) {\n  return (\n    <BaseAccordion.Root ref={ref} className={withClass('oui-accordion', className)} data-variant={variant} {...props} />\n  );\n}\n\nfunction AccordionItem({ className, ref, ...props }: BaseAccordion.Item.Props) {\n  return <BaseAccordion.Item ref={ref} className={withClass('oui-accordion__item', className)} {...props} />;\n}\n\n/** Header + trigger + chevron in one. */\nfunction AccordionTrigger({ className, children, ref, ...props }: BaseAccordion.Trigger.Props) {\n  return (\n    <BaseAccordion.Header className=\"oui-accordion__header\">\n      <BaseAccordion.Trigger ref={ref} className={withClass('oui-accordion__trigger', className)} {...props}>\n        <span className=\"oui-accordion__trigger-label\">{children}</span>\n        <ChevronDownIcon className=\"oui-accordion__chevron\" />\n      </BaseAccordion.Trigger>\n    </BaseAccordion.Header>\n  );\n}\n\nfunction AccordionPanel({ className, children, ref, ...props }: BaseAccordion.Panel.Props) {\n  return (\n    <BaseAccordion.Panel ref={ref} className={withClass('oui-accordion__panel', className)} {...props}>\n      <div className=\"oui-accordion__content\">{children}</div>\n    </BaseAccordion.Panel>\n  );\n}\n\n/**\n * Expandable sections. Compose `Accordion.Root` › `Accordion.Item` (give each a `value`) ›\n * `Accordion.Trigger` + `Accordion.Panel`. Pass `multiple` to `Root` to allow several open at once.\n *\n * @example\n * <Accordion.Root defaultValue={['a']}>\n *   <Accordion.Item value=\"a\">\n *     <Accordion.Trigger>Billing</Accordion.Trigger>\n *     <Accordion.Panel>…</Accordion.Panel>\n *   </Accordion.Item>\n * </Accordion.Root>\n */\nexport const Accordion = {\n  Root: AccordionRoot,\n  Item: AccordionItem,\n  Trigger: AccordionTrigger,\n  Panel: AccordionPanel,\n};\n"],"mappings":"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"}

package/dist/components/alert/Alert.d.ts

@@ -1,10 +1,13 @@
 import * as React from 'react';
 export type AlertTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
 export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Ref to the alert element. */
     ref?: React.Ref<HTMLDivElement>;
+    /** Semantic color and default icon. `danger` and `warning` announce as an alert role. */
     tone?: AlertTone;
     /** `soft` (tinted, default) or `outline`. */
     variant?: 'soft' | 'outline';
+    /** Bold first line above the message. */
     title?: React.ReactNode;
     /** Custom icon, or `false` to hide it. */
     icon?: React.ReactNode | false;
@@ -12,6 +15,7 @@ export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     actions?: React.ReactNode;
     /** Shows a dismiss button. */
     onDismiss?: () => void;
+    /** Accessible name of the dismiss button. */
     dismissLabel?: string;
 }
 /** Inline message for page- or section-level feedback. */

package/dist/components/alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","names":["React","cx","CircleCheckIcon","CircleXIcon","InfoIcon","TriangleAlertIcon","XIcon","IconButton","AlertTone","AlertProps","Omit","HTMLAttributes","HTMLDivElement","ref","Ref","tone","variant","title","ReactNode","icon","actions","onDismiss","dismissLabel","defaultIcons","Record","info","neutral","success","warning","danger","Alert","t0","$","_c","children","className","props","t1","t2","t3","undefined","urgent","iconNode","t4","t5","t6","t7","t8","t9","t10","t11","t12","_c"],"sources":["../../../src/components/alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cx } from '../../utils/cx';\nimport { CircleCheckIcon, CircleXIcon, InfoIcon, TriangleAlertIcon, XIcon } from '../../icons';\nimport { IconButton } from '../button/Button';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';\n\nexport interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  ref?: React.Ref<HTMLDivElement>;\n  tone?: AlertTone;\n  /** `soft` (tinted, default) or `outline`. */\n  variant?: 'soft' | 'outline';\n  title?: React.ReactNode;\n  /** Custom icon, or `false` to hide it. */\n  icon?: React.ReactNode | false;\n  /** Buttons rendered after the message. */\n  actions?: React.ReactNode;\n  /** Shows a dismiss button. */\n  onDismiss?: () => void;\n  dismissLabel?: string;\n}\n\nconst defaultIcons: Record<AlertTone, React.ReactNode> = {\n  info: <InfoIcon />,\n  neutral: <InfoIcon />,\n  success: <CircleCheckIcon />,\n  warning: <TriangleAlertIcon />,\n  danger: <CircleXIcon />,\n};\n\n/** Inline message for page- or section-level feedback. */\nexport function Alert({\n  tone = 'info',\n  variant = 'soft',\n  title,\n  icon,\n  actions,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  className,\n  children,\n  ref,\n  ...props\n}: AlertProps) {\n  const urgent = tone === 'danger' || tone === 'warning';\n  const iconNode = icon === false ? null : (icon ?? defaultIcons[tone]);\n  return (\n    <div\n      ref={ref}\n      role={urgent ? 'alert' : 'status'}\n      className={cx('oui-alert', className)}\n      data-tone={tone}\n      data-variant={variant}\n      {...props}\n    >\n      {iconNode && <span className=\"oui-alert__icon\">{iconNode}</span>}\n      <div className=\"oui-alert__body\">\n        {title && <p className=\"oui-alert__title\">{title}</p>}\n        {children && <div className=\"oui-alert__message\">{children}</div>}\n        {actions && <div className=\"oui-alert__actions\">{actions}</div>}\n      </div>\n      {onDismiss && (\n        <IconButton className=\"oui-alert__dismiss\" size=\"sm\" aria-label={dismissLabel} onClick={onDismiss}>\n          <XIcon />\n        </IconButton>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAsBA,IAAMuB,eAAmD;CACvDE,MAAM,oBAAC,UAAD,CAAS,CAAA;CACfC,SAAS,oBAAC,UAAD,CAAS,CAAA;CAClBC,SAAS,oBAAC,iBAAD,CAAgB,CAAA;CACzBC,SAAS,oBAAC,mBAAD,CAAkB,CAAA;CAC3BC,QAAQ,oBAAC,aAAD,CAAY,CAAA;AACtB;;AAGA,SAAOC,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAb;CAAA,IAAAc;CAAA,IAAAC;CAAA,IAAAhB;CAAA,IAAAE;CAAA,IAAAe;CAAA,IAAAvB;CAAA,IAAAwB;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAtB;CAAA,IAAAe,EAAA,OAAAD,IAAA;EAAe,CAAA,CAAAhB,MAAAsB,IAAArB,SAAAsB,IAAArB,OAAAE,MAAAC,SAAAC,WAAAC,cAAAiB,IAAAJ,WAAAD,UAAArB,KAAA,GAAAuB,SAAAL;EAYTC,EAAA,KAAAD;EAAAC,EAAA,KAAAZ;EAAAY,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAb;EAAAa,EAAA,KAAAX;EAAAW,EAAA,KAAAI;EAAAJ,EAAA,KAAAnB;EAAAmB,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAf;CAAA,OAAA;EAAAG,UAAAY,EAAA;EAAAE,WAAAF,EAAA;EAAAG,YAAAH,EAAA;EAAAb,OAAAa,EAAA;EAAAX,YAAAW,EAAA;EAAAI,QAAAJ,EAAA;EAAAnB,MAAAmB,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;EAAAf,QAAAe,EAAA;CAAA;CAXX,MAAAjB,OAAAsB,OAAAG,KAAAA,IAAA,SAAAH;CACA,MAAArB,UAAAsB,OAAAE,KAAAA,IAAA,SAAAF;CAKA,MAAAhB,eAAAiB,OAAAC,KAAAA,IAAA,YAAAD;CAMA,MAAAE,SAAe1B,SAAS,YAAYA,SAAS;CAC7C,MAAA2B,WAAiBvB,SAAS,QAAT,OAAyBA,QAAQI,aAAaR;CAIrD,MAAA4B,KAAAF,SAAA,UAAA;CAA2B,IAAAG;CAAA,IAAAZ,EAAA,QAAAG,WAAA;EACtBS,KAAA3C,GAAG,aAAakC,SAAS;EAACH,EAAA,MAAAG;EAAAH,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,QAAAU,UAAA;EAKpCG,KAAAH,YAAY,oBAAA,QAAA;GAAgB,WAAA;GAAmBA,UAAAA;EAAgB,CAAA;EAAAV,EAAA,MAAAU;EAAAV,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,QAAAf,OAAA;EAE7D6B,KAAA7B,SAAS,oBAAA,KAAA;GAAa,WAAA;GAAoBA,UAAAA;EAAU,CAAA;EAAAe,EAAA,MAAAf;EAAAe,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAE,UAAA;EACpDa,KAAAb,YAAY,oBAAA,OAAA;GAAe,WAAA;GAAsBA;EAAe,CAAA;EAAAF,EAAA,MAAAE;EAAAF,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,QAAAZ,SAAA;EAChE4B,KAAA5B,WAAW,oBAAA,OAAA;GAAe,WAAA;GAAsBA,UAAAA;EAAc,CAAA;EAAAY,EAAA,MAAAZ;EAAAY,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,QAAAc,MAAAd,EAAA,QAAAe,MAAAf,EAAA,QAAAgB,IAAA;EAHjEC,MAAA,qBAAA,OAAA;GAAe,WAAA;GAAf,UAAA;IACGH;IACAC;IACAC;GACG;;EAAAhB,EAAA,MAAAc;EAAAd,EAAA,MAAAe;EAAAf,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;CAAA,OAAAA,MAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAV,gBAAAU,EAAA,QAAAX,WAAA;EACL6B,MAAA7B,aACC,oBAAC,YAAD;GAAsB,WAAA;GAA0B,MAAA;GAAiBC,cAAAA;GAAuBD,SAAAA;GACtF,UAAA,oBAAC,OAAD,CAAM,CAAA;EADG,CAAA;EAGZW,EAAA,MAAAV;EAAAU,EAAA,MAAAX;EAAAW,EAAA,MAAAkB;CAAA,OAAAA,MAAAlB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAI,SAAAJ,EAAA,QAAAnB,OAAAmB,EAAA,QAAAiB,OAAAjB,EAAA,QAAAkB,OAAAlB,EAAA,QAAAW,MAAAX,EAAA,QAAAY,MAAAZ,EAAA,QAAAa,MAAAb,EAAA,QAAAjB,QAAAiB,EAAA,QAAAhB,SAAA;EAlBHmC,MAAA,qBAAA,OAAA;GACOtC;GACC,MAAA8B;GACK,WAAAC;GACA7B,aAAAA;GACGC,gBAAAA;GAAO,GACjBoB;GANN,UAAA;IAQGS;IACDI;IAKCC;GAKG;;EAAAlB,EAAA,MAAAI;EAAAJ,EAAA,MAAAnB;EAAAmB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAW;EAAAX,EAAA,MAAAY;EAAAZ,EAAA,MAAAa;EAAAb,EAAA,MAAAjB;EAAAiB,EAAA,MAAAhB;EAAAgB,EAAA,MAAAmB;CAAA,OAAAA,MAAAnB,EAAA;CAAA,OAnBNmB;AAmBM"}
+{"version":3,"file":"Alert.js","names":["React","cx","CircleCheckIcon","CircleXIcon","InfoIcon","TriangleAlertIcon","XIcon","IconButton","AlertTone","AlertProps","Omit","HTMLAttributes","HTMLDivElement","ref","Ref","tone","variant","title","ReactNode","icon","actions","onDismiss","dismissLabel","defaultIcons","Record","info","neutral","success","warning","danger","Alert","t0","$","_c","children","className","props","t1","t2","t3","undefined","urgent","iconNode","t4","t5","t6","t7","t8","t9","t10","t11","t12","_c"],"sources":["../../../src/components/alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cx } from '../../utils/cx';\nimport { CircleCheckIcon, CircleXIcon, InfoIcon, TriangleAlertIcon, XIcon } from '../../icons';\nimport { IconButton } from '../button/Button';\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';\n\nexport interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Ref to the alert element. */\n  ref?: React.Ref<HTMLDivElement>;\n  /** Semantic color and default icon. `danger` and `warning` announce as an alert role. */\n  tone?: AlertTone;\n  /** `soft` (tinted, default) or `outline`. */\n  variant?: 'soft' | 'outline';\n  /** Bold first line above the message. */\n  title?: React.ReactNode;\n  /** Custom icon, or `false` to hide it. */\n  icon?: React.ReactNode | false;\n  /** Buttons rendered after the message. */\n  actions?: React.ReactNode;\n  /** Shows a dismiss button. */\n  onDismiss?: () => void;\n  /** Accessible name of the dismiss button. */\n  dismissLabel?: string;\n}\n\nconst defaultIcons: Record<AlertTone, React.ReactNode> = {\n  info: <InfoIcon />,\n  neutral: <InfoIcon />,\n  success: <CircleCheckIcon />,\n  warning: <TriangleAlertIcon />,\n  danger: <CircleXIcon />,\n};\n\n/** Inline message for page- or section-level feedback. */\nexport function Alert({\n  tone = 'info',\n  variant = 'soft',\n  title,\n  icon,\n  actions,\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  className,\n  children,\n  ref,\n  ...props\n}: AlertProps) {\n  const urgent = tone === 'danger' || tone === 'warning';\n  const iconNode = icon === false ? null : (icon ?? defaultIcons[tone]);\n  return (\n    <div\n      ref={ref}\n      role={urgent ? 'alert' : 'status'}\n      className={cx('oui-alert', className)}\n      data-tone={tone}\n      data-variant={variant}\n      {...props}\n    >\n      {iconNode && <span className=\"oui-alert__icon\">{iconNode}</span>}\n      <div className=\"oui-alert__body\">\n        {title && <p className=\"oui-alert__title\">{title}</p>}\n        {children && <div className=\"oui-alert__message\">{children}</div>}\n        {actions && <div className=\"oui-alert__actions\">{actions}</div>}\n      </div>\n      {onDismiss && (\n        <IconButton className=\"oui-alert__dismiss\" size=\"sm\" aria-label={dismissLabel} onClick={onDismiss}>\n          <XIcon />\n        </IconButton>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/app-shell/AppShell.d.ts

@@ -13,14 +13,21 @@ export interface NavbarProps extends useRender.ComponentProps<'nav', NavbarState
     collapsible?: boolean;
     /** Controlled collapsed state. */
     collapsed?: boolean;
+    /** Initial collapsed state when uncontrolled. */
     defaultCollapsed?: boolean;
+    /** Called when the user collapses or expands the navbar. */
     onCollapsedChange?: (collapsed: boolean) => void;
     /** Temporarily opens a collapsed navbar while the mouse is over it. Defaults to `true`. */
     expandOnHover?: boolean;
     /** Accessible names for the icon-only toggle. */
     collapseLabel?: string;
+    /** Accessible name of the toggle while collapsed. */
     expandLabel?: string;
 }
+/**
+ * Collapsible side navigation. Use inside `AppShell`. Compose with `NavbarHeader` (`NavbarBrand`),
+ * `NavbarSection` (`NavbarSectionLabel`, `NavbarItem`) and `NavbarFooter`.
+ */
 export declare function Navbar({ variant, collapsible, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, expandOnHover, collapseLabel, expandLabel, render, children, ref, ...props }: NavbarProps): React.JSX.Element;
 export declare const NavbarHeader: {
     (props: import("../../utils/primitive").PrimitiveProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
@@ -39,27 +46,75 @@ export declare const NavbarSectionLabel: {
     displayName: string;
 };
 export interface NavbarBrandProps extends Omit<useRender.ComponentProps<'div'>, 'title'> {
+    /** Logo or icon shown before the title; stays visible when the navbar is collapsed. */
     logo?: React.ReactNode;
+    /** Product or organization name. */
     title: React.ReactNode;
+    /** Smaller line under the title. */
     subtitle?: React.ReactNode;
 }
+/** Logo, title and subtitle block for the top of a `Navbar`. */
 export declare function NavbarBrand({ logo, title, subtitle, render, ref, ...props }: NavbarBrandProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export type NavbarItemState = {
     active: boolean;
 };
 export interface NavbarItemProps extends useRender.ComponentProps<'a', NavbarItemState> {
+    /** Icon shown before the label; it stays visible when the navbar is collapsed to a rail. Not shown inside a `NavbarGroup`. */
     icon?: React.ReactNode;
-    /** Marks the current page (sets aria-current). */
+    /** Marks the current page (sets aria-current). Also opens the surrounding `NavbarGroup`. */
     active?: boolean;
     /** Trailing content such as a count badge. */
     badge?: React.ReactNode;
+    /**
+     * Also shows the item in the `AppShell` mobile tab bar (icon and label). Pin up to four items; the
+     * first four in navbar order are used. Has no effect outside an `AppShell`.
+     */
+    pinned?: boolean;
 }
 /**
  * Navigation link. Renders an `<a>`; use `render={<Link to="…" />}` for a
- * router link or `render={<button />}` for an action.
+ * router link or `render={<button />}` for an action. Inside a `NavbarGroup` it becomes an indented sub-link.
+ */
+export declare function NavbarItem({ icon, active, badge, pinned, render, children, ref, ...props }: NavbarItemProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export interface NavbarGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Ref to the group's root element. */
+    ref?: React.Ref<HTMLDivElement>;
+    /** Text of the parent row. A string also becomes its tooltip on the collapsed rail. */
+    label: React.ReactNode;
+    /** Icon of the parent row; it stays visible when the navbar is collapsed to a rail. */
+    icon?: React.ReactNode;
+    /** Trailing content of the parent row, such as a count badge. */
+    badge?: React.ReactNode;
+    /** Controlled open state. Takes over from the automatic opening on an active child. */
+    open?: boolean;
+    /**
+     * Initial open state when uncontrolled. Whenever a child item becomes `active`, the group opens.
+     * @default true when a child item is active
+     */
+    defaultOpen?: boolean;
+    /** Called when the user opens or closes the group. */
+    onOpenChange?: (open: boolean) => void;
+    /** Sub-links: `NavbarItem` elements (directly or in fragments), shown indented and without icons. */
+    children?: React.ReactNode;
+}
+/**
+ * Expandable parent row in a `Navbar` with nested `NavbarItem` sub-links. Place it in a `NavbarSection`
+ * next to other items. On a collapsed rail the sub-links are hidden and the parent shows as active when
+ * one of them is; the hover peek shows the full tree.
+ *
+ * @example
+ * <NavbarSection>
+ *   <NavbarGroup icon={<Truck />} label="Fleet">
+ *     <NavbarItem href="/fleet/vehicles" active>Vehicles</NavbarItem>
+ *     <NavbarItem href="/fleet/drivers">Drivers</NavbarItem>
+ *   </NavbarGroup>
+ * </NavbarSection>
  */
-export declare function NavbarItem({ icon, active, badge, render, children, ref, ...props }: NavbarItemProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function NavbarGroup({ label, icon, badge, open: openProp, defaultOpen, onOpenChange, className, children, ref, ...props }: NavbarGroupProps): React.JSX.Element;
+export type MobileNavPosition = 'bottom' | 'top';
+export type MoreTabPosition = 'start' | 'end';
 export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Ref to the shell's root element. */
     ref?: React.Ref<HTMLDivElement>;
     /** Navbar content (usually a `<Navbar>`). Rendered in a drawer on small screens. */
     navbar: React.ReactNode;
@@ -67,30 +122,66 @@ export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
     mobileBrand?: React.ReactNode;
     /** Extra content on the right of the mobile top bar. */
     mobileActions?: React.ReactNode;
+    /**
+     * Where small screens show the tab bar of pinned `NavbarItem`s: below or above the main area. Both look
+     * the same; the "More" slot (see `moreTabPosition`) opens the navbar drawer. The top bar with `mobileBrand` and
+     * `mobileActions` only appears when one of them is set. Without pinned items, a top bar with a menu
+     * button is shown instead.
+     */
+    mobileNavPosition?: MobileNavPosition;
+    /** Accessible name of the button that opens the navigation drawer on small screens. */
     menuLabel?: string;
+    /** Label of the tab-bar slot that opens the navigation drawer. */
+    moreLabel?: string;
+    /** Whether the "More" slot comes before or after the pinned items in the tab bar. */
+    moreTabPosition?: MoreTabPosition;
     /** Props for the scrolling `<main>` element. */
     mainProps?: React.HTMLAttributes<HTMLElement>;
 }
 /**
  * Full-height layout with a fixed navbar and an internally scrolling main
- * area. Below 900px the navbar moves into a slide-in drawer.
+ * area. Below 900px the navbar moves into a slide-in drawer, and `NavbarItem`s marked `pinned` show in a
+ * tab bar (see `mobileNavPosition`).
  * Customize width with `--oui-navbar-width` and `--oui-navbar-collapsed-width`.
+ *
+ * @example
+ * <AppShell
+ *   mobileBrand="OptiControl"
+ *   navbar={
+ *     <Navbar>
+ *       <NavbarSection>
+ *         <NavbarItem href="/" icon={<Home />} active pinned>Overview</NavbarItem>
+ *         <NavbarItem href="/fleet" icon={<Truck />} pinned>Fleet</NavbarItem>
+ *       </NavbarSection>
+ *     </Navbar>
+ *   }
+ * >
+ *   <PageHeader title="Overview" />
+ * </AppShell>
  */
-export declare function AppShell({ navbar, mobileBrand, mobileActions, menuLabel, mainProps, className, children, ref, ...props }: AppShellProps): React.JSX.Element;
+export declare function AppShell({ navbar, mobileBrand, mobileActions, mobileNavPosition, menuLabel, moreLabel, moreTabPosition, mainProps, className, children, ref, ...props }: AppShellProps): React.JSX.Element;
 export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    /** Ref to the `<header>` element. */
     ref?: React.Ref<HTMLElement>;
     /** Trail shown above the title, usually `<Breadcrumbs>`. */
     breadcrumbs?: React.ReactNode;
+    /** Small label above the title. */
     eyebrow?: React.ReactNode;
+    /** Page title, rendered as the page `<h1>`. */
     title: React.ReactNode;
+    /** Supporting text under the title. */
     description?: React.ReactNode;
+    /** Buttons or controls aligned to the right of the title. */
     actions?: React.ReactNode;
 }
+/** Page title block with optional breadcrumbs, eyebrow, description and actions. */
 export declare function PageHeader({ breadcrumbs, eyebrow, title, description, actions, className, ref, ...props }: PageHeaderProps): React.JSX.Element;
 export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Ref to the grid element. */
     ref?: React.Ref<HTMLDivElement>;
     /** Columns on wide screens; collapses to 2 below 1200px (for 4+) and 1 below 900px. */
     columns?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Space between grid cells. */
     gap?: 'sm' | 'md' | 'lg';
 }
 /** Responsive dashboard grid. */