@g4rcez/components 4.1.3 → 5.0.0

package/dist/preset/src/styles/default-tokens.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultTokens = exports.defaultShadowTokens = exports.defaultZIndexTokens = exports.defaultRoundedTokens = exports.defaultSpacingTokens = void 0;
+exports.defaultSpacingTokens = {
+    base: "1rem",
+    hairline: "0.0625rem",
+    lg: "1.125rem",
+    sm: "0.75rem",
+    dialog: "20rem",
+    "field-height": "1.5rem",
+    "field-label": "0.875rem",
+    "input-height": "2.5rem",
+    "input-x": "0.5rem",
+    "input-y": "0.25rem",
+    "input-inline": "0.25rem",
+    "input-gap": "0.3rem",
+};
+exports.defaultRoundedTokens = {
+    button: "0.55rem",
+    pill: "2rem",
+    card: "0.75rem",
+    full: "9999px",
+};
+exports.defaultZIndexTokens = {
+    wizard: "50",
+    normal: "1",
+    navbar: "22",
+    calendar: "2",
+    overlay: "21",
+    tooltip: "20",
+    floating: "22",
+};
+exports.defaultShadowTokens = {
+    "shadow-notification": "1px 2px 2px 2px hsla(210, 25%, 40%, 0.15)",
+    "shadow-floating": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    "shadow-card": "0px 1px 2px 1px hsla(210, 25%, 20%, 0.1)",
+    "shadow-table": "0px 1px 1px 1px hsla(210, 0%, 0%,  0.1)",
+};
+exports.defaultTokens = {
+    spacing: exports.defaultSpacingTokens,
+    rounded: exports.defaultRoundedTokens,
+    zIndex: exports.defaultZIndexTokens,
+    shadow: exports.defaultShadowTokens,
+};

package/dist/preset/src/styles/design-tokens.d.ts

@@ -17,7 +17,7 @@ export declare const createStyles: {
     default: (tokens: Token[]) => string;
     dark: (tokens: Token[]) => string;
 };
-type TokenParsersType = "colors" | "spacing" | "rounded" | "customTokens" | "zIndex";
+type TokenParsersType = "colors" | "spacing" | "rounded" | "components" | "customTokens" | "zIndex";
 type TokenCustomParser = (t: Token) => Token;
 export type TokenRemap = Partial<Record<TokenParsersType, TokenCustomParser> & {
     name: string;

package/dist/preset/src/styles/design-tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/design-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE5G,eAAO,MAAM,OAAO;aACP,MAAM;aACN,MAAM;aACN,MAAM;aACN,MAAM;;cAEL,MAAM;cACN,MAAM;;4BAEQ,MAAM,SAAS,MAAM,MAAM,MAAM,KAAK,MAAM;CAC1B,CAAC;AAE/C,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,aAAa,EAAE,QAAQ,CAAC,EAAE,OAAO,mBAAmB,EAAE,SAAQ,MAAW,EAAE,SAAQ,MAAW,KAAG,KAAK,EAQnI,CAAC;AAEX,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,aAAa,EAAE,EAAE,SAAS,kBAAkB,EACrF,QAAQ,CAAC,EACT,OAAO,EAAE,EACT,SAAQ,MAAW,EACnB,SAAQ,MAAW,KACpB,CAWY,CAAC;AAmBhB,eAAO,MAAM,YAAY;sBACH,KAAK,EAAE;mBACV,KAAK,EAAE;CACzB,CAAC;AAEF,KAAK,gBAAgB,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;AAErF,KAAK,iBAAiB,GAAG,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK,CAAC;AAE7C,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAqBjG,eAAO,MAAM,WAAW,GAAI,OAAO,YAAY,EAAE,OAAO,MAAM,WAIxD,CAAC;AAEP,eAAO,MAAM,mBAAmB,GAAI,OAAO,YAAY,EAAE,MAAM,UAAU,KAAG,aAG3E,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,YAAY,EAAE,MAAM,UAAU,WAIjE,CAAC"}
+{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/design-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE5G,eAAO,MAAM,OAAO;aACP,MAAM;aACN,MAAM;aACN,MAAM;aACN,MAAM;;cAEL,MAAM;cACN,MAAM;;4BAEQ,MAAM,SAAS,MAAM,MAAM,MAAM,KAAK,MAAM;CAC1B,CAAC;AAE/C,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,aAAa,EAAE,QAAQ,CAAC,EAAE,OAAO,mBAAmB,EAAE,SAAQ,MAAW,EAAE,SAAQ,MAAW,KAAG,KAAK,EAQnI,CAAC;AAEX,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,aAAa,EAAE,EAAE,SAAS,kBAAkB,EACrF,QAAQ,CAAC,EACT,OAAO,EAAE,EACT,SAAQ,MAAW,EACnB,SAAQ,MAAW,KACpB,CAWY,CAAC;AAmBhB,eAAO,MAAM,YAAY;sBACH,KAAK,EAAE;mBACV,KAAK,EAAE;CACzB,CAAC;AAEF,KAAK,gBAAgB,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,cAAc,GAAG,QAAQ,CAAC;AAEpG,KAAK,iBAAiB,GAAG,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK,CAAC;AAE7C,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAyBjG,eAAO,MAAM,WAAW,GAAI,OAAO,YAAY,EAAE,OAAO,MAAM,WAIxD,CAAC;AAEP,eAAO,MAAM,mBAAmB,GAAI,OAAO,YAAY,EAAE,MAAM,UAAU,KAAG,aAG3E,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,YAAY,EAAE,MAAM,UAAU,WAIjE,CAAC"}

package/dist/preset/src/styles/design-tokens.js

@@ -50,15 +50,19 @@ const fn = (p) => (value, _, key) => {
     const r = { key: `--${key}`, value: `${value}` };
     return p ? p(r) : r;
 };
-const zIndexParser = (t) => ({ key: t.key.replace(/^--/, "--z-"), value: t.value });
+const zIndexParser = (t) => ({
+    key: t.key.replace(/^--/, "--z-"),
+    value: t.value,
+});
 const createTokens = (theme, map) => {
     const colors = (0, exports.reduceTokens)(theme.colors, fn(map?.colors));
     const spacing = (0, exports.reduceTokens)(theme.spacing, fn(map?.spacing));
     const rounded = (0, exports.reduceTokens)(theme.rounded, fn(map?.rounded));
     const shadow = (0, exports.reduceTokens)(theme.shadow, fn(map?.rounded));
     const zIndex = (0, exports.reduceTokens)(theme.zIndex, fn(map?.zIndex ?? zIndexParser));
+    const components = theme.components ? (0, exports.reduceTokens)(theme.components, fn(map?.components)) : [];
     const customTokens = theme.custom ? (0, exports.reduceTokens)(theme.custom, fn(map?.customTokens)) : [];
-    return colors.concat(spacing, rounded, customTokens, zIndex, shadow);
+    return colors.concat(spacing, rounded, components, customTokens, zIndex, shadow);
 };
 const createTheme = (theme, name) => createStyleContent(createTokens(theme), {
     result: (variables) => `html${name ? `.${name}` : ""} {${variables}}`,

package/dist/preset/src/styles/light.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../../../src/styles/light.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,YAqNzB,CAAC"}
+{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../../../src/styles/light.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,YAsNzB,CAAC"}

package/dist/preset/src/styles/light.js

@@ -2,14 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIGHT_THEME = void 0;
 const common_1 = require("./common");
+const components_1 = require("./components");
 exports.LIGHT_THEME = {
     rounded: common_1.rounded,
     spacing: common_1.spacing,
+    components: components_1.components,
     name: "light",
     shadow: {
         "shadow-notification": "1px 2px 2px 2px hsla(210, 25%, 40%, 0.15)",
         "shadow-floating": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-        "shadow-card": "0px 1px 2px 1px hsla(210, 25%, 20%, 0.1)",
+        "shadow-card": "0px 1px 2px 1px transparent",
         "shadow-table": "0px 1px 1px 1px hsla(210, 0%, 0%,  0.1)",
     },
     zIndex: common_1.zIndex,
@@ -25,15 +27,15 @@ exports.LIGHT_THEME = {
         },
         disabled: "hsla(240, 5%, 96%)",
         emphasis: {
-            foreground: "hsla(199, 89%, 48%)",
+            foreground: "hsla(199, 89%, 28%)",
             DEFAULT: "hsla(199, 89%, 96%)",
             subtle: "hsla(199, 89%, 92%)",
-            hover: "hsla(199, 89%, 40%)",
+            hover: "hsla(199, 89%, 24%)",
         },
         primary: {
             foreground: "hsla(240, 6%, 10%)",
-            DEFAULT: "hsla(201,49%,54%)",
-            subtle: "hsla(201,49%,36%)",
+            DEFAULT: "hsla(201,49%,36%)",
+            subtle: "hsla(201,49%,28%)",
             hover: "hsla(201,49%,22%)",
         },
         secondary: {
@@ -71,7 +73,7 @@ exports.LIGHT_THEME = {
             foreground: "hsla(0, 0%, 100%)",
             notification: "hsla(142, 71%, 45%)",
         },
-        ring: "hsla(201,49%,40%)",
+        ring: "hsla(201,49%,36%)",
         input: {
             border: "hsla(240, 6%, 90%)",
             placeholder: "hsla(240, 4%, 46%)",
@@ -111,23 +113,23 @@ exports.LIGHT_THEME = {
             },
             primary: {
                 text: "hsla(0, 0%, 100%)",
-                bg: "hsla(201,49%,54%)",
+                bg: "hsla(201,49%,36%)",
             },
             warn: {
                 bg: "hsla(38, 92%, 50%)",
-                text: "hsla(0, 0%, 100%)",
+                text: "hsla(38, 92%, 15%)",
             },
             info: {
                 text: "hsla(0, 0%, 100%)",
-                bg: "hsla(199, 89%, 48%)",
+                bg: "hsla(199, 89%, 35%)",
             },
             success: {
-                text: "hsla(0, 0%, 100%)",
+                text: "hsla(142, 71%, 15%)",
                 bg: "hsla(142, 71%, 45%)",
             },
             danger: {
                 text: "hsla(0, 0%, 100%)",
-                bg: "hsla(0, 84%, 60%)",
+                bg: "hsla(0, 72%, 42%)",
             },
             neutral: {
                 text: "hsla(240, 6%, 10%)",
@@ -141,26 +143,26 @@ exports.LIGHT_THEME = {
         tag: {
             muted: {
                 bg: "hsla(240, 5%, 96%)",
-                text: "hsla(240, 4%, 46%)",
+                text: "hsla(240, 4%, 40%)",
             },
             primary: {
-                text: "hsla(199, 89%, 48%)",
+                text: "hsla(199, 89%, 28%)",
                 bg: "hsla(199, 89%, 96%)",
             },
             warn: {
                 bg: "hsla(38, 92%, 96%)",
-                text: "hsla(38, 92%, 40%)",
+                text: "hsla(38, 92%, 28%)",
             },
             info: {
-                text: "hsla(199, 89%, 40%)",
+                text: "hsla(199, 89%, 30%)",
                 bg: "hsla(199, 89%, 96%)",
             },
             success: {
-                text: "hsla(142, 71%, 35%)",
+                text: "hsla(142, 71%, 25%)",
                 bg: "hsla(142, 71%, 96%)",
             },
             danger: {
-                text: "hsla(0, 84%, 45%)",
+                text: "hsla(0, 84%, 40%)",
                 bg: "hsla(0, 84%, 96%)",
             },
             neutral: {
@@ -179,17 +181,17 @@ exports.LIGHT_THEME = {
                 border: "hsla(240, 6%, 90%)",
             },
             primary: {
-                text: "hsla(199, 89%, 40%)",
+                text: "hsla(199, 89%, 28%)",
                 border: "hsla(199, 89%, 90%)",
                 bg: "hsla(199, 89%, 98%)",
             },
             warn: {
                 bg: "hsla(38, 92%, 98%)",
-                text: "hsla(38, 92%, 35%)",
+                text: "hsla(38, 92%, 28%)",
                 border: "hsla(38, 92%, 90%)",
             },
             info: {
-                text: "hsla(199, 89%, 35%)",
+                text: "hsla(199, 89%, 30%)",
                 bg: "hsla(199, 89%, 98%)",
                 border: "hsla(199, 89%, 90%)",
             },

package/dist/preset/src/styles/theme.types.d.ts

@@ -26,21 +26,446 @@ export type ZIndex = {
     floating: N;
 };
 type Shadows = "floating" | "card" | "notification" | "table";
+export type CardTokens = {
+    radius: string;
+    "padding-x": string;
+    "padding-y": string;
+    gap: string;
+    "title-pb": string;
+    "title-mb": string;
+    "stats-icon-col-w": string;
+    "stats-icon-col-p": string;
+    "stats-content-gap": string;
+    "stats-content-py": string;
+    "title-text": string;
+};
+export type ButtonTokens = {
+    radius: string;
+    height: string;
+    "padding-x": string;
+    "padding-y": string;
+    gap: string;
+    "height-big": string;
+    "padding-x-big": string;
+    "padding-y-big": string;
+    "height-small": string;
+    "padding-x-small": string;
+    "padding-y-small": string;
+    "height-min": string;
+    "padding-x-min": string;
+    "padding-y-min": string;
+    "height-tiny": string;
+    "padding-x-tiny": string;
+    "padding-y-tiny": string;
+    "padding-icon": string;
+    "radius-rough": string;
+    "radius-squared": string;
+};
+export type AlertTokens = {
+    radius: string;
+    p: string;
+    gap: string;
+    "close-top": string;
+    "close-right": string;
+};
+export type ModalTokens = {
+    radius: string;
+    "padding-x": string;
+    "padding-y": string;
+    gap: string;
+    "title-pb": string;
+    "body-py": string;
+    "footer-pt": string;
+    "footer-gap": string;
+    "sheet-pt": string;
+    "sheet-pb": string;
+    "close-p": string;
+    "close-top": string;
+    "close-right": string;
+    "confirm-py": string;
+    "sheet-handle-h": string;
+    "sheet-handle-py": string;
+    "sheet-pill-h": string;
+    "sheet-pill-w": string;
+    "sheet-pill-radius": string;
+    "drawer-resizer-h": string;
+    "drawer-resizer-w": string;
+    "resizer-radius": string;
+    "overlay-pt": string;
+    "overlay-p": string;
+    "dialog-max-w-mobile": string;
+    "sheet-max-h-svh": string;
+    "sheet-max-h-lvh": string;
+    "sheet-max-h-vh": string;
+    "title-text": string;
+    "overlay-h": string;
+};
+export type DropdownTokens = {
+    radius: string;
+    p: string;
+    "header-mb": string;
+    "max-h": string;
+};
+export type TooltipTokens = {
+    radius: string;
+    p: string;
+};
+export type MenuTokens = {
+    radius: string;
+    "item-p": string;
+    "max-h": string;
+};
+export type StatsTokens = {
+    radius: string;
+    p: string;
+    gap: string;
+    "icon-size": string;
+    "icon-p": string;
+    "inner-gap": string;
+    "footer-px": string;
+    "footer-py": string;
+    "value-text": string;
+};
+export type NotificationTokens = {
+    radius: string;
+    p: string;
+    gap: string;
+    "inner-gap": string;
+    "close-p": string;
+    "close-radius": string;
+    "list-gap": string;
+    "badge-px": string;
+    "badge-py": string;
+    "list-top": string;
+    "list-max-w": string;
+    "badge-text": string;
+};
+export type CommandTokens = {
+    radius: string;
+    "item-p": string;
+    "item-gap": string;
+    "row-h": string;
+    "header-h": string;
+    "footer-h": string;
+    "footer-p": string;
+    "list-max-h": string;
+    "list-gap": string;
+    "list-my": string;
+    "group-px": string;
+    "group-pt": string;
+    "group-pb": string;
+    "icon-size": string;
+    "input-px": string;
+    "input-py": string;
+    "list-px": string;
+};
+export type TagTokens = {
+    radius: string;
+    gap: string;
+    height: string;
+    "padding-x": string;
+    "padding-y": string;
+    "height-big": string;
+    "padding-x-big": string;
+    "padding-y-big": string;
+    "height-small": string;
+    "padding-x-small": string;
+    "padding-y-small": string;
+    "height-tiny": string;
+    "padding-x-tiny": string;
+    "padding-y-tiny": string;
+    "padding-icon": string;
+    "indicator-size": string;
+};
+export type CalendarTokens = {
+    "cell-p": string;
+    "day-size": string;
+    "nav-p": string;
+    "weekday-py": string;
+    "table-mt": string;
+    "datetime-my": string;
+    "footer-mt": string;
+    "header-radius": string;
+    "nav-gap": string;
+    "nav-py": string;
+    "year-w": string;
+    "icon-size": string;
+    "weekday-text": string;
+    "cell-text": string;
+};
+export type TableTokens = {
+    radius: string;
+    "row-gap": string;
+    "row-pb": string;
+    "cell-px": string;
+    "loading-h": string;
+    "empty-h": string;
+    "groups-gap": string;
+    "metadata-mb": string;
+    "metadata-gap-x": string;
+    "metadata-gap-y": string;
+    "ops-py": string;
+    "ops-gap": string;
+    "filter-gap": string;
+    "pill-radius": string;
+    "pill-px": string;
+    "pill-py": string;
+    "pag-p": string;
+    "pag-gap": string;
+    "pag-items-gap": string;
+    "pag-item-px": string;
+    "pag-item-py": string;
+    "loading-bar-h": string;
+    "loading-bar-radius": string;
+    "filter-dot-size": string;
+    "filter-dot-mr": string;
+    "filter-row-gap": string;
+    "filter-inline-gap": string;
+    "filter-inline-py": string;
+    "filter-list-mt": string;
+    "cell-border": string;
+    "divider-w": string;
+    "groups-mt": string;
+    "groups-my": string;
+    "metadata-min-w": string;
+    "inline-gap-tight": string;
+    "cell-padding": string;
+};
+export type SkeletonTokens = {
+    radius: string;
+    height: string;
+    width: string;
+    "cell-h": string;
+    "list-gap": string;
+};
+export type TypographyTokens = {
+    xs: string;
+    sm: string;
+    base: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+    "5xl": string;
+};
+export type InputTokens = {
+    radius: string;
+    height: string;
+    "padding-x": string;
+    "padding-y": string;
+    gap: string;
+    text: string;
+    "label-text": string;
+    "hint-text": string;
+    "label-mb": string;
+    "hint-mt": string;
+    inline: string;
+    "slot-gap": string;
+    "slot-pl": string;
+    "slot-pr": string;
+};
+export type CheckboxTokens = {
+    size: string;
+    radius: string;
+    gap: string;
+    "hint-text": string;
+};
+export type RadioboxTokens = {
+    size: string;
+    gap: string;
+};
+export type SwitchTokens = {
+    "track-h": string;
+    "track-w": string;
+    "thumb-size": string;
+    gap: string;
+    "label-text": string;
+    "hint-text": string;
+    "hint-mt": string;
+};
+export type SliderTokens = {
+    "control-h": string;
+    "track-h": string;
+    "thumb-size": string;
+};
+export type FileUploadTokens = {
+    p: string;
+    radius: string;
+    gap: string;
+    "thumb-size": string;
+    "text-name": string;
+    "text-size": string;
+    "delete-py": string;
+    "inner-gap": string;
+    "thumb-my": string;
+    "thumb-gap": string;
+};
+export type ProgressTokens = {
+    "track-h": string;
+    radius: string;
+};
+export type SpinnerTokens = {
+    size: string;
+    border: string;
+    "container-p": string;
+};
+export type EmptyTokens = {
+    gap: string;
+    px: string;
+    py: string;
+};
+export type ListTokens = {
+    radius: string;
+    "card-p": string;
+    "card-py": string;
+    "card-pb": string;
+    "card-gap": string;
+    "close-p": string;
+    "header-gap": string;
+    "item-py": string;
+    "item-gap": string;
+    "avatar-px": string;
+    "body-py": string;
+    "title-text": string;
+};
+export type TimelineTokens = {
+    "item-pb": string;
+    "connector-left": string;
+    "connector-top": string;
+    "connector-w": string;
+    "icon-size": string;
+    "icon-p": string;
+    "right-gap": string;
+    "right-px": string;
+};
+export type StepTokens = {
+    size: string;
+    "icon-size": string;
+    "label-px": string;
+    gap: string;
+    "connector-h": string;
+};
+export type TabsTokens = {
+    "header-mb": string;
+    "item-px": string;
+    "item-py": string;
+    "divider-h": string;
+};
+export type ShortcutTokens = {
+    gap: string;
+    text: string;
+};
+export type ToolbarTokens = {
+    bottom: string;
+    radius: string;
+    p: string;
+};
+export type WizardTokens = {
+    w: string;
+    gap: string;
+    radius: string;
+    p: string;
+    "footer-pt": string;
+    "actions-gap": string;
+    "counter-right": string;
+    "counter-top": string;
+    "label-text": string;
+};
+export type InfoTokens = {
+    gap: string;
+    "label-text": string;
+    "value-text": string;
+    "secondary-text": string;
+};
+export type PageCalendarTokens = {
+    gap: string;
+    "header-gap": string;
+    "date-gap": string;
+    "badge-size": string;
+    "badge-radius": string;
+    "title-text": string;
+    "week-label-text": string;
+    "nav-gap": string;
+    "nav-btn-gap": string;
+    "today-radius": string;
+    "today-px": string;
+    "today-py": string;
+    "today-text": string;
+    "view-switch-radius": string;
+    "filter-gap": string;
+    "filter-text": string;
+    "dot-size": string;
+    "dot-bottom": string;
+    "day-header-gap": string;
+    "day-header-px": string;
+    "day-header-py": string;
+    "day-badge-size": string;
+    "gutter-w": string;
+    "side-px": string;
+    "detail-gap": string;
+    "detail-p": string;
+    "weekday-py": string;
+    "weekday-text": string;
+    "cell-min-h": string;
+    "cell-gap": string;
+    "cell-p": string;
+    "month-badge-size": string;
+    "month-badge-text": string;
+    "overflow-text": string;
+    "week-badge-size": string;
+    "week-badge-text": string;
+    "hour-text": string;
+    "pill-radius": string;
+    "pill-text": string;
+    "cell-gap-tight": string;
+    "nav-mr": string;
+};
+export type ComponentTokens = {
+    card: CardTokens;
+    button: ButtonTokens;
+    alert: AlertTokens;
+    modal: ModalTokens;
+    dropdown: DropdownTokens;
+    tooltip: TooltipTokens;
+    menu: MenuTokens;
+    stats: StatsTokens;
+    notification: NotificationTokens;
+    command: CommandTokens;
+    tag: TagTokens;
+    calendar: CalendarTokens;
+    table: TableTokens;
+    skeleton: SkeletonTokens;
+    typography: TypographyTokens;
+    input: InputTokens;
+    checkbox: CheckboxTokens;
+    radiobox: RadioboxTokens;
+    switch: SwitchTokens;
+    slider: SliderTokens;
+    "file-upload": FileUploadTokens;
+    progress: ProgressTokens;
+    spinner: SpinnerTokens;
+    empty: EmptyTokens;
+    list: ListTokens;
+    timeline: TimelineTokens;
+    step: StepTokens;
+    tabs: TabsTokens;
+    shortcut: ShortcutTokens;
+    toolbar: ToolbarTokens;
+    wizard: WizardTokens;
+    info: InfoTokens;
+    "page-calendar": PageCalendarTokens;
+    custom?: Record<string, Record<string, string>>;
+};
 export type DesignTokens = {
     name: string;
     zIndex: ZIndex;
     shadow: Record<`shadow-${Shadows}`, string>;
     spacing: Record<"base" | "lg" | "sm" | "hairline", string> & {
         dialog: string;
-        "input-x": string;
-        "input-y": string;
-        "input-gap": string;
-        "field-label": string;
-        "field-height": string;
-        "input-height": string;
-        "input-inline": string;
     };
-    rounded: Record<"button" | "full" | "pill" | "card", string>;
+    rounded: Record<"full" | "pill", string>;
+    components: ComponentTokens;
     custom?: Record<string, string>;
     colors: {
         border: string;