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

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

@@ -0,0 +1,151 @@
+# CdsDateInput — 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 date field: a text field with a calendar icon that opens [CdsDatePicker](../cds-date-picker/api.md) in a dropdown menu on click. The date can be picked with the mouse or typed on the keyboard — the value arrives as a string in the `mask` format (`DD.MM.YYYY` by default).
+
+## CdsDateInput
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `active` | `boolean \| undefined` | — | no | Active state of the field |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `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. |
+| `allowedHours` | `number[] \| undefined` | — | no | Configures which hours are available for selection. |
+| `allowedMinutes` | `number[] \| undefined` | — | no | Configures which minutes are available for selection. |
+| `allowedSeconds` | `number[] \| undefined` | — | no | Configures which seconds are available for selection. |
+| `allowedTime` | `((hr: number \| null, min: number \| null, sec: number \| null) => boolean) \| undefined` | — | no | Configures which time is available for selection. |
+| `appendIcon` | `IconValue \| undefined` | — | no | Icon in the append slot, after the content |
+| `appendInnerIcon` | `IconValue \| undefined` | — | no | Icon in the inner append slot, after the content of the field |
+| `autocomplete` | `string \| undefined` | — | no | Helps to influence browser suggestions. The `suppress` value changes the name attribute of the fields, and `off` relies on the browser to stop suggesting values on its own. Any other value is passed to the built-in autocomplete of the corresponding element. |
+| `autofocus` | `boolean \| undefined` | — | no | Enables autofocus |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `centerAffix` | `boolean \| undefined` | — | no | Vertically center the appendInner, prependInner, clearIcon and label elements. |
+| `clearable` | `boolean \| undefined` | — | no | Shows the clear button |
+| `clearIcon` | `IconValue \| undefined` | `'remove'` | no | Icon of the clear button |
+| `color` | `string \| undefined` | — | no | Component color |
+| `counter` | `string \| number \| boolean \| undefined` | — | no | Character counter. Accepts a boolean, a number or a string |
+| `counterValue` | `number \| ((value: any) => number) \| undefined` | — | no | Custom counter value. Either a number or a function computing it from the current value |
+| `defaultDate` | `string \| undefined` | — | no | Date used by default when the model is empty (in the YYYY/MM/DD format). |
+| `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 component, shown under the label |
+| `dirty` | `boolean \| undefined` | — | no | Marks that the value of the field was changed by the user |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `displayFormat` | `string \| ((date: Date) => string) \| undefined` | — | no | Display format of the date in the field. A mask (`'D MMMM YYYY'`) or a function receiving the native `Date` and returning a string. By default the value is shown as is — in the `mask` format. |
+| `emitImmediately` | `boolean \| undefined` | — | no | Emit the update:modelValue event right when the month or the year changes. Not available with multiple and range. |
+| `error` | `boolean \| undefined` | — | no | Error state |
+| `errorMessages` | `string \| readonly string[] \| null \| undefined` | `[]` | no | Puts the component into the error state and passes custom error messages. They are merged with any checks defined in the `rules` prop. This field does not trigger validation. |
+| `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). |
+| `focused` | `boolean \| undefined` | — | no | Controls the focus state of the component. When `true`, the component is considered focused and may apply the corresponding styles or behavior. |
+| `format12h` | `boolean \| undefined` | — | no | Shows the time in the 12-hour AM/PM format. |
+| `header` | `boolean \| undefined` | — | no | Show the calendar header |
+| `hideActions` | `boolean \| undefined` | `true` | no | Hide the confirmation buttons under the calendar — the chosen date is applied immediately. |
+| `hideDetails` | `boolean \| "auto" \| undefined` | — | no | Hides the details block (messages and hints). With the 'auto' value the block is hidden when there are no messages |
+| `hideMessages` | `boolean \| undefined` | — | no | Hide the messages under the input |
+| `hideSiblingMonth` | `boolean \| undefined` | — | no | Hide the days of the neighboring months in the calendar. |
+| `hint` | `string \| undefined` | — | no | Hint text shown under the input |
+| `iconColor` | `string \| boolean \| undefined` | — | no | Icon color. Accepts a boolean or a color string |
+| `id` | `string \| undefined` | — | no | Unique identifier of the component |
+| `label` | `string \| undefined` | — | no | Label text of the component |
+| `loading` | `string \| boolean \| undefined` | — | no | Loading indicator for the component |
+| `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`. |
+| `location` | `Anchor \| undefined` | `'bottom start'` | no | Position of the dropdown calendar relative to the field. |
+| `mask` | `string \| undefined` | `'DD.MM.YYYY'` | no | Date/time format |
+| `maxErrors` | `string \| number \| undefined` | `1` | no | Maximum number of validation errors shown |
+| `maxWidth` | `string \| number \| undefined` | — | no | Maximum component width |
+| `maxYearMonth` | `string \| undefined` | — | no | Forbid navigating the calendar past the given maximum date in the YYYY/MM format. |
+| `menu` | `boolean \| undefined` | — | no | State of the dropdown calendar (v-model:menu). |
+| `menuProps` | `CdsMenuProps \| undefined` | — | no | Props passed through to the CdsMenu component of the dropdown calendar. |
+| `messages` | `string \| readonly string[] \| undefined` | `[]` | no | Messages shown under the input |
+| `minWidth` | `string \| number \| undefined` | — | no | Minimum component width |
+| `minYearMonth` | `string \| undefined` | — | no | Forbid navigating the calendar before the given minimum date in the YYYY/MM format. |
+| `modelModifiers` | `Record<string, boolean> \| undefined` | — | no | v-model modifiers passed by Vue to process the field value |
+| `modelValue` | `TDateInputValue \| undefined` | `null` | no | Value of the field: a string in the `mask` format, a `{ from, to }` range object or an array of them with `multiple`/`range`. |
+| `multiple` | `boolean \| undefined` | — | no | Allows selecting several dates. The v-model must be an array. |
+| `name` | `string \| undefined` | — | no | Name of the input |
+| `noUnset` | `boolean \| undefined` | — | no | Forbid resetting the date in the calendar. |
+| `nowBtn` | `boolean \| undefined` | — | no | Shows the "Now" button. |
+| `persistentClearable` | `boolean \| undefined` | — | no | Always show the clear button, not only on hover or focus |
+| `persistentCounter` | `boolean \| undefined` | — | no | Always show the counter, not only while the field is in use |
+| `persistentHint` | `boolean \| undefined` | — | no | Always show the hint, not only on focus |
+| `persistentPlaceholder` | `boolean \| undefined` | — | no | Always show the placeholder instead of hiding it while the field is in use |
+| `pickerProps` | `CdsDatePickerProps \| undefined` | — | no | Props passed through to the CdsDatePicker component. They win over the props of the field with the same name. |
+| `placeholder` | `string \| undefined` | — | no | Placeholder text shown in an empty field |
+| `prefix` | `string \| undefined` | — | no | Text prefix shown before the field value |
+| `prependIcon` | `IconValue \| undefined` | — | no | Icon in the prepend slot, before the content |
+| `prependInnerIcon` | `IconValue \| undefined` | `'calendar'` | no | Icon in the inner prepend slot, before the content of the field |
+| `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 |
+| `reverse` | `boolean \| undefined` | — | no | Reverses the order of the elements inside the field |
+| `role` | `string \| undefined` | — | no | ARIA role for the native input element |
+| `rules` | `readonly ValidationRule[] \| undefined` | `[]` | no | Accepts an array of items of different types: functions, booleans and strings. Functions take the input value as an argument and must return either true / false, or a string with an error message. The input goes into the error state if a function returns false (or any value in the array is false) or is a string. |
+| `size` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | `'md'` | no | Size of the component |
+| `suffix` | `string \| undefined` | — | no | Text suffix shown after the field value |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `timePickerProps` | `CdsTimePickerProps \| undefined` | — | no | Props passed through to the CdsTimePicker component. They win over the props of the field with the same name. |
+| `todayBtn` | `boolean \| undefined` | — | no | Show the "Today" button in the calendar header |
+| `type` | `string \| undefined` | `'text'` | no | Type of the native input |
+| `updateOn` | `("enter" \| "blur")[] \| undefined` | `['blur', 'enter']` | no | Events that apply the manually entered value. An empty array forbids manual input — the field becomes read-only. |
+| `validateOn` | `ValidateOn \| undefined` | — | no | Changes the type of the event that triggers validation |
+| `validationValue` | `any` | — | no | Value used when applying the validation rules |
+| `view` | `"Calendar" \| "Years" \| "Months" \| undefined` | `'Calendar'` | no | Default calendar view. Possible values: 'Calendar', 'Years', 'Months'. |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+| `withSeconds` | `boolean \| undefined` | — | no | Adds seconds to the time selection. |
+| `withTime` | `boolean \| undefined` | — | no | Adds a time selection (CdsTimePicker) under the calendar and appends the time to the mask. Works for a single date only — ignored with `multiple` and `range`. |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `cancel` | `[]` | The selection was cancelled by the cancel button. |
+| `navigation` | `[payload: { year: number \| undefined; month: number \| undefined; }]` | Navigation to another month or year in the calendar. |
+| `rangeEnd` | `[payload: { from: Partial<IRawDate>; to: Partial<IRawDate>; }]` | End of a date range selection. |
+| `rangeStart` | `[value: Partial<IRawDate>]` | Start of a date range selection. |
+| `save` | `[value: TDateInputValue]` | The value was confirmed — by a selection in the calendar or by the save button. |
+| `update:focused` | `[focused: boolean]` | The focus state of the field changed (v-model:focused). |
+| `update:menu` | `[value: boolean]` | The state of the dropdown calendar changed (v-model:menu). |
+| `update:modelValue` | `[value: TDateInputValue]` | The value of the field changed (v-model). |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `actions` | `CdsDateInputActionsSlot` | Confirmation buttons under the calendar (relevant with `hide-actions="false"`). |
+| `append` | `CdsInputSlot` | Adds an element after the input |
+| `append-inner` | `CdsInputDefaultSlot` | Slot added at the end of the input |
+| `clear` | `CdsInputDefaultSlot & { props: Record<string, any>; }` | Slot for a custom clear icon (shown when the clearable prop is true). |
+| `description` | `{ description: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsDescription component |
+| `details` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
+| `label` | `{ label: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsLabel component |
+| `loader` | `LoaderSlotProps` | Slot for a custom loader (shown when the loading prop is true). |
+| `message` | `CdsMessagesSlots` | Slot for customizing the content of a message |
+| `messages` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
+| `picker-description` | `{ year: string \| number \| undefined; }` | Description in the calendar header. |
+| `picker-title` | `{ date: string; }` | Title in the calendar header. |
+| `prepend` | `CdsInputSlot` | Adds an element before the input |
+| `prepend-inner` | `CdsInputDefaultSlot` | Slot added at the start of the input |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `cancel` | `() => void` | Cancels the selection, restores the previous value and closes the popup. |
+| `controlRef` | `HTMLElement \| undefined` | Ref to the control of the input |
+| `fieldIconColor` | `string \| undefined` | Icon color |
+| `isDirty` | `boolean` | Whether the input is dirty |
+| `isDisabled` | `boolean` | Whether the input is disabled |
+| `isPure` | `boolean` | Whether the input is pure |
+| `isReadonly` | `boolean` | Whether the input is read-only |
+| `isValid` | `boolean \| null` | Whether the input is valid |
+| `isValidating` | `boolean` | Whether the input is being validated |
+| `reset` | `() => Promise<void>` | Resets the input to its initial state |
+| `resetValidation` | `() => Promise<void>` | Resets the validation of the input |
+| `save` | `() => void` | Confirms the date chosen in the calendar and closes the popup. |
+| `validate` | `(silent?: boolean) => Promise<string[]>` | Validates the input |

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

@@ -0,0 +1,479 @@
+# CdsDateInput — 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 date field: a text field with a calendar icon that opens [CdsDatePicker](../cds-date-picker/api.md) in a dropdown menu on click. The date can be picked with the mouse or typed on the keyboard — the value arrives as a string in the `mask` format (`DD.MM.YYYY` by default).
+
+## Value and format
+
+The date arrives in `v-model` as a string in the `mask` format. By default the placeholder shows the mask itself, so there is no need to state the format separately.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDateInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const date = ref('22.02.2022');
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsDateInput v-model="date" class="w-[250px]" label="Дата" clearable />
+
+    <span class="text-200 text-content-secondary">v-model: {{ date ?? '—' }}</span>
+  </div>
+</template>
+```
+
+## Value and format
+
+`display-format` changes only what the user sees: the model still keeps a string in `mask`. It accepts a mask (`D MMMM YYYY`) or a function receiving the native `Date`. If the date has to be stored differently — in ISO, for example — change `mask`: it defines both the storage and the parsing of the manual input.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDateInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const short = ref('22.02.2022');
+const long = ref('22.02.2022');
+const iso = ref('2022-02-22');
+
+// Функция получает нативную дату и возвращает готовую строку.
+const relative = (date: Date) => new Intl.DateTimeFormat('ru', { dateStyle: 'full' }).format(date).replace(' г.', '');
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsDateInput v-model="short" class="w-[250px]" label="Маска по умолчанию" />
+
+    <CdsDateInput v-model="long" class="w-[250px]" label="displayFormat строкой" display-format="D MMMM YYYY" />
+
+    <CdsDateInput v-model="iso" class="w-[250px]" label="Другая mask" mask="YYYY-MM-DD" />
+
+    <CdsDateInput v-model="short" class="w-[250px]" label="displayFormat функцией" :display-format="relative" />
+  </div>
+</template>
+```
+
+## Date and time
+
+With the time on, the menu does not close on a click on a date: the user is still picking the hours. If you need an explicit finish, add `:hide-actions="false"` — the buttons will stand under the time picker.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDateInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const dateTime = ref('22.02.2022 12:35');
+const withSeconds = ref('22.02.2022 12:35:00');
+const workHours = ref('22.02.2022 10:00');
+
+// Приём заявок только в рабочие часы.
+const allowedHours = Array.from({ length: 9 }, (_, i) => i + 9);
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsDateInput v-model="dateTime" class="w-[250px]" label="Дата и время" with-time clearable />
+
+    <CdsDateInput
+      v-model="withSeconds"
+      class="w-[250px]"
+      label="С секундами и кнопкой «Сейчас»"
+      with-time
+      with-seconds
+      now-btn
+    />
+
+    <CdsDateInput
+      v-model="workHours"
+      class="w-[250px]"
+      label="Только рабочие часы"
+      with-time
+      :allowed-hours="allowedHours"
+      :hide-actions="false"
+    />
+
+    <span class="text-200 text-content-secondary">v-model: {{ dateTime }}</span>
+  </div>
+</template>
+```
+
+## Several dates and a range
+
+`multiple` allows marking several dates — the model becomes an array of strings. `range` switches the calendar to picking a period: the value arrives as a `{ from, to }` object, and the menu stays open until both bounds are chosen. A set of dates and a range have no common time, so `with-time` does not work with them.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDateInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const days = ref(['05.02.2022', '12.02.2022']);
+const period = ref({ from: '07.02.2022', to: '18.02.2022' });
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsDateInput v-model="days" class="w-[250px]" label="Несколько дат" multiple clearable />
+
+    <CdsDateInput v-model="period" class="w-[250px]" label="Период" range clearable />
+
+    <span class="text-200 text-content-secondary">{{ JSON.stringify({ days, period }) }}</span>
+  </div>
+</template>
+```
+
+## Confirmation buttons
+
+By default the chosen date is applied at once and the menu closes. Pass `:hide-actions="false"` — and the choice becomes a draft: it gets into the model only after the "OK" button, while "Cancel" restores the previous value. The component emits `save` and `cancel`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDateInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const date = ref('22.02.2022');
+const lastEvent = ref('—');
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsDateInput
+      v-model="date"
+      class="w-[250px]"
+      label="Дата с подтверждением"
+      :hide-actions="false"
+      @save="lastEvent = `save: ${$event}`"
+      @cancel="lastEvent = 'cancel'"
+    />
+
+    <span class="text-200 text-content-secondary">Последнее событие: {{ lastEvent }}</span>
+  </div>
+</template>
+```
+
+## Confirmation buttons
+
+The `actions` slot replaces the pair of buttons with your own: it receives `save`, `cancel` and `isPristine` — the flag telling that nothing was changed in the calendar.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsDateInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const date = ref('22.02.2022');
+</script>
+
+<template>
+  <div class="flex flex-col items-center">
+    <CdsDateInput v-model="date" class="w-[250px]" label="Дата" :hide-actions="false">
+      <template #actions="{ save, cancel, isPristine }">
+        <div class="flex px-4 pb-4 gap-2 justify-end">
+          <CdsButton appearance="tertiary" size="sm" text="Закрыть" @click="cancel" />
+          <CdsButton size="sm" text="Выбрать дату" :disabled="isPristine" @click="save" />
+        </div>
+      </template>
+    </CdsDateInput>
+  </div>
+</template>
+```
+
+## Manual input
+
+The component does not impose an input mask — add one with a directive, using the lightweight (2.5 KB) [Maska](https://github.com/beholdr/maska) library, for example.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDateInput } from '@central-design-system/components';
+import { vMaska } from 'maska/vue';
+import { ref } from 'vue';
+
+const onBlur = ref('22.02.2022');
+const onEnter = ref('22.02.2022');
+const pickerOnly = ref('22.02.2022');
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsDateInput v-model="onBlur" v-maska="'##.##.####'" class="w-[250px]" label="По уходу фокуса" />
+
+    <CdsDateInput
+      v-model="onEnter"
+      v-maska="'##.##.####'"
+      class="w-[250px]"
+      label="Только по Enter"
+      :update-on="['enter']"
+    />
+
+    <CdsDateInput v-model="pickerOnly" class="w-[250px]" label="Только календарь" :update-on="[]" />
+  </div>
+</template>
+```
+
+## Date restrictions
+
+The calendar props are available right on the field: `allowed-dates` leaves only the needed days available, `min-year-month` and `max-year-month` do not let the navigation go beyond the range.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDateInput } 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 last = new Date(now.getFullYear(), now.getMonth() + 2, 1);
+const min = `${now.getFullYear()}/${pad(now.getMonth() + 1)}`;
+const max = `${last.getFullYear()}/${pad(last.getMonth() + 1)}`;
+
+// Календарь отдаёт дату строкой YYYY/MM/DD.
+const weekdaysOnly = (hash: string) => {
+  const [year, month, day] = hash.split('/').map(Number);
+  const weekday = new Date(year, month - 1, day).getDay();
+
+  return weekday !== 0 && weekday !== 6;
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsDateInput
+      v-model="date"
+      class="w-[250px]"
+      label="Только будни"
+      hint="Навигация ограничена тремя месяцами"
+      persistent-hint
+      :allowed-dates="weekdaysOnly"
+      :min-year-month="min"
+      :max-year-month="max"
+      clearable
+    />
+  </div>
+</template>
+```
+
+## States
+
+`disabled` blocks both the field and the calendar, `readonly` forbids changes but keeps focus and copying, `error-messages` shows an error under the field.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDateInput } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsDateInput class="w-[250px]" label="Обычное" model-value="22.02.2022" />
+
+    <CdsDateInput class="w-[250px]" label="Заблокировано" model-value="22.02.2022" disabled />
+
+    <CdsDateInput class="w-[250px]" label="Только чтение" model-value="22.02.2022" readonly />
+
+    <CdsDateInput class="w-[250px]" label="Ошибка" model-value="22.02.2022" error-messages="Дата уже занята" />
+  </div>
+</template>
+```
+
+## The calendar and the menu
+
+`picker-props` passes settings to the calendar — a header with the summary of the choice, for example, and `menu-props` and `location` control the dropdown menu.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDateInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const withHeader = ref('22.02.2022');
+const above = ref('22.02.2022');
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsDateInput
+      v-model="withHeader"
+      class="w-[250px]"
+      label="Шапка и кнопка «Сегодня»"
+      :picker-props="{ header: true, todayBtn: true }"
+    />
+
+    <CdsDateInput
+      v-model="above"
+      class="w-[250px]"
+      label="Календарь сверху"
+      location="top start"
+      :menu-props="{ offset: 8 }"
+    />
+  </div>
+</template>
+```
+
+## A reporting period
+
+The period lives in one field: `range` gives `{ from, to }`, `:hide-actions="false"` turns the choice into a draft, and the preset buttons write into the same model — the calendar picks their value up.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsDateInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+type Period = { from: string; to: string };
+
+const period = ref<Period | null>({ from: '01.02.2022', to: '28.02.2022' });
+const applied = ref<Period | null>(period.value);
+
+const pad = (value: number) => String(value).padStart(2, '0');
+const format = (date: Date) => `${pad(date.getDate())}.${pad(date.getMonth() + 1)}.${date.getFullYear()}`;
+
+// Быстрый пресет: последние N дней по сегодняшний день.
+function setLastDays(days: number) {
+  const to = new Date();
+  const from = new Date(to.getFullYear(), to.getMonth(), to.getDate() - days + 1);
+
+  period.value = { from: format(from), to: format(to) };
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-[250px] m-auto">
+    <CdsDateInput v-model="period" label="Отчётный период" range clearable :hide-actions="false" />
+
+    <div class="flex justify-center gap-1">
+      <CdsButton appearance="tertiary" size="sm" text="7 дней" @click="setLastDays(7)" />
+      <CdsButton appearance="tertiary" size="sm" text="30 дней" @click="setLastDays(30)" />
+    </div>
+
+    <CdsButton text="Сформировать отчёт" :disabled="!period" @click="applied = period" />
+
+    <span class="text-200 text-center text-content-secondary">
+      {{ applied ? `Отчёт за ${applied.from} — ${applied.to}` : 'Период не выбран' }}
+    </span>
+  </div>
+</template>
+```
+
+## A delivery date
+
+The restrictions work together: `allowed-dates` leaves only the weekdays, `min-year-month` and `max-year-month` — the nearest two months. Manual input is turned off here on purpose: an unavailable day cannot be typed in, and `display-format` shows the date in words.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDateInput } 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 first = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+const last = new Date(now.getFullYear(), now.getMonth() + 2, 0);
+
+const min = `${first.getFullYear()}/${pad(first.getMonth() + 1)}`;
+const max = `${last.getFullYear()}/${pad(last.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 >= first && candidate <= last;
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-[250px] m-auto">
+    <CdsDateInput
+      v-model="date"
+      label="Дата доставки"
+      display-format="D MMMM YYYY"
+      :allowed-dates="allowedDates"
+      :min-year-month="min"
+      :max-year-month="max"
+      :update-on="[]"
+      clearable
+    />
+
+    <span class="text-200 text-center text-content-secondary">
+      {{ date ? `Привезём ${date} с 10:00 до 18:00` : 'Выберите дату доставки' }}
+    </span>
+  </div>
+</template>
+```
+
+## A date in a form
+
+The field takes part in [CdsForm](../cds-form/api.md) on a par with the others: `rules` receive the same string value that lies in the model, so a "not in the past" check is a plain function. Limiting the navigation through `min-year-month` backs the rule up rather than replaces it.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDateInput, CdsForm, CdsTextInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const name = ref('');
+const date = ref<string | null>(null);
+
+const pad = (value: number) => String(value).padStart(2, '0');
+const now = new Date();
+const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+
+const rules = {
+  required: (value: unknown) => !!value || 'Обязательное поле',
+  future: (value: string | null) => {
+    if (!value) return true;
+
+    const [day, month, year] = value.split('.').map(Number);
+
+    return new Date(year, month - 1, day) >= today || 'Дата не может быть в прошлом';
+  }
+};
+
+const minYearMonth = `${today.getFullYear()}/${pad(today.getMonth() + 1)}`;
+</script>
+
+<template>
+  <CdsForm class="flex flex-col gap-2 w-[250px] m-auto">
+    <CdsTextInput
+      v-model="name"
+      label="Название встречи"
+      placeholder="Введите название встречи"
+      :rules="[rules.required]"
+    />
+
+    <CdsDateInput
+      v-model="date"
+      label="Дата встречи"
+      :rules="[rules.required, rules.future]"
+      :min-year-month="minYearMonth"
+      clearable
+    />
+  </CdsForm>
+</template>
+```

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

@@ -0,0 +1,10 @@
+# CdsDateInput — 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 dates are turned off through allowed-dates — a past day cannot be picked. | Any day can be picked, and the user learns about the restriction from an error only after submitting the form. |
+| One period in one field: the bounds are visible side by side and are edited together. | Two separate fields let the end be set before the start — that has to be checked by hand. |
+| The input mask is hinted in the placeholder, and the field accepts both the keyboard and the calendar. | Manual input is turned off for no reason: a date from an email has to be hunted for in the calendar by clicking. |

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

@@ -0,0 +1,16 @@
+# CdsDateInput — 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.
+
+## _CdsDateInput.variables.scss
+
+```scss
+// Токены 3-го уровня: только CSS-переменные дизайн-системы, без хардкода.
+$date-input-actions-gap: var(--cds-spacing-200) !default;
+$date-input-actions-justify: flex-end !default;
+
+// Совпадает с внутренним отступом календаря, чтобы кнопки встали по его сетке.
+$date-input-actions-padding: 0 var(--cds-spacing-300) var(--cds-spacing-300) !default;
+```