prime-ui-kit 0.0.1

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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,56 @@
+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>
+  );
+}

package/src/layout/sidebar/examples/examples.module.css

@@ -0,0 +1,67 @@
+.demoViewport {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  height: 22rem;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.demoViewportTall {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  height: 26rem;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.appGrid {
+  height: 100%;
+  min-height: 0;
+}
+
+.mainPlaceholder {
+  box-sizing: border-box;
+  margin: 0;
+  min-height: 0;
+}
+
+.row {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
+  max-width: 100%;
+  min-height: 0;
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--prime-sys-spacing-s);
+  margin-bottom: var(--prime-sys-spacing-s);
+}
+
+.note {
+  margin: 0 0 var(--prime-sys-spacing-m);
+  color: var(--prime-sys-color-content-secondary);
+}
+
+.code {
+  font-family: ui-monospace, monospace;
+  font-size: 0.9em;
+}
+
+.controlledColumn {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.controlledStage {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}

package/src/styles/globals.css

@@ -0,0 +1,91 @@
+/* Roboto Flex: variable opsz + wght; Roboto Mono: код и моноширинные зоны */
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Roboto+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
+@import "./reset.css";
+@import "./tokens.css";
+@import "./theme-light.css";
+@import "./theme-dark.css";
+@import "./units.css";
+
+:root {
+  font-family: var(--prime-sys-typography-family-base);
+  font-size: 16px;
+  color: var(--prime-sys-color-content-primary);
+  background: var(--prime-sys-color-surface-default);
+  text-rendering: optimizeLegibility;
+  font-kerning: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:root[data-theme="dark"],
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+body {
+  background: var(--prime-sys-color-surface-default);
+  color: var(--prime-sys-color-content-primary);
+  font-size: var(--prime-sys-typography-body-size);
+  line-height: var(--prime-sys-typography-body-lineHeight);
+  font-weight: var(--prime-sys-typography-weight-regular);
+  letter-spacing: var(--prime-sys-typography-body-letterSpacing);
+}
+
+:where(*, *::before, *::after):focus {
+  outline: none;
+}
+
+:where(*, *::before, *::after):focus-visible {
+  outline: none;
+}
+
+:where(a, button, input, textarea, select, [role="button"], [tabindex]) {
+  -webkit-tap-highlight-color: transparent;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner,
+select::-moz-focus-inner,
+textarea::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/* Поля с оболочкой (Input, Textarea и т.д.) рисуют фокус на wrapper — не дублируем кольцо на нативном элементе. */
+:where(input, textarea, select):focus-visible {
+  box-shadow: none;
+}
+
+:where(a, button, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
+  box-shadow: var(--prime-sys-elevation-shadow-buttonFocus);
+}
+
+/* Курсор при наведении на неактивные контролы (без pointer-events: none на корне). */
+:where(:disabled, [aria-disabled="true"], [data-disabled="true"]) {
+  cursor: not-allowed;
+}
+
+/* Accordion: высота задаётся компонентом через --prime-accordion-content-height */
+@keyframes prime-accordion-down {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+
+  to {
+    height: var(--prime-accordion-content-height);
+    opacity: 1;
+  }
+}
+
+@keyframes prime-accordion-up {
+  from {
+    height: var(--prime-accordion-content-height);
+    opacity: 1;
+  }
+
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}

package/src/styles/reset.css

@@ -0,0 +1,35 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}