raft-ui 0.0.5 → 0.0.6

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+## [0.0.6](https://github.com/botiverse/rui/compare/v0.0.5...v0.0.6) (2026-06-25)
+
+### Features
+
+- **alert-dialog:** add destructive confirmation component ([f3507ae](https://github.com/botiverse/rui/commit/f3507ae0d462575ab67d4b814f7c9a3fb4f94547))
+- **dialog:** add dialog component ([e789e11](https://github.com/botiverse/rui/commit/e789e11e11f909ce8195599baa93a75bee0e38be))
+- **separator:** add separator component ([bd098c9](https://github.com/botiverse/rui/commit/bd098c90b352477ec6ac16f84f4ffe7633dba9ce))
+
+### Bug Fixes
+
+- **ui:** route wip components through wip entry ([21defb5](https://github.com/botiverse/rui/commit/21defb51ca0595fdcd2269300bd046770a722396))

package/dist/button-CJqMhTPQ.mjs

@@ -0,0 +1,621 @@
+import { Button } from "@base-ui/react/button";
+import { cn } from "cnfast";
+import { tv } from "tailwind-variants/lite";
+import { createContext, use } from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/tv.ts
+const tv$1 = ((options) => {
+	const recipe = tv(options);
+	const wrappedRecipe = ((props) => {
+		const result = recipe(props);
+		if (typeof result === "string") return cn(result);
+		return Object.fromEntries(Object.entries(result).map(([slotName, slot]) => [slotName, (slotProps) => cn(slot(slotProps))]));
+	});
+	return Object.assign(wrappedRecipe, recipe);
+});
+//#endregion
+//#region src/lib/theme/theme-context.ts
+const ThemeContext = createContext("brutal");
+const ThemeStateContext = createContext({
+	theme: "brutal",
+	setTheme: () => void 0,
+	mode: "light",
+	resolvedMode: "light"
+});
+//#endregion
+//#region src/lib/theme/use-theme.ts
+/** Read the active style family for theme-aware component recipes. */
+function useThemeFamily() {
+	return use(ThemeContext);
+}
+/** Read and update the application-level RUI theme selection. */
+function useTheme() {
+	return use(ThemeStateContext);
+}
+//#endregion
+//#region src/components/spinner/spinner.tsx
+const SPINNER_STYLE = `
+@keyframes raft-braille-spinner {
+  0%,
+  9.99% {
+    content: "⠋";
+  }
+  10%,
+  19.99% {
+    content: "⠙";
+  }
+  20%,
+  29.99% {
+    content: "⠹";
+  }
+  30%,
+  39.99% {
+    content: "⠸";
+  }
+  40%,
+  49.99% {
+    content: "⠼";
+  }
+  50%,
+  59.99% {
+    content: "⠴";
+  }
+  60%,
+  69.99% {
+    content: "⠦";
+  }
+  70%,
+  79.99% {
+    content: "⠧";
+  }
+  80%,
+  89.99% {
+    content: "⠇";
+  }
+  90%,
+  100% {
+    content: "⠏";
+  }
+}
+
+[data-slot="spinner"] [data-spinner-glyph]::before {
+  content: "⠋";
+  animation: raft-braille-spinner 800ms steps(1, end) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="spinner"] [data-spinner-glyph]::before {
+    animation-duration: 1600ms;
+  }
+}
+
+@keyframes raft-elegant-spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes raft-elegant-spinner-dash {
+  0% {
+    stroke-dasharray: 1 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+[data-slot="spinner"] [data-spinner-ring] {
+  animation: raft-elegant-spinner-spin 1600ms linear infinite;
+  transform-box: fill-box;
+  transform-origin: center;
+  will-change: transform;
+}
+
+[data-slot="spinner"] [data-spinner-arc] {
+  animation: raft-elegant-spinner-dash 1400ms cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  stroke-dasharray: 1 150;
+  stroke-dashoffset: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="spinner"] [data-spinner-ring] {
+    animation-duration: 2400ms;
+    will-change: auto;
+  }
+
+  [data-slot="spinner"] [data-spinner-arc] {
+    animation: none;
+    stroke-dasharray: 72 150;
+    stroke-dashoffset: -30;
+  }
+}
+`;
+const spinner = tv$1({
+	slots: {
+		root: ["relative inline-flex shrink-0 items-center justify-center", "leading-none text-current"],
+		glyph: "inline-block min-w-[1ch] font-mono tabular-nums",
+		ring: "block size-full shrink-0"
+	},
+	variants: {
+		theme: {
+			brutal: {},
+			elegant: {}
+		},
+		size: {
+			sm: {},
+			lg: {}
+		}
+	},
+	defaultVariants: { size: "sm" },
+	compoundVariants: [
+		{
+			theme: "brutal",
+			size: "sm",
+			class: { root: "h-4 text-base" }
+		},
+		{
+			theme: "brutal",
+			size: "lg",
+			class: { root: "h-6 text-xl" }
+		},
+		{
+			theme: "elegant",
+			size: "sm",
+			class: { root: "size-3.5" }
+		},
+		{
+			theme: "elegant",
+			size: "lg",
+			class: { root: "size-[18px]" }
+		}
+	]
+});
+const spinnerStyle = /* @__PURE__ */ jsx("style", {
+	href: "raft-ui-spinner",
+	precedence: "default",
+	children: SPINNER_STYLE
+});
+function Spinner({ size = "sm", className, render, ...props }) {
+	const theme = useThemeFamily();
+	const { root, glyph, ring } = spinner({
+		theme,
+		size
+	});
+	const children = theme === "elegant" ? /* @__PURE__ */ jsxs(Fragment, { children: [spinnerStyle, /* @__PURE__ */ jsxs("svg", {
+		"data-spinner-ring": "",
+		"aria-hidden": "true",
+		className: ring(),
+		xmlns: "http://www.w3.org/2000/svg",
+		fill: "none",
+		viewBox: "0 0 24 24",
+		children: [/* @__PURE__ */ jsx("circle", {
+			className: "opacity-20",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "2.5"
+		}), /* @__PURE__ */ jsx("circle", {
+			"data-spinner-arc": "",
+			className: "opacity-80",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			fill: "none",
+			pathLength: "150",
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeWidth: "2.5"
+		})]
+	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [spinnerStyle, /* @__PURE__ */ jsx("span", {
+		"data-spinner-glyph": "",
+		"aria-hidden": "true",
+		className: glyph()
+	})] });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			role: "status",
+			"aria-label": "Loading",
+			className: root({ className }),
+			children
+		}, props),
+		state: {
+			slot: "spinner",
+			size
+		}
+	});
+}
+//#endregion
+//#region src/components/button/button.tsx
+const buttonVariants = tv$1({
+	slots: {
+		root: [
+			"relative inline-flex shrink-0 items-center justify-center",
+			"font-heading leading-none whitespace-nowrap select-none",
+			"border-line rounded-none",
+			"shadow-sm transition-all duration-100",
+			"outline outline-[1px] outline-offset-2 outline-transparent",
+			"data-[loading=true]:cursor-wait",
+			"disabled:pointer-events-none disabled:opacity-40 data-[loading=true]:opacity-100",
+			"disabled:transform-none",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+		],
+		content: "relative z-10 inline-flex items-center justify-center gap-[inherit] data-[loading=true]:invisible",
+		loadingIndicator: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
+	},
+	variants: {
+		theme: {
+			brutal: { root: ["border-2 font-bold focus-visible:outline-transparent"] },
+			elegant: { root: [
+				"overflow-clip border-0 font-sans font-medium antialiased",
+				"focus-visible:outline-[var(--button-focus-outline,transparent)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_0_0_1px_var(--line-subtle)]",
+				"before:pointer-events-none before:absolute before:inset-0 before:z-0 before:rounded-[inherit]",
+				"active:not-aria-[haspopup]:scale-[0.985]"
+			] }
+		},
+		variant: {
+			primary: { root: ["border-line-strong bg-primary-400 text-primary-950", "hover:bg-primary-500"] },
+			default: { root: ["border-line-strong bg-layer-panel text-foreground-strong", "hover:bg-layer-panel"] },
+			information: { root: ["border-line-strong bg-info-base text-foreground-inverse", "hover:bg-info-base"] },
+			muted: { root: ["border-line-strong bg-secondary-400 text-secondary-950", "hover:border-line-strong hover:bg-secondary-400"] },
+			accent: { root: ["border-line-strong bg-accent-400 text-accent-950", "hover:bg-accent-500"] },
+			warning: { root: ["border-line-strong bg-warning-base text-foreground-inverse", "hover:bg-warning-base"] },
+			outline: { root: [
+				"border-line-strong bg-transparent text-foreground-strong",
+				"hover:bg-layer-muted",
+				"shadow-none"
+			] },
+			ghost: { root: ["border-transparent bg-transparent text-foreground shadow-none", "hover:border-line-strong hover:bg-layer-muted"] },
+			link: { root: ["border-transparent bg-transparent text-foreground-strong shadow-none underline-offset-4", "hover:underline"] },
+			"danger-secondary": { root: ["border-line-strong bg-danger-lighter text-danger-base", "hover:bg-danger-lighter"] },
+			danger: { root: ["border-line-strong bg-danger-base text-foreground-inverse", "hover:border-[oklch(0.595_0.241_26.758)] hover:bg-[oklch(0.595_0.241_26.758)]"] },
+			"danger-outline": { root: [
+				"border-line-strong bg-transparent text-danger-base",
+				"hover:bg-layer-muted",
+				"shadow-none"
+			] }
+		},
+		size: {
+			xs: { root: [
+				"gap-1 px-2 py-[5px] text-[11px]",
+				"has-data-[icon=inline-start]:pl-1.5 has-data-[icon=inline-end]:pr-1.5",
+				"[&_svg:not([class*='size-'])]:size-3"
+			] },
+			sm: { root: [
+				"gap-1.5 px-2.5 py-[6px] text-xs",
+				"has-data-[icon=inline-start]:pl-2 has-data-[icon=inline-end]:pr-2",
+				"[&_svg:not([class*='size-'])]:size-3.5"
+			] },
+			md: { root: ["gap-2 px-3 py-2 text-sm", "has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5"] },
+			lg: { root: [
+				"gap-2 px-3.5 py-2.5 text-base",
+				"has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3",
+				"[&_svg:not([class*='size-'])]:size-4"
+			] },
+			"icon-xs": { root: ["p-[5px] text-[11px]", "[&_svg:not([class*='size-'])]:size-3"] },
+			"icon-sm": { root: ["p-[6px] text-xs", "[&_svg:not([class*='size-'])]:size-3.5"] },
+			"icon-md": { root: ["p-2 text-sm", "[&_svg:not([class*='size-'])]:size-4"] },
+			"icon-lg": { root: ["p-3 text-sm", "[&_svg:not([class*='size-'])]:size-4"] }
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	},
+	compoundVariants: [
+		{
+			theme: "elegant",
+			size: ["xs", "icon-xs"],
+			class: { root: "rounded-sm" }
+		},
+		{
+			theme: "elegant",
+			size: ["sm", "icon-sm"],
+			class: { root: "rounded" }
+		},
+		{
+			theme: "elegant",
+			size: ["md", "icon-md"],
+			class: { root: "rounded-md" }
+		},
+		{
+			theme: "elegant",
+			size: ["lg", "icon-lg"],
+			class: { root: "rounded-md" }
+		},
+		{
+			theme: "brutal",
+			variant: "primary",
+			class: { root: "bg-brutal-yellow text-black hover:bg-brutal-yellow" }
+		},
+		{
+			theme: "brutal",
+			variant: "default",
+			class: { root: "bg-white text-black hover:bg-white" }
+		},
+		{
+			theme: "brutal",
+			variant: "outline",
+			class: { root: "bg-white text-black shadow-sm hover:bg-white" }
+		},
+		{
+			theme: "brutal",
+			variant: "information",
+			class: { root: "bg-brutal-cyan text-black hover:bg-brutal-cyan" }
+		},
+		{
+			theme: "brutal",
+			variant: "muted",
+			class: { root: "bg-brutal-stone text-black hover:bg-brutal-stone" }
+		},
+		{
+			theme: "brutal",
+			variant: "accent",
+			class: { root: "bg-brutal-pink text-black hover:bg-brutal-pink" }
+		},
+		{
+			theme: "brutal",
+			variant: "danger",
+			class: { root: "bg-brutal-red text-black hover:bg-brutal-red" }
+		},
+		{
+			theme: "brutal",
+			variant: "warning",
+			class: { root: "bg-[oklch(0.785_0.123_50.11)] text-black hover:bg-[oklch(0.785_0.123_50.11)]" }
+		},
+		{
+			theme: "brutal",
+			size: "xs",
+			class: { root: "h-6 px-2 py-0 text-[11px]" }
+		},
+		{
+			theme: "brutal",
+			size: "sm",
+			class: { root: "h-7 px-2.5 py-0 text-xs" }
+		},
+		{
+			theme: "brutal",
+			size: "md",
+			class: { root: "h-8 px-3 py-0 text-sm" }
+		},
+		{
+			theme: "brutal",
+			size: "lg",
+			class: { root: "h-10 px-4 py-0 text-sm" }
+		},
+		{
+			theme: "brutal",
+			size: "icon-xs",
+			class: { root: "size-6 p-0 text-[11px]" }
+		},
+		{
+			theme: "brutal",
+			size: "icon-sm",
+			class: { root: "size-7 p-0 text-xs" }
+		},
+		{
+			theme: "brutal",
+			size: "icon-md",
+			class: { root: "size-8 p-0 text-sm" }
+		},
+		{
+			theme: "brutal",
+			size: "icon-lg",
+			class: { root: "size-10 p-0 text-sm" }
+		},
+		{
+			theme: "elegant",
+			variant: "default",
+			class: { root: [
+				"bg-foreground-strong text-foreground-inverse",
+				"[--button-focus-outline:var(--foreground-strong)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_0_0_1px_var(--foreground-strong)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_8%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.31_0.006_285)]"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "primary",
+			class: { root: [
+				"bg-primary-400 text-primary-950",
+				"[--button-focus-outline:var(--primary-400)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.15),0_0_0_1px_oklch(0.83_0.14_91.89_/_0.83)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_11%)_0%,oklab(100%_0_0_/_0%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.86_0.15_91.89)]"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "outline",
+			class: { root: [
+				"bg-layer-panel text-foreground-strong",
+				"[--button-focus-outline:var(--layer-panel)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_0_0_1px_var(--line-subtle)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(0%_0_0_/_0%)_30%,oklab(0%_0_0_/_1%)_100%)]",
+				"hover:bg-layer-muted"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "ghost",
+			class: { root: [
+				"bg-transparent text-foreground-muted shadow-none",
+				"[--button-focus-outline:var(--line-muted)]",
+				"before:bg-transparent hover:bg-line-muted"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "danger-secondary",
+			class: { root: [
+				"bg-danger-lighter text-danger-base",
+				"[--button-focus-outline:var(--state-danger-lighter)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.18),0_0_0_1px_var(--state-danger-light)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_9%)_0%,oklab(0%_0_0_/_1%)_100%)]",
+				"hover:bg-danger-light"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "danger",
+			class: { root: [
+				"bg-danger-base text-foreground-inverse",
+				"[--button-focus-outline:var(--state-danger-base)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_0_0_1px_var(--state-danger-base)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_10%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.56_0.23_26.758)]"
+			] }
+		},
+		{
+			theme: "brutal",
+			variant: "danger",
+			class: { root: [
+				"border-line-strong bg-brutal-red text-black",
+				"shadow-sm",
+				"hover:border-line-strong hover:bg-brutal-red",
+				"hover:-translate-y-px hover:shadow-md",
+				"active:not-aria-[haspopup]:translate-x-px active:not-aria-[haspopup]:translate-y-px",
+				"active:shadow-xs"
+			] }
+		},
+		{
+			theme: "brutal",
+			variant: "danger-secondary",
+			class: { root: [
+				"border-line-strong bg-danger-lighter text-[color-mix(in_oklab,var(--state-danger-base)_72%,transparent)]",
+				"shadow-sm",
+				"hover:border-line-strong hover:bg-danger-lighter",
+				"hover:-translate-y-px hover:shadow-md",
+				"active:not-aria-[haspopup]:translate-x-px active:not-aria-[haspopup]:translate-y-px",
+				"active:shadow-xs"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "danger-outline",
+			class: { root: [
+				"bg-layer-panel text-danger-base",
+				"[--button-focus-outline:var(--layer-panel)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_0_0_1px_var(--state-danger-light)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(0%_0_0_/_0%)_30%,oklab(0%_0_0_/_1%)_100%)]",
+				"hover:bg-danger-lighter"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "accent",
+			class: { root: [
+				"bg-accent-400 text-white",
+				"[--button-focus-outline:var(--accent-400)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_0_0_1px_var(--accent-400)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_8%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.72_0.15_0.71)]"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "warning",
+			class: { root: [
+				"bg-warning-base text-foreground-inverse",
+				"[--button-focus-outline:var(--state-warning-base)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.14),0_0_0_1px_var(--state-warning-base)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_10%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.65_0.19_44.441)]"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "link",
+			class: { root: [
+				"bg-transparent text-foreground-muted shadow-none",
+				"[--button-focus-outline:transparent]",
+				"before:bg-transparent hover:bg-transparent hover:text-foreground-muted"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "information",
+			class: { root: [
+				"bg-info-base text-foreground-inverse",
+				"[--button-focus-outline:var(--state-info-base)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_0_0_1px_var(--state-info-base)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_8%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.74_0.13_219.2)]"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "muted",
+			class: { root: [
+				"bg-layer-muted text-foreground-placeholder",
+				"[--button-focus-outline:var(--layer-muted)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_0_0_1px_var(--line-subtle)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_5%)_0%,oklab(0%_0_0_/_1%)_100%)]",
+				"hover:bg-line-subtle"
+			] }
+		},
+		{
+			theme: "brutal",
+			variant: [
+				"primary",
+				"default",
+				"information",
+				"muted",
+				"accent",
+				"warning",
+				"outline"
+			],
+			class: { root: [
+				"hover:-translate-y-px hover:shadow-md",
+				"active:not-aria-[haspopup]:translate-x-px active:not-aria-[haspopup]:translate-y-px",
+				"active:shadow-xs"
+			] }
+		}
+	]
+});
+function defaultNativeButton(render) {
+	if (!render || typeof render !== "object" || !("type" in render)) return;
+	const element = render;
+	if (typeof element.type === "string") return element.type === "button";
+}
+function Button$1({ variant, size, loading = false, loadingLabel = "Loading", disabled, className, children, render, nativeButton, ...props }) {
+	const { root, content, loadingIndicator } = buttonVariants({
+		theme: useThemeFamily(),
+		variant,
+		size
+	});
+	return /* @__PURE__ */ jsxs(Button, {
+		...props,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		"data-slot": "button",
+		className: root({ className }),
+		"data-loading": loading ? "true" : void 0,
+		disabled: disabled || loading,
+		"aria-disabled": loading || void 0,
+		children: [loading ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "button-loading-indicator",
+			className: loadingIndicator(),
+			children: /* @__PURE__ */ jsx(Spinner, { "aria-label": loadingLabel })
+		}) : null, /* @__PURE__ */ jsx("span", {
+			"data-slot": "button-content",
+			"data-loading": loading ? "true" : void 0,
+			className: content(),
+			children
+		})]
+	});
+}
+//#endregion
+export { useThemeFamily as a, tv$1 as c, useTheme as i, buttonVariants as n, ThemeContext as o, Spinner as r, ThemeStateContext as s, Button$1 as t };