prime-ui-kit 0.7.11 → 0.9.0

package/src/components/color-picker/examples/full-width.tsx

@@ -1,49 +0,0 @@
-import { Pipette } from "lucide-react";
-import { Button, ColorPicker, Popover } from "prime-ui-kit";
-import * as React from "react";
-
-/** Wide `Popover.Content` and inner surface stretched to full width (playground `full-width`). */
-export function FullWidthPanelExample() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <ColorPicker.Root defaultValue="hsl(30, 85%, 52%)">
-      <Popover.Root onOpenChange={setOpen} open={open}>
-        <Popover.Trigger asChild>
-          <Button.Root mode="stroke" variant="neutral">
-            <ColorPicker.TriggerSwatch />
-            Full-width panel
-          </Button.Root>
-        </Popover.Trigger>
-        <Popover.Content align="start" side="bottom">
-          <div style={{ minWidth: "min(100vw - 2rem, 28rem)" }}>
-            <ColorPicker.FormatProvider>
-              <div
-                style={{
-                  display: "flex",
-                  width: "100%",
-                  maxWidth: "min(28rem, 100%)",
-                  flexDirection: "column",
-                  gap: "var(--prime-sys-spacing-x3, 0.75rem)",
-                }}
-              >
-                <ColorPicker.FormatSelect />
-                <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">
-                  <ColorPicker.AreaThumb />
-                </ColorPicker.Area>
-                <ColorPicker.Slider channel="hue" colorSpace="hsl">
-                  <ColorPicker.SliderTrack>
-                    <ColorPicker.Thumb />
-                  </ColorPicker.SliderTrack>
-                </ColorPicker.Slider>
-                <ColorPicker.ChannelStrip
-                  pipetteIcon={<Pipette aria-hidden size={18} strokeWidth={1.75} />}
-                />
-              </div>
-            </ColorPicker.FormatProvider>
-          </div>
-        </Popover.Content>
-      </Popover.Root>
-    </ColorPicker.Root>
-  );
-}

package/src/components/color-picker/examples/minimal-popover.tsx

@@ -1,26 +0,0 @@
-import { Button, ColorPicker, Popover } from "prime-ui-kit";
-
-/** Smallest valid popover field: matches the documented composition skeleton. */
-export function MinimalPopoverExample() {
-  return (
-    <ColorPicker.Root defaultValue="#3b82f6">
-      <Popover.Root>
-        <Popover.Trigger asChild>
-          <Button.Root mode="stroke" variant="neutral">
-            <ColorPicker.TriggerSwatch />
-            Color
-          </Button.Root>
-        </Popover.Trigger>
-        <Popover.Content align="start" side="bottom">
-          <ColorPicker.FormatProvider>
-            <ColorPicker.FormatSelect />
-            <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">
-              <ColorPicker.AreaThumb />
-            </ColorPicker.Area>
-            <ColorPicker.ChannelStrip pipetteIcon={<span aria-hidden />} />
-          </ColorPicker.FormatProvider>
-        </Popover.Content>
-      </Popover.Root>
-    </ColorPicker.Root>
-  );
-}

package/src/components/color-picker/examples/panel-placement.tsx

@@ -1,68 +0,0 @@
-import { Pipette } from "lucide-react";
-import { Button, ColorPicker, Popover, Typography } from "prime-ui-kit";
-
-const PRESETS = ["#6366f1", "#a855f7", "#ec4899", "#f97316"];
-
-function Panel() {
-  return (
-    <ColorPicker.FormatProvider>
-      <ColorPicker.FormatSelect />
-      <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">
-        <ColorPicker.AreaThumb />
-      </ColorPicker.Area>
-      <ColorPicker.Slider channel="hue" colorSpace="hsl">
-        <ColorPicker.SliderTrack>
-          <ColorPicker.Thumb />
-        </ColorPicker.SliderTrack>
-      </ColorPicker.Slider>
-      <ColorPicker.ChannelStrip
-        pipetteIcon={<Pipette aria-hidden size={18} strokeWidth={1.75} />}
-      />
-      <Typography.Root as="p" tone="muted" variant="body-small" weight="medium">
-        Presets
-      </Typography.Root>
-      <ColorPicker.SwatchPicker aria-label="Quick colors">
-        {PRESETS.map((c) => (
-          <ColorPicker.SwatchPickerItem key={c} color={c}>
-            <ColorPicker.Swatch />
-          </ColorPicker.SwatchPickerItem>
-        ))}
-      </ColorPicker.SwatchPicker>
-    </ColorPicker.FormatProvider>
-  );
-}
-
-/** Same panel with `Popover.Content` `side="bottom"` vs `side="top"` (playground `panel-placement`). */
-export function PanelPlacementExample() {
-  return (
-    <div style={{ display: "flex", flexWrap: "wrap", gap: "1rem", alignItems: "flex-start" }}>
-      <ColorPicker.Root defaultValue="hsl(265, 80%, 55%)">
-        <Popover.Root>
-          <Popover.Trigger asChild>
-            <Button.Root mode="stroke" variant="neutral">
-              <ColorPicker.TriggerSwatch />
-              Bottom
-            </Button.Root>
-          </Popover.Trigger>
-          <Popover.Content align="start" side="bottom">
-            <Panel />
-          </Popover.Content>
-        </Popover.Root>
-      </ColorPicker.Root>
-
-      <ColorPicker.Root defaultValue="hsl(200, 70%, 48%)">
-        <Popover.Root>
-          <Popover.Trigger asChild>
-            <Button.Root mode="stroke" variant="neutral">
-              <ColorPicker.TriggerSwatch />
-              Top
-            </Button.Root>
-          </Popover.Trigger>
-          <Popover.Content align="start" side="top">
-            <Panel />
-          </Popover.Content>
-        </Popover.Root>
-      </ColorPicker.Root>
-    </div>
-  );
-}

package/src/components/color-picker/examples/product-variant-swatch.tsx

@@ -1,42 +0,0 @@
-import { Button, ColorPicker, Popover } from "prime-ui-kit";
-import * as React from "react";
-
-const VARIANTS = [
-  { id: "midnight", color: "#0c0a09" },
-  { id: "clay", color: "#c2410c" },
-  { id: "sage", color: "#4d7c0f" },
-  { id: "mist", color: "#94a3b8" },
-];
-
-/** E-commerce variant color: fast swatch selection; optional fine tuning in the same root. */
-export function ProductVariantSwatchExample() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <ColorPicker.Root defaultValue={VARIANTS[0]?.color ?? "#000000"}>
-      <Popover.Root onOpenChange={setOpen} open={open}>
-        <Popover.Trigger asChild>
-          <Button.Root mode="stroke" variant="neutral">
-            <ColorPicker.TriggerSwatch />
-            Color
-          </Button.Root>
-        </Popover.Trigger>
-        <Popover.Content align="start" side="bottom">
-          <ColorPicker.FormatProvider defaultFormat="hex">
-            <ColorPicker.SwatchPicker aria-label="Product color">
-              {VARIANTS.map((v) => (
-                <ColorPicker.SwatchPickerItem color={v.color} key={v.id}>
-                  <ColorPicker.Swatch />
-                </ColorPicker.SwatchPickerItem>
-              ))}
-            </ColorPicker.SwatchPicker>
-            <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">
-              <ColorPicker.AreaThumb />
-            </ColorPicker.Area>
-            <ColorPicker.ChannelStrip pipetteIcon={<span aria-hidden />} />
-          </ColorPicker.FormatProvider>
-        </Popover.Content>
-      </Popover.Root>
-    </ColorPicker.Root>
-  );
-}

package/src/components/color-picker/examples/readout-trigger.tsx

@@ -1,70 +0,0 @@
-import { Pipette } from "lucide-react";
-import { Button, ColorPicker, type ColorPickerColorValue, Popover, parseColor } from "prime-ui-kit";
-import * as React from "react";
-
-const PRESETS = ["#ef4444", "#f97316", "#eab308", "#22c55e", "#14b8a6", "#3b82f6", "#8b5cf6"];
-
-/**
- * Custom color square on the trigger (`style.backgroundColor`) instead of `TriggerSwatch`;
- * `ColorPicker.Root` lives inside `Popover.Content` (playground `popover`).
- */
-export function ReadoutTriggerExample() {
-  const [color, setColor] = React.useState<ColorPickerColorValue | undefined>(
-    parseColor("#3b82f6"),
-  );
-  const [open, setOpen] = React.useState(false);
-
-  const colorString = color?.toString("css") ?? "#000000";
-
-  return (
-    <Popover.Root onOpenChange={setOpen} open={open}>
-      <Popover.Trigger asChild>
-        <Button.Root mode="stroke" variant="neutral">
-          <span
-            aria-hidden
-            style={{
-              boxSizing: "border-box",
-              display: "inline-block",
-              flexShrink: 0,
-              width: "1rem",
-              height: "1rem",
-              borderRadius: "var(--prime-sys-shape-radius-s, 0.25rem)",
-              border: "1px solid var(--prime-sys-color-border-primary, currentColor)",
-              backgroundColor: colorString,
-            }}
-          />
-          {colorString}
-        </Button.Root>
-      </Popover.Trigger>
-      <Popover.Content align="start" side="bottom">
-        <ColorPicker.Root onChange={setColor} value={color}>
-          <ColorPicker.FormatProvider>
-            <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">
-              <ColorPicker.AreaThumb />
-            </ColorPicker.Area>
-            <ColorPicker.Slider channel="hue" colorSpace="hsl">
-              <ColorPicker.SliderTrack>
-                <ColorPicker.Thumb />
-              </ColorPicker.SliderTrack>
-            </ColorPicker.Slider>
-            <ColorPicker.Slider channel="alpha">
-              <ColorPicker.SliderTrack>
-                <ColorPicker.Thumb />
-              </ColorPicker.SliderTrack>
-            </ColorPicker.Slider>
-            <ColorPicker.ChannelStrip
-              pipetteIcon={<Pipette aria-hidden size={18} strokeWidth={1.75} />}
-            />
-            <ColorPicker.SwatchPicker aria-label="Quick colors">
-              {PRESETS.map((c) => (
-                <ColorPicker.SwatchPickerItem key={c} color={c}>
-                  <ColorPicker.Swatch />
-                </ColorPicker.SwatchPickerItem>
-              ))}
-            </ColorPicker.SwatchPicker>
-          </ColorPicker.FormatProvider>
-        </ColorPicker.Root>
-      </Popover.Content>
-    </Popover.Root>
-  );
-}

package/src/components/color-picker/examples/theme-accent.tsx

@@ -1,41 +0,0 @@
-import { Button, ColorPicker, Popover, parseColor, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-/** Controlled accent: persist `color.toString("hex")` / `"css"` to your theme layer or API. */
-export function ThemeAccentExample() {
-  const [color, setColor] = React.useState(() => parseColor("hsl(220, 90%, 56%)"));
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <div>
-      <Typography.Root as="p" variant="body-small" tone="muted">
-        Accent (CSS): {color.toString("css")}
-      </Typography.Root>
-      <ColorPicker.Root value={color} onChange={setColor}>
-        <Popover.Root onOpenChange={setOpen} open={open}>
-          <Popover.Trigger asChild>
-            <Button.Root aria-label="Choose theme accent color" mode="stroke" variant="neutral">
-              <ColorPicker.TriggerSwatch />
-              Accent
-            </Button.Root>
-          </Popover.Trigger>
-          <Popover.Content align="start" side="bottom">
-            <ColorPicker.FormatProvider>
-              <ColorPicker.FormatSelect />
-              <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">
-                <ColorPicker.AreaThumb />
-              </ColorPicker.Area>
-              <ColorPicker.Slider channel="hue" colorSpace="hsl">
-                <ColorPicker.SliderMeta label="Hue" />
-                <ColorPicker.SliderTrack>
-                  <ColorPicker.Thumb />
-                </ColorPicker.SliderTrack>
-              </ColorPicker.Slider>
-              <ColorPicker.ChannelStrip pipetteIcon={<span aria-hidden />} />
-            </ColorPicker.FormatProvider>
-          </Popover.Content>
-        </Popover.Root>
-      </ColorPicker.Root>
-    </div>
-  );
-}

package/src/components/command-menu/examples/app-palette.tsx

@@ -1,129 +0,0 @@
-import { ArrowDown, ArrowUp, CornerDownLeft, 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 footerRowStyle: React.CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  gap: "var(--prime-sys-spacing-x3)",
-};
-
-const footerHintStyle: React.CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--prime-sys-spacing-x2)",
-};
-
-const footerTextStyle: React.CSSProperties = {
-  fontSize: "var(--prime-sys-size-control-s-supportText)",
-  lineHeight: "var(--prime-sys-typography-body-lineHeight)",
-  color: "var(--prime-sys-color-content-secondary)",
-};
-
-/**
- * App-wide command palette: routes and settings, keyboard legend in the footer.
- */
-export default function CommandMenuExampleAppPalette() {
-  const [open, setOpen] = React.useState(false);
-
-  React.useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        setOpen((v) => !v);
-      }
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, []);
-
-  return (
-    <>
-      <Button.Root variant="primary" onClick={() => setOpen(true)}>
-        Open palette (⌘K / Ctrl+K)
-      </Button.Root>
-
-      <CommandMenu.Dialog open={open} onOpenChange={setOpen} aria-labelledby="palette-title">
-        <CommandMenu.DialogTitle id="palette-title">Go to</CommandMenu.DialogTitle>
-        <CommandMenu.DialogDescription>
-          Type to filter pages and settings.
-        </CommandMenu.DialogDescription>
-
-        <CommandMenu.InputRow
-          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
-        >
-          <CommandMenu.Input placeholder="Where to…" aria-label="Search commands" />
-        </CommandMenu.InputRow>
-
-        <CommandMenu.List>
-          <CommandMenu.Group heading="Pages">
-            <CommandMenu.Item
-              value="dashboard"
-              keywords="home overview"
-              onSelect={() => setOpen(false)}
-            >
-              Dashboard
-            </CommandMenu.Item>
-            <CommandMenu.Item
-              value="reports"
-              keywords="analytics charts metrics"
-              onSelect={() => setOpen(false)}
-            >
-              Reports
-            </CommandMenu.Item>
-            <CommandMenu.Item
-              value="team"
-              keywords="people members"
-              onSelect={() => setOpen(false)}
-            >
-              Team
-            </CommandMenu.Item>
-          </CommandMenu.Group>
-          <CommandMenu.Group heading="Settings">
-            <CommandMenu.Item
-              value="account"
-              keywords="profile billing plan"
-              onSelect={() => setOpen(false)}
-            >
-              Account
-            </CommandMenu.Item>
-          </CommandMenu.Group>
-        </CommandMenu.List>
-
-        <CommandMenu.Footer>
-          <div style={footerRowStyle}>
-            <div style={footerHintStyle}>
-              <CommandMenu.FooterKeyBox>
-                <ArrowUp size={14} strokeWidth={2} aria-hidden />
-              </CommandMenu.FooterKeyBox>
-              <CommandMenu.FooterKeyBox>
-                <ArrowDown size={14} strokeWidth={2} aria-hidden />
-              </CommandMenu.FooterKeyBox>
-              <span style={footerTextStyle}>Navigate</span>
-            </div>
-            <div style={footerHintStyle}>
-              <CommandMenu.FooterKeyBox>
-                <CornerDownLeft size={14} strokeWidth={2} aria-hidden />
-              </CommandMenu.FooterKeyBox>
-              <span style={footerTextStyle}>Select</span>
-            </div>
-            <div style={footerHintStyle}>
-              <CommandMenu.FooterKeyBox tone="muted">Esc</CommandMenu.FooterKeyBox>
-              <span style={footerTextStyle}>Close</span>
-            </div>
-          </div>
-        </CommandMenu.Footer>
-      </CommandMenu.Dialog>
-    </>
-  );
-}

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>
-    </>
-  );
-}