prime-ui-kit 0.13.1 → 0.14.0

package/dist/skill/reference/components/field-list/examples/controlled.tsx

@@ -0,0 +1,72 @@
+/** The parent owns the lines: it sums them under the list and puts the saved lines back on reset — `value`, `onValueChange`. */
+import { Button, FieldList, type FieldListColumn, Input, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Line = { id: string; service: string; amount: string };
+
+const COLUMNS: FieldListColumn[] = [{ label: "Услуга" }, { label: "Сумма", width: "m" }];
+
+const SAVED: Line[] = [
+  { id: "license", service: "Лицензия на 12 месяцев", amount: "96 000" },
+  { id: "migration", service: "Перенос данных", amount: "24 000" },
+];
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+function totalOf(lines: Line[]) {
+  return lines.reduce((sum, line) => sum + (Number(line.amount.replace(/\s/g, "")) || 0), 0);
+}
+
+export default function FieldListControlledExample() {
+  const [lines, setLines] = React.useState(SAVED);
+
+  return (
+    <div className={styles.stack}>
+      <FieldList
+        label="Состав сделки"
+        columns={COLUMNS}
+        value={lines}
+        onValueChange={setLines}
+        getId={(line) => line.id}
+        getLabel={(line) => line.service}
+        createItem={() => ({ id: crypto.randomUUID(), service: "", amount: "" })}
+        addLabel="Добавить услугу"
+        renderItem={(line, row) => (
+          <>
+            <Input.Root>
+              <Input.Wrapper>
+                <Input.Field
+                  value={line.service}
+                  onChange={(event) => row.update({ service: event.target.value })}
+                />
+              </Input.Wrapper>
+            </Input.Root>
+            <Input.Root>
+              <Input.Wrapper>
+                <Input.Field
+                  value={line.amount}
+                  inputMode="decimal"
+                  placeholder="0"
+                  onChange={(event) => row.update({ amount: event.target.value })}
+                />
+                <Input.InlineAffix side="end">₽</Input.InlineAffix>
+              </Input.Wrapper>
+            </Input.Root>
+          </>
+        )}
+      />
+      <div className={styles.summary}>
+        <Typography variant="title-m">Итого {RUB.format(totalOf(lines))}</Typography>
+        <Button.Root variant="ghost" tone="neutral" onClick={() => setLines(SAVED)}>
+          Вернуть сохранённое
+        </Button.Root>
+      </div>
+    </div>
+  );
+}

package/dist/skill/reference/components/field-list/examples/errors.tsx

@@ -0,0 +1,85 @@
+/** Contacts of a client checked on save: a field's problem shows under that field in its row, a problem of the whole list under the list, and focus goes to the first wrong field — `error`. */
+import { Button, FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Contact = { id: string; role: string; phone: string };
+
+const COLUMNS: FieldListColumn[] = [{ label: "Должность" }, { label: "Телефон", width: "m" }];
+
+const CONTACTS: Contact[] = [
+  { id: "buyer", role: "Закупщик", phone: "+7 912 404-18-20" },
+  { id: "lawyer", role: "Юрист", phone: "+7 912 40" },
+];
+
+const PHONE = /^\+7 \d{3} \d{3}-\d{2}-\d{2}$/;
+
+function phoneError(phone: string) {
+  if (phone.trim() === "") return "Укажите телефон";
+  return PHONE.test(phone) ? undefined : "Формат: +7 912 404-18-20";
+}
+
+export default function FieldListErrorsExample() {
+  const [contacts, setContacts] = React.useState(CONTACTS);
+  // Every save attempt validates the form; after it renders, focus goes to the first wrong field.
+  const [attempts, setAttempts] = React.useState(0);
+  const formRef = React.useRef<HTMLFormElement>(null);
+  const checked = attempts > 0;
+  React.useEffect(() => {
+    if (attempts === 0) return;
+    formRef.current?.querySelector<HTMLElement>("[aria-invalid='true']")?.focus();
+  }, [attempts]);
+  const listError = checked && contacts.length === 0 ? "Добавьте хотя бы один контакт" : undefined;
+
+  return (
+    <form
+      ref={formRef}
+      noValidate
+      className={styles.form}
+      onSubmit={(event) => {
+        event.preventDefault();
+        setAttempts((count) => count + 1);
+      }}
+    >
+      <FieldList
+        label="Контакты клиента"
+        error={listError}
+        columns={COLUMNS}
+        value={contacts}
+        onValueChange={setContacts}
+        getId={(contact) => contact.id}
+        getLabel={(contact) => contact.role}
+        createItem={() => ({ id: crypto.randomUUID(), role: "", phone: "" })}
+        addLabel="Добавить контакт"
+        renderItem={(contact, row) => (
+          <>
+            <Input.Root
+              error={checked && contact.role.trim() === "" ? "Укажите должность" : undefined}
+            >
+              <Input.Wrapper>
+                <Input.Field
+                  value={contact.role}
+                  onChange={(event) => row.update({ role: event.target.value })}
+                />
+              </Input.Wrapper>
+            </Input.Root>
+            <Input.Root error={checked ? phoneError(contact.phone) : undefined}>
+              <Input.Wrapper>
+                <Input.Field
+                  type="tel"
+                  value={contact.phone}
+                  placeholder="+7 912 404-18-20"
+                  onChange={(event) => row.update({ phone: event.target.value })}
+                />
+              </Input.Wrapper>
+            </Input.Root>
+          </>
+        )}
+      />
+      <Button.Root type="submit" className={styles.submit}>
+        Сохранить контакты
+      </Button.Root>
+    </form>
+  );
+}

package/dist/skill/reference/components/field-list/examples/examples.module.css

@@ -0,0 +1,34 @@
+/* Layout of the FieldList scenarios: semantic tokens only. */
+
+/* A form: the list, then its submit button at the start, a group apart. */
+.form {
+  display: grid;
+  gap: var(--prime-space-8);
+  width: 100%;
+  min-width: 0;
+}
+
+.submit {
+  justify-self: start;
+}
+
+/* A 320 px column: the rows stack into blocks and every field shows its label. */
+.narrow {
+  inline-size: min(100%, calc(var(--prime-space-20) * 4));
+}
+
+/* The total of the lines and the reset beside it. */
+.summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--prime-space-3);
+}
+
+.stack {
+  display: grid;
+  gap: var(--prime-space-6);
+  width: 100%;
+  min-width: 0;
+}

package/dist/skill/reference/components/field-list/examples/limits.tsx

@@ -0,0 +1,55 @@
+/** Recipients of invoice reminders, from one to three: the last row cannot be removed and the add button says why it is off once the list is full — `min`, `max`, `hint`. */
+import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+import * as React from "react";
+
+type Recipient = { id: string; name: string; email: string };
+
+const COLUMNS: FieldListColumn[] = [{ label: "Имя" }, { label: "Почта" }];
+
+const RECIPIENTS: Recipient[] = [
+  { id: "accounting", name: "Бухгалтерия", email: "buh@severstroy.ru" },
+  { id: "director", name: "Ирина Котова", email: "kotova@severstroy.ru" },
+  { id: "manager", name: "Олег Демин", email: "demin@severstroy.ru" },
+];
+
+export default function FieldListLimitsExample() {
+  const [recipients, setRecipients] = React.useState(RECIPIENTS);
+
+  return (
+    <FieldList
+      label="Кому напоминать об оплате"
+      hint="Письмо уходит за три дня до срока."
+      columns={COLUMNS}
+      min={1}
+      max={3}
+      value={recipients}
+      onValueChange={setRecipients}
+      getId={(recipient) => recipient.id}
+      getLabel={(recipient) => recipient.name}
+      createItem={() => ({ id: crypto.randomUUID(), name: "", email: "" })}
+      addLabel="Добавить получателя"
+      renderItem={(recipient, row) => (
+        <>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                value={recipient.name}
+                onChange={(event) => row.update({ name: event.target.value })}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                type="email"
+                value={recipient.email}
+                placeholder="name@company.ru"
+                onChange={(event) => row.update({ email: event.target.value })}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+        </>
+      )}
+    />
+  );
+}

package/dist/skill/reference/components/field-list/examples/locked.tsx

@@ -0,0 +1,139 @@
+/** Specs of a plan on one line each: an icon picker and a color swatch take compact columns, the first three specs are pinned with a lock and the rest reorder below them — `getLocked`, `width`, `reorderable`. */
+import {
+  ColorPresets,
+  FieldList,
+  type FieldListColumn,
+  Icon,
+  type IconName,
+  Input,
+  Select,
+} from "prime-ui-kit";
+import * as React from "react";
+
+type Spec = {
+  id: string;
+  icon: IconName;
+  name: string;
+  value: string;
+  color: string;
+  pinned?: boolean;
+};
+
+const COLUMNS: FieldListColumn[] = [
+  { label: "Иконка", width: "compact" },
+  { label: "Параметр" },
+  { label: "Значение" },
+  { label: "Цвет", width: "compact" },
+];
+
+const ICONS: { name: IconName; label: string }[] = [
+  { name: "object.users", label: "Пользователи" },
+  { name: "object.storage", label: "Хранилище" },
+  { name: "object.headset", label: "Поддержка" },
+  { name: "object.chart", label: "Отчёты" },
+  { name: "object.key", label: "Доступ" },
+  { name: "object.globe", label: "Интеграции" },
+];
+
+const SPECS: Spec[] = [
+  {
+    id: "seats",
+    icon: "object.users",
+    name: "Сотрудники",
+    value: "до 50",
+    color: "#5068f5",
+    pinned: true,
+  },
+  {
+    id: "storage",
+    icon: "object.storage",
+    name: "Хранилище",
+    value: "200 ГБ",
+    color: "#22c55e",
+    pinned: true,
+  },
+  {
+    id: "support",
+    icon: "object.headset",
+    name: "Поддержка",
+    value: "8/5",
+    color: "#f97316",
+    pinned: true,
+  },
+  { id: "reports", icon: "object.chart", name: "Отчёты", value: "12 шаблонов", color: "#a855f7" },
+  { id: "sso", icon: "object.key", name: "Вход через SSO", value: "SAML, OIDC", color: "#14b8a6" },
+];
+
+export default function FieldListLockedExample() {
+  const [specs, setSpecs] = React.useState(SPECS);
+
+  return (
+    <FieldList
+      label="Характеристики тарифа"
+      columns={COLUMNS}
+      reorderable
+      value={specs}
+      onValueChange={setSpecs}
+      getId={(spec) => spec.id}
+      getLabel={(spec) => spec.name}
+      getLocked={(spec) => spec.pinned ?? false}
+      createItem={(): Spec => ({
+        id: crypto.randomUUID(),
+        icon: "object.globe",
+        name: "",
+        value: "",
+        color: "#14b8a6",
+      })}
+      addLabel="Добавить характеристику"
+      renderItem={(spec, row) => (
+        <>
+          <Select.Root
+            value={spec.icon}
+            onValueChange={(icon) => row.update({ icon: icon as IconName })}
+          >
+            <Select.Trigger>
+              <Select.TriggerIcon>
+                <Icon name={spec.icon} />
+              </Select.TriggerIcon>
+            </Select.Trigger>
+            <Select.Content>
+              {ICONS.map((icon) => (
+                <Select.Item key={icon.name} value={icon.name}>
+                  <Select.ItemIcon>
+                    <Icon name={icon.name} />
+                  </Select.ItemIcon>
+                  {icon.label}
+                </Select.Item>
+              ))}
+            </Select.Content>
+          </Select.Root>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                value={spec.name}
+                onChange={(event) => row.update({ name: event.target.value })}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                value={spec.value}
+                onChange={(event) => row.update({ value: event.target.value })}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <ColorPresets.Root
+            value={spec.color}
+            onValueChange={(color) => row.update({ color: color ?? spec.color })}
+          >
+            <ColorPresets.Trigger>
+              <ColorPresets.SwatchButton />
+            </ColorPresets.Trigger>
+            <ColorPresets.Content />
+          </ColorPresets.Root>
+        </>
+      )}
+    />
+  );
+}

package/dist/skill/reference/components/field-list/examples/narrow.tsx

@@ -0,0 +1,68 @@
+/** The invoice lines in a 320 px column: the headings give way, each row stacks its fields with their own labels and rows stand a group apart — `columns`. */
+import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Line = { id: string; service: string; quantity: string; price: string };
+
+const COLUMNS: FieldListColumn[] = [
+  { label: "Услуга" },
+  { label: "Кол-во", width: "s" },
+  { label: "Цена", width: "m" },
+];
+
+const LINES: Line[] = [
+  { id: "setup", service: "Внедрение CRM", quantity: "1", price: "180 000" },
+  { id: "training", service: "Обучение менеджеров", quantity: "3", price: "15 000" },
+];
+
+export default function FieldListNarrowExample() {
+  const [lines, setLines] = React.useState(LINES);
+
+  return (
+    <div className={styles.narrow}>
+      <FieldList
+        label="Позиции счёта"
+        columns={COLUMNS}
+        value={lines}
+        onValueChange={setLines}
+        getId={(line) => line.id}
+        getLabel={(line) => line.service}
+        createItem={() => ({ id: crypto.randomUUID(), service: "", quantity: "1", price: "" })}
+        addLabel="Добавить позицию"
+        renderItem={(line, row) => (
+          <>
+            <Input.Root>
+              <Input.Wrapper>
+                <Input.Field
+                  value={line.service}
+                  onChange={(event) => row.update({ service: event.target.value })}
+                />
+              </Input.Wrapper>
+            </Input.Root>
+            <Input.Root>
+              <Input.Wrapper>
+                <Input.Field
+                  value={line.quantity}
+                  inputMode="numeric"
+                  onChange={(event) => row.update({ quantity: event.target.value })}
+                />
+              </Input.Wrapper>
+            </Input.Root>
+            <Input.Root>
+              <Input.Wrapper>
+                <Input.Field
+                  value={line.price}
+                  inputMode="decimal"
+                  onChange={(event) => row.update({ price: event.target.value })}
+                />
+                <Input.InlineAffix side="end">₽</Input.InlineAffix>
+              </Input.Wrapper>
+            </Input.Root>
+          </>
+        )}
+      />
+    </div>
+  );
+}

package/dist/skill/reference/components/field-list/examples/overview.tsx

@@ -0,0 +1,66 @@
+/** Lines of an invoice: the column headings stand once above the rows, each row has a remove button and the add button sits under them — `columns`, `renderItem`, `createItem`, `addLabel`. */
+import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+import * as React from "react";
+
+type Line = { id: string; service: string; quantity: string; price: string };
+
+const COLUMNS: FieldListColumn[] = [
+  { label: "Услуга" },
+  { label: "Кол-во", width: "s" },
+  { label: "Цена", width: "m" },
+];
+
+const LINES: Line[] = [
+  { id: "setup", service: "Внедрение CRM", quantity: "1", price: "180 000" },
+  { id: "training", service: "Обучение менеджеров", quantity: "3", price: "15 000" },
+];
+
+export default function FieldListOverviewExample() {
+  const [lines, setLines] = React.useState(LINES);
+
+  return (
+    <FieldList
+      label="Позиции счёта"
+      columns={COLUMNS}
+      value={lines}
+      onValueChange={setLines}
+      getId={(line) => line.id}
+      getLabel={(line) => line.service}
+      createItem={() => ({ id: crypto.randomUUID(), service: "", quantity: "1", price: "" })}
+      addLabel="Добавить позицию"
+      renderItem={(line, row) => (
+        <>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                value={line.service}
+                placeholder="Поддержка, 1 месяц"
+                onChange={(event) => row.update({ service: event.target.value })}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                value={line.quantity}
+                inputMode="numeric"
+                onChange={(event) => row.update({ quantity: event.target.value })}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                value={line.price}
+                inputMode="decimal"
+                placeholder="0"
+                onChange={(event) => row.update({ price: event.target.value })}
+              />
+              <Input.InlineAffix side="end">₽</Input.InlineAffix>
+            </Input.Wrapper>
+          </Input.Root>
+        </>
+      )}
+    />
+  );
+}

package/dist/skill/reference/components/field-list/examples/reorder.tsx

@@ -0,0 +1,42 @@
+/** Selling points of a plan in the order of the pricing page: a one-column list has no headings and no numbers, a point moves by its handle or Alt+arrows — `reorderable`, `getLabel`. */
+import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+import * as React from "react";
+
+type Point = { id: string; text: string };
+
+const COLUMNS: FieldListColumn[] = [{ label: "Преимущество" }];
+
+const POINTS: Point[] = [
+  { id: "users", text: "До 50 сотрудников в одном пространстве" },
+  { id: "storage", text: "200 ГБ для документов и вложений" },
+  { id: "support", text: "Поддержка в рабочие часы, ответ за 2 часа" },
+  { id: "api", text: "Доступ к API и вебхукам" },
+];
+
+export default function FieldListReorderExample() {
+  const [points, setPoints] = React.useState(POINTS);
+
+  return (
+    <FieldList
+      label="Преимущества тарифа"
+      columns={COLUMNS}
+      reorderable
+      value={points}
+      onValueChange={setPoints}
+      getId={(point) => point.id}
+      getLabel={(point) => point.text}
+      createItem={() => ({ id: crypto.randomUUID(), text: "" })}
+      addLabel="Добавить преимущество"
+      renderItem={(point, row) => (
+        <Input.Root>
+          <Input.Wrapper>
+            <Input.Field
+              value={point.text}
+              onChange={(event) => row.update({ text: event.target.value })}
+            />
+          </Input.Wrapper>
+        </Input.Root>
+      )}
+    />
+  );
+}

package/dist/skill/reference/components/field-list/examples/sizes.tsx

@@ -0,0 +1,42 @@
+/** Every tier: the headings, the fields, the handle and the buttons follow the list's size — `size`. */
+import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+
+type Contact = { id: string; name: string; phone: string };
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
+
+const COLUMNS: FieldListColumn[] = [{ label: "Контакт" }, { label: "Телефон", width: "m" }];
+
+const CONTACTS: Contact[] = [{ id: "buyer", name: "Анна Лебедева", phone: "+7 912 404-18-20" }];
+
+export default function FieldListSizesExample() {
+  return (
+    <>
+      {SIZES.map((size) => (
+        <FieldList
+          key={size}
+          size={size}
+          label={size}
+          columns={COLUMNS}
+          defaultValue={CONTACTS}
+          getId={(contact) => contact.id}
+          getLabel={(contact) => contact.name}
+          renderItem={(contact) => (
+            <>
+              <Input.Root>
+                <Input.Wrapper>
+                  <Input.Field defaultValue={contact.name} />
+                </Input.Wrapper>
+              </Input.Root>
+              <Input.Root>
+                <Input.Wrapper>
+                  <Input.Field type="tel" defaultValue={contact.phone} />
+                </Input.Wrapper>
+              </Input.Root>
+            </>
+          )}
+        />
+      ))}
+    </>
+  );
+}

package/dist/skill/reference/components/field-list/examples/states.tsx

@@ -0,0 +1,51 @@
+/** The same list editable and disabled while the request saves it: fields, handles and buttons turn off together — `disabled`. */
+import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+
+type Stage = { id: string; name: string; days: string };
+
+const COLUMNS: FieldListColumn[] = [{ label: "Этап" }, { label: "Дней", width: "s" }];
+
+const STAGES: Stage[] = [
+  { id: "brief", name: "Бриф и смета", days: "3" },
+  { id: "design", name: "Дизайн", days: "10" },
+];
+
+const STATES = [
+  { label: "Этапы проекта", disabled: false },
+  { label: "disabled", disabled: true },
+];
+
+export default function FieldListStatesExample() {
+  return (
+    <>
+      {STATES.map((state) => (
+        <FieldList
+          key={state.label}
+          label={state.label}
+          disabled={state.disabled}
+          reorderable
+          columns={COLUMNS}
+          defaultValue={STAGES}
+          getId={(stage) => stage.id}
+          getLabel={(stage) => stage.name}
+          createItem={() => ({ id: crypto.randomUUID(), name: "", days: "" })}
+          addLabel="Добавить этап"
+          renderItem={(stage) => (
+            <>
+              <Input.Root>
+                <Input.Wrapper>
+                  <Input.Field defaultValue={stage.name} />
+                </Input.Wrapper>
+              </Input.Root>
+              <Input.Root>
+                <Input.Wrapper>
+                  <Input.Field defaultValue={stage.days} inputMode="numeric" />
+                </Input.Wrapper>
+              </Input.Root>
+            </>
+          )}
+        />
+      ))}
+    </>
+  );
+}

package/dist/skill/reference/components/input/examples/examples.module.css

@@ -16,7 +16,8 @@
 
 .formFields {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  /* Two columns while each keeps 12rem, one column in a narrower form — from its own width. */
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-16) * 3)), 1fr));
   align-items: start;
   gap: var(--prime-space-5) var(--prime-space-4);
 }
@@ -30,9 +31,3 @@
   justify-content: flex-end;
   gap: var(--prime-space-2);
 }
-
-@media (max-width: 639px) {
-  .formFields {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}