prime-ui-kit 0.7.13 → 0.9.1

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

@@ -1,131 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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>
-    </>
-  );
-}