@archytechtor/ui 0.0.0-stage → 0.1.0

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;

package/dist/components/item/item.js

@@ -0,0 +1,149 @@
+import { cn } from "../../lib/utils.js";
+import { Separator } from "../separator/separator.js";
+import { itemMediaVariants, itemVariants } from "./types.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/item/item.tsx
+/**
+* Группа элементов: список с role="list"
+* @param props - пропсы группы
+* @returns список элементов
+*/
+function ItemGroup({ className, ...props }) {
+	const classes = cn("group/item-group", "flex", "w-full", "flex-col", "gap-4", "has-data-[size=sm]:gap-2.5", "has-data-[size=xs]:gap-2", className);
+	return /* @__PURE__ */ jsx("div", {
+		role: "list",
+		"data-slot": "item-group",
+		className: classes,
+		...props
+	});
+}
+/**
+* Разделитель между элементами группы
+* @param props - пропсы разделителя
+* @returns горизонтальная линия
+*/
+function ItemSeparator({ className, ...props }) {
+	const classes = cn("my-2", className);
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "item-separator",
+		orientation: "horizontal",
+		className: classes,
+		...props
+	});
+}
+/**
+* Элемент: строка списка с медиа, заголовком, описанием и действиями
+* @param props - пропсы элемента
+* @returns элемент или дочерний элемент в его стилях (render)
+*/
+function Item({ className, variant = "default", size = "default", render, ...props }) {
+	const classes = cn(itemVariants({
+		variant,
+		size
+	}), className);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "item",
+			"data-variant": variant,
+			"data-size": size,
+			className: classes
+		}, props)
+	});
+}
+/**
+* Медиа элемента: иконка, аватар или изображение слева
+* @param props - пропсы медиа
+* @returns блок медиа
+*/
+function ItemMedia({ className, variant = "default", ...props }) {
+	const classes = cn(itemMediaVariants({ variant }), className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-media",
+		"data-variant": variant,
+		className: classes,
+		...props
+	});
+}
+/**
+* Содержимое элемента: заголовок и описание
+* @param props - пропсы содержимого
+* @returns колонка содержимого
+*/
+function ItemContent({ className, ...props }) {
+	const classes = cn("flex", "flex-1", "flex-col", "gap-1", "group-data-[size=xs]/item:gap-0", "[&+[data-slot=item-content]]:flex-none", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-content",
+		className: classes,
+		...props
+	});
+}
+/**
+* Заголовок элемента: одна строка
+* @param props - пропсы заголовка
+* @returns заголовок
+*/
+function ItemTitle({ className, ...props }) {
+	const classes = cn("line-clamp-1", "flex", "w-fit", "items-center", "gap-2", "text-sm", "leading-snug", "font-medium", "underline-offset-4", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-title",
+		className: classes,
+		...props
+	});
+}
+/**
+* Описание элемента: до двух строк приглушённым текстом
+* @param props - пропсы описания
+* @returns описание
+*/
+function ItemDescription({ className, ...props }) {
+	const classes = cn("line-clamp-2", "text-left", "text-sm", "leading-normal", "font-normal", "text-muted-foreground", "group-data-[size=xs]/item:text-xs", "[&>a]:underline", "[&>a]:underline-offset-4", "[&>a:hover]:text-primary", className);
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "item-description",
+		className: classes,
+		...props
+	});
+}
+/**
+* Действия элемента: кнопки, иконка перехода справа
+* @param props - пропсы действий
+* @returns блок действий
+*/
+function ItemActions({ className, ...props }) {
+	const classes = cn("flex", "items-center", "gap-2", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-actions",
+		className: classes,
+		...props
+	});
+}
+/**
+* Шапка элемента: строка во всю ширину над содержимым
+* @param props - пропсы шапки
+* @returns шапка
+*/
+function ItemHeader({ className, ...props }) {
+	const classes = cn("flex", "basis-full", "items-center", "justify-between", "gap-2", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-header",
+		className: classes,
+		...props
+	});
+}
+/**
+* Подвал элемента: строка во всю ширину под содержимым
+* @param props - пропсы подвала
+* @returns подвал
+*/
+function ItemFooter({ className, ...props }) {
+	const classes = cn("flex", "basis-full", "items-center", "justify-between", "gap-2", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-footer",
+		className: classes,
+		...props
+	});
+}
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };

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

@@ -0,0 +1,75 @@
+import { SeparatorPropsT } from "../separator/types.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * Стили элемента списка: вариант оформления и размер.
+ * Ссылка (render={<a />}) подсвечивается фоном при наведении
+ */
+export declare const itemVariants: (props?: ({
+  variant?: "default" | "outline" | "muted" | null | undefined;
+  size?: "default" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Стили медиа элемента: без оформления, иконка или изображение
+ */
+export declare const itemMediaVariants: (props?: ({
+  variant?: "image" | "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Варианты оформления и размеры элемента
+ */
+type ItemVariantsT = VariantProps<typeof itemVariants>;
+/**
+ * Варианты медиа элемента
+ */
+type ItemMediaVariantsT = VariantProps<typeof itemMediaVariants>;
+/**
+ * Пропсы группы элементов
+ */
+export type ItemGroupPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы разделителя между элементами
+ */
+export type ItemSeparatorPropsT = SeparatorPropsT;
+/**
+ * Пропсы элемента
+ */
+export type ItemPropsT = useRender.ComponentProps<'div'> & {
+  /** Оформление: default — без рамки и фона, outline — с рамкой, muted — с приглушённым фоном */
+  variant?: ItemVariantsT['variant'];
+  /** Размер: default, sm или xs — компактнее отступы и медиа */
+  size?: ItemVariantsT['size'];
+};
+/**
+ * Пропсы медиа элемента
+ */
+export type ItemMediaPropsT = ComponentProps<'div'> & {
+  /** Оформление: default — без оформления, icon — иконка 16px, image — изображение 40px со скруглением */
+  variant?: ItemMediaVariantsT['variant'];
+};
+/**
+ * Пропсы содержимого элемента
+ */
+export type ItemContentPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы заголовка элемента
+ */
+export type ItemTitlePropsT = ComponentProps<'div'>;
+/**
+ * Пропсы описания элемента
+ */
+export type ItemDescriptionPropsT = ComponentProps<'p'>;
+/**
+ * Пропсы действий элемента
+ */
+export type ItemActionsPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы шапки элемента
+ */
+export type ItemHeaderPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы подвала элемента
+ */
+export type ItemFooterPropsT = ComponentProps<'div'>;
+export {};