@tecsinapse/cortex-core 1.2.0 → 2.0.0-beta.0

package/dist/cjs/components/input/input.js

@@ -4,7 +4,7 @@ var clsx = require('clsx');
 var tailwindVariants = require('tailwind-variants');
 
 const inputBaseStyles = tailwindVariants.tv({
-  base: "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-white focus-within:outline focus-within:outline-1 text-base font-bold items-center border rounded-mili has-[:disabled]:bg-transparent",
+  base: "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-white focus-within:outline focus-within:outline-1 text-base font-bold items-center border rounded-mili has-[:disabled]:bg-transparent has-[:disabled]:border-secondary-light has-[:disabled]:text-secondary-light",
   variants: {
     intent: {
       default: [

package/dist/cjs/components/modal/modal.js

@@ -3,7 +3,7 @@
 var tailwindVariants = require('tailwind-variants');
 
 const modal = tailwindVariants.tv({
-  base: "fixed rounded-micro p-kilo bg-white shadow-default flex transition inset-0 z-modal",
+  base: "fixed rounded-micro p-kilo bg-white shadow-default flex transition inset-0 m-auto max-w-fit z-modal",
   variants: {
     open: {
       true: "scale-100 visible",

package/dist/cjs/index.js

@@ -19,9 +19,8 @@ var tag = require('./components/tag/tag.js');
 var toggle = require('./components/toggle/toggle.js');
 var tooltip = require('./components/tooltip/tooltip.js');
 var manager = require('./components/manager/manager.js');
-var index = require('./preset/index.js');
 var definitions = require('./tokens/definitions.js');
-var index$1 = require('./utils/index.js');
+var index = require('./utils/index.js');
 
 
 
@@ -62,7 +61,6 @@ exports.toggle = toggle.toggle;
 exports.tooltip = tooltip.tooltip;
 exports.tooltipContainer = tooltip.tooltipContainer;
 exports.manager = manager.manager;
-exports.preset = index;
 exports.borderColor = definitions.borderColor;
 exports.borderRadius = definitions.borderRadius;
 exports.borderWidth = definitions.borderWidth;
@@ -73,4 +71,4 @@ exports.fontSize = definitions.fontSize;
 exports.spacing = definitions.spacing;
 exports.textColor = definitions.textColor;
 exports.zIndex = definitions.zIndex;
-exports.updateThemeColors = index$1.updateThemeColors;
+exports.updateThemeColors = index.updateThemeColors;

package/dist/default.css

@@ -0,0 +1,192 @@
+@import "tailwindcss";
+
+@theme {
+  /* Colors - primary */
+  --color-primary-xlight: #fef9f0;
+  --color-primary-light: #fccb83;
+  --color-primary-medium: #f89907;
+  --color-primary-dark: #ae6b05;
+  --color-primary-xdark: #633d03;
+
+  /* Colors - secondary */
+  --color-secondary-xlight: #f8f7f7;
+  --color-secondary-light: #c2bfbc;
+  --color-secondary-medium: #85807a;
+  --color-secondary-dark: #5d5955;
+  --color-secondary-xdark: #353231;
+
+  /* Colors - info */
+  --color-info-xlight: #f0f8fe;
+  --color-info-light: #85c7fa;
+  --color-info-medium: #239bf6;
+  --color-info-dark: #0873c4;
+  --color-info-xdark: #043962;
+
+  /* Colors - success / warning / error */
+  --color-success-xlight: #f3fcf8;
+  --color-success-light: #99e6c9;
+  --color-success-medium: #2db783;
+  --color-success-dark: #238f67;
+  --color-success-xdark: #14523b;
+
+  --color-warning-xlight: #fffcf0;
+  --color-warning-light: #ffe380;
+  --color-warning-medium: #ffc700;
+  --color-warning-dark: #cc9f00;
+  --color-warning-xdark: #665000;
+
+  --color-error-xlight: #fdf3f2;
+  --color-error-light: #ee9891;
+  --color-error-medium: #e04638;
+  --color-error-dark: #9b2318;
+  --color-error-xdark: #58240e;
+
+  /* Misc */
+  --color-body: #f8f7f7;
+
+  /* Spacing */
+  --spacing-nano: 0.125rem;
+  --spacing-micro: 0.25rem;
+  --spacing-mili: 0.5rem;
+  --spacing-centi: 0.75rem;
+  --spacing-deca: 1rem;
+  --spacing-kilo: 1.5rem;
+  --spacing-mega: 2rem;
+  --spacing-giga: 2.5rem;
+  --spacing-tera: 3rem;
+  --spacing-peta: 3.5rem;
+  --spacing-hexa: 4rem;
+
+  /* Radius */
+  --radius-nano: 0.125rem;
+  --radius-micro: 0.25rem;
+  --radius-mili: 0.5rem;
+  --radius-centi: 1rem;
+  --radius-deca: 1.5rem;
+  --radius-pill: 999999px;
+
+  /* Border width */
+  --border-width-pico: 0.063rem;
+  --border-width-nano: 0.125rem;
+
+  /* Font families */
+  --font-sans: 'Lato', system-ui, -apple-system, 'BlinkMacSystemFont', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono: Consolas, monaco, monospace;
+
+  /* Font sizes com line-height */
+
+  /* H5 */
+  --text-h5: 1rem;
+  --text-h5--line-height: 1.5rem;
+  --text-h5-lg: 1.5rem;
+
+  /* H4 */
+  --text-h4: 1.125rem;
+  --text-h4--line-height: 1.688rem;
+  --text-h4-lg: 1.688rem;
+
+  /* H3 */
+  --text-h3: 1.25rem;
+  --text-h3--line-height: 2rem;
+  --text-h3-lg: 2rem;
+
+  /* H2 */
+  --text-h2: 1.625rem;
+  --text-h2--line-height: 2.375rem;
+  --text-h2-lg: 2.375rem;
+
+  /* H1 */
+  --text-h1: 2rem;
+  --text-h1--line-height: 2.625rem;
+  --text-h1-lg: 2.625rem;
+
+  /* Base / Sub / Label */
+  --text-base: 0.875rem;
+  --text-base--line-height: 1.313rem;
+  --text-base-lg: 1.313rem;
+
+  --text-sub: 0.75rem;
+  --text-sub--line-height: 1.125rem;
+  --text-sub-lg: 1.125rem;
+
+  --text-label: 0.625rem;
+  --text-label--line-height: 0.75rem;
+  --text-label-lg: 0.75rem;
+
+  /* Icon sizes */
+  --text-micro: 0.75rem;
+  --text-mili: 0.875rem;
+  --text-centi: 1rem;
+  --text-deca: 1.125rem;
+  --text-kilo: 1.5rem;
+  --text-mega: 2rem;
+
+  /* Box shadow */
+  --shadow-default: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+  /* Border colors */
+  --color-border-success-light: #99E6C9;
+
+  /* Text colors */
+  --color-text-light: #fff;
+  --color-text-medium: #85807a;
+  --color-text-dark: #353231;
+  --color-text-orange: #f89907;
+
+  /* Z-index */
+  --z-index-default: 0;
+  --z-index-absolute: 1;
+  --z-index-select: 20;
+  --z-index-input: 20;
+  --z-index-popover: 30;
+  --z-index-tooltip: 40;
+  --z-index-header: 600;
+  --z-index-backdrop: 700;
+  --z-index-drawer: 700;
+  --z-index-sidebar: 800;
+  --z-index-modal: 1000;
+
+  /* Opacity customizada */
+  --opacity-1: 1;
+
+  /* Duration customizada */
+  --duration-250: 250ms;
+
+  /* Animações customizadas */
+  --animate-opacity: opacity 1s ease-in-out;
+  --animate-progress: progress 1s infinite linear;
+
+  /* Transform origin customizado */
+  --transform-origin-left-right: 0% 50%;
+
+  /* Keyframes */
+  @keyframes opacity {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes progress {
+    0% {
+      transform: translateX(0) scaleX(0);
+    }
+
+    40% {
+      transform: translateX(0) scaleX(0.4);
+    }
+
+    100% {
+      transform: translateX(100%) scaleX(0.5);
+    }
+  }
+}
+
+@layer utilities {
+  .origin-left-right {
+    transform-origin: var(--transform-origin-left-right);
+  }
+}

package/dist/esm/components/input/input.js

@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
 import { tv } from 'tailwind-variants';
 
 const inputBaseStyles = tv({
-  base: "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-white focus-within:outline focus-within:outline-1 text-base font-bold items-center border rounded-mili has-[:disabled]:bg-transparent",
+  base: "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-white focus-within:outline focus-within:outline-1 text-base font-bold items-center border rounded-mili has-[:disabled]:bg-transparent has-[:disabled]:border-secondary-light has-[:disabled]:text-secondary-light",
   variants: {
     intent: {
       default: [

package/dist/esm/components/modal/modal.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 
 const modal = tv({
-  base: "fixed rounded-micro p-kilo bg-white shadow-default flex transition inset-0 z-modal",
+  base: "fixed rounded-micro p-kilo bg-white shadow-default flex transition inset-0 m-auto max-w-fit z-modal",
   variants: {
     open: {
       true: "scale-100 visible",

package/dist/esm/index.js

@@ -17,6 +17,5 @@ export { tag } from './components/tag/tag.js';
 export { styleInputElement, styleLabelElement, toggle } from './components/toggle/toggle.js';
 export { tooltip, tooltipContainer } from './components/tooltip/tooltip.js';
 export { manager } from './components/manager/manager.js';
-export { default as preset } from './preset/index.js';
 export { borderColor, borderRadius, borderWidth, boxShadow, colors, fontFamily, fontSize, spacing, textColor, zIndex } from './tokens/definitions.js';
 export { updateThemeColors } from './utils/index.js';

package/dist/types/components/input/input.d.ts

@@ -6,7 +6,7 @@ export declare const inputBaseStyles: import("tailwind-variants").TVReturnType<{
         warning: string[];
         error: string[];
     };
-}, undefined, "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-white focus-within:outline focus-within:outline-1 text-base font-bold items-center border rounded-mili has-[:disabled]:bg-transparent", {
+}, undefined, "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-white focus-within:outline focus-within:outline-1 text-base font-bold items-center border rounded-mili has-[:disabled]:bg-transparent has-[:disabled]:border-secondary-light has-[:disabled]:text-secondary-light", {
     intent: {
         default: string[];
         success: string[];
@@ -20,7 +20,7 @@ export declare const inputBaseStyles: import("tailwind-variants").TVReturnType<{
         warning: string[];
         error: string[];
     };
-}, undefined, "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-white focus-within:outline focus-within:outline-1 text-base font-bold items-center border rounded-mili has-[:disabled]:bg-transparent", unknown, unknown, undefined>>;
+}, undefined, "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-white focus-within:outline focus-within:outline-1 text-base font-bold items-center border rounded-mili has-[:disabled]:bg-transparent has-[:disabled]:border-secondary-light has-[:disabled]:text-secondary-light", unknown, unknown, undefined>>;
 declare const labelBaseStyles: import("tailwind-variants").TVReturnType<{
     intent: {
         default: string[];

package/dist/types/components/modal/modal.d.ts

@@ -3,7 +3,7 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "fixed rounded-micro p-kilo bg-white shadow-default flex transition inset-0 z-modal", {
+}, undefined, "fixed rounded-micro p-kilo bg-white shadow-default flex transition inset-0 m-auto max-w-fit z-modal", {
     open: {
         true: string;
         false: string;
@@ -13,4 +13,4 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "fixed rounded-micro p-kilo bg-white shadow-default flex transition inset-0 z-modal", unknown, unknown, undefined>>;
+}, undefined, "fixed rounded-micro p-kilo bg-white shadow-default flex transition inset-0 m-auto max-w-fit z-modal", unknown, unknown, undefined>>;

package/dist/types/index.d.ts

@@ -1,4 +1,3 @@
 export * from './components';
-export { default as preset } from './preset';
 export * from './tokens/definitions';
 export * from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-core",
-  "version": "1.2.0",
+  "version": "2.0.0-beta.0",
   "license": "MIT",
   "description": "Core library for tailwindcss based design",
   "main": "dist/esm/index.js",
@@ -17,7 +17,10 @@
   },
   "dependencies": {
     "clsx": "2.1.1",
-    "tailwind-variants": "1.0.0"
+    "tailwind-variants": "3.1.1"
+  },
+  "devDependencies": {
+    "rollup-plugin-copy": "^3.4.0"
   },
   "repository": {
     "type": "git",
@@ -29,7 +32,7 @@
   },
   "homepage": "https://tecsinapse.github.io/design-system/",
   "peerDependencies": {
-    "tailwindcss": ">=3.3.0"
+    "tailwindcss": "^4.1.16"
   },
-  "gitHead": "877a756e55265fa6fef624c881b496ece5b2366b"
-}
+  "gitHead": "093769fc2a963c315d0062216ca73f692ee3d385"
+}

package/dist/cjs/preset/index.js

@@ -1,40 +0,0 @@
-'use strict';
-
-var definitions = require('../tokens/definitions.js');
-
-const preset = {
-  theme: {
-    fontFamily: definitions.fontFamily,
-    extend: {
-      colors: definitions.colors,
-      textColor: definitions.textColor,
-      spacing: definitions.spacing,
-      borderRadius: definitions.borderRadius,
-      borderWidth: definitions.borderWidth,
-      fontSize: definitions.fontSize,
-      boxShadow: definitions.boxShadow,
-      borderColor: definitions.borderColor,
-      zIndex: definitions.zIndex,
-      keyframes: {
-        opacity: {
-          "0%": { opacity: 0 },
-          "100%": { opacity: 1 }
-        },
-        progress: {
-          "0%": { transform: "translateX(0) scaleX(0)" },
-          "40%": { transform: "translateX(0) scaleX(0.4)" },
-          "100%": { transform: "translateX(100%) scaleX(0.5)" }
-        }
-      },
-      animation: {
-        opacity: "opacity 1s ease-in-out",
-        progress: "progress 1s infinite linear"
-      },
-      transformOrigin: {
-        "left-right": "0% 50%"
-      }
-    }
-  }
-};
-
-module.exports = preset;

package/dist/esm/preset/index.js

@@ -1,38 +0,0 @@
-import { fontFamily, colors, textColor, spacing, borderRadius, borderWidth, fontSize, boxShadow, borderColor, zIndex } from '../tokens/definitions.js';
-
-const preset = {
-  theme: {
-    fontFamily,
-    extend: {
-      colors,
-      textColor,
-      spacing,
-      borderRadius,
-      borderWidth,
-      fontSize,
-      boxShadow,
-      borderColor,
-      zIndex,
-      keyframes: {
-        opacity: {
-          "0%": { opacity: 0 },
-          "100%": { opacity: 1 }
-        },
-        progress: {
-          "0%": { transform: "translateX(0) scaleX(0)" },
-          "40%": { transform: "translateX(0) scaleX(0.4)" },
-          "100%": { transform: "translateX(100%) scaleX(0.5)" }
-        }
-      },
-      animation: {
-        opacity: "opacity 1s ease-in-out",
-        progress: "progress 1s infinite linear"
-      },
-      transformOrigin: {
-        "left-right": "0% 50%"
-      }
-    }
-  }
-};
-
-export { preset as default };

package/dist/types/preset/index.d.ts

@@ -1,152 +0,0 @@
-declare const preset: {
-    theme: {
-        fontFamily: {
-            sans: string[];
-            mono: string;
-        };
-        extend: {
-            colors: {
-                primary: {
-                    xlight: string;
-                    light: string;
-                    medium: string;
-                    dark: string;
-                    xdark: string;
-                };
-                secondary: {
-                    xlight: string;
-                    light: string;
-                    medium: string;
-                    dark: string;
-                    xdark: string;
-                };
-                info: {
-                    xlight: string;
-                    light: string;
-                    medium: string;
-                    dark: string;
-                    xdark: string;
-                };
-                success: {
-                    xlight: string;
-                    light: string;
-                    medium: string;
-                    dark: string;
-                    xdark: string;
-                };
-                warning: {
-                    xlight: string;
-                    light: string;
-                    medium: string;
-                    dark: string;
-                    xdark: string;
-                };
-                error: {
-                    xlight: string;
-                    light: string;
-                    medium: string;
-                    dark: string;
-                    xdark: string;
-                };
-                miscellaneous: {
-                    body: string;
-                };
-            };
-            textColor: {
-                light: string;
-                medium: string;
-                dark: string;
-                orange: string;
-            };
-            spacing: {
-                nano: string;
-                micro: string;
-                mili: string;
-                centi: string;
-                deca: string;
-                kilo: string;
-                mega: string;
-                giga: string;
-                tera: string;
-                peta: string;
-                hexa: string;
-            };
-            borderRadius: {
-                nano: string;
-                micro: string;
-                mili: string;
-                centi: string;
-                deca: string;
-                pill: string;
-            };
-            borderWidth: {
-                pico: string;
-                nano: string;
-            };
-            fontSize: {
-                h5: string[];
-                h4: string[];
-                h3: string[];
-                h2: string[];
-                h1: string[];
-                base: string[];
-                sub: string[];
-                label: string[];
-                micro: string;
-                mili: string;
-                centi: string;
-                deca: string;
-                kilo: string;
-                mega: string;
-            };
-            boxShadow: {
-                default: string;
-            };
-            borderColor: {
-                'success-light': string;
-            };
-            zIndex: {
-                default: number;
-                absolute: number;
-                select: number;
-                input: number;
-                popover: number;
-                tooltip: number;
-                header: number;
-                backdrop: number;
-                drawer: number;
-                sidebar: number;
-                modal: number;
-            };
-            keyframes: {
-                opacity: {
-                    '0%': {
-                        opacity: number;
-                    };
-                    '100%': {
-                        opacity: number;
-                    };
-                };
-                progress: {
-                    '0%': {
-                        transform: string;
-                    };
-                    '40%': {
-                        transform: string;
-                    };
-                    '100%': {
-                        transform: string;
-                    };
-                };
-            };
-            animation: {
-                opacity: string;
-                progress: string;
-            };
-            transformOrigin: {
-                'left-right': string;
-            };
-        };
-    };
-};
-export default preset;