npm - @mohasinac/appkit - Versions diffs - 3.4.8 → 3.5.0 - Mend

@mohasinac/appkit 3.4.8 → 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (605) hide show

package/dist/ui/components/Select.d.ts CHANGED Viewed

@@ -15,5 +15,10 @@ export interface SelectProps<V extends string = string> extends Omit<React.Selec
     helperText?: React.ReactNode;
     required?: boolean;
     variant?: "default" | "ghost" | "error";
+    /**
+     * Render just the native `<select>` with its options — no Label/error
+     * chrome. For call sites that already own their own label/wrapper markup.
+     */
+    bare?: boolean;
 }
-export declare function Select<V extends string = string>({ options, value, onChange, onValueChange, placeholder, label, error, helperText, disabled, required, className, id, variant, ...props }: SelectProps<V>): React.JSX.Element;
+export declare function Select<V extends string = string>({ options, value, onChange, onValueChange, placeholder, label, error, helperText, disabled, required, className, id, variant, bare, ...props }: SelectProps<V>): React.JSX.Element;

package/dist/ui/components/Select.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Div } from "./Div";
 import { Label, Text } from "./Typography";
-export function Select({ options, value, onChange, onValueChange, placeholder, label, error, helperText, disabled = false, required, className = "", id, variant = "default", ...props }) {
+export function Select({ options, value, onChange, onValueChange, placeholder, label, error, helperText, disabled = false, required, className = "", id, variant = "default", bare = false, ...props }) {
     const generatedId = React.useId();
     const inputId = id ?? generatedId;
     const handleChange = (event) => {
@@ -14,15 +14,20 @@ export function Select({ options, value, onChange, onValueChange, placeholder, l
         : variant === "ghost"
             ? "border-transparent bg-transparent shadow-none"
             : "appkit-select__trigger--default";
-    return (_jsxs("div", { className: "appkit-select", "data-section": "select-div-592", children: [label && (_jsx(Label, { htmlFor: inputId, className: "appkit-select__label", required: required, children: label })), _jsxs("div", { className: "relative group", "data-section": "select-div-593", children: [_jsxs("select", { ...props, id: inputId, value: value, onChange: handleChange, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: [
-                            "appkit-select__trigger",
-                            "w-full appearance-none pr-10",
-                            disabled
-                                ? "appkit-select__trigger--disabled"
-                                : "appkit-select__trigger--enabled",
-                            variantClass,
-                            className,
-                        ]
-                            .filter(Boolean)
-                            .join(" "), children: [placeholder ? (_jsx("option", { value: "", disabled: true, children: placeholder })) : null, options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, String(option.value))))] }), _jsx(Div, { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-[var(--appkit-color-text-faint)]", "data-section": "select-div-594", children: _jsx("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "appkit-select__error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-select__error", children: helperText })) : null] }));
+    const selectClassName = [
+        "appkit-select__trigger",
+        "w-full appearance-none pr-10",
+        disabled
+            ? "appkit-select__trigger--disabled"
+            : "appkit-select__trigger--enabled",
+        variantClass,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const optionsMarkup = (_jsxs(_Fragment, { children: [placeholder ? (_jsx("option", { value: "", disabled: true, children: placeholder })) : null, options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, String(option.value))))] }));
+    if (bare) {
+        return (_jsx("select", { ...props, id: inputId, value: value, onChange: handleChange, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: selectClassName, children: optionsMarkup }));
+    }
+    return (_jsxs("div", { className: "appkit-select", "data-section": "select-div-592", children: [label && (_jsx(Label, { htmlFor: inputId, className: "appkit-select__label", required: required, children: label })), _jsxs("div", { className: "relative group", "data-section": "select-div-593", children: [_jsx("select", { ...props, id: inputId, value: value, onChange: handleChange, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: selectClassName, children: optionsMarkup }), _jsx(Div, { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-[var(--appkit-color-text-faint)]", "data-section": "select-div-594", children: _jsx("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "appkit-select__error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-select__error", children: helperText })) : null] }));
 }

package/dist/ui/components/Select.style.css CHANGED Viewed

@@ -111,7 +111,7 @@
 .appkit-select__list {
   position: absolute;
-  z-index: var(--appkit-z-sidebar);
+  z-index: var(--appkit-z-popover);
   width: 100%;
   max-height: 15rem;
   overflow: auto;

package/dist/ui/components/Semantic.d.ts CHANGED Viewed

@@ -47,6 +47,17 @@ type SectionLayout = "default" | "flex" | "flex-col" | "flex-sm-row" | "flex-sm-
 type SectionGap = "none" | "xs" | "sm" | "md" | "lg";
 type SectionAlign = "start" | "center" | "end" | "stretch" | "baseline";
 type SectionJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+/** Scoped (non-viewport-fixed) background for a single Section — color/gradient/image only; use the page-level shell's lightBackground/darkBackground for video. */
+export interface SectionBackgroundConfig {
+    type: "color" | "gradient" | "image";
+    value: string;
+    overlay?: {
+        enabled: boolean;
+        color: string;
+        opacity: number;
+    };
+}
+export declare function sectionBackgroundStyle(bg: SectionBackgroundConfig): React.CSSProperties;
 export interface SectionProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     /**
      * Themed background tone. Defaults to `"plain"`. Use `"page-header"` for
@@ -54,6 +65,8 @@ export interface SectionProps extends React.HTMLAttributes<HTMLElement>, Surface
      * `"accent-banner"` for primary→secondary brand banners.
      */
     tone?: SectionTone;
+    /** Scoped color/gradient/image background — an alternative to `tone` for admin/CMS-configured section backgrounds. Renders behind `children`, absolutely positioned within the section. */
+    background?: SectionBackgroundConfig;
     color?: SemanticColor;
     /** Layout preset. `flex-sm-row` is the canonical "mobile column, sm+ row" pattern. */
     layout?: SectionLayout;

package/dist/ui/components/Semantic.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { buildSurfaceClasses, ROUNDED_MAP, PADDING_MAP, BORDER_MAP, SURFACE_MAP } from "./surface-tokens";
 const SECTION_TONE_MAP = {
@@ -47,7 +47,19 @@ const SECTION_JUSTIFY_MAP = {
     around: "justify-around",
     evenly: "justify-evenly",
 };
-export const Section = React.forwardRef(({ tone = "plain", color, layout, gap, align, justify, className = "", surface, padding, paddingX, paddingY, rounded, border, shadow, children, ...props }, ref) => (_jsx("section", { className: [
+export function sectionBackgroundStyle(bg) {
+    switch (bg.type) {
+        case "color":
+            return { backgroundColor: bg.value };
+        case "gradient":
+            return { background: bg.value };
+        case "image":
+            return { backgroundImage: `url('${bg.value}')`, backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat" };
+        default:
+            return {};
+    }
+}
+export const Section = React.forwardRef(({ tone = "plain", background, color, layout, gap, align, justify, className = "", surface, padding, paddingX, paddingY, rounded, border, shadow, children, ...props }, ref) => (_jsxs("section", { className: [
         SECTION_TONE_MAP[tone],
         buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow }),
         color ? SEMANTIC_COLOR_MAP[color] : "",
@@ -55,10 +67,11 @@ export const Section = React.forwardRef(({ tone = "plain", color, layout, gap, a
         gap ? SECTION_GAP_MAP[gap] : "",
         align ? SECTION_ALIGN_MAP[align] : "",
         justify ? SECTION_JUSTIFY_MAP[justify] : "",
+        background?.value ? "relative overflow-hidden" : "",
         className,
     ]
         .filter(Boolean)
-        .join(" "), ref: ref, ...props, children: children })));
+        .join(" "), ref: ref, ...props, children: [background?.value && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "absolute inset-0 -z-10", style: sectionBackgroundStyle(background) }), background.overlay?.enabled && (_jsx("span", { "aria-hidden": true, className: "absolute inset-0 -z-10", style: { backgroundColor: background.overlay.color, opacity: background.overlay.opacity } }))] })), children] })));
 Section.displayName = "Section";
 export function Article({ className = "", surface, padding, rounded, border, shadow, color, children, ...props }) {
     return (_jsx("article", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), color ? SEMANTIC_COLOR_MAP[color] : "", className].filter(Boolean).join(" "), ...props, children: children }));

package/dist/ui/components/SideDrawer.style.css CHANGED Viewed

@@ -3,7 +3,7 @@
 .appkit-side-drawer__backdrop {
   position: fixed;
   inset: 0;
-  z-index: var(--appkit-z-navbar);
+  z-index: var(--appkit-z-modal);
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
   transition: opacity 0.2s ease;
@@ -13,7 +13,9 @@
   position: fixed;
   top: 0;
   bottom: 0;
-  z-index: var(--appkit-z-navbar);
+  /* Full-screen overlay panel — z-modal groups it with Modal/Drawer/SideModal
+     as the main content-overlay tier, above navbar/bottom-nav/sidebar. */
+  z-index: var(--appkit-z-modal);
   background: var(--appkit-color-surface);
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   display: flex;
@@ -159,15 +161,22 @@
   flex: 1;
   overflow-y: auto;
   padding: 1rem 1.25rem;
+  /* Reserve room to scroll the last inline element (e.g. a submit button
+     with no dedicated __footer slot) fully above the bottom nav. */
+  padding-bottom: calc(1rem + var(--bottom-nav-height, 0px));
 }
 @media (min-width: 640px) {
-  .appkit-side-drawer__content { padding: 1.5rem; }
+  .appkit-side-drawer__content { padding: 1.5rem; padding-bottom: calc(1.5rem + var(--bottom-nav-height, 0px)); }
+}
+@media (min-width: 1024px) {
+  .appkit-side-drawer__content { padding-bottom: 1.5rem; }
 }
 /* Footer */
 .appkit-side-drawer__footer {
   flex-shrink: 0;
   padding: 1rem 1.25rem;
+  padding-bottom: calc(1rem + var(--bottom-nav-height, 0px));
   border-top: 1px solid var(--appkit-color-border);
   background-color: var(--appkit-color-bg);
 }
@@ -176,7 +185,10 @@
   background-color: rgba(15, 23, 42, 0.8);
 }
 @media (min-width: 640px) {
-  .appkit-side-drawer__footer { padding: 1.25rem 1.5rem; }
+  .appkit-side-drawer__footer { padding: 1.25rem 1.5rem; padding-bottom: calc(1.25rem + var(--bottom-nav-height, 0px)); }
+}
+@media (min-width: 1024px) {
+  .appkit-side-drawer__footer { padding-bottom: 1.25rem; }
 }
 /* Unsaved-changes warning overlay */

package/dist/ui/components/SideModal.style.css CHANGED Viewed

@@ -3,7 +3,7 @@
 .appkit-side-modal {
   position: fixed;
   inset: 0;
-  z-index: var(--appkit-z-sidebar);
+  z-index: var(--appkit-z-modal);
   display: flex;
 }

package/dist/ui/components/StickyToolbar.d.ts CHANGED Viewed

@@ -1,8 +1,9 @@
 import type { ReactNode } from "react";
 /**
  * StickyToolbar — primitive for the recurrent translucent sticky bar pattern
- * (`sticky top-[calc(var(--header-height,0px)+44px)] z-10 ... backdrop-blur-sm
- * border-b ...`) used by search-results pages, leaderboards, etc.
+ * (`sticky top-[calc(var(--header-height,0px)+var(--appkit-navbar-height,2.5rem))]
+ * z-10 ... backdrop-blur-sm border-b ...`) used by search-results pages,
+ * leaderboards, etc.
  *
  * The header offset is sourced from `--header-height`, which the global
  * AppLayoutShell sets at runtime. Consumer code never authors the offset

package/dist/ui/components/StickyToolbar.js CHANGED Viewed

@@ -17,7 +17,7 @@ function resolveOffset(offset) {
         return "top-[var(--header-height,0px)]";
     }
     if (offset === "header+nav") {
-        return "top-[calc(var(--header-height,0px)+44px)]";
+        return "top-[calc(var(--header-height,0px)+var(--appkit-navbar-height,2.5rem))]";
     }
     // Numeric pixel offset.
     return `top-[${offset}px]`;

package/dist/ui/components/Textarea.d.ts CHANGED Viewed

@@ -5,5 +5,10 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
     helperText?: React.ReactNode;
     showCharCount?: boolean;
     variant?: "default" | "ghost" | "error";
+    /**
+     * Render just the native `<textarea>` — no Label/helper/char-count chrome.
+     * For call sites that already own their own label/wrapper markup.
+     */
+    bare?: boolean;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/ui/components/Textarea.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Label, Text } from "./Typography";
-export const Textarea = React.forwardRef(function Textarea({ label, error, helperText, showCharCount = false, variant = "default", className = "", required, maxLength, value, defaultValue, id, ...props }, ref) {
+export const Textarea = React.forwardRef(function Textarea({ label, error, helperText, showCharCount = false, variant = "default", bare = false, className = "", required, maxLength, value, defaultValue, id, ...props }, ref) {
     const generatedId = React.useId();
     const inputId = id ?? generatedId;
     const charCount = typeof value === "string"
@@ -14,8 +14,12 @@ export const Textarea = React.forwardRef(function Textarea({ label, error, helpe
         : variant === "ghost"
             ? "border-transparent bg-transparent shadow-none"
             : "";
-    return (_jsxs("div", { className: "w-full", "data-section": "textarea-div-620", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsx("textarea", { ...props, ref: ref, id: inputId, value: value, defaultValue: defaultValue, maxLength: maxLength, "aria-invalid": error ? "true" : undefined, className: ["appkit-textarea", variantClass, className]
-                    .filter(Boolean)
-                    .join(" ") }), (error || helperText || (showCharCount && maxLength)) && (_jsxs("div", { className: "mt-1.5 flex items-start justify-between gap-3", "data-section": "textarea-div-621", children: [_jsx("div", { className: "min-w-0 flex-1", "data-section": "textarea-div-622", children: error ? (_jsx(Text, { size: "sm", variant: "error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", children: helperText })) : null }), showCharCount && maxLength ? (_jsxs(Text, { size: "xs", variant: charCount >= maxLength ? "error" : "muted", className: "shrink-0 tabular-nums", children: [charCount, "/", maxLength] })) : null] }))] }));
+    const textareaClassName = ["appkit-textarea", variantClass, className]
+        .filter(Boolean)
+        .join(" ");
+    if (bare) {
+        return (_jsx("textarea", { ...props, ref: ref, id: inputId, value: value, defaultValue: defaultValue, maxLength: maxLength, "aria-invalid": error ? "true" : undefined, className: textareaClassName }));
+    }
+    return (_jsxs("div", { className: "w-full", "data-section": "textarea-div-620", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, children: label })), _jsx("textarea", { ...props, ref: ref, id: inputId, value: value, defaultValue: defaultValue, maxLength: maxLength, "aria-invalid": error ? "true" : undefined, className: textareaClassName }), (error || helperText || (showCharCount && maxLength)) && (_jsxs("div", { className: "mt-1.5 flex items-start justify-between gap-3", "data-section": "textarea-div-621", children: [_jsx("div", { className: "min-w-0 flex-1", "data-section": "textarea-div-622", children: error ? (_jsx(Text, { size: "sm", variant: "error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", children: helperText })) : null }), showCharCount && maxLength ? (_jsxs(Text, { size: "xs", variant: charCount >= maxLength ? "error" : "muted", className: "shrink-0 tabular-nums", children: [charCount, "/", maxLength] })) : null] }))] }));
 });
 Textarea.displayName = "Textarea";

package/dist/ui/components/Toast.style.css CHANGED Viewed

@@ -25,9 +25,12 @@
 @media (min-width: 768px) {
   .appkit-toast-container--top-right { top: 1rem; right: 1rem; }
   .appkit-toast-container--top-left { top: 1rem; left: 1rem; }
+  /* audit-bottom-offset-ok: md+ breakpoint only — no mobile bottom-nav present at this width */
   .appkit-toast-container--bottom-right { bottom: 1rem; right: 1rem; top: auto; }
+  /* audit-bottom-offset-ok: md+ breakpoint only — no mobile bottom-nav present at this width */
   .appkit-toast-container--bottom-left { bottom: 1rem; left: 1rem; top: auto; }
   .appkit-toast-container--top-center { top: 1rem; left: 50%; transform: translateX(-50%); }
+  /* audit-bottom-offset-ok: md+ breakpoint only — no mobile bottom-nav present at this width */
   .appkit-toast-container--bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); top: auto; }
 }

package/dist/ui/components/UnsavedChangesModal.style.css CHANGED Viewed

@@ -3,7 +3,7 @@
 .appkit-unsaved-modal__backdrop {
   position: fixed;
   inset: 0;
-  z-index: var(--appkit-z-sidebar);
+  z-index: var(--appkit-z-confirm);
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/ui/components/surface-tokens.d.ts CHANGED Viewed

@@ -32,60 +32,68 @@ export declare const SURFACE_MAP: {
     readonly "media-dark": "bg-zinc-900";
 };
 export type SurfaceKey = keyof typeof SURFACE_MAP;
+/**
+ * Every className below is spelled out as a complete string literal — Tailwind's
+ * content scanner reads this source file as plain text (it does not evaluate
+ * JS), so building a class name via template-literal interpolation of the
+ * space step leaves an unresolved placeholder that the scanner cannot turn
+ * into a generatable candidate. See the same fix in Typography.tsx
+ * (RESPONSIVE_TEXT_SIZE_CLASS) for the identical issue with text sizes.
+ */
 export declare const PADDING_MAP: {
     readonly none: "";
-    readonly "2xs": `p-[${string}]`;
-    readonly xs: `p-[${string}]`;
-    readonly sm: `p-[${string}]`;
-    readonly md: `p-[${string}]`;
-    readonly "5": `p-[${string}]`;
-    readonly lg: `p-[${string}]`;
-    readonly xl: `p-[${string}]`;
-    readonly "3xl": `p-[${string}]`;
-    readonly card: `p-[${string}] sm:p-[${string}] lg:p-[${string}]`;
-    readonly "card-tight": `p-[${string}] sm:p-[${string}]`;
-    readonly section: `py-[${string}] sm:py-[${string}] xl:py-[${string}]`;
-    readonly sectionSm: `py-[${string}] sm:py-[${string}]`;
-    readonly page: `py-[${string}] sm:py-[${string}] lg:py-[${string}]`;
-    readonly hero: `py-[${string}] sm:py-[${string}] lg:py-[${string}]`;
-    readonly toolbar: `px-[${string}] py-[${string}]`;
-    readonly inline: `px-[${string}] py-[${string}]`;
-    readonly inlineSm: `px-[${string}] py-[${string}]`;
-    readonly inlineLg: `px-[${string}] py-[${string}]`;
+    readonly "2xs": "p-[var(--appkit-space-1)]";
+    readonly xs: "p-[var(--appkit-space-2)]";
+    readonly sm: "p-[var(--appkit-space-3)]";
+    readonly md: "p-[var(--appkit-space-4)]";
+    readonly "5": "p-[var(--appkit-space-5)]";
+    readonly lg: "p-[var(--appkit-space-6)]";
+    readonly xl: "p-[var(--appkit-space-8)]";
+    readonly "3xl": "p-[var(--appkit-space-12)]";
+    readonly card: "p-[var(--appkit-space-5)] sm:p-[var(--appkit-space-6)] lg:p-[var(--appkit-space-8)]";
+    readonly "card-tight": "p-[var(--appkit-space-3)] sm:p-[var(--appkit-space-4)]";
+    readonly section: "py-[var(--appkit-space-10)] sm:py-[var(--appkit-space-14)] xl:py-[var(--appkit-space-20)]";
+    readonly sectionSm: "py-[var(--appkit-space-6)] sm:py-[var(--appkit-space-10)]";
+    readonly page: "py-[var(--appkit-space-6)] sm:py-[var(--appkit-space-8)] lg:py-[var(--appkit-space-10)]";
+    readonly hero: "py-[var(--appkit-space-12)] sm:py-[var(--appkit-space-16)] lg:py-[var(--appkit-space-24)]";
+    readonly toolbar: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)]";
+    readonly inline: "px-[var(--appkit-space-4)] py-[var(--appkit-space-3)]";
+    readonly inlineSm: "px-[var(--appkit-space-3)] py-[var(--appkit-space-2)]";
+    readonly inlineLg: "px-[var(--appkit-space-6)] py-[var(--appkit-space-4)]";
     /** Tiny pill chip — `px-1.5 py-0.5`. Used by Bundle/PrizeDraw badge labels. */
-    readonly "chip-2xs": `px-[${string}] py-[${string}]`;
-    readonly "y-2xs": `py-[${string}]`;
-    readonly "y-xs": `py-[${string}]`;
-    readonly "y-sm": `py-[${string}]`;
-    readonly "y-md": `py-[${string}]`;
-    readonly "y-lg": `py-[${string}]`;
-    readonly "y-xl": `py-[${string}]`;
-    readonly "y-2xl": `py-[${string}]`;
-    readonly "y-3xl": `py-[${string}]`;
-    readonly "y-4xl": `py-[${string}]`;
-    readonly "x-xs": `px-[${string}]`;
-    readonly "x-sm": `px-[${string}]`;
-    readonly "x-md": `px-[${string}]`;
-    readonly "x-lg": `px-[${string}]`;
-    readonly "x-xl": `px-[${string}]`;
-    readonly "t-2xs": `pt-[${string}]`;
-    readonly "b-2xs": `pb-[${string}]`;
-    readonly "t-xs": `pt-[${string}]`;
-    readonly "t-sm": `pt-[${string}]`;
-    readonly "t-md": `pt-[${string}]`;
-    readonly "t-lg": `pt-[${string}]`;
-    readonly "t-xl": `pt-[${string}]`;
-    readonly "b-xs": `pb-[${string}]`;
-    readonly "b-sm": `pb-[${string}]`;
-    readonly "b-md": `pb-[${string}]`;
-    readonly "b-lg": `pb-[${string}]`;
-    readonly "b-xl": `pb-[${string}]`;
-    readonly "b-2xl": `pb-[${string}]`;
-    readonly "y-2-5xl": `py-[${string}]`;
-    readonly "y-5xl": `py-[${string}]`;
-    readonly "y-6xl": `py-[${string}]`;
-    readonly banner: `py-[${string}] md:py-[${string}] lg:py-[${string}]`;
-    readonly "content-banner": `py-[${string}] md:py-[${string}] lg:py-[${string}]`;
+    readonly "chip-2xs": "px-[var(--appkit-space-1-5)] py-[var(--appkit-space-0-5)]";
+    readonly "y-2xs": "py-[var(--appkit-space-1)]";
+    readonly "y-xs": "py-[var(--appkit-space-2)]";
+    readonly "y-sm": "py-[var(--appkit-space-3)]";
+    readonly "y-md": "py-[var(--appkit-space-4)]";
+    readonly "y-lg": "py-[var(--appkit-space-6)]";
+    readonly "y-xl": "py-[var(--appkit-space-8)]";
+    readonly "y-2xl": "py-[var(--appkit-space-10)]";
+    readonly "y-3xl": "py-[var(--appkit-space-12)]";
+    readonly "y-4xl": "py-[var(--appkit-space-16)]";
+    readonly "x-xs": "px-[var(--appkit-space-2)]";
+    readonly "x-sm": "px-[var(--appkit-space-3)]";
+    readonly "x-md": "px-[var(--appkit-space-4)]";
+    readonly "x-lg": "px-[var(--appkit-space-6)]";
+    readonly "x-xl": "px-[var(--appkit-space-8)]";
+    readonly "t-2xs": "pt-[var(--appkit-space-1)]";
+    readonly "b-2xs": "pb-[var(--appkit-space-1)]";
+    readonly "t-xs": "pt-[var(--appkit-space-2)]";
+    readonly "t-sm": "pt-[var(--appkit-space-3)]";
+    readonly "t-md": "pt-[var(--appkit-space-4)]";
+    readonly "t-lg": "pt-[var(--appkit-space-6)]";
+    readonly "t-xl": "pt-[var(--appkit-space-8)]";
+    readonly "b-xs": "pb-[var(--appkit-space-2)]";
+    readonly "b-sm": "pb-[var(--appkit-space-3)]";
+    readonly "b-md": "pb-[var(--appkit-space-4)]";
+    readonly "b-lg": "pb-[var(--appkit-space-6)]";
+    readonly "b-xl": "pb-[var(--appkit-space-8)]";
+    readonly "b-2xl": "pb-[var(--appkit-space-10)]";
+    readonly "y-2-5xl": "py-[var(--appkit-space-14)]";
+    readonly "y-5xl": "py-[var(--appkit-space-20)]";
+    readonly "y-6xl": "py-[var(--appkit-space-24)]";
+    readonly banner: "py-[var(--appkit-space-14)] md:py-[var(--appkit-space-16)] lg:py-[var(--appkit-space-20)]";
+    readonly "content-banner": "py-[var(--appkit-space-10)] md:py-[var(--appkit-space-12)] lg:py-[var(--appkit-space-16)]";
 };
 export type PaddingKey = keyof typeof PADDING_MAP;
 export declare const ROUNDED_MAP: {
@@ -143,17 +151,17 @@ export type ShadowKey = keyof typeof SHADOW_MAP;
 export declare const GAP_PRESETS: {
     readonly none: "gap-0";
     readonly px: "gap-px";
-    readonly xs: `gap-[${string}]`;
-    readonly sm: `gap-[${string}]`;
-    readonly dense: `gap-[${string}]`;
-    readonly md: `gap-[${string}]`;
-    readonly comfortable: `gap-[${string}]`;
-    readonly lg: `gap-[${string}]`;
-    readonly loose: `gap-[${string}]`;
-    readonly xl: `gap-[${string}]`;
-    readonly "2xl": `gap-[${string}]`;
-    readonly section: `gap-[${string}] sm:gap-[${string}]`;
-    readonly hero: `gap-[${string}] sm:gap-[${string}]`;
+    readonly xs: "gap-[var(--appkit-space-1)]";
+    readonly sm: "gap-[var(--appkit-space-2)]";
+    readonly dense: "gap-[var(--appkit-space-2)]";
+    readonly md: "gap-[var(--appkit-space-3)]";
+    readonly comfortable: "gap-[var(--appkit-space-3)]";
+    readonly lg: "gap-[var(--appkit-space-4)]";
+    readonly loose: "gap-[var(--appkit-space-4)]";
+    readonly xl: "gap-[var(--appkit-space-5)]";
+    readonly "2xl": "gap-[var(--appkit-space-6)]";
+    readonly section: "gap-[var(--appkit-space-6)] sm:gap-[var(--appkit-space-8)]";
+    readonly hero: "gap-[var(--appkit-space-10)] sm:gap-[var(--appkit-space-12)]";
 };
 export type GapPresetKey = keyof typeof GAP_PRESETS;
 /**
@@ -164,58 +172,58 @@ export type GapPresetKey = keyof typeof GAP_PRESETS;
  */
 export declare const PADDING_PRESETS: {
     readonly none: "";
-    readonly "2xs": `p-[${string}]`;
-    readonly xs: `p-[${string}]`;
-    readonly sm: `p-[${string}]`;
-    readonly md: `p-[${string}]`;
-    readonly "5": `p-[${string}]`;
-    readonly lg: `p-[${string}]`;
-    readonly xl: `p-[${string}]`;
-    readonly "3xl": `p-[${string}]`;
-    readonly card: `p-[${string}] sm:p-[${string}] lg:p-[${string}]`;
-    readonly "card-tight": `p-[${string}] sm:p-[${string}]`;
-    readonly section: `py-[${string}] sm:py-[${string}] xl:py-[${string}]`;
-    readonly sectionSm: `py-[${string}] sm:py-[${string}]`;
-    readonly page: `py-[${string}] sm:py-[${string}] lg:py-[${string}]`;
-    readonly hero: `py-[${string}] sm:py-[${string}] lg:py-[${string}]`;
-    readonly toolbar: `px-[${string}] py-[${string}]`;
-    readonly inline: `px-[${string}] py-[${string}]`;
-    readonly inlineSm: `px-[${string}] py-[${string}]`;
-    readonly inlineLg: `px-[${string}] py-[${string}]`;
+    readonly "2xs": "p-[var(--appkit-space-1)]";
+    readonly xs: "p-[var(--appkit-space-2)]";
+    readonly sm: "p-[var(--appkit-space-3)]";
+    readonly md: "p-[var(--appkit-space-4)]";
+    readonly "5": "p-[var(--appkit-space-5)]";
+    readonly lg: "p-[var(--appkit-space-6)]";
+    readonly xl: "p-[var(--appkit-space-8)]";
+    readonly "3xl": "p-[var(--appkit-space-12)]";
+    readonly card: "p-[var(--appkit-space-5)] sm:p-[var(--appkit-space-6)] lg:p-[var(--appkit-space-8)]";
+    readonly "card-tight": "p-[var(--appkit-space-3)] sm:p-[var(--appkit-space-4)]";
+    readonly section: "py-[var(--appkit-space-10)] sm:py-[var(--appkit-space-14)] xl:py-[var(--appkit-space-20)]";
+    readonly sectionSm: "py-[var(--appkit-space-6)] sm:py-[var(--appkit-space-10)]";
+    readonly page: "py-[var(--appkit-space-6)] sm:py-[var(--appkit-space-8)] lg:py-[var(--appkit-space-10)]";
+    readonly hero: "py-[var(--appkit-space-12)] sm:py-[var(--appkit-space-16)] lg:py-[var(--appkit-space-24)]";
+    readonly toolbar: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)]";
+    readonly inline: "px-[var(--appkit-space-4)] py-[var(--appkit-space-3)]";
+    readonly inlineSm: "px-[var(--appkit-space-3)] py-[var(--appkit-space-2)]";
+    readonly inlineLg: "px-[var(--appkit-space-6)] py-[var(--appkit-space-4)]";
     /** Tiny pill chip — `px-1.5 py-0.5`. Used by Bundle/PrizeDraw badge labels. */
-    readonly "chip-2xs": `px-[${string}] py-[${string}]`;
-    readonly "y-2xs": `py-[${string}]`;
-    readonly "y-xs": `py-[${string}]`;
-    readonly "y-sm": `py-[${string}]`;
-    readonly "y-md": `py-[${string}]`;
-    readonly "y-lg": `py-[${string}]`;
-    readonly "y-xl": `py-[${string}]`;
-    readonly "y-2xl": `py-[${string}]`;
-    readonly "y-3xl": `py-[${string}]`;
-    readonly "y-4xl": `py-[${string}]`;
-    readonly "x-xs": `px-[${string}]`;
-    readonly "x-sm": `px-[${string}]`;
-    readonly "x-md": `px-[${string}]`;
-    readonly "x-lg": `px-[${string}]`;
-    readonly "x-xl": `px-[${string}]`;
-    readonly "t-2xs": `pt-[${string}]`;
-    readonly "b-2xs": `pb-[${string}]`;
-    readonly "t-xs": `pt-[${string}]`;
-    readonly "t-sm": `pt-[${string}]`;
-    readonly "t-md": `pt-[${string}]`;
-    readonly "t-lg": `pt-[${string}]`;
-    readonly "t-xl": `pt-[${string}]`;
-    readonly "b-xs": `pb-[${string}]`;
-    readonly "b-sm": `pb-[${string}]`;
-    readonly "b-md": `pb-[${string}]`;
-    readonly "b-lg": `pb-[${string}]`;
-    readonly "b-xl": `pb-[${string}]`;
-    readonly "b-2xl": `pb-[${string}]`;
-    readonly "y-2-5xl": `py-[${string}]`;
-    readonly "y-5xl": `py-[${string}]`;
-    readonly "y-6xl": `py-[${string}]`;
-    readonly banner: `py-[${string}] md:py-[${string}] lg:py-[${string}]`;
-    readonly "content-banner": `py-[${string}] md:py-[${string}] lg:py-[${string}]`;
+    readonly "chip-2xs": "px-[var(--appkit-space-1-5)] py-[var(--appkit-space-0-5)]";
+    readonly "y-2xs": "py-[var(--appkit-space-1)]";
+    readonly "y-xs": "py-[var(--appkit-space-2)]";
+    readonly "y-sm": "py-[var(--appkit-space-3)]";
+    readonly "y-md": "py-[var(--appkit-space-4)]";
+    readonly "y-lg": "py-[var(--appkit-space-6)]";
+    readonly "y-xl": "py-[var(--appkit-space-8)]";
+    readonly "y-2xl": "py-[var(--appkit-space-10)]";
+    readonly "y-3xl": "py-[var(--appkit-space-12)]";
+    readonly "y-4xl": "py-[var(--appkit-space-16)]";
+    readonly "x-xs": "px-[var(--appkit-space-2)]";
+    readonly "x-sm": "px-[var(--appkit-space-3)]";
+    readonly "x-md": "px-[var(--appkit-space-4)]";
+    readonly "x-lg": "px-[var(--appkit-space-6)]";
+    readonly "x-xl": "px-[var(--appkit-space-8)]";
+    readonly "t-2xs": "pt-[var(--appkit-space-1)]";
+    readonly "b-2xs": "pb-[var(--appkit-space-1)]";
+    readonly "t-xs": "pt-[var(--appkit-space-2)]";
+    readonly "t-sm": "pt-[var(--appkit-space-3)]";
+    readonly "t-md": "pt-[var(--appkit-space-4)]";
+    readonly "t-lg": "pt-[var(--appkit-space-6)]";
+    readonly "t-xl": "pt-[var(--appkit-space-8)]";
+    readonly "b-xs": "pb-[var(--appkit-space-2)]";
+    readonly "b-sm": "pb-[var(--appkit-space-3)]";
+    readonly "b-md": "pb-[var(--appkit-space-4)]";
+    readonly "b-lg": "pb-[var(--appkit-space-6)]";
+    readonly "b-xl": "pb-[var(--appkit-space-8)]";
+    readonly "b-2xl": "pb-[var(--appkit-space-10)]";
+    readonly "y-2-5xl": "py-[var(--appkit-space-14)]";
+    readonly "y-5xl": "py-[var(--appkit-space-20)]";
+    readonly "y-6xl": "py-[var(--appkit-space-24)]";
+    readonly banner: "py-[var(--appkit-space-14)] md:py-[var(--appkit-space-16)] lg:py-[var(--appkit-space-20)]";
+    readonly "content-banner": "py-[var(--appkit-space-10)] md:py-[var(--appkit-space-12)] lg:py-[var(--appkit-space-16)]";
 };
 export type PaddingPresetKey = PaddingKey;
 export type XPaddingKey = "none" | "x-xs" | "x-sm" | "x-md" | "x-5" | "x-lg" | "x-xl" | "x-sm-md" | "x-sm-lg-md" | "x-md-lg" | "x-md-xl" | "x-md-2xl" | "x-page" | "l-xl";