@misoto22/design 0.3.1

package/dist/components/Combobox/Combobox.js

@@ -0,0 +1,151 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../../lib/cn.js";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "../Command/Command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover.js";
+const SUMMARISE_AFTER = 2;
+function Combobox(props) {
+  const {
+    options,
+    label,
+    placeholder = "Select\u2026",
+    searchPlaceholder = "Search\u2026",
+    emptyMessage = "Nothing matches.",
+    disabled = false,
+    className
+  } = props;
+  const multiple = props.multiple === true;
+  const [open, setOpen] = useState(false);
+  const [uncontrolled, setUncontrolled] = useState(() => {
+    if (props.multiple === true) return props.defaultValue ?? [];
+    return props.defaultValue ? [props.defaultValue] : [];
+  });
+  const controlled = props.multiple === true ? props.value : props.value === void 0 ? void 0 : props.value === "" ? [] : [props.value];
+  const current = controlled ?? uncontrolled;
+  const commit = (next) => {
+    if (controlled === void 0) setUncontrolled(next);
+    if (props.multiple === true) props.onValueChange?.(next);
+    else props.onValueChange?.(next[0] ?? "");
+  };
+  const choose = (option) => {
+    if (multiple) {
+      commit(current.includes(option) ? current.filter((v) => v !== option) : [...current, option]);
+      return;
+    }
+    commit(current.includes(option) ? [] : [option]);
+    setOpen(false);
+  };
+  const chosen = options.filter((option) => current.includes(option.value));
+  const summary = chosen.length === 0 ? placeholder : chosen.length <= SUMMARISE_AFTER ? chosen.map((option) => option.label).join(", ") : `${chosen.length} selected`;
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(
+      PopoverTrigger,
+      {
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-label": label,
+        disabled,
+        className: cn(
+          "group flex w-full items-center justify-between gap-2 rounded-(--radius) border border-(--rule-2) bg-(--paper) px-(--field-px) py-(--field-py) text-start text-sm transition-colors duration-(--duration-fast) hover:border-(--rule-hard) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none",
+          chosen.length > 0 ? "text-(--ink)" : "text-(--ink-3-aa)",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: summary }),
+          /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [
+            multiple && chosen.length > 0 && // A `<span role="button">` rather than a nested `<button>`, which
+            // is invalid inside the trigger and which browsers reparent — the
+            // clear control then falls outside the field entirely.
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "button",
+                tabIndex: 0,
+                "aria-label": `Clear ${label}`,
+                onClick: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  commit([]);
+                },
+                onKeyDown: (event) => {
+                  if (event.key !== "Enter" && event.key !== " ") return;
+                  event.preventDefault();
+                  event.stopPropagation();
+                  commit([]);
+                },
+                className: "grid size-5 cursor-pointer place-items-center rounded-full text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)",
+                children: /* @__PURE__ */ jsx(X, { size: 12, strokeWidth: 2, "aria-hidden": true })
+              }
+            ),
+            /* @__PURE__ */ jsx(ChevronsUpDown, { size: 14, strokeWidth: 1.5, "aria-hidden": true, className: "text-(--ink-3-aa)" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        label,
+        className: "w-(--radix-popover-trigger-width) overflow-hidden p-0",
+        align: "start",
+        children: /* @__PURE__ */ jsxs(Command, { label: `${label}: ${searchPlaceholder}`, className: "rounded-none border-0", children: [
+          /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }),
+          /* @__PURE__ */ jsxs(CommandList, { children: [
+            /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
+            /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
+              const selected = current.includes(option.value);
+              return /* @__PURE__ */ jsxs(
+                CommandItem,
+                {
+                  value: option.value,
+                  keywords: [option.label, ...option.keywords ?? []],
+                  disabled: option.disabled,
+                  onSelect: choose,
+                  "aria-selected": selected,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "grid size-4 shrink-0 place-items-center transition-opacity duration-(--duration-fast)",
+                          multiple && "rounded-(--radius-sm) border border-(--rule-2) text-(--accent-foreground) data-[on=true]:border-(--accent) data-[on=true]:bg-(--accent)"
+                        ),
+                        "data-on": selected,
+                        children: /* @__PURE__ */ jsx(
+                          Check,
+                          {
+                            size: 12,
+                            strokeWidth: 2.5,
+                            "aria-hidden": true,
+                            className: selected ? "opacity-100" : "opacity-0"
+                          }
+                        )
+                      }
+                    ),
+                    option.label
+                  ]
+                },
+                option.value
+              );
+            }) })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+var Combobox_default = Combobox;
+export {
+  Combobox,
+  Combobox_default as default
+};
+//# sourceMappingURL=Combobox.js.map

package/dist/components/Combobox/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["'use client'\n\nimport { Check, ChevronsUpDown, X } from 'lucide-react'\nimport { useState } from 'react'\nimport { cn } from '../../lib/cn'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '../Command/Command'\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover'\n\nexport interface ComboboxOption {\n  value: string\n  label: string\n  /** Extra text matched by the filter but not shown as the label. */\n  keywords?: string[]\n  disabled?: boolean\n}\n\ninterface CommonProps {\n  options: ComboboxOption[]\n  /** Names the control. Required — the trigger's text is a value, not a label. */\n  label: string\n  /** Shown on the trigger when nothing is chosen. */\n  placeholder?: string\n  /** Placeholder inside the filter field. */\n  searchPlaceholder?: string\n  /** Shown when the filter matches nothing. Say what WOULD match. */\n  emptyMessage?: string\n  disabled?: boolean\n  className?: string\n}\n\ninterface SingleProps extends CommonProps {\n  multiple?: false\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\ninterface MultipleProps extends CommonProps {\n  /**\n   * Several at once. The trigger then summarises the choice rather than naming\n   * it — \"3 selected\" past a threshold, because a trigger that grows with its\n   * value reflows the form every time someone picks another one.\n   */\n  multiple: true\n  value?: string[]\n  defaultValue?: string[]\n  onValueChange?: (value: string[]) => void\n}\n\nexport type ComboboxProps = SingleProps | MultipleProps\n\n/** How many labels the trigger prints before it starts counting instead. */\nconst SUMMARISE_AFTER = 2\n\n/**\n * A select you can type into, choosing one or several.\n *\n * The line against `Select` is length, and it is not a matter of taste: a\n * styled select is better up to roughly a dozen options, because a list nobody\n * can filter is faster to scan than one they have to think about. Past that,\n * this is the right answer.\n *\n * Filtering, the highlighted row and the arrow keys come from cmdk, which\n * implements the ARIA combobox pattern properly: the highlight moves through\n * `aria-activedescendant` while focus stays in the input. Hand-rolled comboboxes\n * move focus into the list instead, and the typed text stops being editable.\n *\n * Controlled or uncontrolled, like every other form control here.\n *\n * @example\n * <Combobox label=\"Framework\" options={FRAMEWORKS} placeholder=\"Pick one\" />\n * @example\n * <Combobox multiple label=\"Tags\" options={TAGS} />\n */\nexport function Combobox(props: ComboboxProps) {\n  const {\n    options,\n    label,\n    placeholder = 'Select…',\n    searchPlaceholder = 'Search…',\n    emptyMessage = 'Nothing matches.',\n    disabled = false,\n    className,\n  } = props\n  const multiple = props.multiple === true\n\n  const [open, setOpen] = useState(false)\n  const [uncontrolled, setUncontrolled] = useState<string[]>(() => {\n    if (props.multiple === true) return props.defaultValue ?? []\n    return props.defaultValue ? [props.defaultValue] : []\n  })\n\n  const controlled =\n    props.multiple === true\n      ? props.value\n      : props.value === undefined\n        ? undefined\n        : props.value === ''\n          ? []\n          : [props.value]\n  const current = controlled ?? uncontrolled\n\n  const commit = (next: string[]) => {\n    if (controlled === undefined) setUncontrolled(next)\n    if (props.multiple === true) props.onValueChange?.(next)\n    else props.onValueChange?.(next[0] ?? '')\n  }\n\n  const choose = (option: string) => {\n    if (multiple) {\n      // Toggling, and the panel stays open — picking three things should not\n      // cost three round trips through the trigger.\n      commit(current.includes(option) ? current.filter((v) => v !== option) : [...current, option])\n      return\n    }\n    // Choosing the selected option again clears it, which is what a reader\n    // expects from a control whose value is optional.\n    commit(current.includes(option) ? [] : [option])\n    setOpen(false)\n  }\n\n  const chosen = options.filter((option) => current.includes(option.value))\n  const summary =\n    chosen.length === 0\n      ? placeholder\n      : chosen.length <= SUMMARISE_AFTER\n        ? chosen.map((option) => option.label).join(', ')\n        : `${chosen.length} selected`\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        // A combobox trigger is a button that OPENS a listbox; the roles for\n        // the list itself belong to cmdk inside the panel.\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-label={label}\n        disabled={disabled}\n        className={cn(\n          'group flex w-full items-center justify-between gap-2 rounded-(--radius) border border-(--rule-2) bg-(--paper) px-(--field-px) py-(--field-py) text-start text-sm transition-colors duration-(--duration-fast) hover:border-(--rule-hard) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none',\n          chosen.length > 0 ? 'text-(--ink)' : 'text-(--ink-3-aa)',\n          className,\n        )}\n      >\n        <span className=\"truncate\">{summary}</span>\n        <span className=\"flex shrink-0 items-center gap-1\">\n          {multiple && chosen.length > 0 && (\n            // A `<span role=\"button\">` rather than a nested `<button>`, which\n            // is invalid inside the trigger and which browsers reparent — the\n            // clear control then falls outside the field entirely.\n            <span\n              role=\"button\"\n              tabIndex={0}\n              aria-label={`Clear ${label}`}\n              onClick={(event) => {\n                event.preventDefault()\n                event.stopPropagation()\n                commit([])\n              }}\n              onKeyDown={(event) => {\n                if (event.key !== 'Enter' && event.key !== ' ') return\n                event.preventDefault()\n                event.stopPropagation()\n                commit([])\n              }}\n              className=\"grid size-5 cursor-pointer place-items-center rounded-full text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n            >\n              <X size={12} strokeWidth={2} aria-hidden />\n            </span>\n          )}\n          <ChevronsUpDown size={14} strokeWidth={1.5} aria-hidden className=\"text-(--ink-3-aa)\" />\n        </span>\n      </PopoverTrigger>\n      <PopoverContent\n        label={label}\n        // `overflow-hidden` so the panel's own corners clip the square-cornered\n        // command list inside it; without it the list's edges poked through the\n        // radius and the two bottom corners looked chipped.\n        className=\"w-(--radix-popover-trigger-width) overflow-hidden p-0\"\n        align=\"start\"\n      >\n        <Command label={`${label}: ${searchPlaceholder}`} className=\"rounded-none border-0\">\n          {/* The panel's own name is \"<label>: <placeholder>\", set on Command\n              above. cmdk points the input's aria-labelledby at it, and\n              aria-labelledby beats aria-label — so naming the input directly\n              did nothing, and a screen reader met two comboboxes called \"Tags\",\n              one inside the other. */}\n          <CommandInput placeholder={searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{emptyMessage}</CommandEmpty>\n            <CommandGroup>\n              {options.map((option) => {\n                const selected = current.includes(option.value)\n                return (\n                  <CommandItem\n                    key={option.value}\n                    value={option.value}\n                    keywords={[option.label, ...(option.keywords ?? [])]}\n                    disabled={option.disabled}\n                    onSelect={choose}\n                    aria-selected={selected}\n                  >\n                    <span\n                      className={cn(\n                        'grid size-4 shrink-0 place-items-center transition-opacity duration-(--duration-fast)',\n                        multiple &&\n                          'rounded-(--radius-sm) border border-(--rule-2) text-(--accent-foreground) data-[on=true]:border-(--accent) data-[on=true]:bg-(--accent)',\n                      )}\n                      data-on={selected}\n                    >\n                      <Check\n                        size={12}\n                        strokeWidth={2.5}\n                        aria-hidden\n                        className={selected ? 'opacity-100' : 'opacity-0'}\n                      />\n                    </span>\n                    {option.label}\n                  </CommandItem>\n                )\n              })}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport default Combobox\n"],"mappings":"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","names":[]}

package/dist/components/Command/Command.d.ts

@@ -0,0 +1,98 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import { Command as Command$1 } from 'cmdk';
+
+/**
+ * A filterable list of actions — the ⌘K surface.
+ *
+ * Built on cmdk rather than on a `Select` or a menu, because the interaction is
+ * neither: the list is filtered as you type, the highlighted row moves with the
+ * arrow keys while focus STAYS in the input, and Enter runs the highlighted
+ * row. That is the ARIA combobox pattern, and it is the part nobody should
+ * hand-roll — `aria-activedescendant` moving without focus moving is precisely
+ * where a home-made palette stops working with a screen reader.
+ *
+ * @example
+ * <Command label="Command palette">
+ *   <CommandInput placeholder="Type a command…" />
+ *   <CommandList>
+ *     <CommandEmpty>Nothing matches.</CommandEmpty>
+ *     <CommandGroup heading="Navigate">
+ *       <CommandItem onSelect={go}>Components</CommandItem>
+ *     </CommandGroup>
+ *   </CommandList>
+ * </Command>
+ */
+declare function Command({ className, ...props }: ComponentProps<typeof Command$1>): react.JSX.Element;
+/** The filter field. Carries the search icon and the combobox semantics. */
+declare function CommandInput({ className, ...props }: ComponentProps<typeof Command$1.Input>): react.JSX.Element;
+declare function CommandList({ className, ...props }: ComponentProps<typeof Command$1.List>): react.JSX.Element;
+/** Shown when the filter matches nothing. Say what would match, not "no results". */
+declare function CommandEmpty(props: ComponentProps<typeof Command$1.Empty>): react.JSX.Element;
+/**
+ * The key-hint strip along the bottom.
+ *
+ * A palette is a keyboard surface whose keys are invisible: nothing on screen
+ * says the arrows move the row or that Enter runs it, and a reader who reaches
+ * for the mouse has been failed by the design rather than by themselves.
+ *
+ * @example
+ * <CommandFooter>
+ *   <CommandHint keys={['↑', '↓']}>navigate</CommandHint>
+ *   <CommandHint keys={['↵']}>open</CommandHint>
+ * </CommandFooter>
+ */
+declare function CommandFooter({ className, ...props }: ComponentProps<'div'>): react.JSX.Element;
+interface CommandHintProps extends Omit<ComponentProps<'span'>, 'children'> {
+    /** The keys this hint describes, printed as `Kbd` chips. */
+    keys: string[];
+    /** What they do — a verb, lowercase, no sentence. */
+    children: ReactNode;
+}
+/** One key-and-verb pair inside a `CommandFooter`. */
+declare function CommandHint({ keys, children, className, ...props }: CommandHintProps): react.JSX.Element;
+declare function CommandGroup({ className, ...props }: ComponentProps<typeof Command$1.Group>): react.JSX.Element;
+/**
+ * A divider between groups.
+ *
+ * Marked presentational, because ARIA permits a `listbox` to contain only
+ * `option` and `group` — and the library renders this as `role="separator"`,
+ * which puts a critical `aria-required-children` violation inside every palette
+ * that uses one. The grouping is already announced by the groups themselves, so
+ * removing the divider from the accessibility tree loses nothing.
+ */
+declare function CommandSeparator({ className, ...props }: ComponentProps<typeof Command$1.Separator>): react.JSX.Element;
+interface CommandItemProps extends ComponentProps<typeof Command$1.Item> {
+    /** A shortcut printed at the end of the row. */
+    shortcut?: string;
+    /**
+     * A leading glyph. Pass the icon element, sized 16.
+     *
+     * It is what makes a long list scannable — the eye sorts by shape before it
+     * reads, and forty identical rows of text defeat that.
+     */
+    icon?: ReactNode;
+    /**
+     * A quiet note at the end of the row — what kind of thing this is, or its
+     * current state. Not a description: a palette that prints a sentence per row
+     * stops being scannable at about six of them.
+     */
+    meta?: ReactNode;
+}
+declare function CommandItem({ shortcut, icon, meta, className, children, ...props }: CommandItemProps): react.JSX.Element;
+interface CommandDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Names the palette for assistive tech. */
+    label: string;
+    children: ReactNode;
+}
+/**
+ * The palette in a modal, which is how it is nearly always used.
+ *
+ * The dialog's own padding is removed: a palette is edge-to-edge, and its input
+ * is the first thing focus lands on.
+ */
+declare function CommandDialog({ open, onOpenChange, label, children }: CommandDialogProps): react.JSX.Element;
+
+export { Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandFooter, CommandGroup, CommandHint, type CommandHintProps, CommandInput, CommandItem, type CommandItemProps, CommandList, CommandSeparator, Command as default };

package/dist/components/Command/Command.js

@@ -0,0 +1,166 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+import { Dialog, DialogContent } from "../Dialog/Dialog.js";
+import { Kbd } from "../Kbd/Kbd.js";
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CommandPrimitive,
+    {
+      className: cn(
+        "flex w-full flex-col overflow-hidden rounded-(--radius) border border-(--rule-2) bg-(--paper)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 border-b border-(--rule) px-3.5", children: [
+    /* @__PURE__ */ jsx(Search, { size: 16, strokeWidth: 1.5, "aria-hidden": true, className: "shrink-0 text-(--ink-3-aa)" }),
+    /* @__PURE__ */ jsx(
+      CommandPrimitive.Input,
+      {
+        className: cn(
+          "h-11 w-full bg-transparent text-sm text-(--ink) outline-none placeholder:text-(--ink-3-aa)",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CommandPrimitive.List,
+    {
+      className: cn("max-h-72 overflow-y-auto overflow-x-hidden p-2 scroll-slim", className),
+      ...props
+    }
+  );
+}
+function CommandEmpty(props) {
+  return /* @__PURE__ */ jsx(
+    CommandPrimitive.Empty,
+    {
+      className: "px-3 py-10 text-center text-sm text-(--ink-3-aa)",
+      ...props
+    }
+  );
+}
+function CommandFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-4 border-t border-(--rule) bg-(--paper-2) px-3.5 py-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandHint({ keys, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-1.5 mono-meta text-(--ink-3-aa)", className), ...props, children: [
+    keys.map((key) => /* @__PURE__ */ jsx(Kbd, { children: key }, key)),
+    children
+  ] });
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CommandPrimitive.Group,
+    {
+      className: cn(
+        "overflow-hidden [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:eyebrow [&_[cmdk-group-heading]]:text-(--ink-3-aa)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CommandPrimitive.Separator,
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("my-1 h-px bg-(--rule)", className),
+      ...props
+    }
+  );
+}
+function CommandItem({ shortcut, icon, meta, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    CommandPrimitive.Item,
+    {
+      className: cn(
+        "flex cursor-pointer items-center gap-2.5 rounded-(--radius-sm) px-2.5 py-2 text-sm text-(--ink-2) outline-none transition-colors duration-(--duration-fast)",
+        // The highlighted row is a chosen state, and law 7 says a chosen state
+        // reads --accent. The leading rule gives it an edge the eye catches
+        // while scrolling, which a fill alone does not.
+        "relative data-[selected=true]:bg-(--accent-muted) data-[selected=true]:text-(--ink)",
+        "before:absolute before:inset-y-1 before:start-0 before:w-0.5 before:rounded-(--radius-pill) before:bg-transparent data-[selected=true]:before:bg-(--accent)",
+        "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-(--disabled-opacity)",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "grid size-4 shrink-0 place-items-center text-(--ink-3-aa) [&_svg]:size-4", children: icon }),
+        children,
+        meta && /* @__PURE__ */ jsx("span", { className: "ms-auto ps-3 mono-meta text-(--ink-3-aa)", children: meta }),
+        shortcut && /* @__PURE__ */ jsx(Kbd, { className: cn(meta ? "" : "ms-auto"), children: shortcut })
+      ]
+    }
+  );
+}
+function CommandDialog({ open, onOpenChange, label, children }) {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(
+    DialogContent,
+    {
+      title: label,
+      hideTitle: true,
+      showClose: false,
+      className: "top-[12vh] w-[min(92vw,40rem)] translate-y-0 overflow-hidden p-0",
+      children: /* @__PURE__ */ jsx(
+        Command,
+        {
+          label,
+          className: "rounded-none border-0 [&_[cmdk-list]]:max-h-[22rem] [&_[cmdk-list]]:scroll-hairline",
+          children
+        }
+      )
+    }
+  ) });
+}
+var Command_default = Command;
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandFooter,
+  CommandGroup,
+  CommandHint,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  Command_default as default
+};
+//# sourceMappingURL=Command.js.map

package/dist/components/Command/Command.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { Dialog, DialogContent } from '../Dialog/Dialog'\nimport { Kbd } from '../Kbd/Kbd'\n\n/**\n * A filterable list of actions — the ⌘K surface.\n *\n * Built on cmdk rather than on a `Select` or a menu, because the interaction is\n * neither: the list is filtered as you type, the highlighted row moves with the\n * arrow keys while focus STAYS in the input, and Enter runs the highlighted\n * row. That is the ARIA combobox pattern, and it is the part nobody should\n * hand-roll — `aria-activedescendant` moving without focus moving is precisely\n * where a home-made palette stops working with a screen reader.\n *\n * @example\n * <Command label=\"Command palette\">\n *   <CommandInput placeholder=\"Type a command…\" />\n *   <CommandList>\n *     <CommandEmpty>Nothing matches.</CommandEmpty>\n *     <CommandGroup heading=\"Navigate\">\n *       <CommandItem onSelect={go}>Components</CommandItem>\n *     </CommandGroup>\n *   </CommandList>\n * </Command>\n */\nexport function Command({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        'flex w-full flex-col overflow-hidden rounded-(--radius) border border-(--rule-2) bg-(--paper)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The filter field. Carries the search icon and the combobox semantics. */\nexport function CommandInput({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div className=\"flex items-center gap-2.5 border-b border-(--rule) px-3.5\">\n      <Search size={16} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      <CommandPrimitive.Input\n        className={cn(\n          'h-11 w-full bg-transparent text-sm text-(--ink) outline-none placeholder:text-(--ink-3-aa)',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn('max-h-72 overflow-y-auto overflow-x-hidden p-2 scroll-slim', className)}\n      {...props}\n    />\n  )\n}\n\n/** Shown when the filter matches nothing. Say what would match, not \"no results\". */\nexport function CommandEmpty(props: ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      className=\"px-3 py-10 text-center text-sm text-(--ink-3-aa)\"\n      {...props}\n    />\n  )\n}\n\n/**\n * The key-hint strip along the bottom.\n *\n * A palette is a keyboard surface whose keys are invisible: nothing on screen\n * says the arrows move the row or that Enter runs it, and a reader who reaches\n * for the mouse has been failed by the design rather than by themselves.\n *\n * @example\n * <CommandFooter>\n *   <CommandHint keys={['↑', '↓']}>navigate</CommandHint>\n *   <CommandHint keys={['↵']}>open</CommandHint>\n * </CommandFooter>\n */\nexport function CommandFooter({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-4 border-t border-(--rule) bg-(--paper-2) px-3.5 py-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandHintProps extends Omit<ComponentProps<'span'>, 'children'> {\n  /** The keys this hint describes, printed as `Kbd` chips. */\n  keys: string[]\n  /** What they do — a verb, lowercase, no sentence. */\n  children: ReactNode\n}\n\n/** One key-and-verb pair inside a `CommandFooter`. */\nexport function CommandHint({ keys, children, className, ...props }: CommandHintProps) {\n  return (\n    <span className={cn('flex items-center gap-1.5 mono-meta text-(--ink-3-aa)', className)} {...props}>\n      {keys.map((key) => (\n        <Kbd key={key}>{key}</Kbd>\n      ))}\n      {children}\n    </span>\n  )\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        'overflow-hidden [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:eyebrow [&_[cmdk-group-heading]]:text-(--ink-3-aa)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * A divider between groups.\n *\n * Marked presentational, because ARIA permits a `listbox` to contain only\n * `option` and `group` — and the library renders this as `role=\"separator\"`,\n * which puts a critical `aria-required-children` violation inside every palette\n * that uses one. The grouping is already announced by the groups themselves, so\n * removing the divider from the accessibility tree loses nothing.\n */\nexport function CommandSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('my-1 h-px bg-(--rule)', className)}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandItemProps extends ComponentProps<typeof CommandPrimitive.Item> {\n  /** A shortcut printed at the end of the row. */\n  shortcut?: string\n  /**\n   * A leading glyph. Pass the icon element, sized 16.\n   *\n   * It is what makes a long list scannable — the eye sorts by shape before it\n   * reads, and forty identical rows of text defeat that.\n   */\n  icon?: ReactNode\n  /**\n   * A quiet note at the end of the row — what kind of thing this is, or its\n   * current state. Not a description: a palette that prints a sentence per row\n   * stops being scannable at about six of them.\n   */\n  meta?: ReactNode\n}\n\nexport function CommandItem({ shortcut, icon, meta, className, children, ...props }: CommandItemProps) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-2.5 rounded-(--radius-sm) px-2.5 py-2 text-sm text-(--ink-2) outline-none transition-colors duration-(--duration-fast)',\n        // The highlighted row is a chosen state, and law 7 says a chosen state\n        // reads --accent. The leading rule gives it an edge the eye catches\n        // while scrolling, which a fill alone does not.\n        'relative data-[selected=true]:bg-(--accent-muted) data-[selected=true]:text-(--ink)',\n        'before:absolute before:inset-y-1 before:start-0 before:w-0.5 before:rounded-(--radius-pill) before:bg-transparent data-[selected=true]:before:bg-(--accent)',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-(--disabled-opacity)',\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <span className=\"grid size-4 shrink-0 place-items-center text-(--ink-3-aa) [&_svg]:size-4\">\n          {icon}\n        </span>\n      )}\n      {children}\n      {meta && <span className=\"ms-auto ps-3 mono-meta text-(--ink-3-aa)\">{meta}</span>}\n      {shortcut && <Kbd className={cn(meta ? '' : 'ms-auto')}>{shortcut}</Kbd>}\n    </CommandPrimitive.Item>\n  )\n}\n\nexport interface CommandDialogProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /** Names the palette for assistive tech. */\n  label: string\n  children: ReactNode\n}\n\n/**\n * The palette in a modal, which is how it is nearly always used.\n *\n * The dialog's own padding is removed: a palette is edge-to-edge, and its input\n * is the first thing focus lands on.\n */\nexport function CommandDialog({ open, onOpenChange, label, children }: CommandDialogProps) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        title={label}\n        hideTitle\n        showClose={false}\n        // Above centre, not at it. A palette is read as a layer over the page\n        // rather than as a message about it, and centring it puts the list\n        // under the reader's own hands on a laptop.\n        className=\"top-[12vh] w-[min(92vw,40rem)] translate-y-0 overflow-hidden p-0\"\n      >\n        {/* The modal has the whole screen, so its list may be taller than the\n            default an inline menu should keep.\n\n            `scroll-hairline` rather than `scroll-slim`: eleven pixels of grey\n            down the side of a palette is the widest thing in it. */}\n        <Command\n          label={label}\n          className=\"rounded-none border-0 [&_[cmdk-list]]:max-h-[22rem] [&_[cmdk-list]]:scroll-hairline\"\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default Command\n"],"mappings":"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","names":[]}

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { LucideIcon } from 'lucide-react';
+
+/** Radix ContextMenu root and trigger, as typed passthroughs. */
+declare const ContextMenu: react.FC<ContextMenuPrimitive.ContextMenuProps>;
+declare const ContextMenuTrigger: react.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & react.RefAttributes<HTMLSpanElement>>;
+/**
+ * The menu a right-click opens.
+ *
+ * Never the only way to reach an action. A context menu is opened by a
+ * secondary pointer button or a keyboard's own menu key, and a meaningful share
+ * of readers have neither — a touch user, someone on a trackpad they have not
+ * configured, anyone driving the page by keyboard alone. Whatever is in here
+ * belongs somewhere reachable too: a row's overflow button, a toolbar.
+ *
+ * @example
+ * <ContextMenu>
+ *   <ContextMenuTrigger asChild><Card>Right-click me</Card></ContextMenuTrigger>
+ *   <ContextMenuContent>
+ *     <ContextMenuItem icon={Copy}>Copy</ContextMenuItem>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ */
+declare function ContextMenuContent({ className, ...rest }: ComponentProps<typeof ContextMenuPrimitive.Content>): react.JSX.Element;
+interface ContextMenuItemProps extends ComponentProps<typeof ContextMenuPrimitive.Item> {
+    icon?: LucideIcon;
+    destructive?: boolean;
+}
+/** A row. Highlight follows `data-highlighted`, which covers hover and keyboard. */
+declare function ContextMenuItem({ icon: Icon, destructive, className, children, ...rest }: ContextMenuItemProps): react.JSX.Element;
+/** Hairline divider between groups. */
+declare function ContextMenuSeparator({ className, ...rest }: ComponentProps<typeof ContextMenuPrimitive.Separator>): react.JSX.Element;
+/** Mono eyebrow heading for a group. */
+declare function ContextMenuLabel({ className, ...rest }: ComponentProps<typeof ContextMenuPrimitive.Label>): react.JSX.Element;
+
+export { ContextMenu, ContextMenuContent, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger, ContextMenu as default };

package/dist/components/ContextMenu/ContextMenu.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { cn } from "../../lib/cn.js";
+import { useOverlayContainer } from "../../lib/overlay-container.js";
+const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+function ContextMenuContent({
+  className,
+  ...rest
+}) {
+  const container = useOverlayContainer();
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Content,
+    {
+      collisionBoundary: container ?? void 0,
+      collisionPadding: 8,
+      "data-m22-animated": true,
+      className: cn(
+        "z-(--z-dropdown) min-w-44 rounded-(--radius) border border-(--rule-2) bg-(--paper) p-1.5",
+        "data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)",
+        className
+      ),
+      ...rest
+    }
+  ) });
+}
+function ContextMenuItem({
+  icon: Icon,
+  destructive = false,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.Item,
+    {
+      className: cn(
+        "flex cursor-pointer items-center gap-2.5 rounded-(--radius-sm) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)",
+        destructive ? "text-(--danger)" : "text-(--ink-2) data-[highlighted]:text-(--ink)",
+        className
+      ),
+      ...rest,
+      children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { size: 16, strokeWidth: 1.5, className: "shrink-0", "aria-hidden": true }),
+        children
+      ]
+    }
+  );
+}
+function ContextMenuSeparator({
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, { className: cn("my-1 h-px bg-(--rule)", className), ...rest });
+}
+function ContextMenuLabel({
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Label,
+    {
+      className: cn("px-2.5 py-1.5 eyebrow text-(--ink-3-aa)", className),
+      ...rest
+    }
+  );
+}
+var ContextMenu_default = ContextMenu;
+export {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+  ContextMenu_default as default
+};
+//# sourceMappingURL=ContextMenu.js.map

package/dist/components/ContextMenu/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["'use client'\n\nimport * as ContextMenuPrimitive from '@radix-ui/react-context-menu'\nimport type { LucideIcon } from 'lucide-react'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/** Radix ContextMenu root and trigger, as typed passthroughs. */\nexport const ContextMenu = ContextMenuPrimitive.Root\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\n/**\n * The menu a right-click opens.\n *\n * Never the only way to reach an action. A context menu is opened by a\n * secondary pointer button or a keyboard's own menu key, and a meaningful share\n * of readers have neither — a touch user, someone on a trackpad they have not\n * configured, anyone driving the page by keyboard alone. Whatever is in here\n * belongs somewhere reachable too: a row's overflow button, a toolbar.\n *\n * @example\n * <ContextMenu>\n *   <ContextMenuTrigger asChild><Card>Right-click me</Card></ContextMenuTrigger>\n *   <ContextMenuContent>\n *     <ContextMenuItem icon={Copy}>Copy</ContextMenuItem>\n *   </ContextMenuContent>\n * </ContextMenu>\n */\nexport function ContextMenuContent({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  const container = useOverlayContainer()\n\n  return (\n    <ContextMenuPrimitive.Portal container={container ?? undefined}>\n      <ContextMenuPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n        data-m22-animated\n        className={cn(\n          'z-(--z-dropdown) min-w-44 rounded-(--radius) border border-(--rule-2) bg-(--paper) p-1.5',\n          'data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)',\n          className,\n        )}\n        {...rest}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nexport interface ContextMenuItemProps\n  extends ComponentProps<typeof ContextMenuPrimitive.Item> {\n  icon?: LucideIcon\n  destructive?: boolean\n}\n\n/** A row. Highlight follows `data-highlighted`, which covers hover and keyboard. */\nexport function ContextMenuItem({\n  icon: Icon,\n  destructive = false,\n  className,\n  children,\n  ...rest\n}: ContextMenuItemProps) {\n  return (\n    <ContextMenuPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-2.5 rounded-(--radius-sm) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)',\n        destructive ? 'text-(--danger)' : 'text-(--ink-2) data-[highlighted]:text-(--ink)',\n        className,\n      )}\n      {...rest}\n    >\n      {Icon && <Icon size={16} strokeWidth={1.5} className=\"shrink-0\" aria-hidden />}\n      {children}\n    </ContextMenuPrimitive.Item>\n  )\n}\n\n/** Hairline divider between groups. */\nexport function ContextMenuSeparator({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator className={cn('my-1 h-px bg-(--rule)', className)} {...rest} />\n  )\n}\n\n/** Mono eyebrow heading for a group. */\nexport function ContextMenuLabel({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Label>) {\n  return (\n    <ContextMenuPrimitive.Label\n      className={cn('px-2.5 py-1.5 eyebrow text-(--ink-3-aa)', className)}\n      {...rest}\n    />\n  )\n}\n\nexport default ContextMenu\n"],"mappings":";AAqCM,cA8BF,YA9BE;AAnCN,YAAY,0BAA0B;AAGtC,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAG7B,MAAM,cAAc,qBAAqB;AACzC,MAAM,qBAAqB,qBAAqB;AAmBhD,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAwD;AACtD,QAAM,YAAY,oBAAoB;AAEtC,SACE,oBAAC,qBAAqB,QAArB,EAA4B,WAAW,aAAa,QACnD;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,mBAAmB,aAAa;AAAA,MAChC,kBAAkB;AAAA,MAClB,qBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AASO,SAAS,gBAAgB;AAAA,EAC9B,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,oBAAoB;AAAA,QAClC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,gBAAQ,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,WAAU,YAAW,eAAW,MAAC;AAAA,QAC3E;AAAA;AAAA;AAAA,EACH;AAEJ;AAGO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA,GAAG;AACL,GAA0D;AACxD,SACE,oBAAC,qBAAqB,WAArB,EAA+B,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,MAAM;AAEjG;AAGO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,GAAG;AACL,GAAsD;AACpD,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}