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

package/skills/cds-builder/references/components/cds-date-picker/api.md

@@ -0,0 +1,63 @@
+# CdsDatePicker — 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)
+
+A calendar for picking a date — a single one, several or a range. It lives right on the page or in a dropdown menu next to a field; the value is a string in the given format (`DD.MM.YYYY` by default), which is convenient to store and to send to the server.
+
+## CdsDatePicker
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `allowedDates` | `TCalendarAllowedDates \| undefined` | — | no | Array of dates available in the calendar. When a function is used, it receives the date in the YYYY/MM/DD format and must return true or false. |
+| `defaultYearMonth` | `string \| undefined` | — | no | Displayed year/month in the YYYY/MM format. The current year/month by default when v-model is not set. |
+| `description` | `string \| undefined` | — | no | Description of the calendar. Shown in the calendar header. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `emitImmediately` | `boolean \| undefined` | — | no | Emit the update:modelValue event right when the month or the year changes. Not available with multiple and range. |
+| `events` | `TCalendarEvents \| undefined` | — | no | List of events shown in the calendar. Format: YYYY/MM/DD. |
+| `eventsColor` | `TCalendarEventsColor \| undefined` | `'default'` | no | Color of the events in the calendar. |
+| `firstDayOfWeek` | `string \| number \| undefined` | `1` | no | First day of the week (Monday by default). |
+| `header` | `boolean \| undefined` | — | no | Show the calendar header |
+| `hideSiblingMonth` | `boolean \| undefined` | — | no | Hide the days of the neighboring months in the calendar. |
+| `locale` | `string \| TDateLocale \| undefined` | — | no | Locale for the dates. A locale name ('ru' \| 'en') or a `TDateLocale` object. The current locale from `useLocale` is taken by default, otherwise `ru`. |
+| `mask` | `string \| undefined` | `'DD.MM.YYYY'` | no | Date/time format |
+| `maxYearMonth` | `string \| undefined` | — | no | Forbid navigating the calendar past the given maximum date in the YYYY/MM format. |
+| `minYearMonth` | `string \| undefined` | — | no | Forbid navigating the calendar before the given minimum date in the YYYY/MM format. |
+| `modelValue` | `string \| TDatetimeValueRange \| (string \| TDatetimeValueRange)[] \| null \| undefined` | `null` | no | Value of the model |
+| `multiple` | `boolean \| undefined` | — | no | Allows selecting several dates. The v-model must be an array. |
+| `noUnset` | `boolean \| undefined` | — | no | Forbid resetting the date in the calendar. |
+| `range` | `boolean \| undefined` | — | no | Allows selecting a range of dates. The v-model must be an array. |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `title` | `string \| undefined` | — | no | Title of the calendar. Shown in the calendar header. |
+| `todayBtn` | `boolean \| undefined` | — | no | Show the "Today" button in the calendar header |
+| `view` | `"Calendar" \| "Years" \| "Months" \| undefined` | `'Calendar'` | no | Default calendar view. Possible values: 'Calendar', 'Years', 'Months'. |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `navigation` | `[payload: { year: number \| undefined; month: number \| undefined; }]` | Navigation to another month or year (also fires when the model is changed from outside). |
+| `rangeEnd` | `[payload: { from: Partial<IRawDate>; to: Partial<IRawDate>; }]` | End of a date range selection. |
+| `rangeStart` | `[value: Partial<IRawDate>]` | Start of a date range selection. |
+| `update:modelValue` | `[value: string \| TDatetimeValueRange \| (string \| TDatetimeValueRange)[] \| null, reason: string, details: Partial<IRawDate>]` | The value changed (v-model). Passes the value, the reason of the change and the details of the date. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Additional buttons under the calendar. |
+| `description` | `{ year: string \| number \| undefined; }` | Description of the title. |
+| `title` | `{ date: string; }` | Title of the calendar. |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `offsetCalendar` | `(type: "year" \| "month", descending: number) => void` | Moves the calendar one step forward or backward by months or by years. |
+| `setCalendarTo` | `(year: number, month: number) => void` | Scrolls the calendar to the given year and month without changing the selected value. |
+| `setEditingRange` | `(from: IRawDate, to: IRawDate) => void` | Sets the highlighted date range in `range` mode without confirming the selection. |
+| `setToday` | `() => void` | Selects today's date and scrolls the calendar to the current month. |
+| `setView` | `(viewMode: "Calendar" \| "Years" \| "Months") => void` | Switches the calendar view: days, months or years. |

package/skills/cds-builder/references/components/cds-date-picker/examples.md

@@ -0,0 +1,394 @@
+# CdsDatePicker — 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 calendar for picking a date — a single one, several or a range. It lives right on the page or in a dropdown menu next to a field; the value is a string in the given format (`DD.MM.YYYY` by default), which is convenient to store and to send to the server.
+
+## Value and format
+
+The chosen date arrives in `v-model` as a string in the `mask` format — `DD.MM.YYYY` by default. A repeated click on the selected day clears the selection; `no-unset` forbids such a reset, and `hide-sibling-month` hides the days of the neighboring months.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDatePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const value = ref<string | null>(null);
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsDatePicker v-model="value" />
+
+    <span class="text-200 text-content-secondary">Значение: {{ value ?? '—' }}</span>
+  </div>
+</template>
+```
+
+## Header
+
+`header` turns on the header with the summary of the choice: the title shows the date or the number of the chosen days, the description — the year. The texts are replaced by the `title` and `description` props or by the slots of the same name. `today-btn` adds a button that brings you back to the current day.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDatePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const value = ref<string | null>(null);
+</script>
+
+<template>
+  <div class="w-fit m-auto">
+    <CdsDatePicker v-model="value" header today-btn />
+  </div>
+</template>
+```
+
+## A date range
+
+`range` switches the calendar to picking a period: the first click fixes the start (the `range-start` event), the second one — the end (`range-end`), and the value arrives as a `{ from, to }` object. Together with `multiple` several periods can be picked.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDatePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const value = ref<{ from: string; to: string } | string | null>(null);
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsDatePicker v-model="value" range header />
+
+    <span class="text-200 text-content-secondary">Значение: {{ value ? JSON.stringify(value) : '—' }}</span>
+  </div>
+</template>
+```
+
+## Several dates
+
+`multiple` allows marking individual dates — the model becomes an array of strings.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDatePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const value = ref<string[]>([]);
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsDatePicker v-model="value" multiple header />
+
+    <span class="text-200 text-content-secondary">Значение: {{ JSON.stringify(value) }}</span>
+  </div>
+</template>
+```
+
+## Events
+
+`events` marks dates with dots: it accepts an array of dates in the `YYYY/MM/DD` format or a predicate function. The color of a dot is set by `events-color` — as a string or as a function of the date, when there are several types of events.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDatePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const value = ref<string | null>(null);
+const now = new Date();
+const ym = `${now.getFullYear()}/${String(now.getMonth() + 1).padStart(2, '0')}`;
+const events = [`${ym}/05`, `${ym}/12`, `${ym}/20`];
+</script>
+
+<template>
+  <div class="w-fit m-auto">
+    <CdsDatePicker v-model="value" :events="events" events-color="success" />
+  </div>
+</template>
+```
+
+## Available dates
+
+`allowed-dates` limits the choice: an array of dates or a function that receives a `YYYY/MM/DD` date and returns whether it can be picked. The rest of the days are turned off.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDatePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const value = ref<string | null>(null);
+// Разрешаем выбирать только будни.
+const allowedDates = (date: string) => {
+  const [y, m, d] = date.split('/').map(Number);
+  const day = new Date(y, m - 1, d).getDay();
+  return day !== 0 && day !== 6;
+};
+</script>
+
+<template>
+  <div class="w-fit m-auto">
+    <CdsDatePicker v-model="value" :allowed-dates="allowedDates" />
+  </div>
+</template>
+```
+
+## Navigation bounds
+
+`min-year-month` and `max-year-month` (the `YYYY/MM` format) do not let you go beyond the range — the arrows at the bound are turned off. Watch the moves between months through the `navigation` event.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDatePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const value = ref<string | null>(null);
+const year = new Date().getFullYear();
+const min = `${year}/01`;
+const max = `${year}/12`;
+</script>
+
+<template>
+  <div class="w-fit m-auto">
+    <CdsDatePicker v-model="value" :min-year-month="min" :max-year-month="max" />
+  </div>
+</template>
+```
+
+## Starting view
+
+`view` opens the calendar right at the list of months (`Months`) or years (`Years`) — handy for dates far from the current one. `default-year-month` sets the starting month when the model is empty.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDatePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const value = ref<string | null>(null);
+</script>
+
+<template>
+  <div class="w-fit m-auto">
+    <CdsDatePicker v-model="value" view="Months" />
+  </div>
+</template>
+```
+
+## Localization
+
+`locale` accepts a locale name (`ru` | `en`) or your own object of translations; without the prop the locale of the application is used. `first-day-of-week` sets the first day of the week — for `en` it is usually Sunday.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDatePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const value = ref<string | null>(null);
+</script>
+
+<template>
+  <div class="w-fit m-auto">
+    <CdsDatePicker v-model="value" locale="en" :first-day-of-week="0" header />
+  </div>
+</template>
+```
+
+## States
+
+`disabled` turns the calendar off and dims it, `readonly` keeps the usual look but blocks both the selection and the navigation.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDatePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const now = new Date();
+const value = ref(`15.${String(now.getMonth() + 1).padStart(2, '0')}.${now.getFullYear()}`);
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <div class="w-fit">
+      <CdsDatePicker v-model="value" disabled header />
+    </div>
+
+    <div class="w-fit">
+      <CdsDatePicker v-model="value" readonly header />
+    </div>
+  </div>
+</template>
+```
+
+## A field with a date
+
+Most often the calendar lives not on the page but in a menu next to a text field. [CdsDateInput](../cds-date-input/api.md) exists for that — it is already assembled out of a field, a menu and the calendar, it parses the manual input and accepts all the calendar props directly. Build the control yourself only if you need a non-standard scheme: out of [CdsTextInput](../cds-text-input/api.md), a [CdsMenu](../cds-menu/api.md) with `activator="parent"` and the calendar — that way all the props and slots of the field and the menu stay available to you. In that case add the input mask yourself: we recommend the lightweight (2.5 KB) [Maska](https://github.com/beholdr/maska) library.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDatePicker, CdsMenu, CdsTextInput } from '@central-design-system/components';
+import { vMaska } from 'maska/vue';
+import { ref } from 'vue';
+
+const date = ref('22.02.2022');
+</script>
+
+<template>
+  <div class="w-[250px] m-auto">
+    <CdsTextInput
+      v-model="date"
+      v-maska="'##.##.####'"
+      label="Дата"
+      placeholder="Выберите дату"
+      append-inner-icon="calendar"
+    >
+      <CdsMenu activator="parent" :close-on-content-click="false">
+        <CdsDatePicker v-model="date" />
+      </CdsMenu>
+    </CdsTextInput>
+  </div>
+</template>
+```
+
+## A reporting period
+
+The default slot adds actions under the calendar. Here the chosen range is a draft: it gets into the report only after the "Apply" button, while "Reset" returns the calendar to its initial state.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsCard, CdsDatePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+type TRange = { from: string; to: string };
+
+const draft = ref<TRange | string | null>(null);
+const period = ref<string | null>(null);
+
+function apply() {
+  if (!draft.value) {
+    period.value = null;
+  } else if (typeof draft.value === 'string') {
+    period.value = draft.value;
+  } else {
+    period.value = `${draft.value.from} — ${draft.value.to}`;
+  }
+}
+
+function reset() {
+  draft.value = null;
+  period.value = null;
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsCard class="w-fit">
+      <CdsDatePicker v-model="draft" range header>
+        <div class="flex justify-end gap-2">
+          <CdsButton appearance="tertiary" size="sm" text="Сбросить" @click="reset" />
+          <CdsButton size="sm" text="Принять" @click="apply" />
+        </div>
+      </CdsDatePicker>
+    </CdsCard>
+
+    <span class="text-200 text-content-secondary">Период отчёта: {{ period ?? 'не выбран' }}</span>
+  </div>
+</template>
+```
+
+## A delivery date
+
+The restrictions work together: `allowed-dates` leaves only the weekdays, and `min-year-month` and `max-year-month` do not let you go beyond the nearest two months — the unavailable options do not even have to be explained.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCard, CdsDatePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const date = ref<string | null>(null);
+
+const pad = (value: number) => String(value).padStart(2, '0');
+
+// Доставка доступна по будням в ближайшие два месяца.
+const now = new Date();
+const firstDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+const lastDay = new Date(now.getFullYear(), now.getMonth() + 2, 0);
+
+const min = `${firstDay.getFullYear()}/${pad(firstDay.getMonth() + 1)}`;
+const max = `${lastDay.getFullYear()}/${pad(lastDay.getMonth() + 1)}`;
+
+const allowedDates = (hash: string) => {
+  const [year, month, day] = hash.split('/').map(Number);
+  const candidate = new Date(year, month - 1, day);
+  const weekday = candidate.getDay();
+
+  return weekday !== 0 && weekday !== 6 && candidate >= firstDay && candidate <= lastDay;
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsCard class="w-fit">
+      <CdsDatePicker v-model="date" :allowed-dates="allowedDates" :min-year-month="min" :max-year-month="max" />
+    </CdsCard>
+
+    <span class="text-200 text-content-secondary">
+      {{ date ? `Привезём ${date} с 10:00 до 18:00` : 'Выберите дату доставки' }}
+    </span>
+  </div>
+</template>
+```
+
+## Date and time
+
+The calendar does not pick the time — put a [CdsTimePicker](../cds-time-picker/api.md) next to it with a shared model and the same `DD.MM.YYYY HH:mm` mask: every component changes its own part of the string. In a field the very same thing is turned on by a single prop — `with-time` on [CdsDateInput](../cds-date-input/api.md).
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCard, CdsDatePicker, CdsDivider, CdsTimePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const now = new Date();
+const dateTime = ref(`15.${String(now.getMonth() + 1).padStart(2, '0')}.${now.getFullYear()} 12:35`);
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsCard class="flex w-fit flex-col">
+      <CdsDatePicker v-model="dateTime" mask="DD.MM.YYYY HH:mm" header today-btn />
+      <CdsDivider />
+      <CdsTimePicker v-model="dateTime" mask="DD.MM.YYYY HH:mm" />
+    </CdsCard>
+
+    <span class="text-200 text-content-secondary">Значение: {{ dateTime }}</span>
+  </div>
+</template>
+```

package/skills/cds-builder/references/components/cds-date-picker/guidelines.md

@@ -0,0 +1,10 @@
+# CdsDatePicker — guidelines
+
+> Extracted from `docs/demos/Guidelines.vue` by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md).
+
+| ✅ Do | ❌ Don't |
+| --- | --- |
+| Unavailable days are turned off through allowed-dates — a wrong choice is impossible. | Every day looks available, and the user learns that weekends do not fit from an error only after the choice. |
+| Turn the header on when picking a range — it shows the whole chosen period. | Without the header the result of the choice is captioned nowhere: the user counts the days by the highlight. |
+| Only meaningful dates are marked with events — the dots are noticeable and guide the eye. | An event on every day turns the marks into noise: the calendar stops telling anything. |

package/skills/cds-builder/references/components/cds-date-picker/tokens.md

@@ -0,0 +1,66 @@
+# CdsDatePicker — 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.
+
+## _CdsDatePicker.variables.scss
+
+```scss
+@use '../../../styles/tools';
+
+$date-picker-color: (
+  'background': transparent,
+  'color': rgb(var(--cds-color-content-primary)),
+  'weekdays': rgb(var(--cds-color-content-placeholder)),
+  'holiday': rgb(var(--cds-color-status-danger-content)),
+  'hover': rgb(var(--cds-color-fill-primary-hover)),
+  'fill-day': rgb(var(--cds-color-fill-disable)),
+  'today': rgb(var(--cds-color-brand-primary)),
+  'border': rgb(var(--cds-color-line-tertiary)),
+  'label': rgb(var(--cds-color-content-primary)),
+  'description': rgb(var(--cds-color-content-secondary)),
+  'dot-default': rgb(var(--cds-color-brand-primary)),
+  'dot-success': rgb(var(--cds-color-status-success-surface)),
+  'dot-danger': rgb(var(--cds-color-status-danger-surface)),
+  'dot-warning': rgb(var(--cds-color-status-warning-surface)),
+  'dot-active': rgb(var(--cds-color-content-on-dark)),
+  'range': rgb(var(--cds-color-brand-secondary)),
+  'range-hover': rgb(var(--cds-color-brand-secondary-hover)),
+  'range-edit': rgb(var(--cds-color-brand-secondary)),
+  'range-edit-day': rgb(var(--cds-color-brand-primary)),
+  'range-edit-text': rgb(var(--cds-color-content-on-dark)),
+  'range-edit-hover': rgb(var(--cds-color-brand-primary-hover)),
+  'range-edit-active': rgb(var(--cds-color-brand-primary-active)),
+  'disabled': rgb(var(--cds-color-content-disable)),
+  'out': rgb(var(--cds-color-content-disable)),
+) !default;
+$date-picker-calendar-width: tools.to-rem(248px) !default;
+$date-picker-calendar-height: tools.to-rem(316px) !default;
+$date-picker-calendar-padding: var(--cds-spacing-300) !default;
+$date-picker-calendar-navigation-month-width: tools.to-rem(79px) !default;
+$date-picker-calendar-navigation-years-width: tools.to-rem(48px) !default;
+$date-picker-calendar-navigation-padding: var(--cds-spacing-200) 0 !default;
+$date-picker-calendar-navigation-gap: var(--cds-spacing-100) 0 !default;
+$date-picker-header-padding: var(--cds-spacing-200) var(--cds-spacing-400) !default;
+$date-picker-header-border: var(--cds-border-100) solid !default;
+$date-picker-days-gap: var(--cds-spacing-100) !default;
+$date-picker-days-width: tools.to-rem(192px) !default;
+$date-picker-day-width: tools.to-rem(32px) !default;
+$date-picker-day-height: tools.to-rem(32px) !default;
+$date-picker-day-border: var(--cds-border-100) solid !default;
+$date-picker-day-border-radius: var(--cds-border-radius-100) !default;
+$date-picker-day-dot: tools.to-rem(4px) !default;
+$date-picker-day-dot-gap: var(--cds-spacing-100) !default;
+$date-picker-weekdays-width: tools.to-rem(32px) !default;
+$date-picker-weekdays-padding: var(--cds-spacing-100) 0 !default;
+$date-picker-month-gap: var(--cds-spacing-100) var(--cds-spacing-100) !default;
+$date-picker-month-width: tools.to-rem(72px) !default;
+$date-picker-month-dot: tools.to-rem(4px) !default;
+$date-picker-month-dot-gap: var(--cds-spacing-50) !default;
+$date-picker-month-padding: var(--cds-spacing-300) !default;
+$date-picker-month-btn-padding: 0 var(--cds-spacing-100) !default;
+$date-picker-years-gap: var(--cds-spacing-500) var(--cds-spacing-300) !default;
+$date-picker-year-dot: tools.to-rem(4px) !default;
+$date-picker-year-dot-gap: var(--cds-spacing-50) !default;
+```

package/skills/cds-builder/references/components/cds-defaults-provider/api.md

@@ -0,0 +1,21 @@
+# CdsDefaultsProvider — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+
+## CdsDefaultsProvider
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `defaults` | `DefaultsOptions` | — | no | Значения пропсов по умолчанию для компонентов внутри — объект вида `{ CdsButton: { size: 'small' } }` |
+| `disabled` | `boolean \| undefined` | — | no | Отключает провайдер: вложенные компоненты используют значения из внешнего контекста |
+| `reset` | `string \| number \| undefined` | — | no | Сколько уровней вложенных провайдеров сбросить перед применением своих значений |
+| `root` | `string \| boolean \| undefined` | — | no | Применяет значения к корневому уровню приложения. Строка — имя корневого набора значений |
+| `scoped` | `boolean \| undefined` | — | no | Не наследовать значения внешних провайдеров — использовать только собственный `defaults` |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Default slot |

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

@@ -0,0 +1,22 @@
+# CdsDescription — 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 description is muted text under the label of a field. It clarifies what to enter and in what format, so the label can stay short.
+
+## CdsDescription
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `content` | `string \| number \| undefined` | — | no | Content displayed in the component. |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `text` | `string \| number \| undefined` | — | no | Text displayed in the component. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Text of the description |

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

@@ -0,0 +1,69 @@
+# CdsDescription — 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 description is muted text under the label of a field. It clarifies what to enter and in what format, so the label can stay short.
+
+## Text
+
+The `text` prop sets the content. The `default` slot adds arbitrary markup to it — a highlighted input format, for example.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDescription } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsDescription text="Укажите ИНН из 10 или 12 цифр" />
+
+    <CdsDescription> Формат — <b>ДД.ММ.ГГГГ</b> </CdsDescription>
+  </div>
+</template>
+```
+
+## Tag
+
+By default the description renders as a `div` tag. The `tag` prop changes the tag — to `p`, for example, when the description lives inside the text of the page.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDescription } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsDescription tag="p" text="Описание отрендерено тегом p" />
+  </div>
+</template>
+```
+
+## An explanation for a group of fields
+
+A group of checkboxes has no `description` of its own, so the label and the explanation are assembled by hand: `CdsLabel` names the group, `CdsDescription` explains what to pick.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCheckbox, CdsDescription, CdsLabel } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const channels = ref(['email']);
+</script>
+
+<template>
+  <div class="flex flex-col gap-1 w-[350px] m-auto">
+    <CdsLabel text="Уведомления" />
+    <CdsDescription text="Выберите, куда присылать сообщения о новых заявках" />
+
+    <CdsCheckbox v-model="channels" value="email" label="Электронная почта" multiple hide-details />
+    <CdsCheckbox v-model="channels" value="sms" label="SMS" multiple hide-details />
+  </div>
+</template>
+```

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

@@ -0,0 +1,11 @@
+# CdsDescription — 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.
+
+## _CdsDescription.variables.scss
+
+```scss
+$description-color: inherit !default;
+```