prime-ui-kit 0.7.11 → 0.9.0

package/src/components/dropdown/examples/examples.module.css

@@ -0,0 +1,56 @@
+/* Layout for the Dropdown examples: layout only, text goes through Typography. */
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--prime-space-3);
+}
+
+/* Unstyled button around a Typography label that reads as a text link. */
+.linkTrigger {
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+
+.underline {
+  text-decoration: underline;
+  text-underline-offset: var(--prime-space-1);
+}
+
+.linkTrigger:focus-visible {
+  outline: var(--prime-focus-width) solid var(--prime-color-focus-ring);
+  outline-offset: var(--prime-focus-offset);
+  border-radius: var(--prime-radius-xs);
+}
+
+.wideColumn {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: calc(var(--prime-space-24) * 3);
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--prime-space-3);
+  width: 100%;
+  max-width: calc(var(--prime-space-24) * 6);
+}
+
+.toolbarText {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.toolbarActions {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--prime-space-2);
+}

package/src/components/dropdown/examples/full-width.tsx

@@ -1,27 +1,22 @@
-import { Button } from "@/components/button/Button";
-import { Dropdown } from "@/components/dropdown/Dropdown";
+/** `sameMinWidthAsTrigger`: the menu is at least as wide as a full-width trigger. Use for full-width buttons in a column. */
+import { Button, Dropdown } from "prime-ui-kit";
+import styles from "./examples.module.css";
 
-import styles from "./dropdown-examples.module.css";
-
-/** `sameMinWidthAsTrigger` — как в `playground/snippets/dropdown/full-width.tsx`. */
 export default function DropdownFullWidthExample() {
   return (
-    <Dropdown.Root>
-      <Dropdown.Trigger>
-        <Button.Root
-          type="button"
-          variant="neutral"
-          mode="stroke"
-          aria-label="Действия со строкой"
-          className={styles.iconTriggerMin}
-        >
-          ⋮
-        </Button.Root>
-      </Dropdown.Trigger>
-      <Dropdown.Content sameMinWidthAsTrigger>
-        <Dropdown.Item>Очень длинная подпись пункта меню в одну строку</Dropdown.Item>
-        <Dropdown.Item>Второй пункт</Dropdown.Item>
-      </Dropdown.Content>
-    </Dropdown.Root>
+    <div className={styles.wideColumn}>
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          <Button.Root variant="soft" tone="neutral" fullWidth>
+            Экспортировать отчёт
+          </Button.Root>
+        </Dropdown.Trigger>
+        <Dropdown.Content sameMinWidthAsTrigger>
+          <Dropdown.Item>PDF</Dropdown.Item>
+          <Dropdown.Item>Excel (.xlsx)</Dropdown.Item>
+          <Dropdown.Item>CSV</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+    </div>
   );
 }

package/src/components/dropdown/examples/placement.tsx

@@ -0,0 +1,30 @@
+/** `align` (start · center · end) and `side` (bottom · top). Near the viewport edge the panel flips and shifts automatically. */
+import { Button, Dropdown } from "prime-ui-kit";
+import styles from "./examples.module.css";
+
+const PLACEMENTS = [
+  { label: "Начало", align: "start", side: "bottom" },
+  { label: "Центр", align: "center", side: "bottom" },
+  { label: "Конец", align: "end", side: "bottom" },
+  { label: "Сверху", align: "start", side: "top" },
+] as const;
+
+export default function DropdownPlacementExample() {
+  return (
+    <div className={styles.row}>
+      {PLACEMENTS.map(({ label, align, side }) => (
+        <Dropdown.Root key={label}>
+          <Dropdown.Trigger>
+            <Button.Root variant="soft" tone="neutral" size="s">
+              {label}
+            </Button.Root>
+          </Dropdown.Trigger>
+          <Dropdown.Content align={align} side={side}>
+            <Dropdown.Item>Экспорт в PDF и печатная версия</Dropdown.Item>
+            <Dropdown.Item>Дублировать в проект</Dropdown.Item>
+          </Dropdown.Content>
+        </Dropdown.Root>
+      ))}
+    </div>
+  );
+}

package/src/components/dropdown/examples/row-actions.tsx

@@ -0,0 +1,56 @@
+/** Card toolbar: the primary action stays visible, the rest go into an icon-only «⋯» menu aligned to the end. Use for secondary actions of a card or table row. */
+import { Copy, Download, Ellipsis, Pencil, Share2, Trash2 } from "lucide-react";
+import { Button, Card, Dropdown, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function DropdownRowActionsExample() {
+  return (
+    <Card.Root variant="mini" className={styles.toolbar}>
+      <div className={styles.toolbarText}>
+        <Typography.Root as="span" variant="title-s" truncate>
+          Отчёт о выплатах за сентябрь
+        </Typography.Root>
+        <Typography.Root as="span" variant="caption" tone="secondary">
+          Обновлён 2 часа назад · 1,2 МБ
+        </Typography.Root>
+      </div>
+      <div className={styles.toolbarActions}>
+        <Button.Root variant="soft" tone="neutral">
+          <Button.Icon>
+            <Download />
+          </Button.Icon>
+          Скачать
+        </Button.Root>
+        <Dropdown.Root>
+          <Dropdown.Trigger>
+            <Button.Root variant="ghost" tone="neutral" aria-label="Другие действия">
+              <Button.Icon>
+                <Ellipsis />
+              </Button.Icon>
+            </Button.Root>
+          </Dropdown.Trigger>
+          <Dropdown.Content align="end">
+            <Dropdown.Item>
+              <Dropdown.ItemIcon as={Pencil} />
+              Переименовать
+            </Dropdown.Item>
+            <Dropdown.Item>
+              <Dropdown.ItemIcon as={Copy} />
+              Дублировать
+            </Dropdown.Item>
+            <Dropdown.Item>
+              <Dropdown.ItemIcon as={Share2} />
+              Поделиться
+            </Dropdown.Item>
+            <Dropdown.Separator />
+            <Dropdown.Item tone="danger">
+              <Dropdown.ItemIcon as={Trash2} />
+              Удалить
+            </Dropdown.Item>
+          </Dropdown.Content>
+        </Dropdown.Root>
+      </div>
+    </Card.Root>
+  );
+}

package/src/components/dropdown/examples/sizes.tsx

@@ -1,99 +1,40 @@
-import { Copy, Edit, Trash2 } from "lucide-react";
-import { Button } from "@/components/button/Button";
-import { Dropdown } from "@/components/dropdown/Dropdown";
+/** Dropdown.Content at every size tier xs → xl with icons, shortcuts and a danger item. Give the menu the same size as its trigger. */
+import { Copy, Pencil, Trash2 } from "lucide-react";
+import { Button, Dropdown } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
-/** Ярус `size` на `Dropdown.Content`: s, m, l, xl — как в `playground/snippets/dropdown/sizes.tsx`. */
 export default function DropdownSizesExample() {
   return (
-    <>
-      <Dropdown.Root>
-        <Dropdown.Trigger>
-          <Button.Root type="button" size="s" variant="neutral" mode="stroke">
-            size=&quot;s&quot;
-          </Button.Root>
-        </Dropdown.Trigger>
-        <Dropdown.Content size="s">
-          <Dropdown.Item>
-            <Dropdown.ItemIcon as={Edit} strokeWidth={2} />
-            Редактировать
-          </Dropdown.Item>
-          <Dropdown.Item>
-            <Dropdown.ItemIcon as={Copy} strokeWidth={2} />
-            Дублировать
-          </Dropdown.Item>
-          <Dropdown.Separator />
-          <Dropdown.Item destructive>
-            <Dropdown.ItemIcon as={Trash2} strokeWidth={2} />
-            Удалить
-          </Dropdown.Item>
-        </Dropdown.Content>
-      </Dropdown.Root>
-      <Dropdown.Root>
-        <Dropdown.Trigger>
-          <Button.Root type="button" size="m" variant="neutral" mode="stroke">
-            size=&quot;m&quot;
-          </Button.Root>
-        </Dropdown.Trigger>
-        <Dropdown.Content size="m">
-          <Dropdown.Item>
-            <Dropdown.ItemIcon as={Edit} strokeWidth={2} />
-            Редактировать
-          </Dropdown.Item>
-          <Dropdown.Item>
-            <Dropdown.ItemIcon as={Copy} strokeWidth={2} />
-            Дублировать
-          </Dropdown.Item>
-          <Dropdown.Separator />
-          <Dropdown.Item destructive>
-            <Dropdown.ItemIcon as={Trash2} strokeWidth={2} />
-            Удалить
-          </Dropdown.Item>
-        </Dropdown.Content>
-      </Dropdown.Root>
-      <Dropdown.Root>
-        <Dropdown.Trigger>
-          <Button.Root type="button" size="l" variant="neutral" mode="stroke">
-            size=&quot;l&quot;
-          </Button.Root>
-        </Dropdown.Trigger>
-        <Dropdown.Content size="l">
-          <Dropdown.Item>
-            <Dropdown.ItemIcon as={Edit} strokeWidth={2} />
-            Редактировать
-          </Dropdown.Item>
-          <Dropdown.Item>
-            <Dropdown.ItemIcon as={Copy} strokeWidth={2} />
-            Дублировать
-          </Dropdown.Item>
-          <Dropdown.Separator />
-          <Dropdown.Item destructive>
-            <Dropdown.ItemIcon as={Trash2} strokeWidth={2} />
-            Удалить
-          </Dropdown.Item>
-        </Dropdown.Content>
-      </Dropdown.Root>
-      <Dropdown.Root>
-        <Dropdown.Trigger>
-          <Button.Root type="button" size="xl" variant="neutral" mode="stroke">
-            size=&quot;xl&quot;
-          </Button.Root>
-        </Dropdown.Trigger>
-        <Dropdown.Content size="xl">
-          <Dropdown.Item>
-            <Dropdown.ItemIcon as={Edit} strokeWidth={2} />
-            Редактировать
-          </Dropdown.Item>
-          <Dropdown.Item>
-            <Dropdown.ItemIcon as={Copy} strokeWidth={2} />
-            Дублировать
-          </Dropdown.Item>
-          <Dropdown.Separator />
-          <Dropdown.Item destructive>
-            <Dropdown.ItemIcon as={Trash2} strokeWidth={2} />
-            Удалить
-          </Dropdown.Item>
-        </Dropdown.Content>
-      </Dropdown.Root>
-    </>
+    <div className={styles.row}>
+      {SIZES.map((size) => (
+        <Dropdown.Root key={size}>
+          <Dropdown.Trigger>
+            <Button.Root variant="soft" tone="neutral" size={size}>
+              Размер {size}
+            </Button.Root>
+          </Dropdown.Trigger>
+          <Dropdown.Content size={size}>
+            <Dropdown.Item>
+              <Dropdown.ItemIcon as={Pencil} />
+              Переименовать
+              <Dropdown.ItemShortcut>F2</Dropdown.ItemShortcut>
+            </Dropdown.Item>
+            <Dropdown.Item>
+              <Dropdown.ItemIcon as={Copy} />
+              Дублировать
+              <Dropdown.ItemShortcut>⌘D</Dropdown.ItemShortcut>
+            </Dropdown.Item>
+            <Dropdown.Separator />
+            <Dropdown.Item tone="danger">
+              <Dropdown.ItemIcon as={Trash2} />
+              Удалить
+            </Dropdown.Item>
+          </Dropdown.Content>
+        </Dropdown.Root>
+      ))}
+    </div>
   );
 }

package/src/components/dropdown/examples/states.tsx

@@ -1,19 +1,42 @@
-import { Button } from "@/components/button/Button";
-import { Dropdown } from "@/components/dropdown/Dropdown";
+/** A long grouped list that scrolls inside the panel, with a disabled row skipped by arrow keys. Use when a menu has more items than fit the panel max height. */
+import { Button, Dropdown } from "prime-ui-kit";
+
+const PROJECTS = [
+  "Сайт компании",
+  "Мобильное приложение",
+  "Личный кабинет",
+  "Админ-панель",
+  "Лендинг акции",
+  "Платёжный шлюз",
+  "Справочный центр",
+  "Внутренний портал",
+  "Аналитика продаж",
+  "CRM для партнёров",
+  "Бот поддержки",
+  "Дизайн-система",
+];
 
-/** Недоступный пункт через `disabled` — как в `playground/snippets/dropdown/states.tsx`. */
 export default function DropdownStatesExample() {
   return (
     <Dropdown.Root>
       <Dropdown.Trigger>
-        <Button.Root type="button" variant="neutral" mode="stroke">
-          Доступ к отчёту
+        <Button.Root variant="soft" tone="neutral">
+          Переместить в проект
         </Button.Root>
       </Dropdown.Trigger>
       <Dropdown.Content>
-        <Dropdown.Item>Скачать PDF</Dropdown.Item>
-        <Dropdown.Item disabled>Экспорт в Excel (нет прав)</Dropdown.Item>
-        <Dropdown.Item>Отправить на почту</Dropdown.Item>
+        <Dropdown.Group>
+          <Dropdown.GroupLabel>Недавние</Dropdown.GroupLabel>
+          <Dropdown.Item>Сайт компании</Dropdown.Item>
+          <Dropdown.Item disabled>Архив 2023 — только чтение</Dropdown.Item>
+        </Dropdown.Group>
+        <Dropdown.Separator />
+        <Dropdown.Group>
+          <Dropdown.GroupLabel>Все проекты</Dropdown.GroupLabel>
+          {PROJECTS.map((name) => (
+            <Dropdown.Item key={name}>{name}</Dropdown.Item>
+          ))}
+        </Dropdown.Group>
       </Dropdown.Content>
     </Dropdown.Root>
   );

package/src/components/dropdown/examples/variants.tsx

@@ -1,20 +1,51 @@
-import { Button } from "@/components/button/Button";
-import { Dropdown } from "@/components/dropdown/Dropdown";
+/** Item kinds: with icon and shortcut, disabled, `tone="danger"`, plus groups with labels and separators. Use as the reference for a document actions menu. */
+import { Archive, Copy, FolderInput, Link2, Pencil, Trash2 } from "lucide-react";
+import { Button, Dropdown } from "prime-ui-kit";
 
-/** Обычные пункты и `destructive` на `Dropdown.Item` — как в `playground/snippets/dropdown/variants.tsx`. */
 export default function DropdownVariantsExample() {
   return (
     <Dropdown.Root>
       <Dropdown.Trigger>
-        <Button.Root type="button" variant="neutral" mode="lighter">
+        <Button.Root variant="soft" tone="neutral">
           Документ
         </Button.Root>
       </Dropdown.Trigger>
       <Dropdown.Content>
-        <Dropdown.Item>Переименовать</Dropdown.Item>
-        <Dropdown.Item>Переместить…</Dropdown.Item>
+        <Dropdown.Group>
+          <Dropdown.GroupLabel>Правка</Dropdown.GroupLabel>
+          <Dropdown.Item>
+            <Dropdown.ItemIcon as={Pencil} />
+            Переименовать
+            <Dropdown.ItemShortcut>F2</Dropdown.ItemShortcut>
+          </Dropdown.Item>
+          <Dropdown.Item>
+            <Dropdown.ItemIcon as={Copy} />
+            Дублировать
+            <Dropdown.ItemShortcut>⌘D</Dropdown.ItemShortcut>
+          </Dropdown.Item>
+          <Dropdown.Item>
+            <Dropdown.ItemIcon as={Link2} />
+            Скопировать ссылку
+          </Dropdown.Item>
+        </Dropdown.Group>
         <Dropdown.Separator />
-        <Dropdown.Item destructive>Удалить безвозвратно</Dropdown.Item>
+        <Dropdown.Group>
+          <Dropdown.GroupLabel>Хранение</Dropdown.GroupLabel>
+          <Dropdown.Item>
+            <Dropdown.ItemIcon as={FolderInput} />
+            Переместить…
+          </Dropdown.Item>
+          <Dropdown.Item disabled>
+            <Dropdown.ItemIcon as={Archive} />
+            Архивировать — нет прав
+          </Dropdown.Item>
+        </Dropdown.Group>
+        <Dropdown.Separator />
+        <Dropdown.Item tone="danger">
+          <Dropdown.ItemIcon as={Trash2} />
+          Удалить
+          <Dropdown.ItemShortcut>⌫</Dropdown.ItemShortcut>
+        </Dropdown.Item>
       </Dropdown.Content>
     </Dropdown.Root>
   );