@milktop/react-ui 0.2.2 → 0.2.4

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/command/Command.d.ts

@@ -11,8 +11,10 @@
  *   the item is listed under), `icon`, `description`, `shortcut` text,
  *   `keywords` (extra words to match) and `disabled`. An item with `href`
  *   goes there when picked
- * - `load`: optional async function(query) returning items, for server
- *   search (debounced by `debounce` ms, `loadingText` meanwhile)
+ * - `load`: optional async function(query) returning more items, for server
+ *   search (debounced by `debounce` ms, `loadingText` meanwhile). They're
+ *   listed after the matching `items`, which filter as you type while the
+ *   search runs
  * - `onSelect`: called with the item's `value` (or the item, if it has none)
  * - `trigger`: the element that opens it (it gets the trigger's props)
  * - `open`, `defaultOpen`; `onOpenChange`: called with the new open state

package/dist/command/Command.js

@@ -12,8 +12,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   the item is listed under), `icon`, `description`, `shortcut` text,
  *   `keywords` (extra words to match) and `disabled`. An item with `href`
  *   goes there when picked
- * - `load`: optional async function(query) returning items, for server
- *   search (debounced by `debounce` ms, `loadingText` meanwhile)
+ * - `load`: optional async function(query) returning more items, for server
+ *   search (debounced by `debounce` ms, `loadingText` meanwhile). They're
+ *   listed after the matching `items`, which filter as you type while the
+ *   search runs
  * - `onSelect`: called with the item's `value` (or the item, if it has none)
  * - `trigger`: the element that opens it (it gets the trigger's props)
  * - `open`, `defaultOpen`; `onOpenChange`: called with the new open state
@@ -41,9 +43,11 @@ export function formatHotkey(key = 'k') {
     return mac ? `⌘${key.toUpperCase()}` : `Ctrl ${key.toUpperCase()}`;
 }
 const keyOf = (item) => String(item.value ?? item.href ?? item.label);
+// Lowercase without accents, so "tache" finds "Tâches"
+const fold = (text) => text.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase();
 // Every word typed must appear in the label, description, group or keywords.
 function matches(item, words) {
-    const text = [item.label, item.description, item.group, ...(item.keywords ?? [])].join(' ').toLowerCase();
+    const text = fold([item.label, item.description, item.group, ...(item.keywords ?? [])].join(' '));
     return words.every((word) => text.includes(word));
 }
 function go(href) {
@@ -68,8 +72,11 @@ export function Command({ items = [], load = null, debounce = 200, onSelect, tri
     const listEl = useRef(null);
     const ticket = useRef(0);
     const timer = useRef(undefined);
-    const words = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
-    const found = load ? loaded : words.length ? items.filter((item) => matches(item, words)) : items;
+    // The items filter at once; loaded results from the last search stay
+    // below them until the new ones arrive.
+    const words = fold(query).split(/\s+/).filter(Boolean);
+    const local = words.length ? items.filter((item) => matches(item, words)) : items;
+    const found = load ? [...local, ...loaded] : local;
     // Results in group order (by first appearance), so the list reads and the
     // arrow keys move the same way.
     const groups = [...new Set(found.map((item) => item.group ?? ''))]

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.4",
   "description": "React components on Ark UI (Zag state machines), with imba-ui's API and design",
   "license": "MIT",
   "author": "André Goldstein",