@pixpilot/shadcn-ui 0.4.0 → 0.4.2

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

@@ -1 +1,84 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`);let t=require(`lucide-react`);t=e.__toESM(t);let n=require(`react/jsx-runtime`);n=e.__toESM(n);const r={bold:{icon:(0,n.jsx)(t.Bold,{className:`h-4 w-4`}),tooltip:`Bold`,onClick:e=>e.chain().focus().toggleBold().run(),isActive:e=>e.isActive(`bold`)},italic:{icon:(0,n.jsx)(t.Italic,{className:`h-4 w-4`}),tooltip:`Italic`,onClick:e=>e.chain().focus().toggleItalic().run(),isActive:e=>e.isActive(`italic`)},underline:{icon:(0,n.jsx)(t.Underline,{className:`h-4 w-4`}),tooltip:`Underline`,onClick:e=>e.chain().focus().toggleUnderline().run(),isActive:e=>e.isActive(`underline`)},strike:{icon:(0,n.jsx)(t.Strikethrough,{className:`h-4 w-4`}),tooltip:`Strikethrough`,onClick:e=>e.chain().focus().toggleStrike().run(),isActive:e=>e.isActive(`strike`)},code:{icon:(0,n.jsx)(t.Code,{className:`h-4 w-4`}),tooltip:`Inline Code`,onClick:e=>e.chain().focus().toggleCode().run(),isActive:e=>e.isActive(`code`)},heading1:{icon:(0,n.jsx)(t.Heading1,{className:`h-4 w-4`}),tooltip:`Heading 1`,onClick:e=>e.chain().focus().toggleHeading({level:1}).run(),isActive:e=>e.isActive(`heading`,{level:1})},heading2:{icon:(0,n.jsx)(t.Heading2,{className:`h-4 w-4`}),tooltip:`Heading 2`,onClick:e=>e.chain().focus().toggleHeading({level:2}).run(),isActive:e=>e.isActive(`heading`,{level:2})},heading3:{icon:(0,n.jsx)(t.Heading3,{className:`h-4 w-4`}),tooltip:`Heading 3`,onClick:e=>e.chain().focus().toggleHeading({level:3}).run(),isActive:e=>e.isActive(`heading`,{level:3})},bulletList:{icon:(0,n.jsx)(t.List,{className:`h-4 w-4`}),tooltip:`Bullet List`,onClick:e=>e.chain().focus().toggleBulletList().run(),isActive:e=>e.isActive(`bulletList`)},orderedList:{icon:(0,n.jsx)(t.ListOrdered,{className:`h-4 w-4`}),tooltip:`Ordered List`,onClick:e=>e.chain().focus().toggleOrderedList().run(),isActive:e=>e.isActive(`orderedList`)},blockquote:{icon:(0,n.jsx)(t.Quote,{className:`h-4 w-4`}),tooltip:`Blockquote`,onClick:e=>e.chain().focus().toggleBlockquote().run(),isActive:e=>e.isActive(`blockquote`)},codeBlock:{icon:(0,n.jsx)(t.Code2,{className:`h-4 w-4`}),tooltip:`Code Block`,onClick:e=>e.chain().focus().toggleCodeBlock().run(),isActive:e=>e.isActive(`codeBlock`)}};exports.predefinedToolbarOptions=r;
+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

@@ -1 +1,81 @@
-import{Bold as e,Code as t,Code2 as n,Heading1 as r,Heading2 as i,Heading3 as a,Italic as o,List as s,ListOrdered as c,Quote as l,Strikethrough as u,Underline as d}from"lucide-react";import{jsx as f}from"react/jsx-runtime";const p={bold:{icon:f(e,{className:`h-4 w-4`}),tooltip:`Bold`,onClick:e=>e.chain().focus().toggleBold().run(),isActive:e=>e.isActive(`bold`)},italic:{icon:f(o,{className:`h-4 w-4`}),tooltip:`Italic`,onClick:e=>e.chain().focus().toggleItalic().run(),isActive:e=>e.isActive(`italic`)},underline:{icon:f(d,{className:`h-4 w-4`}),tooltip:`Underline`,onClick:e=>e.chain().focus().toggleUnderline().run(),isActive:e=>e.isActive(`underline`)},strike:{icon:f(u,{className:`h-4 w-4`}),tooltip:`Strikethrough`,onClick:e=>e.chain().focus().toggleStrike().run(),isActive:e=>e.isActive(`strike`)},code:{icon:f(t,{className:`h-4 w-4`}),tooltip:`Inline Code`,onClick:e=>e.chain().focus().toggleCode().run(),isActive:e=>e.isActive(`code`)},heading1:{icon:f(r,{className:`h-4 w-4`}),tooltip:`Heading 1`,onClick:e=>e.chain().focus().toggleHeading({level:1}).run(),isActive:e=>e.isActive(`heading`,{level:1})},heading2:{icon:f(i,{className:`h-4 w-4`}),tooltip:`Heading 2`,onClick:e=>e.chain().focus().toggleHeading({level:2}).run(),isActive:e=>e.isActive(`heading`,{level:2})},heading3:{icon:f(a,{className:`h-4 w-4`}),tooltip:`Heading 3`,onClick:e=>e.chain().focus().toggleHeading({level:3}).run(),isActive:e=>e.isActive(`heading`,{level:3})},bulletList:{icon:f(s,{className:`h-4 w-4`}),tooltip:`Bullet List`,onClick:e=>e.chain().focus().toggleBulletList().run(),isActive:e=>e.isActive(`bulletList`)},orderedList:{icon:f(c,{className:`h-4 w-4`}),tooltip:`Ordered List`,onClick:e=>e.chain().focus().toggleOrderedList().run(),isActive:e=>e.isActive(`orderedList`)},blockquote:{icon:f(l,{className:`h-4 w-4`}),tooltip:`Blockquote`,onClick:e=>e.chain().focus().toggleBlockquote().run(),isActive:e=>e.isActive(`blockquote`)},codeBlock:{icon:f(n,{className:`h-4 w-4`}),tooltip:`Code Block`,onClick:e=>e.chain().focus().toggleCodeBlock().run(),isActive:e=>e.isActive(`codeBlock`)}};export{p as predefinedToolbarOptions};
+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 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./spinner.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,19 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`);function t(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 +28,31 @@ const e=require(`../_virtual/rolldown_runtime.cjs`);function t(e){let{uniqueId:t
         }
       }
 
-      .${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=t;
+    `;
+}
+
+//#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 };