@milktop/react-ui 0.0.0-stage → 0.1.2

package/dist/hover-card/HoverCard.d.ts

@@ -0,0 +1,47 @@
+/**
+ * A richer preview that opens while the pointer rests on (or keyboard focus
+ * is on) a trigger, e.g. a person's details over their name.
+ *
+ *   <HoverCard trigger={<a href="/students/1">Ada Lovelace</a>}>…card content…</HoverCard>
+ *
+ * It stays open while the pointer is over the card, so its content can be
+ * selected or clicked. Keep anything essential reachable another way (touch
+ * has no hover).
+ *
+ * - `trigger`: your link or button (it gets the trigger's props)
+ * - `placement`: 'bottom' (default), 'top', 'right-start', …
+ * - `openDelay`, `closeDelay`: in ms (400 and 200)
+ * - `arrow`: points the card at its trigger; `disabled`
+ * - `open`, `defaultOpen`; `onOpenChange`
+ *
+ * By hand: HoverCard.Root, Trigger, Positioner, Content, Arrow, ArrowTip.
+ */
+import type { ReactElement, ReactNode } from 'react';
+import { HoverCard as Ark, type HoverCardOpenChangeDetails } from '@ark-ui/react/hover-card';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './hover-card.css';
+export type HoverCardProps = Omit<Ark.ContentProps, 'children'> & {
+    trigger?: ReactElement | null;
+    placement?: NonNullable<Ark.RootProps['positioning']>['placement'];
+    openDelay?: number;
+    closeDelay?: number;
+    arrow?: boolean;
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, details: HoverCardOpenChangeDetails) => void;
+    classes?: Classes<'positioner' | 'content' | 'arrow' | 'arrowTip'>;
+    children?: ReactNode;
+};
+declare function HoverCardShortcut({ trigger, placement, openDelay, closeDelay, arrow, disabled, open, defaultOpen, onOpenChange, className, classes, children, ...rest }: HoverCardProps): import("react").JSX.Element;
+export declare const HoverCard: typeof HoverCardShortcut & {
+    Root: (props: Ark.RootProps) => import("react").JSX.Element;
+    Trigger: import("react").ForwardRefExoticComponent<Ark.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Ark.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Ark.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Ark.ArrowProps & import("react").RefAttributes<HTMLDivElement>>;
+    ArrowTip: import("react").ForwardRefExoticComponent<Ark.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+};
+export {};

package/dist/hover-card/HoverCard.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HoverCard as Ark } from '@ark-ui/react/hover-card';
+import { cx, on, partsOf, withParts } from '../utils.js';
+import '../theme.css';
+import './hover-card.css';
+function HoverCardShortcut({ trigger = null, placement = 'bottom', openDelay = 400, closeDelay = 200, arrow = false, disabled = false, open, defaultOpen, onOpenChange, className, classes, children, ...rest }) {
+    const part = partsOf('hover-card', classes);
+    return (_jsxs(Ark.Root, { openDelay: openDelay, closeDelay: closeDelay, disabled: disabled, lazyMount: true, unmountOnExit: true, positioning: { placement, strategy: 'fixed', gutter: 8 }, ...(open !== undefined && { open }), ...(defaultOpen !== undefined && { defaultOpen }), ...on('onOpenChange', onOpenChange, (details) => details.open), children: [trigger && _jsx(Ark.Trigger, { asChild: true, children: trigger }), _jsx(Ark.Positioner, { ...part('positioner'), children: _jsxs(Ark.Content, { ...rest, ...part('content'), className: cx(className, classes?.content), children: [arrow && _jsx(Ark.Arrow, { ...part('arrow'), children: _jsx(Ark.ArrowTip, { ...part('arrow-tip') }) }), children] }) })] }));
+}
+export const HoverCard = withParts(HoverCardShortcut, {
+    Root: Ark.Root,
+    Trigger: Ark.Trigger,
+    Positioner: Ark.Positioner,
+    Content: Ark.Content,
+    Arrow: Ark.Arrow,
+    ArrowTip: Ark.ArrowTip,
+    Context: Ark.Context,
+});

package/dist/hover-card/hover-card.css

@@ -0,0 +1,19 @@
+@layer ui {
+  /* Zag copies the content's z-index onto its positioner. */
+  [data-scope=hover-card][data-part=content] {
+    z-index: 50; font-weight: 400; width: 18rem; max-width: calc(100vw - 32px); padding: 1rem; box-sizing: border-box; outline: none;
+    background: var(--ui-surface); color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
+    border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px); box-shadow: var(--ui-shadow);
+    --arrow-size: 12px; --arrow-background: var(--ui-surface); transform-origin: var(--transform-origin);
+    /* Comes in from the trigger's side. */
+    &[data-placement^=bottom] { --dy: -4px; }
+    &[data-placement^=top] { --dy: 4px; }
+    &[data-placement^=right] { --dx: -4px; }
+    &[data-placement^=left] { --dx: 4px; }
+    &[data-state=open] { animation: ui-hover-card-in 150ms ease-out; }
+    &[data-state=closed] { animation: ui-hover-card-out 120ms ease-in forwards; }
+  }
+  [data-scope=hover-card][data-part=arrow-tip] { border-top: 1px solid var(--ui-border); border-left: 1px solid var(--ui-border); }
+  @keyframes ui-hover-card-in { from { opacity: 0; transform: translateY(var(--dy, 0)) translateX(var(--dx, 0)) scale(0.97); } }
+  @keyframes ui-hover-card-out { to { opacity: 0; transform: scale(0.97); } }
+}

package/dist/index.d.ts

@@ -0,0 +1,84 @@
+/// <reference path="./css.d.ts" />
+export { Button } from './button/Button.js';
+export { CopyButton } from './copy-button/CopyButton.js';
+export { Badge } from './badge/Badge.js';
+export { Card } from './card/Card.js';
+export { Alert } from './alert/Alert.js';
+export { Progress } from './progress/Progress.js';
+export { Skeleton } from './skeleton/Skeleton.js';
+export { Spinner } from './spinner/Spinner.js';
+export { EmptyState } from './empty-state/EmptyState.js';
+export { Input } from './input/Input.js';
+export { Textarea } from './textarea/Textarea.js';
+export { PasswordInput } from './password-input/PasswordInput.js';
+export { NumberInput } from './number-input/NumberInput.js';
+export { PinInput } from './pin-input/PinInput.js';
+export { TagsInput } from './tags-input/TagsInput.js';
+export { Slider } from './slider/Slider.js';
+export { FileUpload } from './file-upload/FileUpload.js';
+export { Field, Fields } from './field/Field.js';
+export { Select, Combobox, createListCollection } from './select/Select.js';
+export { DatePicker, parseDate } from './date-picker/DatePicker.js';
+export { Checkbox } from './checkbox/Checkbox.js';
+export { CheckboxGroup } from './checkbox/CheckboxGroup.js';
+export { Switch } from './switch/Switch.js';
+export { RadioGroup } from './radio-group/RadioGroup.js';
+export { Segmented } from './segment-group/Segmented.js';
+export { ThemeToggle } from './theme-toggle/ThemeToggle.js';
+export { colorScheme, useColorScheme, type Scheme } from './color-scheme.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 { Tabs, Tab } from './tabs/Tabs.js';
+export { Dialog } from './dialog/Dialog.js';
+export { confirm, type ConfirmOptions } from './confirm/confirm.js';
+export { Sheet } from './sheet/Sheet.js';
+export { Popover } from './popover/Popover.js';
+export { HoverCard } from './hover-card/HoverCard.js';
+export { Toaster, Toast, toaster, createToaster } from './toast/Toaster.js';
+export { ActionBar } from './action-bar/ActionBar.js';
+export { Avatar } from './avatar/Avatar.js';
+export { AvatarGroup } from './avatar/AvatarGroup.js';
+export { AppShell, useShell } from './app-shell/AppShell.js';
+export { Topbar } from './app-shell/Topbar.js';
+export { Sidebar, type SidebarSection, type SidebarLink } from './sidebar/Sidebar.js';
+export { NavSection } from './sidebar/NavSection.js';
+export { NavGroup } from './sidebar/NavGroup.js';
+export { NavItem } from './sidebar/NavItem.js';
+export { SidebarUser } from './sidebar/SidebarUser.js';
+export { Page } from './page/Page.js';
+export { Breadcrumbs, type Crumb } from './breadcrumbs/Breadcrumbs.js';
+export { Command, formatHotkey, type CommandItem } from './command/Command.js';
+export { Table, sortRows, cellValue, type TableColumn, type TableSort } from './table/Table.js';
+export { Pagination } from './pagination/Pagination.js';
+export { DataList, DataItem, type DataEntry } from './data-list/DataList.js';
+export { Stat } from './stat/Stat.js';
+export { Stats } from './stat/Stats.js';
+export { Timeline, TimelineItem } from './timeline/Timeline.js';
+export { Accordion, AccordionItem, type AccordionEntry } from './accordion/Accordion.js';
+export { Collapsible } from './collapsible/Collapsible.js';
+export { SortableList } from './sortable-list/SortableList.js';
+export { EventCalendar, type CalendarEvent, type CalendarResource, type CalendarView, type CalendarChange, type CalendarSelection, type CalendarKeys, type CalendarRow, type CalendarQuery, type CalendarTranslations, type CalendarMenuItem, } from './event-calendar/EventCalendar.js';
+export { Attachments, formatSize, type Attachment, type AttachmentRejection } from './attachments/Attachments.js';
+export { Banner } from './banner/Banner.js';
+export { Kbd } from './kbd/Kbd.js';
+export { Divider } from './divider/Divider.js';
+export { FormatNumber, FormatBytes, FormatRelative } from './format/FormatNumber.js';
+export { formatNumber, formatBytes, formatRelative, type FormatNumberOptions } from './format/format.js';
+export { LocaleProvider, useLocale, useMessages, type LocaleProviderProps } from './format/LocaleProvider.js';
+export { en, fr, type Messages, type CalendarMessages, type DeepPartial } from './format/messages.js';
+export { RollingNumber } from './rolling-number/RollingNumber.js';
+export { Prose } from './prose/Prose.js';
+export { Highlight, type HighlightProps, type HighlightColor } from './highlight/Highlight.js';
+export { NativeSelect } from './native-select/NativeSelect.js';
+export { Editable } from './editable/Editable.js';
+export { TimeInput } from './time-input/TimeInput.js';
+export { SwatchPicker, swatches, type Swatch } from './swatch-picker/SwatchPicker.js';
+export { TreeView, createTreeCollection as createTreeViewCollection, type TreeItem } from './tree-view/TreeView.js';
+export { Editor, defaultTools, type EditorTool, type UploadedImage } from './editor/Editor.js';
+export { AreaChart } from './chart/AreaChart.js';
+export { BarChart } from './chart/BarChart.js';
+export { Sparkline } from './chart/Sparkline.js';
+export { DonutChart, type DonutSlice } from './chart/DonutChart.js';
+export type { ChartRow, ChartSeries } from './chart/chart.js';
+export { Portal } from '@ark-ui/react/portal';
+export { cx } from './utils.js';

package/dist/index.js

@@ -0,0 +1,85 @@
+// Every component is a shortcut (<Checkbox label="…" />) with its parts on it,
+// for building it by hand (<Checkbox.Root>…</Checkbox.Root>).
+export { Button } from './button/Button.js';
+export { CopyButton } from './copy-button/CopyButton.js';
+export { Badge } from './badge/Badge.js';
+export { Card } from './card/Card.js';
+export { Alert } from './alert/Alert.js';
+export { Progress } from './progress/Progress.js';
+export { Skeleton } from './skeleton/Skeleton.js';
+export { Spinner } from './spinner/Spinner.js';
+export { EmptyState } from './empty-state/EmptyState.js';
+export { Input } from './input/Input.js';
+export { Textarea } from './textarea/Textarea.js';
+export { PasswordInput } from './password-input/PasswordInput.js';
+export { NumberInput } from './number-input/NumberInput.js';
+export { PinInput } from './pin-input/PinInput.js';
+export { TagsInput } from './tags-input/TagsInput.js';
+export { Slider } from './slider/Slider.js';
+export { FileUpload } from './file-upload/FileUpload.js';
+export { Field, Fields } from './field/Field.js';
+export { Select, Combobox, createListCollection } from './select/Select.js';
+export { DatePicker, parseDate } from './date-picker/DatePicker.js';
+export { Checkbox } from './checkbox/Checkbox.js';
+export { CheckboxGroup } from './checkbox/CheckboxGroup.js';
+export { Switch } from './switch/Switch.js';
+export { RadioGroup } from './radio-group/RadioGroup.js';
+export { Segmented } from './segment-group/Segmented.js';
+export { ThemeToggle } from './theme-toggle/ThemeToggle.js';
+export { colorScheme, useColorScheme } from './color-scheme.js';
+export { Tooltip } from './tooltip/Tooltip.js';
+export { Menu, ContextMenu, MenuItem, MenuSeparator, MenuGroup, MenuCheckbox, MenuRadioGroup, MenuRadio, Submenu, } from './menu/Menu.js';
+export { Tabs, Tab } from './tabs/Tabs.js';
+export { Dialog } from './dialog/Dialog.js';
+export { confirm } from './confirm/confirm.js';
+export { Sheet } from './sheet/Sheet.js';
+export { Popover } from './popover/Popover.js';
+export { HoverCard } from './hover-card/HoverCard.js';
+export { Toaster, Toast, toaster, createToaster } from './toast/Toaster.js';
+export { ActionBar } from './action-bar/ActionBar.js';
+export { Avatar } from './avatar/Avatar.js';
+export { AvatarGroup } from './avatar/AvatarGroup.js';
+export { AppShell, useShell } from './app-shell/AppShell.js';
+export { Topbar } from './app-shell/Topbar.js';
+export { Sidebar } from './sidebar/Sidebar.js';
+export { NavSection } from './sidebar/NavSection.js';
+export { NavGroup } from './sidebar/NavGroup.js';
+export { NavItem } from './sidebar/NavItem.js';
+export { SidebarUser } from './sidebar/SidebarUser.js';
+export { Page } from './page/Page.js';
+export { Breadcrumbs } from './breadcrumbs/Breadcrumbs.js';
+export { Command, formatHotkey } from './command/Command.js';
+export { Table, sortRows, cellValue } from './table/Table.js';
+export { Pagination } from './pagination/Pagination.js';
+export { DataList, DataItem } from './data-list/DataList.js';
+export { Stat } from './stat/Stat.js';
+export { Stats } from './stat/Stats.js';
+export { Timeline, TimelineItem } from './timeline/Timeline.js';
+export { Accordion, AccordionItem } from './accordion/Accordion.js';
+export { Collapsible } from './collapsible/Collapsible.js';
+export { SortableList } from './sortable-list/SortableList.js';
+export { EventCalendar, } from './event-calendar/EventCalendar.js';
+export { Attachments, formatSize } from './attachments/Attachments.js';
+export { Banner } from './banner/Banner.js';
+export { Kbd } from './kbd/Kbd.js';
+export { Divider } from './divider/Divider.js';
+export { FormatNumber, FormatBytes, FormatRelative } from './format/FormatNumber.js';
+export { formatNumber, formatBytes, formatRelative } from './format/format.js';
+export { LocaleProvider, useLocale, useMessages } from './format/LocaleProvider.js';
+export { en, fr } from './format/messages.js';
+export { RollingNumber } from './rolling-number/RollingNumber.js';
+export { Prose } from './prose/Prose.js';
+export { Highlight } from './highlight/Highlight.js';
+export { NativeSelect } from './native-select/NativeSelect.js';
+export { Editable } from './editable/Editable.js';
+export { TimeInput } from './time-input/TimeInput.js';
+export { SwatchPicker, swatches } from './swatch-picker/SwatchPicker.js';
+export { TreeView, createTreeCollection as createTreeViewCollection } from './tree-view/TreeView.js';
+export { Editor, defaultTools } from './editor/Editor.js';
+export { AreaChart } from './chart/AreaChart.js';
+export { BarChart } from './chart/BarChart.js';
+export { Sparkline } from './chart/Sparkline.js';
+export { DonutChart } from './chart/DonutChart.js';
+// Ark's Portal, for overlays built by hand.
+export { Portal } from '@ark-ui/react/portal';
+export { cx } from './utils.js';

package/dist/input/Input.d.ts

@@ -0,0 +1,41 @@
+import type { ComponentProps, HTMLInputTypeAttribute, ReactNode } from 'react';
+import { Field } from '@ark-ui/react/field';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './input.css';
+type KnownType<T = HTMLInputTypeAttribute> = T extends unknown ? (string extends T ? never : T) : never;
+type Typed = {
+    type: 'number';
+    onValueChange?: (value: number) => void;
+} | {
+    type?: Exclude<KnownType, 'number'>;
+    onValueChange?: (value: string) => void;
+};
+export type InputProps = Omit<ComponentProps<'input'>, 'size' | 'prefix' | 'type'> & Typed & {
+    label?: ReactNode;
+    icon?: string | null;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    start?: ReactNode;
+    end?: ReactNode;
+    size?: 'sm' | 'md';
+    round?: boolean;
+    classes?: Classes<'root' | 'label' | 'control' | 'icon' | 'prefix' | 'input' | 'suffix'>;
+};
+declare function InputShortcut({ label, type, icon, prefix, suffix, size, round, start, end, onValueChange, onChange, className, classes, ...rest }: InputProps): import("react").JSX.Element;
+export declare const Input: typeof InputShortcut & {
+    Root: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Control: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Field: {
+        (props: Field.InputProps & import("react").RefAttributes<HTMLInputElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export {};

package/dist/input/Input.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A text input: a box holding a native <input>, with optional content before
+ * and after it. Other attributes (placeholder, name, autoComplete, onChange…)
+ * go on the <input>.
+ *
+ *   <Input label="Name" value={name} onValueChange={setName} />
+ *   <Input icon="lucide:search" placeholder="Search…" />
+ *
+ * - `label`: a label above it (skipped inside a Field)
+ * - `value`, `defaultValue`: as on a native input
+ * - `onValueChange`: called with the new value (a number for type="number")
+ * - `type`: as on a native input
+ * - `icon`: an Iconify name shown before the input
+ * - `prefix`, `suffix`: text before or after it ('£', 'kg')
+ * - `start`, `end`: anything else before or after it (a button)
+ * - `size`: 'sm' or 'md'; `round`: a pill (a search box)
+ *
+ * By hand:
+ *
+ *   <Input.Root data-size="sm">
+ *     <Input.Control><Input.Field placeholder="…" /><Button size="sm">Go</Button></Input.Control>
+ *   </Input.Root>
+ */
+import { useId } from 'react';
+import { Field, useFieldContext } from '@ark-ui/react/field';
+import 'iconify-icon';
+import { cx, partOf, partsOf, withParts } from '../utils.js';
+import '../theme.css';
+import './input.css';
+function InputShortcut({ label = null, type = 'text', icon = null, prefix = null, suffix = null, size = 'md', round = false, start = null, end = null, onValueChange, onChange, className, classes, ...rest }) {
+    const field = useFieldContext();
+    const part = partsOf('input', classes);
+    const ownId = useId();
+    const id = rest.id ?? `${ownId}-input`;
+    function change(e) {
+        onChange?.(e);
+        const handler = onValueChange;
+        handler?.(type === 'number' ? e.target.valueAsNumber : e.target.value);
+    }
+    return (_jsxs("div", { ...part('root'), className: cx(className, classes?.root), "data-size": size, "data-round": round || undefined, children: [label && !field && _jsx("label", { ...part('label'), htmlFor: id, children: label }), _jsxs("div", { ...part('control'), children: [start ?? (icon ? _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" })
+                        : prefix != null && _jsx("span", { ...part('prefix'), children: prefix })), _jsx(Field.Input, { type: type, id: field ? undefined : id, ...rest, ...part('input'), onChange: change }), end ?? (suffix != null && _jsx("span", { ...part('suffix'), children: suffix }))] })] }));
+}
+export const Input = withParts(InputShortcut, {
+    Root: partOf('input', 'root'),
+    Control: partOf('input', 'control'),
+    Field: partOf('input', 'input', Field.Input),
+});

package/dist/input/input.css

@@ -0,0 +1,25 @@
+@layer ui {
+  [data-scope=input][data-part=root] { display: block; min-width: 0; color: var(--ui-text); font-family: var(--ui-font); }
+  [data-scope=input][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
+  [data-scope=input][data-part=control] {
+    display: flex; align-items: center; gap: 0.5rem; min-width: 0; box-sizing: border-box;
+    min-height: var(--ui-control-height); padding: 0 0.75rem;
+    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
+    color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
+
+    &:focus-within { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
+    &:has([aria-invalid=true]) { border-color: var(--ui-danger); }
+    &:has(:disabled) { opacity: 0.5; }
+    [data-round] > & { border-radius: 9999px; padding: 0 0.875rem; }
+    [data-size=sm] > & { min-height: var(--ui-control-height-sm); padding: 0 0.625rem; font-size: 13px; }
+  }
+
+  [data-scope=input][data-part=input] { flex: 1; min-width: 0; padding: 0; border: none; background: transparent;
+    outline: none; color: inherit; font: inherit;
+    &::placeholder { color: var(--ui-muted); }
+    &[type=number] { appearance: textfield; }
+    &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { appearance: none; margin: 0; } }
+  [data-scope=input]:is([data-part=prefix], [data-part=suffix]) { display: flex; align-items: center; flex-shrink: 0;
+    color: var(--ui-muted); white-space: nowrap; }
+  [data-scope=input][data-part=icon] { display: block; width: 1em; height: 1em; font-size: 16px; color: var(--ui-muted); flex-shrink: 0; }
+}

package/dist/kbd/Kbd.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A keyboard key, or a shortcut of several.
+ *
+ *   <Kbd>Esc</Kbd>
+ *   <Kbd keys={['⌘', 'K']} />
+ *
+ * - `keys`: several keys, each in its own box (the content, if given, is one key)
+ * - `size`: 'sm' or 'md'
+ */
+import { type HTMLAttributes } from 'react';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './kbd.css';
+export type KbdProps = HTMLAttributes<HTMLElement> & {
+    keys?: string[] | null;
+    size?: 'sm' | 'md';
+    classes?: Classes<'root' | 'key'>;
+};
+export declare function Kbd({ keys, size, className, classes, children, ...rest }: KbdProps): import("react").JSX.Element;

package/dist/kbd/Kbd.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A keyboard key, or a shortcut of several.
+ *
+ *   <Kbd>Esc</Kbd>
+ *   <Kbd keys={['⌘', 'K']} />
+ *
+ * - `keys`: several keys, each in its own box (the content, if given, is one key)
+ * - `size`: 'sm' or 'md'
+ */
+import { Fragment } from 'react';
+import { cx, partsOf } from '../utils.js';
+import '../theme.css';
+import './kbd.css';
+export function Kbd({ keys = null, size = 'md', className, classes, children, ...rest }) {
+    const part = partsOf('kbd', classes);
+    if (!keys)
+        return _jsx("kbd", { ...rest, ...part('key'), className: cx(className, classes?.key), "data-size": size, children: children });
+    return (_jsx("span", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-size": size, children: keys.map((key, i) => _jsx(Fragment, { children: _jsx("kbd", { ...part('key'), "data-size": size, children: key }) }, i)) }));
+}

package/dist/kbd/kbd.css

@@ -0,0 +1,8 @@
+@layer ui {
+  [data-scope=kbd][data-part=root] { display: inline-flex; align-items: center; gap: 0.1875rem; vertical-align: middle; }
+  [data-scope=kbd][data-part=key] { display: inline-flex; align-items: center; justify-content: center; min-width: 1.375rem; height: 1.375rem;
+    padding: 0 0.375rem; box-sizing: border-box; vertical-align: middle;
+    border: 1px solid var(--ui-border); border-bottom-width: 2px; border-radius: 5px; background: var(--ui-surface);
+    color: var(--ui-muted); font-family: var(--ui-font); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
+    &[data-size=sm] { min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem; font-size: 11px; border-bottom-width: 1px; } }
+}