@k8o/arte-odyssey 7.0.0 → 8.0.0

package/README.md

@@ -58,7 +58,11 @@ import { Card } from '@k8o/arte-odyssey';
 function MyPage() {
   return (
     <Card title="Welcome to ArteOdyssey">
-      <Button color="primary" variant="contained" onClick={() => alert('Hello!')}>
+      <Button
+        color="primary"
+        variant="contained"
+        onClick={() => alert('Hello!')}
+      >
         Click me
       </Button>
     </Card>
@@ -164,7 +168,9 @@ import { Button } from '@k8o/arte-odyssey';
     label="Email"
     isRequired
     errorText={error}
-    renderInput={(props) => <TextField {...props} id="email" placeholder="Enter your email" />}
+    renderInput={(props) => (
+      <TextField {...props} id="email" placeholder="Enter your email" />
+    )}
   />
   <Button type="submit">Submit</Button>
 </form>;
@@ -185,7 +191,10 @@ function MyComponent() {
       <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
       {isOpen && (
         <Dialog.Root>
-          <Dialog.Header title="Confirm Action" onClose={() => setIsOpen(false)} />
+          <Dialog.Header
+            title="Confirm Action"
+            onClose={() => setIsOpen(false)}
+          />
           <Dialog.Content>
             <p>Are you sure you want to continue?</p>
             <Button onClick={() => setIsOpen(false)}>Confirm</Button>

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,36 +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;
-	return /* @__PURE__ */ jsxs("button", {
+	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 === "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-fg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize": variant === "contained" && color === "primary",
-			"border-transparent bg-secondary-bg text-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 hover:bg-bg-base active:bg-bg-base": 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 hover:bg-transparent hover:text-fg-mute active:bg-transparent active:text-fg-mute": 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", Boolean(resolvedStartIcon ?? endIcon) && "flex items-center gap-2", resolvedStartIcon && endIcon ? "justify-between" : resolvedStartIcon && variant !== "skeleton" ? "justify-center" : endIcon && "justify-between"),
+			"cursor-not-allowed bg-bg-base opacity-35": isDisabled && variant === "outlined",
+			"cursor-not-allowed bg-transparent text-fg-mute opacity-35": isDisabled && variant === "skeleton"
+		}),
 		disabled: isDisabled,
 		onClick: handleClick,
 		ref,
-		type,
+		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,18 +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 ? 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,
-		...props,
-		children: [!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/accordion/accordion.mjs

@@ -1,10 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/accordion/accordion.tsx
-const Accordion = ({ children }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: "divide-y divide-border-mute",
-		children
-	});
-};
+const Accordion = ({ children }) => /* @__PURE__ */ jsx("div", {
+	className: "divide-border-mute divide-y",
+	children
+});
 //#endregion
 export { Accordion };

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

@@ -14,7 +14,7 @@ const useToggleOpen = () => {
 };
 const useItemId = () => {
 	const id = use(ItemIdContext);
-	if (!id) throw new Error("useItemId must be used within AccordionProvider");
+	if (id === void 0 || id === "") throw new Error("useItemId must be used within AccordionProvider");
 	return id;
 };
 const AccordionItemProvider = ({ defaultOpen = false, id, children }) => {

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

@@ -4,17 +4,19 @@ import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/avatar/avatar.tsx
 const getInitials = (name) => {
-	if (!name) return "?";
-	return name.trim().split(/\s+/).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("") || "?";
+	if (name === void 0 || name === "") return "?";
+	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/baseline-status/baseline-status.mjs

@@ -10,11 +10,11 @@ const loadBaselineStatus = () => {
 const BaselineStatusResolved = ({ featureId }) => {
 	use(loadBaselineStatus());
 	return /* @__PURE__ */ jsx("baseline-status", {
-		className: "wrap-normal max-w-full rounded-lg border border-border-base bg-bg-base p-4",
+		className: "border-border-base bg-bg-base max-w-full rounded-lg border p-4 wrap-normal",
 		featureId
 	});
 };
-const BaselineStatusSkeleton = () => /* @__PURE__ */ jsx("div", { className: "h-58 max-w-full animate-pulse rounded-lg border border-border-base bg-bg-base p-4 sm:h-40 md:h-30" });
+const BaselineStatusSkeleton = () => /* @__PURE__ */ jsx("div", { className: "border-border-base bg-bg-base h-58 max-w-full animate-pulse rounded-lg border p-4 sm:h-40 md:h-30" });
 const BaselineStatus = ({ featureId }) => /* @__PURE__ */ jsx(Suspense, {
 	fallback: /* @__PURE__ */ jsx(BaselineStatusSkeleton, {}),
 	children: /* @__PURE__ */ jsx(BaselineStatusResolved, { featureId })

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,28 +1,31 @@
+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: "m-0.5 rounded-md bg-bg-mute 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 = [];
 	let lastIndex = 0;
-	colors.forEach((colorInfo, index) => {
+	for (const [index, colorInfo] of colors.entries()) {
 		if (colorInfo.start > lastIndex) parts.push(children.slice(lastIndex, colorInfo.start));
 		parts.push(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			"aria-label": `Color: ${colorInfo.color}`,
-			className: "inline-block h-3 w-3 shrink-0 rounded-sm border border-border-base",
+			className: "border-border-base inline-block size-3 shrink-0 rounded-sm border",
 			role: "img",
 			style: { backgroundColor: colorInfo.color }
 		}), children.slice(colorInfo.start, colorInfo.end)] }, `color-${String(index)}`));
 		lastIndex = colorInfo.end;
-	});
+	}
 	if (lastIndex < children.length) parts.push(children.slice(lastIndex));
 	return /* @__PURE__ */ jsx("code", {
-		className: "m-0.5 inline-flex items-center gap-1 rounded-md bg-bg-mute 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
 	});
 };