@g4rcez/components 0.0.13 → 0.0.15

package/dist/lib/dom.d.ts

@@ -1,6 +1,7 @@
 import { ClassValue } from "clsx";
 import React, { LegacyRef, MutableRefObject, RefCallback } from "react";
 export declare const mergeRefs: <T extends unknown = any>(...refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined | null>) => RefCallback<T>;
-export declare const isReactComponent: (a: any) => a is React.FC;
+export declare const isReactComponent: (a: any) => a is React.ReactElement;
+export declare const isReactFC: (a: any) => a is (...any: any[]) => any;
 export declare const css: (...styles: ClassValue[]) => string;
 //# sourceMappingURL=dom.d.ts.map

package/dist/lib/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/lib/dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAC;AAExC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAExE,eAAO,MAAM,SAAS,GACjB,CAAC,iCAA6B,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,KAAG,WAAW,CAAC,CAAC,CAS1G,CAAC;AAEN,eAAO,MAAM,gBAAgB,MAAO,GAAG,KAAG,CAAC,IAAI,KAAK,CAAC,EAQpD,CAAC;AAEF,eAAO,MAAM,GAAG,cAAe,UAAU,EAAE,WAA0B,CAAC"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/lib/dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAC;AACxC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIxE,eAAO,MAAM,SAAS,GACjB,CAAC,iCAA6B,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,KAAG,WAAW,CAAC,CAAC,CAS1G,CAAC;AAEN,eAAO,MAAM,gBAAgB,MAAO,GAAG,KAAG,CAAC,IAAI,KAAK,CAAC,YAQpD,CAAC;AAEF,eAAO,MAAM,SAAS,MAAO,GAAG,gCAAmB,CAAC;AAEpD,eAAO,MAAM,GAAG,cAAe,UAAU,EAAE,WAA0B,CAAC"}

package/dist/lib/dom.js

@@ -1,4 +1,5 @@
 import { clsx } from "clsx";
+import { Is } from "sidekicker";
 import { twMerge } from "tailwind-merge";
 export const mergeRefs = (...refs) => (value) => {
     refs.forEach((ref) => {
@@ -19,4 +20,5 @@ export const isReactComponent = (a) => {
     }
     return a.$$typeof === Symbol.for("react.element");
 };
+export const isReactFC = (a) => Is.function(a);
 export const css = (...styles) => twMerge(clsx(styles));

package/dist/preset/preset.tailwind.d.ts

@@ -1,10 +1,7 @@
 import { Config } from "tailwindcss";
 import { createDesignTokens, parsers } from "./src/styles/design-tokens";
 import { defaultDarkTheme } from "./src/styles/theme";
-export declare const css: (template: {
-    raw: readonly string[] | ArrayLike<string>;
-}, ...substitutions: any[]) => string;
-export { createDesignTokens, parsers, defaultDarkTheme };
 declare const config: Partial<Config>;
 export default config;
+export { createDesignTokens, parsers, defaultDarkTheme };
 //# sourceMappingURL=preset.tailwind.d.ts.map

package/dist/preset/preset.tailwind.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.tailwind.d.ts","sourceRoot":"","sources":["../../preset.tailwind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAItD,eAAO,MAAM,GAAG;;qCAAa,CAAC;AAE9B,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAEzD,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAoC3B,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"preset.tailwind.d.ts","sourceRoot":"","sources":["../../preset.tailwind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAItD,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAmC3B,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/preset/preset.tailwind.js

@@ -1,21 +1,28 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
 import plugin from "tailwindcss/plugin";
 import { createDesignTokens, parsers } from "./src/styles/design-tokens";
 import { defaultDarkTheme } from "./src/styles/theme";
-var COLORS = createDesignTokens(defaultDarkTheme.colors, parsers.cssVariable);
-export var css = String.raw;
-export { createDesignTokens, parsers, defaultDarkTheme };
+var COLORS = createDesignTokens(defaultDarkTheme.colors, parsers.formatWithVar("hsla"));
 var config = {
     theme: {
         transitionTimingFunction: { DEFAULT: "cubic-bezier(1,.43,.36,.67)" },
         transitionDuration: { DEFAULT: "375ms" },
         extend: {
+            minWidth: { xs: "20rem" },
+            borderRadius: createDesignTokens(defaultDarkTheme.rounded, parsers.cssVariable),
             fill: COLORS,
             colors: COLORS,
-            borderColors: COLORS,
+            borderColors: __assign(__assign({}, COLORS), { DEFAULT: COLORS.card.border }),
             placeholderColor: COLORS,
             zIndex: {
                 floating: "10",
@@ -30,15 +37,15 @@ var config = {
             var addVariant = _a.addVariant;
             addVariant("link", ["&:hover", "&:active"]);
             addVariant("landing", ["&"]);
-            addVariant("group-assert", [css(templateObject_1 || (templateObject_1 = __makeTemplateObject([":merge(.group):valid:has(.input:valid:not(:placeholder-shown)) &"], [":merge(.group):valid:has(.input:valid:not(:placeholder-shown)) &"])))]);
+            addVariant("group-assert", [":merge(.group):valid:has(.input:valid:not(:placeholder-shown)) &"]);
             addVariant("group-error", [
-                css(templateObject_2 || (templateObject_2 = __makeTemplateObject([":merge(.group):invalid:has(.input:not(:focus):invalid[data-initialized=true]) &"], [":merge(.group):invalid:has(.input:not(:focus):invalid[data-initialized=true]) &"]))),
-                css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    :merge(.group[data-error=true][data-interactive=true]): has(.input [ data-initialized = true]) &;\n                "], ["\n                    :merge(.group[data-error=true][data-interactive=true]): has(.input [ data-initialized = true]) &;\n                "]))),
-                css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    :merge(.group[data-error=true][data-interactive=true]): has(.input) &;\n                "], ["\n                    :merge(.group[data-error=true][data-interactive=true]): has(.input) &;\n                "]))),
-                css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    :merge(.group[data-error=true]: has(.input[data-initialized=true]) ) &;\n                "], ["\n                    :merge(.group[data-error=true]: has(.input[data-initialized=true]) ) &;\n                "]))),
+                ":merge(.group):invalid:has(.input:not(:focus):invalid[data-initialized=true]) &",
+                ":merge(.group[data-error=true][data-interactive=true]):has(.input [ data-initialized = true]) &",
+                ":merge(.group[data-error=true][data-interactive=true]):has(.input) &",
+                ":merge(.group[data-error=true]:has(.input[data-initialized=true]) ) &",
             ]);
         }),
     ],
 };
 export default config;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+export { createDesignTokens, parsers, defaultDarkTheme };

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

@@ -1,26 +1,19 @@
-type DesignTokens = {
-    [K in string]: string | DesignTokens;
-};
-type Token = {
-    key: string;
-    value: string;
-};
-type DesignTokensParser = (value: string, key: string, combine: string) => string;
-type DesignTokensBuilder = (value: string, key: string, combine: string) => Token;
+import { DesignTokens, DesignTokensBuilder, DesignTokensParser, GeneralTokens, Token } from "./theme.types";
 export declare const parsers: {
-    cssVariable: (_: string, __: string, k: string) => string;
-    rgba: (value: string) => string;
-    rgb: (value: string) => string;
-    hsl: (value: string) => string;
-    hsla: (value: string) => string;
-    hex: (value: string) => string;
-    raw: (value: string) => string;
+    cssVariable: (_: string, __: string, k: string) => `var(--${string})`;
+    rgba: (v: string) => `rgba(${string})`;
+    rgb: (v: string) => `rgb(${string})`;
+    hsl: (v: string) => `hsl(${string})`;
+    hsla: (v: string) => `hsla(${string})`;
+    hex: (v: string) => string;
+    raw: (v: string) => string;
+    formatWithVar: (format: string) => (_: string, __: string, v: string) => `${string}(var(--${string}), <alpha-value>)`;
 };
-export declare const reduceTokens: <T extends DesignTokens>(colors: T, parse: DesignTokensBuilder, prefix?: string, append?: string) => Token[];
-export declare const createDesignTokens: <T extends DesignTokens>(colors: T, parse: DesignTokensParser, prefix?: string, append?: string) => T;
+export declare const reduceTokens: <T extends GeneralTokens>(colors: T, parse: DesignTokensBuilder, prefix?: string, append?: string) => Token[];
+export declare const createDesignTokens: <T extends GeneralTokens, Fn extends DesignTokensParser>(colors: T, parse: Fn, prefix?: string, append?: string) => T;
 export declare const createStyles: {
     default: (tokens: Token[]) => string;
     dark: (tokens: Token[]) => string;
 };
-export {};
+export declare const createTheme: (theme: DesignTokens, name?: string) => string;
 //# sourceMappingURL=design-tokens.d.ts.map

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,KAAK,YAAY,GAAG;KACf,CAAC,IAAI,MAAM,GAAG,MAAM,GAAG,YAAY;CACvC,CAAC;AAEF,KAAK,KAAK,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5C,KAAK,kBAAkB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;AAElF,KAAK,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,KAAK,CAAC;AAElF,eAAO,MAAM,OAAO;;;;;;;;CAQ0B,CAAC;AAE/C,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,YAAY,UAAU,CAAC,SAAS,mBAAmB,WAAU,MAAM,WAAe,MAAM,KAAQ,KAAK,EAQlI,CAAC;AAEX,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,YAAY,UAAU,CAAC,SAAS,kBAAkB,WAAU,MAAM,WAAe,MAAM,KAAQ,CAW7H,CAAC;AAYhB,eAAO,MAAM,YAAY;sBACH,KAAK,EAAE;mBACV,KAAK,EAAE;CACzB,CAAC"}
+{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/design-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE5G,eAAO,MAAM,OAAO;;cAEN,MAAM;aACP,MAAM;aACN,MAAM;cACL,MAAM;aACP,MAAM;aACN,MAAM;4BACS,MAAM,SAAS,MAAM,MAAM,MAAM,KAAK,MAAM;CAC1B,CAAC;AAE/C,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,aAAa,UAAU,CAAC,SAAS,mBAAmB,WAAU,MAAM,WAAe,MAAM,KAAQ,KAAK,EAQnI,CAAC;AAEX,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,aAAa,EAAE,EAAE,SAAS,kBAAkB,UAC7E,CAAC,SACF,EAAE,WACD,MAAM,WACN,MAAM,KACf,CAWY,CAAC;AAmBhB,eAAO,MAAM,YAAY;sBACH,KAAK,EAAE;mBACV,KAAK,EAAE;CACzB,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,YAAY,SAAS,MAAM,WAY7D,CAAC"}

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

@@ -11,12 +11,13 @@ var __assign = (this && this.__assign) || function () {
 };
 export var parsers = {
     cssVariable: function (_, __, k) { return "var(--".concat(k, ")"); },
-    rgba: function (value) { return "rgba(".concat(value, ")"); },
-    rgb: function (value) { return "rgb(".concat(value, ")"); },
-    hsl: function (value) { return "hsl(".concat(value, ")"); },
-    hsla: function (value) { return "hsla(".concat(value, ")"); },
-    hex: function (value) { return value; },
-    raw: function (value) { return value; },
+    rgba: function (v) { return "rgba(".concat(v, ")"); },
+    rgb: function (v) { return "rgb(".concat(v, ")"); },
+    hsl: function (v) { return "hsl(".concat(v, ")"); },
+    hsla: function (v) { return "hsla(".concat(v, ")"); },
+    hex: function (v) { return v; },
+    raw: function (v) { return v; },
+    formatWithVar: function (format) { return function (_, __, v) { return "".concat(format, "(var(--").concat(v, "), <alpha-value>)"); }; },
 };
 export var reduceTokens = function (colors, parse, prefix, append) {
     if (prefix === void 0) { prefix = ""; }
@@ -49,11 +50,25 @@ var modifiers = {
     default: function (variables) { return ":root { ".concat(variables, " }"); },
     dark: function (variables) { return "html.dark {".concat(variables, "}"); },
 };
-var createStyleContent = function (tokens, modifier) {
-    var content = tokens.map(function (token) { return "".concat(token.key, ": ").concat(token.value); }).join(";");
-    return modifier(content);
+var createStyleContent = function (tokens, modifiers) {
+    var v = modifiers.value || (function (_, s) { return s; });
+    var content = tokens.map(function (token) { return "".concat(token.key, ": ").concat(v(token.key, token.value)); }).join(";");
+    return modifiers.result(content);
 };
 export var createStyles = {
-    default: function (tokens) { return createStyleContent(tokens, modifiers.default); },
-    dark: function (tokens) { return createStyleContent(tokens, modifiers.dark); },
+    default: function (tokens) { return createStyleContent(tokens, { result: modifiers.default }); },
+    dark: function (tokens) { return createStyleContent(tokens, { result: modifiers.dark }); },
+};
+export var createTheme = function (theme, name) {
+    var fn = function (value, _, key) { return ({
+        key: "--".concat(key),
+        value: "".concat(value),
+    }); };
+    var colors = reduceTokens(theme.colors, fn);
+    var spacing = reduceTokens(theme.spacing, fn);
+    var rounded = reduceTokens(theme.rounded, fn);
+    return createStyleContent(colors.concat(spacing, rounded), {
+        result: function (variables) { return "html".concat(name ? ".".concat(name) : "", " {").concat(variables, "}"); },
+        value: function (_, v) { return v.replace("hsla(", "").replace(")", ""); },
+    });
 };

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

@@ -1,69 +1,4 @@
-export declare const defaultDarkTheme: {
-    name: string;
-    spacing: {
-        base: string;
-        lg: string;
-        sm: string;
-    };
-    colors: {
-        foreground: string;
-        background: string;
-        accent: string;
-        disabled: string;
-        primary: {
-            foreground: string;
-            DEFAULT: string;
-            subtle: string;
-            hover: string;
-        };
-        secondary: {
-            DEFAULT: string;
-            subtle: string;
-            hover: string;
-        };
-        info: {
-            DEFAULT: string;
-            subtle: string;
-            hover: string;
-        };
-        danger: {
-            DEFAULT: string;
-            subtle: string;
-            hover: string;
-        };
-        success: {
-            DEFAULT: string;
-            subtle: string;
-            hover: string;
-        };
-        input: {
-            border: string;
-            placeholder: string;
-            "mask-error": string;
-            "switch-bg": string;
-            switch: string;
-        };
-        card: {
-            background: string;
-            border: string;
-            overlay: string;
-        };
-        floating: {
-            background: string;
-            border: string;
-            overlay: string;
-        };
-        tooltip: {
-            background: string;
-            border: string;
-        };
-        table: {
-            background: string;
-            border: string;
-            row: string;
-        };
-    };
-};
-export type Theme = typeof defaultDarkTheme;
-export declare const defaultLightTheme: Theme;
+import { DesignTokens } from "./theme.types";
+export declare const defaultDarkTheme: DesignTokens;
+export declare const defaultLightTheme: DesignTokens;
 //# sourceMappingURL=theme.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiE5B,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,gBAAgB,CAAC;AAE5C,eAAO,MAAM,iBAAiB,EAAE,KAiE/B,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,gBAAgB,EAAE,YA6E9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,YA6E/B,CAAC"}

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

@@ -1,66 +1,78 @@
 export var defaultDarkTheme = {
     name: "dark",
+    rounded: {
+        pill: "2rem",
+    },
     spacing: {
         base: "1rem",
         lg: "1.5rem",
         sm: "0.75rem",
     },
     colors: {
-        foreground: "#f8fafc",
-        background: "#191817",
-        accent: "#0ea5e9",
-        disabled: "#52525b",
+        foreground: "hsla(210, 40%, 98%)",
+        background: "hsla(0, 0%, 9%)",
+        accent: "hsla(199, 89%, 54%)",
+        disabled: "hsla(240, 4%, 33%)",
         primary: {
-            foreground: "#f8fafc",
-            DEFAULT: "#0ea5e9",
-            subtle: "#bae6fd",
-            hover: "#0284c7",
+            foreground: "hsla(210, 40%, 98%)",
+            DEFAULT: "hsla(199, 89%, 54%)",
+            subtle: "hsla(199, 95%, 87%)",
+            hover: "hsla(199, 97%, 40%)",
         },
         secondary: {
-            DEFAULT: "#475569",
-            subtle: "#cbd5e1",
-            hover: "#334155",
+            DEFAULT: "hsla(210, 14%, 35%)",
+            subtle: "hsla(210, 27%, 88%)",
+            hover: "hsla(210, 21%, 27%)",
+            foreground: "hsla(210, 40%, 98%)",
         },
         info: {
-            DEFAULT: "#3b82f6",
-            subtle: "#93c5fd",
-            hover: "#1d4ed8",
+            DEFAULT: "hsla(219, 91%, 59%)",
+            subtle: "hsla(219, 93%, 77%)",
+            hover: "hsla(219, 83%, 41%)",
+            foreground: "hsla(210, 40%, 98%)",
+        },
+        warn: {
+            DEFAULT: "hsla(25, 95%, 53%)",
+            subtle: "hsla(45, 95%, 66%)",
+            hover: "hsla(35, 92%, 41%)",
+            foreground: "hsla(210, 40%, 98%)",
         },
         danger: {
-            DEFAULT: "#ef4444",
-            subtle: "#fca5a5",
-            hover: "#dc2626",
+            DEFAULT: "hsla(358, 75%, 59%)",
+            subtle: "hsla(0, 94%, 81%)",
+            hover: "hsla(0, 82%, 47%)",
+            foreground: "hsla(210, 40%, 98%)",
         },
         success: {
-            DEFAULT: "#10b981",
-            subtle: "#6ee7b7",
-            hover: "#047857",
+            DEFAULT: "hsla(160, 73%, 36%)",
+            subtle: "hsla(160, 75%, 75%)",
+            hover: "hsla(160, 91%, 27%)",
+            foreground: "hsla(210, 40%, 98%)",
         },
         input: {
-            border: "#52525b",
-            placeholder: "#94a3b8",
-            "mask-error": "#fca5a5",
-            "switch-bg": "#171717",
-            switch: "#fff",
+            border: "hsla(240, 4%, 33%)",
+            placeholder: "hsla(210, 24%, 71%)",
+            "mask-error": "hsla(0, 94%, 81%)",
+            "switch-bg": "hsla(0, 0%, 9%)",
+            switch: "hsla(0, 0%, 100%)",
         },
         card: {
-            background: "#27272a",
-            border: "#3f3f46",
-            overlay: "#00000080",
+            background: "hsla(0, 0%, 15%)",
+            border: "hsla(240, 7%, 27%)",
         },
         floating: {
-            background: "#252525",
-            border: "#3f3f46",
-            overlay: "#00000080",
+            background: "hsla(0, 0%, 14%)",
+            border: "hsla(240, 7%, 27%)",
+            overlay: "hsla(0, 0%, 0%)",
         },
         tooltip: {
-            background: "#141414",
-            border: "#27272a",
+            background: "hsla(0, 0%, 8%)",
+            border: "hsla(0, 0%, 15%)",
         },
         table: {
-            background: "#27272a",
-            border: "#52525b",
-            row: "#3f3f46",
+            background: "hsla(0, 0%, 15%)",
+            border: "hsla(240, 4%, 33%)",
+            row: "hsla(240, 7%, 27%)",
         },
     },
 };
@@ -71,62 +83,74 @@ export var defaultLightTheme = {
         lg: "1.5rem",
         sm: "0.75rem",
     },
+    rounded: {
+        pill: "2rem",
+    },
     colors: {
-        foreground: "#334155",
-        background: "#f1f5f9",
-        accent: "#0ea5e9",
-        disabled: "#52525b",
+        foreground: "hsla(210, 14%, 27%)",
+        background: "hsla(210, 34%, 96%)",
+        accent: "hsla(199, 89%, 54%)",
+        disabled: "hsla(240, 4%, 33%)",
         primary: {
-            foreground: "#f8fafc",
-            DEFAULT: "#0ea5e9",
-            subtle: "#bae6fd",
-            hover: "#0284c7",
+            foreground: "hsla(210, 40%, 98%)",
+            DEFAULT: "hsla(199, 89%, 54%)",
+            subtle: "hsla(199, 95%, 87%)",
+            hover: "hsla(199, 97%, 40%)",
         },
         secondary: {
-            DEFAULT: "#475569",
-            subtle: "#cbd5e1",
-            hover: "#334155",
+            DEFAULT: "hsla(210, 14%, 35%)",
+            subtle: "hsla(210, 27%, 88%)",
+            hover: "hsla(210, 21%, 27%)",
+            foreground: "hsla(210, 40%, 98%)",
         },
         info: {
-            DEFAULT: "#3b82f6",
-            subtle: "#93c5fd",
-            hover: "#1d4ed8",
+            DEFAULT: "hsla(219, 91%, 59%)",
+            subtle: "hsla(219, 93%, 77%)",
+            hover: "hsla(219, 83%, 41%)",
+            foreground: "hsla(210, 34%, 96%)",
         },
         danger: {
-            DEFAULT: "#ef4444",
-            subtle: "#fca5a5",
-            hover: "#dc2626",
+            DEFAULT: "hsla(0, 82%, 63%)",
+            subtle: "hsla(0, 94%, 81%)",
+            hover: "hsla(0, 82%, 47%)",
+            foreground: "hsla(210, 34%, 96%)",
+        },
+        warn: {
+            DEFAULT: "hsla(25, 95%, 53%)",
+            subtle: "hsla(45, 95%, 66%)",
+            hover: "hsla(35, 92%, 41%)",
+            foreground: "hsla(210, 34%, 96%)",
         },
         success: {
-            DEFAULT: "#10b981",
-            subtle: "#6ee7b7",
-            hover: "#047857",
+            DEFAULT: "hsla(160, 73%, 36%)",
+            subtle: "hsla(160, 75%, 75%)",
+            hover: "hsla(160, 91%, 27%)",
+            foreground: "hsla(210, 34%, 96%)",
         },
         input: {
-            border: "#52525b",
-            placeholder: "#94a3b8",
-            "mask-error": "#fca5a5",
-            "switch-bg": "#171717",
-            switch: "#fff",
+            border: "hsla(240, 4%, 33%)",
+            placeholder: "hsla(210, 24%, 71%)",
+            "mask-error": "hsla(0, 94%, 81%)",
+            "switch-bg": "hsla(0, 0%, 9%)",
+            switch: "hsla(0, 0%, 100%)",
         },
         card: {
-            background: "#ffffff",
-            border: "#e2e8f0",
-            overlay: "#00000080",
+            background: "hsla(0, 0%, 100%)",
+            border: "hsla(210, 25%, 88%)",
         },
         floating: {
-            background: "#ffffff",
-            border: "#e2e8f0",
-            overlay: "#00000080",
+            background: "hsla(0, 0%, 100%)",
+            border: "hsla(210, 25%, 88%)",
+            overlay: "hsla(0, 0%, 0%)",
         },
         tooltip: {
-            background: "#141414",
-            border: "#27272a",
+            background: "hsla(0, 0%, 8%)",
+            border: "hsla(0, 0%, 15%)",
         },
         table: {
-            background: "#ffffff",
-            border: "#e2e8f0",
-            row: "#94a3b8",
+            background: "hsla(0, 0%, 100%)",
+            border: "hsla(210, 25%, 88%)",
+            row: "hsla(210, 24%, 71%)",
         },
     },
 };

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

@@ -0,0 +1,93 @@
+export type GeneralTokens = {
+    [K in string]: string | GeneralTokens;
+};
+export type DesignTokens = {
+    name: string;
+    rounded: {
+        pill: string;
+    };
+    spacing: {
+        base: string;
+        lg: string;
+        sm: string;
+    };
+    colors: {
+        foreground: string;
+        background: string;
+        accent: string;
+        disabled: string;
+        primary: {
+            foreground: string;
+            DEFAULT: string;
+            subtle: string;
+            hover: string;
+        };
+        warn: {
+            DEFAULT: string;
+            subtle: string;
+            hover: string;
+            foreground: string;
+        };
+        secondary: {
+            DEFAULT: string;
+            subtle: string;
+            hover: string;
+            foreground: string;
+        };
+        info: {
+            DEFAULT: string;
+            subtle: string;
+            hover: string;
+            foreground: string;
+        };
+        danger: {
+            DEFAULT: string;
+            subtle: string;
+            hover: string;
+            foreground: string;
+        };
+        success: {
+            DEFAULT: string;
+            subtle: string;
+            hover: string;
+            foreground: string;
+        };
+        input: {
+            border: string;
+            placeholder: string;
+            "mask-error": string;
+            "switch-bg": string;
+            switch: string;
+        };
+        card: {
+            background: string;
+            border: string;
+        };
+        floating: {
+            background: string;
+            border: string;
+            overlay: string;
+        };
+        tooltip: {
+            background: string;
+            border: string;
+        };
+        table: {
+            background: string;
+            border: string;
+            row: string;
+        };
+    };
+};
+export type Token = {
+    key: string;
+    value: string;
+};
+export type DesignTokensParser = ((value: string, key: string, combine: string) => string) | ((format: string) => (value: string, key: string, combine: string) => string);
+export type DesignTokensBuilder = (value: string, key: string, combine: string) => Token;
+type Fn = (...a: any[]) => any;
+export type DeepParse<T extends GeneralTokens, F extends Fn> = {
+    [K in keyof T]: T[K] extends GeneralTokens ? DeepParse<T[K], F> : ReturnType<Fn>;
+};
+export {};
+//# sourceMappingURL=theme.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.types.ts"],"names":[],"mappings":"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"}

package/dist/preset/src/styles/theme.types.js

@@ -0,0 +1 @@
+export {};