@milktop/react-ui 0.2.1 → 0.2.3

package/README.md

@@ -35,6 +35,13 @@ so a hand-built component looks just like the shortcut:
 No CLI and no copied snippets: every shortcut ships in the package, and
 where one doesn't fit you build from the parts.
 
+Our own parts hang off their component the same way, so one import covers
+them: `Sidebar.Section`, `Sidebar.Item`, `Menu.Item`, `Tabs.Tab`,
+`Accordion.Item`. Where one of ours takes a name Ark also uses, Ark's part
+moves aside (`Accordion.RawItem`). They're also exported by name
+(`NavSection`, `MenuItem`, `Tab`…), for imports by name and, later, server
+components; the dotted form is the one the docs use.
+
 ## Components
 
 So far:
@@ -57,18 +64,17 @@ So far:
 - Forms: Field · Fields
 - Overlays: Tooltip · Popover · HoverCard · Dialog · Sheet (both: props or
   composed from Header/Body/Footer) · ActionBar · Menu · ContextMenu (Menu.Item,
-  Separator, Group, Checkbox, RadioGroup/Radio, Submenu; also as MenuItem…) ·
+  Separator, Group, Checkbox, RadioGroup/Radio, Submenu) ·
   Toaster (`toaster.success(…)` from anywhere) · `confirm()` (`await confirm({ … })`
   from anywhere, no state or markup)
 - Scheduling and ordering (React only): EventCalendar (day, n days, work week or
   week by the hour, with resources such as vets or rooms as columns; drag to
   select a time, drag or arrow-key events to move and resize them, all-day
   events, a date jump) · SortableList (drag or keyboard, on dnd-kit)
-- Disclosure: Tabs/Tab (with counts and dots, inline or in the corner) · Accordion · Collapsible
+- Disclosure: Tabs (Tabs.Tab, with counts and dots, inline or in the corner) · Accordion · Collapsible
 - Navigation: AppShell (flat or inset; the sidebar collapses to a rail with ⌘B
   and is a drawer on phones; inset, or `scroll="page"`, scrolls only the page
-  on wide screens) · Topbar · Sidebar (NavSection, NavGroup, NavItem,
-  SidebarUser; also Sidebar.Section…) · Page · Breadcrumbs · Command (⌘K)
+  on wide screens) · Topbar · Sidebar (Sidebar.Section, Group, Item, User) · Page · Breadcrumbs · Command (⌘K)
 
 That's all of svelte-ui's components.
 

package/dist/index.d.ts

@@ -29,7 +29,7 @@ export { colorScheme, useColorScheme, type Scheme } from './color-scheme.js';
 export { Appearance } from './appearance-panel/Appearance.js';
 export { appearance, useAppearance, accents, accentScale, accentSteps, sidebarStyles, type AccentName, type AppearanceValue, type SidebarStyle, } from './appearance.js';
 export { Tooltip } from './tooltip/Tooltip.js';
-export { Menu, ContextMenu, MenuItem, MenuSeparator, MenuGroup, MenuCheckbox, MenuRadioGroup, MenuRadio, Submenu, type MenuEntry, type MenuOptionChange, } from './menu/Menu.js';
+export { Menu, ContextMenu, MenuItem, MenuSeparator, MenuGroup, MenuCheckbox, MenuRadioGroup, MenuRadio, Submenu, type MenuEntry, type MenuOptionChange, type MenuIndicator, } from './menu/Menu.js';
 export { Tabs, Tab } from './tabs/Tabs.js';
 export { Dialog } from './dialog/Dialog.js';
 export { confirm, type ConfirmOptions } from './confirm/confirm.js';

package/dist/menu/Menu.d.ts

@@ -29,6 +29,10 @@
  *   component must pass them on, as Button does)
  * - `placement`: 'bottom-start' (default), 'bottom-end', …
  * - `label`: a small label above the items
+ * - `indicator`: where checkbox and radio items show they're checked: 'end'
+ *   (default; a tick after the label, so labels line up with the other
+ *   items) or 'start' (a tick, or a dot for radios, before it); submenus
+ *   follow their menu's unless they set one
  * - `keepOpen`: stay open after an item is chosen (to tick several); an
  *   item's own `keepOpen` overrides it
  * - `context`: open on right-click (or long-press) of the trigger, at the
@@ -48,6 +52,7 @@ import { type Classes } from '../utils.js';
 import '../theme.css';
 import './menu.css';
 type Value = string | number;
+export type MenuIndicator = 'start' | 'end';
 export type MenuEntry = string | number | {
     label?: ReactNode;
     value?: Value;
@@ -157,15 +162,17 @@ declare function Radio({ value, icon, shortcut, disabled, keepOpen, children }:
  *   </Menu.Submenu>
  *
  * - `label`: the row's text; `icon`: an optional Iconify name before it
- * - `items`: as on Menu; `keepOpen` for its items (it follows its menu)
+ * - `items`: as on Menu; `keepOpen` and `indicator` for its items (they
+ *   follow its menu's)
  *
  * Its items' selections reach the outer Menu's `onSelect`.
  */
-declare function Submenu({ label, icon, items, keepOpen, className, children }: {
+declare function Submenu({ label, icon, items, keepOpen, indicator, className, children }: {
     label: ReactNode;
     icon?: string | null;
     items?: MenuEntry[];
     keepOpen?: boolean | null;
+    indicator?: MenuIndicator | null;
     className?: string;
     children?: ReactNode;
 }): import("react").JSX.Element;
@@ -177,6 +184,7 @@ export type MenuProps = Omit<Ark.ContentProps, 'onSelect' | 'onChange'> & {
     trigger?: ReactElement | null;
     placement?: NonNullable<Ark.RootProps['positioning']>['placement'];
     label?: ReactNode;
+    indicator?: MenuIndicator;
     keepOpen?: boolean;
     context?: boolean;
     open?: boolean;
@@ -186,7 +194,7 @@ export type MenuProps = Omit<Ark.ContentProps, 'onSelect' | 'onChange'> & {
     onChange?: (change: MenuOptionChange) => void;
     classes?: Classes<'positioner' | 'content' | 'menuLabel'>;
 };
-declare function MenuShortcut({ items, labelKey, valueKey, disabledKey, trigger, placement, label, keepOpen, context, open, defaultOpen, onOpenChange, onSelect, onChange, className, classes, children, ...rest }: MenuProps): import("react").JSX.Element;
+declare function MenuShortcut({ items, labelKey, valueKey, disabledKey, trigger, placement, label, indicator, keepOpen, context, open, defaultOpen, onOpenChange, onSelect, onChange, className, classes, children, ...rest }: MenuProps): import("react").JSX.Element;
 export declare const Menu: typeof MenuShortcut & {
     Item: typeof Item;
     Separator: typeof Separator;

package/dist/menu/Menu.js

@@ -30,6 +30,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *   component must pass them on, as Button does)
  * - `placement`: 'bottom-start' (default), 'bottom-end', …
  * - `label`: a small label above the items
+ * - `indicator`: where checkbox and radio items show they're checked: 'end'
+ *   (default; a tick after the label, so labels line up with the other
+ *   items) or 'start' (a tick, or a dot for radios, before it); submenus
+ *   follow their menu's unless they set one
  * - `keepOpen`: stay open after an item is chosen (to tick several); an
  *   item's own `keepOpen` overrides it
  * - `context`: open on right-click (or long-press) of the trigger, at the
@@ -109,7 +113,7 @@ function Checkbox({ checked, defaultChecked = false, onCheckedChange, value, ico
     const id = useId();
     const [own, setOwn] = useState(defaultChecked);
     const on = checked ?? own;
-    return (_jsxs(Ark.CheckboxItem, { ...menu.part('item'), value: String(value ?? id), checked: on, disabled: !!disabled, ...closeFor(keepOpen), onCheckedChange: (next) => { setOwn(next); onCheckedChange?.(next); }, children: [_jsx("span", { ...menu.part('indicator'), children: _jsx(Ark.ItemIndicator, { ...menu.part('item-indicator'), "data-type": "checkbox", children: _jsx("iconify-icon", { icon: "lucide:check", "aria-hidden": "true" }) }) }), _jsx(ItemInside, { part: menu.part, icon: icon, shortcut: shortcut, children: children })] }));
+    return (_jsxs(Ark.CheckboxItem, { ...menu.part('item'), value: String(value ?? id), checked: on, disabled: !!disabled, ...closeFor(keepOpen), onCheckedChange: (next) => { setOwn(next); onCheckedChange?.(next); }, children: [_jsx("span", { ...menu.part('indicator'), "data-side": menu.indicator, children: _jsx(Ark.ItemIndicator, { ...menu.part('item-indicator'), "data-type": "checkbox", children: _jsx("iconify-icon", { icon: "lucide:check", "aria-hidden": "true" }) }) }), _jsx(ItemInside, { part: menu.part, icon: icon, shortcut: shortcut, children: children })] }));
 }
 // A radio group's id and value, for its radios.
 const RadioContext = createContext(null);
@@ -152,7 +156,7 @@ function Radio({ value, icon = null, shortcut = null, disabled = false, keepOpen
     const values = useContext(RadioValues);
     const key = `${group?.id}/${value}`;
     values?.set(key, value);
-    return (_jsxs(Ark.RadioItem, { ...menu.part('item'), value: key, disabled: !!disabled, ...closeFor(keepOpen), children: [_jsx("span", { ...menu.part('indicator'), children: _jsx(Ark.ItemIndicator, { ...menu.part('item-indicator'), "data-type": "radio" }) }), _jsx(ItemInside, { part: menu.part, icon: icon, shortcut: shortcut, children: children })] }));
+    return (_jsxs(Ark.RadioItem, { ...menu.part('item'), value: key, disabled: !!disabled, ...closeFor(keepOpen), children: [_jsx("span", { ...menu.part('indicator'), "data-side": menu.indicator, children: _jsx(Ark.ItemIndicator, { ...menu.part('item-indicator'), "data-type": "radio", children: menu.indicator === 'end' && _jsx("iconify-icon", { icon: "lucide:check", "aria-hidden": "true" }) }) }), _jsx(ItemInside, { part: menu.part, icon: icon, shortcut: shortcut, children: children })] }));
 }
 /**
  * A submenu inside a Menu (or another Submenu): a row that opens a nested
@@ -163,15 +167,17 @@ function Radio({ value, icon = null, shortcut = null, disabled = false, keepOpen
  *   </Menu.Submenu>
  *
  * - `label`: the row's text; `icon`: an optional Iconify name before it
- * - `items`: as on Menu; `keepOpen` for its items (it follows its menu)
+ * - `items`: as on Menu; `keepOpen` and `indicator` for its items (they
+ *   follow its menu's)
  *
  * Its items' selections reach the outer Menu's `onSelect`.
  */
-function Submenu({ label, icon = null, items = [], keepOpen = null, className, children }) {
+function Submenu({ label, icon = null, items = [], keepOpen = null, indicator = null, className, children }) {
     const outer = useMenu();
     const part = outer.part;
     const stays = keepOpen ?? outer.keepOpen;
-    return (_jsxs(Ark.Root, { closeOnSelect: !stays, positioning: { placement: 'right-start', strategy: 'fixed', gutter: 2 }, navigate: (details) => details.node.click(), onSelect: (details) => outer.select(details.value), children: [_jsxs(Ark.TriggerItem, { ...part('item'), children: [icon && _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" }), _jsx("span", { ...part('label'), children: label }), _jsx("iconify-icon", { ...part('chevron'), icon: "lucide:chevron-right", "aria-hidden": "true" })] }), _jsx(Ark.Positioner, { ...part('positioner'), children: _jsx(Ark.Content, { ...part('content'), className: className, children: _jsxs(MenuContext.Provider, { value: { ...outer, keepOpen: stays }, children: [_jsx(Entries, { items: items }), children] }) }) })] }));
+    const side = indicator ?? outer.indicator;
+    return (_jsxs(Ark.Root, { closeOnSelect: !stays, positioning: { placement: 'right-start', strategy: 'fixed', gutter: 2 }, navigate: (details) => details.node.click(), onSelect: (details) => outer.select(details.value), children: [_jsxs(Ark.TriggerItem, { ...part('item'), children: [icon && _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" }), _jsx("span", { ...part('label'), children: label }), _jsx("iconify-icon", { ...part('chevron'), icon: "lucide:chevron-right", "aria-hidden": "true" })] }), _jsx(Ark.Positioner, { ...part('positioner'), children: _jsx(Ark.Content, { ...part('content'), className: className, children: _jsxs(MenuContext.Provider, { value: { ...outer, keepOpen: stays, indicator: side }, children: [_jsx(Entries, { items: items }), children] }) }) })] }));
 }
 // A checkbox or radio entry from `items`, checked by the root menu. Zag's
 // option props straight onto it: Ark's RadioItem wants a RadioItemGroup round it.
@@ -183,7 +189,7 @@ function Option({ entry, optionKey, label, disabled, siblings }) {
         valueText: typeof label === 'string' ? label : optionKey, ...closeFor(entry.keepOpen),
         onCheckedChange: (on) => menu.check(entry, optionKey, on, siblings),
     };
-    return (_jsxs("div", { ...api.getOptionItemProps(props), ...menu.part('item'), "data-danger": entry.danger || undefined, children: [_jsx("span", { ...menu.part('indicator'), children: _jsx("span", { ...api.getItemIndicatorProps(props), ...menu.part('item-indicator'), "data-type": entry.type, children: entry.type === 'checkbox' && _jsx("iconify-icon", { icon: "lucide:check", "aria-hidden": "true" }) }) }), entry.icon && _jsx("iconify-icon", { ...menu.part('icon'), icon: entry.icon, "aria-hidden": "true" }), _jsx("span", { ...menu.part('label'), children: label }), entry.shortcut && _jsx("kbd", { ...menu.part('shortcut'), children: entry.shortcut })] }));
+    return (_jsxs("div", { ...api.getOptionItemProps(props), ...menu.part('item'), "data-danger": entry.danger || undefined, children: [_jsx("span", { ...menu.part('indicator'), "data-side": menu.indicator, children: _jsx("span", { ...api.getItemIndicatorProps(props), ...menu.part('item-indicator'), "data-type": entry.type, children: (entry.type === 'checkbox' || menu.indicator === 'end') && _jsx("iconify-icon", { icon: "lucide:check", "aria-hidden": "true" }) }) }), entry.icon && _jsx("iconify-icon", { ...menu.part('icon'), icon: entry.icon, "aria-hidden": "true" }), _jsx("span", { ...menu.part('label'), children: label }), entry.shortcut && _jsx("kbd", { ...menu.part('shortcut'), children: entry.shortcut })] }));
 }
 // A menu's `items` array, as the components above.
 function Entries({ items }) {
@@ -210,13 +216,13 @@ function Entries({ items }) {
             return (_jsx(Item, { value: value, href: entry.href, icon: entry.icon, shortcut: entry.shortcut, danger: entry.danger, disabled: disabled, keepOpen: entry.keepOpen, children: label }, i));
         }) });
 }
-function MenuShortcut({ items = [], labelKey = 'label', valueKey = 'value', disabledKey = 'disabled', trigger = null, placement = 'bottom-start', label = null, keepOpen = false, context = false, open, defaultOpen, onOpenChange, onSelect, onChange, className, classes, children, ...rest }) {
+function MenuShortcut({ items = [], labelKey = 'label', valueKey = 'value', disabledKey = 'disabled', trigger = null, placement = 'bottom-start', label = null, indicator = 'end', keepOpen = false, context = false, open, defaultOpen, onOpenChange, onSelect, onChange, className, classes, children, ...rest }) {
     const part = partsOf('menu', classes);
     const values = useRef(new Map());
     // `items` checkbox and radio entries, starting from their own `checked`.
     const [checks, setChecks] = useState({});
     const shared = {
-        part, keepOpen, keys: { labelKey, valueKey, disabledKey },
+        part, keepOpen, indicator, keys: { labelKey, valueKey, disabledKey },
         remember: (key, value) => { values.current.set(key, value); },
         select: (key) => { if (values.current.has(key))
             onSelect?.(values.current.get(key)); },

package/dist/menu/menu.css

@@ -28,6 +28,9 @@
   [data-scope=menu][data-part=item-indicator] {
     &[data-type=checkbox] { display: block; font-size: 14px; color: var(--ui-accent); }
     &[data-type=radio] { display: block; width: 6px; height: 6px; border-radius: 9999px; background: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); } }
+  /* indicator='end' (the default): a tick after the label and any shortcut, for radios too. */
+  [data-scope=menu][data-part=indicator][data-side=end] { order: 1;
+    & > [data-type=radio] { width: auto; height: auto; font-size: 14px; color: var(--ui-accent); border-radius: 0; background: none; box-shadow: none; } }
   [data-scope=menu][data-part=chevron] { display: block; font-size: 14px; margin-left: auto; color: var(--ui-muted); }
   /* A div or an <hr> (Ark's): no border of its own. */
   [data-scope=menu][data-part=separator] { display: block; height: 1px; margin: 0.25rem -0.25rem; border: none; background: var(--ui-border); }

package/dist/sidebar/NavGroup.d.ts

@@ -1,9 +1,9 @@
 /**
  * Nav items under a label that opens and closes.
  *
- *   <NavGroup label="Forms" icon="lucide:form" defaultOpen>
- *     <NavItem href="/input">Input</NavItem>
- *   </NavGroup>
+ *   <Sidebar.Group label="Forms" icon="lucide:form" defaultOpen>
+ *     <Sidebar.Item href="/input">Input</Sidebar.Item>
+ *   </Sidebar.Group>
  *
  * - `label`: its text; `icon`: an Iconify name
  * - `open`, `defaultOpen`; `onOpenChange`: called with the new open state.

package/dist/sidebar/NavGroup.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Nav items under a label that opens and closes.
  *
- *   <NavGroup label="Forms" icon="lucide:form" defaultOpen>
- *     <NavItem href="/input">Input</NavItem>
- *   </NavGroup>
+ *   <Sidebar.Group label="Forms" icon="lucide:form" defaultOpen>
+ *     <Sidebar.Item href="/input">Input</Sidebar.Item>
+ *   </Sidebar.Group>
  *
  * - `label`: its text; `icon`: an Iconify name
  * - `open`, `defaultOpen`; `onOpenChange`: called with the new open state.

package/dist/sidebar/NavItem.d.ts

@@ -2,8 +2,8 @@
  * A sidebar link (or a button, without `href`). Other props (onClick,
  * data-*) go on the link.
  *
- *   <NavItem icon="lucide:users" href="/students" active={isCurrent('/students')} badge={3}>Students</NavItem>
- *   <NavItem icon="lucide:users" link={<Link to="/students" />}>Students</NavItem>
+ *   <Sidebar.Item icon="lucide:users" href="/students" active={isCurrent('/students')} badge={3}>Students</Sidebar.Item>
+ *   <Sidebar.Item icon="lucide:users" link={<Link to="/students" />}>Students</Sidebar.Item>
  *
  * - `icon`: an Iconify name
  * - `href`: where it goes (without one it's a button: give it `onClick`)

package/dist/sidebar/NavItem.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * A sidebar link (or a button, without `href`). Other props (onClick,
  * data-*) go on the link.
  *
- *   <NavItem icon="lucide:users" href="/students" active={isCurrent('/students')} badge={3}>Students</NavItem>
- *   <NavItem icon="lucide:users" link={<Link to="/students" />}>Students</NavItem>
+ *   <Sidebar.Item icon="lucide:users" href="/students" active={isCurrent('/students')} badge={3}>Students</Sidebar.Item>
+ *   <Sidebar.Item icon="lucide:users" link={<Link to="/students" />}>Students</Sidebar.Item>
  *
  * - `icon`: an Iconify name
  * - `href`: where it goes (without one it's a button: give it `onClick`)

package/dist/sidebar/NavSection.d.ts

@@ -1,7 +1,7 @@
 /**
  * A group of nav items, with an optional heading (hidden in the rail).
  *
- *   <NavSection heading="Settings" collapsible>…NavGroups…</NavSection>
+ *   <Sidebar.Section heading="Settings" collapsible>…groups…</Sidebar.Section>
  *
  * - `heading`
  * - `collapsible`: a button beside the heading that collapses (or expands)

package/dist/sidebar/NavSection.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A group of nav items, with an optional heading (hidden in the rail).
  *
- *   <NavSection heading="Settings" collapsible>…NavGroups…</NavSection>
+ *   <Sidebar.Section heading="Settings" collapsible>…groups…</Sidebar.Section>
  *
  * - `heading`
  * - `collapsible`: a button beside the heading that collapses (or expands)

package/dist/sidebar/Sidebar.d.ts

@@ -2,16 +2,16 @@
  * An app sidebar: a logo, the nav, and a footer. In an AppShell it collapses
  * to an icon rail (its button, or ⌘B) and becomes a drawer on phones.
  *
- *   <Sidebar logo="TutorApp" footer={<SidebarUser name="Ada Lovelace" items={account} />}>
- *     <NavSection heading="Menu">
- *       <NavItem icon="lucide:house" href="/" active>Dashboard</NavItem>
- *       <NavGroup label="Settings" icon="lucide:settings">…</NavGroup>
- *     </NavSection>
+ *   <Sidebar logo="TutorApp" footer={<Sidebar.User name="Ada Lovelace" items={account} />}>
+ *     <Sidebar.Section heading="Menu">
+ *       <Sidebar.Item icon="lucide:house" href="/" active>Dashboard</Sidebar.Item>
+ *       <Sidebar.Group label="Settings" icon="lucide:settings">…</Sidebar.Group>
+ *     </Sidebar.Section>
  *   </Sidebar>
  *
  * - `logo`; `logoCollapsed`: shown instead in the rail (a mark)
- * - `footer`: along the bottom (a SidebarUser)
- * - `accordion`: one NavGroup open at a time
+ * - `footer`: along the bottom (a Sidebar.User)
+ * - `accordion`: one Sidebar.Group open at a time
  * - `items`: the nav as data, in place of (or before) the content:
  *   `[{ heading, items: [{ label, icon, href, active, badge, items }] }]`
  * - `edge`: a thin strip along the right edge that collapses or expands it
@@ -21,8 +21,8 @@
  * - restyle its items with the `--ui-sidebar-*` tokens, e.g.
  *   style={{ '--ui-sidebar-active': 'var(--ui-accent-soft)' }}
  *
- * Its parts are on it too: Sidebar.Section, Sidebar.Group, Sidebar.Item and
- * Sidebar.User are NavSection, NavGroup, NavItem and SidebarUser.
+ * Its parts are on it: Sidebar.Section, Sidebar.Group, Sidebar.Item and
+ * Sidebar.User (also exported as NavSection, NavGroup, NavItem and SidebarUser).
  */
 import { type HTMLAttributes, type ReactNode } from 'react';
 import '../icons.js';

package/dist/sidebar/Sidebar.js

@@ -3,16 +3,16 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * An app sidebar: a logo, the nav, and a footer. In an AppShell it collapses
  * to an icon rail (its button, or ⌘B) and becomes a drawer on phones.
  *
- *   <Sidebar logo="TutorApp" footer={<SidebarUser name="Ada Lovelace" items={account} />}>
- *     <NavSection heading="Menu">
- *       <NavItem icon="lucide:house" href="/" active>Dashboard</NavItem>
- *       <NavGroup label="Settings" icon="lucide:settings">…</NavGroup>
- *     </NavSection>
+ *   <Sidebar logo="TutorApp" footer={<Sidebar.User name="Ada Lovelace" items={account} />}>
+ *     <Sidebar.Section heading="Menu">
+ *       <Sidebar.Item icon="lucide:house" href="/" active>Dashboard</Sidebar.Item>
+ *       <Sidebar.Group label="Settings" icon="lucide:settings">…</Sidebar.Group>
+ *     </Sidebar.Section>
  *   </Sidebar>
  *
  * - `logo`; `logoCollapsed`: shown instead in the rail (a mark)
- * - `footer`: along the bottom (a SidebarUser)
- * - `accordion`: one NavGroup open at a time
+ * - `footer`: along the bottom (a Sidebar.User)
+ * - `accordion`: one Sidebar.Group open at a time
  * - `items`: the nav as data, in place of (or before) the content:
  *   `[{ heading, items: [{ label, icon, href, active, badge, items }] }]`
  * - `edge`: a thin strip along the right edge that collapses or expands it
@@ -22,8 +22,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * - restyle its items with the `--ui-sidebar-*` tokens, e.g.
  *   style={{ '--ui-sidebar-active': 'var(--ui-accent-soft)' }}
  *
- * Its parts are on it too: Sidebar.Section, Sidebar.Group, Sidebar.Item and
- * Sidebar.User are NavSection, NavGroup, NavItem and SidebarUser.
+ * Its parts are on it: Sidebar.Section, Sidebar.Group, Sidebar.Item and
+ * Sidebar.User (also exported as NavSection, NavGroup, NavItem and SidebarUser).
  */
 import { useMemo, useState } from 'react';
 import '../icons.js';

package/dist/sidebar/SidebarUser.d.ts

@@ -3,7 +3,7 @@
  * it, opening a menu of account actions upwards (to the right in the rail,
  * where only the avatar shows).
  *
- *   <SidebarUser name="Ada Lovelace" description="ada@example.com" items={account} onSelect={run} />
+ *   <Sidebar.User name="Ada Lovelace" description="ada@example.com" items={account} onSelect={run} />
  *
  * It's a Menu with the user as its trigger: give it `items`, Menu's child
  * components, or both, and `onSelect` (the rest of Menu's props apply too).

package/dist/tabs/Tabs.d.ts

@@ -1,10 +1,10 @@
 /**
- * Tabs: the Tab children are the panels, and the tab list is built from
- * their labels.
+ * Tabs: the Tabs.Tab children (also Tab) are the panels, and the tab list
+ * is built from their labels.
  *
  *   <Tabs value={tab} onValueChange={setTab}>
- *     <Tab value="lessons" label="Lessons" icon="lucide:calendar">…</Tab>
- *     <Tab value="invoices" label="Invoices" count={2} countColor="danger">…</Tab>
+ *     <Tabs.Tab value="lessons" label="Lessons" icon="lucide:calendar">…</Tabs.Tab>
+ *     <Tabs.Tab value="invoices" label="Invoices" count={2} countColor="danger">…</Tabs.Tab>
  *   </Tabs>
  *
  * Arrow keys move between tabs (selecting as they go), Home/End jump to the
@@ -73,6 +73,7 @@ export type TabsProps = Omit<Ark.RootProps, 'value' | 'defaultValue' | 'onValueC
 };
 declare function TabsShortcut({ value, defaultValue, onValueChange, variant, counts, renderTrigger, className, classes, children, ...rest }: TabsProps): import("react").JSX.Element;
 export declare const Tabs: typeof TabsShortcut & {
+    Tab: typeof Tab;
     Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLDivElement>>;
     List: import("react").ForwardRefExoticComponent<Ark.ListProps & import("react").RefAttributes<HTMLDivElement>>;
     Trigger: import("react").ForwardRefExoticComponent<Ark.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/tabs/Tabs.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Tabs: the Tab children are the panels, and the tab list is built from
- * their labels.
+ * Tabs: the Tabs.Tab children (also Tab) are the panels, and the tab list
+ * is built from their labels.
  *
  *   <Tabs value={tab} onValueChange={setTab}>
- *     <Tab value="lessons" label="Lessons" icon="lucide:calendar">…</Tab>
- *     <Tab value="invoices" label="Invoices" count={2} countColor="danger">…</Tab>
+ *     <Tabs.Tab value="lessons" label="Lessons" icon="lucide:calendar">…</Tabs.Tab>
+ *     <Tabs.Tab value="invoices" label="Invoices" count={2} countColor="danger">…</Tabs.Tab>
  *   </Tabs>
  *
  * Arrow keys move between tabs (selecting as they go), Home/End jump to the
@@ -80,6 +80,7 @@ function TabsShortcut({ value, defaultValue, onValueChange, variant = 'line', co
                     }), _jsx(Ark.Indicator, { ...part('indicator') })] }), _jsx("div", { ...part('panels'), children: children })] }));
 }
 export const Tabs = withParts(TabsShortcut, {
+    Tab,
     Root: Ark.Root,
     List: Ark.List,
     Trigger: Ark.Trigger,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milktop/react-ui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "React components on Ark UI (Zag state machines), with imba-ui's API and design",
   "license": "MIT",
   "author": "André Goldstein",