@central-design-system/skills 4.0.0-alpha.6

package/skills/cds-builder/references/components/cds-input/examples.md

@@ -0,0 +1,205 @@
+# CdsInput — usage examples
+
+> Extracted from Storybook stories (`docs/*.stories.ts`) by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md). `v-bind="args"` in templates refers to the props from the **Args** block of the corresponding example.
+
+The wrapper of an input: the label, the description, the outer icons, the block of messages and the validation by rules. You put the control itself into the `default` slot — usually a [CdsField](../cds-field/api.md) with your `input` inside.
+
+## Label and description
+
+The `label` prop names the field, `description` adds an explanation under the label. The slots of the same names accept arbitrary markup.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsField, CdsInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const value = ref('');
+</script>
+
+<template>
+  <CdsInput
+    v-slot="{ id }"
+    label="ИНН организации"
+    description="10 цифр для юрлица, 12 — для ИП"
+    class="w-[350px] m-auto"
+  >
+    <CdsField v-slot="{ props: fieldProps, focus, blur }" :id="id.value">
+      <input v-bind="fieldProps" v-model="value" placeholder="0000000000" @focus="focus" @blur="blur" />
+    </CdsField>
+  </CdsInput>
+</template>
+```
+
+## Messages and hints
+
+There is a single line of text under the field, and the props split it by states: `messages` is visible at rest, `hint` while `focused`, and `error-messages` on top of the rest. `CdsInput` does not track the focus state itself: pass it with the `focused` prop.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsField, CdsInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const focused = ref(false);
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-[350px] m-auto">
+    <CdsInput v-slot="{ id }" label="Сообщение" messages="Видно всегда">
+      <CdsField v-slot="{ props: fieldProps }" :id="id.value">
+        <input v-bind="fieldProps" readonly />
+      </CdsField>
+    </CdsInput>
+
+    <CdsInput v-slot="{ id }" label="Подсказка" hint="Видна, пока поле в фокусе" :focused="focused">
+      <CdsField v-slot="{ props: fieldProps }" :id="id.value" :focused="focused">
+        <input v-bind="fieldProps" @focus="focused = true" @blur="focused = false" />
+      </CdsField>
+    </CdsInput>
+
+    <CdsInput v-slot="{ id }" label="Ошибка" :error-messages="['Заполните поле']">
+      <CdsField v-slot="{ props: fieldProps }" :id="id.value" error>
+        <input v-bind="fieldProps" readonly />
+      </CdsField>
+    </CdsInput>
+  </div>
+</template>
+```
+
+## Hiding the details
+
+The `hide-details` prop removes the bottom block entirely — the fields can be placed tight against each other. The `auto` value hides the block only while there is nothing to show.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsField, CdsInput } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-[350px] m-auto">
+    <CdsInput v-slot="{ id }" label="Блок деталей на месте">
+      <CdsField v-slot="{ props: fieldProps }" :id="id.value">
+        <input v-bind="fieldProps" readonly />
+      </CdsField>
+    </CdsInput>
+
+    <CdsInput v-slot="{ id }" label="Блок деталей скрыт" hide-details>
+      <CdsField v-slot="{ props: fieldProps }" :id="id.value">
+        <input v-bind="fieldProps" readonly />
+      </CdsField>
+    </CdsInput>
+
+    <CdsInput v-slot="{ id }" label="Скрыт, пока нечего показать" hide-details="auto" messages="А теперь есть">
+      <CdsField v-slot="{ props: fieldProps }" :id="id.value">
+        <input v-bind="fieldProps" readonly />
+      </CdsField>
+    </CdsInput>
+  </div>
+</template>
+```
+
+## Icons
+
+The `prepend-icon` and `append-icon` props put an icon outside the control. Clicks on them are caught by `@click:prepend` and `@click:append`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsField, CdsInput } from '@central-design-system/components';
+</script>
+
+<template>
+  <CdsInput v-slot="{ id }" label="Дата поставки" prepend-icon="calendar" append-icon="info" class="w-[350px] m-auto">
+    <CdsField v-slot="{ props: fieldProps }" :id="id.value">
+      <input v-bind="fieldProps" readonly />
+    </CdsField>
+  </CdsInput>
+</template>
+```
+
+## Direction
+
+The `direction` prop changes the grid: `horizontal` puts the icons on the sides of the control, `vertical` puts them above and below it.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsField, CdsInput } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 w-[350px] m-auto">
+    <CdsInput v-slot="{ id }" label="Горизонтально" prepend-icon="doc" append-icon="info">
+      <CdsField v-slot="{ props: fieldProps }" :id="id.value">
+        <input v-bind="fieldProps" readonly />
+      </CdsField>
+    </CdsInput>
+
+    <CdsInput v-slot="{ id }" label="Вертикально" direction="vertical" prepend-icon="doc" append-icon="info">
+      <CdsField v-slot="{ props: fieldProps }" :id="id.value">
+        <input v-bind="fieldProps" readonly />
+      </CdsField>
+    </CdsInput>
+  </div>
+</template>
+```
+
+## Validating your own field
+
+The `rules` prop accepts validation functions, `validation-value` accepts the value to pass to them. The result arrives in the slot through `isValid`: bind it to the `error` prop of `CdsField` and the frame turns red together with the message.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsField, CdsInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const inn = ref('770');
+const focused = ref(false);
+
+const rules = [
+  (value: string) => !!value || 'Заполните ИНН',
+  (value: string) => /^\d{10}$|^\d{12}$/.test(value) || 'ИНН состоит из 10 или 12 цифр'
+];
+</script>
+
+<template>
+  <CdsInput
+    v-slot="{ id, isValid }"
+    label="ИНН организации"
+    description="10 цифр для юрлица, 12 — для ИП"
+    :validation-value="inn"
+    :rules="rules"
+    :focused="focused"
+    class="w-[350px] m-auto"
+  >
+    <CdsField
+      v-slot="{ props: fieldProps }"
+      :id="id.value"
+      :error="isValid.value === false"
+      :focused="focused"
+      :dirty="!!inn"
+      prepend-inner-icon="company"
+      clearable
+      @click:clear="inn = ''"
+    >
+      <input
+        v-bind="fieldProps"
+        v-model="inn"
+        placeholder="0000000000"
+        @focus="focused = true"
+        @blur="focused = false"
+      />
+    </CdsField>
+  </CdsInput>
+</template>
+```

package/skills/cds-builder/references/components/cds-input/tokens.md

@@ -0,0 +1,108 @@
+# CdsInput — tokens (level 3)
+
+> Copy of the component's `styles/*.variables.scss`, taken by `bun run generate:skill`. Do not edit manually.
+> `--cds-*` are global level-2 tokens whose values come from the active theme: see [themes.md](../../tokens/themes.md).
+> Variables marked `!default` can be overridden at build time via SCSS.
+
+## _CdsInput.variables.scss
+
+```scss
+// ======================= Variables =======================
+$input-affix-margin-inside: var(--cds-spacing-200) !default;
+$input-disabled-color: rgb(var(--cds-color-content-disable)) !default;
+$input-error-color: rgb(var(--cds-color-status-danger-content)) !default;
+
+// ======================= Sizes =======================
+$input-sizes: (
+  xs: (
+    label: (
+      'font-size': '100',
+      'margin-block': 0,
+    ),
+    description: (
+      'font-size': '50',
+      'margin-block': var(--cds-spacing-50),
+    ),
+    input: (
+      'font-size': '100',
+      'affix-margin-inside': var(--cds-spacing-100),
+    ),
+    messages: (
+      'font-size': '50',
+      'margin-block': var(--cds-spacing-50),
+    ),
+  ),
+  sm: (
+    label: (
+      'font-size': '100',
+      'margin-block': var(--cds-spacing-50),
+    ),
+    description: (
+      'font-size': '50',
+      'margin-block': var(--cds-spacing-50),
+    ),
+    input: (
+      'font-size': '100',
+      'affix-margin-inside': var(--cds-spacing-100),
+    ),
+    messages: (
+      'font-size': '50',
+      'margin-block': var(--cds-spacing-50)
+    ),
+  ),
+  md: (
+    label: (
+      'font-size': '200',
+      'margin-block': var(--cds-spacing-100),
+    ),
+    description: (
+      'font-size': '100',
+      'margin-block': var(--cds-spacing-100),
+    ),
+    input: (
+      'font-size': '200',
+      'affix-margin-inside': var(--cds-spacing-200),
+    ),
+    messages: (
+      'font-size': '100',
+      'margin-block': var(--cds-spacing-50),
+    ),
+  ),
+  lg: (
+    label: (
+      'font-size': '300',
+      'margin-block': var(--cds-spacing-100),
+    ),
+    description: (
+      'font-size': '200',
+      'margin-block': var(--cds-spacing-200),
+    ),
+    input: (
+      'font-size': '300',
+      'affix-margin-inside': var(--cds-spacing-300),
+    ),
+    messages: (
+      'font-size': '200',
+      'margin-block': var(--cds-spacing-100),
+    ),
+  ),
+  xl: (
+    label: (
+      'font-size': '400',
+      'margin-block': var(--cds-spacing-200),
+    ),
+    description: (
+      'font-size': '300',
+      'margin-block': var(--cds-spacing-200),
+    ),
+    input: (
+      'font-size': '400',
+      'affix-margin-inside': var(--cds-spacing-300),
+    ),
+    messages: (
+      'font-size': '300',
+      'margin-block': var(--cds-spacing-100),
+    ),
+  )
+) !default;
+```

package/skills/cds-builder/references/components/cds-label/api.md

@@ -0,0 +1,25 @@
+# CdsLabel — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md) · Tokens: [tokens.md](tokens.md)
+
+A label names a field — it says what is expected from the user. It renders as a `label` tag and binds to the control through `for`, so a click on the label moves the focus into the field.
+
+## CdsLabel
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `content` | `string \| number \| undefined` | — | no | Content displayed in the component. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `for` | `string \| undefined` | — | no | Identifier of the field the label belongs to — the value of the `for` HTML attribute |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `size` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | `'md'` | no | Size of the component |
+| `text` | `string \| number \| undefined` | — | no | Text displayed in the component. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Text of the label for the field |

package/skills/cds-builder/references/components/cds-label/examples.md

@@ -0,0 +1,72 @@
+# CdsLabel — usage examples
+
+> Extracted from Storybook stories (`docs/*.stories.ts`) by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md). `v-bind="args"` in templates refers to the props from the **Args** block of the corresponding example.
+
+A label names a field — it says what is expected from the user. It renders as a `label` tag and binds to the control through `for`, so a click on the label moves the focus into the field.
+
+## Text
+
+The `text` prop sets the caption. The `default` slot accepts arbitrary markup — an icon with an explanation next to the text, for example.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsIcon, CdsLabel } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsLabel text="Название организации" />
+
+    <CdsLabel>
+      Название организации
+      <CdsIcon icon="info" size="sm" end />
+    </CdsLabel>
+  </div>
+</template>
+```
+
+## States
+
+The `disabled` and `readonly` props mute the label together with the field: both stop reacting to a click, and `disabled` also changes the color.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsLabel } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsLabel text="Обычная метка" />
+    <CdsLabel text="Метка заблокированного поля" disabled />
+    <CdsLabel text="Метка поля только для чтения" readonly />
+  </div>
+</template>
+```
+
+## A label for your own control
+
+The `for` prop takes the `id` of the control — the browser binds them itself: a click on the label sets the focus, and the screen reader reads the caption together with the field.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsLabel } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const agreed = ref(false);
+</script>
+
+<template>
+  <div class="flex items-center gap-1">
+    <input id="agreement" v-model="agreed" type="checkbox" />
+
+    <CdsLabel for="agreement" text="Согласен с условиями обработки данных" />
+  </div>
+</template>
+```

package/skills/cds-builder/references/components/cds-label/tokens.md

@@ -0,0 +1,12 @@
+# CdsLabel — tokens (level 3)
+
+> Copy of the component's `styles/*.variables.scss`, taken by `bun run generate:skill`. Do not edit manually.
+> `--cds-*` are global level-2 tokens whose values come from the active theme: see [themes.md](../../tokens/themes.md).
+> Variables marked `!default` can be overridden at build time via SCSS.
+
+## _CdsLabel.variables.scss
+
+```scss
+$label-color: inherit !default;
+$label-disabled-color: rgb(var(--cds-color-content-disable)) !default;
+```

package/skills/cds-builder/references/components/cds-layout/api.md

@@ -0,0 +1,50 @@
+# CdsLayout — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md) · Guidelines: [guidelines.md](guidelines.md) · Tokens: [tokens.md](tokens.md)
+
+The frame of the application: `CdsLayout` places the header, the side drawers, the content and the footer, measures their sizes and takes the scrolling over. The parts of the layout know about each other — the content never slides under the header and never hides behind a drawer.
+
+## CdsLayout
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `container` | `boolean \| undefined` | `false` | no | Container mode: the layout scrolls inside itself instead of scrolling the page. |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `view` | `string \| undefined` | `'hhh lpr fff'` | no | Layout scheme of three strings: top (header), middle (left-page-right), bottom (footer). For example `'hhh lpr fff'`. |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `resize` | `[contentRect: Pick<DOMRectReadOnly, "width" \| "height">]` | The size of the layout area has changed. |
+| `scroll` | `[info: ScrollObserver]` | The layout area has been scrolled. |
+| `scrollHeight` | `[height: number]` | The height of the scrollable content has changed. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Content of the layout: `CdsHeader`, `CdsDrawer`, `CdsMain`, `CdsFooter`. |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `animate` | `() => void` | Turns on the rebuild animation of the layout for the duration of the next size update. |
+| `containerHeight` | `number` | Height of the content area without the header and the footer, in pixels. |
+| `footer` | `LayoutPart` | Size and offset of the layout footer. |
+| `header` | `LayoutPart` | Size and offset of the layout header. |
+| `height` | `number` | Full height of the layout in pixels. |
+| `instances` | `Record<string, unknown>` | Components registered in the layout by their identifiers — the header, the footer, the drawers, the content. |
+| `isContainer` | `boolean` | Whether the layout is limited in width by a container (`container`) instead of stretching across the whole screen. |
+| `left` | `LayoutPart` | Size and offset of the left drawer of the layout. |
+| `right` | `LayoutPart` | Size and offset of the right drawer of the layout. |
+| `rootRef` | `HTMLElement \| undefined` | Ref to the root DOM element of the layout. |
+| `rows` | `{ top: string[]; middle: string[]; bottom: string[]; }` | Identifiers of the components distributed across the rows of the layout: top, middle and bottom. |
+| `scroll` | `ScrollObserver` | Scroll state of the layout: position, direction and delta. |
+| `scrollbarWidth` | `number` | Width of the system scrollbar in pixels — taken into account when the scroll is locked. |
+| `totalWidth` | `number` | Full width of the layout in pixels. |
+| `update` | `(part: "left" \| "right" \| "footer" \| "header", prop: keyof LayoutPart, value: number \| boolean) => void` | Updates the size, the offset or the space reservation for a part of the layout. |