@k8o/arte-odyssey 8.0.3 → 9.1.0

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

@@ -15,7 +15,7 @@ type Props = {
     className: string;
     children: ReactNode;
   }) => ReactNode;
-} & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>;
+} & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'className' | 'style'>;
 declare const Button: FC<Props>;
 //#endregion
 export { Button };

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

@@ -31,7 +31,7 @@ const Button = ({ ref, children, type = "button", size = "md", 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");
+	}, "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 vertical:w-auto", (hasStartIcon || hasEndIcon) && "flex items-center gap-2", hasStartIcon && hasEndIcon ? "justify-between" : hasStartIcon && variant !== "skeleton" ? "justify-center" : hasEndIcon && "justify-between", isActive && "text-fg-info");
 	const composedChildren = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		resolvedStartIcon,
 		children,

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

@@ -17,7 +17,7 @@ type Props = {
     'aria-label': string;
     triggerProps: IconButtonTriggerProps;
   }) => ReactNode;
-} & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>;
+} & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'className' | 'style'>;
 declare const IconButton: FC<Props>;
 //#endregion
 export { IconButton, IconButtonTriggerProps };

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

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
 import { Tooltip } from "../../overlays/tooltip/tooltip.mjs";
+import { chain } from "../../../helpers/chain.mjs";
 import { mergeRefs } from "../../../helpers/merge-refs.mjs";
 import { useTransition } from "react";
 import { useFormStatus } from "react-dom";
@@ -66,23 +67,11 @@ const IconButton = ({ ref, size = "md", bg = "transparent", label, tooltipPlacem
 				"aria-label": label,
 				className,
 				disabled: isDisabled,
-				onBlur: (e) => {
-					triggerProps.onBlur(e);
-					onBlur?.(e);
-				},
+				onBlur: chain(triggerProps.onBlur, onBlur),
 				onClick: handleClick,
-				onFocus: (e) => {
-					triggerProps.onFocus(e);
-					onFocus?.(e);
-				},
-				onMouseEnter: (e) => {
-					triggerProps.onMouseEnter(e);
-					onMouseEnter?.(e);
-				},
-				onMouseLeave: (e) => {
-					triggerProps.onMouseLeave(e);
-					onMouseLeave?.(e);
-				},
+				onFocus: chain(triggerProps.onFocus, onFocus),
+				onMouseEnter: chain(triggerProps.onMouseEnter, onMouseEnter),
+				onMouseLeave: chain(triggerProps.onMouseLeave, onMouseLeave),
 				ref: mergeRefs(ref, triggerProps.ref),
 				type: "button",
 				children

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

@@ -11,12 +11,12 @@ const AccordionButton = ({ children }) => {
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-controls": `${id}-panel`,
 		"aria-expanded": open,
-		className: cn("flex w-full cursor-pointer items-center justify-between rounded-md p-4 text-fg-base transition-colors", "hover:bg-primary-bg-subtle hover:text-primary-fg", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-info"),
+		className: cn("flex w-full cursor-pointer items-center justify-between rounded-md p-4 text-fg-base transition-colors vertical:h-full", "hover:bg-primary-bg-subtle hover:text-primary-fg", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-info"),
 		id: `${id}-button`,
 		onClick: toggleOpen,
 		type: "button",
 		children: [children, /* @__PURE__ */ jsx("span", {
-			className: cn("transition-transform duration-150", open && "rotate-180"),
+			className: cn("transition-transform duration-150", !open && "vertical:rotate-90", open && "rotate-180 vertical:-rotate-90"),
 			children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down" })
 		})]
 	});

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

@@ -7,7 +7,10 @@ const AccordionItem = ({ children, defaultOpen = false }) => {
 	return /* @__PURE__ */ jsx(AccordionItemProvider, {
 		defaultOpen,
 		id: useId(),
-		children: /* @__PURE__ */ jsx("div", { children })
+		children: /* @__PURE__ */ jsx("div", {
+			className: "vertical:h-full",
+			children
+		})
 	});
 };
 //#endregion

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

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

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

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

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

@@ -1,22 +1,13 @@
 "use client";
 import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
 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);
-const ItemIdContext = createContext(void 0);
+const [ToggleOpenContext, useToggleOpen] = createSafeContext("useToggleOpen must be used within AccordionProvider");
+const [ItemIdContext, useItemId] = createSafeContext("useItemId must be used within AccordionProvider");
 const useOpen = () => use(OpenContext);
-const useToggleOpen = () => {
-	const toggleOpen = use(ToggleOpenContext);
-	if (!toggleOpen) throw new Error("useToggleOpen must be used within AccordionProvider");
-	return toggleOpen;
-};
-const useItemId = () => {
-	const id = use(ItemIdContext);
-	if (id === void 0 || id === "") throw new Error("useItemId must be used within AccordionProvider");
-	return id;
-};
 const AccordionItemProvider = ({ defaultOpen = false, id, children }) => {
 	const { isOpen, toggle } = useDisclosure(defaultOpen);
 	return /* @__PURE__ */ jsx(OpenContext, {

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

@@ -7,7 +7,7 @@ type Props = {
   name?: string;
   size?: 'sm' | 'md' | 'lg';
   src?: string;
-} & Omit<HTMLAttributes<HTMLSpanElement>, 'role' | 'aria-label'>;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'role' | 'aria-label' | 'className' | 'style'>;
 declare const Avatar: FC<Props>;
 //#endregion
 export { Avatar };

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

@@ -8,7 +8,7 @@ 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, className, ...rest }) => {
+const Avatar = ({ alt, fallback, name, size = "md", src, ...rest }) => {
 	const [failedSrc, setFailedSrc] = useState(null);
 	const showImage = Boolean(src) && failedSrc !== src;
 	const label = alt ?? name ?? "Avatar";
@@ -16,7 +16,7 @@ const Avatar = ({ alt, fallback, name, size = "md", src, className, ...rest }) =
 	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),
+		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"),
 		role: "img",
 		children: showImage ? /* @__PURE__ */ jsx("img", {
 			alt: alt ?? "",

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

@@ -7,7 +7,7 @@ type Props = {
   interactive?: boolean;
   tone?: 'neutral' | 'info' | 'success' | 'warning' | 'error';
   variant?: 'solid' | 'outline';
-} & Omit<HTMLAttributes<HTMLElement>, 'children'>;
+} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>;
 declare const Badge: FC<Props>;
 //#endregion
 export { Badge };

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

@@ -1,18 +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", className, ...rest }) => {
+const Badge = ({ interactive = false, size = "md", text, tone = "neutral", variant = "solid", ...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", {
 		...rest,
-		className: cn(badgeClassName, className),
+		className: badgeClassName,
 		type: "button",
 		children: text
 	});
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
-		className: cn(badgeClassName, className),
+		className: badgeClassName,
 		children: text
 	});
 };

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

@@ -1,9 +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", className, ...rest }) => /* @__PURE__ */ jsx("div", {
+const Card = ({ children, width = "full", appearance = "shadow", ...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),
+	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"),
 	children
 });
 //#endregion

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

@@ -1,9 +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", className, ...rest }) => /* @__PURE__ */ jsx("div", {
+const InteractiveCard = ({ children, width = "full", appearance = "shadow", ...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),
+	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"),
 	children
 });
 //#endregion

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

@@ -4,6 +4,6 @@ import { HTMLAttributes } from "react";
 type CardProps = {
   width?: 'full' | 'fit';
   appearance?: 'shadow' | 'bordered';
-} & HTMLAttributes<HTMLDivElement>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
 //#endregion
 export { CardProps };

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

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

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

@@ -1,13 +1,12 @@
-import { cn } from "../../../helpers/cn.mjs";
-import { findAllColors } from "../../../helpers/color/find-all-colors.mjs";
+import { findAllColors } from "./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, className, ...rest }) => {
+const Code = ({ children, ...rest }) => {
 	const colors = findAllColors(children);
 	if (colors.length === 0) return /* @__PURE__ */ jsx("code", {
 		...rest,
-		className: cn("bg-bg-mute m-0.5 rounded-md px-1.5 sm:py-0.5", className),
+		className: "bg-bg-mute m-0.5 rounded-md px-1.5 sm:py-0.5",
 		children
 	});
 	const parts = [];
@@ -25,7 +24,7 @@ const Code = ({ children, className, ...rest }) => {
 	if (lastIndex < children.length) parts.push(children.slice(lastIndex));
 	return /* @__PURE__ */ jsx("code", {
 		...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),
+		className: "bg-bg-mute vertical:inline vertical:gap-0 m-0.5 inline-flex items-center gap-1 rounded-md px-1.5 sm:py-0.5",
 		children: parts
 	});
 };

package/dist/{helpers/color → components/data-display/code}/find-all-colors.d.mts

@@ -1,4 +1,4 @@
-//#region src/helpers/color/find-all-colors.d.ts
+//#region src/components/data-display/code/find-all-colors.d.ts
 type ColorMatch = {
   color: string;
   start: number;

package/dist/{helpers/color → components/data-display/code}/find-all-colors.mjs

@@ -1,4 +1,4 @@
-//#region src/helpers/color/find-all-colors.ts
+//#region src/components/data-display/code/find-all-colors.ts
 const extractFunctionContent = (source, funcName) => {
 	const funcPattern = new RegExp(`${funcName}\\s*\\(`, "gi");
 	const matches = [];

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

@@ -4,7 +4,7 @@ import { FC, HTMLAttributes } from "react";
 type Props = {
   type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   lineClamp?: number;
-} & HTMLAttributes<HTMLHeadingElement>;
+} & Omit<HTMLAttributes<HTMLHeadingElement>, 'className' | 'style'>;
 declare const Heading: FC<Props>;
 //#endregion
 export { Heading };

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

@@ -1,36 +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, type, lineClamp, className, ...rest }) => {
+const Heading = ({ children, type, lineClamp, ...rest }) => {
 	const lineClampClass = { [`line-clamp-${lineClamp?.toString() ?? ""}`]: lineClamp };
 	if (type === "h1") return /* @__PURE__ */ jsx("h1", {
 		...rest,
-		className: cn("font-bold text-2xl md:text-3xl", lineClampClass, className),
+		className: cn("font-bold text-2xl md:text-3xl", lineClampClass),
 		children
 	});
 	if (type === "h2") return /* @__PURE__ */ jsx("h2", {
 		...rest,
-		className: cn("font-bold text-xl md:text-2xl", lineClampClass, className),
+		className: cn("font-bold text-xl md:text-2xl", lineClampClass),
 		children
 	});
 	if (type === "h3") return /* @__PURE__ */ jsx("h3", {
 		...rest,
-		className: cn("font-bold text-lg md:text-xl", lineClampClass, className),
+		className: cn("font-bold text-lg md:text-xl", lineClampClass),
 		children
 	});
 	if (type === "h4") return /* @__PURE__ */ jsx("h4", {
 		...rest,
-		className: cn("font-bold text-md md:text-lg", lineClampClass, className),
+		className: cn("font-bold text-md md:text-lg", lineClampClass),
 		children
 	});
 	if (type === "h5") return /* @__PURE__ */ jsx("h5", {
 		...rest,
-		className: cn("font-bold text-sm md:text-md", lineClampClass, className),
+		className: cn("font-bold text-sm md:text-md", lineClampClass),
 		children
 	});
 	return /* @__PURE__ */ jsx("h6", {
 		...rest,
-		className: cn("font-bold text-xs md:text-sm", lineClampClass, className),
+		className: cn("font-bold text-xs md:text-sm", lineClampClass),
 		children
 	});
 };

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

@@ -1,43 +1,38 @@
 import { FC, PropsWithChildren, ReactNode } from "react";
 
 //#region src/components/data-display/table/table.d.ts
-type RootProps = PropsWithChildren<{
-  className?: string;
-  containerClassName?: string;
-}>;
 type RowProps = PropsWithChildren<{
-  className?: string;
   interactive?: boolean;
 }>;
 type CellAlign = 'left' | 'center' | 'right';
 type HeaderCellProps = PropsWithChildren<{
   align?: CellAlign;
-  className?: string;
 }>;
 type CellProps = PropsWithChildren<{
   align?: CellAlign;
-  className?: string;
   colSpan?: number;
   tone?: 'default' | 'muted';
 }>;
-type SectionProps = PropsWithChildren<{
-  className?: string;
-}>;
-type CaptionProps = PropsWithChildren<{
-  className?: string;
-}>;
 type EmptyStateProps = {
   colSpan: number;
   children: ReactNode;
 };
 declare const Table: {
-  readonly Root: FC<RootProps>;
-  readonly Head: FC<SectionProps>;
-  readonly Body: FC<SectionProps>;
+  readonly Root: FC<{
+    children?: ReactNode | undefined;
+  }>;
+  readonly Head: FC<{
+    children?: ReactNode | undefined;
+  }>;
+  readonly Body: FC<{
+    children?: ReactNode | undefined;
+  }>;
   readonly Row: FC<RowProps>;
   readonly HeaderCell: FC<HeaderCellProps>;
   readonly Cell: FC<CellProps>;
-  readonly Caption: FC<CaptionProps>;
+  readonly Caption: FC<{
+    children?: ReactNode | undefined;
+  }>;
   readonly EmptyState: FC<EmptyStateProps>;
 };
 //#endregion

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

@@ -1,45 +1,47 @@
 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 }) => /* @__PURE__ */ jsx("div", {
-	className: cn("w-full overflow-x-auto rounded-lg border border-border-mute bg-bg-base", containerClassName),
+const Root = ({ children }) => /* @__PURE__ */ jsx("div", {
+	className: "border-border-mute bg-bg-base vertical:writing-sideways-rl vertical:h-fit vertical:w-fit w-full overflow-x-auto rounded-lg border",
 	children: /* @__PURE__ */ jsx("table", {
-		className: cn("min-w-full border-collapse text-left text-sm", className),
+		className: "min-w-full border-collapse text-left text-sm",
 		children
 	})
 });
-const Head = ({ children, className }) => /* @__PURE__ */ jsx("thead", {
-	className: cn("bg-bg-subtle", className),
+const Head = ({ children }) => /* @__PURE__ */ jsx("thead", {
+	className: "bg-bg-subtle",
 	children
 });
-const Body = ({ children, className }) => /* @__PURE__ */ jsx("tbody", {
-	className: cn("[&_tr:last-child]:border-b-0", className),
+const Body = ({ children }) => /* @__PURE__ */ jsx("tbody", {
+	className: "vertical:[&_tr:last-child]:border-l-0 [&_tr:last-child]:border-b-0",
 	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),
+const Row = ({ children, interactive = false }) => /* @__PURE__ */ jsx("tr", {
+	className: cn("border-border-mute border-b transition-colors vertical:border-b-0 vertical:border-l", interactive && "hover:bg-bg-mute"),
 	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),
+const HeaderCell = ({ align = "left", children }) => /* @__PURE__ */ jsx("th", {
+	className: cn("px-4 py-3 font-medium text-fg-base", align === "center" && "text-center", align === "right" && "text-right"),
 	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),
+const Cell = ({ align = "left", children, 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"),
 	colSpan,
 	children
 });
-const Caption = ({ children, className }) => /* @__PURE__ */ jsx("caption", {
-	className: cn("caption-bottom px-4 py-3 text-fg-mute text-sm", className),
+const Caption = ({ children }) => /* @__PURE__ */ jsx("caption", {
+	className: "text-fg-mute caption-bottom px-4 py-3 text-sm",
 	children
 });
-const EmptyState = ({ children, colSpan }) => /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Cell, {
-	align: "center",
-	className: "text-fg-mute py-10",
-	colSpan,
-	children
-}) });
+const EmptyState = ({ children, colSpan }) => /* @__PURE__ */ jsx("tr", {
+	className: "border-border-mute border-b transition-colors",
+	children: /* @__PURE__ */ jsx("td", {
+		className: "text-fg-mute px-4 py-10 text-center align-middle",
+		colSpan,
+		children
+	})
+});
 const Table = {
 	Root,
 	Head,

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

@@ -5,7 +5,7 @@ import { FC, HTMLAttributes } from "react";
 type Props = {
   status: Status;
   message: string | string[];
-} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role' | 'className' | 'style'>;
 declare const Alert: FC<Props>;
 //#endregion
 export { Alert };

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

@@ -8,9 +8,9 @@ const STATUS_LABEL = {
 	warning: "警告",
 	error: "エラー"
 };
-const Alert = ({ status, message, className, ...rest }) => /* @__PURE__ */ jsxs("div", {
+const Alert = ({ status, message, ...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),
+	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"),

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

@@ -6,7 +6,7 @@ type Props = {
   maxProgress: number;
   minProgress?: number;
   label?: string;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>;
 declare const Progress: FC<Props>;
 //#endregion
 export { Progress };

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

@@ -1,18 +1,17 @@
-import { cn } from "../../../helpers/cn.mjs";
-import { toPrecision } from "../../../helpers/number/to-precision.mjs";
+import { toPrecision } from "../../../internal/to-precision.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/feedback/progress/progress.tsx
-const Progress = ({ progress, maxProgress, minProgress = 0, label, className, ...rest }) => /* @__PURE__ */ jsx("div", {
+const Progress = ({ progress, maxProgress, minProgress = 0, label, ...rest }) => /* @__PURE__ */ jsx("div", {
 	...rest,
-	className: cn("bg-bg-emphasize w-full rounded-full", className),
+	className: "bg-bg-emphasize vertical:inline-48 rounded-full block-4 inline-full",
+	style: { "--progress-fill": `${(progress / maxProgress * 100).toString()}%` },
 	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()}%` }
+		className: "bg-primary-bg rounded-full transition-all block-full inline-(--progress-fill)",
+		role: "progressbar"
 	})
 });
 //#endregion

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

@@ -5,7 +5,7 @@ type Props = {
   animate?: boolean;
   shape?: 'rect' | 'circle';
   size?: 'sm' | 'md' | 'lg';
-} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>;
 declare const Skeleton: FC<Props>;
 //#endregion
 export { Skeleton };

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

@@ -1,10 +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", className, ...rest }) => /* @__PURE__ */ jsx("div", {
+const Skeleton = ({ animate = true, shape = "rect", size = "md", ...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)
+	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.d.mts

@@ -4,7 +4,7 @@ import { FC, OutputHTMLAttributes } from "react";
 type Props = {
   label?: string;
   size?: 'sm' | 'md' | 'lg';
-} & Omit<OutputHTMLAttributes<HTMLOutputElement>, 'children' | 'aria-label'>;
+} & Omit<OutputHTMLAttributes<HTMLOutputElement>, 'children' | 'aria-label' | 'className' | 'style'>;
 declare const Spinner: FC<Props>;
 //#endregion
 export { Spinner };

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

@@ -1,11 +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", className, ...rest }) => /* @__PURE__ */ jsxs("output", {
+const Spinner = ({ label = "Loading", size = "md", ...rest }) => /* @__PURE__ */ jsxs("output", {
 	...rest,
 	"aria-label": label,
 	"aria-live": "polite",
-	className: cn("inline-flex items-center justify-center", className),
+	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")

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

@@ -8,11 +8,11 @@ type ToastType = {
   status: Status;
   message: string;
 };
-declare const SetToastContext: _$react.Context<Dispatch<SetStateAction<ToastType[]>> | undefined>;
+declare const SetToastContext: _$react.Context<Dispatch<SetStateAction<ToastType[]>> | null>, useSetToast: () => Dispatch<SetStateAction<ToastType[]>>;
 declare const useToast: () => {
   onOpen: (status: Status, message: string) => void;
   onClose: (id: string) => void;
   onCloseAll: () => void;
 };
 //#endregion
-export { SetToastContext, ToastType, useToast };
+export { SetToastContext, ToastType, useSetToast, useToast };