@tecsinapse/cortex-core 1.2.0-beta.9 → 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/manager/manager.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const manager = tailwindVariants.tv({
+  base: "fixed rounded-micro p-deca bg-white shadow-xl flex transition bottom-deca right-deca z-modal",
+  variants: {
+    open: {
+      true: "scale-100 visible",
+      false: "invisible"
+    }
+  }
+});
+
+exports.manager = manager;

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

@@ -18,6 +18,7 @@ var table = require('./components/table/table.js');
 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 definitions = require('./tokens/definitions.js');
 var index = require('./utils/index.js');
 
@@ -59,6 +60,7 @@ exports.styleLabelElement = toggle.styleLabelElement;
 exports.toggle = toggle.toggle;
 exports.tooltip = tooltip.tooltip;
 exports.tooltipContainer = tooltip.tooltipContainer;
+exports.manager = manager.manager;
 exports.borderColor = definitions.borderColor;
 exports.borderRadius = definitions.borderRadius;
 exports.borderWidth = definitions.borderWidth;

package/dist/default.css

@@ -1,93 +1,192 @@
+@import "tailwindcss";
+
 @theme {
-    --color-primary-xlight: #fef9f0;
-    --color-primary-light: #fccb83;
-    --color-primary-medium: #f89907;
-    --color-primary-dark: #ae6b05;
-    --color-primary-xdark: #633d03;
-    --color-secondary-xlight: #f8f7f7;
-    --color-secondary-light: #c2bfbc;
-    --color-secondary-medium: #85807a;
-    --color-secondary-dark: #5d5955;
-    --color-secondary-xdark: #353231;
-    --color-info-xlight: #f0f8fe;
-    --color-info-light: #85c7fa;
-    --color-info-medium: #239bf6;
-    --color-info-dark: #0873c4;
-    --color-info-xdark: #043962;
-    --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;
-    --color-miscellaneous-body: #f8f7f7;
-    --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;
-    --border-radius-nano: 0.125rem;
-    --border-radius-micro: 0.25rem;
-    --border-radius-mili: 0.5rem;
-    --border-radius-centi: 1rem;
-    --border-radius-deca: 1.5rem;
-    --border-radius-pill: 999999px;
-    --border-width-pico: 0.063rem;
-    --border-width-nano: 0.125rem;
-    --font-size-h5: 1rem;
-    --line-height-h5: 1.5rem;
-    --font-size-h4: 1.125rem;
-    --line-height-h4: 1.688rem;
-    --font-size-h3: 1.25rem;
-    --line-height-h3: 2rem;
-    --font-size-h2: 1.625rem;
-    --line-height-h2: 2.375rem;
-    --font-size-h1: 2rem;
-    --line-height-h1: 2.625rem;
-    --font-size-base: 0.875rem;
-    --line-height-base: 1.313rem;
-    --font-size-sub: 0.75rem;
-    --line-height-sub: 1.125rem;
-    --font-size-label: 0.625rem;
-    --line-height-label: 0.75rem;
-    --font-size-micro: 0.75rem;
-    --font-size-mili: 0.875rem;
-    --font-size-centi: 1rem;
-    --font-size-deca: 1.125rem;
-    --font-size-kilo: 1.5rem;
-    --font-size-mega: 2rem;
-    --box-shadow-default: 0 2px 8px rgba(0, 0, 0, 0.05);
-    --border-color-success-light: #99E6C9;
-    --font-family-sans: Lato, system-ui, -apple-system, BlinkMacSystemFont, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
-    --font-family-mono: Consolas, monaco, monospace;
-    --text-color-light: #fff;
-    --text-color-medium: #85807a;
-    --text-color-dark: #353231;
-    --text-color-orange: #f89907;
-    --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;
+  /* 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/manager/manager.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+
+const manager = tv({
+  base: "fixed rounded-micro p-deca bg-white shadow-xl flex transition bottom-deca right-deca z-modal",
+  variants: {
+    open: {
+      true: "scale-100 visible",
+      false: "invisible"
+    }
+  }
+});
+
+export { manager };

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

@@ -16,5 +16,6 @@ export { hr, tCell, tFoot, tHead, tHeadCell, tRoot, tRow } from './components/ta
 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 { borderColor, borderRadius, borderWidth, boxShadow, colors, fontFamily, fontSize, spacing, textColor, zIndex } from './tokens/definitions.js';
 export { updateThemeColors } from './utils/index.js';

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

@@ -16,3 +16,4 @@ export * from './table/table';
 export * from './tag/tag';
 export * from './toggle/toggle';
 export * from './tooltip/tooltip';
+export * from './manager/manager';

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/manager/manager.d.ts

@@ -0,0 +1,16 @@
+export declare const manager: import("tailwind-variants").TVReturnType<{
+    open: {
+        true: string;
+        false: string;
+    };
+}, undefined, "fixed rounded-micro p-deca bg-white shadow-xl flex transition bottom-deca right-deca z-modal", {
+    open: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    open: {
+        true: string;
+        false: string;
+    };
+}, undefined, "fixed rounded-micro p-deca bg-white shadow-xl flex transition bottom-deca right-deca z-modal", unknown, unknown, undefined>>;

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/package.json

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