@g4rcez/components 4.1.3 → 5.0.0

package/dist/skeleton-CBYEq3lM.js

@@ -0,0 +1,26 @@
+import { t as e } from "./dom-Bn4wY_Zx.js";
+import { t } from "./polymorph-BLXhrn9n.js";
+import { t as n } from "./use-translations-DTLfPE3_.js";
+import "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/display/skeleton.tsx
+var i = /* @__PURE__ */ r("div", {
+	role: "status",
+	"aria-busy": "true",
+	"aria-label": "Loading content",
+	className: "h-skeleton-cell-h w-10/12 animate-pulse rounded-skeleton-radius bg-muted"
+}), a = (i) => {
+	let a = n();
+	return /* @__PURE__ */ r(t, {
+		...i,
+		role: "status",
+		"aria-busy": "true",
+		"aria-label": a.skeletonLoading,
+		as: i.as || "span",
+		className: e("block h-skeleton-height w-skeleton-width animate-pulse rounded-skeleton-radius bg-muted", i.className)
+	});
+};
+//#endregion
+export { i as n, a as t };
+
+//# sourceMappingURL=skeleton-CBYEq3lM.js.map

package/dist/skeleton-CBYEq3lM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-CBYEq3lM.js","names":[],"sources":["../src/components/display/skeleton.tsx"],"sourcesContent":["import React, { CSSProperties, useRef, type ElementType } from \"react\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport { css } from \"../../lib/dom\";\nimport { Polymorph } from \"../core/polymorph\";\n\nexport const SkeletonCell = (\n    <div\n        role=\"status\"\n        aria-busy=\"true\"\n        aria-label=\"Loading content\"\n        className=\"h-skeleton-cell-h w-10/12 animate-pulse rounded-skeleton-radius bg-muted\"\n    />\n);\n\nexport const Skeleton = (props: { className?: string; as?: ElementType; style?: CSSProperties }) => {\n    const t = useTranslations();\n    return (\n        <Polymorph\n            {...props}\n            role=\"status\"\n            aria-busy=\"true\"\n            aria-label={t.skeletonLoading}\n            as={props.as || \"span\"}\n            className={css(\"block h-skeleton-height w-skeleton-width animate-pulse rounded-skeleton-radius bg-muted\", props.className)}\n        />\n    );\n};\n\nexport const SkeletonList = (props: { className?: string; rows: number }) => {\n    const t = useTranslations();\n    const items = useRef(\n        Array.from({ length: props.rows }).map((_, i) => {\n            const rand = Math.max(100, Math.random() * 99);\n            return <Skeleton key={`skeleton-${rand}-${i}`} style={{ width: `${rand}%` }} as=\"li\" />;\n        })\n    );\n    return (\n        <ul role=\"status\" aria-busy=\"true\" aria-label={t.skeletonLoading} className={css(\"flex flex-col gap-skeleton-list-gap\", props.className)}>\n            {items.current}\n        </ul>\n    );\n};\n"],"mappings":";;;;;;AAKA,IAAa,IACT,kBAAC,OAAD;CACI,MAAK;CACL,aAAU;CACV,cAAW;CACX,WAAU;AACb,CAAA,GAGQ,KAAY,MAA2E;CAChG,IAAM,IAAI,EAAgB;CAC1B,OACI,kBAAC,GAAD;EACI,GAAI;EACJ,MAAK;EACL,aAAU;EACV,cAAY,EAAE;EACd,IAAI,EAAM,MAAM;EAChB,WAAW,EAAI,2FAA2F,EAAM,SAAS;CAC5H,CAAA;AAET"}

package/dist/slot-pC8kH9De.js

@@ -0,0 +1,96 @@
+import * as e from "react";
+import { Fragment as t, jsx as n } from "react/jsx-runtime";
+//#region src/components/core/slot.tsx
+var r = Symbol.for("react.lazy");
+function i(e, t) {
+	if (typeof e == "function") return e(t);
+	e != null && (e.current = t);
+}
+function a(...e) {
+	return (t) => {
+		let n = !1, r = e.map((e) => {
+			let r = i(e, t);
+			return !n && typeof r == "function" && (n = !0), r;
+		});
+		if (n) return () => {
+			for (let t = 0; t < r.length; t++) {
+				let n = r[t];
+				typeof n == "function" ? n() : i(e[t], null);
+			}
+		};
+	};
+}
+var o = e.use;
+function s(e) {
+	return typeof e == "object" && !!e && "then" in e;
+}
+function c(e) {
+	return typeof e == "object" && !!e && "$$typeof" in e && e.$$typeof === r && "_payload" in e && s(e._payload);
+}
+function l(t) {
+	let r = d(t), i = e.forwardRef((t, i) => {
+		let { children: a, ...s } = t;
+		c(a) && typeof o == "function" && (a = o(a._payload));
+		let l = e.Children.toArray(a), u = l.find(m);
+		if (u) {
+			let t = u.props.children, a = l.map((n) => n === u ? e.Children.count(t) > 1 ? e.Children.only(null) : e.isValidElement(t) ? t.props.children : null : n);
+			return /* @__PURE__ */ n(r, {
+				...s,
+				ref: i,
+				children: e.isValidElement(t) ? e.cloneElement(t, void 0, a) : null
+			});
+		}
+		return /* @__PURE__ */ n(r, {
+			...s,
+			ref: i,
+			children: a
+		});
+	});
+	return i.displayName = `${t}.Slot`, i;
+}
+var u = l("Slot");
+function d(t) {
+	let n = e.forwardRef((t, n) => {
+		let { children: r, ...i } = t;
+		if (c(r) && typeof o == "function" && (r = o(r._payload)), e.isValidElement(r)) {
+			let t = g(r), o = h(i, r.props);
+			return r.type !== e.Fragment && (o.ref = n ? a(n, t) : t), e.cloneElement(r, o);
+		}
+		return e.Children.count(r) > 1 ? e.Children.only(null) : null;
+	});
+	return n.displayName = `${t}.SlotClone`, n;
+}
+var f = Symbol("radix.slottable");
+function p(e) {
+	let r = ({ children: e }) => /* @__PURE__ */ n(t, { children: e });
+	return r.displayName = `${e}.Slottable`, r.__radixId = f, r;
+}
+p("Slottable");
+function m(t) {
+	return e.isValidElement(t) && typeof t.type == "function" && "__radixId" in t.type && t.type.__radixId === f;
+}
+function h(e, t) {
+	let n = { ...t };
+	for (let r in t) {
+		let i = e[r], a = t[r];
+		/^on[A-Z]/.test(r) ? i && a ? n[r] = (...e) => {
+			let t = a(...e);
+			return i(...e), t;
+		} : i && (n[r] = i) : r === "style" ? n[r] = {
+			...i,
+			...a
+		} : r === "className" && (n[r] = [i, a].filter(Boolean).join(" "));
+	}
+	return {
+		...e,
+		...n
+	};
+}
+function g(e) {
+	let t = Object.getOwnPropertyDescriptor(e.props, "ref")?.get, n = t && "isReactWarning" in t && t.isReactWarning;
+	return n ? e.ref : (t = Object.getOwnPropertyDescriptor(e, "ref")?.get, n = t && "isReactWarning" in t && t.isReactWarning, n ? e.props.ref : e.props.ref || e.ref);
+}
+//#endregion
+export { u as t };
+
+//# sourceMappingURL=slot-pC8kH9De.js.map

package/dist/slot-pC8kH9De.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-pC8kH9De.js","names":[],"sources":["../src/components/core/slot.tsx"],"sourcesContent":["import * as React from \"react\";\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\nconst REACT_LAZY_TYPE = Symbol.for(\"react.lazy\");\n\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n    if (typeof ref === \"function\") {\n        return ref(value);\n    } else if (ref !== null && ref !== undefined) {\n        ref.current = value;\n    }\n}\n\nfunction composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n    return (node) => {\n        let hasCleanup = false;\n        const cleanups = refs.map((ref) => {\n            const cleanup = setRef(ref, node);\n            if (!hasCleanup && typeof cleanup == \"function\") {\n                hasCleanup = true;\n            }\n            return cleanup;\n        });\n        if (hasCleanup) {\n            return () => {\n                for (let i = 0; i < cleanups.length; i++) {\n                    const cleanup = cleanups[i];\n                    if (typeof cleanup == \"function\") {\n                        cleanup();\n                    } else {\n                        setRef(refs[i], null);\n                    }\n                }\n            };\n        }\n    };\n}\n\ninterface LazyReactElement extends React.ReactElement {\n    $$typeof: typeof REACT_LAZY_TYPE;\n    _payload: PromiseLike<Exclude<React.ReactNode, PromiseLike<unknown>>>;\n}\n\nexport type Usable<T> = PromiseLike<T> | React.Context<T>;\n\nconst use: typeof React.use | undefined = (React as unknown as Record<string, unknown>)[\" use \".trim().toString()] as typeof React.use | undefined;\n\ninterface SlotProps extends React.HTMLAttributes<HTMLElement> {\n    children?: React.ReactNode;\n}\n\nfunction isPromiseLike(value: unknown): value is PromiseLike<unknown> {\n    return typeof value === \"object\" && value !== null && \"then\" in value;\n}\n\nfunction isLazyComponent(element: React.ReactNode): element is LazyReactElement {\n    return (\n        element != null &&\n        typeof element === \"object\" &&\n        \"$$typeof\" in element &&\n        element.$$typeof === REACT_LAZY_TYPE &&\n        \"_payload\" in element &&\n        isPromiseLike(element._payload)\n    );\n}\n\nexport function createSlot(ownerName: string) {\n    const SlotClone = createSlotClone(ownerName);\n    const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n        let { children, ...slotProps } = props;\n        if (isLazyComponent(children) && typeof use === \"function\") {\n            children = use(children._payload);\n        }\n        const childrenArray = React.Children.toArray(children);\n        const slottable = childrenArray.find(isSlottable);\n\n        if (slottable) {\n            // the new element to render is the one passed as a child of `Slottable`\n            const newElement = slottable.props.children;\n\n            const newChildren = childrenArray.map((child) => {\n                if (child === slottable) {\n                    // because the new element will be the one rendered, we are only interested\n                    // in grabbing its children (`newElement.props.children`)\n                    if (React.Children.count(newElement) > 1) return React.Children.only(null);\n                    return React.isValidElement(newElement) ? (newElement.props as { children: React.ReactNode }).children : null;\n                } else {\n                    return child;\n                }\n            });\n\n            return (\n                <SlotClone {...slotProps} ref={forwardedRef}>\n                    {React.isValidElement(newElement) ? React.cloneElement(newElement, undefined, newChildren) : null}\n                </SlotClone>\n            );\n        }\n\n        return (\n            <SlotClone {...slotProps} ref={forwardedRef}>\n                {children}\n            </SlotClone>\n        );\n    });\n\n    Slot.displayName = `${ownerName}.Slot`;\n    return Slot;\n}\n\nexport const Slot = createSlot(\"Slot\");\n\ninterface SlotCloneProps {\n    children: React.ReactNode;\n}\n\nfunction createSlotClone(ownerName: string) {\n    const SlotClone = React.forwardRef<HTMLElement, SlotCloneProps>((props, forwardedRef) => {\n        let { children, ...slotProps } = props;\n        if (isLazyComponent(children) && typeof use === \"function\") {\n            children = use(children._payload);\n        }\n\n        if (React.isValidElement(children)) {\n            const childrenRef = getElementRef(children);\n            const props = mergeProps(slotProps, children.props as AnyProps);\n            // do not pass ref to React.Fragment for React 19 compatibility\n            if (children.type !== React.Fragment) {\n                props.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;\n            }\n            return React.cloneElement(children, props);\n        }\n\n        return React.Children.count(children) > 1 ? React.Children.only(null) : null;\n    });\n\n    SlotClone.displayName = `${ownerName}.SlotClone`;\n    return SlotClone;\n}\n\nconst SLOTTABLE_IDENTIFIER = Symbol(\"radix.slottable\");\n\ninterface SlottableProps {\n    children: React.ReactNode;\n}\n\ninterface SlottableComponent extends React.FC<SlottableProps> {\n    __radixId: symbol;\n}\n\nexport function createSlottable(ownerName: string) {\n    const Slottable: SlottableComponent = ({ children }) => {\n        return <>{children}</>;\n    };\n    Slottable.displayName = `${ownerName}.Slottable`;\n    Slottable.__radixId = SLOTTABLE_IDENTIFIER;\n    return Slottable;\n}\n\nconst Slottable = createSlottable(\"Slottable\");\n\ntype AnyProps = Record<string, any>;\n\nfunction isSlottable(child: React.ReactNode): child is React.ReactElement<SlottableProps, typeof Slottable> {\n    return (\n        React.isValidElement(child) && typeof child.type === \"function\" && \"__radixId\" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER\n    );\n}\n\nfunction mergeProps(slotProps: AnyProps, childProps: AnyProps) {\n    const overrideProps = { ...childProps };\n    for (const propName in childProps) {\n        const slotPropValue = slotProps[propName];\n        const childPropValue = childProps[propName];\n\n        const isHandler = /^on[A-Z]/.test(propName);\n        if (isHandler) {\n            if (slotPropValue && childPropValue) {\n                overrideProps[propName] = (...args: unknown[]) => {\n                    const result = childPropValue(...args);\n                    slotPropValue(...args);\n                    return result;\n                };\n            } else if (slotPropValue) {\n                overrideProps[propName] = slotPropValue;\n            }\n        } else if (propName === \"style\") {\n            overrideProps[propName] = { ...slotPropValue, ...childPropValue };\n        } else if (propName === \"className\") {\n            overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(\" \");\n        }\n    }\n\n    return { ...slotProps, ...overrideProps };\n}\n\nfunction getElementRef(element: React.ReactElement) {\n    let getter = Object.getOwnPropertyDescriptor(element.props, \"ref\")?.get;\n    let mayWarn = getter && \"isReactWarning\" in getter && getter.isReactWarning;\n    if (mayWarn) {\n        return (element as unknown as { ref?: React.Ref<unknown> }).ref;\n    }\n    getter = Object.getOwnPropertyDescriptor(element, \"ref\")?.get;\n    mayWarn = getter && \"isReactWarning\" in getter && getter.isReactWarning;\n    if (mayWarn) {\n        return (element.props as { ref?: React.Ref<unknown> }).ref;\n    }\n    return (element.props as { ref?: React.Ref<unknown> }).ref || (element as unknown as { ref?: React.Ref<unknown> }).ref;\n}\n"],"mappings":"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"}

package/dist/{components → src/components}/core/button.d.ts

@@ -7,8 +7,8 @@ declare const variants: {
         big: string;
         default: string;
         min: string;
-        small: string;
         tiny: string;
+        small: string;
     };
     rounded: {
         rough: string;

package/dist/src/components/core/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/core/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCb,CAAC;AAUF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CAC/E,gBAAgB,CACZ,QAAQ,GACJ,OAAO,CAAC;IACJ,oCAAoC;IACpC,IAAI,EAAE,KAAK,CAAC;IACZ,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAC;CACpB,CAAC,EACN,CAAC,CACJ,CACJ,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAwBK,CAAC"}

package/dist/{components → src/components}/core/button.jsx

@@ -4,17 +4,17 @@ import { css } from "../../lib/dom";
 import { Polymorph } from "./polymorph";
 const variants = {
     size: {
-        icon: "p-1",
-        big: "h-12 px-6 py-4",
-        default: "h-10 px-4 py-2",
-        min: "h-7 px-3 py-1 text-sm",
-        small: "h-8 px-4 py-2 text-sm",
-        tiny: "h-6 px-2 py-1 text-sm",
+        icon: "p-button-padding-icon",
+        big: "h-button-height-big px-button-padding-x-big py-button-padding-y-big",
+        default: "h-button-height px-button-padding-x py-button-padding-y",
+        min: "h-button-height-min px-button-padding-x-min py-button-padding-y-min text-typography-sm",
+        tiny: "h-button-height-tiny px-button-padding-x-tiny py-button-padding-y-tiny text-typography-sm",
+        small: "h-button-height-small px-button-padding-x-small py-button-padding-y-small text-typography-sm",
     },
     rounded: {
-        rough: "rounded-sm",
-        squared: "rounded-none",
-        default: "rounded-button",
+        rough: "rounded-button-radius-rough",
+        squared: "rounded-button-radius-squared",
+        default: "rounded-button-radius",
         circle: "rounded-full aspect-square",
     },
     theme: {
@@ -40,7 +40,7 @@ const variants = {
         "ghost-neutral": "bg-transparent border-0 border-card-border",
     },
 };
-const buttonVariants = cva("relative inline-flex cursor-pointer items-center justify-center gap-1.5 overflow-hidden whitespace-nowrap align-middle font-medium transition-colors duration-300 ease-linear focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring enabled:hover:bg-opacity-70 enabled:focus:bg-opacity-70 disabled:cursor-not-allowed disabled:bg-opacity-40 disabled:text-opacity-80 data-[loading=true]:animate-pulse data-[loading=true]:opacity-30", {
+const buttonVariants = cva("relative inline-flex cursor-pointer items-center justify-center gap-button-gap overflow-hidden whitespace-nowrap align-middle font-medium transition-colors duration-300 ease-linear focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring enabled:hover:bg-opacity-70 enabled:focus:bg-opacity-70 disabled:cursor-not-allowed disabled:bg-opacity-40 disabled:text-opacity-80 data-[loading=true]:animate-pulse data-[loading=true]:opacity-30", {
     variants,
     defaultVariants: { theme: "main", size: "default", rounded: "default" },
 });

package/dist/src/components/core/heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../../src/components/core/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,OAAO,GAAI,OAAO,iBAAiB,gCAE/C,CAAC"}

package/dist/src/components/core/polymorph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"polymorph.d.ts","sourceRoot":"","sources":["../../../../src/components/core/polymorph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,OAAO,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAE9E,MAAM,MAAM,gBAAgB,CAAC,KAAK,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,GAAG;IACvE,EAAE,CAAC,EAAE,CAAC,CAAC;CACV,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC,GAAG;IAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAEN,eAAO,MAAM,SAAS,oIAGpB,CAAC"}

package/dist/src/components/core/render-on-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-on-view.d.ts","sourceRoot":"","sources":["../../../../src/components/core/render-on-view.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CACjF;IACI,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,EACD,CAAC,CACJ,CAAC;AAYF,eAAO,MAAM,YAAY,GAAI,wBAAwB,iBAAiB,CAAC,iBAAiB,CAAC,sBAsBxF,CAAC"}

package/dist/{components → src/components}/core/render-on-view.jsx

@@ -24,7 +24,7 @@ export const RenderOnView = ({ children, ...props }) => {
         });
         observer.observe(div);
         return () => observer.disconnect();
-    }, []);
+    }, [onIntersect]);
     return (<div {...props} ref={ref}>
             {shouldRender ? children : null}
         </div>);

package/dist/src/components/core/resizable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../../src/components/core/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAkD5D,eAAO,MAAM,SAAS,GAAI,cAAc,KAAK,CAAC,iBAAiB,sBAQ9D,CAAC"}

package/dist/{components → src/components}/core/resizable.jsx

@@ -31,7 +31,7 @@ const useElementRect = () => {
                     right: rect.right,
                 });
             }
-        }), []);
+        }), [motion]);
     useEffect(() => {
         if (!element)
             return;
@@ -39,7 +39,7 @@ const useElementRect = () => {
             return;
         observer.observe(element);
         return () => observer.disconnect();
-    }, [element]);
+    }, [element, observer]);
     return [ref, motion];
 };
 export const Resizable = ({ children }) => {

package/dist/src/components/core/slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../../../src/components/core/slot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4C/B,MAAM,MAAM,MAAM,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAI1D,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAiBD,wBAAgB,UAAU,CAAC,SAAS,EAAE,MAAM,iFAyC3C;AAED,eAAO,MAAM,IAAI,+EAAqB,CAAC;AAgCvC,UAAU,cAAc;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,UAAU,kBAAmB,SAAQ,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC;IACzD,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,sBAOhD"}

package/dist/src/components/core/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/core/tag.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;CAqBb,CAAC;AAEF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C,KAAK,MAAM,GAAG,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;AAyB7C,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CACzE,WAAW,CAAC,OAAO,QAAQ,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC,EACnG,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAwBQ,CAAC"}

package/dist/{components → src/components}/core/tag.jsx

@@ -4,11 +4,11 @@ import { css } from "../../lib/dom";
 import { Polymorph } from "./polymorph";
 const variants = {
     size: {
-        icon: "p-1",
-        big: "h-12 px-6 py-4",
-        default: "h-8 px-4 py-2",
-        tiny: "h-5 p-1 px-2 text-xs",
-        small: "h-6 p-2 px-3 text-sm",
+        icon: "p-tag-padding-icon",
+        big: "h-tag-height-big px-tag-padding-x-big py-tag-padding-y-big",
+        default: "h-tag-height px-tag-padding-x py-tag-padding-y",
+        tiny: "h-tag-height-tiny px-tag-padding-x-tiny py-tag-padding-y-tiny text-typography-xs",
+        small: "h-tag-height-small px-tag-padding-x-small py-tag-padding-y-small text-typography-sm",
     },
     theme: {
         custom: "",
@@ -24,7 +24,7 @@ const variants = {
         loading: "animate-pulse bg-disabled duration-700 opacity-70",
     },
 };
-const indicatorVariant = cva("aspect-square size-2 rounded-full border-0", {
+const indicatorVariant = cva("aspect-square size-tag-indicator-size rounded-full border-0", {
     variants: {
         theme: {
             info: "bg-info",
@@ -38,13 +38,15 @@ const indicatorVariant = cva("aspect-square size-2 rounded-full border-0", {
         },
     },
 });
-const tagVariants = cva("inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-pill border-0 align-middle transition-all duration-300 ease-linear", {
+const tagVariants = cva("inline-flex items-center justify-center gap-tag-gap whitespace-nowrap rounded-tag-radius border-0 align-middle transition-all duration-300 ease-linear", {
     variants,
     defaultVariants: { theme: "primary", size: "default" },
 });
 export const Tag = forwardRef(function Tag({ className, indicator = undefined, icon, loading, theme, size, ...props }, ref) {
     return (<Polymorph {...props} ref={ref} data-theme={theme} data-component="tag" as={props.as ?? "span"} className={css(tagVariants({ size, theme: loading ? "loading" : theme }), className)}>
-            {indicator ? <span aria-hidden="true" className={indicatorVariant({ theme: indicator === true ? theme : indicator })}/> : null}
+            {indicator ? (<span aria-hidden="true" className={indicatorVariant({
+                theme: indicator === true ? theme : indicator,
+            })}/>) : null}
             {icon}
             {props.children}
         </Polymorph>);

package/dist/src/components/core/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../src/components/core/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,CAAC,GAAG,CAAC,sBAA2F,CAAC;AAEhJ,eAAO,MAAM,WAAW,GAAI,OAAO,cAAc,CAAC,GAAG,CAAC,sBAErD,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,sBAO7D,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,sBAKpE,CAAC;AAEF,KAAK,eAAe,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;CACnD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,iBAAiB,CAAC,eAAe,CAAC,sBAUnE,CAAC"}

package/dist/{components → src/components}/core/typography.jsx

@@ -1,13 +1,15 @@
 import React from "react";
 import { css } from "../../lib/dom";
-export const Paragraph = (props) => <p {...props} className={css("text-base leading-snug", props.className)}/>;
-export const Description = (props) => <p {...props} className={css("mb-kilo text-sm text-secondary", props.className)}/>;
-export const Info = (props) => (<div className={css(`flex ${props.row ? "flex-row items-center" : "flex-col"} gap-1`, props.className)}>
-        <span className="text-sm font-medium tracking-wide">{props.row ? `${props.label}:` : props.label}</span>
-        <span className={css(props.disabled ? "text-disabled" : "", props.row ? "w-fit text-base" : "w-full text-lg")}>{props.children}</span>
+export const Paragraph = (props) => <p {...props} className={css("text-typography-base leading-snug", props.className)}/>;
+export const Description = (props) => (<p {...props} className={css("mb-kilo text-typography-sm text-secondary", props.className)}/>);
+export const Info = (props) => (<div className={css(`flex ${props.row ? "flex-row items-center" : "flex-col"} gap-info-gap`, props.className)}>
+        <span className="text-info-label-text font-medium tracking-wide">{props.row ? `${props.label}:` : props.label}</span>
+        <span className={css(props.disabled ? "text-disabled" : "", props.row ? "w-fit text-info-value-text" : "w-full text-info-secondary-text")}>
+            {props.children}
+        </span>
     </div>);
 export const PageTitle = (props) => (<div>
-        <h2 className="typography text-3xl font-bold tracking-wide">{props.title}</h2>
+        <h2 className="typography text-typography-3xl font-bold tracking-wide">{props.title}</h2>
         <p className="typography text-secondary">{props.children}</p>
     </div>);
 export const PageHeader = (props) => {

package/dist/src/components/display/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/components/display/alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,eAAe,EAA0C,MAAM,cAAc,CAAC;AAExG,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAahE,KAAK,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpE,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,aAAa,CAAC,sBAiB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;;;;;;;;;CAUlB,CAAC;AAOF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC1E,WAAW,CAAC,OAAO,aAAa,CAAC,GAC7B,OAAO,CAAC;IACJ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAwD9E,CAAC"}

package/dist/{components → src/components}/display/alert.jsx

@@ -29,7 +29,7 @@ const themeVariants = {
         neutral: "bg-transparent border border-card-border text-alert-primary-text",
     },
 };
-const alertVariants = cva("relative block w-full rounded-lg border p-4 text-sm", {
+const alertVariants = cva("text-typography-sm relative block w-full rounded-alert-radius border p-alert-p", {
     variants: themeVariants,
     defaultVariants: { theme: "neutral" },
 });
@@ -41,18 +41,18 @@ export const Alert = forwardRef(function Alert({ className, theme, Icon, onClose
             {open ? (<motion.div data-open={!!open} aria-hidden={!open} data-component="alert" className={css("isolate w-full", open ? "pointer-events-auto" : "pointer-events-none")}>
                     <Collapse data-open={!!open} open={!!open}>
                         <Polymorph {...props} ref={ref} role={liveRole} data-theme={theme} as={props.as || "div"} className={css(alertVariants({ theme }), className)}>
-                            <div className="grid grid-cols-[auto_1fr] gap-base">
-                                {onClose !== undefined && open ? (<button type="button" onClick={close} aria-label={t.closeButton} className="absolute right-3 top-3 text-foreground transition-colors duration-300 ease-in-out hover:text-danger">
+                            <div className="flex flex-col gap-alert-gap">
+                                {onClose !== undefined && open ? (<button type="button" onClick={close} aria-label={t.closeButton} className="absolute right-alert-close-right top-alert-close-top text-foreground transition-colors duration-300 ease-in-out hover:text-danger">
                                         <XIcon size={20} aria-hidden="true"/>
                                     </button>) : null}
-                                <div className={css("flex items-center gap-2", props.title ? "" : "w-fit")}>
+                                <div className="flex items-center gap-alert-gap">
                                     {!Icon && theme === "success" ? <CheckCircleIcon aria-hidden="true" size={20}/> : null}
                                     {!Icon && theme === "info" ? <InfoIcon aria-hidden="true" size={20}/> : null}
                                     {!Icon && theme === "danger" ? <WarningIcon aria-hidden="true" size={20}/> : null}
                                     {Icon}
+                                    {props.title ? (<h4 className="tracking-3 text-typography-lg text-balance font-semibold">{props.title}</h4>) : (<div className="w-full">{props.children}</div>)}
                                 </div>
-                                {props.title ? <h4 className="tracking-3 col-start-2 text-balance text-lg font-semibold">{props.title}</h4> : null}
-                                <div className="col-start-2 w-full">{props.children}</div>
+                                {props.title ? <div className="w-full">{props.children}</div> : null}
                             </div>
                         </Polymorph>
                     </Collapse>

package/dist/src/components/display/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/display/calendar.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAqB,EAAE,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AA0B5D,KAAK,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAExC,KAAK,YAAY,GAAG,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;AAElD,KAAK,aAAa,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;AAEpD,KAAK,SAAS,GAAG,CAAC,CAAC,EAAE,IAAI,KAAK,MAAM,CAAC;AAErC,KAAK,cAAc,GAAG,OAAO,CAAC;IAC1B,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,CAAC;IAC1C,QAAQ,EAAE,MAAM,GAAG,CAAC,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,CAAC;CACxD,CAAC,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;IAChC,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC3B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,YAAY,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACtC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;IACtC,QAAQ,EAAE,aAAa,GAAG,YAAY,CAAC;IACvC,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C,CAAC,CAAC;AA2IH,eAAO,MAAM,QAAQ,GAAI,qLAgBtB,aAAa,sBA2Sf,CAAC"}

package/dist/{components → src/components}/display/calendar.jsx

@@ -79,17 +79,17 @@ const CalendarBody = (props) => {
                     const sameMonth = isSameMonth(day, props.stateDate);
                     const disableDate = !sameMonth || disabledByFn;
                     const isInRange = props.rangeMode ? inRange(props.range?.from, day, props.range?.to) : false;
-                    return (<td key={key} align="center" className={css("relative p-1", Is.function(props.styles?.dayFrame) ? props.styles?.dayFrame(day) : props.styles?.dayFrame)}>
-                                    <button type="button" data-date={key} disabled={disabledByFn} data-samemonth={sameMonth} data-range={props.rangeMode} onClick={props.dispatch.onSelectDate} data-view={props.stateDate.getMonth().toString()} className={css(`relative flex size-9 items-center justify-center rounded-full proportional-nums disabled:cursor-not-allowed ${today ? "text-emphasis" : ""} ${disableDate ? "text-disabled" : ""} ${isSelected ? "bg-primary text-primary-foreground" : ""}`, isInRange && props.markRange ? "size-9 border border-dashed border-card-border" : "", Is.function(props.styles?.day) ? props.styles?.day(day) : props.styles?.day)}>
+                    return (<td key={key} align="center" className={css("relative p-calendar-cell-p", Is.function(props.styles?.dayFrame) ? props.styles?.dayFrame(day) : props.styles?.dayFrame)}>
+                                    <button type="button" data-date={key} disabled={disabledByFn} data-samemonth={sameMonth} data-range={props.rangeMode} onClick={props.dispatch.onSelectDate} data-view={props.stateDate.getMonth().toString()} className={css(`relative flex size-calendar-day-size items-center justify-center rounded-full proportional-nums disabled:cursor-not-allowed ${today ? "text-emphasis" : ""} ${disableDate ? "text-disabled" : ""} ${isSelected ? "bg-primary text-primary-foreground" : ""}`, isInRange && props.markRange ? "size-calendar-day-size border border-dashed border-card-border" : "", Is.function(props.styles?.day) ? props.styles?.day(day) : props.styles?.day)}>
                                         <div></div>
                                         {day.getDate()}
                                         {isSelected && props.stateRange.from?.toISOString() === key ? (<span className="absolute -top-2 left-0 h-full w-full">
-                                                <span className="text-xs text-foreground">
+                                                <span className="text-calendar-cell-text text-foreground">
                                                     {props.labelRange?.from ?? translate.calendarFromDate}
                                                 </span>
                                             </span>) : null}
                                         {isSelected && props.stateRange.to?.toISOString() === key ? (<span className="absolute -top-2 left-0 h-full w-full">
-                                                <span className="text-xs text-foreground">{props.labelRange?.to ?? translate.calendarToDate}</span>
+                                                <span className="text-calendar-cell-text text-foreground">{props.labelRange?.to ?? translate.calendarToDate}</span>
                                             </span>) : null}
                                     </button>
                                     {props.RenderOnDay ? <props.RenderOnDay date={day}/> : null}
@@ -116,7 +116,10 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
         range: { from: range?.from, to: range?.to },
         months: getOptionsMonth(id.current, providedDate, currentLocale),
         selectMode: (rangeMode ? "from" : undefined),
-        week: eachDayOfInterval({ start: startOfWeek(providedDate), end: endOfWeek(providedDate) }),
+        week: eachDayOfInterval({
+            start: startOfWeek(providedDate),
+            end: endOfWeek(providedDate),
+        }),
     }, (get) => ({
         onChangeYear: (year) => ({ year }),
         onExitComplete: () => {
@@ -135,7 +138,12 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
             if (state.isAnimating)
                 return state;
             const date = add(state.date, { months: 1 });
-            return { date, isAnimating: true, direction: 1, year: formatYear(date) };
+            return {
+                date,
+                isAnimating: true,
+                direction: 1,
+                year: formatYear(date),
+            };
         },
         previousMonth: (e) => {
             if (e)
@@ -144,7 +152,12 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
             if (state.isAnimating)
                 return state;
             const date = sub(state.date, { months: 1 });
-            return { date, isAnimating: true, direction: -1, year: formatYear(date) };
+            return {
+                date,
+                isAnimating: true,
+                direction: -1,
+                year: formatYear(date),
+            };
         },
         onSelectDate: (e) => {
             const state = get.state();
@@ -225,7 +238,7 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
     useEffect(() => {
         if (!changeOnlyOnClick)
             onChange?.(state.date);
-    }, [currentAsString, changeOnlyOnClick]);
+    }, [currentAsString, changeOnlyOnClick, state.date, onChange]);
     const defer = useDebounce((y) => dispatch.date((prev) => setYear(new Date(prev), +y)), 1200);
     const internalOnChangeYear = (e) => {
         const value = e.currentTarget.value;
@@ -244,30 +257,32 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
     };
     return (<MotionConfig transition={transition}>
             <div ref={root} data-component="calendar" onTouchEnd={swipe.onTouchEnd} onTouchStart={swipe.onTouchStart} className={css("relative overflow-hidden", Is.function(styles?.calendar) ? styles?.calendar(allDaysOfMonth) : styles?.calendar)}>
-                <div className="flex flex-col justify-center rounded text-center">
+                <div className="rounded-calendar-header-radius flex flex-col justify-center text-center">
                     <AnimatePresence initial={false} mode="popLayout" custom={state.direction} onExitComplete={dispatch.onExitComplete}>
                         <motion.div key={monthString} initial="enter" animate="middle" exit="exit">
                             <header className="relative flex justify-between">
-                                <motion.button layout type="button" data-focustrap="prev" variants={removeImmediately} onClick={dispatch.previousMonth} title={translations.calendarBackMonth} className="z-calendar rounded-full p-1.5 hover:bg-primary hover:text-primary-foreground">
-                                    <CaretLeftIcon className="h-4 w-4"/>
+                                <motion.button layout type="button" data-focustrap="prev" variants={removeImmediately} onClick={dispatch.previousMonth} title={translations.calendarBackMonth} className="z-calendar rounded-full p-calendar-nav-p hover:bg-primary hover:text-primary-foreground">
+                                    <CaretLeftIcon className="size-calendar-icon-size"/>
                                 </motion.button>
                                 <motion.span layout variants={variants} custom={state.direction} className="absolute inset-0 isolate z-normal flex items-center justify-center font-semibold">
-                                    <span className="flex w-fit items-center justify-center gap-0.5 py-1">
+                                    <span className="flex w-fit items-center justify-center gap-calendar-nav-gap py-calendar-nav-py">
                                         <select value={monthString} onChange={dispatch.onChangeMonth} aria-label={translations.calendarMonthLabel} style={{ width: `${monthString.length + 1}ch` }} className="cursor-pointer appearance-none bg-transparent capitalize proportional-nums hover:text-primary">
                                             {state.months}
                                         </select>
-                                        <TheMaskInput mask="int" maxLength={4} placeholder="YYYY" value={state.year} onChange={internalOnChangeYear} style={{ width: `${state.year.length}ch` }} className="w-16 cursor-pointer appearance-none bg-transparent hover:text-primary"/>
+                                        <TheMaskInput mask="int" maxLength={4} placeholder="YYYY" value={state.year} onChange={internalOnChangeYear} style={{ width: `${state.year.length}ch` }} className="w-calendar-year-w cursor-pointer appearance-none bg-transparent hover:text-primary"/>
                                     </span>
                                 </motion.span>
-                                <motion.button layout type="button" data-focustrap="next" variants={removeImmediately} onClick={dispatch.nextMonth} title={translations.calendarNextMonth} className="z-calendar rounded-full p-1.5 hover:bg-primary hover:text-primary-foreground">
-                                    <CaretRightIcon className="h-4 w-4"/>
+                                <motion.button layout type="button" data-focustrap="next" variants={removeImmediately} onClick={dispatch.nextMonth} title={translations.calendarNextMonth} className="z-calendar rounded-full p-calendar-nav-p hover:bg-primary hover:text-primary-foreground">
+                                    <CaretRightIcon className="size-calendar-icon-size"/>
                                 </motion.button>
                             </header>
-                            <motion.table className="mt-2 table min-w-full table-auto border-0">
+                            <motion.table className="mt-calendar-table-mt table min-w-full table-auto border-0">
                                 <thead>
                                     <tr>
-                                        {state.week.map((dayOfWeek) => (<th role="columnheader" key={dayOfWeek.toString()} className={css("py-2 text-sm font-medium capitalize", Is.function(styles?.weekDay) ? styles.weekDay(dayOfWeek) : styles?.weekDay)}>
-                                                {dayOfWeek.toLocaleDateString(currentLocale, { weekday: "short" })}
+                                        {state.week.map((dayOfWeek) => (<th role="columnheader" key={dayOfWeek.toString()} className={css("py-calendar-weekday-py text-typography-sm font-medium capitalize", Is.function(styles?.weekDay) ? styles.weekDay(dayOfWeek) : styles?.weekDay)}>
+                                                {dayOfWeek.toLocaleDateString(currentLocale, {
+                weekday: "short",
+            })}
                                             </th>))}
                                     </tr>
                                 </thead>
@@ -276,7 +291,7 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
                         </motion.div>
                     </AnimatePresence>
                 </div>
-                {type === "datetime" ? (<section className="my-4 grid items-center">
+                {type === "datetime" ? (<section className="my-calendar-datetime-my grid items-center">
                         <Input info={null} mask="time" optionalText=" " container="w-full" reportStatus={false} defaultValue={date ? format(date, "HH:mm") : undefined} title={datetimeTitle || translations.calendarDatetimeTitle} onChange={(e) => {
                 const value = e.target.value;
                 const match = timeRegex.exec(value);
@@ -284,12 +299,16 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
                     return;
                 const hour = match.groups.hour;
                 const min = match.groups.min;
-                const d = set(state.date, { hours: Number(hour), minutes: Number(min), seconds: 0 });
+                const d = set(state.date, {
+                    hours: Number(hour),
+                    minutes: Number(min),
+                    seconds: 0,
+                });
                 dispatch.date(() => d);
                 onChange?.(d);
             }}/>
                     </section>) : null}
-                <footer className="mt-2 text-center text-primary">
+                <footer className="mt-calendar-footer-mt text-center text-primary">
                     <button type="button" onClick={onSetToday} className="transition-transform duration-300 hover:scale-105">
                         {translations.calendarToday}
                     </button>

package/dist/src/components/display/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/display/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGhE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CACzE;IACI,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;CACtC,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,IAAI;KAAI,CAAC,SAAS,KAAK,CAAC,WAAW,yFAS7C,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;wDA+C0B,iBAAiB,CAAC,oBAAoB,CAAC;CAXlG,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CACpF;IACI,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;CACtC,EACD,CAAC,CACJ,CAAC;AAoBF,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBAuB9C,CAAC"}

package/dist/{components → src/components}/display/card.jsx

@@ -4,12 +4,12 @@ import { Is } from "sidekicker";
 import { css } from "../../lib/dom";
 import { Polymorph } from "../core/polymorph";
 import { Skeleton } from "./skeleton";
-export const Card = ({ title, loading, children, as, header = null, container = "", titleClassName = "", ...props }) => (<Polymorph {...props} as={as || "div"} data-component="card" className={css("flex w-full flex-col gap-4 rounded-card border border-card-border bg-card-background py-3 shadow-shadow-card", container)}>
-        {title ? (<header data-component="card-title" className={css("mb-2 w-full border-b border-card-border px-6 pb-2 text-xl font-medium", titleClassName)}>
+export const Card = ({ title, loading, children, as, header = null, container = "", titleClassName = "", ...props }) => (<Polymorph {...props} as={as || "div"} data-component="card" className={css("flex w-full flex-col gap-card-gap rounded-card-radius border border-card-border bg-card-background py-card-padding-y shadow-shadow-card", container)}>
+        {title ? (<header data-component="card-title" className={css("mb-card-title-mb w-full border-b border-card-border px-card-padding-x pb-card-title-pb text-typography-xl font-medium", titleClassName)}>
                 {title}
             </header>) : (header)}
-        <div data-component="card-body" className={css("min-w-full px-6", props.className)}>
-            {loading ? (<div className="flex flex-col gap-4">
+        <div data-component="card-body" className={css("min-w-full px-card-padding-x", props.className)}>
+            {loading ? (<div className="flex flex-col gap-card-gap">
                     <Skeleton className="w-full"/>
                     <Skeleton className="w-8/12"/>
                     <Skeleton className="w-10/12"/>
@@ -29,14 +29,14 @@ Card.Title = ({ as, titleTag, navTag, children, ...props }) => {
 export const StatsCard = (props) => {
     const interactive = props.interactive ?? true;
     const Icon = props.Icon ?? InfoIcon;
-    return (<Card {...props} title={null} loading={undefined} container="px-0 py-0" className="flex items-center gap-4 px-0">
-            <div className={`flex w-full items-center gap-4 rounded-card px-0 lg:px-0 ${interactive ? "transition-colors duration-300 ease-linear hover:bg-primary-hover/10" : ""}`}>
-                <div className={css("flex aspect-square h-[stretch] w-20 items-center justify-center rounded-l-card bg-primary p-4 text-primary-foreground", props.mark)}>
+    return (<Card {...props} title={null} loading={undefined} container="px-0 py-0" className="flex items-center gap-card-gap px-0">
+            <div className={`flex w-full items-center gap-card-gap rounded-card-radius px-0 lg:px-0 ${interactive ? "transition-colors duration-300 ease-linear hover:bg-primary-hover/10" : ""}`}>
+                <div className={css("flex self-stretch w-card-stats-icon-col-w items-center justify-center rounded-l-card-radius bg-primary p-card-stats-icon-col-p text-primary-foreground", props.mark)}>
                     {<Icon size={48}/>}
                 </div>
-                <div className="flex flex-col justify-center gap-2 py-2">
-                    <p className="text-lg">{props.title}</p>
-                    {props.loading ? <Skeleton className="h-10"/> : <p className="text-4xl font-bold tracking-wide">{props.value}</p>}
+                <div className="flex flex-col justify-center gap-card-stats-content-gap py-card-stats-content-py">
+                    <p className="text-typography-lg">{props.title}</p>
+                    {props.loading ? <Skeleton className="h-10"/> : <p className="text-card-title-text font-bold tracking-wide">{props.value}</p>}
                 </div>
             </div>
         </Card>);

package/dist/src/components/display/empty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../../../src/components/display/empty.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3D,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,sBAStC,CAAC"}

package/dist/{components → src/components}/display/empty.jsx

@@ -4,7 +4,7 @@ import { useTranslations } from "../../hooks/use-translations";
 export const Empty = (props) => {
     const Icon = props.Icon ?? FileIcon;
     const translate = useTranslations();
-    return (<div className="flex w-full flex-col items-center justify-center gap-4 px-8 py-12">
+    return (<div className="flex w-full flex-col items-center justify-center gap-empty-gap px-empty-px py-empty-py">
             <Icon size={64} className="text-disabled"/>
             <p className="text-disabled">{props.message ?? translate.emptyDataMessage}</p>
         </div>);

package/dist/src/components/display/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../src/components/display/list.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,iBAAiB,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,KAAK,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;CAC5C,CAAC;AAIF,KAAK,iBAAiB,GAAG,MAAM,CAAC;AA4DhC,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,sBAwEvE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,sBAA0C,CAAC"}