@g4rcez/components 0.0.4 → 0.0.5

package/dist/preset.tailwind.d.ts

@@ -0,0 +1,32 @@
+declare module "src/styles/design-tokens" {
+    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;
+    export 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;
+    };
+    export const reduceTokens: <T extends DesignTokens>(colors: T, parse: DesignTokensBuilder, prefix?: string, append?: string) => Token[];
+    export const createDesignTokens: <T extends DesignTokens>(colors: T, parse: DesignTokensParser, prefix?: string, append?: string) => T;
+    export const createStyles: {
+        default: (tokens: Token[]) => string;
+        dark: (tokens: Token[]) => string;
+    };
+}
+declare module "preset.tailwind" {
+    import { Config } from "tailwindcss";
+    const config: Partial<Config>;
+    export default config;
+}
+//# sourceMappingURL=preset.tailwind.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"preset.tailwind.d.ts","sourceRoot":"","sources":["../src/styles/design-tokens.ts","../preset.tailwind.ts"],"names":[],"mappings":";IAAA,KAAK,YAAY,GAAG;SACf,CAAC,IAAI,MAAM,GAAG,MAAM,GAAG,YAAY;KACvC,CAAC;IAEF,KAAK,KAAK,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAE5C,KAAK,kBAAkB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAElF,KAAK,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,KAAK,CAAC;IAElF,MAAM,CAAC,MAAM,OAAO;;;;;;;;KAQ0B,CAAC;IAE/C,MAAM,CAAC,MAAM,YAAY,GAAI,CAAC,SAAS,YAAY,UAAU,CAAC,SAAS,mBAAmB,WAAU,MAAM,WAAe,MAAM,KAAQ,KAAK,EAQlI,CAAC;IAEX,MAAM,CAAC,MAAM,kBAAkB,GAAI,CAAC,SAAS,YAAY,UAAU,CAAC,SAAS,kBAAkB,WAAU,MAAM,WAAe,MAAM,KAAQ,CAW7H,CAAC;IAYhB,MAAM,CAAC,MAAM,YAAY;0BACH,KAAK,EAAE;uBACV,KAAK,EAAE;KACzB,CAAC;;;ICxDF,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;IASrC,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CA8B3B,CAAC;IAEF,eAAe,MAAM,CAAC"}

package/dist/preset.tailwind.js

@@ -0,0 +1,153 @@
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+define("src/styles/design-tokens", ["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.createStyles = exports.createDesignTokens = exports.reduceTokens = exports.parsers = void 0;
+    exports.parsers = {
+        cssVariable: (_, __, k) => `var(--${k})`,
+        rgba: (value) => `rgba(${value})`,
+        rgb: (value) => `rgb(${value})`,
+        hsl: (value) => `hsl(${value})`,
+        hsla: (value) => `hsla(${value})`,
+        hex: (value) => value,
+        raw: (value) => value,
+    };
+    const reduceTokens = (colors, parse, prefix = "", append = "") => Object.entries(colors).reduce((acc, [key, value]) => {
+        const combine = append === "" ? `${prefix}${key}` : `${append}-${key}`;
+        if (typeof value === "string") {
+            const k = append === "" ? `${prefix}${key}` : key;
+            return acc.concat(parse(value, k, combine));
+        }
+        return acc.concat((0, exports.reduceTokens)(value, parse, prefix, combine));
+    }, []);
+    exports.reduceTokens = reduceTokens;
+    const createDesignTokens = (colors, parse, prefix = "", append = "") => Object.entries(colors).reduce((acc, [key, value]) => {
+        const combine = append === "" ? `${prefix}${key}` : `${append}-${key}`;
+        if (typeof value === "string") {
+            const k = append === "" ? `${prefix}${key}` : key;
+            return Object.assign(Object.assign({}, acc), { [k]: parse(value, key, combine) });
+        }
+        return Object.assign(Object.assign({}, acc), { [key]: (0, exports.createDesignTokens)(value, parse, prefix, combine) });
+    }, {});
+    exports.createDesignTokens = createDesignTokens;
+    const modifiers = {
+        default: (variables) => `:root { ${variables} }`,
+        dark: (variables) => `html.dark {${variables}}`,
+    };
+    const createStyleContent = (tokens, modifier) => {
+        const content = tokens.map((token) => `${token.key}: ${token.value}`).join(";");
+        return modifier(content);
+    };
+    exports.createStyles = {
+        default: (tokens) => createStyleContent(tokens, modifiers.default),
+        dark: (tokens) => createStyleContent(tokens, modifiers.dark),
+    };
+});
+define("src/styles/dark", [], {
+    "name": "dark",
+    "spacing": {
+        "base": "1rem",
+        "lg": "1.5rem",
+        "sm": "0.75rem"
+    },
+    "colors": {
+        "foreground": "#f8fafc",
+        "background": "#191817",
+        "accent": "#0ea5e9",
+        "disabled": "#52525b",
+        "primary": {
+            "foreground": "#f8fafc",
+            "DEFAULT": "#0ea5e9",
+            "subtle": "#bae6fd",
+            "hover": "#0284c7"
+        },
+        "secondary": {
+            "DEFAULT": "#475569",
+            "subtle": "#cbd5e1",
+            "hover": "#334155"
+        },
+        "info": {
+            "DEFAULT": "#3b82f6",
+            "subtle": "#93c5fd",
+            "hover": "#1d4ed8"
+        },
+        "danger": {
+            "DEFAULT": "#ef4444",
+            "subtle": "#fca5a5",
+            "hover": "#dc2626"
+        },
+        "success": {
+            "DEFAULT": "#10b981",
+            "subtle": "#6ee7b7",
+            "hover": "#047857"
+        },
+        "input": {
+            "border": "#52525b",
+            "placeholder": "#94a3b8",
+            "mask-error": "#fca5a5",
+            "switch-bg": "#171717",
+            "switch": "#fff"
+        },
+        "card": {
+            "background": "#27272a",
+            "border": "#3f3f46",
+            "overlay": "#00000080"
+        },
+        "floating": {
+            "background": "#252525",
+            "border": "#3f3f46",
+            "overlay": "#00000080"
+        },
+        "tooltip": {
+            "background": "#141414",
+            "border": "#27272a"
+        },
+        "table": {
+            "background": "#27272a",
+            "border": "#52525b",
+            "row": "#3f3f46"
+        }
+    }
+});
+define("preset.tailwind", ["require", "exports", "tailwindcss/plugin", "src/styles/dark", "src/styles/design-tokens"], function (require, exports, plugin_1, dark_json_1, design_tokens_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    plugin_1 = __importDefault(plugin_1);
+    dark_json_1 = __importDefault(dark_json_1);
+    const COLORS = (0, design_tokens_1.createDesignTokens)(dark_json_1.default.colors, design_tokens_1.parsers.cssVariable);
+    const css = String.raw;
+    const config = {
+        theme: {
+            transitionTimingFunction: { DEFAULT: "cubic-bezier(1,.43,.36,.67)" },
+            transitionDuration: { DEFAULT: "375ms" },
+            extend: {
+                fill: COLORS,
+                colors: COLORS,
+                borderColors: COLORS,
+                placeholderColor: COLORS,
+                zIndex: {
+                    floating: "10",
+                },
+                boxShadow: {
+                    floating: "rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px"
+                }
+            },
+        },
+        plugins: [
+            (0, plugin_1.default)(function ({ addVariant }) {
+                addVariant("link", ["&:hover", "&:active"]);
+                addVariant("landing", ["&"]);
+                addVariant("group-assert", [css `:merge(.group):valid:has(.input:valid:not(:placeholder-shown)) &`]);
+                addVariant("group-error", [
+                    css `:merge(.group):invalid:has(.input:not(:focus):invalid[data-initialized=true]) &`,
+                    css `:merge(.group[data-error=true][data-interactive=true]):has(.input[data-initialized=true]) &`,
+                    css `:merge(.group[data-error=true][data-interactive=true]):has(.input) &`,
+                    css `:merge(.group[data-error=true]:has(.input[data-initialized=true])) &`,
+                ]);
+            }),
+        ],
+    };
+    exports.default = config;
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@g4rcez/components",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "scripts": {
     "build": "vite build; npm run lib:types; npm run preset; npm run lib:css",
     "dev": "next dev",
@@ -30,15 +30,16 @@
       }
     },
     "./tailwind.config": {
-      "type": "./dist/tailwind.config.d.ts",
-      "import": "./dist/tailwind.config.js",
-      "require": "./dist/tailwind.config.js",
-      "default": "./dist/tailwind.config.js"
+      "type": "./dist/preset.tailwind.d.ts",
+      "import": "./dist/preset.tailwind.js",
+      "require": "./dist/preset.tailwind.js",
+      "default": "./dist/preset.tailwind.js"
     },
-    "./index.css": "./dist/index.css"
+    "./dist/index.css": "./dist/index.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "dist/index.css"
   ],
   "dependencies": {
     "@dnd-kit/core": "6.1.0",