prime-ui-kit 0.14.0 → 0.15.0

package/dist/skill/reference/components/file-upload/examples/validation.tsx

@@ -6,6 +6,9 @@ import styles from "./examples.module.css";
 
 const MAX_SIZE = 20 * 1024 * 1024;
 
+/** The zone names the formats the check takes. */
+const ZONE_LABELS = { description: "PDF до 20 МБ" };
+
 /** A picked file as a file of the set. */
 const toFile = (file: File): FileUploadFile => ({
   id: `${file.name}-${file.size}-${file.lastModified}`,
@@ -30,13 +33,19 @@ export default function FileUploadValidationExample() {
       <FileUpload.Root
         label="Скан договора"
         required
-        hint="PDF до 20 МБ, все страницы"
+        hint="Все страницы, с подписями обеих сторон"
+        labels={ZONE_LABELS}
         error={scanError(scan)}
         value={scan}
         onValueChange={setScan}
         onFilesChange={(files) => setScan(files.map(toFile))}
       />
-      <FileUpload.Root label="Доверенность" optional hint="Если подписывает не директор" />
+      <FileUpload.Root
+        label="Доверенность"
+        optional
+        hint="Если подписывает не директор"
+        labels={ZONE_LABELS}
+      />
     </div>
   );
 }

package/dist/skill/reference/components/file-upload/examples/variants.tsx

@@ -1,32 +1,15 @@
-/** How files are added: the dashed drop zone, the zone with only its fill for cards and modals, the compact picker button and the add tile after the files — `variant`, `trigger`. */
-import { FileUpload, type FileUploadFile } from "prime-ui-kit";
+/** How files are added: the dashed drop zone, the zone with only its fill for cards and modals, the compact picker button and the add tile that starts an empty set of tiles — `variant`, `trigger`. */
+import { FileUpload } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
-const PHOTOS: readonly FileUploadFile[] = [
-  {
-    id: "dock",
-    name: "Рампа.jpg",
-    type: "image/jpeg",
-    size: 412_000,
-    src: "https://picsum.photos/seed/variants-dock/320/320",
-  },
-  {
-    id: "racks",
-    name: "Стеллажи.jpg",
-    type: "image/jpeg",
-    size: 388_000,
-    src: "https://picsum.photos/seed/variants-racks/320/320",
-  },
-];
-
 export default function FileUploadVariantsExample() {
   return (
     <div className={styles.column}>
       <FileUpload.Root label="dashed" variant="dashed" />
       <FileUpload.Root label="solid" variant="solid" />
       <FileUpload.Root label="button" trigger="button" />
-      <FileUpload.Root label="tile" trigger="tile" layout="grid" defaultValue={PHOTOS} />
+      <FileUpload.Root label="tile" trigger="tile" layout="grid" multiple />
     </div>
   );
 }

package/dist/skill/reference/components/gantt/COMPONENT.md

@@ -215,9 +215,10 @@ A `tone` wins over `color`. Say the status in the label too, never only by color
 | [occupancy.tsx](examples/occupancy.tsx) | Team occupancy by day: people with avatars, projects that overlap into lanes, locked vacations, a saved move held busy and a conflicting one gliding back, new work drawn on a free day — `renderRowAvatar`, `renderRow`, `onBarChange`, `onBarCreate`, `onSelect`, `readOnly`. |
 | [large.tsx](examples/large.tsx) | Two thousand people over two years stay fast: only the rows and days in view are rendered, keyboard focus reaches any row, and new bars are drawn on empty space — `rows`, `range`, `scrollHeight`, `onBarCreate`. |
 | [row-link.tsx](examples/row-link.tsx) | A team by client: each row header is a link to the person's profile that a plain click opens in place, each tooltip adds the client and the planned hours under the dates, and a legend of client hues stands in the toolbar — `getRowHref`, `onRowClick`, `renderBarTooltip`. |
-| [states.tsx](examples/states.tsx) | Skeleton rows in the chart's geometry while it loads, an empty period and a plan you may only look at — `loading`, `empty`, `readOnly`. |
+| [states.tsx](examples/states.tsx) | 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`. |
 | [controlled.tsx](examples/controlled.tsx) | The zoom owned by the page: presets in the toolbar and the built-in switch change one state — `scale`, `onScaleChange`. |
 | [narrow.tsx](examples/narrow.tsx) | At 360 px the first column keeps only the avatars, the toolbar moves to its own row and the axis scrolls under the pinned column — `renderRowAvatar`. |
+| [screen.tsx](examples/screen.tsx) | A team schedule as a work screen: the title with the people shown and a PageToolbar with search, filters, team sections and the primary action in the app header over a full-height Gantt; moves saved or refused, new work drawn and named in a Modal, details in a Drawer — `scrollHeight`, `onBarChange`, `onBarCreate`, `onSelect`. |
 
 ## Mistakes
 - Updating the rows before the request succeeds (optimistic) → the chart cannot glide back on reject; update them when `onBarChange` resolves, or before you resolve it.

package/dist/skill/reference/components/gantt/examples/screen.module.css

@@ -0,0 +1,14 @@
+/* Schedule: 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 chart takes the free
+   height. */
+
+/* On a short screen the chart keeps room for a few rows; the page scrolls instead. */
+.chart {
+  min-height: calc(var(--prime-space-24) * 3);
+}
+
+/* First column: the name over the role. */
+.person {
+  display: grid;
+  min-width: 0;
+}

package/dist/skill/{patterns/schedule.tsx → reference/components/gantt/examples/screen.tsx}

@@ -1,5 +1,6 @@
-/** A team schedule: PageToolbar with search, filters and team sections over a full-height Gantt; moves saved or refused, new work drawn and named in a Modal, details in a Drawer. */
+/** A team schedule as a work screen: the title with the people shown and a PageToolbar with search, filters, team sections and the primary action in the app header over a full-height Gantt; moves saved or refused, new work drawn and named in a Modal, details in a Drawer — `scrollHeight`, `onBarChange`, `onBarCreate`, `onSelect`. */
 import {
+  AppHeader,
   Avatar,
   Badge,
   Button,
@@ -29,7 +30,7 @@ import {
 } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./schedule.module.css";
+import styles from "./screen.module.css";
 
 type Hue = NonNullable<GanttBar["color"]>;
 type TeamId = "rollout" | "analytics" | "support";
@@ -275,7 +276,7 @@ const wait = (ms: number) => new Promise((resolve) => window.setTimeout(resolve,
 /** `yyyy-MM-dd` from the Datepicker's hidden input → a local calendar day. */
 const parseDay = (value: FormDataEntryValue) => new Date(`${value}T00:00`);
 
-export default function SchedulePattern() {
+export default function GanttScreenExample() {
   const { notify } = useNotifications();
   const formId = React.useId();
   const [people, setPeople] = React.useState(PEOPLE);
@@ -440,15 +441,19 @@ export default function SchedulePattern() {
   const detail = selected?.bar;
 
   return (
-    <PageContent.Root fill>
-      <PageContent.Header>
-        <PageContent.Title>Загрузка команды</PageContent.Title>
-        <PageContent.Description>
-          Кто из команды внедрения чем занят у клиентов: проекты, отпуска и вехи запусков.
-        </PageContent.Description>
-      </PageContent.Header>
-      <PageContent.Body>
-        <div className={styles.board}>
+    <>
+      {/* A work screen: in an app this header fills the shell's `header` slot and carries the page —
+          the only h1 and the page's tools; main has no PageContent.Header. */}
+      <AppHeader.Root>
+        <AppHeader.Start>
+          <AppHeader.Title>
+            Загрузка команды
+            <AppHeader.Description>
+              {loading ? "Загружаем график…" : `Сотрудников: ${rows.length} из ${people.length}`}
+            </AppHeader.Description>
+          </AppHeader.Title>
+        </AppHeader.Start>
+        <AppHeader.Tools>
           <SmartFilter.Root
             fields={FIELDS}
             value={filter}
@@ -456,7 +461,7 @@ export default function SchedulePattern() {
             search={search}
             onSearchChange={setSearch}
           >
-            <PageToolbar.Root aria-label="График команды">
+            <PageToolbar.Root aria-label="Загрузка команды">
               <PageToolbar.Tools>
                 <SmartFilter.Toolbar />
               </PageToolbar.Tools>
@@ -498,7 +503,11 @@ export default function SchedulePattern() {
               </PageToolbar.Chips>
             </PageToolbar.Root>
           </SmartFilter.Root>
+        </AppHeader.Tools>
+      </AppHeader.Root>
 
+      <PageContent.Root fill>
+        <PageContent.Body>
           <Gantt<Person, Assignment>
             aria-label="Загрузка команды внедрения"
             className={styles.chart}
@@ -533,11 +542,6 @@ export default function SchedulePattern() {
             renderBarTooltip={(bar) => (bar.client ? CLIENTS[bar.client].name : KIND[bar.kind])}
             toolbar={
               <>
-                <Typography as="span" variant="body-s" tone="muted">
-                  {loading
-                    ? "Загружаем график…"
-                    : `Сотрудников: ${rows.length} из ${people.length}`}
-                </Typography>
                 {/* The legend of client hues: the bar's hue repeats its client, the tooltip names it. */}
                 {(Object.keys(CLIENTS) as ClientId[]).map((client) => (
                   <Badge.Root key={client} color={CLIENTS[client].color}>
@@ -564,159 +568,159 @@ export default function SchedulePattern() {
               </EmptyPage.Root>
             }
           />
-        </div>
-
-        <Modal.Root open={draft !== null} onOpenChange={closeDraft}>
-          <Modal.Content size="s">
-            <Modal.Header>
-              <Modal.Title>Новая задача</Modal.Title>
-              <Modal.Description>
-                {draftPerson && draft?.dates
-                  ? `${draftPerson.name} · ${formatPeriod(draft.dates)}`
-                  : "Сотрудник увидит задачу в своём графике."}
-              </Modal.Description>
-            </Modal.Header>
-            <Modal.Body>
-              <Modal.Guard busy={saving} />
-              <form id={formId} noValidate onSubmit={submit}>
-                <Fieldset aria-label="Задача" disabled={saving}>
-                  <Input.Root id={`${formId}-title`} label="Задача" required error={errors.title}>
-                    <Input.Wrapper>
-                      <Input.Field name="title" placeholder="Обучение пользователей" autoFocus />
-                    </Input.Wrapper>
-                  </Input.Root>
-                  <Select.Root
-                    name="client"
-                    label="Клиент"
-                    required
-                    placeholder="Выберите клиента"
-                    error={errors.client}
-                    id={`${formId}-client`}
-                  >
-                    <Select.Trigger>
-                      <Select.Value />
-                    </Select.Trigger>
-                    <Select.Content>
-                      {(Object.keys(CLIENTS) as ClientId[]).map((value) => (
-                        <Select.Item key={value} value={value}>
-                          {CLIENTS[value].name}
-                        </Select.Item>
-                      ))}
-                    </Select.Content>
-                  </Select.Root>
-                  {draft?.personId ? null : (
-                    <>
-                      <Select.Root
-                        name="person"
-                        label="Сотрудник"
-                        required
-                        placeholder="Выберите сотрудника"
-                        error={errors.person}
-                        id={`${formId}-person`}
-                      >
-                        <Select.Trigger>
-                          <Select.Value />
-                        </Select.Trigger>
-                        <Select.Content searchable>
-                          {people.map((person) => (
-                            <Select.Item key={person.id} value={person.id} keywords={person.role}>
-                              {person.name}
-                            </Select.Item>
-                          ))}
-                        </Select.Content>
-                      </Select.Root>
-                      <Datepicker.Root
-                        mode="range"
-                        name="period"
-                        label="Период"
-                        required
-                        fullWidth
-                        placeholder="Начало и конец работ"
-                        error={errors.period}
-                        id={`${formId}-period`}
-                      />
-                    </>
-                  )}
-                </Fieldset>
-              </form>
-            </Modal.Body>
-            <Modal.Footer>
-              <Modal.Close>
-                <Button.Root variant="outline" tone="neutral">
-                  Отмена
-                </Button.Root>
-              </Modal.Close>
-              <Button.Root type="submit" form={formId} loading={saving}>
-                Назначить
-              </Button.Root>
-            </Modal.Footer>
-          </Modal.Content>
-        </Modal.Root>
-
-        <Drawer.Root open={detailOpen} onOpenChange={setDetailOpen}>
-          <Drawer.Content size="s">
-            <Drawer.Header>
-              <Drawer.Title>{detail?.label}</Drawer.Title>
-              <Drawer.Description>{detail ? KIND[detail.kind] : null}</Drawer.Description>
-            </Drawer.Header>
-            <Drawer.Body>
-              {selected && detail ? (
-                <DescriptionList.Root orientation="vertical">
-                  <DescriptionList.Item label="Сотрудник">
-                    {selected.person.name} · {selected.person.role}
-                  </DescriptionList.Item>
-                  <DescriptionList.Item label="Клиент">
-                    {detail.client ? (
-                      <Badge.Root color={CLIENTS[detail.client].color}>
-                        {CLIENTS[detail.client].name}
-                      </Badge.Root>
-                    ) : (
-                      "Без клиента"
+
+          <Modal.Root open={draft !== null} onOpenChange={closeDraft}>
+            <Modal.Content size="s">
+              <Modal.Header>
+                <Modal.Title>Новая задача</Modal.Title>
+                <Modal.Description>
+                  {draftPerson && draft?.dates
+                    ? `${draftPerson.name} · ${formatPeriod(draft.dates)}`
+                    : "Сотрудник увидит задачу в своём графике."}
+                </Modal.Description>
+              </Modal.Header>
+              <Modal.Body>
+                <Modal.Guard busy={saving} />
+                <form id={formId} noValidate onSubmit={submit}>
+                  <Fieldset aria-label="Задача" disabled={saving}>
+                    <Input.Root id={`${formId}-title`} label="Задача" required error={errors.title}>
+                      <Input.Wrapper>
+                        <Input.Field name="title" placeholder="Обучение пользователей" autoFocus />
+                      </Input.Wrapper>
+                    </Input.Root>
+                    <Select.Root
+                      name="client"
+                      label="Клиент"
+                      required
+                      placeholder="Выберите клиента"
+                      error={errors.client}
+                      id={`${formId}-client`}
+                    >
+                      <Select.Trigger>
+                        <Select.Value />
+                      </Select.Trigger>
+                      <Select.Content>
+                        {(Object.keys(CLIENTS) as ClientId[]).map((value) => (
+                          <Select.Item key={value} value={value}>
+                            {CLIENTS[value].name}
+                          </Select.Item>
+                        ))}
+                      </Select.Content>
+                    </Select.Root>
+                    {draft?.personId ? null : (
+                      <>
+                        <Select.Root
+                          name="person"
+                          label="Сотрудник"
+                          required
+                          placeholder="Выберите сотрудника"
+                          error={errors.person}
+                          id={`${formId}-person`}
+                        >
+                          <Select.Trigger>
+                            <Select.Value />
+                          </Select.Trigger>
+                          <Select.Content searchable>
+                            {people.map((person) => (
+                              <Select.Item key={person.id} value={person.id} keywords={person.role}>
+                                {person.name}
+                              </Select.Item>
+                            ))}
+                          </Select.Content>
+                        </Select.Root>
+                        <Datepicker.Root
+                          mode="range"
+                          name="period"
+                          label="Период"
+                          required
+                          fullWidth
+                          placeholder="Начало и конец работ"
+                          error={errors.period}
+                          id={`${formId}-period`}
+                        />
+                      </>
                     )}
-                  </DescriptionList.Item>
-                  <DescriptionList.Item label={detail.kind === "milestone" ? "Дата" : "Период"}>
-                    {formatPeriod(detail)}
-                    {detail.kind === "milestone" ? null : ` · ${lengthInDays(detail)} дн.`}
-                  </DescriptionList.Item>
-                  {detail.progress === undefined ? null : (
-                    <DescriptionList.Item label="Выполнено">
-                      <ProgressBar
-                        value={Math.round(detail.progress * 100)}
-                        showValue
-                        aria-label="Выполнено"
-                      />
-                    </DescriptionList.Item>
-                  )}
-                </DescriptionList.Root>
-              ) : null}
-            </Drawer.Body>
-            <Drawer.Footer>
-              <Drawer.Close>
-                <Button.Root variant="outline" tone="neutral">
-                  Закрыть
+                  </Fieldset>
+                </form>
+              </Modal.Body>
+              <Modal.Footer>
+                <Modal.Close>
+                  <Button.Root variant="outline" tone="neutral">
+                    Отмена
+                  </Button.Root>
+                </Modal.Close>
+                <Button.Root type="submit" form={formId} loading={saving}>
+                  Назначить
                 </Button.Root>
-              </Drawer.Close>
-              {detail && !detail.readOnly ? (
-                <ConfirmDialog.Root
-                  title={`Снять задачу «${detail.label}»?`}
-                  description={`${selected?.person.name} освободится на эти дни. Задачу можно будет назначить заново.`}
-                  confirmLabel="Снять задачу"
-                  onConfirm={removeSelected}
-                >
-                  <ConfirmDialog.Trigger>
-                    <Button.Root variant="soft" tone="danger">
-                      <Button.Icon>
-                        <Icon name="action.delete" />
-                      </Button.Icon>
-                      Снять задачу
-                    </Button.Root>
-                  </ConfirmDialog.Trigger>
-                </ConfirmDialog.Root>
-              ) : null}
-            </Drawer.Footer>
-          </Drawer.Content>
-        </Drawer.Root>
-      </PageContent.Body>
-    </PageContent.Root>
+              </Modal.Footer>
+            </Modal.Content>
+          </Modal.Root>
+
+          <Drawer.Root open={detailOpen} onOpenChange={setDetailOpen}>
+            <Drawer.Content size="s">
+              <Drawer.Header>
+                <Drawer.Title>{detail?.label}</Drawer.Title>
+                <Drawer.Description>{detail ? KIND[detail.kind] : null}</Drawer.Description>
+              </Drawer.Header>
+              <Drawer.Body>
+                {selected && detail ? (
+                  <DescriptionList.Root orientation="vertical">
+                    <DescriptionList.Item label="Сотрудник">
+                      {selected.person.name} · {selected.person.role}
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Клиент">
+                      {detail.client ? (
+                        <Badge.Root color={CLIENTS[detail.client].color}>
+                          {CLIENTS[detail.client].name}
+                        </Badge.Root>
+                      ) : (
+                        "Без клиента"
+                      )}
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label={detail.kind === "milestone" ? "Дата" : "Период"}>
+                      {formatPeriod(detail)}
+                      {detail.kind === "milestone" ? null : ` · ${lengthInDays(detail)} дн.`}
+                    </DescriptionList.Item>
+                    {detail.progress === undefined ? null : (
+                      <DescriptionList.Item label="Выполнено">
+                        <ProgressBar
+                          value={Math.round(detail.progress * 100)}
+                          showValue
+                          aria-label="Выполнено"
+                        />
+                      </DescriptionList.Item>
+                    )}
+                  </DescriptionList.Root>
+                ) : null}
+              </Drawer.Body>
+              <Drawer.Footer>
+                <Drawer.Close>
+                  <Button.Root variant="outline" tone="neutral">
+                    Закрыть
+                  </Button.Root>
+                </Drawer.Close>
+                {detail && !detail.readOnly ? (
+                  <ConfirmDialog.Root
+                    title={`Снять задачу «${detail.label}»?`}
+                    description={`${selected?.person.name} освободится на эти дни. Задачу можно будет назначить заново.`}
+                    confirmLabel="Снять задачу"
+                    onConfirm={removeSelected}
+                  >
+                    <ConfirmDialog.Trigger>
+                      <Button.Root variant="soft" tone="danger">
+                        <Button.Icon>
+                          <Icon name="action.delete" />
+                        </Button.Icon>
+                        Снять задачу
+                      </Button.Root>
+                    </ConfirmDialog.Trigger>
+                  </ConfirmDialog.Root>
+                ) : null}
+              </Drawer.Footer>
+            </Drawer.Content>
+          </Drawer.Root>
+        </PageContent.Body>
+      </PageContent.Root>
+    </>
   );
 }

package/dist/skill/reference/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/dist/skill/reference/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/dist/skill/reference/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/dist/skill/reference/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/dist/skill/reference/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>
+    </>
   );
 }