prime-ui-kit 0.9.0 → 0.9.2

package/src/components/segmented-control/examples/states.tsx

@@ -1,52 +1,46 @@
-/** A selected segment, a group without a selection, a disabled item and a disabled group. Use it as a reference for every state. */
+/** No selection yet, a disabled segment and a disabled group next to the default — `disabled`. */
 import { SegmentedControl, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 export default function SegmentedControlStatesExample() {
   return (
-    <div className={styles.stack}>
-      <div className={styles.cell}>
-        <SegmentedControl.Root defaultValue="week" aria-label="Период">
-          <SegmentedControl.Item value="day">День</SegmentedControl.Item>
-          <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
-          <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
+    <div>
+      <div>
+        <SegmentedControl.Root defaultValue="active" aria-label="Статус кампании">
+          <SegmentedControl.Item value="active">Активные</SegmentedControl.Item>
+          <SegmentedControl.Item value="archived">Архив</SegmentedControl.Item>
         </SegmentedControl.Root>
-        <Typography.Root variant="caption" tone="muted">
-          Выбран сегмент
-        </Typography.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          default
+        </Typography>
       </div>
-      <div className={styles.cell}>
-        <SegmentedControl.Root aria-label="Период без выбора">
-          <SegmentedControl.Item value="day">День</SegmentedControl.Item>
-          <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
-          <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
+      <div>
+        <SegmentedControl.Root aria-label="Статус кампании">
+          <SegmentedControl.Item value="active">Активные</SegmentedControl.Item>
+          <SegmentedControl.Item value="archived">Архив</SegmentedControl.Item>
         </SegmentedControl.Root>
-        <Typography.Root variant="caption" tone="muted">
-          Без выбора
-        </Typography.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          empty
+        </Typography>
       </div>
-      <div className={styles.cell}>
+      <div>
         <SegmentedControl.Root defaultValue="active" aria-label="Статус кампании">
           <SegmentedControl.Item value="active">Активные</SegmentedControl.Item>
-          <SegmentedControl.Item value="paused" disabled>
-            На паузе
+          <SegmentedControl.Item value="archived" disabled>
+            Архив
           </SegmentedControl.Item>
-          <SegmentedControl.Item value="archived">Архив</SegmentedControl.Item>
         </SegmentedControl.Root>
-        <Typography.Root variant="caption" tone="muted">
+        <Typography as="span" variant="caption" tone="muted">
           Item disabled
-        </Typography.Root>
+        </Typography>
       </div>
-      <div className={styles.cell}>
-        <SegmentedControl.Root defaultValue="week" disabled aria-label="Период недоступен">
-          <SegmentedControl.Item value="day">День</SegmentedControl.Item>
-          <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
-          <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
+      <div>
+        <SegmentedControl.Root defaultValue="active" disabled aria-label="Статус кампании">
+          <SegmentedControl.Item value="active">Активные</SegmentedControl.Item>
+          <SegmentedControl.Item value="archived">Архив</SegmentedControl.Item>
         </SegmentedControl.Root>
-        <Typography.Root variant="caption" tone="muted">
-          Root disabled
-        </Typography.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          disabled
+        </Typography>
       </div>
     </div>
   );

package/src/components/segmented-control/examples/two-line.tsx

@@ -1,115 +1,28 @@
-/** Two-line full-width segments with Label, Count and Description, scrolling on narrow screens. Use it for status overviews where each option carries a metric. */
-import { type PaletteColor, SegmentedControl, Typography } from "prime-ui-kit";
-import * as React from "react";
+/** A label and a counter on the first line, a metric on the second — `SegmentedControl.Label`, `SegmentedControl.Count`, `SegmentedControl.Description`. */
+import { type PaletteColor, SegmentedControl } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
-type Group = {
+const QUEUES: {
   value: string;
   title: string;
   count: number;
   color: PaletteColor;
-  description: React.ReactNode;
-};
-
-const groups: Group[] = [
-  {
-    value: "fleet",
-    title: "В парке",
-    count: 28,
-    color: "blue",
-    description: (
-      <>
-        <strong>1</strong> в подготовке
-      </>
-    ),
-  },
-  {
-    value: "ready",
-    title: "Готовы к выдаче",
-    count: 7,
-    color: "green",
-    description: (
-      <>
-        ещё <strong>3</strong> в сервисе
-      </>
-    ),
-  },
-  {
-    value: "rented",
-    title: "В аренде",
-    count: 17,
-    color: "blue",
-    description: (
-      <>
-        загрузка <strong>63%</strong>
-      </>
-    ),
-  },
-  {
-    value: "releasing",
-    title: "Освобождаются",
-    count: 7,
-    color: "orange",
-    description: (
-      <>
-        ближайший <strong>завтра</strong>
-      </>
-    ),
-  },
-  {
-    value: "service",
-    title: "В сервисе",
-    count: 4,
-    color: "red",
-    description: (
-      <>
-        <strong>2</strong> в ремонте
-      </>
-    ),
-  },
-  {
-    value: "documents",
-    title: "Документы",
-    count: 25,
-    color: "yellow",
-    description: (
-      <>
-        <strong>10</strong> истекли
-      </>
-    ),
-  },
-  {
-    value: "archive",
-    title: "Архив",
-    count: 1,
-    color: "gray",
-    description: (
-      <>
-        <strong>1</strong> продано
-      </>
-    ),
-  },
+  metric: string;
+}[] = [
+  { value: "new", title: "Новые", count: 12, color: "blue", metric: "3 срочных" },
+  { value: "progress", title: "В работе", count: 5, color: "orange", metric: "2 просрочены" },
+  { value: "done", title: "Готово", count: 148, color: "green", metric: "31 за неделю" },
 ];
 
 export default function SegmentedControlTwoLineExample() {
-  const [value, setValue] = React.useState("fleet");
-  const current = groups.find((g) => g.value === value);
-
   return (
-    <div className={styles.fleet}>
-      <SegmentedControl.Root fullWidth value={value} onValueChange={setValue} aria-label="Автопарк">
-        {groups.map((g) => (
-          <SegmentedControl.Item key={g.value} value={g.value}>
-            <SegmentedControl.Label>{g.title}</SegmentedControl.Label>
-            <SegmentedControl.Count color={g.color}>{g.count}</SegmentedControl.Count>
-            <SegmentedControl.Description>{g.description}</SegmentedControl.Description>
-          </SegmentedControl.Item>
-        ))}
-      </SegmentedControl.Root>
-      <Typography.Root variant="caption" tone="muted">
-        {current?.title}: {current?.count} автомобилей.
-      </Typography.Root>
-    </div>
+    <SegmentedControl.Root fullWidth defaultValue="new" aria-label="Очередь заявок">
+      {QUEUES.map((queue) => (
+        <SegmentedControl.Item key={queue.value} value={queue.value}>
+          <SegmentedControl.Label>{queue.title}</SegmentedControl.Label>
+          <SegmentedControl.Count color={queue.color}>{queue.count}</SegmentedControl.Count>
+          <SegmentedControl.Description>{queue.metric}</SegmentedControl.Description>
+        </SegmentedControl.Item>
+      ))}
+    </SegmentedControl.Root>
   );
 }

package/src/components/segmented-control/examples/with-icon.tsx

@@ -0,0 +1,52 @@
+/** An icon before the label and square icon-only segments named for screen readers — `SegmentedControl.Icon`, `aria-label`. */
+import { Icon, SegmentedControl, Typography } from "prime-ui-kit";
+
+const VIEWPORTS = [
+  { value: "desktop", label: "Компьютер", icon: "viewport.desktop" },
+  { value: "tablet", label: "Планшет", icon: "viewport.tablet" },
+  { value: "mobile", label: "Телефон", icon: "viewport.mobile" },
+] as const;
+
+export default function SegmentedControlWithIconExample() {
+  return (
+    <div>
+      <div>
+        <SegmentedControl.Root defaultValue="light" aria-label="Тема">
+          <SegmentedControl.Item value="light">
+            <SegmentedControl.Icon>
+              <Icon name="theme.light" />
+            </SegmentedControl.Icon>
+            Светлая
+          </SegmentedControl.Item>
+          <SegmentedControl.Item value="dark">
+            <SegmentedControl.Icon>
+              <Icon name="theme.dark" />
+            </SegmentedControl.Icon>
+            Тёмная
+          </SegmentedControl.Item>
+        </SegmentedControl.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          leading
+        </Typography>
+      </div>
+      <div>
+        <SegmentedControl.Root defaultValue="desktop" aria-label="Предпросмотр письма">
+          {VIEWPORTS.map((viewport) => (
+            <SegmentedControl.Item
+              key={viewport.value}
+              value={viewport.value}
+              aria-label={viewport.label}
+            >
+              <SegmentedControl.Icon>
+                <Icon name={viewport.icon} />
+              </SegmentedControl.Icon>
+            </SegmentedControl.Item>
+          ))}
+        </SegmentedControl.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          icon-only
+        </Typography>
+      </div>
+    </div>
+  );
+}