@tecsinapse/cortex-core 0.0.1

package/dist/cjs/components/badge/badge.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const badge = tailwindVariants.tv({
+  base: "text-sub text-white font-bold rounded-pill absolute items-center flex justify-center w-[1rem] h-[1rem] -top-1 -right-1 px-[5px] py-[2px]",
+  variants: {
+    intent: {
+      primary: "bg-primary-medium",
+      secondary: "bg-secondary-medium",
+      error: "bg-error-medium",
+      success: "bg-success-medium",
+      warning: "bg-warning-medium",
+      info: "bg-info-medium"
+    }
+  },
+  defaultVariants: {
+    intent: "primary"
+  }
+});
+const containerBadge = tailwindVariants.tv({
+  base: "relative items-center justify-center self-center"
+});
+
+exports.badge = badge;
+exports.containerBadge = containerBadge;

package/dist/cjs/components/button/button.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const button = tailwindVariants.tv({
+  base: "p-deca rounded-mili text-base h-fit font-bold disabled:text-white enabled:active:scale-95 transform transition hover:text-white text-white cursor-pointer items-center flex justify-center",
+  variants: {
+    intent: {
+      primary: "bg-primary-medium disabled:bg-primary-light active:bg-primary-dark enabled:hover:border-primary-dark hover:bg-primary-dark",
+      secondary: "bg-secondary-medium disabled:bg-secondary-light active:bg-secondary-dark hover:bg-secondary-dark hover:border-secondary-dark ",
+      success: "bg-success-medium disabled:bg-success-light hover:bg-success-dark hover:border-success-dark",
+      info: " bg-info-medium disabled:bg-info-light hover:bg-info-dark hover:border-info-dark ",
+      warning: " bg-warning-medium disabled:bg-warning-light hover:bg-warning-dark hover:border-warning-dark",
+      error: "bg-error-medium disabled:bg-error-light hover:bg-error-dark hover:border-error-dark"
+    },
+    variant: {
+      outline: "bg-transparent disabled:bg-transparent",
+      text: "bg-transparent border-0 disabled:bg-transparent"
+    },
+    size: {
+      default: "px-kilo py-mili min-h-[44px]",
+      small: "px-deca py-mili min-h-[34px]",
+      square: "p-[14px] min-h-fit aspect-square",
+      circle: "p-[14px] rounded-full min-h-fit aspect-square"
+    }
+  },
+  compoundVariants: [
+    {
+      intent: "primary",
+      variant: "outline",
+      className: "text-primary-medium disabled:text-primary-light border border-primary-medium disabled:border-primary-light"
+    },
+    {
+      intent: "secondary",
+      variant: "outline",
+      className: "text-secondary-medium disabled:text-secondary-light border border-secondary-medium disabled:border-secondary-light"
+    },
+    {
+      intent: "success",
+      variant: "outline",
+      className: "text-success-medium  disabled:text-success-light border border-success-medium disabled:border-success-light hover:bg-success-medium hover:border-success-medium"
+    },
+    {
+      intent: "info",
+      variant: "outline",
+      className: "text-info-medium disabled:text-info-light border border-info-medium disabled:border-info-light hover:bg-info-medium hover:border-info-medium"
+    },
+    {
+      intent: "warning",
+      variant: "outline",
+      className: "text-warning-medium disabled:text-warning-light border border-warning-medium disabled:border-warning-light hover:bg-warning-medium hover:border-warning-medium"
+    },
+    {
+      intent: "error",
+      variant: "outline",
+      className: "text-error-medium disabled:text-error-light border border-error-medium hover:border-error-medium hover:bg-error-medium disabled:border-error-light"
+    },
+    {
+      intent: "primary",
+      variant: "text",
+      className: "text-primary-medium disabled:text-primary-light"
+    },
+    {
+      intent: "secondary",
+      variant: "text",
+      className: "text-secondary-medium disabled:text-secondary-light"
+    },
+    {
+      intent: "success",
+      variant: "text",
+      className: "text-success-medium disabled:text-success-light hover:bg-success-medium hover:border-success-medium"
+    },
+    {
+      intent: "info",
+      variant: "text",
+      className: "text-info-medium disabled:text-info-light hover:bg-info-medium hover:border-info-medium"
+    },
+    {
+      intent: "warning",
+      variant: "text",
+      className: "text-warning-medium disabled:text-warning-light hover:bg-warning-medium hover:border-warning-medium"
+    },
+    {
+      intent: "error",
+      variant: "text",
+      className: "text-error-medium disabled:text-error-light hover:border-error-medium hover:bg-error-medium"
+    }
+  ],
+  defaultVariants: {
+    intent: "primary",
+    size: "default"
+  }
+});
+
+exports.button = button;

package/dist/cjs/components/card/card.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const card = tailwindVariants.tv({
+  base: "rounded-mili shadow-default bg-white p-deca"
+});
+
+exports.card = card;

package/dist/cjs/components/checkbox/checkbox.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const checkbox = tailwindVariants.tv({
+  base: "accent-primary-medium h-5 w-5 cursor-pointer"
+});
+
+exports.checkbox = checkbox;

package/dist/cjs/components/drawer/drawer.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const drawer = tailwindVariants.tv({
+  base: "bg-white fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform peer-checked:translate-x-0",
+  variants: {
+    position: {
+      left: "left-0 -translate-x-full rounded-r-mili",
+      right: "right-1 translate-x-full rounded-l-mili"
+    }
+  },
+  defaultVariants: {
+    position: "left"
+  }
+});
+const overlay = tailwindVariants.tv({
+  base: "fixed h-full w-full left-0 top-0 transition peer-checked:bg-black peer-checked:bg-opacity-50 z-[-1] peer-checked:z-[0] peer-checked:cursor-pointer"
+});
+
+exports.drawer = drawer;
+exports.overlay = overlay;

package/dist/cjs/components/hint/hint.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const hint = tailwindVariants.tv({
+  base: "text-label font-bold flex items-center",
+  variants: {
+    intent: {
+      default: "text-secondary-medium",
+      success: "text-success-medium",
+      warning: "text-warning-medium",
+      error: "text-error-medium"
+    }
+  },
+  defaultVariants: { intent: "default" }
+});
+
+exports.hint = hint;

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

@@ -0,0 +1,81 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+var clsx = require('clsx');
+
+const inputBase = tailwindVariants.tv({
+  base: "relative min-h-[44px] h-auto flex px-centi py-1.5 focus-within:outline focus-within:outline-1 text-base font-bold items-center bg-transparent border rounded-mili",
+  variants: {
+    intent: {
+      default: [
+        "input-secondary",
+        "border-secondary-light",
+        "focus-within:border-secondary-dark",
+        "focus-within:outline-secondary-dark"
+      ],
+      success: [
+        "input-success",
+        "border-success-medium",
+        "focus-within:border-success-dark",
+        "focus-within:outline-success-dark"
+      ],
+      warning: [
+        "input-warning",
+        "border-warning-medium",
+        "focus-within:border-warning-dark",
+        "focus-within:outline-warning-dark"
+      ],
+      error: [
+        "input-error",
+        "border-error-medium",
+        "focus-within:border-error-dark",
+        "focus-within:outline-error-dark"
+      ]
+    }
+  },
+  defaultVariants: {
+    intent: "default"
+  }
+});
+const labelBase = tailwindVariants.tv({
+  base: "absolute duration-300 -translate-y-2 scale-[0.72] top-2.5 z-10 origin-[0] peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-0 peer-focus:scale-[0.72] peer-focus:-translate-y-2 peer-focus:top-2.5 font-bold text-base peer-disabled:text-secondary-light select-none",
+  variants: {
+    intent: {
+      default: [
+        "text-secondary-medium",
+        "peer-focus:text-secondary-medium",
+        "peer-placeholder-shown:text-secondary-xdark"
+      ],
+      success: ["text-success-medium"],
+      warning: ["text-warning-medium"],
+      error: ["text-error-medium"]
+    }
+  },
+  defaultVariants: {
+    intent: "default"
+  }
+});
+const labelStyle = ({ intent, placeholder, className }) => labelBase({
+  intent,
+  className: clsx.clsx(className, {
+    "peer-placeholder-shown:hidden": !!placeholder
+  })
+});
+const input = ({ className, ...variants }) => inputBase({
+  ...variants,
+  className
+});
+const inputBox = (placeholder, label, className) => clsx.clsx(
+  className,
+  "peer relative outline-none placeholder:text-base placeholder:text-secondary-xdark placeholder-shown:top-0 disabled:bg-opacity-0 disabled:placeholder:text-secondary-light bg-transparent",
+  {
+    "focus:top-1.5": !placeholder && !!label,
+    "top-1.5": !!label
+  }
+);
+
+exports.input = input;
+exports.inputBase = inputBase;
+exports.inputBox = inputBox;
+exports.labelBase = labelBase;
+exports.labelStyle = labelStyle;

package/dist/cjs/components/radio-button/radio-button.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const radioButton = tailwindVariants.tv({
+  base: "accent-primary-medium h-5 w-5 cursor-pointer"
+});
+const labelRadioButton = tailwindVariants.tv({
+  base: "cursor-pointer"
+});
+
+exports.labelRadioButton = labelRadioButton;
+exports.radioButton = radioButton;

package/dist/cjs/components/select/select.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+var index = require('../input/index.js');
+
+const buttonSelect = tailwindVariants.tv({
+  extend: index.inputBase,
+  base: "w-full justify-between bg-white gap-[200px]"
+});
+const option = tailwindVariants.tv({
+  base: "text-base py-mili px-deca font-bold hover:bg-primary-xlight hover:text-primary-medium cursor-pointer active:text-primary-medium"
+});
+const dropDown = tailwindVariants.tv({
+  base: "text-base max-h-[200px] w-full bg-white mt-mili rounded-mili overflow-y-scroll py-mili transition-all duration-300 origin-top-left",
+  variants: {
+    open: {
+      true: "-scale-y-1 opacity-1",
+      false: "scale-y-0 opacity-0"
+    }
+  }
+});
+
+exports.buttonSelect = buttonSelect;
+exports.dropDown = dropDown;
+exports.option = option;

package/dist/cjs/components/table/table.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const tHead = tailwindVariants.tv({
+  base: "[&>tr]:rounded-none [&>tr]:shadow-none"
+});
+const tRow = tailwindVariants.tv({
+  base: "rounded-mili shadow-default"
+});
+const tHeadCell = tailwindVariants.tv({
+  base: "truncate px-deca py-centi text-start text-sub font-bold text-medium"
+});
+const tCell = tailwindVariants.tv({
+  base: "p-deca text-base font-bold text-dark"
+});
+const tFoot = tailwindVariants.tv({
+  base: "[&>tr]:rounded-none [&>tr]:shadow-none"
+});
+const tRoot = tailwindVariants.tv({
+  base: "border-separate border-spacing-x-[22px] border-spacing-y-mili rounded-mili bg-white px-0 py-centi shadow-default"
+});
+const hr = tailwindVariants.tv({
+  base: "-mx-[24px] -mb-[4px] -mt-[50px] h-[42px] border-0 bg-secondary-xlight"
+});
+
+exports.hr = hr;
+exports.tCell = tCell;
+exports.tFoot = tFoot;
+exports.tHead = tHead;
+exports.tHeadCell = tHeadCell;
+exports.tRoot = tRoot;
+exports.tRow = tRow;

package/dist/cjs/components/tag/tag.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+var cortexCore = require('@tecsinapse/cortex-core');
+
+const myTV = tailwindVariants.createTV({
+  twMergeConfig: {
+    //passar tema?
+    classGroups: {
+      "font-size": [{ text: Object.keys(cortexCore.fontSize) }]
+    }
+  }
+});
+const tag = myTV({
+  base: "rounded-micro px-micro py-nano w-fit font-bold text-label items-center flex",
+  variants: {
+    intent: {
+      success: "bg-success-medium text-white",
+      primary: "bg-primary-medium text-white",
+      secondary: "bg-secondary-medium text-white",
+      info: "bg-info-medium text-white",
+      white: "bg-white text-secondary-medium"
+    }
+  },
+  defaultVariants: {
+    intent: "secondary"
+  }
+});
+
+exports.tag = tag;

package/dist/cjs/components/toggle/toggle.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const toggle = tailwindVariants.tv({
+  base: "peer h-[22px] w-[40px] rounded-full bg-secondary-light after:absolute after:left-micro after:top-[3px] after:h-deca after:w-deca after:rounded-full after:border after:border-white after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none",
+  variants: {
+    intent: {
+      primary: "peer-focus:primary-medium peer-checked:bg-primary-medium",
+      secondary: "peer-focus:secondary-medium peer-checked:bg-secondary-medium",
+      info: "peer-focus:info-medium peer-checked:bg-info-medium",
+      success: "peer-focus:success-medium peer-checked:bg-success-medium",
+      warning: "peer-focus:warning-medium peer-checked:bg-warning-medium",
+      error: "peer-focus:error-medium peer-checked:bg-error-medium"
+    }
+  },
+  defaultVariants: {
+    intent: "primary"
+  }
+});
+const styleLabelElement = tailwindVariants.tv({
+  base: "relative inline-flex cursor-pointer items-center"
+});
+const styleInputElement = tailwindVariants.tv({
+  base: "peer sr-only"
+});
+
+exports.styleInputElement = styleInputElement;
+exports.styleLabelElement = styleLabelElement;
+exports.toggle = toggle;

package/dist/cjs/components/tooltip/tooltip.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const tooltipContainer = tailwindVariants.tv({
+  base: "group relative inline-block"
+});
+const arrowTooltip = tailwindVariants.tv({
+  base: 'after:content-[""] after:absolute after:border-secondary-dark',
+  variants: {
+    position: {
+      top: "after:left-[50%] after:-ml-[5px] after:top-[100%] after:border-x-8 after:border-x-transparent after:border-t-[8px]",
+      bottom: "after:left-[50%] after:-ml-[5px] after:bottom-[100%] after:border-x-8 after:border-x-transparent after:border-b-[8px]"
+    }
+  }
+});
+const tooltip = tailwindVariants.tv({
+  base: "h-8 mt-deca w-max h-fit invisible group-hover:visible opacity-0 group-hover:opacity-100  bg-secondary-dark text-white px-centi py-micro rounded-mili absolute",
+  variants: {
+    position: {
+      bottom: [
+        arrowTooltip({ position: "bottom" }),
+        "-ml-[200px] left-[50%] top-[100%] mt-centi -translate-y-[10%]"
+      ],
+      top: [
+        arrowTooltip({ position: "top" }),
+        "-ml-[200px] left-[50%] bottom-[100%] mb-centi translate-y-[10%]"
+      ]
+    }
+  }
+});
+
+exports.tooltip = tooltip;
+exports.tooltipContainer = tooltipContainer;

package/dist/cjs/index.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var definitions = require('./tokens/definitions.js');
+var button = require('./components/button/button.js');
+var tag = require('./components/tag/tag.js');
+var index = require('./components/input/index.js');
+var hint = require('./components/hint/hint.js');
+var toggle = require('./components/toggle/toggle.js');
+var drawer = require('./components/drawer/drawer.js');
+var select = require('./components/select/select.js');
+var checkbox = require('./components/checkbox/checkbox.js');
+var badge = require('./components/badge/badge.js');
+var radioButton = require('./components/radio-button/radio-button.js');
+var table = require('./components/table/table.js');
+var tooltip = require('./components/tooltip/tooltip.js');
+var card = require('./components/card/card.js');
+
+
+
+exports.borderColor = definitions.borderColor;
+exports.borderRadius = definitions.borderRadius;
+exports.borderWidth = definitions.borderWidth;
+exports.boxShadow = definitions.boxShadow;
+exports.colors = definitions.colors;
+exports.fontFamily = definitions.fontFamily;
+exports.fontSize = definitions.fontSize;
+exports.spacing = definitions.spacing;
+exports.textColor = definitions.textColor;
+exports.button = button.button;
+exports.tag = tag.tag;
+exports.input = index.input;
+exports.inputBase = index.inputBase;
+exports.inputBox = index.inputBox;
+exports.labelBase = index.labelBase;
+exports.labelStyle = index.labelStyle;
+exports.hint = hint.hint;
+exports.styleInputElement = toggle.styleInputElement;
+exports.styleLabelElement = toggle.styleLabelElement;
+exports.toggle = toggle.toggle;
+exports.drawer = drawer.drawer;
+exports.overlay = drawer.overlay;
+exports.buttonSelect = select.buttonSelect;
+exports.dropDown = select.dropDown;
+exports.option = select.option;
+exports.checkbox = checkbox.checkbox;
+exports.badge = badge.badge;
+exports.containerBadge = badge.containerBadge;
+exports.labelRadioButton = radioButton.labelRadioButton;
+exports.radioButton = radioButton.radioButton;
+exports.hr = table.hr;
+exports.tCell = table.tCell;
+exports.tFoot = table.tFoot;
+exports.tHead = table.tHead;
+exports.tHeadCell = table.tHeadCell;
+exports.tRoot = table.tRoot;
+exports.tRow = table.tRow;
+exports.tooltip = tooltip.tooltip;
+exports.tooltipContainer = tooltip.tooltipContainer;
+exports.card = card.card;

package/dist/cjs/preset/index.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var definitions = require('../tokens/definitions.js');
+
+module.exports = {
+  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
+    }
+  }
+};

package/dist/cjs/tokens/definitions.js

@@ -0,0 +1,170 @@
+'use strict';
+
+const colors = {
+  primary: {
+    xlight: "#fef9f0",
+    light: "#fccb83",
+    medium: "#f89907",
+    dark: "#ae6b05",
+    xdark: "#633d03"
+  },
+  secondary: {
+    xlight: "#f8f7f7",
+    light: "#c2bfbc",
+    medium: "#85807a",
+    dark: "#5d5955",
+    xdark: "#353231"
+  },
+  info: {
+    xlight: "#f0f8fe",
+    light: "#85c7fa",
+    medium: "#239bf6",
+    dark: "#0873c4",
+    xdark: "#043962"
+  },
+  success: {
+    xlight: "#f3fcf8",
+    light: "#99e6c9",
+    medium: "#2db783",
+    dark: "#238f67",
+    xdark: "#14523b"
+  },
+  warning: {
+    xlight: "#fffcf0",
+    light: "#ffe380",
+    medium: "#ffc700",
+    dark: "#cc9f00",
+    xdark: "#665000"
+  },
+  error: {
+    xlight: "#fdf3f2",
+    light: "#ee9891",
+    medium: "#e04638",
+    dark: "#9b2318",
+    xdark: "#58240e"
+  },
+  miscellaneous: {
+    body: "#f8f7f7"
+  }
+};
+const spacing = {
+  nano: "0.125rem",
+  micro: "0.25rem",
+  mili: "0.5rem",
+  centi: "0.75rem",
+  deca: "1rem",
+  kilo: "1.5rem",
+  mega: "2rem",
+  giga: "2.5rem",
+  tera: "3rem",
+  peta: "3.5rem",
+  hexa: "4rem"
+};
+const borderRadius = {
+  nano: "0.125rem",
+  micro: "0.25rem",
+  mili: "0.5rem",
+  centi: "1rem",
+  deca: "1.5rem",
+  pill: "999999px"
+};
+const borderWidth = {
+  pico: "0.063rem",
+  nano: "0.125rem"
+};
+const fontSize = {
+  /** Font sizes */
+  h5: [
+    "1rem",
+    // "16px"
+    "1.5rem"
+    // "24px"
+  ],
+  h4: [
+    "1.125rem",
+    // "18px"
+    "1.688rem"
+    // "27px"
+  ],
+  h3: [
+    "1.25rem",
+    // "20px"
+    "2rem"
+    // "32px"
+  ],
+  h2: [
+    "1.625rem",
+    // "26px"
+    "2.375rem"
+    // "38px"
+  ],
+  h1: [
+    "2rem",
+    // "32px"
+    "2.625rem"
+    // "42px"
+  ],
+  base: [
+    "0.875rem",
+    // "14px"
+    "1.313rem"
+    // "21px"
+  ],
+  sub: [
+    "0.75rem",
+    // "12px"
+    "1.125rem"
+    // "18px"
+  ],
+  label: ["0.625rem", "0.75rem"],
+  // '10px', '12px'
+  /** Icon sizes */
+  micro: "0.75rem",
+  // "12px"
+  mili: "0.875rem",
+  // "14px"
+  centi: "1rem",
+  // "16px"
+  deca: "1.125rem",
+  // "18px"
+  kilo: "1.5rem",
+  // "24px"
+  mega: "2rem"
+  // "32px"
+};
+const boxShadow = {
+  default: "0 2px 8px rgba(0, 0, 0, 0.05)"
+};
+const borderColor = {
+  "success-light": "#99E6C9"
+};
+const fontFamily = {
+  sans: [
+    "Lato",
+    "system-ui",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "sans-serif",
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji"
+  ],
+  mono: "Consolas, monaco, monospace"
+};
+const textColor = {
+  light: "#fff",
+  medium: "#85807a",
+  dark: "#353231",
+  orange: "#f89907"
+};
+
+exports.borderColor = borderColor;
+exports.borderRadius = borderRadius;
+exports.borderWidth = borderWidth;
+exports.boxShadow = boxShadow;
+exports.colors = colors;
+exports.fontFamily = fontFamily;
+exports.fontSize = fontSize;
+exports.spacing = spacing;
+exports.textColor = textColor;

package/dist/esm/components/badge/badge.js

@@ -0,0 +1,23 @@
+import { tv } from 'tailwind-variants';
+
+const badge = tv({
+  base: "text-sub text-white font-bold rounded-pill absolute items-center flex justify-center w-[1rem] h-[1rem] -top-1 -right-1 px-[5px] py-[2px]",
+  variants: {
+    intent: {
+      primary: "bg-primary-medium",
+      secondary: "bg-secondary-medium",
+      error: "bg-error-medium",
+      success: "bg-success-medium",
+      warning: "bg-warning-medium",
+      info: "bg-info-medium"
+    }
+  },
+  defaultVariants: {
+    intent: "primary"
+  }
+});
+const containerBadge = tv({
+  base: "relative items-center justify-center self-center"
+});
+
+export { badge, containerBadge };

package/dist/esm/components/button/button.js

@@ -0,0 +1,93 @@
+import { tv } from 'tailwind-variants';
+
+const button = tv({
+  base: "p-deca rounded-mili text-base h-fit font-bold disabled:text-white enabled:active:scale-95 transform transition hover:text-white text-white cursor-pointer items-center flex justify-center",
+  variants: {
+    intent: {
+      primary: "bg-primary-medium disabled:bg-primary-light active:bg-primary-dark enabled:hover:border-primary-dark hover:bg-primary-dark",
+      secondary: "bg-secondary-medium disabled:bg-secondary-light active:bg-secondary-dark hover:bg-secondary-dark hover:border-secondary-dark ",
+      success: "bg-success-medium disabled:bg-success-light hover:bg-success-dark hover:border-success-dark",
+      info: " bg-info-medium disabled:bg-info-light hover:bg-info-dark hover:border-info-dark ",
+      warning: " bg-warning-medium disabled:bg-warning-light hover:bg-warning-dark hover:border-warning-dark",
+      error: "bg-error-medium disabled:bg-error-light hover:bg-error-dark hover:border-error-dark"
+    },
+    variant: {
+      outline: "bg-transparent disabled:bg-transparent",
+      text: "bg-transparent border-0 disabled:bg-transparent"
+    },
+    size: {
+      default: "px-kilo py-mili min-h-[44px]",
+      small: "px-deca py-mili min-h-[34px]",
+      square: "p-[14px] min-h-fit aspect-square",
+      circle: "p-[14px] rounded-full min-h-fit aspect-square"
+    }
+  },
+  compoundVariants: [
+    {
+      intent: "primary",
+      variant: "outline",
+      className: "text-primary-medium disabled:text-primary-light border border-primary-medium disabled:border-primary-light"
+    },
+    {
+      intent: "secondary",
+      variant: "outline",
+      className: "text-secondary-medium disabled:text-secondary-light border border-secondary-medium disabled:border-secondary-light"
+    },
+    {
+      intent: "success",
+      variant: "outline",
+      className: "text-success-medium  disabled:text-success-light border border-success-medium disabled:border-success-light hover:bg-success-medium hover:border-success-medium"
+    },
+    {
+      intent: "info",
+      variant: "outline",
+      className: "text-info-medium disabled:text-info-light border border-info-medium disabled:border-info-light hover:bg-info-medium hover:border-info-medium"
+    },
+    {
+      intent: "warning",
+      variant: "outline",
+      className: "text-warning-medium disabled:text-warning-light border border-warning-medium disabled:border-warning-light hover:bg-warning-medium hover:border-warning-medium"
+    },
+    {
+      intent: "error",
+      variant: "outline",
+      className: "text-error-medium disabled:text-error-light border border-error-medium hover:border-error-medium hover:bg-error-medium disabled:border-error-light"
+    },
+    {
+      intent: "primary",
+      variant: "text",
+      className: "text-primary-medium disabled:text-primary-light"
+    },
+    {
+      intent: "secondary",
+      variant: "text",
+      className: "text-secondary-medium disabled:text-secondary-light"
+    },
+    {
+      intent: "success",
+      variant: "text",
+      className: "text-success-medium disabled:text-success-light hover:bg-success-medium hover:border-success-medium"
+    },
+    {
+      intent: "info",
+      variant: "text",
+      className: "text-info-medium disabled:text-info-light hover:bg-info-medium hover:border-info-medium"
+    },
+    {
+      intent: "warning",
+      variant: "text",
+      className: "text-warning-medium disabled:text-warning-light hover:bg-warning-medium hover:border-warning-medium"
+    },
+    {
+      intent: "error",
+      variant: "text",
+      className: "text-error-medium disabled:text-error-light hover:border-error-medium hover:bg-error-medium"
+    }
+  ],
+  defaultVariants: {
+    intent: "primary",
+    size: "default"
+  }
+});
+
+export { button };

package/dist/esm/components/card/card.js

@@ -0,0 +1,7 @@
+import { tv } from 'tailwind-variants';
+
+const card = tv({
+  base: "rounded-mili shadow-default bg-white p-deca"
+});
+
+export { card };

package/dist/esm/components/checkbox/checkbox.js

@@ -0,0 +1,7 @@
+import { tv } from 'tailwind-variants';
+
+const checkbox = tv({
+  base: "accent-primary-medium h-5 w-5 cursor-pointer"
+});
+
+export { checkbox };

package/dist/esm/components/drawer/drawer.js

@@ -0,0 +1,19 @@
+import { tv } from 'tailwind-variants';
+
+const drawer = tv({
+  base: "bg-white fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform peer-checked:translate-x-0",
+  variants: {
+    position: {
+      left: "left-0 -translate-x-full rounded-r-mili",
+      right: "right-1 translate-x-full rounded-l-mili"
+    }
+  },
+  defaultVariants: {
+    position: "left"
+  }
+});
+const overlay = tv({
+  base: "fixed h-full w-full left-0 top-0 transition peer-checked:bg-black peer-checked:bg-opacity-50 z-[-1] peer-checked:z-[0] peer-checked:cursor-pointer"
+});
+
+export { drawer, overlay };

package/dist/esm/components/hint/hint.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+const hint = tv({
+  base: "text-label font-bold flex items-center",
+  variants: {
+    intent: {
+      default: "text-secondary-medium",
+      success: "text-success-medium",
+      warning: "text-warning-medium",
+      error: "text-error-medium"
+    }
+  },
+  defaultVariants: { intent: "default" }
+});
+
+export { hint };

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

@@ -0,0 +1,75 @@
+import { tv } from 'tailwind-variants';
+import { clsx } from 'clsx';
+
+const inputBase = tv({
+  base: "relative min-h-[44px] h-auto flex px-centi py-1.5 focus-within:outline focus-within:outline-1 text-base font-bold items-center bg-transparent border rounded-mili",
+  variants: {
+    intent: {
+      default: [
+        "input-secondary",
+        "border-secondary-light",
+        "focus-within:border-secondary-dark",
+        "focus-within:outline-secondary-dark"
+      ],
+      success: [
+        "input-success",
+        "border-success-medium",
+        "focus-within:border-success-dark",
+        "focus-within:outline-success-dark"
+      ],
+      warning: [
+        "input-warning",
+        "border-warning-medium",
+        "focus-within:border-warning-dark",
+        "focus-within:outline-warning-dark"
+      ],
+      error: [
+        "input-error",
+        "border-error-medium",
+        "focus-within:border-error-dark",
+        "focus-within:outline-error-dark"
+      ]
+    }
+  },
+  defaultVariants: {
+    intent: "default"
+  }
+});
+const labelBase = tv({
+  base: "absolute duration-300 -translate-y-2 scale-[0.72] top-2.5 z-10 origin-[0] peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-0 peer-focus:scale-[0.72] peer-focus:-translate-y-2 peer-focus:top-2.5 font-bold text-base peer-disabled:text-secondary-light select-none",
+  variants: {
+    intent: {
+      default: [
+        "text-secondary-medium",
+        "peer-focus:text-secondary-medium",
+        "peer-placeholder-shown:text-secondary-xdark"
+      ],
+      success: ["text-success-medium"],
+      warning: ["text-warning-medium"],
+      error: ["text-error-medium"]
+    }
+  },
+  defaultVariants: {
+    intent: "default"
+  }
+});
+const labelStyle = ({ intent, placeholder, className }) => labelBase({
+  intent,
+  className: clsx(className, {
+    "peer-placeholder-shown:hidden": !!placeholder
+  })
+});
+const input = ({ className, ...variants }) => inputBase({
+  ...variants,
+  className
+});
+const inputBox = (placeholder, label, className) => clsx(
+  className,
+  "peer relative outline-none placeholder:text-base placeholder:text-secondary-xdark placeholder-shown:top-0 disabled:bg-opacity-0 disabled:placeholder:text-secondary-light bg-transparent",
+  {
+    "focus:top-1.5": !placeholder && !!label,
+    "top-1.5": !!label
+  }
+);
+
+export { input, inputBase, inputBox, labelBase, labelStyle };

package/dist/esm/components/radio-button/radio-button.js

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+
+const radioButton = tv({
+  base: "accent-primary-medium h-5 w-5 cursor-pointer"
+});
+const labelRadioButton = tv({
+  base: "cursor-pointer"
+});
+
+export { labelRadioButton, radioButton };

package/dist/esm/components/select/select.js

@@ -0,0 +1,21 @@
+import { tv } from 'tailwind-variants';
+import { inputBase } from '../input/index.js';
+
+const buttonSelect = tv({
+  extend: inputBase,
+  base: "w-full justify-between bg-white gap-[200px]"
+});
+const option = tv({
+  base: "text-base py-mili px-deca font-bold hover:bg-primary-xlight hover:text-primary-medium cursor-pointer active:text-primary-medium"
+});
+const dropDown = tv({
+  base: "text-base max-h-[200px] w-full bg-white mt-mili rounded-mili overflow-y-scroll py-mili transition-all duration-300 origin-top-left",
+  variants: {
+    open: {
+      true: "-scale-y-1 opacity-1",
+      false: "scale-y-0 opacity-0"
+    }
+  }
+});
+
+export { buttonSelect, dropDown, option };

package/dist/esm/components/table/table.js

@@ -0,0 +1,25 @@
+import { tv } from 'tailwind-variants';
+
+const tHead = tv({
+  base: "[&>tr]:rounded-none [&>tr]:shadow-none"
+});
+const tRow = tv({
+  base: "rounded-mili shadow-default"
+});
+const tHeadCell = tv({
+  base: "truncate px-deca py-centi text-start text-sub font-bold text-medium"
+});
+const tCell = tv({
+  base: "p-deca text-base font-bold text-dark"
+});
+const tFoot = tv({
+  base: "[&>tr]:rounded-none [&>tr]:shadow-none"
+});
+const tRoot = tv({
+  base: "border-separate border-spacing-x-[22px] border-spacing-y-mili rounded-mili bg-white px-0 py-centi shadow-default"
+});
+const hr = tv({
+  base: "-mx-[24px] -mb-[4px] -mt-[50px] h-[42px] border-0 bg-secondary-xlight"
+});
+
+export { hr, tCell, tFoot, tHead, tHeadCell, tRoot, tRow };

package/dist/esm/components/tag/tag.js

@@ -0,0 +1,28 @@
+import { createTV } from 'tailwind-variants';
+import { fontSize } from '@tecsinapse/cortex-core';
+
+const myTV = createTV({
+  twMergeConfig: {
+    //passar tema?
+    classGroups: {
+      "font-size": [{ text: Object.keys(fontSize) }]
+    }
+  }
+});
+const tag = myTV({
+  base: "rounded-micro px-micro py-nano w-fit font-bold text-label items-center flex",
+  variants: {
+    intent: {
+      success: "bg-success-medium text-white",
+      primary: "bg-primary-medium text-white",
+      secondary: "bg-secondary-medium text-white",
+      info: "bg-info-medium text-white",
+      white: "bg-white text-secondary-medium"
+    }
+  },
+  defaultVariants: {
+    intent: "secondary"
+  }
+});
+
+export { tag };

package/dist/esm/components/toggle/toggle.js

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+
+const toggle = tv({
+  base: "peer h-[22px] w-[40px] rounded-full bg-secondary-light after:absolute after:left-micro after:top-[3px] after:h-deca after:w-deca after:rounded-full after:border after:border-white after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none",
+  variants: {
+    intent: {
+      primary: "peer-focus:primary-medium peer-checked:bg-primary-medium",
+      secondary: "peer-focus:secondary-medium peer-checked:bg-secondary-medium",
+      info: "peer-focus:info-medium peer-checked:bg-info-medium",
+      success: "peer-focus:success-medium peer-checked:bg-success-medium",
+      warning: "peer-focus:warning-medium peer-checked:bg-warning-medium",
+      error: "peer-focus:error-medium peer-checked:bg-error-medium"
+    }
+  },
+  defaultVariants: {
+    intent: "primary"
+  }
+});
+const styleLabelElement = tv({
+  base: "relative inline-flex cursor-pointer items-center"
+});
+const styleInputElement = tv({
+  base: "peer sr-only"
+});
+
+export { styleInputElement, styleLabelElement, toggle };

package/dist/esm/components/tooltip/tooltip.js

@@ -0,0 +1,31 @@
+import { tv } from 'tailwind-variants';
+
+const tooltipContainer = tv({
+  base: "group relative inline-block"
+});
+const arrowTooltip = tv({
+  base: 'after:content-[""] after:absolute after:border-secondary-dark',
+  variants: {
+    position: {
+      top: "after:left-[50%] after:-ml-[5px] after:top-[100%] after:border-x-8 after:border-x-transparent after:border-t-[8px]",
+      bottom: "after:left-[50%] after:-ml-[5px] after:bottom-[100%] after:border-x-8 after:border-x-transparent after:border-b-[8px]"
+    }
+  }
+});
+const tooltip = tv({
+  base: "h-8 mt-deca w-max h-fit invisible group-hover:visible opacity-0 group-hover:opacity-100  bg-secondary-dark text-white px-centi py-micro rounded-mili absolute",
+  variants: {
+    position: {
+      bottom: [
+        arrowTooltip({ position: "bottom" }),
+        "-ml-[200px] left-[50%] top-[100%] mt-centi -translate-y-[10%]"
+      ],
+      top: [
+        arrowTooltip({ position: "top" }),
+        "-ml-[200px] left-[50%] bottom-[100%] mb-centi translate-y-[10%]"
+      ]
+    }
+  }
+});
+
+export { tooltip, tooltipContainer };

package/dist/esm/index.js

@@ -0,0 +1,14 @@
+export { borderColor, borderRadius, borderWidth, boxShadow, colors, fontFamily, fontSize, spacing, textColor } from './tokens/definitions.js';
+export { button } from './components/button/button.js';
+export { tag } from './components/tag/tag.js';
+export { input, inputBase, inputBox, labelBase, labelStyle } from './components/input/index.js';
+export { hint } from './components/hint/hint.js';
+export { styleInputElement, styleLabelElement, toggle } from './components/toggle/toggle.js';
+export { drawer, overlay } from './components/drawer/drawer.js';
+export { buttonSelect, dropDown, option } from './components/select/select.js';
+export { checkbox } from './components/checkbox/checkbox.js';
+export { badge, containerBadge } from './components/badge/badge.js';
+export { labelRadioButton, radioButton } from './components/radio-button/radio-button.js';
+export { hr, tCell, tFoot, tHead, tHeadCell, tRoot, tRow } from './components/table/table.js';
+export { tooltip, tooltipContainer } from './components/tooltip/tooltip.js';
+export { card } from './components/card/card.js';

package/dist/esm/preset/index.js

@@ -0,0 +1,17 @@
+import { fontFamily, colors, textColor, spacing, borderRadius, borderWidth, fontSize, boxShadow, borderColor } from '../tokens/definitions.js';
+
+module.exports = {
+  theme: {
+    fontFamily,
+    extend: {
+      colors,
+      textColor,
+      spacing,
+      borderRadius,
+      borderWidth,
+      fontSize,
+      boxShadow,
+      borderColor
+    }
+  }
+};

package/dist/esm/tokens/definitions.js

@@ -0,0 +1,160 @@
+const colors = {
+  primary: {
+    xlight: "#fef9f0",
+    light: "#fccb83",
+    medium: "#f89907",
+    dark: "#ae6b05",
+    xdark: "#633d03"
+  },
+  secondary: {
+    xlight: "#f8f7f7",
+    light: "#c2bfbc",
+    medium: "#85807a",
+    dark: "#5d5955",
+    xdark: "#353231"
+  },
+  info: {
+    xlight: "#f0f8fe",
+    light: "#85c7fa",
+    medium: "#239bf6",
+    dark: "#0873c4",
+    xdark: "#043962"
+  },
+  success: {
+    xlight: "#f3fcf8",
+    light: "#99e6c9",
+    medium: "#2db783",
+    dark: "#238f67",
+    xdark: "#14523b"
+  },
+  warning: {
+    xlight: "#fffcf0",
+    light: "#ffe380",
+    medium: "#ffc700",
+    dark: "#cc9f00",
+    xdark: "#665000"
+  },
+  error: {
+    xlight: "#fdf3f2",
+    light: "#ee9891",
+    medium: "#e04638",
+    dark: "#9b2318",
+    xdark: "#58240e"
+  },
+  miscellaneous: {
+    body: "#f8f7f7"
+  }
+};
+const spacing = {
+  nano: "0.125rem",
+  micro: "0.25rem",
+  mili: "0.5rem",
+  centi: "0.75rem",
+  deca: "1rem",
+  kilo: "1.5rem",
+  mega: "2rem",
+  giga: "2.5rem",
+  tera: "3rem",
+  peta: "3.5rem",
+  hexa: "4rem"
+};
+const borderRadius = {
+  nano: "0.125rem",
+  micro: "0.25rem",
+  mili: "0.5rem",
+  centi: "1rem",
+  deca: "1.5rem",
+  pill: "999999px"
+};
+const borderWidth = {
+  pico: "0.063rem",
+  nano: "0.125rem"
+};
+const fontSize = {
+  /** Font sizes */
+  h5: [
+    "1rem",
+    // "16px"
+    "1.5rem"
+    // "24px"
+  ],
+  h4: [
+    "1.125rem",
+    // "18px"
+    "1.688rem"
+    // "27px"
+  ],
+  h3: [
+    "1.25rem",
+    // "20px"
+    "2rem"
+    // "32px"
+  ],
+  h2: [
+    "1.625rem",
+    // "26px"
+    "2.375rem"
+    // "38px"
+  ],
+  h1: [
+    "2rem",
+    // "32px"
+    "2.625rem"
+    // "42px"
+  ],
+  base: [
+    "0.875rem",
+    // "14px"
+    "1.313rem"
+    // "21px"
+  ],
+  sub: [
+    "0.75rem",
+    // "12px"
+    "1.125rem"
+    // "18px"
+  ],
+  label: ["0.625rem", "0.75rem"],
+  // '10px', '12px'
+  /** Icon sizes */
+  micro: "0.75rem",
+  // "12px"
+  mili: "0.875rem",
+  // "14px"
+  centi: "1rem",
+  // "16px"
+  deca: "1.125rem",
+  // "18px"
+  kilo: "1.5rem",
+  // "24px"
+  mega: "2rem"
+  // "32px"
+};
+const boxShadow = {
+  default: "0 2px 8px rgba(0, 0, 0, 0.05)"
+};
+const borderColor = {
+  "success-light": "#99E6C9"
+};
+const fontFamily = {
+  sans: [
+    "Lato",
+    "system-ui",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "sans-serif",
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji"
+  ],
+  mono: "Consolas, monaco, monospace"
+};
+const textColor = {
+  light: "#fff",
+  medium: "#85807a",
+  dark: "#353231",
+  orange: "#f89907"
+};
+
+export { borderColor, borderRadius, borderWidth, boxShadow, colors, fontFamily, fontSize, spacing, textColor };

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@tecsinapse/cortex-core",
+  "version": "0.0.1",
+  "description": "",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "yarn build:es --watch",
+    "build:es": "rollup --config",
+    "build:declaration": "tsc --project tsconfig.build.json"
+  },
+  "author": "ryancarloscorrea",
+  "license": "ISC",
+  "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "tailwind-variants": "^0.1.18",
+    "tailwind-merge": "^2.0.0"
+  }
+}