@g4rcez/components 4.1.3 → 5.0.0

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

@@ -9,15 +9,15 @@ const FloatItem = ({ item, context, setter, get, refs }) => (<FloatingPortal>
                 {item ? (<motion.div key="overlay" exit={{ opacity: 0 }} animate={{ opacity: 1 }} initial={{ opacity: 0 }} transition={{ type: "tween", duration: 0.15, ease: "easeOut" }} className="pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70"/>) : null}
                 {item ? (<FloatingOverlay key="card" lockScroll className="absolute inset-0 z-floating flex items-center justify-center">
                         <FloatingFocusManager visuallyHiddenDismiss modal closeOnFocusOut context={context}>
-                            <motion.div layout layoutId={`item-${item.id}`} initial={{ opacity: 0.6, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.98 }} className="relative flex h-min w-min min-w-xs flex-col gap-4 rounded-card border border-card-border bg-card-background p-6 py-4 pb-8 shadow-shadow-card" ref={refs.setFloating} {...get()}>
+                            <motion.div layout layoutId={`item-${item.id}`} initial={{ opacity: 0.6, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.98 }} className="relative flex h-min w-min min-w-xs flex-col gap-list-card-gap rounded-list-radius border border-card-border bg-card-background p-list-card-p py-list-card-py pb-list-card-pb shadow-shadow-card" ref={refs.setFloating} {...get()}>
                                 <nav className="absolute right-4 top-1 lg:right-2">
-                                    <button type="button" onClick={setter} className="p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger">
+                                    <button type="button" onClick={setter} className="p-list-close-p opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger">
                                         <XIcon />
                                     </button>
                                 </nav>
-                                <motion.header layout className="flex w-full flex-wrap items-center justify-between gap-2">
-                                    <h3 className="min-w-full text-balance text-2xl font-medium">{item.title}</h3>
-                                    <p className="text-sm leading-snug text-secondary">{item.description}</p>
+                                <motion.header layout className="flex w-full flex-wrap items-center justify-between gap-list-header-gap">
+                                    <h3 className="min-w-full text-balance text-list-title-text font-medium">{item.title}</h3>
+                                    <p className="text-typography-sm leading-snug text-secondary">{item.description}</p>
                                 </motion.header>
                                 <motion.div layout>{item.children}</motion.div>
                             </motion.div>
@@ -36,7 +36,11 @@ export const AnimatedList = (props) => {
     });
     const click = useClick(context);
     const role = useRole(context, { role: "dialog" });
-    const dismiss = useDismiss(context, { escapeKey: true, referencePress: true, outsidePress: true });
+    const dismiss = useDismiss(context, {
+        escapeKey: true,
+        referencePress: true,
+        outsidePress: true,
+    });
     const { getFloatingProps } = useInteractions([click, role, dismiss]);
     const clear = useCallback(() => {
         setSelected(null);
@@ -50,22 +54,22 @@ export const AnimatedList = (props) => {
             const innerId = `${id}-${index}`;
             const setter = () => setSelected({ ...item, id: innerId });
             const Leading = item.leading;
-            return (<motion.li layout key={innerId} layoutId={`item-${innerId}`} className={`border-b border-card-border py-2 last:border-transparent`}>
+            return (<motion.li layout key={innerId} layoutId={`item-${innerId}`} className={`border-b border-card-border py-list-item-py last:border-transparent`}>
                             <motion.div layoutId={`toast-${innerId}`} className="relative">
                                 <div className="relative flex items-start space-x-3">
                                     <Fragment>
                                         {item.avatar ? (<div>
-                                                <div className="relative px-1">
+                                                <div className="relative px-list-avatar-px">
                                                     <button onClick={setter} className="flex size-10 items-center justify-center ring-primary">
                                                         {item.avatar}
                                                     </button>
                                                 </div>
                                             </div>) : null}
-                                        <div className="min-w-0 flex-1 py-1 text-foreground">
-                                            <div className="flex flex-row flex-nowrap justify-between gap-4">
+                                        <div className="min-w-0 flex-1 py-list-body-py text-foreground">
+                                            <div className="flex flex-row flex-nowrap justify-between gap-list-item-gap">
                                                 <button onClick={setter} className="cursor-pointer text-left transition-all ease-out hover:text-primary">
                                                     <h3>{item.title}</h3>
-                                                    <p className="text-sm leading-snug text-secondary">{item.description}</p>
+                                                    <p className="text-typography-sm leading-snug text-secondary">{item.description}</p>
                                                 </button>
                                                 {Leading ? <Leading open={setter}/> : null}
                                             </div>

package/dist/{components → src/components}/display/notifications.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import { type PropsWithChildren } from "react";
 import { Label } from "../../types";
 declare const variants: (props?: ({
-    theme?: "info" | "warn" | "muted" | "danger" | "success" | "secondary" | "default" | null | undefined;
+    theme?: "warn" | "secondary" | "info" | "danger" | "success" | "muted" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type NotificationOptions = Partial<{
     id: string;

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

@@ -0,0 +1 @@
+{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../../src/components/display/notifications.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAiB,KAAK,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAG/F,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,QAAQ;;8EAgBb,CAAC;AAYF,KAAK,mBAAmB,GAAG,OAAO,CAAC;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;CACjD,CAAC,CAAC;AAQH,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEvE,KAAK,eAAe,GAAG,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,mBAAmB,KAAK,sBAAsB,CAAC;AAMlG,eAAO,MAAM,eAAe,uBAAwC,CAAC;AAkDrE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AA0F1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAO,EAAE,OAAc,EAAE,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,+BAMxG"}

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

@@ -6,7 +6,7 @@ import { AnimatePresence, motion } from "motion/react";
 import { createContext, useCallback, useContext, useRef } from "react";
 import { useHover } from "../../hooks/use-hover";
 import { css } from "../../lib/dom";
-const variants = cva("shadow-notification relative isolate z-tooltip flex w-full flex-col overflow-hidden rounded-xl border bg-card-background text-sm backdrop-blur-md transition-all duration-300", {
+const variants = cva("shadow-notification text-typography-sm relative isolate z-tooltip flex w-full flex-col overflow-hidden rounded-notification-radius border bg-card-background backdrop-blur-md transition-all duration-300", {
     variants: {
         theme: {
             default: "border-card-border text-foreground shadow-black/5",
@@ -45,18 +45,18 @@ function Notification(props) {
             damping: 25,
             stiffness: 300,
         }} className="pointer-events-auto w-full list-none">
-                <Base.Content className={css(className, "shadow-lg")}>
-                    <div className="flex items-start gap-3 p-4">
+                <Base.Content className={className}>
+                    <div className="flex items-start gap-notification-gap p-notification-p">
                         <div className={css("mt-0.5 shrink-0 opacity-80", loading && "animate-spin")}>
                             <Icon className="size-4"/>
                         </div>
 
-                        <div className="flex flex-1 flex-col gap-1 overflow-hidden">
+                        <div className="flex flex-1 flex-col gap-notification-inner-gap overflow-hidden">
                             {props.toast.title ? <Base.Title className="select-text truncate font-semibold leading-tight tracking-tight"/> : null}
-                            <Base.Description className="line-clamp-2 select-text text-xs font-medium leading-relaxed opacity-90"/>
+                            <Base.Description className="line-clamp-2 select-text text-typography-xs font-medium leading-relaxed opacity-90"/>
                         </div>
 
-                        {closable && !loading ? (<Base.Close className="-mr-1 -mt-1 shrink-0 rounded-lg p-1.5 text-foreground/40 transition hover:bg-foreground/10 hover:text-foreground">
+                        {closable && !loading ? (<Base.Close className="rounded-notification-close-radius -mr-1 -mt-1 shrink-0 p-notification-close-p text-foreground/40 transition hover:bg-foreground/10 hover:text-foreground">
                                 <XIcon className="size-3.5"/>
                             </Base.Close>) : null}
                     </div>
@@ -71,12 +71,12 @@ function NotificationsViewport({ max = 5 }) {
     const allToasts = max ? toastManager.toasts.slice(0, max) : toastManager.toasts;
     const visibleToasts = hover ? allToasts : allToasts.slice(0, 3);
     const hiddenCount = allToasts.length - visibleToasts.length;
-    return (<Base.Viewport ref={ref} className="pointer-events-none fixed left-1/2 top-6 z-[100] flex w-full max-w-[380px] -translate-x-1/2 flex-col gap-3 overflow-visible outline-none">
+    return (<Base.Viewport ref={ref} className="pointer-events-none fixed left-1/2 top-notification-list-top z-floating flex w-full max-w-notification-list-max-w -translate-x-1/2 flex-col gap-notification-list-gap overflow-visible outline-none">
             <AnimatePresence mode="popLayout" initial={false}>
                 {visibleToasts.map((toast) => (<Notification key={toast.id} toast={toast}/>))}
             </AnimatePresence>
 
-            {!hover && hiddenCount > 0 && (<motion.div layout initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="pointer-events-auto cursor-default self-center rounded-full border border-card-border bg-card-background/80 px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-foreground/50 shadow-sm backdrop-blur transition-all hover:bg-card-background hover:text-foreground/80">
+            {!hover && hiddenCount > 0 && (<motion.div layout initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="pointer-events-auto cursor-default self-center rounded-full border border-card-border bg-card-background/80 px-notification-badge-px py-notification-badge-py text-notification-badge-text font-bold uppercase tracking-wider text-foreground/50 shadow-notification backdrop-blur transition-all hover:bg-card-background hover:text-foreground/80">
                     +{hiddenCount} more
                 </motion.div>)}
         </Base.Viewport>);
@@ -87,7 +87,11 @@ function NotificationsInner({ children, max = 5 }) {
         toastManager.toasts.forEach((t) => toastManager.close(t.id));
     }, [toastManager]);
     const notify = useCallback((description, args) => {
-        const data = { theme: args?.theme, closable: args?.closable, loading: args?.loading };
+        const data = {
+            theme: args?.theme,
+            closable: args?.closable,
+            loading: args?.loading,
+        };
         if (args?.id) {
             const existing = toastManager.toasts.find((t) => t.id === args.id);
             if (existing) {

package/dist/{components → src/components}/display/progress.d.ts

@@ -1,9 +1,12 @@
 import { PropsWithoutRef } from "react";
 import { Label } from "../../types";
 type ProgressProps = {
+    min?: number;
     max?: number;
-    label?: Label;
+    value?: number;
+    /** @deprecated use value */
     percent?: number;
+    label?: Label;
     className?: string;
     container?: string;
     textClassName?: string;

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../../src/components/display/progress.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,aAAa,GAAG;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAKF,eAAO,MAAM,QAAQ,GAAI,OAAO,eAAe,CAAC,aAAa,CAAC,gCAuC7D,CAAC"}

package/dist/src/components/display/progress.jsx

@@ -0,0 +1,21 @@
+"use client";
+import { Is } from "sidekicker";
+import { Progress as RadixProgress } from "@base-ui/react/progress";
+import { css } from "../../lib/dom";
+const clamp = (n, min, max) => Math.min(Math.max(n, min), max);
+export const Progress = (props) => {
+    const min = props.min ?? 0;
+    const max = props.max ?? 100;
+    const range = max - min;
+    const rawValue = props.value ?? props.percent;
+    const hasValue = Is.number(rawValue) && range > 0;
+    const percent = hasValue
+        ? clamp(((rawValue - min) / range) * 100, 0, 100)
+        : null;
+    return (<RadixProgress.Root min={min} max={max} value={hasValue ? rawValue : null} style={{ transform: "translateZ(0)" }} className={css("relative h-progress-track-h w-full overflow-hidden rounded-progress-radius bg-background", props.container)}>
+      <RadixProgress.Indicator className={css("h-full bg-primary transition-[width] duration-500 ease-in-out", props.className)}/>
+      {percent !== null ? (<p className={css("absolute inset-0 flex w-full items-center justify-center font-semibold tabular-nums text-primary-foreground", props.textClassName)}>
+          {props.label ? props.label : `${Math.round(percent)} %`}
+        </p>) : null}
+    </RadixProgress.Root>);
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"shortcut.d.ts","sourceRoot":"","sources":["../../../../src/components/display/shortcut.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,QAAQ,GAAI,OAAO;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,gCAehD,CAAC"}

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

@@ -11,7 +11,7 @@ const remap = (x) => {
 };
 export const Shortcut = (props) => {
     const p = props.value.trim().split("+");
-    return (<span className="flex items-center gap-1 text-sm">
+    return (<span className="flex items-center gap-shortcut-gap text-shortcut-text">
             {p.map((x, i) => {
             const isLast = p.length - 1 === i;
             return (<Fragment key={`${props.value}-${x}-key-${i}`}>

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/display/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAU,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAKvE,eAAO,MAAM,YAAY,mBAOxB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,WAAW,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,sBAY9F,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,sBAavE,CAAC"}

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

@@ -2,10 +2,10 @@ import React, { useRef } from "react";
 import { useTranslations } from "../../hooks/use-translations";
 import { css } from "../../lib/dom";
 import { Polymorph } from "../core/polymorph";
-export const SkeletonCell = (<div role="status" aria-busy="true" aria-label="Loading content" className="h-6 w-10/12 animate-pulse rounded bg-muted"/>);
+export const SkeletonCell = (<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"/>);
 export const Skeleton = (props) => {
     const t = useTranslations();
-    return (<Polymorph {...props} role="status" aria-busy="true" aria-label={t.skeletonLoading} as={props.as || "span"} className={css("block h-8 w-32 animate-pulse rounded bg-muted", props.className)}/>);
+    return (<Polymorph {...props} role="status" aria-busy="true" aria-label={t.skeletonLoading} as={props.as || "span"} className={css("block h-skeleton-height w-skeleton-width animate-pulse rounded-skeleton-radius bg-muted", props.className)}/>);
 };
 export const SkeletonList = (props) => {
     const t = useTranslations();
@@ -13,7 +13,7 @@ export const SkeletonList = (props) => {
         const rand = Math.max(100, Math.random() * 99);
         return <Skeleton key={`skeleton-${rand}-${i}`} style={{ width: `${rand}%` }} as="li"/>;
     }));
-    return (<ul role="status" aria-busy="true" aria-label={t.skeletonLoading} className={css("flex flex-col gap-6", props.className)}>
+    return (<ul role="status" aria-busy="true" aria-label={t.skeletonLoading} className={css("flex flex-col gap-skeleton-list-gap", props.className)}>
             {items.current}
         </ul>);
 };

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/display/spinner.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,GAAI,OAAO;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,gCAapD,CAAC;AAEF,eAAO,MAAM,OAAO,mCAMnB,CAAC"}

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

@@ -2,10 +2,10 @@ import { useTranslations } from "../../hooks/use-translations";
 import { css } from "../../lib/dom";
 export const Spinner = (props) => {
     const t = useTranslations();
-    return (<span role="status" aria-live="polite" aria-label={t.spinnerLoading} className={css("box-border inline-block aspect-square size-12 animate-spin rounded-full border-4 border-background border-b-primary", props.className)}/>);
+    return (<span role="status" aria-live="polite" aria-label={t.spinnerLoading} className={css("box-border inline-block aspect-square size-spinner-size animate-spin rounded-full border-spinner-border border-background border-b-primary", props.className)}/>);
 };
 export const Loading = () => {
-    return (<div className="flex h-full w-full items-center justify-center p-12">
+    return (<div className="flex h-full w-full items-center justify-center p-spinner-container-p">
             <Spinner />
         </div>);
 };

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

@@ -0,0 +1 @@
+{"version":3,"file":"stats.d.ts","sourceRoot":"","sources":["../../../../src/components/display/stats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,MAAM,UAAU,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,sBAe/D,CAAC"}

package/dist/src/components/display/stats.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { css } from "../../lib/dom";
+export const Stats = (props) => {
+    return (<div className="divide-y divide-card-border overflow-hidden rounded-stats-radius border border-card-border bg-card-background shadow-shadow-card">
+            <header className="flex items-stretch gap-stats-gap">
+                <div className={css("flex shrink-0 items-center justify-center bg-primary p-stats-icon-p", props.iconContainer)}>
+                    <props.Icon className="aspect-square size-stats-icon-size text-primary-foreground"/>
+                </div>
+                <div className="flex flex-col justify-center gap-stats-inner-gap py-stats-p pr-stats-p">
+                    <h3 className="text-typography-base leading-none">{props.title}</h3>
+                    <p className="text-stats-value-text font-semibold">{props.children}</p>
+                </div>
+            </header>
+            {props.footer ? <footer className="px-stats-footer-px py-stats-footer-py">{props.footer}</footer> : null}
+        </div>);
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../../src/components/display/step.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAA2C,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAEnI,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAUpC,KAAK,gBAAgB,GAAG;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAoCF,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAgCF,eAAO,MAAM,cAAc,+BAAgC,CAAC;AAE5D,eAAO,MAAM,IAAI,GAAI,gEAAgE,SAAS,sBA6F7F,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,sBA0BrF,CAAC"}

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

@@ -3,9 +3,18 @@ import { motion } from "motion/react";
 import React, { createContext, Fragment, useContext, useEffect, useRef, useState } from "react";
 import { useColorParser } from "../../hooks/use-color-parser";
 const PROGRESS_BAR_DURATION = 0.3;
-const transition = { duration: PROGRESS_BAR_DURATION, type: "tween", ease: "easeInOut" };
+const transition = {
+    duration: PROGRESS_BAR_DURATION,
+    type: "tween",
+    ease: "easeInOut",
+};
 const StepContext = createContext(null);
-const iconTransitions = { delay: 0.2, duration: 0.3, type: "tween", ease: "easeOut" };
+const iconTransitions = {
+    delay: 0.2,
+    duration: 0.3,
+    type: "tween",
+    ease: "easeOut",
+};
 const states = {
     initial: { pathLength: 0, opacity: 0 },
     animate: { pathLength: 1, opacity: 1 },
@@ -21,7 +30,12 @@ const variants = {
     complete: { scale: 1.25 },
     active: { scale: 1, transition: { delay: 0, duration: 0.3 } },
 };
-const transitions = { duration: 0.6, delay: 0.2, type: "tween", ease: "circOut" };
+const transitions = {
+    duration: 0.6,
+    delay: 0.2,
+    type: "tween",
+    ease: "circOut",
+};
 const getCurrentStatus = (step, currentStep, status) => {
     if (status === "error")
         return "error";
@@ -65,12 +79,12 @@ export const Step = ({ step, currentStep, status, title, titleClassName, ...prop
         return () => clearTimeout(timer);
     }, [currentStep, context, step]);
     const innerStatus = getCurrentStatus(step, visualCurrentStep, status);
-    const widthPerStep = context?.steps ? 100 / context?.steps : undefined;
+    const _widthPerStep = context?.steps ? 100 / context?.steps : undefined;
     return (<Fragment>
-            <div className={`hidden h-[2px] w-full bg-card-border first:hidden xl:block ${innerStatus === "active" || innerStatus === "complete" ? "bg-success" : ""}`}/>
+            <div className={`hidden h-step-connector-h w-full bg-card-border first:hidden xl:block ${innerStatus === "active" || innerStatus === "complete" ? "bg-success" : ""}`}/>
             <motion.button {...props} type="button" data-step={step} animate={innerStatus} className="relative flex w-auto items-center justify-center text-center">
                 <motion.div variants={variants} transition={transitions} className={`absolute inset-0 hidden rounded-full text-center xl:block ${innerStatus === "error" ? "bg-danger" : ""}`}/>
-                <motion.div initial={false} animate={innerStatus} transition={transition} className="relative flex aspect-square size-10 items-center justify-center rounded-full font-medium" variants={{
+                <motion.div initial={false} animate={innerStatus} transition={transition} className="relative flex aspect-square size-step-size items-center justify-center rounded-full font-medium" variants={{
             error: {
                 color: parser("var(--danger-foreground)"),
                 borderColor: parser("var(--danger-hover)"),
@@ -96,12 +110,12 @@ export const Step = ({ step, currentStep, status, title, titleClassName, ...prop
             },
         }}>
                     <div className="flex items-center justify-center">
-                        {innerStatus === "complete" ? (<CheckIcon className="size-6 text-primary-foreground"/>) : innerStatus === "error" ? (<ErrorIcon className="size-6 text-danger-foreground"/>) : (<Fragment>
+                        {innerStatus === "complete" ? (<CheckIcon className="size-step-icon-size text-primary-foreground"/>) : innerStatus === "error" ? (<ErrorIcon className="size-step-icon-size text-danger-foreground"/>) : (<Fragment>
                                 <span>{step}</span>
                             </Fragment>)}
                     </div>
                 </motion.div>
-                <header className="flex flex-col items-start justify-start px-2">
+                <header className="flex flex-col items-start justify-start px-step-label-px">
                     <h3 className={`flex h-full items-center whitespace-nowrap font-normal ${titleClassName}`}>{title}</h3>
                 </header>
             </motion.button>
@@ -124,7 +138,7 @@ export const Steps = (props) => {
         steps: React.Children.count(props.children),
     };
     return (<StepContext.Provider value={contextValue}>
-            <div className="relative flex w-full flex-col items-start justify-center gap-4 lg:flex-row lg:items-center lg:justify-between">
+            <div className="relative flex w-full flex-col items-start justify-center gap-step-gap lg:flex-row lg:items-center lg:justify-between">
                 {props.children}
             </div>
         </StepContext.Provider>);

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAiB,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAM/F,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AA2CF,eAAO,MAAM,IAAI,GAAI,OAAO,iBAAiB,CAAC,SAAS,CAAC,sBAiGvD,CAAC;AAIF,KAAK,cAAc,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzD,MAAM,MAAM,QAAQ,GAAG,cAAc,GACjC,CACM;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,GACpC;IACI,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAC9B,CACN,CAAC;AAEN,eAAO,MAAM,GAAG,GAAI,OAAO,iBAAiB,CAAC,QAAQ,CAAC,6BAQrD,CAAC"}

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

@@ -94,15 +94,15 @@ export const Tabs = (props) => {
         }
     };
     return (<Context.Provider value={active}>
-            <Card className={props.className} container={css("pt-0 max-w-full w-full min-w-0", props.container)} header={<header className="relative mb-2 overflow-x-auto">
-                        <div className="absolute bottom-0 h-[1px] w-full bg-card-border"/>
+            <Card className={props.className} container={css("pt-0 max-w-full w-full min-w-0", props.container)} header={<header className="relative mb-tabs-header-mb overflow-x-auto">
+                        <div className="absolute bottom-0 h-tabs-divider-h w-full bg-card-border"/>
                         <nav className="min-w-0">
                             <ul role="tablist" onKeyDown={onKeyDown} ref={ref} className="flex w-0 min-w-full flex-1 justify-start overflow-x-auto">
                                 {items.map((x) => {
                 const inner = x.props;
                 const current = active === inner.id;
                 return (<li data-id={inner.id} data-active={current} key={`tab-header-${inner.id}`} className={css("relative w-fit border-b border-transparent transition-all", current ? "border-primary font-medium text-primary" : "", inner.disabled ? "aria-disabled:text-disabled" : "")}>
-                                            <Polymorph role="tab" as="button" type="button" data-id={inner.id} id={`${inner.id}-tab`} aria-selected={current} disabled={inner.disabled} tabIndex={current ? 0 : -1} aria-controls={`${inner.id}-panel`} onClick={inner.disabled ? undefined : onClick} className="block w-full whitespace-nowrap px-10 py-4 disabled:cursor-not-allowed">
+                                            <Polymorph role="tab" as="button" type="button" data-id={inner.id} id={`${inner.id}-tab`} aria-selected={current} disabled={inner.disabled} tabIndex={current ? 0 : -1} aria-controls={`${inner.id}-panel`} onClick={inner.disabled ? undefined : onClick} className="block w-full whitespace-nowrap px-tabs-item-px py-tabs-item-py disabled:cursor-not-allowed">
                                                 {inner.title}
                                             </Polymorph>
                                         </li>);

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../../src/components/display/timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,eAAO,MAAM,YAAY;YAAW,iBAAiB;gBAUJ,iBAAiB,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;SAc9C,CAAC,SAAS,WAAW,qBAAqB,iBAAiB,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;UAQtF,CAAC,SAAS,WAAW,oBAAoB,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC;CAxBnH,CAAC;AAgCF,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,sBAIhD,CAAC"}

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

@@ -1,12 +1,12 @@
 import React from "react";
 import { css } from "../../lib/dom";
 import { Polymorph } from "../core/polymorph";
-export const TimelineItem = (props) => (<li data-component="timeline-item" className="relative pb-12" role="listitem">
-        <span aria-hidden="true" className="absolute left-6 top-8 -ml-px h-full w-0.5 bg-card-border"/>
+export const TimelineItem = (props) => (<li data-component="timeline-item" className="relative pb-timeline-item-pb" role="listitem">
+        <span aria-hidden="true" className="absolute left-timeline-connector-left top-timeline-connector-top -ml-px h-full w-timeline-connector-w bg-card-border"/>
         <div className="relative flex items-stretch justify-start space-x-3">{props.children}</div>
     </li>);
 TimelineItem.Icon = function TimelineIcon(props) {
-    return (<header {...props} className={css("flex size-12 items-center justify-center rounded-full bg-primary p-2 text-warn-foreground", props.className)}>
+    return (<header {...props} className={css("flex size-timeline-icon-size items-center justify-center rounded-full bg-primary p-timeline-icon-p text-warn-foreground", props.className)}>
             {props.children}
         </header>);
 };
@@ -16,7 +16,7 @@ TimelineItem.Body = function TimelineItemBody(props) {
         </Polymorph>);
 };
 TimelineItem.Right = function TimelineItemRight(props) {
-    return (<footer className="flex gap-6 self-stretch px-4 align-baseline">
+    return (<footer className="flex gap-timeline-right-gap self-stretch px-timeline-right-px align-baseline">
             <Polymorph {...props} type="button"/>
         </footer>);
 };

package/dist/src/components/floating/command-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/command-palette.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC9E,OAAO,KAAmE,MAAM,OAAO,CAAC;AAQxF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAKpC,KAAK,SAAS,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAElC,KAAK,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG;IACvD,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,GAAG,OAAO,CAAC;CACvD,CAAC;AAEF,KAAK,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC;AAEpD,KAAK,mBAAmB,GAAG,WAAW,CAClC,UAAU,EACV;IACI,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE;QACX,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QACjC,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;QAClC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC;KACjE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B,CACJ,CAAC;AAEF,KAAK,gBAAgB,GAAG,WAAW,CAAC,OAAO,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAAC,CAAC;AAEzF,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,mBAAmB,CAAC;AAiDtE,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,OAAO,EAAE,gBAAgB,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;CAChE,CAAC;AAmCF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAiNxD,CAAC"}

package/dist/{components → src/components}/floating/command-palette.jsx

@@ -1,5 +1,5 @@
 "use client";
-import { autoUpdate, useFloating, useInteractions, useListNavigation } from "@floating-ui/react";
+import { autoUpdate, useFloating, useInteractions, useListNavigation, useRole } from "@floating-ui/react";
 import { FunnelIcon } from "@phosphor-icons/react";
 import React, { forwardRef, Fragment, useEffect, useId, useRef, useState } from "react";
 import { Is } from "sidekicker";
@@ -12,7 +12,7 @@ import { fzf } from "../../lib/fzf";
 import { Shortcut } from "../display/shortcut";
 import { SkeletonCell } from "../display/skeleton";
 import { Modal } from "./modal";
-const Group = (props) => (<span className="flex h-full items-center text-left text-sm font-medium text-secondary">
+const Group = (props) => (<span className="text-typography-sm flex h-full items-center text-left font-medium text-secondary">
         {isReactFC(props.item.title) ? <props.item.title text={props.text}/> : props.item.title}
     </span>);
 const Item = forwardRef((props, ref) => {
@@ -20,13 +20,13 @@ const Item = forwardRef((props, ref) => {
     const active = props.active;
     const item = props.item;
     if (item.type === "group")
-        return (<div id={id} className="h-10 px-2 pb-1 pt-2">
+        return (<div id={id} className="h-command-row-h px-command-group-px pb-command-group-pb pt-command-group-pt">
                 <Group text={props.text} item={item}/>
             </div>);
     if (item.type !== "shortcut")
         return <Fragment />;
-    return (<button {...props} id={id} ref={ref} role="option" type="button" aria-selected={active} data-component="command-palette-item" className={css("flex h-10 items-center justify-between rounded-lg p-2 hover:bg-floating-hover", active ? "bg-floating-hover" : "")}>
-            <span className="flex items-center gap-2">
+    return (<button {...props} id={id} ref={ref} role="option" type="button" aria-selected={active} data-component="command-palette-item" className={css("flex h-command-row-h items-center justify-between rounded-command-radius p-command-item-p hover:bg-floating-hover", active ? "bg-floating-hover" : "")}>
+            <span className="flex items-center gap-command-item-gap">
                 {item.Icon ? item.Icon : null}
                 <span>{isReactFC(item.title) ? <item.title text={props.text}/> : item.title}</span>
             </span>
@@ -41,7 +41,10 @@ const getFuzzyData = (commands, value) => {
         { key: "shortcut", value },
         { key: "hint", value },
     ];
-    const normalize = commands.map((x) => ({ ...x, title: Is.function(x.title) ? x.title({ text: value }) : x.title }));
+    const normalize = commands.map((x) => ({
+        ...x,
+        title: Is.function(x.title) ? x.title({ text: value }) : x.title,
+    }));
     const target = normalize.reduce((acc, x) => {
         const enabled = Is.function(x.enabled) ? x.enabled({ text: value }) : (x.enabled ?? true);
         if (enabled)
@@ -114,7 +117,10 @@ export const CommandPalette = (props) => {
         onNavigate: (n) => {
             if (Is.number(n)) {
                 if (!isChildVisible(scrollContainerRef.current, listRef.current[n]))
-                    listRef.current[n]?.scrollIntoView({ block: "start", inline: "start" });
+                    listRef.current[n]?.scrollIntoView({
+                        block: "start",
+                        inline: "start",
+                    });
             }
             setActiveIndex((prev) => {
                 if (Is.number(n))
@@ -123,7 +129,8 @@ export const CommandPalette = (props) => {
             });
         },
     });
-    const { getItemProps, getReferenceProps, getFloatingProps } = useInteractions([listNav]);
+    const listRole = useRole(root.context, { role: "listbox" });
+    const { getItemProps, getReferenceProps, getFloatingProps } = useInteractions([listNav, listRole]);
     useEffect(() => {
         const combi = new CombiKeys();
         combi.add(bindKey, () => props.onChangeVisibility?.(true));
@@ -143,8 +150,8 @@ export const CommandPalette = (props) => {
     const Icon = props.Icon ?? FunnelIcon;
     return (<Fragment>
             <Modal {...getFloatingProps()} animated={false} closable={false} open={props.open} overlayClickClose ariaTitle="Command palette" bodyClassName="px-0 py-0 pt-0" data-component="command-palette" onChange={props.onChangeVisibility} className="container relative overflow-clip py-0 md:max-w-screen-sm lg:max-w-screen-md">
-                <header className="sticky top-0 isolate z-floating flex h-12 w-full items-center overflow-clip border-b border-floating-border bg-floating-background">
-                    <div className="flex size-10 items-center justify-center">
+                <header className="sticky top-0 isolate z-floating flex h-command-header-h w-full items-center overflow-clip border-b border-floating-border bg-floating-background">
+                    <div className="flex size-command-icon-size items-center justify-center">
                         {props.Icon ? <Icon Default={FunnelIcon} text={text} size={16}/> : <FunnelIcon size={16}/>}
                     </div>
                     <input {...getReferenceProps({
@@ -155,24 +162,36 @@ export const CommandPalette = (props) => {
             if (key === "Enter") {
                 if (item) {
                     if (item.type === "shortcut")
-                        item.action({ event: e, text: text, setOpen: props.onChangeVisibility, setText });
+                        item.action({
+                            event: e,
+                            text: text,
+                            setOpen: props.onChangeVisibility,
+                            setText,
+                        });
                 }
                 else {
                     const item = findFirstClickable(fuzzy);
                     if (item?.type === "shortcut")
-                        item.action({ event: e, text: text, setOpen: props.onChangeVisibility, setText });
+                        item.action({
+                            event: e,
+                            text: text,
+                            setOpen: props.onChangeVisibility,
+                            setText,
+                        });
                 }
             }
         },
-    })} autoFocus value={text} data-combikeysbypass="true" placeholder="Search for..." onChange={(e) => setText(e.target.value)} className="h-12 w-full items-center bg-transparent px-2 py-2 pb-2 text-left text-lg outline-none"/>
+    })} value={text} data-combikeysbypass="true" placeholder="Search for..." onChange={(e) => setText(e.target.value)} className="text-typography-lg h-command-header-h w-full items-center bg-transparent px-command-input-px py-command-input-py pb-command-input-py text-left outline-none"/>
                 </header>
-                {props.loading ? (<ul role="listbox" data-component="command-palette-list" className="my-2 flex max-h-96 w-full origin-[top_center] flex-col gap-1 overflow-y-auto px-2">
-                        <div className="h-10 px-2 pb-1 pt-2">{translations.commandPaletteLoading}</div>
-                        {loadingSkeleton.map((_, i) => (<li key={`${id}-${i}-skeleton-index`} className={css("flex h-10 items-center justify-between rounded-lg p-2 hover:bg-primary hover:text-primary-foreground")}>
+                {props.loading ? (<div data-component="command-palette-list" className="my-command-list-my flex max-h-command-list-max-h w-full origin-[top_center] flex-col gap-command-list-gap overflow-y-auto px-command-group-px">
+                        <div className="h-command-row-h px-command-group-px pb-command-group-pb pt-command-group-pt">
+                            {translations.commandPaletteLoading}
+                        </div>
+                        {loadingSkeleton.map((_, i) => (<div key={`${id}-${i}-skeleton-index`} className={css("flex h-command-row-h items-center justify-between rounded-command-radius p-command-item-p hover:bg-primary hover:text-primary-foreground")}>
                                 {SkeletonCell}
-                            </li>))}
-                    </ul>) : (<div className="flex min-w-full flex-row flex-nowrap" data-component="command-palette-container">
-                        <ul role="listbox" ref={scrollContainerRef} data-component="command-palette-list" className="my-2 flex h-fit max-h-96 w-full origin-[top_center] flex-col gap-1 overflow-y-auto px-2">
+                            </div>))}
+                    </div>) : (<div className="flex min-w-full flex-row flex-nowrap" data-component="command-palette-container">
+                        <div ref={scrollContainerRef} data-component="command-palette-list" className="my-command-list-my flex h-fit max-h-command-list-max-h w-full origin-[top_center] flex-col gap-command-list-gap overflow-y-auto px-command-list-px">
                             {displayItems.map((item, index) => (<Item {...getItemProps({
                 onMouseEnter: () => setActiveIndex(index),
                 ref(node) {
@@ -182,16 +201,23 @@ export const CommandPalette = (props) => {
                     e.preventDefault();
                     props.onChangeVisibility(false);
                     if (item.type === "shortcut")
-                        item.action({ event: e, text: text, setOpen: props.onChangeVisibility, setText });
+                        item.action({
+                            event: e,
+                            text: text,
+                            setOpen: props.onChangeVisibility,
+                            setText,
+                        });
                 },
             })} item={item} text={text} active={activeIndex === index} key={`${id}-${item.type}-${index}`}/>))}
-                            {displayItems.length === 1 ? (<div className={css("flex items-center justify-between rounded-lg p-2 text-secondary")}>
+                            {displayItems.length === 1 ? (<div className={css("flex items-center justify-between rounded-command-radius p-command-item-p text-secondary")}>
                                     {translations.commandPaletteEmpty ?? props.emptyMessage}
                                 </div>) : null}
-                        </ul>
+                        </div>
                         {props.Preview && Is.number(activeIndex) ? <props.Preview command={displayItems[activeIndex]} text={text}/> : null}
                     </div>)}
-                {props.footer ? (<footer className="flex h-8 items-center rounded-b-lg border-t border-floating-border p-2">{props.footer}</footer>) : null}
+                {props.footer ? (<footer className="flex h-command-footer-h items-center rounded-b-command-radius border-t border-floating-border p-command-footer-p">
+                        {props.footer}
+                    </footer>) : null}
             </Modal>
         </Fragment>);
 };

package/dist/src/components/floating/dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/dropdown.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAA+C,MAAM,OAAO,CAAC;AAExG,KAAK,aAAa,GAAG;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,aAAa,CAAC,sBA4E/D,CAAC"}

package/dist/{components → src/components}/floating/dropdown.jsx

@@ -14,7 +14,7 @@ export const Dropdown = (props) => {
             padding: 5,
             element: arrowRef,
         }),
-    ], [props.arrow]);
+    ], []);
     const { refs, floatingStyles, context } = useFloating({
         open,
         middleware,
@@ -41,10 +41,10 @@ export const Dropdown = (props) => {
             </button>
             {open && (<FloatingPortal preserveTabOrder id={`${headingId}-portal`}>
                     <FloatingFocusManager guards restoreFocus={true} returnFocus={true} visuallyHiddenDismiss context={context} modal={false}>
-                        <div className="relative isolate z-floating rounded-lg border border-floating-border bg-floating-background p-4 shadow-shadow-floating" ref={refs.setFloating} aria-labelledby={headingId} style={floatingStyles} {...getFloatingProps()}>
+                        <div className="relative isolate z-floating rounded-dropdown-radius border border-floating-border bg-floating-background p-dropdown-p shadow-shadow-floating" ref={refs.setFloating} aria-labelledby={headingId} style={floatingStyles} {...getFloatingProps()}>
                             <FloatingArrow ref={arrowRef} context={context} strokeWidth={0.1} className="fill-floating-background stroke-floating-border"/>
-                            <header className="mb-2">
-                                <h3 id={headingId} className="text-left text-2xl font-medium leading-snug tracking-wide">
+                            <header className="mb-dropdown-header-mb">
+                                <h3 id={headingId} className="text-left text-typography-2xl font-medium leading-snug tracking-wide">
                                     {props.title}
                                 </h3>
                             </header>

package/dist/src/components/floating/expand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/expand.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,MAAM,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAsC,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAU,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,WAAW,CAAC,OAAO,MAAM,CAAC,MAAM,CAAC,EACjC;IACI,OAAO,EAAE,KAAK,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,OAAO,iBAAiB,CAAC,WAAW,CAAC,gCAmD3D,CAAC"}

package/dist/src/components/floating/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/menu.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAkB,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,KAA2E,MAAM,OAAO,CAAC;AA6BhG,MAAM,MAAM,SAAS,GAAG,OAAO,CAC3B;IACI,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,KAAK,CAAC,WAAW,CAAC;CACxC,GAAG,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CACzE,CAAC;AA6LF,KAAK,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAEzE,eAAO,MAAM,QAAQ,oKAkCpB,CAAC;AAEF,eAAO,MAAM,IAAI;WA7OF,OAAO;WACP,OAAO;YACN,OAAO;aACN,OAAO;cACN,OAAO;kBACH,OAAO;cACX,KAAK,CAAC,SAAS;uBACN,MAAM;uBACN,KAAK,CAAC,WAAW;;WAC1B,MAAM;;WATT,OAAO;WACP,OAAO;YACN,OAAO;aACN,OAAO;cACN,OAAO;kBACH,OAAO;cACX,KAAK,CAAC,SAAS;uBACN,MAAM;uBACN,KAAK,CAAC,WAAW;;WACN,KAAK,CAAC,YAAY;WAAS,MAAM;qDA6OrE,CAAC"}