@g4rcez/components 4.1.3 → 5.0.0

package/dist/src/components/form/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../src/components/form/form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,sBAOvD,CAAC"}

package/dist/src/components/form/formReset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formReset.d.ts","sourceRoot":"","sources":["../../../../src/components/form/formReset.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,GAAI,OAAO,eAAe,GAAG,IAAI,SAatD,CAAC"}

package/dist/src/components/form/free-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"free-text.d.ts","sourceRoot":"","sources":["../../../../src/components/form/free-text.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,KAAK,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;AAExC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,EAAE,UAAU,SAAS,GAAG,IAAI,QAAQ,CAC/E,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC,EAChF,UAAU,CACb,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,CAAC,IAAI,SAAS,gBAAgB,GAAG,mBAAmB,EAAE,KAAK,SAAS,GAAG,EACpI,SAAS,OAAO,GAAG,UAAU,GAAG,OAAO,SAAS,EAChD,aAAa,OAAO,GAAG,UAAU,EACjC,cAAc,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,EACrC,WAAW,CAAC,EAAE,EAAE,IAAI,KAAK,MAAM,IAAI,4CA2GtC,CAAC"}

package/dist/{components → src/components}/form/free-text.jsx

@@ -34,7 +34,7 @@ export const createFreeText = (Element, elementName, defaultProps, register) =>
             };
         }, []);
         return (<InputField {...defaultProps} info={info} left={left} error={error} right={right} form={props.form} loading={loading} name={props.name} feedback={feedback} hideLeft={hideLeft} title={props.title} rightLabel={rightLabel} disabled={props.disabled} hiddenLabel={hiddenLabel} interactive={interactive} required={props.required} componentName={elementName} id={props.name || props.id} optionalText={optionalText} labelClassName={labelClassName} placeholder={props.placeholder} container={css(container, defaultProps.container)}>
-                    <Render {...defaultProps} {...props} id={id} name={id} type={type} data-next={next} aria-busy={loading} aria-invalid={!!error} aria-disabled={props.disabled} aria-readonly={props.readOnly} aria-describedby={error ? `${id}-error` : undefined} ref={mergeRefs(ref, inputRef)} className={css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-base text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "resize-y group-focus-within:border-primary group-hover:border-primary", "disabled:cursor-not-allowed disabled:text-disabled", props.className)}/>
+                    <Render {...defaultProps} {...props} id={id} name={id} type={type} data-next={next} aria-busy={loading} aria-invalid={!!error} aria-disabled={props.disabled} aria-readonly={props.readOnly} aria-describedby={error ? `${id}-error` : undefined} ref={mergeRefs(ref, inputRef)} className={css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-input-radius bg-transparent px-input-padding-x py-input-padding-y text-input-text text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "resize-y group-focus-within:border-primary group-hover:border-primary", "disabled:cursor-not-allowed disabled:text-disabled", props.className)}/>
                 </InputField>);
     });
     return FreeText;

package/dist/src/components/form/input-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAwB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EAAE,KAAK,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAC/C,OAAO,CAAC;IACJ,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACxB,CAAC,CACL,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,kEAA0E,aAAa,sBA+CpH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACrF,OAAO,CACH,QAAQ,CACJ,aAAa,EACb;IACI,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,KAAK,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;CAC1B,CACJ,CACJ,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,EAAE,KAAK,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAsGG,CAAC"}

package/dist/{components → src/components}/form/input-field.jsx

@@ -31,10 +31,10 @@ export const InputField = forwardRef(({ optionalText: _optionalText, left, right
     const translation = useTranslations();
     const optionalText = _optionalText ?? translation.inputOptionalLabel;
     return (<fieldset ref={ref} form={form} disabled={disabled} data-error={!!error} aria-disabled={disabled} data-component={componentName} data-interactive={!!interactive} className={css("group flex min-h-0 min-w-0 max-w-full flex-col items-start", container)}>
-                <label form={form} htmlFor={ID} className="relative inline-flex w-full max-w-full cursor-text flex-row flex-wrap justify-between gap-1 text-field-label text-sm transition-colors empty:hidden group-disabled:cursor-not-allowed group-error:text-danger">
+                <label form={form} htmlFor={ID} className={css("relative inline-flex w-full max-w-full cursor-text flex-row flex-wrap justify-between gap-input-label-mb text-input-label-text transition-colors empty:hidden group-disabled:cursor-not-allowed group-error:text-danger")}>
                     {hiddenLabel ? (<span className="sr-only">
                             <InputFeedback info={info} hideLeft={hideLeft} reportStatus={reportStatusDefault} title={title} placeholder={placeholder}/>
-                        </span>) : (<InputFeedback info={info} hideLeft={hideLeft} reportStatus={reportStatusDefault} title={title} placeholder={placeholder}>
+                        </span>) : (<InputFeedback info={info} title={title} hideLeft={hideLeft} placeholder={placeholder} reportStatus={reportStatusDefault}>
                             {optionalText || rightLabel ? (<Fragment>
                                     {!required ? (<span aria-disabled={disabled} className="text-opacity-70 transition-colors group-focus-within:text-primary group-hover:text-primary aria-disabled:text-disabled">
                                             {optionalText}
@@ -42,16 +42,16 @@ export const InputField = forwardRef(({ optionalText: _optionalText, left, right
                                     {rightLabel ? <Fragment>{rightLabel}</Fragment> : null}
                                 </Fragment>) : null}
                         </InputFeedback>)}
-                    <div className={`group relative flex w-full flex-row flex-nowrap items-center gap-x-2 gap-y-1 rounded-md border border-input-border bg-transparent transition-colors group-hover:border-primary group-disabled:border-disabled group-error:border-danger ${labelClassName}`}>
-                        {left ? <span className="flex flex-nowrap gap-1 whitespace-nowrap pl-2">{left}</span> : null}
+                    <div className={css("group relative flex w-full flex-row flex-nowrap items-center gap-x-input-gap gap-y-input-inline rounded-input-radius border border-input-border bg-transparent transition-colors group-hover:border-primary group-disabled:border-disabled group-error:border-danger", labelClassName)}>
+                        {left ? <span className="flex flex-nowrap gap-input-slot-gap whitespace-nowrap pl-input-slot-pl">{left}</span> : null}
                         {children}
-                        {right ? <span className="flex flex-nowrap gap-2 whitespace-nowrap pr-2">{right}</span> : null}
+                        {right ? <span className="flex flex-nowrap gap-input-slot-gap whitespace-nowrap pr-input-slot-pr">{right}</span> : null}
                     </div>
                 </label>
-                <p id={`${ID}-error`} role="alert" className="mt-input-gap hidden whitespace-pre-wrap text-wrap text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):invalid[data-initialized=true]]:flex group-error:flex group-error:text-danger">
+                <p id={`${ID}-error`} role="alert" className="mt-input-hint-mt hidden whitespace-pre-wrap text-wrap text-input-hint-text empty:mt-0 empty:hidden group-has-[input:not(:focus):invalid[data-initialized=true]]:flex group-error:flex group-error:text-danger">
                     {error}
                 </p>
-                <p className="mt-input-gap text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):valid[data-initialized=true]]:block group-assert:block group-error:hidden">
+                <p className="mt-input-hint-mt text-input-hint-text empty:mt-0 empty:hidden group-has-[input:not(:focus):valid[data-initialized=true]]:block group-assert:block group-error:hidden">
                     {feedback}
                 </p>
             </fieldset>);

package/dist/src/components/form/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input.tsx"],"names":[],"mappings":"AACA,OAAkB,EACd,QAAQ,EACR,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAkB,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D,mBAAmB,gBAAgB,CAAC;AAEpC;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,aAAa,CAClC,OAAO,EACL,CAAC;IACG,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CACvC,GAAG,kBAAkB,CAAC,GACvB,CAAC;IACG,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,iBAAiB,CAAC,GACtB,CAAC;IACG,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC;IAC9F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,YAAY,CAAC,CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,KAAK,oEAEhB,CAAC"}

package/dist/src/components/form/multi-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/multi-select.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAA6F,MAAM,OAAO,CAAC;AASlH,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAC7C,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CACnC,eAAe,CAAC,OAAO,CAAC,EACxB;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACjD,CACJ,CAAC;AA+DF,eAAO,MAAM,WAAW,wGAycvB,CAAC"}

package/dist/{components → src/components}/form/multi-select.jsx

@@ -24,13 +24,13 @@ const transitionStyles = {
 };
 const EMPTY_NODES = [];
 const EMPTY_VALUES = [];
-const List = forwardRef(function VirtualItem({ item, context, ...props }, ref) {
-    return <motion.li {...props} ref={ref} className="last:rounded-t-lg"/>;
+const List = forwardRef(function VirtualItem({ item: _item, context: _context, ...props }, ref) {
+    return <motion.li {...props} ref={ref} className="last:rounded-t-dropdown-radius"/>;
 });
-const Item = forwardRef(function VirtualList({ context, ...props }, ref) {
-    return (<motion.ul {...props} role="listbox" ref={ref} className="w-full rounded-b-lg border-b border-tooltip-border last:border-transparent">
+const Item = forwardRef(function VirtualList({ context: _context, ...props }, ref) {
+    return (<motion.div {...props} ref={ref} className="w-full rounded-b-dropdown-radius border-b border-tooltip-border last:border-transparent">
             <AnimatePresence>{props.children}</AnimatePresence>
-        </motion.ul>);
+        </motion.div>);
 });
 const components = { List, Item };
 const OverflowControl = (props) => {
@@ -61,6 +61,7 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
     const map = useMemo(() => new Dict(options.map((x) => [x.value, x])), [options]);
     const fieldset = useRef(null);
     const virtuoso = useRef(null);
+    const searchInputRef = useRef(null);
     const defaults = props.value ?? props.defaultValue ?? EMPTY_VALUES;
     const translation = useTranslations();
     const [open, setOpen] = useState(false);
@@ -73,7 +74,7 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
         });
         return d;
     });
-    const [label, setLabel] = useState(() => {
+    const [_label, setLabel] = useState(() => {
         const d = new Set(defaults);
         return options.reduce((acc, x) => (d.has(x.value) ? [...acc, x.label ?? x.value] : acc), []) ?? defaults;
     });
@@ -106,14 +107,20 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
         whileElementsMounted: autoUpdate,
         middleware: [
             offset(4),
-            autoPlacement({ allowedPlacements: ["top-start", "bottom-start"], alignment: "start" }),
+            autoPlacement({
+                allowedPlacements: ["top-start", "bottom-start"],
+                alignment: "start",
+            }),
             size({
                 padding: 10,
                 elementContext: "reference",
                 apply(args) {
                     const DEFAULT_SIZE = getRemainingSize(refs.reference.current, window.innerHeight);
                     const mw = `${fieldset.current?.getBoundingClientRect().width || DEFAULT_SIZE}px`;
-                    Object.assign(args.elements.floating.style, { width: mw, maxWidth: mw });
+                    Object.assign(args.elements.floating.style, {
+                        width: mw,
+                        maxWidth: mw,
+                    });
                 },
             }),
         ],
@@ -147,7 +154,7 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
         if (!input)
             return;
         return initializeInputDataset(input);
-    }, []);
+    }, [refs.reference]);
     useEffect(() => {
         if (!open)
             return;
@@ -228,18 +235,19 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                     </span>}>
                 <ul {...getReferenceProps({
         ...props,
+        tabIndex: 0,
         onFocus,
         id: `${id}-shadow`,
         name: `${id}-shadow`,
         ref: refs.setReference,
-    })} tabIndex={0} role="button" data-name={id} data-target={id} data-shadow="true" data-error={!!error} aria-autocomplete="list" data-value={values.join(",")} className={css("input placeholder-input-mask group h-input-height w-full text-base", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "group-focus-within:border-primary group-hover:border-primary", "flex flex-row items-center gap-2 whitespace-nowrap text-left", "max-w-full overflow-x-auto truncate overflow-ellipsis", props.className)}>
+    })} data-name={id} data-target={id} data-shadow="true" data-error={!!error} data-value={values.join(",")} className={css("input placeholder-input-mask group h-input-height w-full text-input-text", "rounded-input-radius bg-transparent px-input-padding-x py-input-padding-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "group-focus-within:border-primary group-hover:border-primary", "flex flex-row items-center gap-input-gap whitespace-nowrap text-left", "max-w-full overflow-x-auto truncate overflow-ellipsis", props.className)}>
                     {values.length > 0 ? null : <li className="text-input-placeholder">{props.placeholder}</li>}
                     <OverflowControl label={selectedLabel}>{tags}</OverflowControl>
                 </ul>
                 <input id={id} name={id} type="hidden" data-origin={id} ref={externalRef} required={required} defaultValue={props.value || values || undefined}/>
                 <FloatingPortal preserveTabOrder>
                     {open ? (<FloatingOverlay lockScroll className="z-floating">
-                            <FloatingFocusManager modal guards returnFocus={false} context={context} initialFocus={-1} visuallyHiddenDismiss>
+                            <FloatingFocusManager modal guards returnFocus={false} context={context} initialFocus={searchInputRef} visuallyHiddenDismiss>
                                 <div {...getFloatingProps({
             ref: refs.setFloating,
             style: {
@@ -248,8 +256,8 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                 top: y ?? 0,
                 position: strategy,
             },
-        })} data-floating="true" className={css("relative shadow-floating overflow-clip isolate z-floating m-0 max-h-96 list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground ease-in-out", isTopPlacement ? "origin-[bottom_center]" : "origin-[top_center]")}>
-                                    <input autoFocus value={shadow} onChange={onChange} title={props.title} placeholder={translation.multiSelectInnerPlaceholder} className="input placeholder-input-mask group mb-1 h-10 w-full flex-1 rounded-none border-b border-input-border bg-transparent px-input-x py-input-y outline-none transition-colors focus:border-primary" onKeyDown={(event) => {
+        })} data-floating="true" className={css("relative shadow-floating overflow-clip isolate z-floating m-0 max-h-dropdown-max-h list-none overscroll-contain rounded-dropdown-radius border border-floating-border bg-floating-background p-0 text-foreground ease-in-out", isTopPlacement ? "origin-[bottom_center]" : "origin-[top_center]")}>
+                                    <input ref={searchInputRef} value={shadow} onChange={onChange} title={props.title} placeholder={translation.multiSelectInnerPlaceholder} className="input placeholder-input-mask group mb-1 h-input-height w-full flex-1 rounded-none border-b border-input-border bg-transparent px-input-padding-x py-input-padding-y outline-none transition-colors focus:border-primary" onKeyDown={(event) => {
                 if (event.key === "ArrowDown") {
                     let next = index + 1;
                     if (next > displayList.length - 1)
@@ -280,7 +288,7 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                 }
             }}/>
                                     {isEmpty ? (<li className="w-full border-b border-tooltip-border last:border-transparent">
-                                            <span className="flex w-full justify-between p-2 text-left text-disabled">
+                                            <span className="flex w-full justify-between p-menu-item-p text-left text-disabled">
                                                 {emptyMessage || translation.autocompleteEmpty}
                                             </span>
                                         </li>) : null}
@@ -312,7 +320,7 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                         "aria-selected": active,
                         "aria-disabled": option.disabled,
                         onClick: () => onSelect(option, i),
-                    })} className={`flex w-full max-w-full cursor-pointer items-center justify-start p-2 text-left hover:bg-floating-hover focus:bg-floating-hover ${active || selected ? "bg-floating-hover text-floating-foreground" : ""}`}>
+                    })} className={`flex w-full max-w-full cursor-pointer items-center justify-start p-menu-item-p text-left hover:bg-floating-hover focus:bg-floating-hover ${active || selected ? "bg-floating-hover text-floating-foreground" : ""}`}>
                                                             <Checkbox onChange={noop} checked={active} aria-checked={active} onClick={(e) => {
                             e.stopPropagation();
                             onSelect(option, i);
@@ -323,7 +331,7 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                                                         </button>);
                 }}/>
                                         </motion.div>)}
-                                    <div className="sticky bottom-0 flex w-full flex-nowrap items-center gap-2 overflow-x-auto rounded-b-lg bg-floating-background p-2">
+                                    <div className="gap-menu-item-gap sticky bottom-0 flex w-full flex-nowrap items-center overflow-x-auto rounded-b-dropdown-radius bg-floating-background p-menu-item-p">
                                         {value.size === 0 ? (<Tag theme="muted" size="small">
                                                 {translation.autocompleteEmpty}
                                             </Tag>) : (tags)}

package/dist/{components → src/components}/form/radiobox.d.ts

@@ -3,5 +3,5 @@ import { Override } from "../../types";
 export type RadioboxProps = Override<React.PropsWithChildren<React.ComponentProps<"input">>, {
     size?: "medium" | "large";
 }>;
-export declare const Radiobox: ({ children, className, size, ...props }: RadioboxProps) => React.JSX.Element;
+export declare const Radiobox: ({ children, className, size: _size, ...props }: RadioboxProps) => React.JSX.Element;
 //# sourceMappingURL=radiobox.d.ts.map

package/dist/src/components/form/radiobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radiobox.d.ts","sourceRoot":"","sources":["../../../../src/components/form/radiobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,gDAAqD,aAAa,sBAiB1F,CAAC"}

package/dist/src/components/form/radiobox.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { css } from "../../lib/dom";
+export const Radiobox = ({ children, className = "", size: _size, ...props }) => (<label data-component="radiobox" data-disabled={props.disabled} aria-disabled={props.disabled} className={css("group flex items-center gap-radiobox-gap font-normal data-[disabled=true]:cursor-not-allowed")}>
+        <input {...props} type="radio" className={css("app form-radio inline-block size-radiobox-size appearance-none rounded-full border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", className)}/>
+        {children}
+    </label>);

package/dist/src/components/form/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAGlF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B;IACI,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CAChD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,eAAe,CAAC,QAAQ,CAAC,EACzB;IACI,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,oGA4GlB,CAAC"}

package/dist/{components → src/components}/form/select.jsx

@@ -4,7 +4,7 @@ import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react
 import { useTranslations } from "../../hooks/use-translations";
 import { css, initializeInputDataset, mergeRefs } from "../../lib/dom";
 import { InputField } from "./input-field";
-export const Select = forwardRef(({ required = true, options, info, selectContainer = "", feedback = null, labelClassName, interactive, rightLabel, hiddenLabel, loading, optionalText, container, hideLeft = false, right, left, error, ...props }, ref) => {
+export const Select = forwardRef(({ required = true, options, info, selectContainer: _selectContainer = "", feedback = null, labelClassName, interactive, rightLabel, hiddenLabel, loading, optionalText, container, hideLeft = false, right, left, error, ...props }, ref) => {
     const translation = useTranslations();
     const inputRef = useRef(null);
     const id = props.id ?? props.name;
@@ -32,11 +32,13 @@ export const Select = forwardRef(({ required = true, options, info, selectContai
                             <span className="sr-only">{translation.inputCaretDown}</span>
                         </button>
                     </label>}>
-                <select {...props} id={id} name={id} required={required} ref={mergeRefs(ref, inputRef)} data-selected={!!props.value || false} title={typeof props.title === "string" ? props.title : undefined} className={css("input select group h-10 w-full flex-1 appearance-none rounded-md text-base", "bg-transparent px-2 py-1 text-foreground placeholder-input-placeholder", "outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", props.className)}>
+                <select {...props} id={id} name={id} required={required} ref={mergeRefs(ref, inputRef)} data-selected={!!props.value || false} title={typeof props.title === "string" ? props.title : undefined} className={css("input select group h-input-height w-full flex-1 appearance-none rounded-input-radius text-input-text", "bg-transparent px-input-padding-x py-input-padding-y text-foreground placeholder-input-placeholder", "outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", props.className)}>
                     <option value="" disabled hidden>
                         {props.placeholder}
                     </option>
-                    {options.map((option) => (<option {...option} value={option.value} children={option.label ?? option.value} key={`${id}-select-option-${option.value}`}/>))}
+                    {options.map((option) => (<option {...option} value={option.value} key={`${id}-select-option-${option.value}`}>
+                            {option.label ?? option.value}
+                        </option>))}
                 </select>
             </InputField>);
 });

package/dist/src/components/form/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../src/components/form/slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAQvD,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAmCF,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,gCAgBxC,CAAC"}

package/dist/{components → src/components}/form/slider.jsx

@@ -25,7 +25,7 @@ const Thumb = (props) => {
         observer.observe(html, { attributeFilter: ["aria-valuenow"] });
         return () => observer.disconnect();
     }, []);
-    return (<Tooltip title="" ref={ref} as={Base.Thumb} enabled={props.tooltip} className="focus-within::scale-105 block size-5 cursor-grab rounded-full border-2 border-input-border bg-input-switch shadow-shadow-floating focus-within:border-primary focus-within:outline active:cursor-grabbing">
+    return (<Tooltip title="" ref={ref} as={Base.Thumb} enabled={props.tooltip} className="focus-within::scale-105 block size-slider-thumb-size cursor-grab rounded-full border-2 border-input-border bg-input-switch shadow-shadow-floating focus-within:border-primary focus-within:outline active:cursor-grabbing">
             {float}
         </Tooltip>);
 };
@@ -35,8 +35,8 @@ export const Slider = (props) => {
     const array = defaultValue || value || [];
     const locale = useLocale();
     return (<Base.Root {...restProps} value={value} locale={locale} defaultValue={defaultValue}>
-            <Base.Control className={css("relative flex h-5 w-full touch-none select-none items-center", className)}>
-                <Base.Track className="relative h-2 grow rounded-full bg-background">
+            <Base.Control className={css("relative flex h-slider-control-h w-full touch-none select-none items-center", className)}>
+                <Base.Track className="relative h-slider-track-h grow rounded-full bg-background">
                     <Base.Indicator className="absolute h-full rounded-full bg-primary"/>
                 </Base.Track>
                 {Array.isArray(array) ? array.map((_, i) => <Thumb tooltip={tooltip ?? false} key={`${id.current}-${i}`}/>) : null}

package/dist/src/components/form/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/components/form/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAInG,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,MAAM,mGAqEjB,CAAC"}

package/dist/{components → src/components}/form/switch.jsx

@@ -21,7 +21,7 @@ export const Switch = forwardRef(({ children, loading, container, error, ...prop
                 return () => ref?.removeEventListener("change", onChange);
             }
         }
-    }, []);
+    }, [stableOnChange]);
     const onCheck = () => {
         const checked = !innerRef.current?.checked;
         setInnerChecked(checked);
@@ -34,13 +34,13 @@ export const Switch = forwardRef(({ children, loading, container, error, ...prop
     return (<fieldset className={css("flex flex-col flex-wrap justify-center", container)} data-component="switch" disabled={props.disabled || loading}>
             <span className="flex flex-row flex-wrap items-center">
                 <input {...props} hidden ref={innerRef} type="checkbox" checked={checked} id={props.id || id} data-trigger="change" data-checked={checked} disabled={props.disabled || loading} onChange={(e) => setInnerChecked(e.target.checked)}/>
-                <button role="switch" type="button" onClick={onCheck} aria-checked={checked} data-checked={checked} aria-labelledby={`${id}-label`} disabled={props.disabled || loading} className="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary">
-                    <span aria-hidden="true" data-checked={checked} className="inline-block aspect-square size-5 transform rounded-full shadow ring-0 transition duration-300 ease-in-out data-[checked=false]:translate-x-0 data-[checked=true]:translate-x-5 data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch"/>
+                <button role="switch" type="button" onClick={onCheck} aria-checked={checked} data-checked={checked} aria-labelledby={`${id}-label`} disabled={props.disabled || loading} className="relative inline-flex h-switch-track-h w-switch-track-w flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary">
+                    <span aria-hidden="true" data-checked={checked} className="inline-block aspect-square size-switch-thumb-size transform rounded-full shadow ring-0 transition duration-300 ease-in-out data-[checked=false]:translate-x-0 data-[checked=true]:translate-x-5 data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch"/>
                 </button>
-                <label htmlFor={props.id || id} className="ml-3 inline-block text-sm" id={`${id}-label`}>
+                <label htmlFor={props.id || id} className="ml-switch-gap inline-block text-switch-label-text" id={`${id}-label`}>
                     <span className="font-medium text-foreground">{children}</span>
                 </label>
             </span>
-            <span className="mt-1 flex-1 whitespace-nowrap text-xs text-danger empty:mt-0 empty:hidden">{error}</span>
+            <span className="mt-switch-hint-mt flex-1 whitespace-nowrap text-switch-hint-text text-danger empty:mt-0 empty:hidden">{error}</span>
         </fieldset>);
 });

package/dist/src/components/form/task-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-list.d.ts","sourceRoot":"","sources":["../../../../src/components/form/task-list.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAErE,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,gCA2B5E,CAAC"}

package/dist/{components → src/components}/form/task-list.jsx

@@ -21,6 +21,6 @@ export const TaskList = (props) => {
         };
         container.addEventListener("change", handler);
         return () => container.removeEventListener("change", handler);
-    }, []);
+    }, [ref, animate]);
     return <fieldset {...props} data-component="task-list" ref={ref}/>;
 };

package/dist/src/components/form/textarea.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { FreeTextProps } from "./free-text";
+export type TextareaProps = FreeTextProps<"textarea", React.ComponentProps<"textarea">>;
+export declare const Textarea: React.FC<TextareaProps>;
+//# sourceMappingURL=textarea.d.ts.map

package/dist/src/components/form/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/form/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;AAExF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6B5C,CAAC"}

package/dist/src/components/form/textarea.jsx

@@ -0,0 +1,26 @@
+"use client";
+import { createFreeText } from "./free-text";
+export const Textarea = createFreeText("textarea", "textarea", { container: "w-full" }, (textarea) => {
+    const hasRows = textarea.hasAttribute("rows");
+    const computeMinHeight = () => {
+        if (!hasRows)
+            return textarea.offsetHeight;
+        const s = window.getComputedStyle(textarea);
+        return (textarea.rows * parseFloat(s.lineHeight) +
+            parseFloat(s.paddingTop) +
+            parseFloat(s.paddingBottom) +
+            parseFloat(s.borderTopWidth) +
+            parseFloat(s.borderBottomWidth));
+    };
+    const minHeight = computeMinHeight();
+    const adjustHeight = () => {
+        textarea.style.height = "0px";
+        textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight)}px`;
+    };
+    adjustHeight();
+    textarea.addEventListener("input", adjustHeight);
+    return () => {
+        textarea.removeEventListener("input", adjustHeight);
+        textarea.style.height = "";
+    };
+});

package/dist/src/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACzE,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,OAAO,EAAE,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/src/components/page-calendar/calendar-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-header.d.ts","sourceRoot":"","sources":["../../../../src/components/page-calendar/calendar-header.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,KAAK,mBAAmB,GAAG;IACvB,WAAW,EAAE,IAAI,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,cAAc,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,cAAc,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACnC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC3B,WAAW,EACX,WAAW,EACX,OAAO,EACP,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,UAAU,GACb,EAAE,mBAAmB,+BAuHrB"}

package/dist/{components → src/components}/page-calendar/calendar-header.jsx

@@ -34,34 +34,34 @@ export function CalendarHeader({ currentDate, currentView, filters, filterArea,
         });
     };
     const weekNum = getWeekNumber(currentDate);
-    return (<header className="flex flex-col gap-4">
-            <div className="flex items-center justify-between gap-4">
-                <div className="flex items-center gap-3">
-                    <div aria-hidden="true" className={`flex size-12 flex-col items-center justify-center overflow-hidden rounded-lg text-xs ${isDateToday ? "bg-primary text-primary-foreground" : "bg-card text-foreground"}`}>
+    return (<header className="flex flex-col gap-page-calendar-header-gap">
+            <div className="flex items-center justify-between gap-page-calendar-header-gap">
+                <div className="flex items-center gap-page-calendar-date-gap">
+                    <div aria-hidden="true" className={`rounded-page-calendar-badge-radius flex size-page-calendar-badge-size flex-col items-center justify-center overflow-hidden text-page-calendar-week-label-text ${isDateToday ? "bg-primary text-primary-foreground" : "bg-card text-foreground"}`}>
                         <span className="font-light uppercase leading-none">{formatMonthShort(currentDate, locale)}</span>
-                        <span className="text-xl font-medium leading-none">{formatDay(currentDate, locale)}</span>
+                        <span className="text-page-calendar-title-text font-medium leading-none">{formatDay(currentDate, locale)}</span>
                     </div>
                     <div>
-                        <h1 aria-live="polite" aria-atomic="true" className="text-xl font-bold leading-tight">
+                        <h1 aria-live="polite" aria-atomic="true" className="text-page-calendar-title-text font-bold leading-tight">
                             {formatMonthYear(currentDate, locale)}
                         </h1>
-                        <span className="text-xs text-muted-foreground">{t.pageCalendarWeekLabel(weekNum)}</span>
+                        <span className="text-page-calendar-week-label-text text-muted-foreground">{t.pageCalendarWeekLabel(weekNum)}</span>
                     </div>
                 </div>
-                <nav aria-label={t.pageCalendarNavigation} className="flex items-center gap-2">
-                    <div className="flex items-center gap-1">
+                <nav aria-label={t.pageCalendarNavigation} className="flex items-center gap-page-calendar-nav-gap">
+                    <div className="flex items-center gap-page-calendar-nav-btn-gap">
                         <Button size="small" title={t.pageCalendarPrevious} aria-label={t.pageCalendarPrevious} theme="ghost-muted" onClick={handlePrev}>
                             <CaretLeftIcon size={16}/>
                         </Button>
-                        <button type="button" aria-label={t.pageCalendarToday} onClick={() => setCurrentDate(new Date())} className="rounded-md px-3 py-1.5 text-sm transition-colors hover:bg-muted/50">
+                        <button type="button" aria-label={t.pageCalendarToday} onClick={() => setCurrentDate(new Date())} className="rounded-page-calendar-today-radius px-page-calendar-today-px py-page-calendar-today-py text-page-calendar-today-text transition-colors hover:bg-muted/50">
                             {t.pageCalendarToday}
                         </button>
                         <Button size="small" title={t.pageCalendarNext} aria-label={t.pageCalendarNext} theme="ghost-muted" onClick={handleNext}>
                             <CaretRightIcon size={16}/>
                         </Button>
                     </div>
-                    <div className="flex rounded-md">
-                        {VIEWS.map((v) => (<Button size="small" key={v.value} onClick={() => setCurrentView(v.value)} theme={currentView === v.value ? "primary" : "muted"} aria-pressed={currentView === v.value} className="rounded-none first:rounded-l-button last:rounded-r-button">
+                    <div className="rounded-page-calendar-view-switch-radius flex">
+                        {VIEWS.map((v) => (<Button size="small" key={v.value} onClick={() => setCurrentView(v.value)} theme={currentView === v.value ? "primary" : "muted"} aria-pressed={currentView === v.value} className="first:rounded-l-button last:rounded-r-button rounded-button-radius-squared">
                                 {v.label}
                             </Button>))}
                     </div>
@@ -72,9 +72,9 @@ export function CalendarHeader({ currentDate, currentView, filters, filterArea,
                 </nav>
             </div>
             {filterArea ??
-            (filters.length > 0 && (<div role="group" aria-label={t.pageCalendarFilter} className="flex flex-wrap items-center gap-1.5">
+            (filters.length > 0 && (<div role="group" aria-label={t.pageCalendarFilter} className="flex flex-wrap items-center gap-page-calendar-filter-gap">
                         <CalendarIcon size={14} className="text-muted-foreground" aria-hidden="true"/>
-                        <span className="mr-1 text-xs text-muted-foreground">{t.pageCalendarFilter}</span>
+                        <span className="mr-page-calendar-nav-mr text-page-calendar-filter-text text-muted-foreground">{t.pageCalendarFilter}</span>
                         {filters.map((filter) => (<Tag as="button" size="small" type="button" key={filter.id} theme={filter.theme} indicator={filter.enabled ? filter.theme : undefined} aria-pressed={filter.enabled} aria-label={`${filter.label}, ${filter.enabled ? t.pageCalendarFilterEnabled : t.pageCalendarFilterDisabled}`} onClick={() => onToggleFilter(filter.id)}>
                                 {filter.label}
                             </Tag>))}

package/dist/src/components/page-calendar/day-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"day-view.d.ts","sourceRoot":"","sources":["../../../../src/components/page-calendar/day-view.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAuB9E,KAAK,YAAY,CAAC,CAAC,SAAS,iBAAiB,IAAI;IAC7C,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC9C,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D,CAAC;AAEF,wBAAgB,OAAO,CAAC,CAAC,SAAS,iBAAiB,EAAE,EACjD,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,YAAY,GACf,EAAE,YAAY,CAAC,CAAC,CAAC,+BA4HjB"}

package/dist/{components → src/components}/page-calendar/day-view.jsx

@@ -31,7 +31,7 @@ export function DayView({ currentDate, onSlotClick, renderEvent, eventsByDate, o
         const isSelected = toDateKey(date) === toDateKey(currentDate);
         if (!hasEvents || isSelected)
             return null;
-        return <span className="absolute bottom-0.5 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-primary"/>;
+        return (<span className="absolute bottom-page-calendar-dot-bottom left-1/2 size-page-calendar-dot-size -translate-x-1/2 rounded-full bg-primary"/>);
     };
     const handleEventClick = (event) => {
         setSelectedEvent(event);
@@ -39,19 +39,19 @@ export function DayView({ currentDate, onSlotClick, renderEvent, eventsByDate, o
     };
     return (<div className="flex min-w-full flex-1">
             <div className="flex w-full flex-1 flex-col">
-                <div aria-label={formatFullDate(currentDate, locale)} className="flex flex-shrink-0 items-center gap-3 border-b border-border px-4 py-2">
-                    <span className={`inline-flex h-8 w-8 items-center justify-center rounded-full font-bold ${isToday(currentDate) ? "bg-primary text-primary-foreground" : "text-foreground"}`}>
+                <div aria-label={formatFullDate(currentDate, locale)} className="flex flex-shrink-0 items-center gap-page-calendar-day-header-gap border-b border-border px-page-calendar-day-header-px py-page-calendar-day-header-py">
+                    <span className={`inline-flex size-page-calendar-day-badge-size items-center justify-center rounded-full font-bold ${isToday(currentDate) ? "bg-primary text-primary-foreground" : "text-foreground"}`}>
                         {formatDay(currentDate, locale)}
                     </span>
                     <div>
                         <div className="font-semibold">{formatWeekdayLong(currentDate, locale)}</div>
-                        <div className="text-xs text-muted-foreground">{formatMonthYear(currentDate, locale)}</div>
+                        <div className="text-typography-xs text-muted-foreground">{formatMonthYear(currentDate, locale)}</div>
                     </div>
                 </div>
                 <div ref={scrollBodyRef} className="flex flex-1 items-start overflow-y-auto">
-                    <div className="w-[60px] flex-shrink-0">
+                    <div className="w-page-calendar-gutter-w flex-shrink-0">
                         {hours.map((hour) => (<div key={hour} className="relative" style={{ height: HOUR_HEIGHT }}>
-                                <span className="absolute -top-2.5 right-2 text-[10px] text-muted-foreground">
+                                <span className="absolute -top-2.5 right-2 text-page-calendar-hour-text text-muted-foreground">
                                     {hour === 0 ? "" : formatHourLabel(hour, locale)}
                                 </span>
                                 {hour === new Date().getHours() && <div ref={currentHourRef}/>}
@@ -61,31 +61,26 @@ export function DayView({ currentDate, onSlotClick, renderEvent, eventsByDate, o
                         {hours.map((hour) => {
             const slotDate = new Date(currentDate);
             slotDate.setHours(hour, 0, 0, 0);
-            return (<div key={hour} role="button" tabIndex={0} aria-label={formatHourLabel(hour, locale)} className="cursor-pointer border-b border-border/50 hover:bg-muted/20" style={{ height: HOUR_HEIGHT }} onClick={() => onSlotClick?.(slotDate)} onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        onSlotClick?.(slotDate);
-                    }
-                }}/>);
+            return (<button key={hour} type="button" aria-label={formatHourLabel(hour, locale)} className="w-full cursor-pointer border-b border-border/50 hover:bg-muted/20" style={{ height: HOUR_HEIGHT }} onClick={() => onSlotClick?.(slotDate)}/>);
         })}
-                        {computeEventColumns(events).map(({ event, columnIndex, columnCount }) => (<div key={event.id} className="absolute" style={{
+                        {computeEventColumns(events).map(({ event, columnIndex, columnCount }) => (<div key={event.id} role="presentation" className="absolute" style={{
                 top: getTopOffset(event),
                 height: HOUR_HEIGHT,
                 left: `calc(${(columnIndex / columnCount) * 100}% + 2px)`,
                 width: `calc(${100 / columnCount}% - 4px)`,
-            }} onClick={(e) => e.stopPropagation()}>
+            }} onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
                                 <EventPill event={event} onClick={() => handleEventClick(event)}/>
                             </div>))}
                     </div>
                 </div>
             </div>
-            <div className="flex flex-col overflow-y-auto border-l border-card-border px-4">
+            <div className="flex flex-col overflow-y-auto border-l border-card-border px-page-calendar-side-px">
                 <Calendar date={currentDate} markToday changeOnlyOnClick RenderOnDay={RenderOnDay} onChange={(d) => d && onDateChange(d)}/>
-                {selectedEvent && (<div className="flex flex-col gap-2 border-t p-3">
+                {selectedEvent && (<div className="flex flex-col gap-page-calendar-detail-gap border-t p-page-calendar-detail-p">
                         {renderEvent ? (renderEvent(selectedEvent)) : (<>
-                                <div className="truncate text-sm font-semibold">{selectedEvent.title}</div>
-                                <div className="text-xs text-muted-foreground">{formatFullDate(selectedEvent.date, locale)}</div>
-                                <div className="text-xs text-muted-foreground">{formatTime(selectedEvent.date, locale)}</div>
+                                <div className="text-typography-sm truncate font-semibold">{selectedEvent.title}</div>
+                                <div className="text-typography-xs text-muted-foreground">{formatFullDate(selectedEvent.date, locale)}</div>
+                                <div className="text-typography-xs text-muted-foreground">{formatTime(selectedEvent.date, locale)}</div>
                                 <Tag theme={selectedEvent.className ? "custom" : "primary"} size="small" className={`self-start${selectedEvent.className ? ` ${selectedEvent.className}` : ""}`}/>
                             </>)}
                     </div>)}

package/dist/src/components/page-calendar/event-pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-pill.d.ts","sourceRoot":"","sources":["../../../../src/components/page-calendar/event-pill.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAI3D,KAAK,cAAc,GAAG;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAe,EAAE,EAAE,cAAc,+BA0C5E"}

package/dist/{components → src/components}/page-calendar/event-pill.jsx

@@ -11,7 +11,7 @@ export function EventPill({ event, onClick, compact = false }) {
             height: "1.25rem",
             borderRadius: "0.25rem",
         },
-        className: css("w-full border-0 justify-start rounded text-xs truncate text-ellipsis overflow-hidden border leading-tight", event.className),
+        className: css("w-full border-0 justify-start rounded-page-calendar-pill-radius text-page-calendar-pill-text truncate text-ellipsis overflow-hidden border leading-tight", event.className),
     };
     if (compact) {
         return (<Button {...props} size="small" onClick={onClick} title={event.title} aria-label={t.pageCalendarEventAt(event.title, formatEventTime(event.date))} theme={event.className ? "raw" : "primary"}>
@@ -20,6 +20,6 @@ export function EventPill({ event, onClick, compact = false }) {
     }
     return (<Button {...props} size="small" onClick={onClick} title={event.title} aria-label={t.pageCalendarEventAt(event.title, formatEventTime(event.date))} theme={event.className ? "raw" : "primary"}>
             <div className="truncate font-medium">{event.title}</div>
-            <div className="text-xs opacity-60">{formatEventTime(event.date)}</div>
+            <div className="text-page-calendar-pill-text opacity-60">{formatEventTime(event.date)}</div>
         </Button>);
 }

package/dist/src/components/page-calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/page-calendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACrF,OAAO,EACH,SAAS,EACT,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,eAAe,EACf,SAAS,EACT,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,UAAU,EACV,aAAa,GAChB,MAAM,uBAAuB,CAAC"}

package/dist/src/components/page-calendar/month-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-view.d.ts","sourceRoot":"","sources":["../../../../src/components/page-calendar/month-view.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAK3D,KAAK,cAAc,GAAG;IAClB,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,WAAW,EAAE,IAAI,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC;IAC3C,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,cAAc,+BAkEtG"}