solid-tiny-ui 0.5.0 → 0.6.0

package/dist/components/pagination/pagination.js

@@ -0,0 +1,336 @@
+import { IconArrowLeft } from "../../icons/arrow-left.js";
+import { IconArrowRight } from "../../icons/arrow-right.js";
+import { IconEllipsis } from "../../icons/ellipsis.js";
+import "../../icons/index.js";
+import { createClassStyles } from "../../utils/index.js";
+import { PaginationCore } from "../../primitives/pagination/index.js";
+import "../../primitives/index.js";
+import pagination_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/pagination/pagination.js";
+import { addEventListener, className, createComponent, delegateEvents, effect, insert, setAttribute, style, template, use } from "solid-js/web";
+import { Show, createSignal, onMount } from "solid-js";
+import { combineClass, combineStyle, createWatch, dataIf, makeEventListener, mountStyle } from "solid-tiny-utils";
+import { Ref } from "@solid-primitives/refs";
+
+//#region src/components/pagination/pagination.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<input min=1 type=number>`), _tmpl$2 = /* @__PURE__ */ template(`<button type=button>`), _tmpl$3 = /* @__PURE__ */ template(`<span>/`), _tmpl$4 = /* @__PURE__ */ template(`<div><button type=button></button><div></div><button type=button>`);
+function GoToPageInput(props) {
+	let ref;
+	onMount(() => {
+		ref.focus();
+	});
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter") ref.blur();
+	};
+	return (() => {
+		var _el$ = _tmpl$();
+		var _ref$ = ref;
+		typeof _ref$ === "function" ? use(_ref$, _el$) : ref = _el$;
+		_el$.$$keydown = handleKeyDown;
+		addEventListener(_el$, "blur", props.onBlur);
+		effect((_p$) => {
+			var _v$ = combineClass("tiny-pagination-input", props.class), _v$2 = combineStyle({ "--width": `${props.width}px` }, props.style);
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_p$.t = style(_el$, _v$2, _p$.t);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		effect(() => _el$.value = props.value);
+		return _el$;
+	})();
+}
+function GoToPageEditable(props) {
+	const [editable, setEditable] = createSignal(false);
+	const [ref, setRef] = createSignal(null);
+	const [w, setW] = createSignal(0);
+	createWatch(ref, (el) => {
+		if (!el) return;
+		makeEventListener(el, "click", () => {
+			setW(el.offsetWidth);
+			setEditable(true);
+		});
+	});
+	return createComponent(Show, {
+		get fallback() {
+			return createComponent(Ref, {
+				ref: setRef,
+				get children() {
+					return props.children;
+				}
+			});
+		},
+		get when() {
+			return editable();
+		},
+		get children() {
+			return createComponent(GoToPageInput, {
+				get ["class"]() {
+					return props.inputClass;
+				},
+				onBlur: (e) => {
+					const tryTo = e.currentTarget.valueAsNumber;
+					if (tryTo > 0 && tryTo !== props.current) props.gotoPage(tryTo);
+					setEditable(false);
+				},
+				get style() {
+					return props.inputStyle;
+				},
+				get value() {
+					return props.current;
+				},
+				get width() {
+					return w();
+				}
+			});
+		}
+	});
+}
+function DensePages(props) {
+	return [
+		createComponent(GoToPageEditable, {
+			get current() {
+				return props.current;
+			},
+			get disabled() {
+				return props.disabled;
+			},
+			get gotoPage() {
+				return props.onPageClick;
+			},
+			get inputClass() {
+				return props.inputClass;
+			},
+			get inputStyle() {
+				return props.inputStyle;
+			},
+			get children() {
+				var _el$2 = _tmpl$2();
+				insert(_el$2, () => props.current);
+				effect((_p$) => {
+					var _v$3 = combineClass("tiny-pagination-item", props.itemClass), _v$4 = props.disabled, _v$5 = combineStyle({}, props.itemStyle);
+					_v$3 !== _p$.e && className(_el$2, _p$.e = _v$3);
+					_v$4 !== _p$.t && (_el$2.disabled = _p$.t = _v$4);
+					_p$.a = style(_el$2, _v$5, _p$.a);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				});
+				return _el$2;
+			}
+		}),
+		(() => {
+			var _el$3 = _tmpl$3();
+			effect((_p$) => {
+				var _v$6 = combineClass("tiny-pagination-separator", props.separatorClass), _v$7 = dataIf(props.disabled), _v$8 = combineStyle({}, props.separatorStyle);
+				_v$6 !== _p$.e && className(_el$3, _p$.e = _v$6);
+				_v$7 !== _p$.t && setAttribute(_el$3, "data-disabled", _p$.t = _v$7);
+				_p$.a = style(_el$3, _v$8, _p$.a);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0
+			});
+			return _el$3;
+		})(),
+		(() => {
+			var _el$4 = _tmpl$2();
+			_el$4.$$click = () => props.onPageClick(props.totalPages);
+			insert(_el$4, () => props.totalPages);
+			effect((_p$) => {
+				var _v$9 = combineClass("tiny-pagination-item", props.itemClass), _v$0 = props.disabled, _v$1 = combineStyle({}, props.itemStyle);
+				_v$9 !== _p$.e && className(_el$4, _p$.e = _v$9);
+				_v$0 !== _p$.t && (_el$4.disabled = _p$.t = _v$0);
+				_p$.a = style(_el$4, _v$1, _p$.a);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0
+			});
+			return _el$4;
+		})()
+	];
+}
+/**
+* A pagination component for navigating through pages of content.
+*
+* maxVisiblePages: Maximum number of page buttons to display (default: 7, minimum: 5).
+*/
+function Pagination(props) {
+	mountStyle(pagination_default, "tiny-pagination");
+	const size = () => props.size ?? "middle";
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		disabled: props.disabled ?? false,
+		size: size(),
+		dense: props.dense ?? false
+	}));
+	return createComponent(PaginationCore, {
+		get current() {
+			return props.current;
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get maxVisiblePages() {
+			return props.maxVisiblePages;
+		},
+		get onChange() {
+			return props.onChange;
+		},
+		get pageSize() {
+			return props.pageSize;
+		},
+		get total() {
+			return props.total;
+		},
+		children: (state, actions) => {
+			return (() => {
+				var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling;
+				addEventListener(_el$6, "click", actions.prev, true);
+				insert(_el$6, createComponent(IconArrowLeft, {}));
+				insert(_el$7, createComponent(Show, {
+					get fallback() {
+						return createComponent(DensePages, {
+							get current() {
+								return state.current;
+							},
+							get disabled() {
+								return state.disabled;
+							},
+							get inputClass() {
+								return classes().input;
+							},
+							get inputStyle() {
+								return styles().input;
+							},
+							get itemClass() {
+								return classes().item;
+							},
+							get itemStyle() {
+								return styles().item;
+							},
+							get onPageClick() {
+								return actions.gotoPage;
+							},
+							get separatorClass() {
+								return classes().separator;
+							},
+							get separatorStyle() {
+								return styles().separator;
+							},
+							get totalPages() {
+								return state.totalPages;
+							}
+						});
+					},
+					get when() {
+						return !props.dense;
+					},
+					get children() {
+						return createComponent(PaginationCore.Items, { render: (page) => {
+							return createComponent(Show, {
+								get fallback() {
+									return createComponent(GoToPageEditable, {
+										get current() {
+											return state.current;
+										},
+										get disabled() {
+											return state.disabled;
+										},
+										get gotoPage() {
+											return actions.gotoPage;
+										},
+										get inputClass() {
+											return classes().input;
+										},
+										get inputStyle() {
+											return styles().input;
+										},
+										get children() {
+											var _el$0 = _tmpl$2();
+											insert(_el$0, createComponent(IconEllipsis, {}));
+											effect((_p$) => {
+												var _v$26 = combineClass("tiny-pagination-item", classes().item), _v$27 = state.disabled, _v$28 = combineStyle({}, styles().item);
+												_v$26 !== _p$.e && className(_el$0, _p$.e = _v$26);
+												_v$27 !== _p$.t && (_el$0.disabled = _p$.t = _v$27);
+												_p$.a = style(_el$0, _v$28, _p$.a);
+												return _p$;
+											}, {
+												e: void 0,
+												t: void 0,
+												a: void 0
+											});
+											return _el$0;
+										}
+									});
+								},
+								get when() {
+									return page.type === "page";
+								},
+								get children() {
+									var _el$9 = _tmpl$2();
+									_el$9.$$click = () => actions.gotoPage(page.page);
+									insert(_el$9, () => page.page);
+									effect((_p$) => {
+										var _v$22 = combineClass("tiny-pagination-item", classes().item), _v$23 = dataIf(page.page === state.current), _v$24 = state.disabled, _v$25 = combineStyle({}, styles().item);
+										_v$22 !== _p$.e && className(_el$9, _p$.e = _v$22);
+										_v$23 !== _p$.t && setAttribute(_el$9, "data-active", _p$.t = _v$23);
+										_v$24 !== _p$.a && (_el$9.disabled = _p$.a = _v$24);
+										_p$.o = style(_el$9, _v$25, _p$.o);
+										return _p$;
+									}, {
+										e: void 0,
+										t: void 0,
+										a: void 0,
+										o: void 0
+									});
+									return _el$9;
+								}
+							});
+						} });
+					}
+				}));
+				addEventListener(_el$8, "click", actions.next, true);
+				insert(_el$8, createComponent(IconArrowRight, {}));
+				effect((_p$) => {
+					var _v$10 = combineClass("tiny-pagination", classes().root), _v$11 = dataIf(state.disabled), _v$12 = size(), _v$13 = combineStyle({}, styles().root), _v$14 = combineClass("tiny-pagination-prev", classes().prev), _v$15 = state.disabled || state.current <= 1, _v$16 = combineStyle({}, styles().prev), _v$17 = combineClass("tiny-pagination-items", classes().items), _v$18 = combineStyle({}, styles().items), _v$19 = combineClass("tiny-pagination-next", classes().next), _v$20 = state.disabled || state.current >= state.totalPages, _v$21 = combineStyle({}, styles().next);
+					_v$10 !== _p$.e && className(_el$5, _p$.e = _v$10);
+					_v$11 !== _p$.t && setAttribute(_el$5, "data-disabled", _p$.t = _v$11);
+					_v$12 !== _p$.a && setAttribute(_el$5, "data-size", _p$.a = _v$12);
+					_p$.o = style(_el$5, _v$13, _p$.o);
+					_v$14 !== _p$.i && className(_el$6, _p$.i = _v$14);
+					_v$15 !== _p$.n && (_el$6.disabled = _p$.n = _v$15);
+					_p$.s = style(_el$6, _v$16, _p$.s);
+					_v$17 !== _p$.h && className(_el$7, _p$.h = _v$17);
+					_p$.r = style(_el$7, _v$18, _p$.r);
+					_v$19 !== _p$.d && className(_el$8, _p$.d = _v$19);
+					_v$20 !== _p$.l && (_el$8.disabled = _p$.l = _v$20);
+					_p$.u = style(_el$8, _v$21, _p$.u);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0,
+					i: void 0,
+					n: void 0,
+					s: void 0,
+					h: void 0,
+					r: void 0,
+					d: void 0,
+					l: void 0,
+					u: void 0
+				});
+				return _el$5;
+			})();
+		}
+	});
+}
+delegateEvents(["keydown", "click"]);
+
+//#endregion
+export { Pagination };

package/dist/components/pagination/pagination.jsx

@@ -0,0 +1,104 @@
+import { IconArrowLeft } from "../../icons/arrow-left.jsx";
+import { IconArrowRight } from "../../icons/arrow-right.jsx";
+import { IconEllipsis } from "../../icons/ellipsis.jsx";
+import "../../icons/index.jsx";
+import { createClassStyles } from "../../utils/index.jsx";
+import { PaginationCore } from "../../primitives/pagination/index.jsx";
+import "../../primitives/index.jsx";
+import pagination_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/pagination/pagination.jsx";
+import { Show, createSignal, onMount } from "solid-js";
+import { combineClass, combineStyle, createWatch, dataIf, makeEventListener, mountStyle } from "solid-tiny-utils";
+import { Ref } from "@solid-primitives/refs";
+
+//#region src/components/pagination/pagination.tsx
+function GoToPageInput(props) {
+	let ref;
+	onMount(() => {
+		ref.focus();
+	});
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter") ref.blur();
+	};
+	return <input class={combineClass("tiny-pagination-input", props.class)} min="1" onBlur={props.onBlur} onKeyDown={handleKeyDown} ref={ref} style={combineStyle({ "--width": `${props.width}px` }, props.style)} type="number" value={props.value} />;
+}
+function GoToPageEditable(props) {
+	const [editable, setEditable] = createSignal(false);
+	const [ref, setRef] = createSignal(null);
+	const [w, setW] = createSignal(0);
+	createWatch(ref, (el) => {
+		if (!el) return;
+		makeEventListener(el, "click", () => {
+			setW(el.offsetWidth);
+			setEditable(true);
+		});
+	});
+	return <Show fallback={<Ref ref={setRef}>{props.children}</Ref>} when={editable()}>
+      <GoToPageInput class={props.inputClass} onBlur={(e) => {
+		const tryTo = e.currentTarget.valueAsNumber;
+		if (tryTo > 0 && tryTo !== props.current) props.gotoPage(tryTo);
+		setEditable(false);
+	}} style={props.inputStyle} value={props.current} width={w()} />
+    </Show>;
+}
+function DensePages(props) {
+	return <>
+      <GoToPageEditable current={props.current} disabled={props.disabled} gotoPage={props.onPageClick} inputClass={props.inputClass} inputStyle={props.inputStyle}>
+        <button class={combineClass("tiny-pagination-item", props.itemClass)} disabled={props.disabled} style={combineStyle({}, props.itemStyle)} type="button">
+          {props.current}
+        </button>
+      </GoToPageEditable>
+
+      <span class={combineClass("tiny-pagination-separator", props.separatorClass)} data-disabled={dataIf(props.disabled)} style={combineStyle({}, props.separatorStyle)}>
+        /
+      </span>
+
+      <button class={combineClass("tiny-pagination-item", props.itemClass)} disabled={props.disabled} onClick={() => props.onPageClick(props.totalPages)} style={combineStyle({}, props.itemStyle)} type="button">
+        {props.totalPages}
+      </button>
+    </>;
+}
+/**
+* A pagination component for navigating through pages of content.
+*
+* maxVisiblePages: Maximum number of page buttons to display (default: 7, minimum: 5).
+*/
+function Pagination(props) {
+	mountStyle(pagination_default, "tiny-pagination");
+	const size = () => props.size ?? "middle";
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({
+		disabled: props.disabled ?? false,
+		size: size(),
+		dense: props.dense ?? false
+	}));
+	return <PaginationCore current={props.current} disabled={props.disabled} maxVisiblePages={props.maxVisiblePages} onChange={props.onChange} pageSize={props.pageSize} total={props.total}>
+      {(state, actions) => {
+		return <div class={combineClass("tiny-pagination", classes().root)} data-disabled={dataIf(state.disabled)} data-size={size()} style={combineStyle({}, styles().root)}>
+            <button class={combineClass("tiny-pagination-prev", classes().prev)} disabled={state.disabled || state.current <= 1} onClick={actions.prev} style={combineStyle({}, styles().prev)} type="button">
+              <IconArrowLeft />
+            </button>
+            <div class={combineClass("tiny-pagination-items", classes().items)} style={combineStyle({}, styles().items)}>
+              <Show fallback={<DensePages current={state.current} disabled={state.disabled} inputClass={classes().input} inputStyle={styles().input} itemClass={classes().item} itemStyle={styles().item} onPageClick={actions.gotoPage} separatorClass={classes().separator} separatorStyle={styles().separator} totalPages={state.totalPages} />} when={!props.dense}>
+                <PaginationCore.Items render={(page) => {
+			return <Show fallback={<GoToPageEditable current={state.current} disabled={state.disabled} gotoPage={actions.gotoPage} inputClass={classes().input} inputStyle={styles().input}>
+                            <button class={combineClass("tiny-pagination-item", classes().item)} disabled={state.disabled} style={combineStyle({}, styles().item)} type="button">
+                              <IconEllipsis />
+                            </button>
+                          </GoToPageEditable>} when={page.type === "page"}>
+                        <button class={combineClass("tiny-pagination-item", classes().item)} data-active={dataIf(page.page === state.current)} disabled={state.disabled} onClick={() => actions.gotoPage(page.page)} style={combineStyle({}, styles().item)} type="button">
+                          {page.page}
+                        </button>
+                      </Show>;
+		}} />
+              </Show>
+            </div>
+
+            <button class={combineClass("tiny-pagination-next", classes().next)} disabled={state.disabled || state.current >= state.totalPages} onClick={actions.next} style={combineStyle({}, styles().next)} type="button">
+              <IconArrowRight />
+            </button>
+          </div>;
+	}}
+    </PaginationCore>;
+}
+
+//#endregion
+export { Pagination };

package/dist/components/progress/circle-progress.d.ts

@@ -1,3 +1,4 @@
+import { ClassNames, Styles } from "../../utils/types.js";
 import { JSX } from "solid-js/jsx-runtime";
 
 //#region src/components/progress/circle-progress.d.ts
@@ -12,6 +13,12 @@ declare function CircleProgress(props: {
   children?: JSX.Element;
   railColor?: string;
   fillColor?: string;
+  classNames?: ClassNames<"root" | "wrapper" | "content", {
+    percent: number;
+  }>;
+  styles?: Styles<"root" | "wrapper" | "content", {
+    percent: number;
+  }>;
 }): JSX.Element;
 //#endregion
 export { CircleProgress };

package/dist/components/progress/circle-progress.js

@@ -1,10 +1,10 @@
-import { getGlobalToken } from "../../utils/index.js";
-import { createComponent, effect, insert, setAttribute, setStyleProperty, style, template } from "solid-js/web";
+import { createClassStyles, getGlobalToken } from "../../utils/index.js";
+import { className, createComponent, effect, insert, setAttribute, setStyleProperty, style, template } from "solid-js/web";
 import { createMemo, mergeProps as mergeProps$1 } from "solid-js";
-import { max } from "solid-tiny-utils";
+import { combineStyle, max } from "solid-tiny-utils";
 
 //#region src/components/progress/circle-progress.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div><svg aria-label=progress role=img>`), _tmpl$2 = /* @__PURE__ */ template(`<svg><g><path fill=none stroke-linecap=round></svg>`, false, true, false), _tmpl$3 = /* @__PURE__ */ template(`<div style=position:relative><div style=position:absolute;inset:0;display:flex;align-items:center;justify-content:center>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div><svg aria-label=progress role=img>`), _tmpl$2 = /* @__PURE__ */ template(`<svg><g><path fill=none stroke-linecap=round></svg>`, false, true, false), _tmpl$3 = /* @__PURE__ */ template(`<div><div></div><div>`);
 function getPathString(r, viewBoxSize) {
 	const vw = viewBoxSize;
 	return `m ${vw / 2} ${vw / 2 - r} a ${r} ${r} 0 1 1 0 ${2 * r} a ${r} ${r} 0 1 1 0 -${2 * r}`;
@@ -93,17 +93,18 @@ function CircleProgress(props) {
 		gapDegree: 0,
 		offsetDegree: 0,
 		size: "100px",
-		railColor: getGlobalToken("c-neutral-3"),
-		fillColor: getGlobalToken("c-brand-5")
+		railColor: `rgb(${getGlobalToken("rgb-neutral-3")})`,
+		fillColor: `rgb(${getGlobalToken("rgb-brand-5")})`
 	}, props);
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({ percent: real.percent }));
 	const viewBoxSize = 100;
 	const viewBoxPadding = 5;
 	const radius = createMemo(() => {
 		return (viewBoxSize - max(real.fillWidth, real.railWidth) - viewBoxPadding * 2) / 2;
 	});
 	return (() => {
-		var _el$7 = _tmpl$3(), _el$8 = _el$7.firstChild;
-		insert(_el$7, createComponent(Wrapper, {
+		var _el$7 = _tmpl$3(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
+		insert(_el$8, createComponent(Wrapper, {
 			get gapOffsetDegree() {
 				return real.offsetDegree;
 			},
@@ -145,16 +146,34 @@ function CircleProgress(props) {
 					viewBoxSize
 				})];
 			}
-		}), _el$8);
-		insert(_el$8, () => props.children);
+		}));
+		insert(_el$9, () => props.children);
 		effect((_p$) => {
-			var _v$9 = real.size, _v$0 = real.size;
-			_v$9 !== _p$.e && setStyleProperty(_el$7, "width", _p$.e = _v$9);
-			_v$0 !== _p$.t && setStyleProperty(_el$7, "height", _p$.t = _v$0);
+			var _v$9 = classes().root, _v$0 = combineStyle({
+				width: real.size,
+				height: real.size,
+				position: "relative"
+			}, styles().root), _v$1 = classes().wrapper, _v$10 = combineStyle({}, styles().wrapper), _v$11 = classes().content, _v$12 = combineStyle({
+				position: "absolute",
+				inset: 0,
+				display: "flex",
+				"align-items": "center",
+				"justify-content": "center"
+			}, styles().content);
+			_v$9 !== _p$.e && className(_el$7, _p$.e = _v$9);
+			_p$.t = style(_el$7, _v$0, _p$.t);
+			_v$1 !== _p$.a && className(_el$8, _p$.a = _v$1);
+			_p$.o = style(_el$8, _v$10, _p$.o);
+			_v$11 !== _p$.i && className(_el$9, _p$.i = _v$11);
+			_p$.n = style(_el$9, _v$12, _p$.n);
 			return _p$;
 		}, {
 			e: void 0,
-			t: void 0
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0
 		});
 		return _el$7;
 	})();

package/dist/components/progress/circle-progress.jsx

@@ -1,6 +1,6 @@
-import { getGlobalToken } from "../../utils/index.jsx";
+import { createClassStyles, getGlobalToken } from "../../utils/index.jsx";
 import { createMemo, mergeProps } from "solid-js";
-import { max } from "solid-tiny-utils";
+import { combineStyle, max } from "solid-tiny-utils";
 
 //#region src/components/progress/circle-progress.tsx
 function getPathString(r, viewBoxSize) {
@@ -58,30 +58,33 @@ function CircleProgress(props) {
 		gapDegree: 0,
 		offsetDegree: 0,
 		size: "100px",
-		railColor: getGlobalToken("c-neutral-3"),
-		fillColor: getGlobalToken("c-brand-5")
+		railColor: `rgb(${getGlobalToken("rgb-neutral-3")})`,
+		fillColor: `rgb(${getGlobalToken("rgb-brand-5")})`
 	}, props);
+	const [classes, styles] = createClassStyles(() => props.classNames, () => props.styles, () => ({ percent: real.percent }));
 	const viewBoxSize = 100;
 	const viewBoxPadding = 5;
 	const radius = createMemo(() => {
 		return (viewBoxSize - max(real.fillWidth, real.railWidth) - viewBoxPadding * 2) / 2;
 	});
-	return <div style={{
+	return <div class={classes().root} style={combineStyle({
 		width: real.size,
 		height: real.size,
 		position: "relative"
-	}}>
-      <Wrapper gapOffsetDegree={real.offsetDegree} viewBoxSize={viewBoxSize}>
-        <Rail color={real.railColor} gapDegree={real.gapDegree} radius={radius()} railWidth={real.railWidth} viewBoxSize={viewBoxSize} />
-        <Fill color={real.fillColor} fillWidth={real.fillWidth} gapDegree={real.gapDegree} offsetDegree={real.offsetDegree} percent={real.percent} radius={radius()} viewBoxSize={viewBoxSize} />
-      </Wrapper>
-      <div style={{
+	}, styles().root)}>
+      <div class={classes().wrapper} style={combineStyle({}, styles().wrapper)}>
+        <Wrapper gapOffsetDegree={real.offsetDegree} viewBoxSize={viewBoxSize}>
+          <Rail color={real.railColor} gapDegree={real.gapDegree} radius={radius()} railWidth={real.railWidth} viewBoxSize={viewBoxSize} />
+          <Fill color={real.fillColor} fillWidth={real.fillWidth} gapDegree={real.gapDegree} offsetDegree={real.offsetDegree} percent={real.percent} radius={radius()} viewBoxSize={viewBoxSize} />
+        </Wrapper>
+      </div>
+      <div class={classes().content} style={combineStyle({
 		position: "absolute",
 		inset: 0,
 		display: "flex",
 		"align-items": "center",
 		"justify-content": "center"
-	}}>
+	}, styles().content)}>
         {props.children}
       </div>
     </div>;

package/dist/components/progress/line-progress.d.ts

@@ -1,5 +1,5 @@
 import { ClassNames, Styles } from "../../utils/types.js";
-import * as solid_js18 from "solid-js";
+import * as solid_js45 from "solid-js";
 
 //#region src/components/progress/line-progress.d.ts
 interface LineProgressState {
@@ -17,6 +17,6 @@ declare function LineProgress(props: {
   width?: string;
   classNames?: ClassNames<"root" | "rail" | "fill", LineProgressState>;
   styles?: Styles<"root" | "rail" | "fill", LineProgressState>;
-}): solid_js18.JSX.Element;
+}): solid_js45.JSX.Element;
 //#endregion
 export { LineProgress, LineProgressState };

package/dist/components/progress/line-progress.js

@@ -2,7 +2,7 @@ import { createClassStyles, getGlobalToken } from "../../utils/index.js";
 import progress_default from "../../_virtual/__viteSafe__/home/runner/work/solid-tiny-ui/solid-tiny-ui/packages/core/src/components/progress/progress.js";
 import { className, effect, setAttribute, style, template } from "solid-js/web";
 import { createMemo } from "solid-js";
-import { combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
+import { clamp, combineClass, combineStyle, dataIf, mountStyle } from "solid-tiny-utils";
 
 //#region src/components/progress/line-progress.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div role=progressbar><div><div>`);
@@ -10,10 +10,10 @@ function LineProgress(props) {
 	mountStyle(progress_default, "tiny-progress");
 	const normalizedPercent = createMemo(() => {
 		if (props.percent === void 0) return 45;
-		return Math.min(100, Math.max(0, props.percent));
+		return clamp(props.percent, 0, 100);
 	});
 	const background = createMemo(() => {
-		const color = props.fillColor || getGlobalToken("c-brand-5");
+		const color = props.fillColor || `rgb(${getGlobalToken("rgb-brand-5")})`;
 		if (props.indeterminate) return `linear-gradient(90deg, transparent, ${color} 30%, ${color} 65%, transparent)`;
 		return color;
 	});
@@ -32,11 +32,12 @@ function LineProgress(props) {
 				overflow: "hidden",
 				display: "flex",
 				"align-items": "center",
-				"border-radius": "3px"
+				"border-radius": "3px",
+				width: props.width || "100%"
 			}, styles().root), _v$4 = combineClass("tiny-progress-line-rail", classes().rail), _v$5 = combineStyle({
 				height: "1px",
 				width: props.width || "100%",
-				background: props.railColor || getGlobalToken("c-neutral-3"),
+				background: props.railColor || `rgb(${getGlobalToken("rgb-neutral-3")})`,
 				overflow: "visible"
 			}, styles().rail), _v$6 = combineClass("tiny-progress-line-fill", classes().fill), _v$7 = dataIf(props.indeterminate ?? false), _v$8 = combineStyle({
 				width: `${normalizedPercent()}%`,