@k8o/arte-odyssey 7.0.0 → 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.mjs

@@ -21,11 +21,13 @@ const Button = ({ ref, children, type = "button", size = "md", color = "primary"
 		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": isDisabled && variant === "contained" && color === "primary",
 			"cursor-not-allowed opacity-35 hover:bg-secondary-bg active:bg-secondary-bg": isDisabled && variant === "contained" && color === "secondary",
@@ -33,14 +35,14 @@ const Button = ({ ref, children, type = "button", size = "md", color = "primary"
 			"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",
+			"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": 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-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: [
 			resolvedStartIcon,

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

@@ -18,13 +18,14 @@ const IconButton = ({ ref, size = "md", bg = "transparent", label, children, onA
 	} : void 0;
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-busy": isPending || void 0,
-		"aria-label": props.role ? label : 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.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.mjs

@@ -4,8 +4,9 @@ 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

@@ -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/code/code.mjs

@@ -5,24 +5,24 @@ import { jsx, jsxs } from "react/jsx-runtime";
 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, { 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 };

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

@@ -0,0 +1,29 @@
+"use client";
+import { uuidV4 } from "../../../helpers/uuid-v4.mjs";
+import { createContext, use, useCallback } from "react";
+//#region src/components/feedback/toast/context.ts
+const MAX_TOAST_COUNT = 5;
+const SetToastContext = createContext(void 0);
+const useToast = () => {
+	const setToasts = use(SetToastContext);
+	if (!setToasts) throw new Error("useToast must be used within a ToastProvider");
+	return {
+		onOpen: useCallback((status, message) => {
+			setToasts((prev) => {
+				return [...prev, {
+					id: uuidV4(),
+					status,
+					message
+				}].slice(-MAX_TOAST_COUNT);
+			});
+		}, [setToasts]),
+		onClose: useCallback((id) => {
+			setToasts((prev) => prev.filter((toast) => toast.id !== id));
+		}, [setToasts]),
+		onCloseAll: useCallback(() => {
+			setToasts([]);
+		}, [setToasts])
+	};
+};
+//#endregion
+export { SetToastContext, useToast };

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

@@ -1,2 +1,3 @@
-import { ToastProvider, useToast } from "./provider.mjs";
+import { useToast } from "./context.mjs";
+import { ToastProvider } from "./provider.mjs";
 export { ToastProvider, useToast };

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

@@ -1,2 +1,3 @@
-import { ToastProvider, useToast } from "./provider.mjs";
+import { useToast } from "./context.mjs";
+import { ToastProvider } from "./provider.mjs";
 export { ToastProvider, useToast };

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

@@ -1,15 +1,9 @@
-import { Status } from "../../../types/variables.mjs";
 import { FC, PropsWithChildren, RefObject } from "react";
 
 //#region src/components/feedback/toast/provider.d.ts
-declare const useToast: () => {
-  onOpen: (status: Status, message: string) => void;
-  onClose: (id: string) => void;
-  onCloseAll: () => void;
-};
 declare const ToastProvider: FC<PropsWithChildren<{
   portalRef?: RefObject<HTMLElement | null>;
   position?: 'fixed' | 'absolute';
 }>>;
 //#endregion
-export { ToastProvider, useToast };
+export { ToastProvider };

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

@@ -1,36 +1,13 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
-import { uuidV4 } from "../../../helpers/uuid-v4.mjs";
+import { SetToastContext } from "./context.mjs";
 import { Toast } from "./toast.mjs";
-import { createContext, use, useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence } from "motion/react";
 import * as motion$1 from "motion/react-client";
 //#region src/components/feedback/toast/provider.tsx
-const MAX_TOAST_COUNT = 5;
-const SetToastContext = createContext(void 0);
-const useToast = () => {
-	const setToasts = use(SetToastContext);
-	if (!setToasts) throw new Error("useToast must be used within a ToastProvider");
-	return {
-		onOpen: useCallback((status, message) => {
-			setToasts((prev) => {
-				return [...prev, {
-					id: uuidV4(),
-					status,
-					message
-				}].slice(-MAX_TOAST_COUNT);
-			});
-		}, [setToasts]),
-		onClose: useCallback((id) => {
-			setToasts((prev) => prev.filter((toast) => toast.id !== id));
-		}, [setToasts]),
-		onCloseAll: useCallback(() => {
-			setToasts([]);
-		}, [setToasts])
-	};
-};
 const toastMotionVariants = {
 	initial: {
 		opacity: 0,
@@ -99,4 +76,4 @@ const ToastProvider = ({ children, portalRef = null, position = "fixed" }) => {
 	});
 };
 //#endregion
-export { ToastProvider, useToast };
+export { ToastProvider };

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

@@ -1,7 +1,7 @@
 "use client";
 import { Alert } from "../alert/alert.mjs";
+import { useToast } from "./context.mjs";
 import { useTimeout } from "../../../hooks/timeout/index.mjs";
-import { useToast } from "./provider.mjs";
 import { useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/feedback/toast/toast.tsx