@k8o/arte-odyssey 6.0.1 → 7.0.1

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

@@ -9,6 +9,7 @@ declare const Button: FC<{
   fullWidth?: boolean;
   startIcon?: ReactNode;
   endIcon?: ReactNode;
+  onAction?: () => void | Promise<void>;
 } & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>>;
 //#endregion
 export { Button };

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

@@ -1,29 +1,51 @@
+"use client";
 import { cn } from "../../../helpers/cn.mjs";
-import { jsxs } from "react/jsx-runtime";
+import { Spinner } from "../../feedback/spinner/spinner.mjs";
+import { useTransition } from "react";
+import { useFormStatus } from "react-dom";
+import { 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, onClick, startIcon, endIcon, ...rest }) => {
+const Button = ({ ref, children, type = "button", size = "md", color = "primary", variant = "contained", disabled = false, fullWidth = false, onAction, onClick, startIcon, endIcon, ...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 = 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", {
+		"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-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",
-			"cursor-not-allowed opacity-35 hover:bg-primary-bg active:bg-primary-bg": disabled && variant === "contained" && color === "primary",
-			"cursor-not-allowed opacity-35 hover:bg-secondary-bg active:bg-secondary-bg": disabled && variant === "contained" && color === "secondary",
-			"cursor-not-allowed opacity-35 hover:bg-bg-subtle active:bg-bg-subtle": disabled && variant === "contained" && color === "gray",
+			"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": disabled && variant === "outlined",
+			"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 hover:bg-transparent hover:text-fg-mute active:bg-transparent active:text-fg-mute": disabled && 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(startIcon ?? endIcon) && "flex items-center gap-2", startIcon && endIcon ? "justify-between" : startIcon && variant !== "skeleton" ? "justify-center" : endIcon && "justify-between"),
-		disabled,
-		onClick,
+			"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: type === "submit" ? "submit" : "button",
 		...rest,
 		children: [
-			startIcon,
+			resolvedStartIcon,
 			children,
 			endIcon
 		]

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

@@ -5,6 +5,7 @@ type Props = {
   size?: 'sm' | 'md' | 'lg';
   bg?: 'transparent' | 'base' | 'primary' | 'secondary';
   label: string;
+  onAction?: () => void | Promise<void>;
 } & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>;
 declare const IconButton: FC<Props>;
 //#endregion

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

@@ -1,13 +1,31 @@
+"use client";
 import { cn } from "../../../helpers/cn.mjs";
+import { useTransition } from "react";
+import { useFormStatus } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/buttons/icon-button/icon-button.tsx
-const IconButton = ({ ref, size = "md", bg = "transparent", label, children, ...props }) => {
+const IconButton = ({ ref, size = "md", bg = "transparent", label, children, onAction, onClick, disabled, ...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;
 	return /* @__PURE__ */ jsxs("button", {
-		"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", props.disabled && "cursor-not-allowed opacity-50 hover:bg-transparent active:bg-transparent"),
+		"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 && /* @__PURE__ */ jsx("span", {
+		children: [(props.role === void 0 || props.role === "") && /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: label
 		}), children]

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

@@ -2,9 +2,9 @@ import { cn } from "../../../helpers/cn.mjs";
 import { isInternalRoute } from "../../../helpers/is-internal-route.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/buttons/icon-link/icon-link.tsx
-const IconLink = ({ size = "md", bg = "transparent", label, href, children, openInNewTab = false, renderAnchor = ({ children, ...props }) => /* @__PURE__ */ jsx("a", {
-	...props,
-	children
+const IconLink = ({ size = "md", bg = "transparent", label, href, children, openInNewTab = false, renderAnchor = ({ children: anchorChildren, ...rest }) => /* @__PURE__ */ jsx("a", {
+	...rest,
+	children: anchorChildren
 }) }) => {
 	const props = (isInternalRoute(href) && !openInNewTab ? "internal" : "external") === "internal" ? {} : {
 		target: "_blank",

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

@@ -2,9 +2,9 @@ import { cn } from "../../../helpers/cn.mjs";
 import { isInternalRoute } from "../../../helpers/is-internal-route.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/buttons/link-button/link-button.tsx
-const LinkButton = ({ children, size = "md", color = "primary", variant = "contained", href, startIcon, endIcon, active = false, openInNewTab = false, renderAnchor = ({ children, ...props }) => /* @__PURE__ */ jsx("a", {
-	...props,
-	children
+const LinkButton = ({ children, size = "md", color = "primary", variant = "contained", href, startIcon, endIcon, active = false, openInNewTab = false, renderAnchor = ({ children: anchorChildren, ...rest }) => /* @__PURE__ */ jsx("a", {
+	...rest,
+	children: anchorChildren
 }) }) => {
 	const props = (isInternalRoute(href) && !openInNewTab ? "internal" : "external") === "internal" ? {} : {
 		target: "_blank",
@@ -13,14 +13,14 @@ const LinkButton = ({ children, size = "md", color = "primary", variant = "conta
 	return renderAnchor({
 		href,
 		className: cn("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-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", Boolean(startIcon ?? endIcon) && "flex items-center gap-2", Boolean(endIcon) && "justify-between", active && "text-fg-info hover:text-fg-info active:text-fg-info"),
+		}, "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", Boolean(startIcon ?? endIcon) && "flex items-center gap-2", Boolean(endIcon) && "justify-between", active && "text-fg-info"),
 		"aria-label": children,
 		...props,
 		children: /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -1,7 +1,7 @@
 "use client";
 import { AccordionItemProvider } from "./context.mjs";
-import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/accordion/accordion-item.tsx
 const AccordionItem = ({ children, defaultOpen = false }) => {
 	return /* @__PURE__ */ jsx(AccordionItemProvider, {

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

@@ -1,7 +1,7 @@
 "use client";
 import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
-import { jsx } from "react/jsx-runtime";
 import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/accordion/context.tsx
 const OpenContext = createContext(false);
 const ToggleOpenContext = createContext(void 0);
@@ -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.mjs

@@ -1,11 +1,12 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
-import { jsx } from "react/jsx-runtime";
 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 [failedSrc, setFailedSrc] = useState(null);

package/dist/components/data-display/baseline-status/baseline-status.mjs

@@ -1,25 +1,23 @@
 "use client";
+import { Suspense, use } from "react";
 import { jsx } from "react/jsx-runtime";
-import { useSyncExternalStore } from "react";
 //#region src/components/data-display/baseline-status/baseline-status.tsx
-let didInit = false;
-const BaselineStatus = ({ featureId }) => {
-	if (!useSyncExternalStore((onStoreChange) => {
-		if (!didInit) {
-			didInit = true;
-			import("baseline-status").then(() => {
-				onStoreChange();
-			});
-		}
-		return () => {};
-	}, () => didInit, () => false)) return /* @__PURE__ */ jsx("div", {
-		className: "max-w-full animate-pulse rounded-lg border border-border-base bg-bg-base p-4",
-		style: { height: "120px" }
-	});
+let loadPromise = null;
+const loadBaselineStatus = () => {
+	loadPromise ??= import("baseline-status");
+	return loadPromise;
+};
+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: "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 })
+});
 //#endregion
 export { BaselineStatus };

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

@@ -1,28 +1,28 @@
 import { findAllColors } from "../../../helpers/color/find-all-colors.mjs";
+import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1 } from "react";
 //#region src/components/data-display/code/code.tsx
 const Code = ({ children }) => {
 	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",
+		className: "bg-bg-mute m-0.5 rounded-md px-1.5 sm:py-0.5",
 		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$1, { children: [/* @__PURE__ */ jsx("span", {
+		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",
+		className: "bg-bg-mute m-0.5 inline-flex items-center gap-1 rounded-md px-1.5 sm:py-0.5",
 		children: parts
 	});
 };

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

@@ -1,61 +1,45 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/table/table.tsx
-const Root = ({ children, className, containerClassName }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("w-full overflow-x-auto rounded-lg border border-border-mute bg-bg-base", containerClassName),
-		children: /* @__PURE__ */ jsx("table", {
-			className: cn("min-w-full border-collapse text-left text-sm", className),
-			children
-		})
-	});
-};
-const Head = ({ children, className }) => {
-	return /* @__PURE__ */ jsx("thead", {
-		className: cn("bg-bg-subtle", className),
-		children
-	});
-};
-const Body = ({ children, className }) => {
-	return /* @__PURE__ */ jsx("tbody", {
-		className: cn("[&_tr:last-child]:border-b-0", className),
-		children
-	});
-};
-const Row = ({ children, className, interactive = false }) => {
-	return /* @__PURE__ */ jsx("tr", {
-		className: cn("border-border-mute border-b transition-colors", interactive && "hover:bg-bg-mute", className),
-		children
-	});
-};
-const HeaderCell = ({ align = "left", children, className }) => {
-	return /* @__PURE__ */ jsx("th", {
-		className: cn("px-4 py-3 font-medium text-fg-base", align === "center" && "text-center", align === "right" && "text-right", className),
-		scope: "col",
+const Root = ({ children, className, containerClassName }) => /* @__PURE__ */ jsx("div", {
+	className: cn("w-full overflow-x-auto rounded-lg border border-border-mute bg-bg-base", containerClassName),
+	children: /* @__PURE__ */ jsx("table", {
+		className: cn("min-w-full border-collapse text-left text-sm", className),
 		children
-	});
-};
-const Cell = ({ align = "left", children, className, colSpan, tone = "default" }) => {
-	return /* @__PURE__ */ jsx("td", {
-		className: cn("px-4 py-3 align-middle", tone === "muted" ? "text-fg-mute" : "text-fg-base", align === "center" && "text-center", align === "right" && "text-right", className),
-		colSpan,
-		children
-	});
-};
-const Caption = ({ children, className }) => {
-	return /* @__PURE__ */ jsx("caption", {
-		className: cn("caption-bottom px-4 py-3 text-fg-mute text-sm", className),
-		children
-	});
-};
-const EmptyState = ({ children, colSpan }) => {
-	return /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Cell, {
-		align: "center",
-		className: "py-10 text-fg-mute",
-		colSpan,
-		children
-	}) });
-};
+	})
+});
+const Head = ({ children, className }) => /* @__PURE__ */ jsx("thead", {
+	className: cn("bg-bg-subtle", className),
+	children
+});
+const Body = ({ children, className }) => /* @__PURE__ */ jsx("tbody", {
+	className: cn("[&_tr:last-child]:border-b-0", className),
+	children
+});
+const Row = ({ children, className, interactive = false }) => /* @__PURE__ */ jsx("tr", {
+	className: cn("border-border-mute border-b transition-colors", interactive && "hover:bg-bg-mute", className),
+	children
+});
+const HeaderCell = ({ align = "left", children, className }) => /* @__PURE__ */ jsx("th", {
+	className: cn("px-4 py-3 font-medium text-fg-base", align === "center" && "text-center", align === "right" && "text-right", className),
+	scope: "col",
+	children
+});
+const Cell = ({ align = "left", children, className, colSpan, tone = "default" }) => /* @__PURE__ */ jsx("td", {
+	className: cn("px-4 py-3 align-middle", tone === "muted" ? "text-fg-mute" : "text-fg-base", align === "center" && "text-center", align === "right" && "text-right", className),
+	colSpan,
+	children
+});
+const Caption = ({ children, className }) => /* @__PURE__ */ jsx("caption", {
+	className: cn("caption-bottom px-4 py-3 text-fg-mute text-sm", className),
+	children
+});
+const EmptyState = ({ children, colSpan }) => /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Cell, {
+	align: "center",
+	className: "text-fg-mute py-10",
+	colSpan,
+	children
+}) });
 const Table = {
 	Root,
 	Head,

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

@@ -8,30 +8,28 @@ const STATUS_LABEL = {
 	warning: "警告",
 	error: "エラー"
 };
-const Alert = ({ status, message }) => {
-	return /* @__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"),
-		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"),
-			children: [/* @__PURE__ */ jsx(AlertIcon, {
-				size: "md",
-				status
-			}), /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: STATUS_LABEL[status]
-			})]
-		}), Array.isArray(message) ? message.length > 1 ? /* @__PURE__ */ jsx("ul", {
-			className: "space-y-1",
-			children: message.map((msg) => /* @__PURE__ */ jsx("li", { children: msg }, msg))
-		}) : /* @__PURE__ */ jsx("p", {
-			className: "font-bold",
-			children: message[0]
-		}) : /* @__PURE__ */ jsx("p", {
-			className: "font-bold",
-			children: message
+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"),
+	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"),
+		children: [/* @__PURE__ */ jsx(AlertIcon, {
+			size: "md",
+			status
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: STATUS_LABEL[status]
 		})]
-	});
-};
+	}), Array.isArray(message) ? message.length > 1 ? /* @__PURE__ */ jsx("ul", {
+		className: "space-y-1",
+		children: message.map((msg) => /* @__PURE__ */ jsx("li", { children: msg }, msg))
+	}) : /* @__PURE__ */ jsx("p", {
+		className: "font-bold",
+		children: message[0]
+	}) : /* @__PURE__ */ jsx("p", {
+		className: "font-bold",
+		children: message
+	})]
+});
 //#endregion
 export { Alert };

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

@@ -1,19 +1,17 @@
 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 }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: "w-full rounded-full bg-bg-emphasize",
-		children: /* @__PURE__ */ jsx("div", {
-			"aria-label": label ?? `${toPrecision(progress / maxProgress).toString()}%`,
-			"aria-valuemax": maxProgress,
-			"aria-valuemin": minProgress,
-			"aria-valuenow": progress,
-			className: "h-4 rounded-full bg-primary-bg transition-all",
-			role: "progressbar",
-			style: { width: `${(progress / maxProgress * 100).toString()}%` }
-		})
-	});
-};
+const Progress = ({ progress, maxProgress, minProgress = 0, label }) => /* @__PURE__ */ jsx("div", {
+	className: "bg-bg-emphasize w-full rounded-full",
+	children: /* @__PURE__ */ jsx("div", {
+		"aria-label": label ?? `${toPrecision(progress / maxProgress).toString()}%`,
+		"aria-valuemax": maxProgress,
+		"aria-valuemin": minProgress,
+		"aria-valuenow": progress,
+		className: "bg-primary-bg h-4 rounded-full transition-all",
+		role: "progressbar",
+		style: { width: `${(progress / maxProgress * 100).toString()}%` }
+	})
+});
 //#endregion
 export { Progress };

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

@@ -1,11 +1,9 @@
 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" }) => {
-	return /* @__PURE__ */ jsx("div", {
-		"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")
-	});
-};
+const Skeleton = ({ animate = true, shape = "rect", size = "md" }) => /* @__PURE__ */ jsx("div", {
+	"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")
+});
 //#endregion
 export { Skeleton };

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

@@ -1,19 +1,17 @@
 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" }) => {
-	return /* @__PURE__ */ jsxs("output", {
-		"aria-label": label,
-		"aria-live": "polite",
-		className: "inline-flex items-center justify-center",
-		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")
-		}), /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: label
-		})]
-	});
-};
+const Spinner = ({ label = "Loading", size = "md" }) => /* @__PURE__ */ jsxs("output", {
+	"aria-label": label,
+	"aria-live": "polite",
+	className: "inline-flex items-center justify-center",
+	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")
+	}), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: label
+	})]
+});
 //#endregion
 export { Spinner };

package/dist/components/feedback/toast/context.d.mts

@@ -0,0 +1,18 @@
+import { Status } from "../../../types/variables.mjs";
+import * as _$react from "react";
+import { Dispatch, SetStateAction } from "react";
+
+//#region src/components/feedback/toast/context.d.ts
+type ToastType = {
+  id: string;
+  status: Status;
+  message: string;
+};
+declare const SetToastContext: _$react.Context<Dispatch<SetStateAction<ToastType[]>> | undefined>;
+declare const useToast: () => {
+  onOpen: (status: Status, message: string) => void;
+  onClose: (id: string) => void;
+  onCloseAll: () => void;
+};
+//#endregion
+export { SetToastContext, ToastType, useToast };