prime-ui-kit 0.7.13 → 0.9.1

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

@@ -1,32 +0,0 @@
-import { Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/**
- * Две колонки разной ширины, одинаковые `variant` и `tone`.
- * Зеркало `playground/snippets/typography/full-width.tsx`.
- */
-export default function TypographyExampleFullWidth() {
-  return (
-    <div className={styles.fullWidthColumns}>
-      <div className={styles.fullWidthNarrow}>
-        <Typography.Root variant="body-small" tone="muted">
-          Узкая колонка
-        </Typography.Root>
-        <Typography.Root variant="body-default">
-          Длинное предложение в узком контейнере демонстрирует переносы и выравнивание без
-          отдельного пропа ширины.
-        </Typography.Root>
-      </div>
-      <div className={styles.fullWidthWide}>
-        <Typography.Root variant="body-small" tone="muted">
-          Широкая колонка
-        </Typography.Root>
-        <Typography.Root variant="body-default">
-          Тот же размер и стиль в более широком блоке: меньше переносов, читаемость остаётся за счёт
-          связки кегля и межстрочного интервала из токенов для `size="m"`.
-        </Typography.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/typography/examples/reading-and-form.tsx

@@ -1,40 +0,0 @@
-import { Button, Input, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/**
- * Заголовок и вводный текст — `Typography`; поля и кнопки — `Input` / `Button`.
- * Зеркало `playground/snippets/typography/reading-and-form.tsx`.
- */
-export default function TypographyExampleReadingAndForm() {
-  return (
-    <main className={styles.readingAndForm}>
-      <Typography.Root as="h1" variant="heading-page">
-        Заявка на доступ
-      </Typography.Root>
-      <Typography.Root as="p" variant="body-default" tone="muted">
-        Заполните форму: роли текста задаются здесь, оформление полей — компонентами формы.
-      </Typography.Root>
-      <div className={styles.readingAndFormFields}>
-        <Input.Root label="Email">
-          <Input.Wrapper>
-            <Input.Field type="email" placeholder="you@example.com" autoComplete="email" />
-          </Input.Wrapper>
-        </Input.Root>
-        <Input.Root label="Комментарий" hint="Необязательно">
-          <Input.Wrapper>
-            <Input.Field placeholder="Контекст" />
-          </Input.Wrapper>
-        </Input.Root>
-        <div className={styles.readingAndFormActions}>
-          <Button.Root type="button" variant="primary">
-            Отправить
-          </Button.Root>
-          <Button.Root type="button" variant="neutral" mode="stroke">
-            Отмена
-          </Button.Root>
-        </div>
-      </div>
-    </main>
-  );
-}

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

@@ -1,27 +0,0 @@
-import { Divider, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/** Курсив `italic` при том же `variant` и `weight`. Зеркало `playground/snippets/typography/states.tsx`. */
-export default function TypographyExampleStates() {
-  return (
-    <div className={styles.typographyScaleList}>
-      <div className={styles.typographyScaleRow}>
-        <Typography.Root variant="body-default" weight="medium">
-          Заголовок карточки без курсива — обычный акцент.
-        </Typography.Root>
-        <Divider.Root variant="text" align="start">
-          italic не задан (false)
-        </Divider.Root>
-      </div>
-      <div className={styles.typographyScaleRow}>
-        <Typography.Root variant="body-default" weight="medium" italic>
-          Тот же размер и вес с курсивом — цитата или название научной работы.
-        </Typography.Root>
-        <Divider.Root variant="text" align="start">
-          italic — курсив через data-атрибут и токены
-        </Divider.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/typography/examples/variant-catalog.tsx

@@ -1,107 +0,0 @@
-import { Divider, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/** Каталог всех ролей `variant` из `typography.role` — зеркало `playground/snippets/typography/variant-catalog.tsx`. */
-export default function TypographyExampleVariantCatalog() {
-  return (
-    <div className={styles.typographyScaleList}>
-      <div className={styles.typographyScaleRow}>
-        <Typography.Root variant="display" weight="medium" tracking="tight">
-          The quick brown fox jumps over the lazy dog.
-        </Typography.Root>
-        <Divider.Root variant="text" align="start">
-          <code>display</code> · medium · tight — MD3 Display Large, герой экрана
-        </Divider.Root>
-      </div>
-      <div className={styles.typographyScaleRow}>
-        <Typography.Root variant="headline" weight="medium" tracking="tight">
-          The quick brown fox jumps over the lazy dog.
-        </Typography.Root>
-        <Divider.Root variant="text" align="start">
-          <code>headline</code> · medium · tight — MD3 Headline Large, промо/лид
-        </Divider.Root>
-      </div>
-      <div className={styles.typographyScaleRow}>
-        <Typography.Root variant="heading-page" weight="medium" tracking="tight">
-          The quick brown fox jumps over the lazy dog.
-        </Typography.Root>
-        <Divider.Root variant="text" align="start">
-          <code>heading-page</code> · medium · tight — MD3 Headline Medium, заголовок страницы
-        </Divider.Root>
-      </div>
-      <div className={styles.typographyScaleRow}>
-        <Typography.Root variant="heading-section" weight="medium" tracking="tight">
-          The quick brown fox jumps over the lazy dog.
-        </Typography.Root>
-        <Divider.Root variant="text" align="start">
-          <code>heading-section</code> · medium · tight — MD3 Headline Small, секция
-        </Divider.Root>
-      </div>
-      <div className={styles.typographyScaleRow}>
-        <Typography.Root variant="heading-subsection" weight="medium">
-          The quick brown fox jumps over the lazy dog.
-        </Typography.Root>
-        <Divider.Root variant="text" align="start">
-          <code>heading-subsection</code> · medium — MD3 Title Large, подсекция
-        </Divider.Root>
-      </div>
-      <div className={styles.typographyScaleRow}>
-        <Typography.Root variant="heading-group" weight="medium">
-          The quick brown fox jumps over the lazy dog.
-        </Typography.Root>
-        <Divider.Root variant="text" align="start">
-          <code>heading-group</code> · medium — MD3 Title Small, подпись группы
-        </Divider.Root>
-      </div>
-      <div className={styles.typographyScaleRow}>
-        <Typography.Root variant="body-large" weight="medium" tracking="tight">
-          The quick brown fox jumps over the lazy dog.
-        </Typography.Root>
-        <Divider.Root variant="text" align="start">
-          <code>body-large</code> · medium · tight — MD3 Body Large
-        </Divider.Root>
-      </div>
-      <div className={styles.typographyScaleRow}>
-        <Typography.Root variant="body-default">
-          The quick brown fox jumps over the lazy dog.
-        </Typography.Root>
-        <Divider.Root variant="text" align="start">
-          <code>body-default</code> · regular — MD3 Body Medium, основной текст
-        </Divider.Root>
-      </div>
-      <div className={styles.typographyScaleRow}>
-        <Typography.Root variant="body-small">
-          The quick brown fox jumps over the lazy dog.
-        </Typography.Root>
-        <Divider.Root variant="text" align="start">
-          <code>body-small</code> · regular — MD3 Body Small
-        </Divider.Root>
-      </div>
-      <div className={styles.typographyScaleRow}>
-        <Typography.Root variant="body-compact" weight="medium" tracking="wide">
-          The quick brown fox jumps over the lazy dog.
-        </Typography.Root>
-        <Divider.Root variant="text" align="start">
-          <code>body-compact</code> · medium · wide — MD3 Label Large, плотная строка (14px)
-        </Divider.Root>
-      </div>
-      <div className={styles.typographyScaleRow}>
-        <Typography.Root variant="caption">
-          The quick brown fox jumps over the lazy dog.
-        </Typography.Root>
-        <Divider.Root variant="text" align="start">
-          <code>caption</code> · regular — MD3 Label Medium
-        </Divider.Root>
-      </div>
-      <div className={styles.typographyScaleRow}>
-        <Typography.Root variant="caption-micro">
-          The quick brown fox jumps over the lazy dog.
-        </Typography.Root>
-        <Divider.Root variant="text" align="start">
-          <code>caption-micro</code> · regular — MD3 Label Small (~11px)
-        </Divider.Root>
-      </div>
-    </div>
-  );
-}

package/src/layout/sidebar/examples/01-app-shell-nav.tsx

@@ -1,89 +0,0 @@
-import { FileText, LayoutDashboard, Settings } from "lucide-react";
-import { AppShell, Sidebar, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/**
- * Primary app layout: `AppShell.Template` nav slot holds `Sidebar` with `sidebarSlot="page-nav"`.
- * `NavPanel` включает встроенную кнопку на грани (`data-placement="edge"`); режим — через `Sidebar.Root`.
- */
-export default function SidebarExampleAppShellNav() {
-  return (
-    <div className={styles.demoViewport}>
-      <AppShell.Template
-        className={styles.appGrid}
-        fillViewport={false}
-        nav={
-          <Sidebar.Root
-            size="m"
-            sidebarSlot="page-nav"
-            responsive={false}
-            defaultState="expanded"
-            aria-label="Application"
-          >
-            <Sidebar.NavPanel>
-              <Sidebar.Header>
-                <Sidebar.HeaderRow>
-                  <Sidebar.HeaderMain>
-                    <Sidebar.IdentityButton
-                      leading={<span aria-hidden="true">A</span>}
-                      title="Acme Console"
-                      subtitle="Production workspace"
-                    />
-                  </Sidebar.HeaderMain>
-                </Sidebar.HeaderRow>
-              </Sidebar.Header>
-              <Sidebar.Content>
-                <Sidebar.Menu>
-                  <Sidebar.MenuItem>
-                    <Sidebar.MenuButton type="button" active>
-                      <Sidebar.MenuIcon>
-                        <LayoutDashboard size={16} strokeWidth={1.9} />
-                      </Sidebar.MenuIcon>
-                      <Sidebar.MenuLabel>Overview</Sidebar.MenuLabel>
-                    </Sidebar.MenuButton>
-                  </Sidebar.MenuItem>
-                  <Sidebar.MenuItem>
-                    <Sidebar.MenuButton type="button">
-                      <Sidebar.MenuIcon>
-                        <FileText size={16} strokeWidth={1.9} />
-                      </Sidebar.MenuIcon>
-                      <Sidebar.MenuLabel>Reports</Sidebar.MenuLabel>
-                    </Sidebar.MenuButton>
-                  </Sidebar.MenuItem>
-                  <Sidebar.MenuItem>
-                    <Sidebar.MenuButton type="button">
-                      <Sidebar.MenuIcon>
-                        <Settings size={16} strokeWidth={1.9} />
-                      </Sidebar.MenuIcon>
-                      <Sidebar.MenuLabel>Settings</Sidebar.MenuLabel>
-                    </Sidebar.MenuButton>
-                  </Sidebar.MenuItem>
-                </Sidebar.Menu>
-              </Sidebar.Content>
-              <Sidebar.Footer>
-                <Sidebar.IdentityButton
-                  leading={<span aria-hidden="true">●</span>}
-                  title="Signed in"
-                  subtitle="user@acme.dev"
-                />
-              </Sidebar.Footer>
-            </Sidebar.NavPanel>
-          </Sidebar.Root>
-        }
-      >
-        <Typography.Root
-          as="p"
-          variant="body-default"
-          tone="muted"
-          className={styles.mainPlaceholder}
-        >
-          Main scrolls inside <span className={styles.code}>AppShell.Main</span> (page gutters are
-          on <span className={styles.code}>main</span>); the sidebar stays in the nav column. Use{" "}
-          <span className={styles.code}>sidebarSlot=&quot;page-nav&quot;</span> so spacing and grid
-          behavior match the app template.
-        </Typography.Root>
-      </AppShell.Template>
-    </div>
-  );
-}

package/src/layout/sidebar/examples/02-collapsible-desktop.tsx

@@ -1,74 +0,0 @@
-import { Inbox, Layers } from "lucide-react";
-import { Sidebar, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/**
- * Desktop collapse: встроенная кнопка на грани переключает expanded ↔ compact (не оверлей мобильного режима).
- * С `responsive={false}` узкое окно сохраняет инлайн-рейл.
- */
-export default function SidebarExampleCollapsibleDesktop() {
-  return (
-    <div className={styles.demoViewport}>
-      <Sidebar.Root
-        size="m"
-        responsive={false}
-        defaultState="expanded"
-        aria-label="Collapsible navigation"
-      >
-        <Sidebar.NavPanel>
-          <Sidebar.Header>
-            <Sidebar.HeaderRow>
-              <Sidebar.HeaderMain>
-                <Sidebar.IdentityButton
-                  leading={<span aria-hidden="true">W</span>}
-                  title="Workspace"
-                  subtitle="Team"
-                />
-              </Sidebar.HeaderMain>
-            </Sidebar.HeaderRow>
-          </Sidebar.Header>
-          <Sidebar.Content>
-            <Sidebar.NavPanelBody>
-              <Typography.Root
-                as="p"
-                variant="body-small"
-                tone="muted"
-                className={styles.mainPlaceholder}
-              >
-                Use the edge control to switch width. In{" "}
-                <span className={styles.code}>compact</span>, menu rows show icons; tooltips appear
-                on the right for icon-only targets (desktop only).
-              </Typography.Root>
-              <Sidebar.Menu>
-                <Sidebar.MenuItem>
-                  <Sidebar.MenuButton type="button" active tooltip="Inbox">
-                    <Sidebar.MenuIcon>
-                      <Inbox size={16} strokeWidth={1.9} />
-                    </Sidebar.MenuIcon>
-                    <Sidebar.MenuLabel>Inbox</Sidebar.MenuLabel>
-                  </Sidebar.MenuButton>
-                </Sidebar.MenuItem>
-                <Sidebar.MenuItem>
-                  <Sidebar.MenuButton type="button" tooltip="Projects">
-                    <Sidebar.MenuIcon>
-                      <Layers size={16} strokeWidth={1.9} />
-                    </Sidebar.MenuIcon>
-                    <Sidebar.MenuLabel>Projects</Sidebar.MenuLabel>
-                  </Sidebar.MenuButton>
-                </Sidebar.MenuItem>
-              </Sidebar.Menu>
-            </Sidebar.NavPanelBody>
-          </Sidebar.Content>
-          <Sidebar.Footer>
-            <Sidebar.IdentityButton
-              leading={<span aria-hidden="true">U</span>}
-              title="You"
-              subtitle="Online"
-            />
-          </Sidebar.Footer>
-        </Sidebar.NavPanel>
-      </Sidebar.Root>
-    </div>
-  );
-}

package/src/layout/sidebar/examples/03-controlled-state.tsx

@@ -1,82 +0,0 @@
-import { Layers, Sparkles } from "lucide-react";
-import { Button, Sidebar, type SidebarLayoutMode, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-/**
- * Контролируемый режим: родитель задаёт `state` / `onStateChange`; кнопка на грани панели вызывает то же переключение через контекст.
- */
-export default function SidebarExampleControlledState() {
-  const [state, setState] = React.useState<SidebarLayoutMode>("expanded");
-
-  return (
-    <div className={`${styles.demoViewport} ${styles.controlledColumn}`}>
-      <div className={styles.toolbar}>
-        <Button.Root
-          size="s"
-          mode="stroke"
-          type="button"
-          onClick={() => setState((prev) => (prev === "hidden" ? "expanded" : "hidden"))}
-        >
-          {state === "hidden" ? "Show sidebar" : "Hide sidebar"}
-        </Button.Root>
-        <Typography.Root as="span" variant="body-small" tone="muted">
-          Current: <span className={styles.code}>{state}</span>
-        </Typography.Root>
-      </div>
-      <div className={styles.controlledStage}>
-        <Sidebar.Root
-          size="m"
-          state={state}
-          onStateChange={setState}
-          responsive={false}
-          aria-label="Controlled sidebar"
-        >
-          <Sidebar.NavPanel>
-            <Sidebar.Header>
-              <Sidebar.HeaderRow>
-                <Sidebar.HeaderMain>
-                  <Sidebar.IdentityButton
-                    leading={<span aria-hidden="true">P</span>}
-                    title="Panel"
-                    subtitle="Controlled"
-                  />
-                </Sidebar.HeaderMain>
-              </Sidebar.HeaderRow>
-            </Sidebar.Header>
-            <Sidebar.Content>
-              <Sidebar.NavPanelBody>
-                <Sidebar.Menu>
-                  <Sidebar.MenuItem>
-                    <Sidebar.MenuButton type="button" active>
-                      <Sidebar.MenuIcon>
-                        <Layers size={16} strokeWidth={1.9} />
-                      </Sidebar.MenuIcon>
-                      <Sidebar.MenuLabel>Section</Sidebar.MenuLabel>
-                    </Sidebar.MenuButton>
-                  </Sidebar.MenuItem>
-                  <Sidebar.MenuItem>
-                    <Sidebar.MenuButton type="button">
-                      <Sidebar.MenuIcon>
-                        <Sparkles size={16} strokeWidth={1.9} />
-                      </Sidebar.MenuIcon>
-                      <Sidebar.MenuLabel>Another item</Sidebar.MenuLabel>
-                    </Sidebar.MenuButton>
-                  </Sidebar.MenuItem>
-                </Sidebar.Menu>
-              </Sidebar.NavPanelBody>
-            </Sidebar.Content>
-            <Sidebar.Footer>
-              <Sidebar.IdentityButton
-                leading={<span aria-hidden="true">●</span>}
-                title="API"
-                subtitle="state / onStateChange"
-              />
-            </Sidebar.Footer>
-          </Sidebar.NavPanel>
-        </Sidebar.Root>
-      </div>
-    </div>
-  );
-}

package/src/layout/sidebar/examples/04-router-navigation.tsx

@@ -1,80 +0,0 @@
-import { Home, Settings } from "lucide-react";
-import { Sidebar, Typography } from "prime-ui-kit";
-import { MemoryRouter, Route, Routes } from "react-router-dom";
-
-import styles from "./examples.module.css";
-
-/**
- * SPA routes: `Sidebar.MenuRouterLink` wraps React Router `NavLink`. Wrap the tree in a router
- * (`BrowserRouter` in apps; `MemoryRouter` in tests and docs).
- */
-export default function SidebarExampleRouterNavigation() {
-  return (
-    <MemoryRouter initialEntries={["/"]}>
-      <div className={`${styles.demoViewport} ${styles.row}`}>
-        <Sidebar.Root size="m" responsive={false} defaultState="expanded" aria-label="Docs">
-          <Sidebar.NavPanel>
-            <Sidebar.Header>
-              <Sidebar.HeaderRow>
-                <Sidebar.HeaderMain>
-                  <Sidebar.IdentityButton
-                    leading={<span aria-hidden="true">D</span>}
-                    title="Docs"
-                    subtitle="Router example"
-                  />
-                </Sidebar.HeaderMain>
-              </Sidebar.HeaderRow>
-            </Sidebar.Header>
-            <Sidebar.Content>
-              <Sidebar.Menu>
-                <Sidebar.MenuItem>
-                  <Sidebar.MenuRouterLink to="/" end className={() => ""}>
-                    <Sidebar.MenuIcon>
-                      <Home size={16} strokeWidth={1.9} />
-                    </Sidebar.MenuIcon>
-                    <Sidebar.MenuLabel>Home</Sidebar.MenuLabel>
-                  </Sidebar.MenuRouterLink>
-                </Sidebar.MenuItem>
-                <Sidebar.MenuItem>
-                  <Sidebar.MenuRouterLink to="/settings" className={() => ""}>
-                    <Sidebar.MenuIcon>
-                      <Settings size={16} strokeWidth={1.9} />
-                    </Sidebar.MenuIcon>
-                    <Sidebar.MenuLabel>Settings</Sidebar.MenuLabel>
-                  </Sidebar.MenuRouterLink>
-                </Sidebar.MenuItem>
-              </Sidebar.Menu>
-            </Sidebar.Content>
-            <Sidebar.Footer>
-              <Sidebar.IdentityButton
-                leading={<span aria-hidden="true">R</span>}
-                title="Routes"
-                subtitle="MemoryRouter"
-              />
-            </Sidebar.Footer>
-          </Sidebar.NavPanel>
-        </Sidebar.Root>
-        <div className={styles.mainPlaceholder} style={{ flex: "1 1 auto", minWidth: 0 }}>
-          <Routes>
-            <Route
-              path="/"
-              element={
-                <Typography.Root as="p" variant="body-default" tone="muted">
-                  Home route content.
-                </Typography.Root>
-              }
-            />
-            <Route
-              path="/settings"
-              element={
-                <Typography.Root as="p" variant="body-default" tone="muted">
-                  Settings route content.
-                </Typography.Root>
-              }
-            />
-          </Routes>
-        </div>
-      </div>
-    </MemoryRouter>
-  );
-}

package/src/layout/sidebar/examples/05-responsive-behavior.tsx

@@ -1,56 +0,0 @@
-import { Inbox } from "lucide-react";
-import { SIDEBAR_MEDIA_QUERY_NARROW, Sidebar, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/**
- * Responsive mode (default `responsive={true}`): below the narrow breakpoint the panel becomes a drawer
- * with backdrop; the same edge toggle opens the panel when closed. Constants such as `SIDEBAR_MEDIA_QUERY_NARROW` match
- * the kit implementation (single source of truth for JS and CSS).
- */
-export default function SidebarExampleResponsiveBehavior() {
-  return (
-    <div className={styles.demoViewportTall}>
-      <Typography.Root as="p" variant="body-small" tone="muted" className={styles.note}>
-        Narrow viewport matches <span className={styles.code}>{SIDEBAR_MEDIA_QUERY_NARROW}</span>{" "}
-        (under <span className={styles.code}>48rem</span>). Resize the preview to see overlay
-        behavior; at wider widths the rail stays inline and the built-in edge control cycles
-        expanded and compact.
-      </Typography.Root>
-      <Sidebar.Root size="m" aria-label="Responsive sidebar">
-        <Sidebar.NavPanel>
-          <Sidebar.Header>
-            <Sidebar.HeaderRow>
-              <Sidebar.HeaderMain>
-                <Sidebar.IdentityButton
-                  leading={<span aria-hidden="true">I</span>}
-                  title="Inbox"
-                  subtitle="Responsive"
-                />
-              </Sidebar.HeaderMain>
-            </Sidebar.HeaderRow>
-          </Sidebar.Header>
-          <Sidebar.Content>
-            <Sidebar.Menu>
-              <Sidebar.MenuItem>
-                <Sidebar.MenuButton type="button" active>
-                  <Sidebar.MenuIcon>
-                    <Inbox size={16} strokeWidth={1.9} />
-                  </Sidebar.MenuIcon>
-                  <Sidebar.MenuLabel>Primary</Sidebar.MenuLabel>
-                </Sidebar.MenuButton>
-              </Sidebar.MenuItem>
-            </Sidebar.Menu>
-          </Sidebar.Content>
-          <Sidebar.Footer>
-            <Sidebar.IdentityButton
-              leading={<span aria-hidden="true">◇</span>}
-              title="Status"
-              subtitle="Adaptive layout"
-            />
-          </Sidebar.Footer>
-        </Sidebar.NavPanel>
-      </Sidebar.Root>
-    </div>
-  );
-}