@pixpilot/shadcn-ui 0.1.0 → 0.4.1

package/dist/rich-text-editor/RichTextEditor.js

@@ -0,0 +1,126 @@
+import { predefinedToolbarOptions } from "./predefined-toolbar-options.js";
+import { Button, Tooltip, TooltipContent, TooltipTrigger, cn } from "@pixpilot/shadcn";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+
+//#region src/rich-text-editor/RichTextEditor.tsx
+const ToolbarButton = ({ onClick, isActive, disabled, children, tooltip }) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+	asChild: true,
+	children: /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: isActive ? "default" : "ghost",
+		size: "sm",
+		onMouseDown: (event) => {
+			event.preventDefault();
+		},
+		onClick,
+		disabled,
+		className: "h-8 w-8 p-0",
+		children
+	})
+}), /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })] });
+const defaultExtensions = [];
+const defaultToolbarOptions = [
+	"bold",
+	"italic",
+	"underline",
+	"strike",
+	"code",
+	"|",
+	"heading1",
+	"heading2",
+	"heading3",
+	"|",
+	"bulletList",
+	"orderedList",
+	"|",
+	"blockquote",
+	"codeBlock"
+];
+const RichTextEditor = ({ content, onChange, extensions = defaultExtensions, editable = true, className, contentClassName, showToolbar = true, toolbarOptions = defaultToolbarOptions, editorProps: customEditorProps }) => {
+	const [, forceRender] = React.useReducer((x) => x + 1, 0);
+	const defaultEditorProps = { attributes: { class: cn("min-h-[200px] p-4 text-sm leading-relaxed focus:outline-none", "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:leading-tight [&_h1]:my-2", "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:leading-tight [&_h2]:my-2", "[&_h3]:text-xl [&_h3]:font-bold [&_h3]:leading-tight [&_h3]:my-2", "[&_p]:my-2", "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:my-2", "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:my-2", "[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:my-2 [&_blockquote]:italic", "[&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_code]:font-mono", "[&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:font-mono", contentClassName) } };
+	const mergedEditorProps = {
+		...defaultEditorProps,
+		...customEditorProps,
+		attributes: {
+			...defaultEditorProps.attributes,
+			...customEditorProps?.attributes,
+			class: cn(defaultEditorProps.attributes.class, (customEditorProps?.attributes)?.class)
+		}
+	};
+	const editorInstance = useEditor({
+		extensions: [StarterKit].concat(extensions),
+		content,
+		editable,
+		onUpdate: ({ editor: updatedEditor }) => {
+			onChange?.(updatedEditor.getHTML());
+		},
+		editorProps: mergedEditorProps
+	});
+	React.useEffect(() => {
+		if (editorInstance == null) return () => {};
+		const rerender = () => {
+			forceRender();
+		};
+		editorInstance.on("selectionUpdate", rerender);
+		editorInstance.on("transaction", rerender);
+		editorInstance.on("focus", rerender);
+		editorInstance.on("blur", rerender);
+		return () => {
+			editorInstance.off("selectionUpdate", rerender);
+			editorInstance.off("transaction", rerender);
+			editorInstance.off("focus", rerender);
+			editorInstance.off("blur", rerender);
+		};
+	}, [editorInstance]);
+	if (editorInstance == null) return /* @__PURE__ */ jsxs("div", {
+		className: cn("border rounded-md bg-background", className),
+		children: [showToolbar && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1 border-b p-2 h-10" }), /* @__PURE__ */ jsx("div", {
+			className: "min-h-[200px] p-4 text-sm leading-relaxed",
+			children: "Loading editor..."
+		})]
+	});
+	const handleCommand = (commandFn) => {
+		try {
+			commandFn();
+		} catch {}
+	};
+	const renderToolbar = () => {
+		if (!showToolbar) return null;
+		const isEditorFocused = editorInstance.isFocused;
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap items-center gap-1 border-b p-2",
+			children: toolbarOptions.map((option, index) => {
+				if (option === "|") return /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px bg-border" }, `separator-${index}`);
+				if (typeof option === "string") {
+					const predefinedOption = predefinedToolbarOptions[option];
+					if (!predefinedOption) return null;
+					return /* @__PURE__ */ jsx(ToolbarButton, {
+						onClick: () => handleCommand(() => predefinedOption.onClick(editorInstance)),
+						isActive: isEditorFocused && (predefinedOption.isActive?.(editorInstance) ?? false),
+						tooltip: predefinedOption.tooltip,
+						children: predefinedOption.icon
+					}, option);
+				}
+				const customOption = option;
+				return /* @__PURE__ */ jsx(ToolbarButton, {
+					onClick: () => handleCommand(() => customOption.onClick(editorInstance)),
+					isActive: isEditorFocused && (customOption.isActive?.(editorInstance) ?? false),
+					tooltip: customOption.tooltip,
+					children: customOption.icon
+				}, `custom-${index}-${customOption.tooltip}`);
+			})
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("border rounded-md bg-background", className),
+		children: [renderToolbar(), /* @__PURE__ */ jsx(EditorContent, { editor: editorInstance })]
+	});
+};
+RichTextEditor.displayName = "RichTextEditor";
+
+//#endregion
+export { RichTextEditor };

package/dist/rich-text-editor/index.cjs

@@ -0,0 +1,2 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_RichTextEditor = require('./RichTextEditor.cjs');

package/dist/rich-text-editor/index.d.cts

@@ -0,0 +1 @@
+import { RichTextEditor, RichTextEditorProps, ToolbarOption } from "./RichTextEditor.cjs";

package/dist/rich-text-editor/index.d.ts

@@ -0,0 +1 @@
+import { RichTextEditor, RichTextEditorProps, ToolbarOption } from "./RichTextEditor.js";

package/dist/rich-text-editor/index.js

@@ -0,0 +1 @@
+import { RichTextEditor } from "./RichTextEditor.js";

package/dist/rich-text-editor/predefined-toolbar-options.cjs

@@ -0,0 +1,84 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/rich-text-editor/predefined-toolbar-options.tsx
+const predefinedToolbarOptions = {
+	bold: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Bold, { className: "h-4 w-4" }),
+		tooltip: "Bold",
+		onClick: (editor) => editor.chain().focus().toggleBold().run(),
+		isActive: (editor) => editor.isActive("bold")
+	},
+	italic: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Italic, { className: "h-4 w-4" }),
+		tooltip: "Italic",
+		onClick: (editor) => editor.chain().focus().toggleItalic().run(),
+		isActive: (editor) => editor.isActive("italic")
+	},
+	underline: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Underline, { className: "h-4 w-4" }),
+		tooltip: "Underline",
+		onClick: (editor) => editor.chain().focus().toggleUnderline().run(),
+		isActive: (editor) => editor.isActive("underline")
+	},
+	strike: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Strikethrough, { className: "h-4 w-4" }),
+		tooltip: "Strikethrough",
+		onClick: (editor) => editor.chain().focus().toggleStrike().run(),
+		isActive: (editor) => editor.isActive("strike")
+	},
+	code: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Code, { className: "h-4 w-4" }),
+		tooltip: "Inline Code",
+		onClick: (editor) => editor.chain().focus().toggleCode().run(),
+		isActive: (editor) => editor.isActive("code")
+	},
+	heading1: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Heading1, { className: "h-4 w-4" }),
+		tooltip: "Heading 1",
+		onClick: (editor) => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 1 })
+	},
+	heading2: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Heading2, { className: "h-4 w-4" }),
+		tooltip: "Heading 2",
+		onClick: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 2 })
+	},
+	heading3: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Heading3, { className: "h-4 w-4" }),
+		tooltip: "Heading 3",
+		onClick: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 3 })
+	},
+	bulletList: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.List, { className: "h-4 w-4" }),
+		tooltip: "Bullet List",
+		onClick: (editor) => editor.chain().focus().toggleBulletList().run(),
+		isActive: (editor) => editor.isActive("bulletList")
+	},
+	orderedList: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ListOrdered, { className: "h-4 w-4" }),
+		tooltip: "Ordered List",
+		onClick: (editor) => editor.chain().focus().toggleOrderedList().run(),
+		isActive: (editor) => editor.isActive("orderedList")
+	},
+	blockquote: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Quote, { className: "h-4 w-4" }),
+		tooltip: "Blockquote",
+		onClick: (editor) => editor.chain().focus().toggleBlockquote().run(),
+		isActive: (editor) => editor.isActive("blockquote")
+	},
+	codeBlock: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Code2, { className: "h-4 w-4" }),
+		tooltip: "Code Block",
+		onClick: (editor) => editor.chain().focus().toggleCodeBlock().run(),
+		isActive: (editor) => editor.isActive("codeBlock")
+	}
+};
+
+//#endregion
+exports.predefinedToolbarOptions = predefinedToolbarOptions;

package/dist/rich-text-editor/predefined-toolbar-options.js

@@ -0,0 +1,81 @@
+import { Bold, Code, Code2, Heading1, Heading2, Heading3, Italic, List, ListOrdered, Quote, Strikethrough, Underline } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/rich-text-editor/predefined-toolbar-options.tsx
+const predefinedToolbarOptions = {
+	bold: {
+		icon: /* @__PURE__ */ jsx(Bold, { className: "h-4 w-4" }),
+		tooltip: "Bold",
+		onClick: (editor) => editor.chain().focus().toggleBold().run(),
+		isActive: (editor) => editor.isActive("bold")
+	},
+	italic: {
+		icon: /* @__PURE__ */ jsx(Italic, { className: "h-4 w-4" }),
+		tooltip: "Italic",
+		onClick: (editor) => editor.chain().focus().toggleItalic().run(),
+		isActive: (editor) => editor.isActive("italic")
+	},
+	underline: {
+		icon: /* @__PURE__ */ jsx(Underline, { className: "h-4 w-4" }),
+		tooltip: "Underline",
+		onClick: (editor) => editor.chain().focus().toggleUnderline().run(),
+		isActive: (editor) => editor.isActive("underline")
+	},
+	strike: {
+		icon: /* @__PURE__ */ jsx(Strikethrough, { className: "h-4 w-4" }),
+		tooltip: "Strikethrough",
+		onClick: (editor) => editor.chain().focus().toggleStrike().run(),
+		isActive: (editor) => editor.isActive("strike")
+	},
+	code: {
+		icon: /* @__PURE__ */ jsx(Code, { className: "h-4 w-4" }),
+		tooltip: "Inline Code",
+		onClick: (editor) => editor.chain().focus().toggleCode().run(),
+		isActive: (editor) => editor.isActive("code")
+	},
+	heading1: {
+		icon: /* @__PURE__ */ jsx(Heading1, { className: "h-4 w-4" }),
+		tooltip: "Heading 1",
+		onClick: (editor) => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 1 })
+	},
+	heading2: {
+		icon: /* @__PURE__ */ jsx(Heading2, { className: "h-4 w-4" }),
+		tooltip: "Heading 2",
+		onClick: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 2 })
+	},
+	heading3: {
+		icon: /* @__PURE__ */ jsx(Heading3, { className: "h-4 w-4" }),
+		tooltip: "Heading 3",
+		onClick: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 3 })
+	},
+	bulletList: {
+		icon: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" }),
+		tooltip: "Bullet List",
+		onClick: (editor) => editor.chain().focus().toggleBulletList().run(),
+		isActive: (editor) => editor.isActive("bulletList")
+	},
+	orderedList: {
+		icon: /* @__PURE__ */ jsx(ListOrdered, { className: "h-4 w-4" }),
+		tooltip: "Ordered List",
+		onClick: (editor) => editor.chain().focus().toggleOrderedList().run(),
+		isActive: (editor) => editor.isActive("orderedList")
+	},
+	blockquote: {
+		icon: /* @__PURE__ */ jsx(Quote, { className: "h-4 w-4" }),
+		tooltip: "Blockquote",
+		onClick: (editor) => editor.chain().focus().toggleBlockquote().run(),
+		isActive: (editor) => editor.isActive("blockquote")
+	},
+	codeBlock: {
+		icon: /* @__PURE__ */ jsx(Code2, { className: "h-4 w-4" }),
+		tooltip: "Code Block",
+		onClick: (editor) => editor.chain().focus().toggleCodeBlock().run(),
+		isActive: (editor) => editor.isActive("codeBlock")
+	}
+};
+
+//#endregion
+export { predefinedToolbarOptions };

package/dist/spinner/index.cjs

@@ -1 +1,2 @@
-const e=require(`./spinner.cjs`);
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_spinner = require('./spinner.cjs');

package/dist/spinner/index.js

@@ -1 +1 @@
-import{Spinner as e}from"./spinner.js";
+import { Spinner } from "./spinner.js";

package/dist/spinner/spinner.cjs

@@ -1,7 +1,74 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./styles.cjs`);let n=require(`react`);n=e.__toESM(n);let r=require(`react/jsx-runtime`);r=e.__toESM(r);const i={sm:24,md:40,lg:64,xl:96},a=40,o=2,s=.1,c=2,l=`currentColor`,u=40,d=100;let f=0;const p=({size:e=40,strokeWidth:a,speed:o=2,color:s=`currentColor`,colors:c,className:l=``})=>{let u=typeof e==`string`?i[e]:e,d=a??Math.max(2,Math.round(u*.1)),p=(0,n.useMemo)(()=>`spinner-${++f}-${Date.now()}`,[]),m=d/u*40,h=()=>!c||c.length===0?``:`${p}-color-change`;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(`style`,{children:[t.getGlobalStyles({uniqueId:p,speed:o,size:u,colors:c,color:s,strokeWidth:d}),c&&c.length>0&&(()=>{if(!c||c.length===0)return``;let e=c.map((e,t)=>`${t/c.length*100}% { stroke: ${e}; }`).join(`
-`);return`
-      @keyframes ${h()} {
-        ${e}
-        100% { stroke: ${c[0]}; }
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_styles = require('./styles.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/spinner/spinner.tsx
+const SpinnerSize = {
+	sm: 24,
+	md: 40,
+	lg: 64,
+	xl: 96
+};
+const DEFAULT_SIZE = 40;
+const MIN_STROKE_WIDTH = 2;
+const STROKE_WIDTH_RATIO = .1;
+const DEFAULT_SPEED = 2;
+const DEFAULT_COLOR = "currentColor";
+const VIEWBOX_STROKE_REF = 40;
+const PERCENT_MULTIPLIER = 100;
+let spinnerIdCounter = 0;
+const Spinner = ({ size: sizeProp = DEFAULT_SIZE, strokeWidth: strokeWidthProp, speed = DEFAULT_SPEED, color = DEFAULT_COLOR, colors, className = "" }) => {
+	const size = typeof sizeProp === "string" ? SpinnerSize[sizeProp] : sizeProp;
+	const strokeWidth = strokeWidthProp ?? Math.max(MIN_STROKE_WIDTH, Math.round(size * STROKE_WIDTH_RATIO));
+	const uniqueId = (0, react.useMemo)(() => `spinner-${++spinnerIdCounter}-${Date.now()}`, []);
+	const viewBoxStrokeWidth = strokeWidth / size * VIEWBOX_STROKE_REF;
+	const CIRCLE_RADIUS = 20;
+	const getColorAnimationId = () => {
+		if (!colors || colors.length === 0) return "";
+		return `${uniqueId}-color-change`;
+	};
+	const getColorAnimationKeyframes = () => {
+		if (!colors || colors.length === 0) return "";
+		const keyframes = colors.map((c, i) => {
+			return `${i / colors.length * PERCENT_MULTIPLIER}% { stroke: ${c}; }`;
+		}).join("\n");
+		return `
+      @keyframes ${getColorAnimationId()} {
+        ${keyframes}
+        100% { stroke: ${colors[0]}; }
       }
-    `})()]}),(0,r.jsx)(`div`,{className:`${p}-loader ${l}`,children:(0,r.jsx)(`svg`,{className:`${p}-circular`,viewBox:`25 25 50 50`,width:`100%`,height:`100%`,children:(0,r.jsx)(`circle`,{className:`${p}-path`,cx:50,cy:50,r:20,fill:`none`,strokeWidth:m,strokeMiterlimit:`10`})})})]})};p.displayName=`Spinner`,exports.Spinner=p;
+    `;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("style", { children: [require_styles.getGlobalStyles({
+		uniqueId,
+		speed,
+		size,
+		colors,
+		color,
+		strokeWidth
+	}), colors && colors.length > 0 && getColorAnimationKeyframes()] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `${uniqueId}-loader ${className}`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			className: `${uniqueId}-circular`,
+			viewBox: "25 25 50 50",
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				className: `${uniqueId}-path`,
+				cx: 50,
+				cy: 50,
+				r: CIRCLE_RADIUS,
+				fill: "none",
+				strokeWidth: viewBoxStrokeWidth,
+				strokeMiterlimit: "10"
+			})
+		})
+	})] });
+};
+Spinner.displayName = "Spinner";
+
+//#endregion
+exports.Spinner = Spinner;

package/dist/spinner/spinner.js

@@ -1,7 +1,71 @@
-import{getGlobalStyles as e}from"./styles.js";import t,{useMemo as n}from"react";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";const o={sm:24,md:40,lg:64,xl:96};let s=0;const c=({size:t=40,strokeWidth:c,speed:l=2,color:u=`currentColor`,colors:d,className:f=``})=>{let p=typeof t==`string`?o[t]:t,m=c??Math.max(2,Math.round(p*.1)),h=n(()=>`spinner-${++s}-${Date.now()}`,[]),g=m/p*40,_=()=>!d||d.length===0?``:`${h}-color-change`;return a(r,{children:[a(`style`,{children:[e({uniqueId:h,speed:l,size:p,colors:d,color:u,strokeWidth:m}),d&&d.length>0&&(()=>{if(!d||d.length===0)return``;let e=d.map((e,t)=>`${t/d.length*100}% { stroke: ${e}; }`).join(`
-`);return`
-      @keyframes ${_()} {
-        ${e}
-        100% { stroke: ${d[0]}; }
+import { getGlobalStyles } from "./styles.js";
+import React, { useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/spinner/spinner.tsx
+const SpinnerSize = {
+	sm: 24,
+	md: 40,
+	lg: 64,
+	xl: 96
+};
+const DEFAULT_SIZE = 40;
+const MIN_STROKE_WIDTH = 2;
+const STROKE_WIDTH_RATIO = .1;
+const DEFAULT_SPEED = 2;
+const DEFAULT_COLOR = "currentColor";
+const VIEWBOX_STROKE_REF = 40;
+const PERCENT_MULTIPLIER = 100;
+let spinnerIdCounter = 0;
+const Spinner = ({ size: sizeProp = DEFAULT_SIZE, strokeWidth: strokeWidthProp, speed = DEFAULT_SPEED, color = DEFAULT_COLOR, colors, className = "" }) => {
+	const size = typeof sizeProp === "string" ? SpinnerSize[sizeProp] : sizeProp;
+	const strokeWidth = strokeWidthProp ?? Math.max(MIN_STROKE_WIDTH, Math.round(size * STROKE_WIDTH_RATIO));
+	const uniqueId = useMemo(() => `spinner-${++spinnerIdCounter}-${Date.now()}`, []);
+	const viewBoxStrokeWidth = strokeWidth / size * VIEWBOX_STROKE_REF;
+	const CIRCLE_RADIUS = 20;
+	const getColorAnimationId = () => {
+		if (!colors || colors.length === 0) return "";
+		return `${uniqueId}-color-change`;
+	};
+	const getColorAnimationKeyframes = () => {
+		if (!colors || colors.length === 0) return "";
+		const keyframes = colors.map((c, i) => {
+			return `${i / colors.length * PERCENT_MULTIPLIER}% { stroke: ${c}; }`;
+		}).join("\n");
+		return `
+      @keyframes ${getColorAnimationId()} {
+        ${keyframes}
+        100% { stroke: ${colors[0]}; }
       }
-    `})()]}),i(`div`,{className:`${h}-loader ${f}`,children:i(`svg`,{className:`${h}-circular`,viewBox:`25 25 50 50`,width:`100%`,height:`100%`,children:i(`circle`,{className:`${h}-path`,cx:50,cy:50,r:20,fill:`none`,strokeWidth:g,strokeMiterlimit:`10`})})})]})};c.displayName=`Spinner`;export{c as Spinner};
+    `;
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("style", { children: [getGlobalStyles({
+		uniqueId,
+		speed,
+		size,
+		colors,
+		color,
+		strokeWidth
+	}), colors && colors.length > 0 && getColorAnimationKeyframes()] }), /* @__PURE__ */ jsx("div", {
+		className: `${uniqueId}-loader ${className}`,
+		children: /* @__PURE__ */ jsx("svg", {
+			className: `${uniqueId}-circular`,
+			viewBox: "25 25 50 50",
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsx("circle", {
+				className: `${uniqueId}-path`,
+				cx: 50,
+				cy: 50,
+				r: CIRCLE_RADIUS,
+				fill: "none",
+				strokeWidth: viewBoxStrokeWidth,
+				strokeMiterlimit: "10"
+			})
+		})
+	})] });
+};
+Spinner.displayName = "Spinner";
+
+//#endregion
+export { Spinner };

package/dist/spinner/styles.cjs

@@ -1,11 +1,20 @@
-function e(e){let{uniqueId:t,speed:n=2,size:r,colors:i,color:a}=e;return`
-      @keyframes ${t}-rotate {
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+
+//#region src/spinner/styles.ts
+function getGlobalStyles(options) {
+	const { uniqueId, speed = 2, size, colors, color } = options;
+	const getColorAnimationId = () => {
+		if (!colors || colors.length === 0) return "";
+		return `${uniqueId}-color-change`;
+	};
+	return `
+      @keyframes ${uniqueId}-rotate {
         100% {
           transform: rotate(360deg);
         }
       }
 
-      @keyframes ${t}-dash {
+      @keyframes ${uniqueId}-dash {
         0% {
           stroke-dasharray: 1, 200;
           stroke-dashoffset: 0;
@@ -20,27 +29,31 @@ function e(e){let{uniqueId:t,speed:n=2,size:r,colors:i,color:a}=e;return`
         }
       }
 
-      .${t}-loader {
+      .${uniqueId}-loader {
         position: relative;
         display: inline-block;
-        width: ${r}px;
-        height: ${r}px;
+        width: ${size}px;
+        height: ${size}px;
         overflow: hidden;
       }
 
-      .${t}-circular {
-        animation: ${t}-rotate ${n}s linear infinite;
+      .${uniqueId}-circular {
+        animation: ${uniqueId}-rotate ${speed}s linear infinite;
         height: 100%;
         width: 100%;
         max-height: 100%;
         max-width: 100%;
       }
 
-      .${t}-path {
-        stroke: ${i&&i.length>0?i[0]:a};
+      .${uniqueId}-path {
+        stroke: ${colors && colors.length > 0 ? colors[0] : color};
         stroke-dasharray: 1, 200;
         stroke-dashoffset: 0;
-        animation: ${i&&i.length>0?`${t}-dash 1.5s ease-in-out infinite, ${(()=>!i||i.length===0?``:`${t}-color-change`)()} ${n*i.length}s ease-in-out infinite`:`${t}-dash 1.5s ease-in-out infinite`};
+        animation: ${colors && colors.length > 0 ? `${uniqueId}-dash 1.5s ease-in-out infinite, ${getColorAnimationId()} ${speed * colors.length}s ease-in-out infinite` : `${uniqueId}-dash 1.5s ease-in-out infinite`};
         stroke-linecap: round;
       }
-    `}exports.getGlobalStyles=e;
+    `;
+}
+
+//#endregion
+exports.getGlobalStyles = getGlobalStyles;

package/dist/spinner/styles.js

@@ -1,11 +1,18 @@
-function e(e){let{uniqueId:t,speed:n=2,size:r,colors:i,color:a}=e;return`
-      @keyframes ${t}-rotate {
+//#region src/spinner/styles.ts
+function getGlobalStyles(options) {
+	const { uniqueId, speed = 2, size, colors, color } = options;
+	const getColorAnimationId = () => {
+		if (!colors || colors.length === 0) return "";
+		return `${uniqueId}-color-change`;
+	};
+	return `
+      @keyframes ${uniqueId}-rotate {
         100% {
           transform: rotate(360deg);
         }
       }
 
-      @keyframes ${t}-dash {
+      @keyframes ${uniqueId}-dash {
         0% {
           stroke-dasharray: 1, 200;
           stroke-dashoffset: 0;
@@ -20,27 +27,31 @@ function e(e){let{uniqueId:t,speed:n=2,size:r,colors:i,color:a}=e;return`
         }
       }
 
-      .${t}-loader {
+      .${uniqueId}-loader {
         position: relative;
         display: inline-block;
-        width: ${r}px;
-        height: ${r}px;
+        width: ${size}px;
+        height: ${size}px;
         overflow: hidden;
       }
 
-      .${t}-circular {
-        animation: ${t}-rotate ${n}s linear infinite;
+      .${uniqueId}-circular {
+        animation: ${uniqueId}-rotate ${speed}s linear infinite;
         height: 100%;
         width: 100%;
         max-height: 100%;
         max-width: 100%;
       }
 
-      .${t}-path {
-        stroke: ${i&&i.length>0?i[0]:a};
+      .${uniqueId}-path {
+        stroke: ${colors && colors.length > 0 ? colors[0] : color};
         stroke-dasharray: 1, 200;
         stroke-dashoffset: 0;
-        animation: ${i&&i.length>0?`${t}-dash 1.5s ease-in-out infinite, ${(()=>!i||i.length===0?``:`${t}-color-change`)()} ${n*i.length}s ease-in-out infinite`:`${t}-dash 1.5s ease-in-out infinite`};
+        animation: ${colors && colors.length > 0 ? `${uniqueId}-dash 1.5s ease-in-out infinite, ${getColorAnimationId()} ${speed * colors.length}s ease-in-out infinite` : `${uniqueId}-dash 1.5s ease-in-out infinite`};
         stroke-linecap: round;
       }
-    `}export{e as getGlobalStyles};
+    `;
+}
+
+//#endregion
+export { getGlobalStyles };