@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/field/field.js

@@ -0,0 +1,173 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Separator } from "../separator/separator.js";
+import { Label } from "../label/label.js";
+import { fieldVariants } from "./types.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/field/field.tsx
+/**
+* Набор полей: fieldset с заголовком FieldLegend
+* @param props - пропсы набора
+* @returns fieldset
+*/
+function FieldSet({ className, ...props }) {
+	const classes = cn("flex", "flex-col", "gap-4", "has-[>[data-slot=checkbox-group]]:gap-3", "has-[>[data-slot=radio-group]]:gap-3", className);
+	return /* @__PURE__ */ jsx("fieldset", {
+		"data-slot": "field-set",
+		className: classes,
+		...props
+	});
+}
+/**
+* Заголовок набора полей
+* @param props - пропсы заголовка
+* @returns legend
+*/
+function FieldLegend({ className, variant = "legend", ...props }) {
+	const classes = cn("mb-1.5", "font-medium", "data-[variant=label]:text-sm", "data-[variant=legend]:text-base", className);
+	return /* @__PURE__ */ jsx("legend", {
+		"data-slot": "field-legend",
+		"data-variant": variant,
+		className: classes,
+		...props
+	});
+}
+/**
+* Группа полей: столбик полей с отступами; контейнер для orientation="responsive"
+* @param props - пропсы группы
+* @returns div
+*/
+function FieldGroup({ className, ...props }) {
+	const classes = cn("group/field-group", "@container/field-group", "flex", "w-full", "flex-col", "gap-5", "data-[slot=checkbox-group]:gap-3", "*:data-[slot=field-group]:gap-4", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-group",
+		className: classes,
+		...props
+	});
+}
+/**
+* Поле формы: подпись, элемент управления, описание и ошибка.
+* data-invalid={true} красит поле в цвет ошибки, data-disabled={true} приглушает подпись
+* @param props - пропсы поля
+* @returns div с role="group"
+*/
+function Field({ className, orientation = "vertical", ...props }) {
+	const classes = cn(fieldVariants({ orientation }), className);
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "field",
+		"data-orientation": orientation,
+		className: classes,
+		...props
+	});
+}
+/**
+* Содержимое поля: подпись и описание столбиком рядом с флажком или переключателем
+* @param props - пропсы содержимого
+* @returns div
+*/
+function FieldContent({ className, ...props }) {
+	const classes = cn("group/field-content", "flex", "flex-1", "flex-col", "gap-0.5", "leading-snug", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-content",
+		className: classes,
+		...props
+	});
+}
+/**
+* Подпись поля. С Field внутри становится карточкой выбора
+* @param props - пропсы подписи
+* @returns label
+*/
+function FieldLabel({ className, ...props }) {
+	const classes = cn("group/field-label", "peer/field-label", "flex", "w-fit", "gap-2", "leading-snug", "group-data-[disabled=true]/field:opacity-50", "has-data-checked:border-primary/30", "has-data-checked:bg-primary/5", "dark:has-data-checked:border-primary/20", "dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full", "has-[>[data-slot=field]]:flex-col", "has-[>[data-slot=field]]:rounded-lg", "has-[>[data-slot=field]]:border", "has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50", "keyboard:has-[>[data-slot=field]]:has-[:focus-visible]:border-ring", "keyboard:has-[>[data-slot=field]]:has-[:focus-visible]:ring-3", "keyboard:has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50", "*:data-[slot=field]:p-2.5", className);
+	return /* @__PURE__ */ jsx(Label, {
+		"data-slot": "field-label",
+		className: classes,
+		...props
+	});
+}
+/**
+* Заголовок поля: как подпись, но не label — для карточек выбора
+* @param props - пропсы заголовка
+* @returns div
+*/
+function FieldTitle({ className, ...props }) {
+	const classes = cn("flex", "w-fit", "items-center", "gap-2", "text-sm", "leading-snug", "font-medium", "group-data-[disabled=true]/field:opacity-50", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-label",
+		className: classes,
+		...props
+	});
+}
+/**
+* Описание поля: подсказка серым текстом
+* @param props - пропсы описания
+* @returns p
+*/
+function FieldDescription({ className, ...props }) {
+	const classes = cn("text-left", "text-sm", "leading-normal", "font-normal", "text-muted-foreground", "group-has-data-horizontal/field:text-balance", "last:mt-0", "nth-last-2:-mt-1", "[[data-variant=legend]+&]:-mt-1.5", "[&>a]:underline", "[&>a]:underline-offset-4", "[&>a:hover]:text-primary", className);
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "field-description",
+		className: classes,
+		...props
+	});
+}
+/**
+* Разделитель полей: линия, при необходимости с текстом посередине
+* @param props - пропсы разделителя
+* @returns div
+*/
+function FieldSeparator({ children, className, ...props }) {
+	const classes = cn("relative", "-my-2", "flex", "h-5", "items-center", "gap-2", "text-sm", "group-data-[variant=outline]/field-group:-mb-2", className);
+	let content = null;
+	if (children) content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"data-slot": "field-separator-content",
+		className: "shrink-0 text-muted-foreground",
+		children
+	}), /* @__PURE__ */ jsx(Separator, { className: "flex-1" })] });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field-separator",
+		"data-content": Boolean(children),
+		className: classes,
+		...props,
+		children: [/* @__PURE__ */ jsx(Separator, { className: "flex-1" }), content]
+	});
+}
+/**
+* Собрать содержимое ошибки: свой текст или уникальные сообщения из errors
+* @param children - свой текст ошибки
+* @param errors - ошибки валидации
+* @returns содержимое или null, если показывать нечего
+*/
+function getErrorContent(children, errors) {
+	if (children) return children;
+	if (!errors?.length) return null;
+	const messages = /* @__PURE__ */ new Set();
+	for (const error of errors) if (error?.message) messages.add(error.message);
+	if (messages.size === 0) return null;
+	const list = [...messages];
+	if (list.length === 1) return list[0];
+	return /* @__PURE__ */ jsx("ul", {
+		className: "ml-4 flex list-disc flex-col gap-1",
+		children: list.map((message) => /* @__PURE__ */ jsx("li", { children: message }, message))
+	});
+}
+/**
+* Ошибка поля: красный текст под элементом управления, озвучивается сразу
+* @param props - пропсы ошибки
+* @returns div с role="alert" или null, если ошибок нет
+*/
+function FieldError({ className, children, errors, ...props }) {
+	const content = getErrorContent(children, errors);
+	const classes = cn("text-sm", "font-normal", "text-destructive", className);
+	if (content === null) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-slot": "field-error",
+		className: classes,
+		...props,
+		children: content
+	});
+}
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

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

@@ -0,0 +1,3 @@
+import { FieldContentPropsT, FieldDescriptionPropsT, FieldErrorItemI, FieldErrorPropsT, FieldGroupPropsT, FieldLabelPropsT, FieldLegendPropsT, FieldLegendVariantT, FieldOrientationT, FieldPropsT, FieldSeparatorPropsT, FieldSetPropsT, FieldTitlePropsT, fieldVariants } from "./types.js";
+import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./field.js";
+export { Field, FieldContent, type FieldContentPropsT, FieldDescription, type FieldDescriptionPropsT, FieldError, type FieldErrorItemI, type FieldErrorPropsT, FieldGroup, type FieldGroupPropsT, FieldLabel, type FieldLabelPropsT, FieldLegend, type FieldLegendPropsT, type FieldLegendVariantT, type FieldOrientationT, type FieldPropsT, FieldSeparator, type FieldSeparatorPropsT, FieldSet, type FieldSetPropsT, FieldTitle, type FieldTitlePropsT, fieldVariants };

package/dist/components/field/index.js

@@ -0,0 +1,3 @@
+import { fieldVariants } from "./types.js";
+import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./field.js";
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, fieldVariants };

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

@@ -0,0 +1,81 @@
+import { LabelPropsT } from "../label/types.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps, ReactNode } from "react";
+/**
+ * Стили поля: расположение подписи и элемента управления.
+ * Экспортируются, чтобы оформить полем другой элемент: fieldVariants({ orientation: 'horizontal' }).
+ */
+export declare const fieldVariants: (props?: ({
+  orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Варианты стилей поля
+ */
+export type FieldVariantsT = VariantProps<typeof fieldVariants>;
+/**
+ * Расположение поля: vertical — подпись сверху, horizontal — в строку, responsive — в строку на широкой группе
+ */
+export type FieldOrientationT = NonNullable<FieldVariantsT['orientation']>;
+/**
+ * Пропсы набора полей
+ */
+export type FieldSetPropsT = ComponentProps<'fieldset'>;
+/**
+ * Вид заголовка набора: legend — крупный, label — как подпись поля
+ */
+export type FieldLegendVariantT = 'legend' | 'label';
+/**
+ * Пропсы заголовка набора
+ */
+export type FieldLegendPropsT = ComponentProps<'legend'> & {
+  /** Вид: legend — крупный заголовок, label — как подпись поля */
+  variant?: FieldLegendVariantT;
+};
+/**
+ * Пропсы группы полей
+ */
+export type FieldGroupPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы поля
+ */
+export type FieldPropsT = ComponentProps<'div'> & {
+  /** Расположение: vertical — подпись сверху, horizontal — в строку, responsive — в строку на широкой группе */
+  orientation?: FieldOrientationT;
+};
+/**
+ * Пропсы содержимого поля
+ */
+export type FieldContentPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы подписи поля
+ */
+export type FieldLabelPropsT = LabelPropsT;
+/**
+ * Пропсы заголовка поля
+ */
+export type FieldTitlePropsT = ComponentProps<'div'>;
+/**
+ * Пропсы описания поля
+ */
+export type FieldDescriptionPropsT = ComponentProps<'p'>;
+/**
+ * Пропсы разделителя полей
+ */
+export type FieldSeparatorPropsT = ComponentProps<'div'> & {
+  /** Текст посередине линии, например «или» */
+  children?: ReactNode;
+};
+/**
+ * Ошибка валидации
+ * @property message - текст ошибки
+ */
+export interface FieldErrorItemI {
+  message?: string;
+}
+/**
+ * Пропсы ошибки поля
+ */
+export type FieldErrorPropsT = ComponentProps<'div'> & {
+  /** Ошибки валидации (например, из react-hook-form): одна — текстом, несколько — списком */
+  errors?: (FieldErrorItemI | undefined)[];
+};

package/dist/components/field/types.js

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority";
+// src/components/field/types.ts
+/**
+* Стили поля: расположение подписи и элемента управления.
+* Экспортируются, чтобы оформить полем другой элемент: fieldVariants({ orientation: 'horizontal' }).
+*/
+const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
+	variants: { orientation: {
+		vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+		horizontal: ["flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto", "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"],
+		responsive: [
+			"flex-col *:w-full [&>.sr-only]:w-auto",
+			"@md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto",
+			"@md/field-group:has-[>[data-slot=field-content]]:items-start",
+			"@md/field-group:*:data-[slot=field-label]:flex-auto",
+			"@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+		]
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+export { fieldVariants };

package/dist/components/form/form.d.ts

@@ -0,0 +1,49 @@
+import { FormControlPropsT, FormDescriptionPropsT, FormFieldPropsT, FormFieldStateI, FormItemPropsT, FormLabelPropsT, FormMessagePropsT, FormPropsT } from "./types.js";
+import { FieldPath, FieldValues } from "react-hook-form";
+/**
+ * Форма: передаёт результат useForm() всем полям внутри. Сам тег form пишется внутри
+ * @param props - результат useForm() и children
+ * @returns провайдер без своей разметки
+ */
+export declare function Form<TFieldValues extends FieldValues, TContext = unknown, TTransformedValues = TFieldValues>(props: FormPropsT<TFieldValues, TContext, TTransformedValues>): import("react").JSX.Element;
+/**
+ * Поле формы: связывает значение из формы с элементом управления в render
+ * @param props - name, control и render, как у Controller
+ * @returns Controller
+ */
+export declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformedValues = TFieldValues>(props: FormFieldPropsT<TFieldValues, TName, TTransformedValues>): import("react").JSX.Element;
+/**
+ * Состояние текущего поля: ошибка и id частей. Работает внутри FormField и FormItem
+ * @returns состояние поля
+ */
+export declare function useFormField(): FormFieldStateI;
+/**
+ * Блок поля: подпись, элемент, описание и ошибка. При ошибке подсвечивается
+ * @param props - пропсы Field; orientation — vertical, horizontal или responsive
+ * @returns div с role="group"
+ */
+export declare function FormItem(props: FormItemPropsT): import("react").JSX.Element;
+/**
+ * Подпись поля: связана с элементом, при ошибке красная
+ * @param props - пропсы подписи
+ * @returns label
+ */
+export declare function FormLabel(props: FormLabelPropsT): import("react").JSX.Element;
+/**
+ * Обёртка элемента управления: передаёт ему id, aria-invalid и aria-describedby
+ * @param props - пропсы; внутрь кладётся один элемент: Input, SelectTrigger, Checkbox (или он в render)
+ * @returns дочерний элемент с атрибутами
+ */
+export declare function FormControl({ children, render, ...props }: FormControlPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Описание поля: подсказка под элементом
+ * @param props - пропсы описания
+ * @returns p
+ */
+export declare function FormDescription(props: FormDescriptionPropsT): import("react").JSX.Element;
+/**
+ * Ошибка поля: текст ошибки проверки, а без ошибки — children
+ * @param props - пропсы ошибки
+ * @returns div с role="alert" или null
+ */
+export declare function FormMessage({ children, ...props }: FormMessagePropsT): import("react").JSX.Element;

package/dist/components/form/form.js

@@ -0,0 +1,136 @@
+"use client";
+import { Field, FieldDescription, FieldError, FieldLabel } from "../field/field.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { createContext, isValidElement, useContext, useId } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
+// src/components/form/form.tsx
+/**
+* Форма: передаёт результат useForm() всем полям внутри. Сам тег form пишется внутри
+* @param props - результат useForm() и children
+* @returns провайдер без своей разметки
+*/
+function Form(props) {
+	return /* @__PURE__ */ jsx(FormProvider, { ...props });
+}
+/** Имя текущего поля */
+const FormFieldContext = createContext(null);
+/**
+* Поле формы: связывает значение из формы с элементом управления в render
+* @param props - name, control и render, как у Controller
+* @returns Controller
+*/
+function FormField(props) {
+	const context = { name: props.name };
+	return /* @__PURE__ */ jsx(FormFieldContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Controller, { ...props })
+	});
+}
+/** id текущего блока поля */
+const FormItemContext = createContext(null);
+/**
+* Состояние текущего поля: ошибка и id частей. Работает внутри FormField и FormItem
+* @returns состояние поля
+*/
+function useFormField() {
+	const fieldContext = useContext(FormFieldContext);
+	const itemContext = useContext(FormItemContext);
+	const { getFieldState } = useFormContext();
+	const formState = useFormState({ name: fieldContext?.name });
+	if (!fieldContext || !itemContext) throw new Error("useFormField работает только внутри FormField и FormItem");
+	const fieldState = getFieldState(fieldContext.name, formState);
+	const { id } = itemContext;
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState
+	};
+}
+/**
+* Блок поля: подпись, элемент, описание и ошибка. При ошибке подсвечивается
+* @param props - пропсы Field; orientation — vertical, horizontal или responsive
+* @returns div с role="group"
+*/
+function FormItem(props) {
+	const context = { id: useId() };
+	return /* @__PURE__ */ jsx(FormItemContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(FormItemField, { ...props })
+	});
+}
+/**
+* Field с data-invalid по состоянию поля
+* @param props - пропсы Field
+* @returns div с role="group"
+*/
+function FormItemField(props) {
+	const { invalid } = useFormField();
+	return /* @__PURE__ */ jsx(Field, {
+		"data-invalid": invalid,
+		...props
+	});
+}
+/**
+* Подпись поля: связана с элементом, при ошибке красная
+* @param props - пропсы подписи
+* @returns label
+*/
+function FormLabel(props) {
+	const { invalid, formItemId } = useFormField();
+	return /* @__PURE__ */ jsx(FieldLabel, {
+		"data-error": invalid,
+		htmlFor: formItemId,
+		...props
+	});
+}
+/**
+* Обёртка элемента управления: передаёт ему id, aria-invalid и aria-describedby
+* @param props - пропсы; внутрь кладётся один элемент: Input, SelectTrigger, Checkbox (или он в render)
+* @returns дочерний элемент с атрибутами
+*/
+function FormControl({ children, render, ...props }) {
+	const { invalid, formItemId, formDescriptionId, formMessageId } = useFormField();
+	const describedBy = invalid ? `${formDescriptionId} ${formMessageId}` : formDescriptionId;
+	const element = render ?? (isValidElement(children) ? children : void 0);
+	return useRender({
+		render: element,
+		props: mergeProps({
+			"data-slot": "form-control",
+			"id": formItemId,
+			"aria-describedby": describedBy,
+			"aria-invalid": invalid
+		}, props)
+	});
+}
+/**
+* Описание поля: подсказка под элементом
+* @param props - пропсы описания
+* @returns p
+*/
+function FormDescription(props) {
+	const { formDescriptionId } = useFormField();
+	return /* @__PURE__ */ jsx(FieldDescription, {
+		id: formDescriptionId,
+		...props
+	});
+}
+/**
+* Ошибка поля: текст ошибки проверки, а без ошибки — children
+* @param props - пропсы ошибки
+* @returns div с role="alert" или null
+*/
+function FormMessage({ children, ...props }) {
+	const { error, formMessageId } = useFormField();
+	const body = error?.message ?? children;
+	return /* @__PURE__ */ jsx(FieldError, {
+		id: formMessageId,
+		...props,
+		children: body
+	});
+}
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

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

@@ -0,0 +1,3 @@
+import { FormControlPropsT, FormDescriptionPropsT, FormFieldPropsT, FormFieldStateI, FormItemPropsT, FormLabelPropsT, FormMessagePropsT, FormPropsT } from "./types.js";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "./form.js";
+export { Form, FormControl, type FormControlPropsT, FormDescription, type FormDescriptionPropsT, FormField, type FormFieldPropsT, type FormFieldStateI, FormItem, type FormItemPropsT, FormLabel, type FormLabelPropsT, FormMessage, type FormMessagePropsT, type FormPropsT, useFormField };

package/dist/components/form/index.js

@@ -0,0 +1 @@
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "./form.js";

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

@@ -0,0 +1,59 @@
+import { FieldDescriptionPropsT, FieldErrorPropsT, FieldLabelPropsT, FieldPropsT } from "../field/types.js";
+import "../field/index.js";
+import { useRender } from "@base-ui/react/use-render";
+import { ControllerProps, FieldPath, FieldValues, FormProviderProps } from "react-hook-form";
+/**
+ * Пропсы формы: результат useForm() из react-hook-form
+ */
+export type FormPropsT<TFieldValues extends FieldValues = FieldValues, TContext = unknown, TTransformedValues = TFieldValues> = FormProviderProps<TFieldValues, TContext, TTransformedValues>;
+/**
+ * Пропсы поля формы: как у Controller из react-hook-form
+ */
+export type FormFieldPropsT<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformedValues = TFieldValues> = ControllerProps<TFieldValues, TName, TTransformedValues>;
+/**
+ * Состояние поля формы и id его частей
+ * @property id - базовый id блока
+ * @property name - имя поля
+ * @property formItemId - id элемента управления
+ * @property formDescriptionId - id описания
+ * @property formMessageId - id ошибки
+ * @property invalid - есть ошибка
+ * @property isDirty - значение меняли
+ * @property isTouched - поле теряло фокус
+ * @property isValidating - идёт проверка
+ * @property error - ошибка проверки
+ */
+export interface FormFieldStateI {
+  id: string;
+  name: string;
+  formItemId: string;
+  formDescriptionId: string;
+  formMessageId: string;
+  invalid: boolean;
+  isDirty: boolean;
+  isTouched: boolean;
+  isValidating: boolean;
+  error?: {
+    message?: string;
+  };
+}
+/**
+ * Пропсы блока поля
+ */
+export type FormItemPropsT = FieldPropsT;
+/**
+ * Пропсы подписи поля
+ */
+export type FormLabelPropsT = FieldLabelPropsT;
+/**
+ * Пропсы обёртки элемента
+ */
+export type FormControlPropsT = useRender.ComponentProps<'div'>;
+/**
+ * Пропсы описания поля
+ */
+export type FormDescriptionPropsT = FieldDescriptionPropsT;
+/**
+ * Пропсы ошибки поля
+ */
+export type FormMessagePropsT = Omit<FieldErrorPropsT, 'errors'>;

package/dist/components/grid/grid.d.ts

@@ -0,0 +1,7 @@
+import { GridPropsT } from "./types.js";
+/**
+ * Сетка: элементы по колонкам с отступом между ячейками
+ * @param props - пропсы сетки
+ * @returns сетка или свой элемент в стилях сетки (render)
+ */
+export declare function Grid({ className, columns, gap, render, ...props }: GridPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/grid/grid.js

@@ -0,0 +1,36 @@
+import { cn } from "../../lib/utils.js";
+import { gridColumnsClasses, gridVariants } from "./types.js";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/grid/grid.tsx
+/**
+* Классы колонок: число — на любой ширине, объект — по брейкпоинтам
+* @param columns - число колонок или колонки по брейкпоинтам
+* @returns классы grid-cols-*
+*/
+function getColumnsClasses(columns) {
+	if (typeof columns === "number") return gridColumnsClasses.base[columns];
+	const classes = [];
+	for (const [breakpoint, count] of Object.entries(columns)) {
+		if (count === void 0) continue;
+		classes.push(gridColumnsClasses[breakpoint][count]);
+	}
+	return classes;
+}
+/**
+* Сетка: элементы по колонкам с отступом между ячейками
+* @param props - пропсы сетки
+* @returns сетка или свой элемент в стилях сетки (render)
+*/
+function Grid({ className, columns = 1, gap = 4, render, ...props }) {
+	const classes = cn(gridVariants({ gap }), getColumnsClasses(columns), className);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "grid",
+			"className": classes
+		}, props)
+	});
+}
+export { Grid };

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

@@ -0,0 +1,3 @@
+import { GridBreakpointT, GridColumnsCountT, GridColumnsResponsiveT, GridPropsT, gridColumnsClasses, gridVariants } from "./types.js";
+import { Grid } from "./grid.js";
+export { Grid, type GridBreakpointT, type GridColumnsCountT, type GridColumnsResponsiveT, type GridPropsT, gridColumnsClasses, gridVariants };

package/dist/components/grid/index.js

@@ -0,0 +1,3 @@
+import { gridColumnsClasses, gridVariants } from "./types.js";
+import { Grid } from "./grid.js";
+export { Grid, gridColumnsClasses, gridVariants };

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

@@ -0,0 +1,35 @@
+import { GapT } from "../stack/types.js";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * Число колонок сетки
+ */
+export type GridColumnsCountT = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/**
+ * Брейкпоинт Tailwind; base — без брейкпоинта, на любой ширине
+ */
+export type GridBreakpointT = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * Число колонок по брейкпоинтам: { base: 1, md: 2, lg: 4 }
+ */
+export type GridColumnsResponsiveT = Partial<Record<GridBreakpointT, GridColumnsCountT>>;
+/**
+ * Классы колонок по брейкпоинтам.
+ * Перечислены целиком, чтобы Tailwind потребителя их увидел.
+ */
+export declare const gridColumnsClasses: Record<GridBreakpointT, Record<GridColumnsCountT, string>>;
+/**
+ * Стили сетки: отступ между ячейками. Колонки — gridColumnsClasses.
+ * Экспортируются, чтобы разложить сеткой другой элемент: gridVariants({ gap: 4 }).
+ */
+export declare const gridVariants: (props?: ({
+  gap?: 0 | 1 | 2 | 0.5 | 1.5 | 2.5 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Пропсы сетки
+ */
+export type GridPropsT = useRender.ComponentProps<'div'> & {
+  /** Число колонок от 1 до 12 или по брейкпоинтам: { base: 1, md: 2, lg: 4 }. По умолчанию 1 */
+  columns?: GridColumnsCountT | GridColumnsResponsiveT;
+  /** Отступ между ячейками по шкале Tailwind: 4 → 16px. По умолчанию 4 */
+  gap?: GapT;
+};