@k8o/arte-odyssey 7.0.1 → 8.0.0

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

@@ -1,15 +1,21 @@
 import { FC, HTMLProps, ReactNode } from "react";
 
 //#region src/components/buttons/button/button.d.ts
-declare const Button: FC<{
+type Props = {
   type?: 'button' | 'submit';
   size?: 'sm' | 'md' | 'lg';
   color?: 'primary' | 'secondary' | 'gray';
   variant?: 'contained' | 'outlined' | 'skeleton';
   fullWidth?: boolean;
+  isActive?: boolean;
   startIcon?: ReactNode;
   endIcon?: ReactNode;
   onAction?: () => void | Promise<void>;
-} & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>>;
+  renderItem?: (props: {
+    className: string;
+    children: ReactNode;
+  }) => ReactNode;
+} & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>;
+declare const Button: FC<Props>;
 //#endregion
 export { Button };

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

@@ -3,9 +3,9 @@ import { cn } from "../../../helpers/cn.mjs";
 import { Spinner } from "../../feedback/spinner/spinner.mjs";
 import { useTransition } from "react";
 import { useFormStatus } from "react-dom";
-import { jsx, jsxs } from "react/jsx-runtime";
+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 = "contained", disabled = false, fullWidth = false, onAction, onClick, startIcon, endIcon, ...rest }) => {
+const Button = ({ ref, children, type = "button", size = "md", color = "primary", variant = "contained", 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;
@@ -17,38 +17,45 @@ const Button = ({ ref, children, type = "button", size = "md", color = "primary"
 			await onAction();
 		});
 	} : void 0;
-	const resolvedStartIcon = isPending ? /* @__PURE__ */ jsx(Spinner, {
+	const resolvedStartIcon = !renderItem && isPending ? /* @__PURE__ */ jsx(Spinner, {
 		label: "Loading",
 		size: size === "lg" ? "md" : "sm"
 	}) : startIcon;
 	const hasStartIcon = resolvedStartIcon !== void 0;
 	const hasEndIcon = endIcon !== void 0;
-	return /* @__PURE__ */ jsxs("button", {
+	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 === "contained" && color === "primary",
+		"border-transparent bg-secondary-bg text-secondary-fg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize": variant === "contained" && color === "secondary",
+		"border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute/80 active:bg-bg-mute": variant === "contained" && color === "gray",
+		"border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "primary",
+		"border-secondary-border bg-bg-base text-secondary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "secondary",
+		"border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "gray",
+		"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-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", 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", (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("cursor-pointer 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 === "contained" && color === "primary",
-			"border-transparent bg-secondary-bg text-secondary-fg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize": variant === "contained" && color === "secondary",
-			"border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute/80 active:bg-bg-mute": variant === "contained" && color === "gray",
+		className: cn(baseClassName, "cursor-pointer", {
 			"cursor-not-allowed opacity-35 hover:bg-primary-bg active:bg-primary-bg": isDisabled && variant === "contained" && color === "primary",
 			"cursor-not-allowed opacity-35 hover:bg-secondary-bg active:bg-secondary-bg": isDisabled && variant === "contained" && color === "secondary",
 			"cursor-not-allowed opacity-35 hover:bg-bg-subtle active:bg-bg-subtle": isDisabled && variant === "contained" && color === "gray",
-			"border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "primary",
-			"border-secondary-border bg-bg-base text-secondary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "secondary",
-			"border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "gray",
 			"cursor-not-allowed bg-bg-base opacity-35": isDisabled && variant === "outlined",
-			"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",
 			"cursor-not-allowed bg-transparent text-fg-mute opacity-35": isDisabled && variant === "skeleton"
-		}, "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", 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", (hasStartIcon || hasEndIcon) && "flex items-center gap-2", hasStartIcon && hasEndIcon ? "justify-between" : hasStartIcon && variant !== "skeleton" ? "justify-center" : hasEndIcon && "justify-between"),
+		}),
 		disabled: isDisabled,
 		onClick: handleClick,
 		ref,
 		type: type === "submit" ? "submit" : "button",
 		...rest,
-		children: [
-			resolvedStartIcon,
-			children,
-			endIcon
-		]
+		children: composedChildren
 	});
 };
 //#endregion

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

@@ -1,12 +1,23 @@
-import { FC, HTMLProps } from "react";
+import { TooltipTriggerProps } from "../../overlays/tooltip/tooltip.mjs";
+import { FC, HTMLProps, ReactNode } from "react";
+import { Placement } from "@floating-ui/react";
 
 //#region src/components/buttons/icon-button/icon-button.d.ts
+type IconButtonTriggerProps = Partial<TooltipTriggerProps>;
 type Props = {
   size?: 'sm' | 'md' | 'lg';
   bg?: 'transparent' | 'base' | 'primary' | 'secondary';
   label: string;
+  tooltipPlacement?: Placement;
+  tooltipDisabled?: boolean;
   onAction?: () => void | Promise<void>;
+  renderItem?: (props: {
+    className: string;
+    children: ReactNode;
+    'aria-label': string;
+    triggerProps: IconButtonTriggerProps;
+  }) => ReactNode;
 } & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>;
 declare const IconButton: FC<Props>;
 //#endregion
-export { IconButton };
+export { IconButton, IconButtonTriggerProps };

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

@@ -1,10 +1,16 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
+import { Tooltip } from "../../overlays/tooltip/tooltip.mjs";
+import { mergeRefs } from "../../../helpers/merge-refs.mjs";
 import { useTransition } from "react";
 import { useFormStatus } from "react-dom";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/buttons/icon-button/icon-button.tsx
-const IconButton = ({ ref, size = "md", bg = "transparent", label, children, onAction, onClick, disabled, ...props }) => {
+const joinIds = (...ids) => {
+	const filtered = ids.filter(Boolean);
+	return filtered.length === 0 ? void 0 : filtered.join(" ");
+};
+const IconButton = ({ ref, size = "md", bg = "transparent", label, tooltipPlacement = "bottom", 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;
@@ -16,19 +22,72 @@ const IconButton = ({ ref, size = "md", bg = "transparent", label, children, onA
 			await onAction();
 		});
 	} : void 0;
-	return /* @__PURE__ */ jsxs("button", {
-		"aria-busy": isPending || void 0,
-		"aria-label": props.role !== void 0 && props.role !== "" ? label : void 0,
-		className: cn("inline-flex cursor-pointer rounded-full transition-colors", "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", (bg === "transparent" || bg === "base") && "hover:bg-bg-subtle active:bg-bg-mute", bg === "base" && "bg-bg-base", bg === "transparent" && "bg-transparent", bg === "primary" && "bg-primary-bg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize", bg === "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", isDisabled && "cursor-not-allowed opacity-50 hover:bg-transparent active:bg-transparent"),
-		disabled: isDisabled,
-		onClick: handleClick,
-		ref,
-		type: "button",
-		...props,
-		children: [(props.role === void 0 || props.role === "") && /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: label
-		}), children]
+	const className = cn("inline-flex rounded-full transition-colors", "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", (bg === "transparent" || bg === "base") && "hover:bg-bg-subtle active:bg-bg-mute", bg === "base" && "bg-bg-base", bg === "transparent" && "bg-transparent", bg === "primary" && "bg-primary-bg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize", bg === "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: (e) => {
+					triggerProps.onBlur(e);
+					onBlur?.(e);
+				},
+				onClick: handleClick,
+				onFocus: (e) => {
+					triggerProps.onFocus(e);
+					onFocus?.(e);
+				},
+				onMouseEnter: (e) => {
+					triggerProps.onMouseEnter(e);
+					onMouseEnter?.(e);
+				},
+				onMouseLeave: (e) => {
+					triggerProps.onMouseLeave(e);
+					onMouseLeave?.(e);
+				},
+				ref: mergeRefs(ref, triggerProps.ref),
+				type: "button",
+				children
+			});
+		} }), /* @__PURE__ */ jsx(Tooltip.Content, { children: label })]
 	});
 };
 //#endregion

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

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, HTMLAttributes } from "react";
 
 //#region src/components/data-display/avatar/avatar.d.ts
 type Props = {
@@ -7,7 +7,7 @@ type Props = {
   name?: string;
   size?: 'sm' | 'md' | 'lg';
   src?: string;
-};
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'role' | 'aria-label'>;
 declare const Avatar: FC<Props>;
 //#endregion
 export { Avatar };

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

@@ -8,14 +8,15 @@ const getInitials = (name) => {
 	const initials = name.trim().split(/\s+/).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
 	return initials === "" ? "?" : initials;
 };
-const Avatar = ({ alt, fallback, name, size = "md", src }) => {
+const Avatar = ({ alt, fallback, name, size = "md", src, className, ...rest }) => {
 	const [failedSrc, setFailedSrc] = useState(null);
 	const showImage = Boolean(src) && failedSrc !== src;
 	const label = alt ?? name ?? "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 border-border-base bg-bg-mute font-medium text-fg-base", size === "sm" && "size-8 text-xs", size === "md" && "size-10 text-sm", size === "lg" && "size-14 text-lg"),
+		className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border-base bg-bg-mute font-medium text-fg-base", size === "sm" && "size-8 text-xs", size === "md" && "size-10 text-sm", size === "lg" && "size-14 text-lg", className),
 		role: "img",
 		children: showImage ? /* @__PURE__ */ jsx("img", {
 			alt: alt ?? "",

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

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, HTMLAttributes } from "react";
 
 //#region src/components/data-display/badge/badge.d.ts
 type Props = {
@@ -7,7 +7,7 @@ type Props = {
   interactive?: boolean;
   tone?: 'neutral' | 'info' | 'success' | 'warning' | 'error';
   variant?: 'solid' | 'outline';
-};
+} & Omit<HTMLAttributes<HTMLElement>, 'children'>;
 declare const Badge: FC<Props>;
 //#endregion
 export { Badge };

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

@@ -1,16 +1,18 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/badge/badge.tsx
-const Badge = ({ interactive = false, size = "md", text, tone = "neutral", variant = "solid" }) => {
+const Badge = ({ interactive = false, size = "md", text, tone = "neutral", variant = "solid", className, ...rest }) => {
 	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");
 	const badgeClassName = 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", 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);
 	if (interactive) return /* @__PURE__ */ jsx("button", {
-		className: badgeClassName,
+		...rest,
+		className: cn(badgeClassName, className),
 		type: "button",
 		children: text
 	});
 	return /* @__PURE__ */ jsx("span", {
-		className: badgeClassName,
+		...rest,
+		className: cn(badgeClassName, className),
 		children: text
 	});
 };

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

@@ -1,8 +1,9 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/card/card.tsx
-const Card = ({ children, width = "full", appearance = "shadow" }) => /* @__PURE__ */ jsx("div", {
-	className: cn("rounded-xl", appearance === "shadow" && "shadow-sm", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", "bg-bg-base"),
+const Card = ({ children, width = "full", appearance = "shadow", className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cn("rounded-xl", appearance === "shadow" && "shadow-sm", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", "bg-bg-base", className),
 	children
 });
 //#endregion

package/dist/components/data-display/card/interactive-card.mjs

@@ -1,8 +1,9 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/card/interactive-card.tsx
-const InteractiveCard = ({ children, width = "full", appearance = "shadow" }) => /* @__PURE__ */ jsx("div", {
-	className: cn("rounded-xl transition-transform hover:scale-[1.02] active:scale-[0.98]", appearance === "shadow" && "shadow-sm", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", "bg-bg-base"),
+const InteractiveCard = ({ children, width = "full", appearance = "shadow", className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cn("rounded-xl transition-transform hover:scale-[1.02] active:scale-[0.98]", appearance === "shadow" && "shadow-sm", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", "bg-bg-base", className),
 	children
 });
 //#endregion

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

@@ -1,9 +1,9 @@
-import { PropsWithChildren } from "react";
+import { HTMLAttributes } from "react";
 
 //#region src/components/data-display/card/type.d.ts
-type CardProps = PropsWithChildren<{
+type CardProps = {
   width?: 'full' | 'fit';
   appearance?: 'shadow' | 'bordered';
-}>;
+} & HTMLAttributes<HTMLDivElement>;
 //#endregion
 export { CardProps };

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

@@ -1,8 +1,9 @@
-import { FC } from "react";
+import { FC, HTMLAttributes } from "react";
 
 //#region src/components/data-display/code/code.d.ts
-declare const Code: FC<{
+type Props = {
   children: string;
-}>;
+} & Omit<HTMLAttributes<HTMLElement>, 'children'>;
+declare const Code: FC<Props>;
 //#endregion
 export { Code };

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

@@ -1,11 +1,13 @@
+import { cn } from "../../../helpers/cn.mjs";
 import { findAllColors } from "../../../helpers/color/find-all-colors.mjs";
 import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-display/code/code.tsx
-const Code = ({ children }) => {
+const Code = ({ children, className, ...rest }) => {
 	const colors = findAllColors(children);
 	if (colors.length === 0) return /* @__PURE__ */ jsx("code", {
-		className: "bg-bg-mute m-0.5 rounded-md px-1.5 sm:py-0.5",
+		...rest,
+		className: cn("bg-bg-mute m-0.5 rounded-md px-1.5 sm:py-0.5", className),
 		children
 	});
 	const parts = [];
@@ -22,7 +24,8 @@ const Code = ({ children }) => {
 	}
 	if (lastIndex < children.length) parts.push(children.slice(lastIndex));
 	return /* @__PURE__ */ jsx("code", {
-		className: "bg-bg-mute m-0.5 inline-flex items-center gap-1 rounded-md px-1.5 sm:py-0.5",
+		...rest,
+		className: cn("bg-bg-mute m-0.5 inline-flex items-center gap-1 rounded-md px-1.5 sm:py-0.5", className),
 		children: parts
 	});
 };

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

@@ -1,11 +1,10 @@
-import { FC, PropsWithChildren } from "react";
+import { FC, HTMLAttributes } from "react";
 
 //#region src/components/data-display/heading/heading.d.ts
-type Props = PropsWithChildren<{
-  id?: string;
+type Props = {
   type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   lineClamp?: number;
-}>;
+} & HTMLAttributes<HTMLHeadingElement>;
 declare const Heading: FC<Props>;
 //#endregion
 export { Heading };

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

@@ -1,35 +1,36 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/heading/heading.tsx
-const Heading = ({ children, id, type, lineClamp }) => {
+const Heading = ({ children, type, lineClamp, className, ...rest }) => {
+	const lineClampClass = { [`line-clamp-${lineClamp?.toString() ?? ""}`]: lineClamp };
 	if (type === "h1") return /* @__PURE__ */ jsx("h1", {
-		className: cn("font-bold text-2xl md:text-3xl", { [`line-clamp-${lineClamp?.toString() ?? ""}`]: lineClamp }),
-		id,
+		...rest,
+		className: cn("font-bold text-2xl md:text-3xl", lineClampClass, className),
 		children
 	});
 	if (type === "h2") return /* @__PURE__ */ jsx("h2", {
-		className: cn("font-bold text-xl md:text-2xl", { [`line-clamp-${lineClamp?.toString() ?? ""}`]: lineClamp }),
-		id,
+		...rest,
+		className: cn("font-bold text-xl md:text-2xl", lineClampClass, className),
 		children
 	});
 	if (type === "h3") return /* @__PURE__ */ jsx("h3", {
-		className: cn("font-bold text-lg md:text-xl", { [`line-clamp-${lineClamp?.toString() ?? ""}`]: lineClamp }),
-		id,
+		...rest,
+		className: cn("font-bold text-lg md:text-xl", lineClampClass, className),
 		children
 	});
 	if (type === "h4") return /* @__PURE__ */ jsx("h4", {
-		className: cn("font-bold text-md md:text-lg", { [`line-clamp-${lineClamp?.toString() ?? ""}`]: lineClamp }),
-		id,
+		...rest,
+		className: cn("font-bold text-md md:text-lg", lineClampClass, className),
 		children
 	});
 	if (type === "h5") return /* @__PURE__ */ jsx("h5", {
-		className: cn("font-bold text-sm md:text-md", { [`line-clamp-${lineClamp?.toString() ?? ""}`]: lineClamp }),
-		id,
+		...rest,
+		className: cn("font-bold text-sm md:text-md", lineClampClass, className),
 		children
 	});
 	return /* @__PURE__ */ jsx("h6", {
-		className: cn("font-bold text-xs md:text-sm", { [`line-clamp-${lineClamp?.toString() ?? ""}`]: lineClamp }),
-		id,
+		...rest,
+		className: cn("font-bold text-xs md:text-sm", lineClampClass, className),
 		children
 	});
 };

package/dist/components/feedback/alert/alert.d.mts

@@ -1,11 +1,11 @@
 import { Status } from "../../../types/variables.mjs";
-import { FC } from "react";
+import { FC, HTMLAttributes } from "react";
 
 //#region src/components/feedback/alert/alert.d.ts
 type Props = {
   status: Status;
   message: string | string[];
-};
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>;
 declare const Alert: FC<Props>;
 //#endregion
 export { Alert };

package/dist/components/feedback/alert/alert.mjs

@@ -8,8 +8,9 @@ const STATUS_LABEL = {
 	warning: "警告",
 	error: "エラー"
 };
-const Alert = ({ status, message }) => /* @__PURE__ */ jsxs("div", {
-	className: cn("flex items-center gap-3 rounded-lg p-4", status === "success" && "bg-bg-success", status === "info" && "bg-bg-info", status === "warning" && "bg-bg-warning", status === "error" && "bg-bg-error"),
+const Alert = ({ status, message, className, ...rest }) => /* @__PURE__ */ jsxs("div", {
+	...rest,
+	className: cn("flex items-center gap-3 rounded-lg p-4", status === "success" && "bg-bg-success", status === "info" && "bg-bg-info", status === "warning" && "bg-bg-warning", status === "error" && "bg-bg-error", className),
 	role: status === "error" || status === "warning" ? "alert" : "status",
 	children: [/* @__PURE__ */ jsxs("span", {
 		className: cn(status === "success" && "text-fg-success", status === "info" && "text-fg-info", status === "warning" && "text-fg-warning", status === "error" && "text-fg-error"),

package/dist/components/feedback/progress/progress.d.mts

@@ -1,11 +1,12 @@
-import { FC } from "react";
+import { FC, HTMLAttributes } from "react";
 
 //#region src/components/feedback/progress/progress.d.ts
-declare const Progress: FC<{
+type Props = {
   progress: number;
   maxProgress: number;
   minProgress?: number;
   label?: string;
-}>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+declare const Progress: FC<Props>;
 //#endregion
 export { Progress };

package/dist/components/feedback/progress/progress.mjs

@@ -1,8 +1,10 @@
+import { cn } from "../../../helpers/cn.mjs";
 import { toPrecision } from "../../../helpers/number/to-precision.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/feedback/progress/progress.tsx
-const Progress = ({ progress, maxProgress, minProgress = 0, label }) => /* @__PURE__ */ jsx("div", {
-	className: "bg-bg-emphasize w-full rounded-full",
+const Progress = ({ progress, maxProgress, minProgress = 0, label, className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cn("bg-bg-emphasize w-full rounded-full", className),
 	children: /* @__PURE__ */ jsx("div", {
 		"aria-label": label ?? `${toPrecision(progress / maxProgress).toString()}%`,
 		"aria-valuemax": maxProgress,

package/dist/components/feedback/skeleton/skeleton.d.mts

@@ -1,11 +1,11 @@
-import { FC } from "react";
+import { FC, HTMLAttributes } from "react";
 
 //#region src/components/feedback/skeleton/skeleton.d.ts
 type Props = {
   animate?: boolean;
   shape?: 'rect' | 'circle';
   size?: 'sm' | 'md' | 'lg';
-};
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
 declare const Skeleton: FC<Props>;
 //#endregion
 export { Skeleton };

package/dist/components/feedback/skeleton/skeleton.mjs

@@ -1,9 +1,10 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/feedback/skeleton/skeleton.tsx
-const Skeleton = ({ animate = true, shape = "rect", size = "md" }) => /* @__PURE__ */ jsx("div", {
+const Skeleton = ({ animate = true, shape = "rect", size = "md", className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
 	"aria-hidden": true,
-	className: cn("bg-bg-mute", animate && "animate-pulse", shape === "rect" && "rounded-lg", shape === "rect" && size === "sm" && "h-3 w-24", shape === "rect" && size === "md" && "h-4 w-40", shape === "rect" && size === "lg" && "h-5 w-56", shape === "circle" && "rounded-full", shape === "circle" && size === "sm" && "size-8", shape === "circle" && size === "md" && "size-12", shape === "circle" && size === "lg" && "size-16")
+	className: cn("bg-bg-mute", animate && "animate-pulse", shape === "rect" && "rounded-lg", shape === "rect" && size === "sm" && "h-3 w-24", shape === "rect" && size === "md" && "h-4 w-40", shape === "rect" && size === "lg" && "h-5 w-56", shape === "circle" && "rounded-full", shape === "circle" && size === "sm" && "size-8", shape === "circle" && size === "md" && "size-12", shape === "circle" && size === "lg" && "size-16", className)
 });
 //#endregion
 export { Skeleton };

package/dist/components/feedback/spinner/spinner.d.mts

@@ -1,10 +1,10 @@
-import { FC } from "react";
+import { FC, OutputHTMLAttributes } from "react";
 
 //#region src/components/feedback/spinner/spinner.d.ts
 type Props = {
   label?: string;
   size?: 'sm' | 'md' | 'lg';
-};
+} & Omit<OutputHTMLAttributes<HTMLOutputElement>, 'children' | 'aria-label'>;
 declare const Spinner: FC<Props>;
 //#endregion
 export { Spinner };

package/dist/components/feedback/spinner/spinner.mjs

@@ -1,10 +1,11 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/feedback/spinner/spinner.tsx
-const Spinner = ({ label = "Loading", size = "md" }) => /* @__PURE__ */ jsxs("output", {
+const Spinner = ({ label = "Loading", size = "md", className, ...rest }) => /* @__PURE__ */ jsxs("output", {
+	...rest,
 	"aria-label": label,
 	"aria-live": "polite",
-	className: "inline-flex items-center justify-center",
+	className: cn("inline-flex items-center justify-center", className),
 	children: [/* @__PURE__ */ jsx("span", {
 		"aria-hidden": true,
 		className: cn("inline-block animate-spin rounded-full border-4 border-border-base border-t-primary-border", size === "sm" && "size-4", size === "md" && "size-6", size === "lg" && "size-8")

package/dist/components/feedback/toast/toast.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { Alert } from "../alert/alert.mjs";
 import { useToast } from "./context.mjs";
+import { Alert } from "../alert/alert.mjs";
 import { useTimeout } from "../../../hooks/timeout/index.mjs";
 import { useCallback } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/form/autocomplete/autocomplete.d.mts

@@ -1,16 +1,12 @@
 import { Option } from "../../../types/variables.mjs";
-import { FC } from "react";
+import { FC, InputHTMLAttributes } from "react";
 
 //#region src/components/form/autocomplete/autocomplete.d.ts
 type BaseProps = {
   id: string;
-  name?: string;
-  describedbyId: string | undefined;
-  isInvalid: boolean;
-  isDisabled: boolean;
-  isRequired: boolean;
+  invalid?: boolean;
   options: readonly Option[];
-};
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'className' | 'value' | 'onChange' | 'defaultValue' | 'children' | 'id' | 'autoComplete' | 'aria-autocomplete' | 'aria-controls' | 'aria-expanded'>;
 type ControlledProps = {
   value: string[];
   onChange: (value: string[]) => void;