@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/image-gallery/types.d.ts

@@ -0,0 +1,80 @@
+import { ComponentProps } from "react";
+/**
+ * Изображение галереи
+ * @property src - адрес изображения
+ * @property alt - описание для скринридера
+ * @property width - исходная ширина, по ней считаются пропорции плитки
+ * @property height - исходная высота, по ней считаются пропорции плитки
+ */
+export interface ImageGalleryImageI {
+  src: string;
+  alt: string;
+  width?: number;
+  height?: number;
+}
+/**
+ * Число колонок на разной ширине галереи
+ * @property desktop - от 768px, по умолчанию 3
+ * @property tablet - от 480px до 768px, по умолчанию 2
+ * @property mobile - уже 480px, по умолчанию 1
+ */
+export interface ImageGalleryColumnsI {
+  desktop?: number;
+  tablet?: number;
+  mobile?: number;
+}
+/**
+ * Пропсы галереи
+ */
+export type ImageGalleryPropsT = Omit<ComponentProps<'div'>, 'children'> & {
+  /** Изображения галереи */
+  images: ImageGalleryImageI[];
+  /** Промежуток между изображениями, px. По умолчанию 16 */
+  gap?: number;
+  /** Число колонок для узкой, средней и широкой галереи. По умолчанию 1, 2 и 3 */
+  columns?: ImageGalleryColumnsI;
+  /** Загружать изображения, только когда они приближаются к видимой области. По умолчанию включено */
+  lazyLoading?: boolean;
+  /** Показывать только подходящие изображения */
+  filterImages?: (image: ImageGalleryImageI, index: number) => boolean;
+  /** Порядок изображений */
+  sortImages?: (first: ImageGalleryImageI, second: ImageGalleryImageI) => number;
+  /** Нажатие на изображение в сетке */
+  onImageClick?: (image: ImageGalleryImageI, index: number) => void;
+  /** Подпись кнопки открытия изображения для скринридера, по умолчанию «Открыть изображение» */
+  openLabel?: string;
+  /** Подпись закрытия просмотра для скринридера, по умолчанию «Закрыть» */
+  closeLabel?: string;
+  /** Классы плитки изображения */
+  itemClassName?: string;
+  /** Классы увеличенного изображения */
+  viewerClassName?: string;
+  /** Классы затемнения под увеличенным изображением */
+  backdropClassName?: string;
+};
+/**
+ * Изображение с позицией и размером в сетке
+ * @property image - исходное изображение
+ * @property index - номер изображения в переданном списке
+ * @property x - отступ слева, px
+ * @property y - отступ сверху, px
+ * @property width - ширина плитки, px
+ * @property height - высота плитки, px
+ */
+export interface MasonryItemI {
+  image: ImageGalleryImageI;
+  index: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+/**
+ * Раскладка сетки
+ * @property items - плитки с позициями
+ * @property height - общая высота сетки, px
+ */
+export interface MasonryLayoutI {
+  items: MasonryItemI[];
+  height: number;
+}

package/dist/components/input/index.d.ts

@@ -0,0 +1,3 @@
+import { InputPropsT, InputTypeT } from "./types.js";
+import { Input } from "./input.js";
+export { Input, type InputPropsT, type InputTypeT };

package/dist/components/input/index.js

@@ -0,0 +1 @@
+export { Input } from "./input.js";

package/dist/components/input/input.d.ts

@@ -0,0 +1,7 @@
+import { InputPropsT } from "./types.js";
+/**
+ * Однострочное поле ввода
+ * @param props - пропсы поля
+ * @returns элемент input
+ */
+export declare function Input({ className, type, ...props }: InputPropsT): import("react").JSX.Element;

package/dist/components/input/input.js

@@ -0,0 +1,18 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/input/input.tsx
+/**
+* Однострочное поле ввода
+* @param props - пропсы поля
+* @returns элемент input
+*/
+function Input({ className, type, ...props }) {
+	const classes = cn("h-8", "w-full", "min-w-0", "rounded-lg", "border", "border-input", "bg-transparent", "px-2.5", "py-1", "text-base", "transition-colors", "outline-none", "file:inline-flex", "file:h-6", "file:border-0", "file:bg-transparent", "file:text-sm", "file:font-medium", "file:text-foreground", "placeholder:text-muted-foreground", "focus-visible:border-ring", "focus-visible:ring-3", "focus-visible:ring-ring/50", "disabled:cursor-not-allowed", "disabled:bg-input/50", "disabled:opacity-50", "aria-invalid:border-destructive", "aria-invalid:ring-3", "aria-invalid:ring-destructive/20", "md:text-sm", "dark:bg-input/30", "dark:disabled:bg-input/80", "dark:aria-invalid:border-destructive/50", "dark:aria-invalid:ring-destructive/40", className);
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		"data-slot": "input",
+		className: classes,
+		...props
+	});
+}
+export { Input };

package/dist/components/input/types.d.ts

@@ -0,0 +1,28 @@
+import { ChangeEvent, ComponentProps } from "react";
+/**
+ * Тип поля ввода: все значения атрибута type у input
+ */
+export type InputTypeT = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url' | 'file' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color' | 'range' | 'checkbox' | 'radio' | 'hidden' | 'button' | 'submit' | 'reset' | 'image';
+/**
+ * Пропсы поля ввода
+ */
+export type InputPropsT = Omit<ComponentProps<'input'>, 'type' | 'value' | 'defaultValue' | 'placeholder' | 'disabled' | 'readOnly' | 'required' | 'aria-invalid' | 'onChange'> & {
+  /** Тип поля: text, email, password, number, search, tel, url, file и другие */
+  type?: InputTypeT;
+  /** Значение поля — контролируемый режим, вместе с onChange */
+  value?: string | number;
+  /** Значение при первом рендере — неконтролируемый режим */
+  defaultValue?: string | number;
+  /** Подсказка о формате, пока поле пустое */
+  placeholder?: string;
+  /** Отключённое состояние: поле нельзя изменить и выделить, оно не отправляется с формой */
+  disabled?: boolean;
+  /** Только для чтения: значение видно и выделяется, но не меняется */
+  readOnly?: boolean;
+  /** Обязательное поле: форма не отправится, пока оно пустое */
+  required?: boolean;
+  /** Ошибка: красная рамка и объявление скринридеру, что значение неверное */
+  'aria-invalid'?: boolean;
+  /** Значение изменилось */
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+};

package/dist/components/input-group/index.d.ts

@@ -0,0 +1,3 @@
+import { InputGroupAddonPropsT, InputGroupAlignT, InputGroupButtonPropsT, InputGroupButtonSizeT, InputGroupInputPropsT, InputGroupPropsT, InputGroupTextPropsT, InputGroupTextareaPropsT, inputGroupAddonVariants, inputGroupButtonVariants } from "./types.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./input-group.js";
+export { InputGroup, InputGroupAddon, type InputGroupAddonPropsT, type InputGroupAlignT, InputGroupButton, type InputGroupButtonPropsT, type InputGroupButtonSizeT, InputGroupInput, type InputGroupInputPropsT, type InputGroupPropsT, InputGroupText, type InputGroupTextPropsT, InputGroupTextarea, type InputGroupTextareaPropsT, inputGroupAddonVariants, inputGroupButtonVariants };

package/dist/components/input-group/index.js

@@ -0,0 +1,3 @@
+import { inputGroupAddonVariants, inputGroupButtonVariants } from "./types.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./input-group.js";
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants };

package/dist/components/input-group/input-group.d.ts

@@ -0,0 +1,37 @@
+import { InputGroupAddonPropsT, InputGroupButtonPropsT, InputGroupInputPropsT, InputGroupPropsT, InputGroupTextPropsT, InputGroupTextareaPropsT } from "./types.js";
+/**
+ * Группа поля: поле ввода с иконками, текстом и кнопками внутри общей рамки
+ * @param props - пропсы группы
+ * @returns div с role="group"
+ */
+export declare function InputGroup({ className, ...props }: InputGroupPropsT): import("react").JSX.Element;
+/**
+ * Дополнение: иконка, текст или кнопки внутри рамки. Нажатие ставит фокус в поле
+ * @param props - пропсы дополнения
+ * @returns div с role="group"
+ */
+export declare function InputGroupAddon({ className, align, onClick, ...props }: InputGroupAddonPropsT): import("react").JSX.Element;
+/**
+ * Кнопка в группе: компактная, по умолчанию ghost
+ * @param props - пропсы кнопки; по умолчанию type="button", variant="ghost", size="xs"
+ * @returns кнопка
+ */
+export declare function InputGroupButton({ className, type, variant, size, ...props }: InputGroupButtonPropsT): import("react").JSX.Element;
+/**
+ * Текст в группе: префикс или суффикс поля (₽, https://, @example.ru)
+ * @param props - пропсы текста
+ * @returns span
+ */
+export declare function InputGroupText({ className, ...props }: InputGroupTextPropsT): import("react").JSX.Element;
+/**
+ * Поле в группе: Input без своей рамки, рамку рисует группа
+ * @param props - пропсы поля
+ * @returns input
+ */
+export declare function InputGroupInput({ className, ...props }: InputGroupInputPropsT): import("react").JSX.Element;
+/**
+ * Многострочное поле в группе: Textarea без своей рамки
+ * @param props - пропсы поля
+ * @returns textarea
+ */
+export declare function InputGroupTextarea({ className, ...props }: InputGroupTextareaPropsT): import("react").JSX.Element;

package/dist/components/input-group/input-group.js

@@ -0,0 +1,103 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { Input } from "../input/input.js";
+import { Textarea } from "../textarea/textarea.js";
+import { inputGroupAddonVariants, inputGroupButtonVariants } from "./types.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/input-group/input-group.tsx
+/**
+* Группа поля: поле ввода с иконками, текстом и кнопками внутри общей рамки
+* @param props - пропсы группы
+* @returns div с role="group"
+*/
+function InputGroup({ className, ...props }) {
+	const classes = cn("group/input-group", "relative", "flex", "h-8", "w-full", "min-w-0", "items-center", "rounded-lg", "border", "border-input", "transition-colors", "outline-none", "has-[>textarea]:h-auto", "dark:bg-input/30", "keyboard:has-[[data-slot=input-group-control]:focus-visible]:border-ring", "keyboard:has-[[data-slot=input-group-control]:focus-visible]:ring-3", "keyboard:has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50", "has-[[data-slot][aria-invalid=true]]:border-destructive", "has-[[data-slot][aria-invalid=true]]:ring-3", "has-[[data-slot][aria-invalid=true]]:ring-destructive/20", "dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", "has-[[data-slot=input-group-control]:disabled]:bg-input/50", "has-[[data-slot=input-group-control]:disabled]:opacity-50", "dark:has-[[data-slot=input-group-control]:disabled]:bg-input/80", "keyboard:in-data-[slot=combobox-content]:focus-within:border-inherit", "keyboard:in-data-[slot=combobox-content]:focus-within:ring-0", "has-[>[data-align=block-end]]:h-auto", "has-[>[data-align=block-end]]:flex-col", "has-[>[data-align=block-start]]:h-auto", "has-[>[data-align=block-start]]:flex-col", "has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=inline-end]]:[&>input]:pr-1.5", "has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: classes,
+		...props
+	});
+}
+/**
+* Дополнение: иконка, текст или кнопки внутри рамки. Нажатие ставит фокус в поле
+* @param props - пропсы дополнения
+* @returns div с role="group"
+*/
+function InputGroupAddon({ className, align = "inline-start", onClick, ...props }) {
+	const classes = cn(inputGroupAddonVariants({ align }), className);
+	/**
+	* Нажатие мимо кнопок ставит фокус в поле группы
+	* @param event - событие нажатия
+	*/
+	const focusInput = (event) => {
+		onClick?.(event);
+		const target = event.target;
+		if (event.defaultPrevented || target.closest("button")) return;
+		event.currentTarget.parentElement?.querySelector("input")?.focus();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: classes,
+		onClick: focusInput,
+		...props
+	});
+}
+/**
+* Кнопка в группе: компактная, по умолчанию ghost
+* @param props - пропсы кнопки; по умолчанию type="button", variant="ghost", size="xs"
+* @returns кнопка
+*/
+function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
+	const classes = cn(inputGroupButtonVariants({ size }), className);
+	return /* @__PURE__ */ jsx(Button, {
+		type,
+		"data-size": size,
+		variant,
+		className: classes,
+		...props
+	});
+}
+/**
+* Текст в группе: префикс или суффикс поля (₽, https://, @example.ru)
+* @param props - пропсы текста
+* @returns span
+*/
+function InputGroupText({ className, ...props }) {
+	const classes = cn("flex", "items-center", "gap-2", "text-sm", "text-muted-foreground", "[&_svg]:pointer-events-none", "[&_svg:not([class*=size-])]:size-4", className);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "input-group-text",
+		className: classes,
+		...props
+	});
+}
+/**
+* Поле в группе: Input без своей рамки, рамку рисует группа
+* @param props - пропсы поля
+* @returns input
+*/
+function InputGroupInput({ className, ...props }) {
+	const classes = cn("flex-1", "rounded-none", "border-0", "bg-transparent", "shadow-none", "ring-0", "focus-visible:ring-0", "disabled:bg-transparent", "aria-invalid:ring-0", "dark:bg-transparent", "dark:disabled:bg-transparent", className);
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input-group-control",
+		className: classes,
+		...props
+	});
+}
+/**
+* Многострочное поле в группе: Textarea без своей рамки
+* @param props - пропсы поля
+* @returns textarea
+*/
+function InputGroupTextarea({ className, ...props }) {
+	const classes = cn("flex-1", "resize-none", "rounded-none", "border-0", "bg-transparent", "py-2", "shadow-none", "ring-0", "focus-visible:ring-0", "disabled:bg-transparent", "aria-invalid:ring-0", "dark:bg-transparent", "dark:disabled:bg-transparent", className);
+	return /* @__PURE__ */ jsx(Textarea, {
+		"data-slot": "input-group-control",
+		className: classes,
+		...props
+	});
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/components/input-group/types.d.ts

@@ -0,0 +1,64 @@
+import { ButtonPropsT } from "../button/types.js";
+import { InputPropsT } from "../input/types.js";
+import { TextareaPropsT } from "../textarea/types.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+/**
+ * Пропсы группы поля
+ */
+export type InputGroupPropsT = ComponentProps<'div'>;
+/**
+ * Стили дополнения: где оно стоит относительно поля
+ */
+export declare const inputGroupAddonVariants: (props?: ({
+  align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Варианты стилей дополнения
+ */
+type InputGroupAddonVariantsT = VariantProps<typeof inputGroupAddonVariants>;
+/**
+ * Положение дополнения: inline — слева или справа в строке, block — сверху или снизу
+ */
+export type InputGroupAlignT = NonNullable<InputGroupAddonVariantsT['align']>;
+/**
+ * Пропсы дополнения
+ */
+export type InputGroupAddonPropsT = ComponentProps<'div'> & {
+  /** Положение: inline-start — слева, inline-end — справа, block-start — сверху, block-end — снизу */
+  align?: InputGroupAlignT;
+};
+/**
+ * Стили кнопки в группе: размер
+ */
+export declare const inputGroupButtonVariants: (props?: ({
+  size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Варианты стилей кнопки в группе
+ */
+type InputGroupButtonVariantsT = VariantProps<typeof inputGroupButtonVariants>;
+/**
+ * Размер кнопки в группе
+ */
+export type InputGroupButtonSizeT = NonNullable<InputGroupButtonVariantsT['size']>;
+/**
+ * Пропсы кнопки в группе
+ */
+export type InputGroupButtonPropsT = Omit<ButtonPropsT, 'size'> & {
+  /** Размер: xs и sm — с текстом, icon-xs и icon-sm — только иконка */
+  size?: InputGroupButtonSizeT;
+};
+/**
+ * Пропсы текста в группе
+ */
+export type InputGroupTextPropsT = ComponentProps<'span'>;
+/**
+ * Пропсы поля в группе
+ */
+export type InputGroupInputPropsT = InputPropsT;
+/**
+ * Пропсы многострочного поля в группе
+ */
+export type InputGroupTextareaPropsT = TextareaPropsT;
+export {};

package/dist/components/input-group/types.js

@@ -0,0 +1,31 @@
+import { cva } from "class-variance-authority";
+// src/components/input-group/types.ts
+/**
+* Стили дополнения: где оно стоит относительно поля
+*/
+const inputGroupAddonVariants = cva([
+	"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none",
+	"group-data-[disabled=true]/input-group:opacity-50",
+	"[&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*=size-])]:size-4"
+], {
+	variants: { align: {
+		"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+		"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+		"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+		"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+/**
+* Стили кнопки в группе: размер
+*/
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+	variants: { size: {
+		"xs": "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*=size-])]:size-3.5",
+		"sm": "",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+export { inputGroupAddonVariants, inputGroupButtonVariants };

package/dist/components/input-otp/index.d.ts

@@ -0,0 +1,3 @@
+import { InputOTPGroupPropsT, InputOTPPropsT, InputOTPSeparatorPropsT, InputOTPSlotPropsT, InputOTPValidationT } from "./types.js";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "./input-otp.js";
+export { InputOTP, InputOTPGroup, type InputOTPGroupPropsT, type InputOTPPropsT, InputOTPSeparator, type InputOTPSeparatorPropsT, InputOTPSlot, type InputOTPSlotPropsT, type InputOTPValidationT };

package/dist/components/input-otp/index.js

@@ -0,0 +1 @@
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "./input-otp.js";

package/dist/components/input-otp/input-otp.d.ts

@@ -0,0 +1,25 @@
+import { InputOTPGroupPropsT, InputOTPPropsT, InputOTPSeparatorPropsT, InputOTPSlotPropsT } from "./types.js";
+/**
+ * Поле одноразового кода: ячейки по символу, вставка кода целиком, автозаполнение из СМС
+ * @param props - пропсы поля; maxLength — длина кода, дочерние InputOTPGroup и InputOTPSlot — ячейки
+ * @returns поле
+ */
+export declare function InputOTP({ className, maxLength, validationType, onValueChange, onComplete, ...props }: InputOTPPropsT): import("react").JSX.Element;
+/**
+ * Группа ячеек: ячейки стоят вплотную с общей рамкой
+ * @param props - пропсы группы
+ * @returns div
+ */
+export declare function InputOTPGroup({ className, ...props }: InputOTPGroupPropsT): import("react").JSX.Element;
+/**
+ * Ячейка: поле для одного символа кода, активная подсвечена рамкой
+ * @param props - пропсы ячейки
+ * @returns input
+ */
+export declare function InputOTPSlot({ index, className, ...props }: InputOTPSlotPropsT): import("react").JSX.Element;
+/**
+ * Разделитель между группами ячеек: короткая черта
+ * @param props - пропсы разделителя
+ * @returns div с role="separator"
+ */
+export declare function InputOTPSeparator(props: InputOTPSeparatorPropsT): import("react").JSX.Element;

package/dist/components/input-otp/input-otp.js

@@ -0,0 +1,76 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { MinusIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { OTPField } from "@base-ui/react/otp-field";
+// src/components/input-otp/input-otp.tsx
+/**
+* Поле одноразового кода: ячейки по символу, вставка кода целиком, автозаполнение из СМС
+* @param props - пропсы поля; maxLength — длина кода, дочерние InputOTPGroup и InputOTPSlot — ячейки
+* @returns поле
+*/
+function InputOTP({ className, maxLength, validationType = "numeric", onValueChange, onComplete, ...props }) {
+	const classes = cn("flex", "items-center", "gap-2", "has-disabled:opacity-50", className);
+	/**
+	* Код изменился: наружу только значение
+	* @param value - код
+	*/
+	const handleValueChange = (value) => onValueChange?.(value);
+	/**
+	* Код введён целиком: наружу только значение
+	* @param value - код
+	*/
+	const handleValueComplete = (value) => onComplete?.(value);
+	return /* @__PURE__ */ jsx(OTPField.Root, {
+		"data-slot": "input-otp",
+		length: maxLength,
+		validationType,
+		autoComplete: "one-time-code",
+		className: classes,
+		onValueChange: handleValueChange,
+		onValueComplete: handleValueComplete,
+		...props
+	});
+}
+/**
+* Группа ячеек: ячейки стоят вплотную с общей рамкой
+* @param props - пропсы группы
+* @returns div
+*/
+function InputOTPGroup({ className, ...props }) {
+	const classes = cn("flex", "items-center", "rounded-lg", "has-aria-invalid:border-destructive", "has-aria-invalid:ring-3", "has-aria-invalid:ring-destructive/20", "dark:has-aria-invalid:ring-destructive/40", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-group",
+		className: classes,
+		...props
+	});
+}
+/**
+* Ячейка: поле для одного символа кода, активная подсвечена рамкой
+* @param props - пропсы ячейки
+* @returns input
+*/
+function InputOTPSlot({ index, className, ...props }) {
+	const classes = cn("relative", "flex", "size-8", "items-center", "justify-center", "border-y", "border-r", "border-input", "bg-transparent", "text-center", "text-sm", "caret-foreground", "transition-all", "outline-none", "first:rounded-l-lg", "first:border-l", "last:rounded-r-lg", "dark:bg-input/30", "focus:z-10", "focus-visible:border-ring", "focus-visible:ring-3", "focus-visible:ring-ring/50", "aria-invalid:border-destructive", "focus-visible:aria-invalid:border-destructive", "focus-visible:aria-invalid:ring-destructive/20", "dark:focus-visible:aria-invalid:ring-destructive/40", "disabled:cursor-not-allowed", className);
+	return /* @__PURE__ */ jsx(OTPField.Input, {
+		"data-slot": "input-otp-slot",
+		"data-index": index,
+		className: classes,
+		...props
+	});
+}
+/**
+* Разделитель между группами ячеек: короткая черта
+* @param props - пропсы разделителя
+* @returns div с role="separator"
+*/
+function InputOTPSeparator(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-separator",
+		role: "separator",
+		className: "flex items-center [&_svg:not([class*=size-])]:size-4",
+		...props,
+		children: /* @__PURE__ */ jsx(MinusIcon, {})
+	});
+}
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/components/input-otp/types.d.ts

@@ -0,0 +1,43 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { ComponentProps } from "react";
+import { OTPField } from "@base-ui/react/otp-field";
+/**
+ * Какие символы можно вводить: numeric — цифры, alpha — буквы, alphanumeric — цифры и буквы, none — любые
+ */
+export type InputOTPValidationT = 'numeric' | 'alpha' | 'alphanumeric' | 'none';
+/**
+ * Пропсы поля одноразового кода
+ */
+export type InputOTPPropsT = PartPropsT<Omit<OTPField.Root.Props, 'length' | 'onValueChange' | 'onValueComplete'>> & {
+  /** Длина кода: сколько ячеек */
+  maxLength: number;
+  /** Какие символы можно вводить. По умолчанию numeric — только цифры */
+  validationType?: InputOTPValidationT;
+  /** Код — контролируемый режим, вместе с onValueChange */
+  value?: string;
+  /** Код при первом рендере — неконтролируемый режим */
+  defaultValue?: string;
+  /** Код изменился */
+  onValueChange?: (value: string) => void;
+  /** Код введён целиком */
+  onComplete?: (value: string) => void;
+  /** Отключить поле */
+  disabled?: boolean;
+  /** Скрыть символы точками, как пароль */
+  mask?: boolean;
+};
+/**
+ * Пропсы группы ячеек
+ */
+export type InputOTPGroupPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы ячейки
+ */
+export type InputOTPSlotPropsT = PartPropsT<OTPField.Input.Props> & {
+  /** Номер символа в коде, с нуля. Ячейки нумеруются по порядку сами, проп оставлен для читаемости разметки */
+  index?: number;
+};
+/**
+ * Пропсы разделителя
+ */
+export type InputOTPSeparatorPropsT = ComponentProps<'div'>;

package/dist/components/item/index.d.ts

@@ -0,0 +1,3 @@
+import { ItemActionsPropsT, ItemContentPropsT, ItemDescriptionPropsT, ItemFooterPropsT, ItemGroupPropsT, ItemHeaderPropsT, ItemMediaPropsT, ItemPropsT, ItemSeparatorPropsT, ItemTitlePropsT, itemMediaVariants, itemVariants } from "./types.js";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle } from "./item.js";
+export { Item, ItemActions, type ItemActionsPropsT, ItemContent, type ItemContentPropsT, ItemDescription, type ItemDescriptionPropsT, ItemFooter, type ItemFooterPropsT, ItemGroup, type ItemGroupPropsT, ItemHeader, type ItemHeaderPropsT, ItemMedia, type ItemMediaPropsT, type ItemPropsT, ItemSeparator, type ItemSeparatorPropsT, ItemTitle, type ItemTitlePropsT, itemMediaVariants, itemVariants };

package/dist/components/item/index.js

@@ -0,0 +1,3 @@
+import { itemMediaVariants, itemVariants } from "./types.js";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle } from "./item.js";
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, itemMediaVariants, itemVariants };

package/dist/components/item/item.d.ts

@@ -0,0 +1,61 @@
+import { ItemActionsPropsT, ItemContentPropsT, ItemDescriptionPropsT, ItemFooterPropsT, ItemGroupPropsT, ItemHeaderPropsT, ItemMediaPropsT, ItemPropsT, ItemSeparatorPropsT, ItemTitlePropsT } from "./types.js";
+/**
+ * Группа элементов: список с role="list"
+ * @param props - пропсы группы
+ * @returns список элементов
+ */
+export declare function ItemGroup({ className, ...props }: ItemGroupPropsT): import("react").JSX.Element;
+/**
+ * Разделитель между элементами группы
+ * @param props - пропсы разделителя
+ * @returns горизонтальная линия
+ */
+export declare function ItemSeparator({ className, ...props }: ItemSeparatorPropsT): import("react").JSX.Element;
+/**
+ * Элемент: строка списка с медиа, заголовком, описанием и действиями
+ * @param props - пропсы элемента
+ * @returns элемент или дочерний элемент в его стилях (render)
+ */
+export declare function Item({ className, variant, size, render, ...props }: ItemPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Медиа элемента: иконка, аватар или изображение слева
+ * @param props - пропсы медиа
+ * @returns блок медиа
+ */
+export declare function ItemMedia({ className, variant, ...props }: ItemMediaPropsT): import("react").JSX.Element;
+/**
+ * Содержимое элемента: заголовок и описание
+ * @param props - пропсы содержимого
+ * @returns колонка содержимого
+ */
+export declare function ItemContent({ className, ...props }: ItemContentPropsT): import("react").JSX.Element;
+/**
+ * Заголовок элемента: одна строка
+ * @param props - пропсы заголовка
+ * @returns заголовок
+ */
+export declare function ItemTitle({ className, ...props }: ItemTitlePropsT): import("react").JSX.Element;
+/**
+ * Описание элемента: до двух строк приглушённым текстом
+ * @param props - пропсы описания
+ * @returns описание
+ */
+export declare function ItemDescription({ className, ...props }: ItemDescriptionPropsT): import("react").JSX.Element;
+/**
+ * Действия элемента: кнопки, иконка перехода справа
+ * @param props - пропсы действий
+ * @returns блок действий
+ */
+export declare function ItemActions({ className, ...props }: ItemActionsPropsT): import("react").JSX.Element;
+/**
+ * Шапка элемента: строка во всю ширину над содержимым
+ * @param props - пропсы шапки
+ * @returns шапка
+ */
+export declare function ItemHeader({ className, ...props }: ItemHeaderPropsT): import("react").JSX.Element;
+/**
+ * Подвал элемента: строка во всю ширину под содержимым
+ * @param props - пропсы подвала
+ * @returns подвал
+ */
+export declare function ItemFooter({ className, ...props }: ItemFooterPropsT): import("react").JSX.Element;