@k8ordo/ui 1.0.0

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

@@ -0,0 +1,10 @@
+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", variant = "shadow", interactive = false, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cn("rounded-xl", variant === "shadow" && "shadow-sm", variant === "outline" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", interactive && "motion-safe:transition-transform hover:motion-safe:scale-[1.02] active:motion-safe:scale-[0.98]", "bg-bg-base"),
+	children
+});
+//#endregion
+export { Card };

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

@@ -0,0 +1,2 @@
+import { Card } from "./card.mjs";
+export { Card };

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

@@ -0,0 +1,2 @@
+import { Card } from "./card.mjs";
+export { Card };

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

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

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

@@ -0,0 +1,35 @@
+"use client";
+import { useMessages } from "../../../i18n/context.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, ...rest }) => {
+	const messages = useMessages();
+	const colors = findAllColors(children);
+	if (colors.length === 0) return /* @__PURE__ */ jsx("code", {
+		...rest,
+		className: "bg-bg-mute m-0.5 rounded-md px-1.5 sm:py-0.5",
+		children
+	});
+	const parts = [];
+	let lastIndex = 0;
+	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": `${messages.color}: ${colorInfo.color}`,
+			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", {
+		...rest,
+		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
+	});
+};
+//#endregion
+export { Code };

package/dist/components/data-display/code/find-all-colors.d.mts

@@ -0,0 +1,16 @@
+//#region src/components/data-display/code/find-all-colors.d.ts
+type ColorMatch = {
+  color: string;
+  start: number;
+  end: number;
+};
+/**
+ * テキスト文字列内のすべての色の値とその位置を見つけます。
+ * HSL、RGB、RGBA、HSLA、HEX、名前付き色をサポートします。
+ *
+ * @param text - 色の値を検索するテキスト
+ * @returns 色の値、開始位置、終了位置を含む色オブジェクトの配列
+ */
+declare function findAllColors(text: string): ColorMatch[];
+//#endregion
+export { findAllColors };

package/dist/components/data-display/code/find-all-colors.mjs

@@ -0,0 +1,267 @@
+//#region src/components/data-display/code/find-all-colors.ts
+const extractFunctionContent = (source, funcName) => {
+	const funcPattern = new RegExp(`${funcName}\\s*\\(`, "giu");
+	const matches = [];
+	let match = funcPattern.exec(source);
+	while (match !== null) {
+		const startIndex = match.index + match[0].length - 1;
+		let depth = 0;
+		let endIndex = -1;
+		for (let i = startIndex; i < source.length; i++) if (source[i] === "(") depth++;
+		else if (source[i] === ")") {
+			depth--;
+			if (depth === 0) {
+				endIndex = i;
+				break;
+			}
+		}
+		if (endIndex !== -1) {
+			const content = source.slice(startIndex + 1, endIndex);
+			const fullColor = `${funcName.toLowerCase()}(${content})`;
+			matches.push({
+				color: fullColor,
+				start: match.index,
+				end: endIndex + 1
+			});
+		}
+		match = funcPattern.exec(source);
+	}
+	return matches;
+};
+/**
+* テキスト文字列内のすべての色の値とその位置を見つけます。
+* HSL、RGB、RGBA、HSLA、HEX、名前付き色をサポートします。
+*
+* @param text - 色の値を検索するテキスト
+* @returns 色の値、開始位置、終了位置を含む色オブジェクトの配列
+*/
+function findAllColors(text) {
+	const results = [];
+	for (const func of [
+		"hsl",
+		"rgb",
+		"rgba",
+		"hsla"
+	]) {
+		const matches = extractFunctionContent(text, func);
+		results.push(...matches);
+	}
+	const hexPattern = /#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})(?=\s|;|,|$|\)|\]|\})/gu;
+	let hexMatch = hexPattern.exec(text);
+	while (hexMatch !== null) {
+		results.push({
+			color: hexMatch[0],
+			start: hexMatch.index,
+			end: hexMatch.index + hexMatch[0].length
+		});
+		hexMatch = hexPattern.exec(text);
+	}
+	const namedColors = [
+		"red",
+		"blue",
+		"green",
+		"yellow",
+		"orange",
+		"purple",
+		"pink",
+		"brown",
+		"black",
+		"white",
+		"gray",
+		"grey",
+		"cyan",
+		"magenta",
+		"lime",
+		"navy",
+		"maroon",
+		"olive",
+		"teal",
+		"silver",
+		"gold",
+		"indigo",
+		"violet"
+	];
+	const lowerText = text.toLowerCase();
+	for (const color of namedColors) {
+		let startIndex = 0;
+		let index = lowerText.indexOf(color, startIndex);
+		while (index !== -1) {
+			const beforeChar = index > 0 ? lowerText[index - 1] ?? " " : " ";
+			const afterChar = index + color.length < lowerText.length ? lowerText[index + color.length] ?? " " : " ";
+			if (!(/[a-zA-Z0-9]/u.test(beforeChar) || /[a-zA-Z0-9]/u.test(afterChar))) results.push({
+				color,
+				start: index,
+				end: index + color.length
+			});
+			startIndex = index + 1;
+			index = lowerText.indexOf(color, startIndex);
+		}
+	}
+	results.sort((a, b) => a.start - b.start);
+	const filteredResults = [];
+	for (const result of results) if (!filteredResults.some((existing) => result.start >= existing.start && result.start < existing.end || result.end > existing.start && result.end <= existing.end || result.start <= existing.start && result.end >= existing.end)) filteredResults.push(result);
+	return filteredResults;
+}
+if (import.meta.vitest) {
+	const { describe, expect, it } = import.meta.vitest;
+	describe("findAllColors", () => {
+		describe("単一の色の場合", () => {
+			it("HSL色を見つける", () => {
+				const result = findAllColors("hsl(280, 70%, 50%)");
+				expect(result).toEqual([{
+					color: "hsl(280, 70%, 50%)",
+					start: 0,
+					end: 18
+				}]);
+			});
+			it("HEX色を見つける", () => {
+				const result = findAllColors("#ff0080");
+				expect(result).toEqual([{
+					color: "#ff0080",
+					start: 0,
+					end: 7
+				}]);
+			});
+			it("名前付き色を見つける", () => {
+				const result = findAllColors("background-color: red;");
+				expect(result).toEqual([{
+					color: "red",
+					start: 18,
+					end: 21
+				}]);
+			});
+		});
+		describe("複数の色の場合", () => {
+			it("異なる形式の複数の色を見つける", () => {
+				const result = findAllColors("border: 1px solid #ff0080; background: hsl(280, 70%, 50%); color: white;");
+				expect(result).toEqual([
+					{
+						color: "#ff0080",
+						start: 18,
+						end: 25
+					},
+					{
+						color: "hsl(280, 70%, 50%)",
+						start: 39,
+						end: 57
+					},
+					{
+						color: "white",
+						start: 66,
+						end: 71
+					}
+				]);
+			});
+			it("gradient内の複数の色を見つける", () => {
+				const result = findAllColors("linear-gradient(45deg, #ff0080, hsl(280, 70%, 50%), rgba(255, 0, 128, 0.5))");
+				expect(result).toEqual([
+					{
+						color: "#ff0080",
+						start: 23,
+						end: 30
+					},
+					{
+						color: "hsl(280, 70%, 50%)",
+						start: 32,
+						end: 50
+					},
+					{
+						color: "rgba(255, 0, 128, 0.5)",
+						start: 52,
+						end: 74
+					}
+				]);
+			});
+		});
+		describe("重複する色パターンの場合", () => {
+			it("関数型色を名前付き色より優先する", () => {
+				const result = findAllColors("rgb(255, 0, 0) red");
+				expect(result).toEqual([{
+					color: "rgb(255, 0, 0)",
+					start: 0,
+					end: 14
+				}, {
+					color: "red",
+					start: 15,
+					end: 18
+				}]);
+			});
+			it("重複する領域では最初の色のみを保持する", () => {
+				const result = findAllColors("background-color: red");
+				expect(result).toEqual([{
+					color: "red",
+					start: 18,
+					end: 21
+				}]);
+			});
+		});
+		describe("複雑なCSS関数の場合", () => {
+			it("calc式を含むHSL色を見つける", () => {
+				const result = findAllColors("hsl(calc(var(--hue) + 50), 70%, 50%)");
+				expect(result).toEqual([{
+					color: "hsl(calc(var(--hue) + 50), 70%, 50%)",
+					start: 0,
+					end: 36
+				}]);
+			});
+			it("ネストした括弧を含む色を見つける", () => {
+				const result = findAllColors("hsl(calc(sign(var(--x)) * 80 + 200), 70%, 50%)");
+				expect(result).toEqual([{
+					color: "hsl(calc(sign(var(--x)) * 80 + 200), 70%, 50%)",
+					start: 0,
+					end: 46
+				}]);
+			});
+		});
+		describe("色が見つからない場合", () => {
+			it("空の配列を返す", () => {
+				const result = findAllColors("transform: translateX(100px);");
+				expect(result).toEqual([]);
+			});
+			it("色でないテキストでは空の配列を返す", () => {
+				const result = findAllColors("font-size: 16px; margin: 10px;");
+				expect(result).toEqual([]);
+			});
+		});
+		describe("エッジケース", () => {
+			it("同じ色が複数回出現する場合", () => {
+				const result = findAllColors("color: red; border-color: red;");
+				expect(result).toEqual([{
+					color: "red",
+					start: 7,
+					end: 10
+				}, {
+					color: "red",
+					start: 26,
+					end: 29
+				}]);
+			});
+			it("文字列の境界での色検出", () => {
+				const result = findAllColors("red");
+				expect(result).toEqual([{
+					color: "red",
+					start: 0,
+					end: 3
+				}]);
+			});
+			it("他の単語の一部として含まれる色名を検出しない", () => {
+				const result = findAllColors("reduce");
+				expect(result).toEqual([]);
+			});
+			it("他の単語の一部として含まれる色名を検出しない（複数パターン）", () => {
+				const result = findAllColors("blueberry, greenfield, redirection");
+				expect(result).toEqual([]);
+			});
+			it("単語の一部でない色名のみを検出する", () => {
+				const result = findAllColors("reduce color: red; blueberry");
+				expect(result).toEqual([{
+					color: "red",
+					start: 14,
+					end: 17
+				}]);
+			});
+		});
+	});
+}
+//#endregion
+export { findAllColors };

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

@@ -0,0 +1,2 @@
+import { Code } from "./code.mjs";
+export { Code };

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

@@ -0,0 +1,2 @@
+import { Code } from "./code.mjs";
+export { Code };

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

@@ -0,0 +1,9 @@
+import { FC, HTMLAttributes } from "react";
+//#region src/components/data-display/heading/heading.d.ts
+type Props = {
+  level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  lineClamp?: 1 | 2 | 3 | 4 | 5 | 6;
+} & Omit<HTMLAttributes<HTMLHeadingElement>, 'className' | 'style'>;
+declare const Heading: FC<Props>;
+//#endregion
+export { Heading };

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

@@ -0,0 +1,46 @@
+import { cn } from "../../../helpers/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-display/heading/heading.tsx
+const LINE_CLAMP_CLASS = {
+	1: "line-clamp-1",
+	2: "line-clamp-2",
+	3: "line-clamp-3",
+	4: "line-clamp-4",
+	5: "line-clamp-5",
+	6: "line-clamp-6"
+};
+const Heading = ({ children, level, lineClamp, ...rest }) => {
+	const lineClampClass = lineClamp === void 0 ? void 0 : LINE_CLAMP_CLASS[lineClamp];
+	if (level === "h1") return /* @__PURE__ */ jsx("h1", {
+		...rest,
+		className: cn("font-bold text-2xl md:text-3xl", lineClampClass),
+		children
+	});
+	if (level === "h2") return /* @__PURE__ */ jsx("h2", {
+		...rest,
+		className: cn("font-bold text-xl md:text-2xl", lineClampClass),
+		children
+	});
+	if (level === "h3") return /* @__PURE__ */ jsx("h3", {
+		...rest,
+		className: cn("font-bold text-lg md:text-xl", lineClampClass),
+		children
+	});
+	if (level === "h4") return /* @__PURE__ */ jsx("h4", {
+		...rest,
+		className: cn("font-bold text-md md:text-lg", lineClampClass),
+		children
+	});
+	if (level === "h5") return /* @__PURE__ */ jsx("h5", {
+		...rest,
+		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),
+		children
+	});
+};
+//#endregion
+export { Heading };

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

@@ -0,0 +1,2 @@
+import { Heading } from "./heading.mjs";
+export { Heading };

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

@@ -0,0 +1,2 @@
+import { Heading } from "./heading.mjs";
+export { Heading };

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

@@ -0,0 +1,2 @@
+import { CellAlign, Table } from "./table.mjs";
+export { type CellAlign, Table };

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

@@ -0,0 +1,2 @@
+import { Table } from "./table.mjs";
+export { Table };

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

@@ -0,0 +1,33 @@
+import { FC, HTMLAttributes, PropsWithChildren, ReactNode, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react";
+//#region src/components/data-display/table/table.d.ts
+type RootProps = PropsWithChildren<Omit<TableHTMLAttributes<HTMLTableElement>, 'className' | 'style'>>;
+type RowProps = PropsWithChildren<{
+  interactive?: boolean;
+} & Omit<HTMLAttributes<HTMLTableRowElement>, 'className' | 'style'>>;
+type CellAlign = 'left' | 'center' | 'right';
+type HeaderCellProps = PropsWithChildren<{
+  align?: CellAlign;
+  scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';
+} & Omit<ThHTMLAttributes<HTMLTableCellElement>, 'className' | 'style' | 'align' | 'scope'>>;
+type CellProps = PropsWithChildren<{
+  align?: CellAlign;
+  color?: 'base' | 'mute';
+} & Omit<TdHTMLAttributes<HTMLTableCellElement>, 'className' | 'style' | 'align'>>;
+type SectionProps = PropsWithChildren<Omit<HTMLAttributes<HTMLTableSectionElement>, 'className' | 'style'>>;
+type CaptionProps = PropsWithChildren<Omit<HTMLAttributes<HTMLTableCaptionElement>, 'className' | 'style'>>;
+type EmptyStateProps = {
+  colSpan: number;
+  children: ReactNode;
+};
+declare const Table: {
+  readonly Root: FC<RootProps>;
+  readonly Head: FC<SectionProps>;
+  readonly Body: FC<SectionProps>;
+  readonly Row: FC<RowProps>;
+  readonly HeaderCell: FC<HeaderCellProps>;
+  readonly Cell: FC<CellProps>;
+  readonly Caption: FC<CaptionProps>;
+  readonly EmptyState: FC<EmptyStateProps>;
+};
+//#endregion
+export { CellAlign, Table };

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

@@ -0,0 +1,62 @@
+import { cn } from "../../../helpers/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-display/table/table.tsx
+const Root = ({ children, ...rest }) => /* @__PURE__ */ jsx("div", {
+	className: "border-border-mute bg-bg-base vertical:writing-sideways-rl vertical:size-fit w-full overflow-x-auto rounded-lg border",
+	children: /* @__PURE__ */ jsx("table", {
+		...rest,
+		className: "min-w-full border-collapse text-left text-sm",
+		children
+	})
+});
+const Head = ({ children, ...rest }) => /* @__PURE__ */ jsx("thead", {
+	...rest,
+	className: "bg-bg-subtle",
+	children
+});
+const Body = ({ children, ...rest }) => /* @__PURE__ */ jsx("tbody", {
+	...rest,
+	className: "vertical:[&_tr:last-child]:border-l-0 [&_tr:last-child]:border-b-0",
+	children
+});
+const Row = ({ children, interactive = false, ...rest }) => /* @__PURE__ */ jsx("tr", {
+	...rest,
+	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, scope = "col", ...rest }) => /* @__PURE__ */ jsx("th", {
+	...rest,
+	className: cn("px-4 py-3 font-medium text-fg-base", align === "center" && "text-center", align === "right" && "text-right"),
+	scope,
+	children
+});
+const Cell = ({ align = "left", children, color = "base", ...rest }) => /* @__PURE__ */ jsx("td", {
+	...rest,
+	className: cn("px-4 py-3 align-middle", color === "mute" ? "text-fg-mute" : "text-fg-base", align === "center" && "text-center", align === "right" && "text-right"),
+	children
+});
+const Caption = ({ children, ...rest }) => /* @__PURE__ */ jsx("caption", {
+	...rest,
+	className: "text-fg-mute caption-bottom px-4 py-3 text-sm",
+	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,
+	Body,
+	Row,
+	HeaderCell,
+	Cell,
+	Caption,
+	EmptyState
+};
+//#endregion
+export { Table };

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

@@ -0,0 +1,19 @@
+import { Status } from "../../../types/variables.mjs";
+import { FC, HTMLAttributes, ReactNode } from "react";
+//#region src/components/feedback/alert/alert.d.ts
+type AlertAction = {
+  label: string;
+  renderItem: (props: {
+    children: ReactNode;
+  }) => ReactNode;
+};
+type Props = {
+  tone: Status;
+  message: string | string[];
+  action?: AlertAction;
+  onClose?: () => void;
+  closeLabel?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role' | 'className' | 'style'>;
+declare const Alert: FC<Props>;
+//#endregion
+export { Alert, AlertAction };

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

@@ -0,0 +1,71 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { useMessages } from "../../../i18n/context.mjs";
+import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { AlertIcon, CloseIcon } from "../../icons/lucide.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/feedback/alert/alert.tsx
+const STATUS_MESSAGE_KEY = {
+	success: "alertSuccess",
+	info: "alertInfo",
+	warning: "alertWarning",
+	error: "alertError"
+};
+const Alert = ({ tone, message, action, onClose, closeLabel, ...rest }) => {
+	const messages = useMessages();
+	const actionNode = action ? action.renderItem({ children: action.label }) : null;
+	const inlineAction = action ? /* @__PURE__ */ jsx("span", {
+		className: "ml-1",
+		children: actionNode
+	}) : null;
+	let messageContent;
+	if (Array.isArray(message) && message.length > 1) {
+		const list = /* @__PURE__ */ jsx("ul", {
+			className: "space-y-1",
+			children: message.map((msg) => /* @__PURE__ */ jsx("li", { children: msg }, msg))
+		});
+		messageContent = action ? /* @__PURE__ */ jsxs("div", { children: [list, /* @__PURE__ */ jsx("div", {
+			className: "mt-1",
+			children: actionNode
+		})] }) : list;
+	} else {
+		const text = Array.isArray(message) ? message[0] : message;
+		messageContent = /* @__PURE__ */ jsxs("p", {
+			className: "font-bold",
+			children: [text, inlineAction]
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		className: cn("flex items-center gap-3 rounded-lg p-4", tone === "success" && "bg-bg-success", tone === "info" && "bg-bg-info", tone === "warning" && "bg-bg-warning", tone === "error" && "bg-bg-error"),
+		role: tone === "error" || tone === "warning" ? "alert" : "status",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: cn("shrink-0", tone === "success" && "text-fg-success", tone === "info" && "text-fg-info", tone === "warning" && "text-fg-warning", tone === "error" && "text-fg-error"),
+				children: [/* @__PURE__ */ jsx(AlertIcon, {
+					size: "md",
+					status: tone
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: messages[STATUS_MESSAGE_KEY[tone]]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children: messageContent
+			}),
+			onClose ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0",
+				children: /* @__PURE__ */ jsx(IconButton, {
+					label: closeLabel ?? messages.close,
+					onClick: onClose,
+					size: "sm",
+					tooltipDisabled: true,
+					children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
+				})
+			}) : null
+		]
+	});
+};
+//#endregion
+export { Alert };

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

@@ -0,0 +1,2 @@
+import { Alert, AlertAction } from "./alert.mjs";
+export { Alert, type AlertAction };

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

@@ -0,0 +1,2 @@
+import { Alert } from "./alert.mjs";
+export { Alert };

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

@@ -0,0 +1,2 @@
+import { Progress } from "./progress.mjs";
+export { Progress };

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

@@ -0,0 +1,2 @@
+import { Progress } from "./progress.mjs";
+export { Progress };

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

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

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

@@ -0,0 +1,21 @@
+import { toPrecision } from "../../../internal/to-precision.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/feedback/progress/progress.tsx
+const Progress = ({ value, max, min = 0, label, ...rest }) => {
+	const percentage = toPrecision((value - min) / (max - min) * 100);
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: "bg-bg-emphasize vertical:inline-48 rounded-full block-4 inline-full",
+		style: { "--progress-fill": `${percentage.toString()}%` },
+		children: /* @__PURE__ */ jsx("div", {
+			"aria-label": label ?? `${percentage.toString()}%`,
+			"aria-valuemax": max,
+			"aria-valuemin": min,
+			"aria-valuenow": value,
+			className: "bg-primary-bg rounded-full transition-[inline-size] block-full inline-(--progress-fill)",
+			role: "progressbar"
+		})
+	});
+};
+//#endregion
+export { Progress };