prime-ui-kit 0.14.0 → 0.15.0

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

@@ -1,4 +1,4 @@
-/** Skeleton rows in the chart's geometry while it loads, an empty period and a plan you may only look at — `loading`, `empty`, `readOnly`. */
+/** Skeleton rows in the chart's geometry while it loads, an empty period and a report you may only look at, its today line on the report day — `loading`, `empty`, `readOnly`, `today`. */
 import { addDays, startOfToday, startOfWeek } from "date-fns";
 import { Gantt, type GanttBar, Typography } from "prime-ui-kit";
 
@@ -24,6 +24,9 @@ const FLEET: Vehicle[] = [
 
 const NO_VEHICLES: Vehicle[] = [];
 
+/** The day the dispatch report was made: its today line stands there, not on the real today. */
+const REPORT_DAY = at(2);
+
 const chartProps = {
   defaultScale: "day",
   getRowKey: (vehicle: Vehicle) => vehicle.id,
@@ -56,11 +59,12 @@ export default function GanttStatesExample() {
           aria-label="Рейсы машин, только просмотр"
           rows={FLEET}
           readOnly
+          today={REPORT_DAY}
           onBarChange={() => undefined}
           {...chartProps}
         />
         <Typography as="span" variant="caption" tone="muted">
-          readOnly
+          readOnly · today
         </Typography>
       </div>
     </div>

package/src/components/input/COMPONENT.md

@@ -269,12 +269,12 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A labelled field with a hint under it — `label`, `hint`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier; the label and the hint follow the field tier — `size`. |
-| [states.tsx](examples/states.tsx) | A default field next to a disabled and a read-only one — `disabled`, `readOnly`. |
+| [states.tsx](examples/states.tsx) | A default field next to a disabled, a read-only and an invalid one with no message — `disabled`, `readOnly`, `invalid`. |
 | [validation.tsx](examples/validation.tsx) | Live validation: an error shakes the field as it arrives, drops in and leaves as soon as the value is fixed; required and optional markers, a hint and a support row that does not shift — `required`, `optional`, `hint`, `error`, `reserveSupportRow`. |
 | [with-icon.tsx](examples/with-icon.tsx) | A decorative icon at either end of the value — `Input.Icon`, `side`. |
 | [affixes.tsx](examples/affixes.tsx) | A fixed prefix and suffix flush with the edges and a unit next to the value — `Input.Affix`, `Input.InlineAffix`. |
 | [without-focus-ring.tsx](examples/without-focus-ring.tsx) | A single search field where the caret and the lighter fill show focus — `focusRing`. |
-| [password-strength.tsx](examples/password-strength.tsx) | A new password with a show toggle and a meter that fills step by step and names the level beside the hint — `Input.RevealButton`, `strength`. |
+| [password-strength.tsx](examples/password-strength.tsx) | A new password with a show toggle and a meter that fills step by step and names the level beside the hint, and a service password measured by the company's own rule — `Input.RevealButton`, `strength`, `getStrength`. |
 | [edge-actions.tsx](examples/edge-actions.tsx) | Actions at the field's end: a mail link with a tooltip beside copying the value, and a profile link on a read-only field — `Input.Action`, `Input.CopyButton`. |
 | [inline-edit.tsx](examples/inline-edit.tsx) | Record card fields that save on blur and Enter, revert on Escape and show the server's refusal — `onCommit`, `error`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the value: a clear button and a character counter follow it — `value`, `onValueChange`, `Input.ClearButton`, `Input.Counter`. |

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

@@ -8,12 +8,6 @@
   width: min(100%, var(--prime-modal-width-m));
 }
 
-.formHeader {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-1);
-}
-
 .formFields {
   display: grid;
   /* Two columns while each keeps 12rem, one column in a narrower form — from its own width. */

package/src/components/input/examples/in-form.tsx

@@ -1,5 +1,5 @@
 /** Company details form: required fields checked on submit, each error leaves as its field is fixed and a saved form turns the button green; neighbours keep their bottoms aligned — `required`, `error`, `reserveSupportRow`. */
-import { Button, Input, Typography } from "prime-ui-kit";
+import { Button, Input } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -32,14 +32,6 @@ export default function InputInFormExample() {
 
   return (
     <form className={styles.form} noValidate onSubmit={submit}>
-      <div className={styles.formHeader}>
-        <Typography as="h3" variant="title-m">
-          Реквизиты компании
-        </Typography>
-        <Typography as="p" variant="body-s" tone="secondary">
-          Используются в счетах и закрывающих документах.
-        </Typography>
-      </div>
       <div className={styles.formFields}>
         <div className={styles.formWide}>
           <Input.Root label="Название организации" required error={errors.name}>

package/src/components/input/examples/password-strength.tsx

@@ -1,13 +1,39 @@
-/** A new password with a show toggle and a meter that fills step by step and names the level beside the hint — `Input.RevealButton`, `strength`. */
-import { Input } from "prime-ui-kit";
+/** A new password with a show toggle and a meter that fills step by step and names the level beside the hint, and a service password measured by the company's own rule — `Input.RevealButton`, `strength`, `getStrength`. */
+import { Input, type PasswordStrength } from "prime-ui-kit";
+
+/** The company rule for service accounts: only the length counts, 16 characters and more is hard. */
+function serviceStrength(value: string): PasswordStrength {
+  if (value.length === 0) return 0;
+  if (value.length < 8) return 1;
+  if (value.length < 12) return 2;
+  if (value.length < 16) return 3;
+  return 4;
+}
 
 export default function InputPasswordStrengthExample() {
   return (
-    <Input.Root label="Новый пароль" hint="Не короче 8 символов" strength>
-      <Input.Wrapper>
-        <Input.Field type="password" autoComplete="new-password" defaultValue="Graphite2026" />
-        <Input.RevealButton />
-      </Input.Wrapper>
-    </Input.Root>
+    <>
+      <Input.Root label="Новый пароль" hint="Не короче 8 символов" strength>
+        <Input.Wrapper>
+          <Input.Field type="password" autoComplete="new-password" defaultValue="Graphite2026" />
+          <Input.RevealButton />
+        </Input.Wrapper>
+      </Input.Root>
+      <Input.Root
+        label="Пароль сервисного аккаунта"
+        hint="По правилам компании — от 16 символов"
+        strength
+        getStrength={serviceStrength}
+      >
+        <Input.Wrapper>
+          <Input.Field
+            type="password"
+            autoComplete="new-password"
+            defaultValue="export-1c-nightly"
+          />
+          <Input.RevealButton />
+        </Input.Wrapper>
+      </Input.Root>
+    </>
   );
 }

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

@@ -1,4 +1,4 @@
-/** A default field next to a disabled and a read-only one — `disabled`, `readOnly`. */
+/** A default field next to a disabled, a read-only and an invalid one with no message — `disabled`, `readOnly`, `invalid`. */
 import { Icon, Input } from "prime-ui-kit";
 
 export default function InputStatesExample() {
@@ -22,6 +22,11 @@ export default function InputStatesExample() {
           </Input.Icon>
         </Input.Wrapper>
       </Input.Root>
+      <Input.Root label="invalid" invalid>
+        <Input.Wrapper>
+          <Input.Field type="tel" defaultValue="+7 900 12" />
+        </Input.Wrapper>
+      </Input.Root>
     </>
   );
 }

package/src/components/kanban/COMPONENT.md

@@ -222,12 +222,13 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 | [structure.tsx](examples/structure.tsx) | Cards take only the parts they need: a title alone, a meta line, labels, a footer with counts and an assignee — `Kanban.ItemTitle`, `Kanban.ItemDescription`, `Kanban.ItemBadges`, `Kanban.ItemFooter`, `Kanban.ItemCount`. |
 | [cards.tsx](examples/cards.tsx) | Three kinds of cards on one board: a plain note, a ticket with a header row of key and priority, a design task with a cover — `Kanban.ItemHeader`, `Thumbnail`, `Kanban.ItemFooter`. |
 | [limits.tsx](examples/limits.tsx) | A support queue with a work-in-progress limit and a workflow rule, its columns drawn as wells so each reads as a bounded queue: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`, `variant`. |
-| [columns.tsx](examples/columns.tsx) | A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover — `reorderableColumns`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. |
+| [columns.tsx](examples/columns.tsx) | A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover; the page keeps the order — `reorderableColumns`, `columnOrder`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. |
 | [saving.tsx](examples/saving.tsx) | Every move is saved on the server: the card waits busy in its new place, and an invoice the server refuses to close glides back to its column — `onValueChange`. |
 | [item-link.tsx](examples/item-link.tsx) | Tickets that open: each card is a link to its page, so ⌘-click or a middle click opens a new tab, a plain click, Enter or Space opens it in place, and a drag only moves it — `getItemHref`, `onItemClick`. |
-| [states.tsx](examples/states.tsx) | Loading draws skeleton cards in the card geometry and cross-fades the cards in; an empty column keeps its drop area; a read-only board drags nothing — `loading`, `disabled`. |
+| [states.tsx](examples/states.tsx) | Loading draws skeleton cards in the card geometry and cross-fades the cards in; an empty column keeps its drop area; a closed order stays in place while the rest move; a read-only board drags nothing — `loading`, `disabled`. |
 | [controlled.tsx](examples/controlled.tsx) | The placement lives in the parent: every move arrives with its source, target and position to save, and a button resets the board — `value`, `onValueChange`. |
 | [narrow.tsx](examples/narrow.tsx) | On a phone-width screen a column takes 85% of the board and snaps into place, so the next one peeks; the strip scrolls inside the board, never the page. |
+| [screen.tsx](examples/screen.tsx) | A sales pipeline as a work screen: the title with the open deals and their sum, search, filter, the board / list switch and the one primary action in the app header, a full-height Kanban of deals by stage with totals, moves saved on the server that can be refused, and the deal in a Drawer — `value`, `onValueChange`, `renderColumnMeta`, `onItemClick`. |
 
 ## Mistakes
 - Returning something other than `Kanban.Item` from `renderItem` → the card does not drag and Alt + arrows do nothing.

package/src/components/kanban/examples/columns.tsx

@@ -1,4 +1,4 @@
-/** A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover — `reorderableColumns`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. */
+/** A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover; the page keeps the order — `reorderableColumns`, `columnOrder`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. */
 import {
   Button,
   ColorSwatches,
@@ -52,6 +52,8 @@ const DEALS: Deal[] = [
   { id: "DL-296", client: "ГК «Меридиан»", amount: 2_750_000 },
 ];
 
+const INITIAL_ORDER = COLUMNS.map((column) => column.id);
+
 const PLACEMENT: KanbanValue = {
   lead: ["DL-318", "DL-322"],
   demo: ["DL-309"],
@@ -77,7 +79,7 @@ const dealsWord = (count: number) => {
 export default function KanbanColumnsExample() {
   const [columns, setColumns] = React.useState(COLUMNS);
   const [placement, setPlacement] = React.useState<KanbanValue>(PLACEMENT);
-  const [savedOrder, setSavedOrder] = React.useState<readonly string[] | null>(null);
+  const [order, setOrder] = React.useState<readonly string[]>(INITIAL_ORDER);
 
   const updateColumn = (id: string, patch: Partial<KanbanColumn>) =>
     setColumns((current) =>
@@ -95,8 +97,8 @@ export default function KanbanColumnsExample() {
   return (
     <div className={styles.stage}>
       <Typography as="span" variant="body-s" tone="muted" aria-live="polite">
-        {savedOrder
-          ? `Порядок этапов сохранён: ${savedOrder.map(titleOf).filter(Boolean).join(" → ")}`
+        {order !== INITIAL_ORDER
+          ? `Порядок этапов сохранён: ${order.map(titleOf).filter(Boolean).join(" → ")}`
           : "Перетащите этап за ручку в шапке или нажмите на ней Alt + ← / →"}
       </Typography>
       <Kanban.Root
@@ -109,7 +111,8 @@ export default function KanbanColumnsExample() {
         value={placement}
         onValueChange={setPlacement}
         reorderableColumns
-        onColumnOrderChange={setSavedOrder}
+        columnOrder={order}
+        onColumnOrderChange={setOrder}
         renderColumnMeta={figures}
         renderColumnActions={(column) => (
           <Popover.Root>

package/src/components/kanban/examples/screen.module.css

@@ -0,0 +1,17 @@
+/* Kanban board: a work screen — the header carries the title and the tools, the page fills the app
+   panel (`AppShell.Root fillViewport` + `PageContent.Root fill`) and the board or the list takes
+   the free height; every column scrolls inside the board, never the page. */
+
+/* Company cell: the name over the deal id. */
+.company {
+  display: grid;
+  white-space: nowrap;
+}
+
+/* Owner: avatar, then the name. */
+.owner {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--prime-space-2);
+  white-space: nowrap;
+}