@archytechtor/ui 0.0.0-stage → 0.2.0

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?: "default" | "image" | "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 {};

package/dist/components/item/types.js

@@ -0,0 +1,48 @@
+import { cva } from "class-variance-authority";
+// src/components/item/types.ts
+/**
+* Стили элемента списка: вариант оформления и размер.
+* Ссылка (render={<a />}) подсвечивается фоном при наведении
+*/
+const itemVariants = cva([
+	"group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100",
+	"outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+	"[a]:transition-colors [a]:hover:bg-muted"
+], {
+	variants: {
+		variant: {
+			default: "border-transparent",
+			outline: "border-border",
+			muted: "border-transparent bg-muted/50"
+		},
+		size: {
+			default: "gap-2.5 px-3 py-2.5",
+			sm: "gap-2.5 px-3 py-2.5",
+			xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+/**
+* Стили медиа элемента: без оформления, иконка или изображение
+*/
+const itemMediaVariants = cva([
+	"flex shrink-0 items-center justify-center gap-2 [&_svg]:pointer-events-none",
+	"group-has-data-[slot=item-description]/item:translate-y-0.5",
+	"group-has-data-[slot=item-description]/item:self-start"
+], {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "[&_svg:not([class*=size-])]:size-4",
+		image: [
+			"size-10 overflow-hidden rounded-sm",
+			"group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6",
+			"[&_img]:size-full [&_img]:object-cover"
+		]
+	} },
+	defaultVariants: { variant: "default" }
+});
+export { itemMediaVariants, itemVariants };

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

@@ -0,0 +1,3 @@
+import { KbdGroupPropsT, KbdPropsT } from "./types.js";
+import { Kbd, KbdGroup } from "./kbd.js";
+export { Kbd, KbdGroup, type KbdGroupPropsT, type KbdPropsT };

package/dist/components/kbd/index.js

@@ -0,0 +1 @@
+export { Kbd, KbdGroup } from "./kbd.js";

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,13 @@
+import { KbdGroupPropsT, KbdPropsT } from "./types.js";
+/**
+ * Клавиша: подпись клавиши или сочетания для ввода с клавиатуры
+ * @param props - пропсы клавиши
+ * @returns элемент <kbd>
+ */
+export declare function Kbd({ className, ...props }: KbdPropsT): import("react").JSX.Element;
+/**
+ * Группа клавиш: сочетание из нескольких Kbd
+ * @param props - пропсы группы
+ * @returns элемент <kbd> с вложенными клавишами
+ */
+export declare function KbdGroup({ className, ...props }: KbdGroupPropsT): import("react").JSX.Element;

package/dist/components/kbd/kbd.js

@@ -0,0 +1,30 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/kbd/kbd.tsx
+/**
+* Клавиша: подпись клавиши или сочетания для ввода с клавиатуры
+* @param props - пропсы клавиши
+* @returns элемент <kbd>
+*/
+function Kbd({ className, ...props }) {
+	const classes = cn("pointer-events-none", "inline-flex", "h-5", "w-fit", "min-w-5", "items-center", "justify-center", "gap-1", "rounded-sm", "px-1", "select-none", "bg-muted", "font-sans", "text-xs", "font-medium", "text-muted-foreground", "in-data-[slot=tooltip-content]:bg-background/20", "in-data-[slot=tooltip-content]:text-background", "dark:in-data-[slot=tooltip-content]:bg-background/10", "[&_svg:not([class*=size-])]:size-3", className);
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd",
+		className: classes,
+		...props
+	});
+}
+/**
+* Группа клавиш: сочетание из нескольких Kbd
+* @param props - пропсы группы
+* @returns элемент <kbd> с вложенными клавишами
+*/
+function KbdGroup({ className, ...props }) {
+	const classes = cn("inline-flex", "items-center", "gap-1", className);
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd-group",
+		className: classes,
+		...props
+	});
+}
+export { Kbd, KbdGroup };

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

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+/**
+ * Пропсы клавиши
+ */
+export type KbdPropsT = ComponentProps<'kbd'>;
+/**
+ * Пропсы группы клавиш
+ */
+export type KbdGroupPropsT = ComponentProps<'kbd'>;

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

@@ -0,0 +1,3 @@
+import { LabelPropsT } from "./types.js";
+import { Label } from "./label.js";
+export { Label, type LabelPropsT };

package/dist/components/label/index.js

@@ -0,0 +1 @@
+export { Label } from "./label.js";

package/dist/components/label/label.d.ts

@@ -0,0 +1,7 @@
+import { LabelPropsT } from "./types.js";
+/**
+ * Подпись поля формы
+ * @param props - пропсы подписи
+ * @returns элемент label
+ */
+export declare function Label({ className, ...props }: LabelPropsT): import("react").JSX.Element;

package/dist/components/label/label.js

@@ -0,0 +1,17 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/label/label.tsx
+/**
+* Подпись поля формы
+* @param props - пропсы подписи
+* @returns элемент label
+*/
+function Label({ className, ...props }) {
+	const classes = cn("flex", "items-center", "gap-2", "text-sm", "leading-none", "font-medium", "select-none", "group-data-[disabled=true]:pointer-events-none", "group-data-[disabled=true]:opacity-50", "peer-disabled:cursor-not-allowed", "peer-disabled:opacity-50", className);
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		className: classes,
+		...props
+	});
+}
+export { Label };

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

@@ -0,0 +1,8 @@
+import { ComponentProps } from "react";
+/**
+ * Пропсы подписи
+ */
+export type LabelPropsT = ComponentProps<'label'> & {
+  /** id поля, к которому относится подпись: клик по подписи переводит фокус на поле */
+  htmlFor?: string;
+};

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

@@ -0,0 +1,3 @@
+import { LoaderPropsT, loaderVariants } from "./types.js";
+import { Loader } from "./loader.js";
+export { Loader, type LoaderPropsT, loaderVariants };

package/dist/components/loader/index.js

@@ -0,0 +1,3 @@
+import { loaderVariants } from "./types.js";
+import { Loader } from "./loader.js";
+export { Loader, loaderVariants };

package/dist/components/loader/loader.d.ts

@@ -0,0 +1,8 @@
+import { LoaderPropsT } from "./types.js";
+/**
+ * Индикатор загрузки с анимированными видами. Цвет — text-primary, меняется через className.
+ * Для маленького индикатора внутри кнопки или текста есть Spinner.
+ * @param props - пропсы индикатора
+ * @returns индикатор
+ */
+export declare function Loader({ className, variant, size, 'aria-label': ariaLabel, ...props }: LoaderPropsT): import("react").JSX.Element;