prime-ui-kit 0.0.1

package/src/components/command-menu/examples/composition-tags-footer.tsx

@@ -0,0 +1,131 @@
+import { FileText, Search, Settings, Sparkles, X } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+import { Kbd } from "@/components/kbd/Kbd";
+import { Tag } from "@/components/tag/Tag";
+import { Typography } from "@/components/typography/Typography";
+
+const inputIconStyle: React.CSSProperties = {
+  width: "var(--prime-sys-size-control-m-icon)",
+  height: "var(--prime-sys-size-control-m-icon)",
+  color: "var(--prime-sys-color-content-muted)",
+  flexShrink: 0,
+};
+
+const dialogHeaderPadStyle: React.CSSProperties = {
+  padding: "var(--prime-sys-spacing-x4) var(--prime-sys-spacing-x4) 0",
+};
+
+const dialogHeaderLeadStyle: React.CSSProperties = {
+  marginTop: "var(--prime-sys-spacing-x1)",
+};
+
+const footerMutedStyle: React.CSSProperties = {
+  background: "var(--prime-sys-color-surface-default)",
+};
+
+/**
+ * Custom header, `InputRow` slots, `TagSection`, `ItemIcon`, muted `Footer` (playground `composition-tags-footer.tsx`).
+ */
+export default function CommandMenuExampleCompositionTagsFooter() {
+  const [open, setOpen] = React.useState(false);
+  const [scopes, setScopes] = React.useState(["Docs", "Commands"]);
+
+  return (
+    <>
+      <Button.Root variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+        Full composition
+      </Button.Root>
+
+      <CommandMenu.Dialog
+        open={open}
+        onOpenChange={setOpen}
+        aria-labelledby="cmd-composition-title"
+      >
+        <div style={dialogHeaderPadStyle}>
+          <Typography.Root
+            as="div"
+            id="cmd-composition-title"
+            role="heading"
+            aria-level={2}
+            variant="body-large"
+            weight="semibold"
+          >
+            Palette
+          </Typography.Root>
+          <Typography.Root variant="body-small" tone="muted" style={dialogHeaderLeadStyle}>
+            Search sections and run quick actions
+          </Typography.Root>
+        </div>
+
+        <CommandMenu.InputRow
+          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
+          trailing={
+            <>
+              <Kbd.Root aria-label="Open shortcut">⌘K</Kbd.Root>
+              <Button.Root
+                variant="neutral"
+                mode="ghost"
+                aria-label="Close"
+                onClick={() => setOpen(false)}
+              >
+                <Button.Icon>
+                  <X size={18} strokeWidth={2} aria-hidden />
+                </Button.Icon>
+              </Button.Root>
+            </>
+          }
+        >
+          <CommandMenu.Input placeholder="Where to…" aria-label="Search" />
+        </CommandMenu.InputRow>
+
+        <CommandMenu.TagSection>
+          <CommandMenu.TagSectionLabel>
+            <Typography.Root variant="body-compact" tone="muted">
+              Scope
+            </Typography.Root>
+          </CommandMenu.TagSectionLabel>
+          <CommandMenu.TagRow>
+            {scopes.map((s) => (
+              <Tag.Root key={s} onRemove={() => setScopes((p) => p.filter((x) => x !== s))}>
+                {s}
+              </Tag.Root>
+            ))}
+          </CommandMenu.TagRow>
+        </CommandMenu.TagSection>
+
+        <CommandMenu.List>
+          <CommandMenu.Group heading="File">
+            <CommandMenu.Item value="new document" onSelect={() => setOpen(false)}>
+              <CommandMenu.ItemIcon as={FileText} strokeWidth={2} />
+              New document
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+          <CommandMenu.Group heading="System">
+            <CommandMenu.Item
+              value="settings"
+              keywords="preferences profile"
+              onSelect={() => setOpen(false)}
+            >
+              <CommandMenu.ItemIcon as={Settings} strokeWidth={2} />
+              Settings
+            </CommandMenu.Item>
+            <CommandMenu.Item value="tips" keywords="help tips" onSelect={() => setOpen(false)}>
+              <CommandMenu.ItemIcon as={Sparkles} strokeWidth={2} />
+              Tips
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+
+        <CommandMenu.Footer style={footerMutedStyle}>
+          <Typography.Root variant="body-compact" tone="muted">
+            Arrows and Enter work from the search field; groups hide when they have no visible
+            items.
+          </Typography.Root>
+        </CommandMenu.Footer>
+      </CommandMenu.Dialog>
+    </>
+  );
+}

package/src/components/command-menu/examples/controlled-open-search.tsx

@@ -0,0 +1,76 @@
+import { Search } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+import { Typography } from "@/components/typography/Typography";
+
+const inputIconStyle: React.CSSProperties = {
+  width: "var(--prime-sys-size-control-m-icon)",
+  height: "var(--prime-sys-size-control-m-icon)",
+  color: "var(--prime-sys-color-content-muted)",
+  flexShrink: 0,
+};
+
+const toolbarStyle: React.CSSProperties = {
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "var(--prime-sys-spacing-x3)",
+  alignItems: "center",
+};
+
+/**
+ * Controlled `Dialog` and controlled `Input` value synced with parent state (playground `controlled-open-search.tsx`).
+ */
+export default function CommandMenuExampleControlledOpenSearch() {
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+
+  return (
+    <>
+      <div style={toolbarStyle}>
+        <Typography.Root variant="body-small" tone="muted">
+          External query: «{query || "…"}»
+        </Typography.Root>
+        <Button.Root variant="primary" onClick={() => setOpen(true)}>
+          Open with external search string
+        </Button.Root>
+      </div>
+
+      <CommandMenu.Dialog
+        open={open}
+        onOpenChange={(next) => {
+          setOpen(next);
+          if (!next) setQuery("");
+        }}
+      >
+        <CommandMenu.InputRow
+          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
+        >
+          <CommandMenu.Input
+            placeholder="Search synced with parent…"
+            aria-label="Search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading="Commands">
+            <CommandMenu.Item
+              value="clear filter"
+              keywords="clear reset"
+              onSelect={() => {
+                setQuery("");
+              }}
+            >
+              Clear filter
+            </CommandMenu.Item>
+            <CommandMenu.Item value="done" onSelect={() => setOpen(false)}>
+              Close palette
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Dialog>
+    </>
+  );
+}

package/src/components/command-menu/examples/disabled-items.tsx

@@ -0,0 +1,77 @@
+import { Search } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+import { Typography } from "@/components/typography/Typography";
+
+const inputIconStyle: React.CSSProperties = {
+  width: "var(--prime-sys-size-control-m-icon)",
+  height: "var(--prime-sys-size-control-m-icon)",
+  color: "var(--prime-sys-color-content-muted)",
+  flexShrink: 0,
+};
+
+const footerStyle: React.CSSProperties = {
+  background: "var(--prime-sys-color-surface-default)",
+};
+
+/**
+ * Disabled items, empty `value` (always visible in results), and notes on empty filter UX.
+ * `disabled` rows are omitted from the list and keyboard order — not grayed in place.
+ */
+export default function CommandMenuExampleDisabledItems() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button.Root variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+        Disabled items behavior
+      </Button.Root>
+
+      <CommandMenu.Dialog open={open} onOpenChange={setOpen} aria-labelledby="disabled-demo-title">
+        <CommandMenu.DialogTitle id="disabled-demo-title">Commands</CommandMenu.DialogTitle>
+        <CommandMenu.InputRow
+          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
+        >
+          <CommandMenu.Input placeholder="Try “delete”…" aria-label="Filter commands" />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading="Available">
+            <CommandMenu.Item value="save draft" keywords="write" onSelect={() => setOpen(false)}>
+              Save draft
+            </CommandMenu.Item>
+            <CommandMenu.Item
+              value="publish"
+              keywords="release ship"
+              onSelect={() => setOpen(false)}
+            >
+              Publish
+            </CommandMenu.Item>
+            <CommandMenu.Item value="" keywords="" onSelect={() => setOpen(false)}>
+              Always visible — empty value ignores the filter query
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+          {/* `disabled` items are excluded from visible options — this row never appears in the listbox */}
+          <CommandMenu.Group heading="Hidden when disabled">
+            <CommandMenu.Item
+              value="delete production database"
+              keywords="delete destroy danger"
+              disabled
+              onSelect={() => setOpen(false)}
+            >
+              Delete production (disabled in code)
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+        <CommandMenu.Footer style={footerStyle}>
+          <Typography.Root variant="body-compact" tone="muted">
+            Searching “delete” finds no option: the dangerous action is disabled and removed from
+            the palette, not listed as inactive. If nothing matches, groups collapse — add your own
+            empty state below the list if needed.
+          </Typography.Root>
+        </CommandMenu.Footer>
+      </CommandMenu.Dialog>
+    </>
+  );
+}

package/src/components/command-menu/examples/file-search.tsx

@@ -0,0 +1,98 @@
+import { File, FileCode, Search } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+
+const inputIconStyle: React.CSSProperties = {
+  width: "var(--prime-sys-size-control-m-icon)",
+  height: "var(--prime-sys-size-control-m-icon)",
+  color: "var(--prime-sys-color-content-muted)",
+  flexShrink: 0,
+};
+
+type FileRow = { id: string; label: string; value: string; keywords: string };
+
+const FILES: FileRow[] = [
+  {
+    id: "1",
+    label: "README.md",
+    value: "readme",
+    keywords: "markdown docs root getting started",
+  },
+  {
+    id: "2",
+    label: "src/components/Button.tsx",
+    value: "button tsx",
+    keywords: "src components button react",
+  },
+  {
+    id: "3",
+    label: "playground/vite.config.ts",
+    value: "vite config",
+    keywords: "playground vite build",
+  },
+  {
+    id: "4",
+    label: "tokens/semantic.ts",
+    value: "semantic tokens",
+    keywords: "tokens theme design system",
+  },
+];
+
+/**
+ * File picker-style palette: match on file name, path segments, and extra keywords.
+ */
+export default function CommandMenuExampleFileSearch() {
+  const [open, setOpen] = React.useState(false);
+  const [activeId, setActiveId] = React.useState<string | null>(null);
+
+  return (
+    <>
+      <Button.Root variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+        Search files
+      </Button.Root>
+
+      <CommandMenu.Dialog open={open} onOpenChange={setOpen} aria-labelledby="files-title">
+        <CommandMenu.DialogTitle id="files-title">Open file</CommandMenu.DialogTitle>
+        <CommandMenu.InputRow
+          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
+        >
+          <CommandMenu.Input placeholder="Filter by name or path…" aria-label="Filter files" />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading="Repository">
+            {FILES.map((f) => {
+              const Icon = f.label.endsWith(".tsx") || f.label.endsWith(".ts") ? FileCode : File;
+              return (
+                <CommandMenu.Item
+                  key={f.id}
+                  value={f.value}
+                  keywords={f.keywords}
+                  onSelect={() => {
+                    setActiveId(f.id);
+                    setOpen(false);
+                  }}
+                >
+                  <CommandMenu.ItemIcon as={Icon} strokeWidth={2} />
+                  {f.label}
+                </CommandMenu.Item>
+              );
+            })}
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Dialog>
+
+      {activeId ? (
+        <p
+          style={{
+            marginTop: "var(--prime-sys-spacing-x3)",
+            color: "var(--prime-sys-color-content-muted)",
+          }}
+        >
+          Last opened id: {activeId}
+        </p>
+      ) : null}
+    </>
+  );
+}

package/src/components/command-menu/examples/full-width-panel.tsx

@@ -0,0 +1,52 @@
+import { Search } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+import commandMenuStyles from "@/components/command-menu/CommandMenu.module.css";
+
+const inputIconStyle: React.CSSProperties = {
+  width: "var(--prime-sys-size-control-m-icon)",
+  height: "var(--prime-sys-size-control-m-icon)",
+  color: "var(--prime-sys-color-content-muted)",
+  flexShrink: 0,
+};
+
+/**
+ * Wider panel via `dialogContentWide` from the CommandMenu CSS module on `Dialog` `className`
+ * (playground `full-width-panel.tsx` uses a local demo class with the same width token).
+ */
+export default function CommandMenuExampleFullWidthPanel() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button.Root variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+        Wide panel
+      </Button.Root>
+
+      <CommandMenu.Dialog
+        open={open}
+        onOpenChange={setOpen}
+        className={commandMenuStyles.dialogContentWide}
+      >
+        <CommandMenu.InputRow
+          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
+        >
+          <CommandMenu.Input placeholder="Wider than default max-width…" aria-label="Search" />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading="Layout">
+            <CommandMenu.Item
+              value="dialog content wide class"
+              keywords="layout"
+              onSelect={() => setOpen(false)}
+            >
+              Panel className from CommandMenu.module.css
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Dialog>
+    </>
+  );
+}

package/src/components/command-menu/examples/item-icon-as.tsx

@@ -0,0 +1,48 @@
+import { Circle, Square, Triangle } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+
+/**
+ * `ItemIcon` `as` prop: SVG components or native `span` (playground `item-icon-as.tsx`).
+ */
+export default function CommandMenuExampleItemIconAs() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button.Root variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+        ItemIcon polymorphism
+      </Button.Root>
+
+      <CommandMenu.Dialog open={open} onOpenChange={setOpen}>
+        <CommandMenu.InputRow>
+          <CommandMenu.Input placeholder="Icons as components…" aria-label="Search" />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading="Polymorphic ItemIcon">
+            <CommandMenu.Item value="circle" onSelect={() => setOpen(false)}>
+              <CommandMenu.ItemIcon as={Circle} strokeWidth={2} aria-hidden />
+              Circle
+            </CommandMenu.Item>
+            <CommandMenu.Item value="square" onSelect={() => setOpen(false)}>
+              <CommandMenu.ItemIcon as={Square} strokeWidth={2} aria-hidden />
+              Square
+            </CommandMenu.Item>
+            <CommandMenu.Item value="triangle" onSelect={() => setOpen(false)}>
+              <CommandMenu.ItemIcon as={Triangle} strokeWidth={2} aria-hidden />
+              Triangle
+            </CommandMenu.Item>
+            <CommandMenu.Item value="label" onSelect={() => setOpen(false)}>
+              <CommandMenu.ItemIcon as="span" aria-hidden>
+                ●
+              </CommandMenu.ItemIcon>
+              Text mark in span
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Dialog>
+    </>
+  );
+}

package/src/components/command-menu/examples/quick-actions.tsx

@@ -0,0 +1,74 @@
+import { Copy, Link2, Mail, Search, UserPlus } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+
+const inputIconStyle: React.CSSProperties = {
+  width: "var(--prime-sys-size-control-m-icon)",
+  height: "var(--prime-sys-size-control-m-icon)",
+  color: "var(--prime-sys-color-content-muted)",
+  flexShrink: 0,
+};
+
+/**
+ * Quick actions on the current context: copy, share, invite — grouped under one palette.
+ */
+export default function CommandMenuExampleQuickActions() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button.Root variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+        Quick actions
+      </Button.Root>
+
+      <CommandMenu.Dialog open={open} onOpenChange={setOpen} aria-labelledby="actions-title">
+        <CommandMenu.DialogTitle id="actions-title">Actions</CommandMenu.DialogTitle>
+        <CommandMenu.InputRow
+          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
+        >
+          <CommandMenu.Input placeholder="Run an action…" aria-label="Filter actions" />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading="Clipboard">
+            <CommandMenu.Item
+              value="copy link"
+              keywords="url clipboard"
+              onSelect={() => setOpen(false)}
+            >
+              <CommandMenu.ItemIcon as={Link2} strokeWidth={2} />
+              Copy link
+            </CommandMenu.Item>
+            <CommandMenu.Item
+              value="copy page as markdown"
+              keywords="clipboard md export"
+              onSelect={() => setOpen(false)}
+            >
+              <CommandMenu.ItemIcon as={Copy} strokeWidth={2} />
+              Copy page as Markdown
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+          <CommandMenu.Group heading="People">
+            <CommandMenu.Item
+              value="invite teammate"
+              keywords="email share member"
+              onSelect={() => setOpen(false)}
+            >
+              <CommandMenu.ItemIcon as={UserPlus} strokeWidth={2} />
+              Invite teammate
+            </CommandMenu.Item>
+            <CommandMenu.Item
+              value="message owner"
+              keywords="dm mail contact"
+              onSelect={() => setOpen(false)}
+            >
+              <CommandMenu.ItemIcon as={Mail} strokeWidth={2} />
+              Message owner
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Dialog>
+    </>
+  );
+}

package/src/components/command-menu/examples/variants-density-items.tsx

@@ -0,0 +1,83 @@
+import { Search } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+
+const inputIconStyle: React.CSSProperties = {
+  width: "var(--prime-sys-size-control-m-icon)",
+  height: "var(--prime-sys-size-control-m-icon)",
+  color: "var(--prime-sys-color-content-muted)",
+  flexShrink: 0,
+};
+
+const triggerRowStyle: React.CSSProperties = {
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "var(--prime-sys-spacing-x3)",
+  alignItems: "center",
+};
+
+type DensityDemo = "compact" | "comfortable";
+
+/**
+ * `InputRow` `density` and list row scale via `Item` `size` (playground `variants-density-items.tsx`).
+ */
+export default function CommandMenuExampleVariantsDensityItems() {
+  const [open, setOpen] = React.useState(false);
+  const [density, setDensity] = React.useState<DensityDemo>("compact");
+
+  return (
+    <>
+      <div style={triggerRowStyle}>
+        <Button.Root
+          variant="neutral"
+          mode="stroke"
+          onClick={() => {
+            setDensity("compact");
+            setOpen(true);
+          }}
+        >
+          Compact density
+        </Button.Root>
+        <Button.Root
+          variant="neutral"
+          mode="stroke"
+          onClick={() => {
+            setDensity("comfortable");
+            setOpen(true);
+          }}
+        >
+          Comfortable density
+        </Button.Root>
+      </div>
+
+      <CommandMenu.Dialog open={open} onOpenChange={setOpen}>
+        <CommandMenu.InputRow
+          density={density}
+          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
+        >
+          <CommandMenu.Input placeholder="Search…" aria-label="Search" />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading='Items size="s"'>
+            <CommandMenu.Item value="short list" size="s" onSelect={() => setOpen(false)}>
+              Compact row
+            </CommandMenu.Item>
+            <CommandMenu.Item value="another s" size="s" onSelect={() => setOpen(false)}>
+              Second compact row
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+          <CommandMenu.Group heading='Items size="m"'>
+            <CommandMenu.Item value="tall row" onSelect={() => setOpen(false)}>
+              Taller list row
+            </CommandMenu.Item>
+            <CommandMenu.Item value="another m" onSelect={() => setOpen(false)}>
+              Another size m item
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Dialog>
+    </>
+  );
+}