@tecsinapse/cortex-core 0.3.0-beta.9 → 0.3.0

package/dist/cjs/components/common/common.js

@@ -6,7 +6,7 @@ const overlay = tailwindVariants.tv({
   base: "fixed",
   variants: {
     show: {
-      true: "bg-opacity-50 z-[0] bg-black h-full w-full left-0 top-0 transition cursor-pointer",
+      true: "bg-opacity-50 z-backdrop bg-black h-full w-full left-0 top-0 transition cursor-pointer",
       false: "invisible"
     }
   }

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

@@ -3,14 +3,14 @@
 var tailwindVariants = require('tailwind-variants');
 
 const drawerStyles = tailwindVariants.tv({
-  base: "bg-white fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform",
+  base: "bg-white fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform overflow-y-scroll",
   variants: {
     position: {
       left: "left-0 -translate-x-full rounded-r-mili",
       right: "right-1 translate-x-full rounded-l-mili"
     },
     open: {
-      true: "translate-x-0",
+      true: "translate-x-0 z-[700]",
       false: "invisible"
     }
   },

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",
+  base: "fixed rounded-micro p-kilo bg-white shadow-default flex transition inset-0 z-modal",
   variants: {
     open: {
       true: "scale-100 visible",

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

@@ -2,12 +2,19 @@
 
 var tailwindVariants = require('tailwind-variants');
 
-const radioButton = tailwindVariants.tv({
-  base: "accent-orange-600 h-5 w-5 cursor-pointer peer"
-});
-const labelRadioButton = tailwindVariants.tv({
-  base: "cursor-pointer peer-checked:font-bold"
+const radioButtonStyles = tailwindVariants.tv({
+  slots: {
+    container: "gap-x-mili flex items-center justify-center",
+    label: "cursor-pointer peer-checked:font-bold ",
+    input: "accent-orange-600 h-5 w-5 cursor-pointer peer"
+  },
+  variants: {
+    reversed: {
+      true: {
+        container: "flex-row-reverse"
+      }
+    }
+  }
 });
 
-exports.labelRadioButton = labelRadioButton;
-exports.radioButton = radioButton;
+exports.radioButtonStyles = radioButtonStyles;

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

@@ -7,21 +7,19 @@ const option = tailwindVariants.tv({
   variants: {
     selected: {
       true: "text-primary-medium"
+    },
+    grouped: {
+      true: "px-mega"
     }
   }
 });
 const selectVariants = tailwindVariants.tv({
   slots: {
-    dropdown: "flex flex-col gap-y-mili text-base max-h-[30vh] w-full bg-white mt-0 rounded-mili overflow-y-scroll py-mili transition-all duration-300 origin-top-left absolute list-none z-30  shadow-lg",
     button: "flex w-full justify-between items-center bg-white relative min-h-[44px] h-auto flex px-centi py-1.5 text-base font-bold items-center bg-transparent border border-secondary-light rounded-mili",
-    groupedTitle: "font-bold text-secondary-medium",
-    containerGrouped: "mx-centi list-none"
+    groupedTitle: "font-bold text-secondary-medium mx-centi",
+    list: "list-none p-0"
   },
   variants: {
-    open: {
-      true: { dropdown: "-scale-y-1 visible" },
-      false: { dropdown: "scale-y-0 invisible" }
-    },
     disabled: {
       true: {
         button: "pointer-events-none text-secondary-light bg-secondary-xlight"

package/dist/cjs/index.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var definitions = require('./tokens/definitions.js');
 var badge = require('./components/badge/badge.js');
 var button = require('./components/button/button.js');
 var card = require('./components/card/card.js');
@@ -20,18 +19,10 @@ var tag = require('./components/tag/tag.js');
 var toggle = require('./components/toggle/toggle.js');
 var tooltip = require('./components/tooltip/tooltip.js');
 var index = require('./preset/index.js');
+var definitions = require('./tokens/definitions.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.badge = badge.badge;
 exports.containerBadge = badge.containerBadge;
 exports.button = button.button;
@@ -51,8 +42,7 @@ exports.modal = modal.modal;
 exports.popover = popover.popover;
 exports.popoverContainer = popover.popoverContainer;
 exports.popoverStyles = popover.popoverStyles;
-exports.labelRadioButton = radioButton.labelRadioButton;
-exports.radioButton = radioButton.radioButton;
+exports.radioButtonStyles = radioButton.radioButtonStyles;
 exports.option = select.option;
 exports.selectVariants = select.selectVariants;
 exports.snackbar = snackbar.snackbar;
@@ -70,3 +60,13 @@ exports.toggle = toggle.toggle;
 exports.tooltip = tooltip.tooltip;
 exports.tooltipContainer = tooltip.tooltipContainer;
 exports.preset = index;
+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.zIndex = definitions.zIndex;

package/dist/cjs/preset/index.js

@@ -14,6 +14,7 @@ const preset = {
       fontSize: definitions.fontSize,
       boxShadow: definitions.boxShadow,
       borderColor: definitions.borderColor,
+      zIndex: definitions.zIndex,
       keyframes: {
         opacity: {
           "0%": { opacity: 0 },

package/dist/cjs/tokens/definitions.js

@@ -158,6 +158,19 @@ const textColor = {
   dark: "#353231",
   orange: "#f89907"
 };
+const zIndex = {
+  default: 0,
+  absolute: 1,
+  select: 20,
+  input: 20,
+  popover: 30,
+  tooltip: 40,
+  header: 600,
+  backdrop: 700,
+  drawer: 700,
+  sidebar: 800,
+  modal: 1e3
+};
 
 exports.borderColor = borderColor;
 exports.borderRadius = borderRadius;
@@ -168,3 +181,4 @@ exports.fontFamily = fontFamily;
 exports.fontSize = fontSize;
 exports.spacing = spacing;
 exports.textColor = textColor;
+exports.zIndex = zIndex;

package/dist/esm/components/common/common.js

@@ -4,7 +4,7 @@ const overlay = tv({
   base: "fixed",
   variants: {
     show: {
-      true: "bg-opacity-50 z-[0] bg-black h-full w-full left-0 top-0 transition cursor-pointer",
+      true: "bg-opacity-50 z-backdrop bg-black h-full w-full left-0 top-0 transition cursor-pointer",
       false: "invisible"
     }
   }

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

@@ -1,14 +1,14 @@
 import { tv } from 'tailwind-variants';
 
 const drawerStyles = tv({
-  base: "bg-white fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform",
+  base: "bg-white fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform overflow-y-scroll",
   variants: {
     position: {
       left: "left-0 -translate-x-full rounded-r-mili",
       right: "right-1 translate-x-full rounded-l-mili"
     },
     open: {
-      true: "translate-x-0",
+      true: "translate-x-0 z-[700]",
       false: "invisible"
     }
   },

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",
+  base: "fixed rounded-micro p-kilo bg-white shadow-default flex transition inset-0 z-modal",
   variants: {
     open: {
       true: "scale-100 visible",

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

@@ -1,10 +1,18 @@
 import { tv } from 'tailwind-variants';
 
-const radioButton = tv({
-  base: "accent-orange-600 h-5 w-5 cursor-pointer peer"
-});
-const labelRadioButton = tv({
-  base: "cursor-pointer peer-checked:font-bold"
+const radioButtonStyles = tv({
+  slots: {
+    container: "gap-x-mili flex items-center justify-center",
+    label: "cursor-pointer peer-checked:font-bold ",
+    input: "accent-orange-600 h-5 w-5 cursor-pointer peer"
+  },
+  variants: {
+    reversed: {
+      true: {
+        container: "flex-row-reverse"
+      }
+    }
+  }
 });
 
-export { labelRadioButton, radioButton };
+export { radioButtonStyles };

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

@@ -5,21 +5,19 @@ const option = tv({
   variants: {
     selected: {
       true: "text-primary-medium"
+    },
+    grouped: {
+      true: "px-mega"
     }
   }
 });
 const selectVariants = tv({
   slots: {
-    dropdown: "flex flex-col gap-y-mili text-base max-h-[30vh] w-full bg-white mt-0 rounded-mili overflow-y-scroll py-mili transition-all duration-300 origin-top-left absolute list-none z-30  shadow-lg",
     button: "flex w-full justify-between items-center bg-white relative min-h-[44px] h-auto flex px-centi py-1.5 text-base font-bold items-center bg-transparent border border-secondary-light rounded-mili",
-    groupedTitle: "font-bold text-secondary-medium",
-    containerGrouped: "mx-centi list-none"
+    groupedTitle: "font-bold text-secondary-medium mx-centi",
+    list: "list-none p-0"
   },
   variants: {
-    open: {
-      true: { dropdown: "-scale-y-1 visible" },
-      false: { dropdown: "scale-y-0 invisible" }
-    },
     disabled: {
       true: {
         button: "pointer-events-none text-secondary-light bg-secondary-xlight"

package/dist/esm/index.js

@@ -1,4 +1,3 @@
-export { borderColor, borderRadius, borderWidth, boxShadow, colors, fontFamily, fontSize, spacing, textColor } from './tokens/definitions.js';
 export { badge, containerBadge } from './components/badge/badge.js';
 export { button, buttonStyles } from './components/button/button.js';
 export { card } from './components/card/card.js';
@@ -10,7 +9,7 @@ export { hint } from './components/hint/hint.js';
 export { input, inputBaseStyles, inputBox, label, labelStyle } from './components/input/input.js';
 export { modal } from './components/modal/modal.js';
 export { popover, popoverContainer, popoverStyles } from './components/popover/popover.js';
-export { labelRadioButton, radioButton } from './components/radio-button/radio-button.js';
+export { radioButtonStyles } from './components/radio-button/radio-button.js';
 export { option, selectVariants } from './components/select/select.js';
 export { snackbar } from './components/snackbar/snackbar.js';
 export { hr, tCell, tFoot, tHead, tHeadCell, tRoot, tRow } from './components/table/table.js';
@@ -18,3 +17,4 @@ 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 { default as preset } from './preset/index.js';
+export { borderColor, borderRadius, borderWidth, boxShadow, colors, fontFamily, fontSize, spacing, textColor, zIndex } from './tokens/definitions.js';

package/dist/esm/preset/index.js

@@ -1,4 +1,4 @@
-import { fontFamily, colors, textColor, spacing, borderRadius, borderWidth, fontSize, boxShadow, borderColor } from '../tokens/definitions.js';
+import { fontFamily, colors, textColor, spacing, borderRadius, borderWidth, fontSize, boxShadow, borderColor, zIndex } from '../tokens/definitions.js';
 
 const preset = {
   theme: {
@@ -12,6 +12,7 @@ const preset = {
       fontSize,
       boxShadow,
       borderColor,
+      zIndex,
       keyframes: {
         opacity: {
           "0%": { opacity: 0 },

package/dist/esm/tokens/definitions.js

@@ -156,5 +156,18 @@ const textColor = {
   dark: "#353231",
   orange: "#f89907"
 };
+const zIndex = {
+  default: 0,
+  absolute: 1,
+  select: 20,
+  input: 20,
+  popover: 30,
+  tooltip: 40,
+  header: 600,
+  backdrop: 700,
+  drawer: 700,
+  sidebar: 800,
+  modal: 1e3
+};
 
-export { borderColor, borderRadius, borderWidth, boxShadow, colors, fontFamily, fontSize, spacing, textColor };
+export { borderColor, borderRadius, borderWidth, boxShadow, colors, fontFamily, fontSize, spacing, textColor, zIndex };

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

@@ -8,7 +8,7 @@ declare const drawerStyles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "bg-white fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "bg-white fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform overflow-y-scroll", import("tailwind-variants/dist/config").TVConfig<{
     position: {
         left: string;
         right: string;
@@ -44,7 +44,7 @@ declare const drawerStyles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "bg-white fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "bg-white fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform overflow-y-scroll", import("tailwind-variants/dist/config").TVConfig<{
     position: {
         left: string;
         right: 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", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "fixed rounded-micro p-kilo bg-white shadow-default flex transition inset-0 z-modal", import("tailwind-variants/dist/config").TVConfig<{
     open: {
         true: string;
         false: string;
@@ -23,7 +23,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", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "fixed rounded-micro p-kilo bg-white shadow-default flex transition inset-0 z-modal", import("tailwind-variants/dist/config").TVConfig<{
     open: {
         true: string;
         false: string;

package/dist/types/components/radio-button/radio-button.d.ts

@@ -1,2 +1,55 @@
-export declare const radioButton: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "accent-orange-600 h-5 w-5 cursor-pointer peer", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "accent-orange-600 h-5 w-5 cursor-pointer peer", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export declare const labelRadioButton: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "cursor-pointer peer-checked:font-bold", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "cursor-pointer peer-checked:font-bold", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const radioButtonStyles: import("tailwind-variants").TVReturnType<{
+    reversed: {
+        true: {
+            container: string;
+        };
+    };
+}, {
+    container: string;
+    label: string;
+    input: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    reversed: {
+        true: {
+            container: string;
+        };
+    };
+}, {
+    reversed: {
+        true: {
+            container: string;
+        };
+    };
+}>, {
+    reversed: {
+        true: {
+            container: string;
+        };
+    };
+}, {
+    container: string;
+    label: string;
+    input: string;
+}, import("tailwind-variants").TVReturnType<{
+    reversed: {
+        true: {
+            container: string;
+        };
+    };
+}, {
+    container: string;
+    label: string;
+    input: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    reversed: {
+        true: {
+            container: string;
+        };
+    };
+}, {
+    reversed: {
+        true: {
+            container: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

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

@@ -2,40 +2,53 @@ export declare const option: import("tailwind-variants").TVReturnType<{
     selected: {
         true: string;
     };
+    grouped: {
+        true: string;
+    };
 }, undefined, "flex flex-row gap-x-deca items-center text-base py-mili px-deca font-bold hover:bg-primary-xlight hover:text-primary-medium cursor-pointer active:text-primary-medium", import("tailwind-variants/dist/config").TVConfig<{
     selected: {
         true: string;
     };
+    grouped: {
+        true: string;
+    };
 }, {
     selected: {
         true: string;
     };
+    grouped: {
+        true: string;
+    };
 }>, {
     selected: {
         true: string;
     };
+    grouped: {
+        true: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     selected: {
         true: string;
     };
+    grouped: {
+        true: string;
+    };
 }, undefined, "flex flex-row gap-x-deca items-center text-base py-mili px-deca font-bold hover:bg-primary-xlight hover:text-primary-medium cursor-pointer active:text-primary-medium", import("tailwind-variants/dist/config").TVConfig<{
     selected: {
         true: string;
     };
+    grouped: {
+        true: string;
+    };
 }, {
     selected: {
         true: string;
     };
+    grouped: {
+        true: string;
+    };
 }>, unknown, unknown, undefined>>;
 export declare const selectVariants: import("tailwind-variants").TVReturnType<{
-    open: {
-        true: {
-            dropdown: string;
-        };
-        false: {
-            dropdown: string;
-        };
-    };
     disabled: {
         true: {
             button: string;
@@ -48,19 +61,10 @@ export declare const selectVariants: import("tailwind-variants").TVReturnType<{
         default: string;
     };
 }, {
-    dropdown: string;
     button: string;
     groupedTitle: string;
-    containerGrouped: string;
+    list: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<{
-    open: {
-        true: {
-            dropdown: string;
-        };
-        false: {
-            dropdown: string;
-        };
-    };
     disabled: {
         true: {
             button: string;
@@ -73,14 +77,6 @@ export declare const selectVariants: import("tailwind-variants").TVReturnType<{
         default: string;
     };
 }, {
-    open: {
-        true: {
-            dropdown: string;
-        };
-        false: {
-            dropdown: string;
-        };
-    };
     disabled: {
         true: {
             button: string;
@@ -93,14 +89,6 @@ export declare const selectVariants: import("tailwind-variants").TVReturnType<{
         default: string;
     };
 }>, {
-    open: {
-        true: {
-            dropdown: string;
-        };
-        false: {
-            dropdown: string;
-        };
-    };
     disabled: {
         true: {
             button: string;
@@ -113,19 +101,10 @@ export declare const selectVariants: import("tailwind-variants").TVReturnType<{
         default: string;
     };
 }, {
-    dropdown: string;
     button: string;
     groupedTitle: string;
-    containerGrouped: string;
+    list: string;
 }, import("tailwind-variants").TVReturnType<{
-    open: {
-        true: {
-            dropdown: string;
-        };
-        false: {
-            dropdown: string;
-        };
-    };
     disabled: {
         true: {
             button: string;
@@ -138,19 +117,10 @@ export declare const selectVariants: import("tailwind-variants").TVReturnType<{
         default: string;
     };
 }, {
-    dropdown: string;
     button: string;
     groupedTitle: string;
-    containerGrouped: string;
+    list: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<{
-    open: {
-        true: {
-            dropdown: string;
-        };
-        false: {
-            dropdown: string;
-        };
-    };
     disabled: {
         true: {
             button: string;
@@ -163,14 +133,6 @@ export declare const selectVariants: import("tailwind-variants").TVReturnType<{
         default: string;
     };
 }, {
-    open: {
-        true: {
-            dropdown: string;
-        };
-        false: {
-            dropdown: string;
-        };
-    };
     disabled: {
         true: {
             button: string;

package/dist/types/index.d.ts

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

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

@@ -105,6 +105,19 @@ declare const preset: {
             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%': {

package/dist/types/tokens/definitions.d.ts

@@ -102,4 +102,17 @@ declare const textColor: {
     dark: string;
     orange: string;
 };
-export { colors, textColor, borderColor, borderWidth, boxShadow, borderRadius, spacing, fontSize, fontFamily, };
+declare const zIndex: {
+    default: number;
+    absolute: number;
+    select: number;
+    input: number;
+    popover: number;
+    tooltip: number;
+    header: number;
+    backdrop: number;
+    drawer: number;
+    sidebar: number;
+    modal: number;
+};
+export { borderColor, borderRadius, borderWidth, boxShadow, colors, fontFamily, fontSize, spacing, textColor, zIndex, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-core",
-  "version": "0.3.0-beta.9",
+  "version": "0.3.0",
   "license": "MIT",
   "description": "Core library for tailwindcss based design",
   "main": "dist/esm/index.js",
@@ -31,5 +31,5 @@
   "peerDependencies": {
     "tailwindcss": ">=3.3.0"
   },
-  "gitHead": "efc6657898e476d4e0f05e76569ff231b4155db8"
+  "gitHead": "98039ae373aa9b70d0c7ae005bec89b4ddae0ad5"
 }