@tecsinapse/cortex-react 1.16.0-beta.1 → 1.16.0-beta.3

package/dist/cjs/components/Accordion/Trigger.js

@@ -49,10 +49,10 @@ const AccordionTrigger = ({
             className: clsx(
               "rounded-mili border border-secondary-light flex align-center justify-center p-micro",
               {
-                "absolute -translate-x-micro translate-y-deca bg-white": floating && direction === "horizontal"
+                "absolute -translate-x-micro translate-y-deca bg-surface-overlay": floating && direction === "horizontal"
               },
               {
-                "absolute -translate-y-micro translate-x-deca bg-white": floating && direction === "vertical"
+                "absolute -translate-y-micro translate-x-deca bg-surface-overlay": floating && direction === "vertical"
               },
               className
             ),

package/dist/cjs/components/Calendar/CalendarGrid.js

@@ -23,7 +23,7 @@ const CalendarGrid = ({ state }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "bg-white rounded-micro px-deca py-mili",
+      className: "bg-surface-overlay rounded-micro px-deca py-mili",
       "data-testid": "calendar-grid",
       children: /* @__PURE__ */ jsxRuntime.jsxs("table", { ...gridProps, className: "border-separate border-spacing-y-nano", children: [
         /* @__PURE__ */ jsxRuntime.jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarGridHeaderRow.CalendarGridHeaderRow, { weekDays }) }),

package/dist/cjs/components/ColorPicker.js

@@ -6,19 +6,28 @@ var React = require('react');
 
 const Box = React.forwardRef((props, ref) => {
   const { id, className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("w-tera h-kilo border overflow-hidden relative", className), children: /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      ...rest,
-      id,
-      type: "color",
-      className: "bg-transparent cursor-pointer disabled:opacity-50 disabled:cursor-default absolute -top-1.5 -right-1 w-peta h-giga",
-      ref
+      className: clsx(
+        "w-tera h-kilo border overflow-hidden relative",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ...rest,
+          id,
+          type: "color",
+          className: "bg-transparent cursor-pointer disabled:opacity-50 disabled:cursor-default absolute -top-1.5 -right-1 w-peta h-giga",
+          ref
+        }
+      )
     }
-  ) });
+  );
 });
 const Face = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-mili p-mili shadow-default bg-white flex flex-row items-center gap-2", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-mili p-mili shadow-default bg-[#222222] flex flex-row items-center gap-2", children });
 };
 const Label = ({
   children,

package/dist/cjs/components/Select/Popover.js

@@ -11,7 +11,7 @@ const SelectPopover = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     index.Popover.Content,
     {
-      className: "bg-white max-h-[30vh] overflow-y-auto gap-y-mili flex flex-col p-0",
+      className: "bg-surface-overlay max-h-[30vh] overflow-y-auto gap-y-mili flex flex-col p-0",
       style: {
         width: triggerWidth ? `${triggerWidth}px` : "auto",
         zIndex: 9999

package/dist/cjs/components/Stepper/Root.js

@@ -58,7 +58,7 @@ const Root = ({
     "div",
     {
       className: clsx(
-        "flex w-full space-x-2 bg-white p-4 pb-2 rounded-mili",
+        "flex w-full space-x-2 bg-surface-overlay p-4 pb-2 rounded-mili",
         className
       ),
       children: React.Children.map(children, renderNode)

package/dist/cjs/components/TimePicker/TimePickerInput.js

@@ -62,7 +62,7 @@ const TimePickerInputWithPopover = (props) => {
     /* @__PURE__ */ jsxRuntime.jsx(
       index.Popover.Content,
       {
-        className: "bg-white shadow-default border-none p-deca flex flex-col",
+        className: "bg-surface-overlay shadow-default border-none p-deca flex flex-col",
         initialFocus: -1,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           TimePickerSelector.TimePickerSelector,

package/dist/cjs/components/Uploader/Dropzone.js

@@ -19,7 +19,7 @@ const Dropzone = ({
     {
       ...getRootProps(),
       className: clsx(
-        "bg-white w-full border-dashed border-2 p-deca flex flex-col justify-center rounded-mili overflow-auto h-[18rem]",
+        "bg-surface-overlay w-full border-dashed border-2 p-deca flex flex-col justify-center rounded-mili overflow-auto h-[18rem]",
         {
           "border-success-medium bg-gray-100": isDragActive
         }

package/dist/cjs/components/Uploader/Files.js

@@ -8,7 +8,7 @@ const Files = ({
   onDelete,
   uploadProgressText = "Upload(s) in progress"
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white w-full border-2 p-deca flex flex-col overflow-y-auto rounded-mili h-[18rem]", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface-overlay w-full border-2 p-deca flex flex-col overflow-y-auto rounded-mili h-[18rem]", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-mili items-center mb-deca", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-deca h-deca bg-primary-medium rounded-full text-micro text-white", children: `${files.length}` }),
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-md font-semibold", "data-testid": "upload-progress", children: uploadProgressText })

package/dist/cjs/components/Uploader/Modal.js

@@ -18,7 +18,7 @@ const Modal = ({
       {
         open,
         onClose,
-        className: "flex flex-col bg-secondary-xlight rounded-mili min-w-[70vw] max-w-[95vh] max-h-[95vh] overflow-auto",
+        className: "flex flex-col bg-surface-base rounded-mili min-w-[70vw] max-w-[95vh] max-h-[95vh] overflow-auto text-default",
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between mb-deca", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-deca font-semibold ml-tera flex-1 text-center", children: title }),

package/dist/cjs/styles/menubar.js

@@ -4,10 +4,10 @@ var tailwindVariants = require('tailwind-variants');
 
 const menubar = tailwindVariants.tv({
   slots: {
-    header: "relative w-screen px-kilo py-deca flex flex-row md:justify-between bg-white z-header sm:justify-start",
+    header: "relative w-screen px-kilo py-deca flex flex-row md:justify-between bg-surface-overlay z-header sm:justify-start",
     left: "flex items-center w-fit",
     right: "flex items-center gap-x-deca hidden sm:flex",
-    dropdown: "w-full bg-white flex-1 shadow-default z-popover px-[8vw] absolute"
+    dropdown: "w-full bg-surface-overlay flex-1 shadow-default z-popover px-[8vw] absolute"
   },
   variants: {
     show: {
@@ -21,7 +21,7 @@ const menubar = tailwindVariants.tv({
 const mostUsed = tailwindVariants.tv({
   slots: {
     container: "mb-kilo",
-    label: "font-bold mb-centi",
+    label: "font-bold mb-centi text-default",
     containerList: "gap-x-kilo flex flex-row"
   }
 });
@@ -29,26 +29,26 @@ const mostUsedItem = tailwindVariants.tv({
   slots: {
     container: "flex-1 py-mili",
     title: "text-primary-medium font-bold text-base",
-    category: "text-secondary-medium text-label"
+    category: "text-content-tertiary text-label"
   }
 });
 const item = tailwindVariants.tv({
   slots: {
-    container: "flex flex-row gap-x-deca items-center text-secondary-dark hover:cursor-pointer text-base",
+    container: "flex flex-row gap-x-deca items-center text-content-secondary hover:cursor-pointer text-base",
     textBehavior: "hover:text-primary-medium",
     icon: "text-primary-medium hover:cursor-pointer"
   }
 });
 const category = tailwindVariants.tv({
   slots: {
-    text: "mb-mili font-bold",
-    hr: "mb-mili border-0 h-px bg-secondary-light",
+    text: "mb-mili font-bold text-default",
+    hr: "mb-mili border-0 h-px bg-content-primary",
     container: "flex flex-col gap-y-mili"
   }
 });
 const subItem = tailwindVariants.tv({
   slots: {
-    container: "pl-deca text-sub border-l-[1px] border-primary-medium text-secondary-dark hover:text-primary-medium cursor-pointer"
+    container: "pl-deca text-sub border-l-[1px] border-primary-medium text-content-secondary hover:text-primary-medium cursor-pointer"
   }
 });
 const animate = tailwindVariants.tv({

package/dist/esm/components/Accordion/Trigger.js

@@ -47,10 +47,10 @@ const AccordionTrigger = ({
             className: clsx(
               "rounded-mili border border-secondary-light flex align-center justify-center p-micro",
               {
-                "absolute -translate-x-micro translate-y-deca bg-white": floating && direction === "horizontal"
+                "absolute -translate-x-micro translate-y-deca bg-surface-overlay": floating && direction === "horizontal"
               },
               {
-                "absolute -translate-y-micro translate-x-deca bg-white": floating && direction === "vertical"
+                "absolute -translate-y-micro translate-x-deca bg-surface-overlay": floating && direction === "vertical"
               },
               className
             ),

package/dist/esm/components/Calendar/CalendarGrid.js

@@ -21,7 +21,7 @@ const CalendarGrid = ({ state }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "bg-white rounded-micro px-deca py-mili",
+      className: "bg-surface-overlay rounded-micro px-deca py-mili",
       "data-testid": "calendar-grid",
       children: /* @__PURE__ */ jsxs("table", { ...gridProps, className: "border-separate border-spacing-y-nano", children: [
         /* @__PURE__ */ jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsx(CalendarGridHeaderRow, { weekDays }) }),

package/dist/esm/components/ColorPicker.js

@@ -4,19 +4,28 @@ import { forwardRef } from 'react';
 
 const Box = forwardRef((props, ref) => {
   const { id, className, ...rest } = props;
-  return /* @__PURE__ */ jsx("div", { className: clsx("w-tera h-kilo border overflow-hidden relative", className), children: /* @__PURE__ */ jsx(
-    "input",
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      ...rest,
-      id,
-      type: "color",
-      className: "bg-transparent cursor-pointer disabled:opacity-50 disabled:cursor-default absolute -top-1.5 -right-1 w-peta h-giga",
-      ref
+      className: clsx(
+        "w-tera h-kilo border overflow-hidden relative",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...rest,
+          id,
+          type: "color",
+          className: "bg-transparent cursor-pointer disabled:opacity-50 disabled:cursor-default absolute -top-1.5 -right-1 w-peta h-giga",
+          ref
+        }
+      )
     }
-  ) });
+  );
 });
 const Face = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: "rounded-mili p-mili shadow-default bg-white flex flex-row items-center gap-2", children });
+  return /* @__PURE__ */ jsx("div", { className: "rounded-mili p-mili shadow-default bg-[#222222] flex flex-row items-center gap-2", children });
 };
 const Label = ({
   children,

package/dist/esm/components/Select/Popover.js

@@ -9,7 +9,7 @@ const SelectPopover = ({ children }) => {
   return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
     Popover.Content,
     {
-      className: "bg-white max-h-[30vh] overflow-y-auto gap-y-mili flex flex-col p-0",
+      className: "bg-surface-overlay max-h-[30vh] overflow-y-auto gap-y-mili flex flex-col p-0",
       style: {
         width: triggerWidth ? `${triggerWidth}px` : "auto",
         zIndex: 9999

package/dist/esm/components/Stepper/Root.js

@@ -56,7 +56,7 @@ const Root = ({
     "div",
     {
       className: clsx(
-        "flex w-full space-x-2 bg-white p-4 pb-2 rounded-mili",
+        "flex w-full space-x-2 bg-surface-overlay p-4 pb-2 rounded-mili",
         className
       ),
       children: React.Children.map(children, renderNode)

package/dist/esm/components/TimePicker/TimePickerInput.js

@@ -60,7 +60,7 @@ const TimePickerInputWithPopover = (props) => {
     /* @__PURE__ */ jsx(
       Popover.Content,
       {
-        className: "bg-white shadow-default border-none p-deca flex flex-col",
+        className: "bg-surface-overlay shadow-default border-none p-deca flex flex-col",
         initialFocus: -1,
         children: /* @__PURE__ */ jsx(
           TimePickerSelector,

package/dist/esm/components/Uploader/Dropzone.js

@@ -17,7 +17,7 @@ const Dropzone = ({
     {
       ...getRootProps(),
       className: clsx(
-        "bg-white w-full border-dashed border-2 p-deca flex flex-col justify-center rounded-mili overflow-auto h-[18rem]",
+        "bg-surface-overlay w-full border-dashed border-2 p-deca flex flex-col justify-center rounded-mili overflow-auto h-[18rem]",
         {
           "border-success-medium bg-gray-100": isDragActive
         }

package/dist/esm/components/Uploader/Files.js

@@ -6,7 +6,7 @@ const Files = ({
   onDelete,
   uploadProgressText = "Upload(s) in progress"
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "bg-white w-full border-2 p-deca flex flex-col overflow-y-auto rounded-mili h-[18rem]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "bg-surface-overlay w-full border-2 p-deca flex flex-col overflow-y-auto rounded-mili h-[18rem]", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex gap-mili items-center mb-deca", children: [
       /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-deca h-deca bg-primary-medium rounded-full text-micro text-white", children: `${files.length}` }),
       /* @__PURE__ */ jsx("h2", { className: "text-md font-semibold", "data-testid": "upload-progress", children: uploadProgressText })

package/dist/esm/components/Uploader/Modal.js

@@ -16,7 +16,7 @@ const Modal = ({
       {
         open,
         onClose,
-        className: "flex flex-col bg-secondary-xlight rounded-mili min-w-[70vw] max-w-[95vh] max-h-[95vh] overflow-auto",
+        className: "flex flex-col bg-surface-base rounded-mili min-w-[70vw] max-w-[95vh] max-h-[95vh] overflow-auto text-default",
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between mb-deca", children: [
             /* @__PURE__ */ jsx("h2", { className: "text-deca font-semibold ml-tera flex-1 text-center", children: title }),

package/dist/esm/styles/menubar.js

@@ -2,10 +2,10 @@ import { tv } from 'tailwind-variants';
 
 const menubar = tv({
   slots: {
-    header: "relative w-screen px-kilo py-deca flex flex-row md:justify-between bg-white z-header sm:justify-start",
+    header: "relative w-screen px-kilo py-deca flex flex-row md:justify-between bg-surface-overlay z-header sm:justify-start",
     left: "flex items-center w-fit",
     right: "flex items-center gap-x-deca hidden sm:flex",
-    dropdown: "w-full bg-white flex-1 shadow-default z-popover px-[8vw] absolute"
+    dropdown: "w-full bg-surface-overlay flex-1 shadow-default z-popover px-[8vw] absolute"
   },
   variants: {
     show: {
@@ -19,7 +19,7 @@ const menubar = tv({
 const mostUsed = tv({
   slots: {
     container: "mb-kilo",
-    label: "font-bold mb-centi",
+    label: "font-bold mb-centi text-default",
     containerList: "gap-x-kilo flex flex-row"
   }
 });
@@ -27,26 +27,26 @@ const mostUsedItem = tv({
   slots: {
     container: "flex-1 py-mili",
     title: "text-primary-medium font-bold text-base",
-    category: "text-secondary-medium text-label"
+    category: "text-content-tertiary text-label"
   }
 });
 const item = tv({
   slots: {
-    container: "flex flex-row gap-x-deca items-center text-secondary-dark hover:cursor-pointer text-base",
+    container: "flex flex-row gap-x-deca items-center text-content-secondary hover:cursor-pointer text-base",
     textBehavior: "hover:text-primary-medium",
     icon: "text-primary-medium hover:cursor-pointer"
   }
 });
 const category = tv({
   slots: {
-    text: "mb-mili font-bold",
-    hr: "mb-mili border-0 h-px bg-secondary-light",
+    text: "mb-mili font-bold text-default",
+    hr: "mb-mili border-0 h-px bg-content-primary",
     container: "flex flex-col gap-y-mili"
   }
 });
 const subItem = tv({
   slots: {
-    container: "pl-deca text-sub border-l-[1px] border-primary-medium text-secondary-dark hover:text-primary-medium cursor-pointer"
+    container: "pl-deca text-sub border-l-[1px] border-primary-medium text-content-secondary hover:text-primary-medium cursor-pointer"
   }
 });
 const animate = tv({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.16.0-beta.1",
+  "version": "1.16.0-beta.3",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.18",
     "@internationalized/date": "3.7.0",
-    "@tecsinapse/cortex-core": "1.3.0-beta.1",
+    "@tecsinapse/cortex-core": "1.3.0-beta.3",
     "clsx": "2.1.1",
     "currency.js": "2.0.4",
     "embla-carousel-autoplay": "^8.0.0",
@@ -48,5 +48,5 @@
     "react-icons": ">=5.2.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "c976f6fea2c049735ce9fcacfc61583a552c10e1"
+  "gitHead": "f13be73645bde5042aeb082331dc6c6d80fb506e"
 }