prime-ui-kit 0.7.11 → 0.9.0

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

package/src/components/data-table/examples/canonical-orders.tsx

@@ -1,107 +0,0 @@
-import { Badge, DataTable, type DataTableColumn, Tag } from "prime-ui-kit";
-import * as React from "react";
-
-type OrderRow = {
-  id: string;
-  customer: string;
-  amount: number;
-  region: string;
-  status: "Оплачен" | "В работе" | "Просрочен";
-};
-
-const rows: OrderRow[] = [
-  { id: "ORD-104", customer: "ООО «Север»", amount: 128_400, region: "СЗФО", status: "Оплачен" },
-  { id: "ORD-105", customer: "ИП Ким", amount: 42_100, region: "ДВФО", status: "В работе" },
-  { id: "ORD-106", customer: "АО «Транзит»", amount: 901_000, region: "ЦФО", status: "Оплачен" },
-  { id: "ORD-107", customer: "ООО «Логистик»", amount: 15_750, region: "ЮФО", status: "Просрочен" },
-  {
-    id: "ORD-108",
-    customer: "Самозанятый Орлов",
-    amount: 6_200,
-    region: "ПФО",
-    status: "В работе",
-  },
-  { id: "ORD-109", customer: "ООО «Полюс»", amount: 333_000, region: "УФО", status: "Оплачен" },
-  { id: "ORD-110", customer: "КФХ «Рядок»", amount: 88_500, region: "ЮФО", status: "В работе" },
-  { id: "ORD-111", customer: "АНО «Школа»", amount: 12_000, region: "СКФО", status: "Просрочен" },
-];
-
-function statusColor(status: OrderRow["status"]) {
-  if (status === "Оплачен") return "green";
-  if (status === "Просрочен") return "red";
-  return "yellow";
-}
-
-const columns: DataTableColumn<OrderRow>[] = [
-  {
-    id: "id",
-    header: "Заказ",
-    accessor: "id",
-    sortable: true,
-    minWidth: "8.5rem",
-  },
-  {
-    id: "customer",
-    header: "Клиент",
-    accessor: "customer",
-    sortable: true,
-    minWidth: "12rem",
-  },
-  {
-    id: "amount",
-    header: "Сумма, ₽",
-    accessor: "amount",
-    sortable: true,
-    align: "end",
-    minWidth: "9rem",
-    cell: (row) => row.amount.toLocaleString("ru-RU"),
-  },
-  {
-    id: "region",
-    header: "Округ",
-    accessor: "region",
-    sortable: true,
-    minWidth: "6rem",
-    cell: (row) => <Tag.Root>{row.region}</Tag.Root>,
-  },
-  {
-    id: "status",
-    header: "Статус",
-    accessor: "status",
-    sortable: true,
-    minWidth: "9rem",
-    cell: (row) => (
-      <Badge.Root color={statusColor(row.status)} variant="light">
-        {row.status}
-      </Badge.Root>
-    ),
-  },
-];
-
-/**
- * Полноценная таблица: сортировка по умолчанию, пагинация (`pageSize` меньше числа строк),
- * стабильные ключи строк и типичное оформление ячеек через `Tag` / `Badge`.
- */
-export default function DataTableCanonicalOrdersExample() {
-  const [lastOpened, setLastOpened] = React.useState<string | null>(null);
-
-  return (
-    <div>
-      {lastOpened ? (
-        <p style={{ marginBottom: "0.75rem" }}>Открыт заказ: {lastOpened}</p>
-      ) : (
-        <p style={{ marginBottom: "0.75rem" }}>
-          Клик по строке выбирает заказ для сценария «открыть».
-        </p>
-      )}
-      <DataTable.Root
-        columns={columns}
-        rows={rows}
-        getRowKey={(row) => row.id}
-        defaultSort={{ columnId: "amount", order: "desc" }}
-        pageSize={4}
-        onRowClick={(row) => setLastOpened(row.id)}
-      />
-    </div>
-  );
-}

package/src/components/data-table/examples/composition.tsx

@@ -1,91 +0,0 @@
-import { ExternalLink, Mail } from "lucide-react";
-import { DataTable, type DataTableColumn, LinkButton } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples-demos.module.css";
-
-type ContactRow = {
-  id: string;
-  name: string;
-  email: string;
-  channel: string;
-};
-
-const rows: ContactRow[] = [
-  { id: "c1", name: "Ирина Соколова", email: "i.sokolova@example.com", channel: "Email" },
-  { id: "c2", name: "Павел Орлов", email: "p.orlov@example.com", channel: "Личный кабинет" },
-  { id: "c3", name: "Марина Волкова", email: "m.volkova@example.com", channel: "Телеграм-бот" },
-];
-
-const columns: DataTableColumn<ContactRow>[] = [
-  {
-    id: "name",
-    header: (
-      <span className={styles.inlineIconRow}>
-        <Mail size={14} strokeWidth={2} aria-hidden />
-        Контакт
-      </span>
-    ),
-    accessor: "name",
-    sortable: true,
-    minWidth: "11rem",
-  },
-  {
-    id: "email",
-    header: "Адрес",
-    accessor: "email",
-    sortable: true,
-    minWidth: "14rem",
-    align: "center",
-    cell: (row) => (
-      <LinkButton.Root size="s" href={`mailto:${row.email}`}>
-        {row.email}
-      </LinkButton.Root>
-    ),
-  },
-  {
-    id: "channel",
-    header: "Канал",
-    accessor: "channel",
-    sortable: true,
-    minWidth: "10rem",
-  },
-  {
-    id: "open",
-    header: "",
-    sortable: false,
-    align: "end",
-    minWidth: "7rem",
-    onCellClick: (row) => {
-      window.open(`mailto:${row.email}`, "_blank", "noopener,noreferrer");
-    },
-    cell: () => (
-      <span className={styles.inlineIconRowTight}>
-        <ExternalLink size={14} strokeWidth={2} aria-hidden />
-        Написать
-      </span>
-    ),
-  },
-];
-
-/** Соответствует `playground/snippets/data-table/composition.tsx`. */
-export default function DataTableCompositionExample() {
-  const [last, setLast] = React.useState<string | null>(null);
-
-  return (
-    <div>
-      <p className={styles.lead}>
-        {last ? `Последний клик по строке: ${last}` : "Клик по строке обновляет подпись ниже."}
-      </p>
-      <DataTable.Root
-        columns={columns}
-        rows={rows}
-        getRowKey={(row) => row.id}
-        onRowClick={(row) => setLast(row.name)}
-        showPagination={false}
-        pageSize={10}
-        highlightRowOnHover
-      />
-    </div>
-  );
-}