@k8ordo/ui 1.0.0

package/dist/components/ai/tool-invocation/tool-invocation.mjs

@@ -0,0 +1,73 @@
+"use client";
+import { useMessages } from "../../../i18n/context.mjs";
+import { Spinner } from "../../feedback/spinner/spinner.mjs";
+import { AlertIcon, CheckIcon } from "../../icons/lucide.mjs";
+import { Collapsible } from "../_internal/collapsible.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ai/tool-invocation/tool-invocation.tsx
+const stateIcon = (state) => {
+	if (state === "output-available") return /* @__PURE__ */ jsx("span", {
+		className: "text-fg-success",
+		children: /* @__PURE__ */ jsx(CheckIcon, { size: "sm" })
+	});
+	if (state === "output-error") return /* @__PURE__ */ jsx("span", {
+		className: "text-fg-error",
+		children: /* @__PURE__ */ jsx(AlertIcon, {
+			size: "sm",
+			status: "error"
+		})
+	});
+	if (state === "output-denied") return /* @__PURE__ */ jsx("span", {
+		className: "text-fg-warning",
+		children: /* @__PURE__ */ jsx(AlertIcon, {
+			size: "sm",
+			status: "warning"
+		})
+	});
+	return /* @__PURE__ */ jsx(Spinner, { size: "sm" });
+};
+const stringify = (value) => {
+	if (typeof value === "string") return value;
+	try {
+		return JSON.stringify(value, null, 2);
+	} catch {
+		return String(value);
+	}
+};
+const ToolInvocation = ({ name, state, input, output, errorText, deniedReason, isOpen, defaultOpen = false, onChange }) => {
+	const messages = useMessages();
+	return /* @__PURE__ */ jsx(Collapsible, {
+		defaultOpen,
+		icon: stateIcon(state),
+		isOpen,
+		label: /* @__PURE__ */ jsx("span", {
+			className: "text-fg-base font-medium",
+			children: name
+		}),
+		onChange,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3",
+			children: [input !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+				className: "text-fg-mute mb-1 text-xs font-medium",
+				children: messages.toolInput
+			}), /* @__PURE__ */ jsx("pre", {
+				className: "bg-bg-mute text-fg-base overflow-x-auto rounded-lg p-2 text-xs",
+				children: stringify(input)
+			})] }), state === "output-error" ? /* @__PURE__ */ jsx("p", {
+				className: "text-fg-error text-sm",
+				children: errorText ?? messages.toolError
+			}) : state === "output-denied" ? /* @__PURE__ */ jsx("p", {
+				className: "text-fg-warning text-sm",
+				children: deniedReason ?? messages.toolDenied
+			}) : output === void 0 ? null : /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+				className: "text-fg-mute mb-1 text-xs font-medium",
+				children: messages.toolOutput
+			}), typeof output === "string" ? /* @__PURE__ */ jsx("pre", {
+				className: "bg-bg-mute text-fg-base overflow-x-auto rounded-lg p-2 text-xs",
+				children: output
+			}) : output] })]
+		})
+	});
+};
+//#endregion
+export { ToolInvocation };

package/dist/components/ai/types.d.mts

@@ -0,0 +1,5 @@
+//#region src/components/ai/types.d.ts
+type ChatStatus = 'ready' | 'submitted' | 'streaming' | 'error';
+type ToolState = 'input-streaming' | 'input-available' | 'approval-requested' | 'approval-responded' | 'output-available' | 'output-error' | 'output-denied';
+//#endregion
+export { ChatStatus, ToolState };

package/dist/components/ai/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/components/buttons/button/button.d.mts

@@ -0,0 +1,27 @@
+import { ComponentPropsWithRef, FC, ReactNode } from "react";
+//#region src/components/buttons/button/button.d.ts
+type Props = {
+  type?: 'button' | 'submit';
+  size?: 'sm' | 'md' | 'lg';
+  color?: 'primary' | 'secondary' | 'base';
+  variant?: 'solid' | 'outline' | 'skeleton';
+  fullWidth?: boolean;
+  isActive?: boolean;
+  startIcon?: ReactNode;
+  endIcon?: ReactNode;
+  /**
+   * クリック時の処理。`onAction` は非同期処理を `useTransition` で包み、保留中は
+   * 自動でスピナーを表示する糖衣。素のクリックイベント（`event` が必要、
+   * `preventDefault` したい等）は `onClick` を使う。両者は併用可能で、
+   * `onClick` → `onAction` の順に実行される（`onClick` が `preventDefault`
+   * した場合は `onAction` をスキップ）。
+   */
+  onAction?: () => void | Promise<void>;
+  renderItem?: (props: {
+    className: string;
+    children: ReactNode;
+  }) => ReactNode;
+} & Omit<ComponentPropsWithRef<'button'>, 'type' | 'className' | 'style'>;
+declare const Button: FC<Props>;
+//#endregion
+export { Button };

package/dist/components/buttons/button/button.mjs

@@ -0,0 +1,60 @@
+"use client";
+import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
+import { cn } from "../../../helpers/cn.mjs";
+import { Spinner } from "../../feedback/spinner/spinner.mjs";
+import { useTransition } from "react";
+import { useFormStatus } from "react-dom";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/buttons/button/button.tsx
+const Button = ({ ref, children, type = "button", size = "md", color = "primary", variant = "solid", disabled = false, fullWidth = false, isActive = false, onAction, onClick, startIcon, endIcon, renderItem, ...rest }) => {
+	const [transitionPending, startTransition] = useTransition();
+	const { pending: formPending } = useFormStatus();
+	const isPending = transitionPending || type === "submit" && formPending;
+	const isDisabled = disabled || isPending;
+	const handleClick = onClick || onAction ? (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		if (onAction) startTransition(async () => {
+			await onAction();
+		});
+	} : void 0;
+	const resolvedStartIcon = !renderItem && isPending ? /* @__PURE__ */ jsx(Spinner, { size: size === "lg" ? "md" : "sm" }) : startIcon;
+	const hasStartIcon = resolvedStartIcon !== void 0;
+	const hasEndIcon = endIcon !== void 0;
+	const baseClassName = cn("rounded-full border-2 text-center font-bold transition-colors", {
+		"border-transparent bg-primary-bg text-primary-fg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize": variant === "solid" && color === "primary",
+		"border-transparent bg-secondary-bg text-secondary-fg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize": variant === "solid" && color === "secondary",
+		"border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute/80 active:bg-bg-mute": variant === "solid" && color === "base",
+		"border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outline" && color === "primary",
+		"border-secondary-border bg-bg-base text-secondary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outline" && color === "secondary",
+		"border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-mute": variant === "outline" && color === "base",
+		"border-transparent bg-transparent text-fg-mute hover:bg-bg-subtle hover:text-fg-base active:bg-bg-mute active:text-fg-base": variant === "skeleton"
+	}, FOCUS_RING, size === "sm" && "px-3 py-1 text-sm", size === "md" && "px-4 py-2 text-md", size === "lg" && "px-6 py-3 text-lg", fullWidth && "w-full vertical:w-auto", (hasStartIcon || hasEndIcon) && "flex items-center gap-2", hasStartIcon && hasEndIcon ? "justify-between" : hasStartIcon && variant !== "skeleton" ? "justify-center" : hasEndIcon && "justify-between", isActive && "text-fg-info");
+	const composedChildren = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		resolvedStartIcon,
+		children,
+		endIcon
+	] });
+	if (renderItem) return renderItem({
+		className: baseClassName,
+		children: composedChildren
+	});
+	return /* @__PURE__ */ jsx("button", {
+		"aria-busy": isPending || void 0,
+		className: cn(baseClassName, "cursor-pointer", {
+			"cursor-not-allowed opacity-35 hover:bg-primary-bg active:bg-primary-bg": isDisabled && variant === "solid" && color === "primary",
+			"cursor-not-allowed opacity-35 hover:bg-secondary-bg active:bg-secondary-bg": isDisabled && variant === "solid" && color === "secondary",
+			"cursor-not-allowed opacity-35 hover:bg-bg-subtle active:bg-bg-subtle": isDisabled && variant === "solid" && color === "base",
+			"cursor-not-allowed bg-bg-base opacity-35": isDisabled && variant === "outline",
+			"cursor-not-allowed bg-transparent text-fg-mute opacity-35": isDisabled && variant === "skeleton"
+		}),
+		disabled: isDisabled,
+		onClick: handleClick,
+		ref,
+		type: type === "submit" ? "submit" : "button",
+		...rest,
+		children: composedChildren
+	});
+};
+//#endregion
+export { Button };

package/dist/components/buttons/button/index.d.mts

@@ -0,0 +1,2 @@
+import { Button } from "./button.mjs";
+export { Button };

package/dist/components/buttons/button/index.mjs

@@ -0,0 +1,2 @@
+import { Button } from "./button.mjs";
+export { Button };

package/dist/components/buttons/icon-button/icon-button.d.mts

@@ -0,0 +1,29 @@
+import { Placement } from "../../../types/variables.mjs";
+import { TooltipTriggerProps } from "../../overlays/tooltip/tooltip.mjs";
+import "../../overlays/tooltip/index.mjs";
+import { ComponentPropsWithRef, FC, ReactNode } from "react";
+//#region src/components/buttons/icon-button/icon-button.d.ts
+type IconButtonTriggerProps = Partial<TooltipTriggerProps>;
+type Props = {
+  size?: 'sm' | 'md' | 'lg';
+  color?: 'transparent' | 'base' | 'primary' | 'secondary';
+  label: string;
+  tooltipPlacement?: Placement;
+  tooltipDisabled?: boolean;
+  /**
+   * クリック時の処理。`onAction` は非同期処理を `useTransition` で包み、保留中は
+   * `aria-busy` を立てる糖衣。素のクリックイベントが必要なら `onClick` を使う。
+   * 両者は併用可能で `onClick` → `onAction` の順に実行される（`onClick` が
+   * `preventDefault` した場合は `onAction` をスキップ）。
+   */
+  onAction?: () => void | Promise<void>;
+  renderItem?: (props: {
+    className: string;
+    children: ReactNode;
+    'aria-label': string;
+    triggerProps: IconButtonTriggerProps;
+  }) => ReactNode;
+} & Omit<ComponentPropsWithRef<'button'>, 'type' | 'className' | 'style'>;
+declare const IconButton: FC<Props>;
+//#endregion
+export { IconButton, IconButtonTriggerProps };

package/dist/components/buttons/icon-button/icon-button.mjs

@@ -0,0 +1,84 @@
+"use client";
+import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
+import { cn } from "../../../helpers/cn.mjs";
+import { chain } from "../../../helpers/chain.mjs";
+import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import { Tooltip } from "../../overlays/tooltip/tooltip.mjs";
+import { useTransition } from "react";
+import { useFormStatus } from "react-dom";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/buttons/icon-button/icon-button.tsx
+const joinIds = (...ids) => {
+	const filtered = ids.filter(Boolean);
+	return filtered.length === 0 ? void 0 : filtered.join(" ");
+};
+const IconButton = ({ ref, size = "md", color = "transparent", label, tooltipPlacement = "top", tooltipDisabled = false, children, onAction, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, disabled, renderItem, "aria-describedby": describedBy, ...props }) => {
+	const [transitionPending, startTransition] = useTransition();
+	const { pending: formPending } = useFormStatus();
+	const isPending = transitionPending || formPending;
+	const isDisabled = Boolean(disabled) || isPending;
+	const handleClick = onClick || onAction ? (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		if (onAction) startTransition(async () => {
+			await onAction();
+		});
+	} : void 0;
+	const className = cn("inline-flex rounded-full transition-colors", FOCUS_RING, (color === "transparent" || color === "base") && "hover:bg-bg-subtle active:bg-bg-mute", color === "base" && "bg-bg-base", color === "transparent" && "bg-transparent", color === "primary" && "bg-primary-bg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize", color === "secondary" && "bg-secondary-bg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize", size === "sm" && "p-1", size === "md" && "p-2", size === "lg" && "p-3", !renderItem && "cursor-pointer", !renderItem && isDisabled && "cursor-not-allowed opacity-50 hover:bg-transparent active:bg-transparent");
+	if (tooltipDisabled) {
+		if (renderItem) return /* @__PURE__ */ jsx(Fragment$1, { children: renderItem({
+			className,
+			children,
+			"aria-label": label,
+			triggerProps: {}
+		}) });
+		return /* @__PURE__ */ jsx("button", {
+			...props,
+			"aria-busy": isPending || void 0,
+			"aria-describedby": describedBy,
+			"aria-label": label,
+			className,
+			disabled: isDisabled,
+			onBlur,
+			onClick: handleClick,
+			onFocus,
+			onMouseEnter,
+			onMouseLeave,
+			ref,
+			type: "button",
+			children
+		});
+	}
+	return /* @__PURE__ */ jsxs(Tooltip.Root, {
+		placement: tooltipPlacement,
+		children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { renderItem: (triggerProps) => {
+			if (renderItem) return /* @__PURE__ */ jsx(Fragment$1, { children: renderItem({
+				className,
+				children,
+				"aria-label": label,
+				triggerProps: {
+					...triggerProps,
+					"aria-describedby": joinIds(describedBy, triggerProps["aria-describedby"])
+				}
+			}) });
+			return /* @__PURE__ */ jsx("button", {
+				...props,
+				"aria-busy": isPending || void 0,
+				"aria-describedby": joinIds(describedBy, triggerProps["aria-describedby"]),
+				"aria-label": label,
+				className,
+				disabled: isDisabled,
+				onBlur: chain(triggerProps.onBlur, onBlur),
+				onClick: handleClick,
+				onFocus: chain(triggerProps.onFocus, onFocus),
+				onMouseEnter: chain(triggerProps.onMouseEnter, onMouseEnter),
+				onMouseLeave: chain(triggerProps.onMouseLeave, onMouseLeave),
+				ref: mergeRefs(ref, triggerProps.ref),
+				type: "button",
+				children
+			});
+		} }), /* @__PURE__ */ jsx(Tooltip.Content, { children: label })]
+	});
+};
+//#endregion
+export { IconButton };

package/dist/components/buttons/icon-button/index.d.mts

@@ -0,0 +1,2 @@
+import { IconButton, IconButtonTriggerProps } from "./icon-button.mjs";
+export { IconButton, type IconButtonTriggerProps };

package/dist/components/buttons/icon-button/index.mjs

@@ -0,0 +1,2 @@
+import { IconButton } from "./icon-button.mjs";
+export { IconButton };

package/dist/components/data-display/accordion/accordion-button.d.mts

@@ -0,0 +1,5 @@
+import { FC, PropsWithChildren } from "react";
+//#region src/components/data-display/accordion/accordion-button.d.ts
+declare const AccordionButton: FC<PropsWithChildren>;
+//#endregion
+export { AccordionButton };

package/dist/components/data-display/accordion/accordion-button.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { FOCUS_RING_NO_BORDER } from "../../_internal/focus-ring.mjs";
+import { cn } from "../../../helpers/cn.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
+import { useItemId, useOpen, useToggleOpen } from "./context.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/data-display/accordion/accordion-button.tsx
+const AccordionButton = ({ children }) => {
+	const id = useItemId();
+	const open = useOpen();
+	const toggleOpen = useToggleOpen();
+	return /* @__PURE__ */ jsxs("button", {
+		"aria-controls": `${id}-panel`,
+		"aria-expanded": open,
+		className: cn("flex w-full cursor-pointer items-center justify-between rounded-md p-4 text-fg-base transition-colors vertical:h-full", "hover:bg-primary-bg-subtle hover:text-primary-fg", FOCUS_RING_NO_BORDER),
+		id: `${id}-button`,
+		onClick: toggleOpen,
+		type: "button",
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: cn("transition-transform duration-150", !open && "vertical:rotate-90", open && "rotate-180 vertical:-rotate-90"),
+			children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down" })
+		})]
+	});
+};
+//#endregion
+export { AccordionButton };

package/dist/components/data-display/accordion/accordion-item.d.mts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from "react";
+//#region src/components/data-display/accordion/accordion-item.d.ts
+declare const AccordionItem: FC<PropsWithChildren<{
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onChange?: (isOpen: boolean) => void;
+}>>;
+//#endregion
+export { AccordionItem };

package/dist/components/data-display/accordion/accordion-item.mjs

@@ -0,0 +1,20 @@
+"use client";
+import { AccordionItemProvider } from "./context.mjs";
+import { useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-display/accordion/accordion-item.tsx
+const AccordionItem = ({ children, isOpen, defaultOpen = false, onChange }) => {
+	const id = useId();
+	return /* @__PURE__ */ jsx(AccordionItemProvider, {
+		defaultOpen,
+		id,
+		isOpen,
+		onChange,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "vertical:h-full",
+			children
+		})
+	});
+};
+//#endregion
+export { AccordionItem };

package/dist/components/data-display/accordion/accordion-panel.d.mts

@@ -0,0 +1,5 @@
+import { FC, PropsWithChildren } from "react";
+//#region src/components/data-display/accordion/accordion-panel.d.ts
+declare const AccordionPanel: FC<PropsWithChildren>;
+//#endregion
+export { AccordionPanel };

package/dist/components/data-display/accordion/accordion-panel.mjs

@@ -0,0 +1,18 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { useItemId, useOpen } from "./context.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-display/accordion/accordion-panel.tsx
+const AccordionPanel = ({ children }) => {
+	const id = useItemId();
+	const open = useOpen();
+	return /* @__PURE__ */ jsx("section", {
+		"aria-labelledby": `${id}-button`,
+		className: cn({ hidden: !open }, "pb-4"),
+		hidden: !open,
+		id: `${id}-panel`,
+		children
+	});
+};
+//#endregion
+export { AccordionPanel };

package/dist/components/data-display/accordion/accordion.d.mts

@@ -0,0 +1,5 @@
+import { FC, PropsWithChildren } from "react";
+//#region src/components/data-display/accordion/accordion.d.ts
+declare const Accordion: FC<PropsWithChildren>;
+//#endregion
+export { Accordion };

package/dist/components/data-display/accordion/accordion.mjs

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-display/accordion/accordion.tsx
+const Accordion = ({ children }) => /* @__PURE__ */ jsx("div", {
+	className: "divide-border-mute vertical:flex vertical:h-full vertical:flex-col vertical:divide-y-0 vertical:[&>:not(:last-child)]:border-l vertical:[&>:not(:last-child)]:border-border-mute divide-y",
+	children
+});
+//#endregion
+export { Accordion };

package/dist/components/data-display/accordion/context.d.mts

@@ -0,0 +1,14 @@
+import { FC, PropsWithChildren } from "react";
+//#region src/components/data-display/accordion/context.d.ts
+type ToggleOpen = () => void;
+declare const useToggleOpen: () => ToggleOpen;
+declare const useItemId: () => string;
+declare const useOpen: () => boolean;
+declare const AccordionItemProvider: FC<PropsWithChildren<{
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onChange?: (isOpen: boolean) => void;
+  id: string;
+}>>;
+//#endregion
+export { AccordionItemProvider, useItemId, useOpen, useToggleOpen };

package/dist/components/data-display/accordion/context.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { createContext, use, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-display/accordion/context.tsx
+const OpenContext = createContext(false);
+const [ToggleOpenContext, useToggleOpen] = createSafeContext("useToggleOpen must be used within AccordionProvider");
+const [ItemIdContext, useItemId] = createSafeContext("useItemId must be used within AccordionProvider");
+const useOpen = () => use(OpenContext);
+const AccordionItemProvider = ({ isOpen, defaultOpen = false, onChange, id, children }) => {
+	const [open, setOpen] = useControllableState({
+		value: isOpen,
+		defaultValue: defaultOpen,
+		onChange
+	});
+	const toggle = useCallback(() => {
+		setOpen((prev) => !prev);
+	}, [setOpen]);
+	return /* @__PURE__ */ jsx(OpenContext, {
+		value: open,
+		children: /* @__PURE__ */ jsx(ToggleOpenContext, {
+			value: toggle,
+			children: /* @__PURE__ */ jsx(ItemIdContext, {
+				value: id,
+				children
+			})
+		})
+	});
+};
+//#endregion
+export { AccordionItemProvider, useItemId, useOpen, useToggleOpen };

package/dist/components/data-display/accordion/index.d.mts

@@ -0,0 +1,19 @@
+//#region src/components/data-display/accordion/index.d.ts
+declare const Accordion: {
+  readonly Root: import("react").FC<{
+    children?: import("react").ReactNode | undefined;
+  }>;
+  readonly Button: import("react").FC<{
+    children?: import("react").ReactNode | undefined;
+  }>;
+  readonly Item: import("react").FC<import("react").PropsWithChildren<{
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onChange?: (isOpen: boolean) => void;
+  }>>;
+  readonly Panel: import("react").FC<{
+    children?: import("react").ReactNode | undefined;
+  }>;
+};
+//#endregion
+export { Accordion };

package/dist/components/data-display/accordion/index.mjs

@@ -0,0 +1,13 @@
+import { Accordion as Accordion$1 } from "./accordion.mjs";
+import { AccordionButton } from "./accordion-button.mjs";
+import { AccordionItem } from "./accordion-item.mjs";
+import { AccordionPanel } from "./accordion-panel.mjs";
+//#region src/components/data-display/accordion/index.ts
+const Accordion = {
+	Root: Accordion$1,
+	Button: AccordionButton,
+	Item: AccordionItem,
+	Panel: AccordionPanel
+};
+//#endregion
+export { Accordion };

package/dist/components/data-display/avatar/avatar.d.mts

@@ -0,0 +1,14 @@
+import { FC, HTMLAttributes, ReactNode } from "react";
+//#region src/components/data-display/avatar/avatar.d.ts
+type Props = {
+  alt?: string;
+  color?: 'base' | 'primary' | 'secondary';
+  fallback?: string;
+  icon?: ReactNode;
+  name?: string;
+  size?: 'sm' | 'md' | 'lg';
+  src?: string;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'role' | 'aria-label' | 'className' | 'style'>;
+declare const Avatar: FC<Props>;
+//#endregion
+export { Avatar };

package/dist/components/data-display/avatar/avatar.mjs

@@ -0,0 +1,43 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { useMessages } from "../../../i18n/context.mjs";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-display/avatar/avatar.tsx
+const getInitials = (name) => {
+	if (name === void 0 || name === "") return "?";
+	const initials = name.trim().split(/\s+/u).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
+	return initials === "" ? "?" : initials;
+};
+const Avatar = ({ alt, color = "base", fallback, icon, name, size = "md", src, ...rest }) => {
+	const messages = useMessages();
+	const [failedSrc, setFailedSrc] = useState(null);
+	const showImage = Boolean(src) && failedSrc !== src;
+	const label = alt ?? name ?? messages.avatar;
+	const imageSize = size === "sm" ? 32 : size === "md" ? 40 : 56;
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		"aria-label": label,
+		className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full border font-medium", color === "base" && "border-border-base bg-bg-mute text-fg-base", color === "primary" && "border-transparent bg-primary-bg text-primary-fg", color === "secondary" && "border-transparent bg-secondary-bg text-secondary-fg", size === "sm" && "size-8 text-xs", size === "md" && "size-10 text-sm", size === "lg" && "size-14 text-lg"),
+		role: "img",
+		children: showImage ? /* @__PURE__ */ jsx("img", {
+			alt: alt ?? "",
+			className: "size-full object-cover",
+			height: imageSize,
+			onError: () => {
+				setFailedSrc(src ?? null);
+			},
+			src,
+			width: imageSize
+		}) : icon === void 0 ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			children: fallback ?? getInitials(name)
+		}) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn("flex items-center justify-center", size === "sm" && "[&_svg]:size-5", size === "md" && "[&_svg]:size-6", size === "lg" && "[&_svg]:size-8"),
+			children: icon
+		})
+	});
+};
+//#endregion
+export { Avatar };

package/dist/components/data-display/avatar/index.d.mts

@@ -0,0 +1,2 @@
+import { Avatar } from "./avatar.mjs";
+export { Avatar };

package/dist/components/data-display/avatar/index.mjs

@@ -0,0 +1,2 @@
+import { Avatar } from "./avatar.mjs";
+export { Avatar };

package/dist/components/data-display/badge/badge.d.mts

@@ -0,0 +1,21 @@
+import { ButtonHTMLAttributes, FC, HTMLAttributes } from "react";
+//#region src/components/data-display/badge/badge.d.ts
+type Size = 'sm' | 'md' | 'lg';
+type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+type Variant = 'solid' | 'outline';
+type BaseProps = {
+  label: string;
+  size?: Size;
+  tone?: Tone;
+  variant?: Variant;
+};
+type InteractiveProps = {
+  interactive: true;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className' | 'style' | 'type'>;
+type StaticProps = {
+  interactive?: false;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'className' | 'style'>;
+type Props = BaseProps & (InteractiveProps | StaticProps);
+declare const Badge: FC<Props>;
+//#endregion
+export { Badge };

package/dist/components/data-display/badge/badge.mjs

@@ -0,0 +1,27 @@
+import "../../_internal/focus-ring.mjs";
+import { cn } from "../../../helpers/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-display/badge/badge.tsx
+const badgeClassName = (size, tone, variant, interactive) => {
+	const interactiveClassName = cn(interactive && `cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info`, interactive && tone === "neutral" && variant === "solid" && "hover:bg-bg-emphasize active:bg-bg-base", interactive && tone === "neutral" && variant === "outline" && "hover:bg-bg-subtle active:bg-bg-mute", interactive && tone === "info" && variant === "solid" && "hover:bg-bg-info/80 active:bg-bg-info/60", interactive && tone === "info" && variant === "outline" && "hover:bg-bg-info active:bg-bg-info/80", interactive && tone === "success" && variant === "solid" && "hover:bg-bg-success/80 active:bg-bg-success/60", interactive && tone === "success" && variant === "outline" && "hover:bg-bg-success active:bg-bg-success/80", interactive && tone === "warning" && variant === "solid" && "hover:bg-bg-warning/80 active:bg-bg-warning/60", interactive && tone === "warning" && variant === "outline" && "hover:bg-bg-warning active:bg-bg-warning/80", interactive && tone === "error" && variant === "solid" && "hover:bg-bg-error/80 active:bg-bg-error/60", interactive && tone === "error" && variant === "outline" && "hover:bg-bg-error active:bg-bg-error/80");
+	return cn("inline-flex items-center rounded-full border font-medium transition-colors", size === "sm" && "px-2 py-0.5 text-xs", size === "md" && "px-2.5 py-1 text-xs", size === "lg" && "px-3 py-1.5 text-sm", tone === "neutral" && variant === "solid" && "border-border-mute bg-bg-mute text-fg-base", tone === "neutral" && variant === "outline" && "border-border-base bg-bg-base text-fg-base", tone === "info" && variant === "solid" && "border-border-info bg-bg-info text-fg-info", tone === "info" && variant === "outline" && "border-border-info bg-bg-base text-fg-info", tone === "success" && variant === "solid" && "border-border-success bg-bg-success text-fg-success", tone === "success" && variant === "outline" && "border-border-success bg-bg-base text-fg-success", tone === "warning" && variant === "solid" && "border-border-warning bg-bg-warning text-fg-warning", tone === "warning" && variant === "outline" && "border-border-warning bg-bg-base text-fg-warning", tone === "error" && variant === "solid" && "border-border-error bg-bg-error text-fg-error", tone === "error" && variant === "outline" && "border-border-error bg-bg-base text-fg-error", interactiveClassName);
+};
+const Badge = (props) => {
+	if (props.interactive === true) {
+		const { interactive, label, size = "md", tone = "neutral", variant = "solid", ...rest } = props;
+		return /* @__PURE__ */ jsx("button", {
+			...rest,
+			className: badgeClassName(size, tone, variant, interactive),
+			type: "button",
+			children: label
+		});
+	}
+	const { interactive = false, label, size = "md", tone = "neutral", variant = "solid", ...rest } = props;
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		className: badgeClassName(size, tone, variant, interactive),
+		children: label
+	});
+};
+//#endregion
+export { Badge };

package/dist/components/data-display/badge/index.d.mts

@@ -0,0 +1,2 @@
+import { Badge } from "./badge.mjs";
+export { Badge };

package/dist/components/data-display/badge/index.mjs

@@ -0,0 +1,2 @@
+import { Badge } from "./badge.mjs";
+export { Badge };

package/dist/components/data-display/card/card.d.mts

@@ -0,0 +1,10 @@
+import { FC, HTMLAttributes } from "react";
+//#region src/components/data-display/card/card.d.ts
+type CardProps = {
+  width?: 'full' | 'fit';
+  variant?: 'shadow' | 'outline';
+  interactive?: boolean;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+declare const Card: FC<CardProps>;
+//#endregion
+export { Card };