prime-ui-kit 0.9.0 → 0.9.1

package/src/components/tabs/examples/orientation.tsx

@@ -0,0 +1,40 @@
+/** Tabs over the panel and a side list of sections that stacks on top below 600px — `orientation`. */
+import { Tabs, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const SECTIONS = [
+  { value: "profile", label: "Профиль", text: "Имя, должность и контакты сотрудника." },
+  { value: "notifications", label: "Уведомления", text: "Письма о заказах и еженедельная сводка." },
+  { value: "deletion", label: "Удаление", text: "Аккаунт и все данные будут удалены." },
+];
+
+export default function TabsOrientationExample() {
+  return (
+    <>
+      {(["horizontal", "vertical"] as const).map((orientation) => (
+        <Tabs.Root
+          key={orientation}
+          orientation={orientation}
+          defaultValue="notifications"
+          className={styles.frame}
+        >
+          <Tabs.List aria-label="Настройки">
+            {SECTIONS.map((section) => (
+              <Tabs.Item key={section.value} value={section.value}>
+                {section.label}
+              </Tabs.Item>
+            ))}
+          </Tabs.List>
+          {SECTIONS.map((section) => (
+            <Tabs.Panel key={section.value} value={section.value}>
+              <Typography variant="body-m" tone="secondary">
+                {section.text}
+              </Typography>
+            </Tabs.Panel>
+          ))}
+        </Tabs.Root>
+      ))}
+    </>
+  );
+}

package/src/components/tabs/examples/overflow.tsx

@@ -0,0 +1,60 @@
+/** Drag the frame narrower: icons go first, then labels, and icons with tooltips stay; then the list scrolls — `Tabs.Icon`. */
+import { Icon, Tabs, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const SECTIONS = [
+  {
+    value: "overview",
+    label: "Обзор",
+    icon: "nav.home",
+    count: 0,
+    text: "Выручка за октябрь — 4 812 300 ₽.",
+  },
+  {
+    value: "orders",
+    label: "Заказы",
+    icon: "object.package",
+    count: 24,
+    text: "24 заказа ждут отгрузки.",
+  },
+  {
+    value: "invoices",
+    label: "Счета",
+    icon: "object.receipt",
+    count: 3,
+    text: "3 счёта просрочены.",
+  },
+  {
+    value: "clients",
+    label: "Клиенты",
+    icon: "object.users",
+    count: 0,
+    text: "312 активных компаний.",
+  },
+] as const;
+
+export default function TabsOverflowExample() {
+  return (
+    <Tabs.Root defaultValue="orders" className={styles.resizable}>
+      <Tabs.List aria-label="Магазин">
+        {SECTIONS.map((section) => (
+          <Tabs.Item key={section.value} value={section.value}>
+            <Tabs.Icon>
+              <Icon name={section.icon} />
+            </Tabs.Icon>
+            <Tabs.Label>{section.label}</Tabs.Label>
+            {section.count > 0 ? <Tabs.Count>{section.count}</Tabs.Count> : null}
+          </Tabs.Item>
+        ))}
+      </Tabs.List>
+      {SECTIONS.map((section) => (
+        <Tabs.Panel key={section.value} value={section.value}>
+          <Typography variant="body-m" tone="secondary">
+            {section.text}
+          </Typography>
+        </Tabs.Panel>
+      ))}
+    </Tabs.Root>
+  );
+}

package/src/components/tabs/examples/overview.tsx

@@ -0,0 +1,30 @@
+/** Sections of one screen; the active tab rises into the panel and glides to the next one — `defaultValue`. */
+import { Tabs, Typography } from "prime-ui-kit";
+
+const SECTIONS = [
+  { value: "overview", label: "Обзор", text: "Сводка по магазину за выбранный период." },
+  { value: "orders", label: "Заказы", text: "Последние заказы и их статусы." },
+  { value: "reviews", label: "Отзывы", text: "Новые отзывы покупателей." },
+  { value: "settings", label: "Настройки", text: "Название, валюта и способы доставки." },
+];
+
+export default function TabsOverviewExample() {
+  return (
+    <Tabs.Root defaultValue="overview">
+      <Tabs.List aria-label="Магазин">
+        {SECTIONS.map((section) => (
+          <Tabs.Item key={section.value} value={section.value}>
+            {section.label}
+          </Tabs.Item>
+        ))}
+      </Tabs.List>
+      {SECTIONS.map((section) => (
+        <Tabs.Panel key={section.value} value={section.value}>
+          <Typography variant="body-m" tone="secondary">
+            {section.text}
+          </Typography>
+        </Tabs.Panel>
+      ))}
+    </Tabs.Root>
+  );
+}

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

@@ -1,30 +1,30 @@
-/** Tabs at every size tier next to a Button of the same size; the tab height equals the control height. Use to align tabs with toolbar controls. */
-import { Button, type ControlSize, Tabs, Typography } from "prime-ui-kit";
+/** Every size tier: text, icon, folder radius and spacing grow together — `size`. */
+import { Tabs, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
-const sizes: ControlSize[] = ["xs", "s", "m", "l", "xl"];
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function TabsSizesExample() {
   return (
-    <div className={styles.sizes}>
-      {sizes.map((size) => (
-        <div key={size} className={styles.sizeRow}>
-          <Typography.Root as="span" variant="code" tone="muted" className={styles.caption}>
+    <>
+      {SIZES.map((size) => (
+        <div key={size}>
+          <Typography as="span" variant="caption" tone="muted">
             {size}
-          </Typography.Root>
-          <Tabs.Root size={size} defaultValue="all">
-            <Tabs.List aria-label={`Заявки, ${size}`}>
-              <Tabs.Trigger value="all">Все</Tabs.Trigger>
-              <Tabs.Trigger value="active">Активные</Tabs.Trigger>
-              <Tabs.Trigger value="archive">Архив</Tabs.Trigger>
+          </Typography>
+          <Tabs.Root size={size} defaultValue="all" fullWidth={false}>
+            <Tabs.List aria-label="Заявки">
+              <Tabs.Item value="all">Все</Tabs.Item>
+              <Tabs.Item value="active">Активные</Tabs.Item>
+              <Tabs.Item value="archive">Архив</Tabs.Item>
             </Tabs.List>
+            <Tabs.Panel value="all">
+              <Typography variant="body-m" tone="secondary">
+                12 заявок за неделю.
+              </Typography>
+            </Tabs.Panel>
           </Tabs.Root>
-          <Button.Root variant="outline" tone="neutral" size={size}>
-            Фильтр
-          </Button.Root>
         </div>
       ))}
-    </div>
+    </>
   );
 }

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

@@ -1,61 +1,26 @@
-/** Icons with labels, a disabled tab skipped by arrows, and overflow in a phone-width container (scrolls with faded edges). Use to check icon, disabled and narrow-screen behaviour. */
-import { Bell, CreditCard, Shield, User } from "lucide-react";
+/** A disabled tab that clicks and arrow keys skip — `disabled`. */
 import { Tabs, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 export default function TabsStatesExample() {
   return (
-    <div className={styles.stack}>
-      <div className={styles.group}>
-        <Typography.Root variant="caption" weight="medium" tone="secondary">
-          Иконки и disabled
-        </Typography.Root>
-        <Tabs.Root defaultValue="profile">
-          <Tabs.List aria-label="Аккаунт">
-            <Tabs.Trigger value="profile">
-              <Tabs.Icon>
-                <User />
-              </Tabs.Icon>
-              <Tabs.Label>Профиль</Tabs.Label>
-            </Tabs.Trigger>
-            <Tabs.Trigger value="security">
-              <Tabs.Icon>
-                <Shield />
-              </Tabs.Icon>
-              <Tabs.Label>Безопасность</Tabs.Label>
-            </Tabs.Trigger>
-            <Tabs.Trigger value="billing" disabled>
-              <Tabs.Icon>
-                <CreditCard />
-              </Tabs.Icon>
-              <Tabs.Label>Оплата</Tabs.Label>
-            </Tabs.Trigger>
-          </Tabs.List>
-        </Tabs.Root>
-      </div>
-
-      <div className={styles.group}>
-        <Typography.Root variant="caption" weight="medium" tone="secondary">
-          Переполнение в 375px
-        </Typography.Root>
-        <div className={styles.narrow}>
-          <Tabs.Root defaultValue="notifications">
-            <Tabs.List aria-label="Настройки">
-              <Tabs.Trigger value="general">Общие</Tabs.Trigger>
-              <Tabs.Trigger value="team">Команда</Tabs.Trigger>
-              <Tabs.Trigger value="notifications">
-                <Tabs.Icon>
-                  <Bell />
-                </Tabs.Icon>
-                <Tabs.Label>Уведомления</Tabs.Label>
-              </Tabs.Trigger>
-              <Tabs.Trigger value="integrations">Интеграции</Tabs.Trigger>
-              <Tabs.Trigger value="api">API</Tabs.Trigger>
-            </Tabs.List>
-          </Tabs.Root>
-        </div>
-      </div>
-    </div>
+    <Tabs.Root defaultValue="profile">
+      <Tabs.List aria-label="Аккаунт">
+        <Tabs.Item value="profile">Профиль</Tabs.Item>
+        <Tabs.Item value="security">Безопасность</Tabs.Item>
+        <Tabs.Item value="billing" disabled>
+          Оплата
+        </Tabs.Item>
+      </Tabs.List>
+      <Tabs.Panel value="profile">
+        <Typography variant="body-m" tone="secondary">
+          Имя, должность и контакты.
+        </Typography>
+      </Tabs.Panel>
+      <Tabs.Panel value="security">
+        <Typography variant="body-m" tone="secondary">
+          Пароль и двухфакторная защита.
+        </Typography>
+      </Tabs.Panel>
+    </Tabs.Root>
   );
 }

package/src/components/tabs/examples/two-line.tsx

@@ -1,10 +1,7 @@
-/** Two-line tabs: `Tabs.Label` + `Tabs.Count` on the first line, `Tabs.Description` with a `<strong>` value on the second. Use for dashboard sections that need a summary per tab. */
+/** A label and a counter on the first line, a summary on the second — `Tabs.Count`, `Tabs.Description`. */
 import { type PaletteColor, Tabs, Typography } from "prime-ui-kit";
-import { useState } from "react";
 
-import styles from "./examples.module.css";
-
-const sections: {
+const SECTIONS: {
   value: string;
   title: string;
   count: number;
@@ -33,31 +30,27 @@ const sections: {
 ];
 
 export default function TabsTwoLineExample() {
-  const [value, setValue] = useState("new");
-
   return (
-    <div className={styles.fleet}>
-      <Tabs.Root value={value} onValueChange={setValue}>
-        <Tabs.List aria-label="Заказы">
-          {sections.map((s) => (
-            <Tabs.Trigger key={s.value} value={s.value}>
-              <Tabs.Label>{s.title}</Tabs.Label>
-              <Tabs.Count color={s.color}>{s.count}</Tabs.Count>
-              <Tabs.Description>
-                <strong>{s.strong}</strong>
-                {s.rest}
-              </Tabs.Description>
-            </Tabs.Trigger>
-          ))}
-        </Tabs.List>
-        {sections.map((s) => (
-          <Tabs.Panel key={s.value} value={s.value}>
-            <Typography.Root variant="body-m" tone="secondary">
-              {s.title}: {s.count} заказов.
-            </Typography.Root>
-          </Tabs.Panel>
+    <Tabs.Root defaultValue="new">
+      <Tabs.List aria-label="Заказы">
+        {SECTIONS.map((section) => (
+          <Tabs.Item key={section.value} value={section.value}>
+            <Tabs.Label>{section.title}</Tabs.Label>
+            <Tabs.Count color={section.color}>{section.count}</Tabs.Count>
+            <Tabs.Description>
+              <strong>{section.strong}</strong>
+              {section.rest}
+            </Tabs.Description>
+          </Tabs.Item>
         ))}
-      </Tabs.Root>
-    </div>
+      </Tabs.List>
+      {SECTIONS.map((section) => (
+        <Tabs.Panel key={section.value} value={section.value}>
+          <Typography variant="body-m" tone="secondary">
+            {section.title}: {section.count} заказов.
+          </Typography>
+        </Tabs.Panel>
+      ))}
+    </Tabs.Root>
   );
 }

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

@@ -0,0 +1,40 @@
+/** The active tab in primary text with an accent icon, or all in accent — `tone`. */
+import { Icon, Tabs, Typography } from "prime-ui-kit";
+
+const TONES = ["neutral", "accent"] as const;
+
+const SECTIONS = [
+  { value: "orders", label: "Заказы", icon: "object.package" },
+  { value: "invoices", label: "Счета", icon: "object.receipt" },
+  { value: "clients", label: "Клиенты", icon: "object.users" },
+] as const;
+
+export default function TabsVariantsExample() {
+  return (
+    <>
+      {TONES.map((tone) => (
+        <Tabs.Root key={tone} tone={tone} defaultValue="orders">
+          <Tabs.List aria-label="Продажи">
+            {SECTIONS.map((section) => (
+              <Tabs.Item key={section.value} value={section.value}>
+                <Tabs.Icon>
+                  <Icon name={section.icon} />
+                </Tabs.Icon>
+                <Tabs.Label>{section.label}</Tabs.Label>
+              </Tabs.Item>
+            ))}
+          </Tabs.List>
+          {SECTIONS.map((section) => (
+            <Tabs.Panel key={section.value} value={section.value}>
+              <Typography variant="body-m" tone="secondary">
+                {tone === "neutral"
+                  ? "Спокойный акцент: цвет только у иконки."
+                  : "Активная вкладка целиком в акцентном цвете."}
+              </Typography>
+            </Tabs.Panel>
+          ))}
+        </Tabs.Root>
+      ))}
+    </>
+  );
+}

package/src/components/tabs/examples/with-icon.tsx

@@ -0,0 +1,44 @@
+/** A muted icon before the label and a hairline before the service section — `Tabs.Icon`, `Tabs.Label`, `Tabs.Separator`. */
+import { Icon, Tabs, Typography } from "prime-ui-kit";
+
+const SECTIONS = [
+  { value: "overview", label: "Обзор", icon: "nav.home", text: "Выручка и заказы за неделю." },
+  { value: "orders", label: "Заказы", icon: "object.package", text: "24 заказа ждут отгрузки." },
+  { value: "invoices", label: "Счета", icon: "object.receipt", text: "3 счёта просрочены." },
+] as const;
+
+export default function TabsWithIconExample() {
+  return (
+    <Tabs.Root defaultValue="orders">
+      <Tabs.List aria-label="Магазин">
+        {SECTIONS.map((section) => (
+          <Tabs.Item key={section.value} value={section.value}>
+            <Tabs.Icon>
+              <Icon name={section.icon} />
+            </Tabs.Icon>
+            <Tabs.Label>{section.label}</Tabs.Label>
+          </Tabs.Item>
+        ))}
+        <Tabs.Separator />
+        <Tabs.Item value="settings">
+          <Tabs.Icon>
+            <Icon name="action.settings" />
+          </Tabs.Icon>
+          <Tabs.Label>Настройки</Tabs.Label>
+        </Tabs.Item>
+      </Tabs.List>
+      {SECTIONS.map((section) => (
+        <Tabs.Panel key={section.value} value={section.value}>
+          <Typography variant="body-m" tone="secondary">
+            {section.text}
+          </Typography>
+        </Tabs.Panel>
+      ))}
+      <Tabs.Panel value="settings">
+        <Typography variant="body-m" tone="secondary">
+          Реквизиты, уведомления и доступы сотрудников.
+        </Typography>
+      </Tabs.Panel>
+    </Tabs.Root>
+  );
+}