@milktop/react-ui 0.2.2 → 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/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.2",
+  "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",