cekat-ui 1.1.0 → 1.2.0

package/dist/utils/color.d.ts

@@ -0,0 +1,4 @@
+/** Whether a string is a valid 6-digit hex color (e.g. "#13a8bf"). */
+export declare const isValidHexColor: (hex: string) => boolean;
+/** Parses a 6-digit hex color into an rgba() string at the given alpha. Returns undefined if unparseable. */
+export declare const hexToRgba: (hex: string, alpha: number) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cekat-ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Cekat UI Component Library",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -31,7 +31,8 @@
     "build:lib": "yarn build && yarn build:css",
     "build:storybook": "storybook build",
     "tailwind:build": "tailwindcss -c tailwind.config.cjs -i stories/styles/tailwind.css -o dist/style.css",
-    "publish:lib": "yarn build && yarn tailwind:build"
+    "publish:lib": "yarn build && yarn tailwind:build",
+    "prepublishOnly": "yarn build:lib"
   },
   "dependencies": {
     "@tabler/core": "^1.4.0",
@@ -42,7 +43,6 @@
     "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@rollup/rollup-darwin-arm64": "^4.55.1",
     "@storybook/react-vite": "^10.1.9",
     "@types/node": "^25.0.8",
     "@types/react": "^18",
@@ -57,4 +57,4 @@
     "vite": "^7.3.0",
     "vite-plugin-dts": "^4.5.4"
   }
-}
+}

package/tailwind.preset.cjs

@@ -19,13 +19,13 @@ module.exports = {
       colors: {
         black: {
           DEFAULT: "#000000",
-          light: "#e3e4eb",
+          light: "#E3E4EB",
           "dark-light": "rgba(14,23,38,.15)",
         },
         white: {
-          DEFAULT: "#ffffff",
-          light: "#e0e6ed",
-          dark: "#888ea8",
+          DEFAULT: "#FFFFFF",
+          light: "#E0E6ED",
+          dark: "#888EA8",
         },
         transparent: {
           DEFAULT: "#FFFFFF00",
@@ -47,7 +47,7 @@ module.exports = {
         },
         secondary: {
           DEFAULT: "#13A8BF",
-          light: "#ebe4f7",
+          light: "#EBE4F7",
           "dark-light": "rgb(128 93 202 / 15%)",
           50: "#FBFEFF",
           100: "#E4F5F9",
@@ -75,7 +75,7 @@ module.exports = {
         },
         dark: {
           DEFAULT: "#1F242F",
-          light: "#eaeaec",
+          light: "#EAEAEC",
           "dark-light": "rgba(59,63,92,.15)",
           50: "#F5F5F6",
           100: "#F0F1F1",
@@ -89,35 +89,35 @@ module.exports = {
           900: "#161B26",
         },
         error: {
-          DEFAULT: "#FEE4E2",
-          light: "#fff5f5",
-          "dark-light": "rgba(231,81,90,.15)",
-          50: "#FEF3F2",
-          100: "#FEE4E2",
-          200: "#FECDCA",
-          300: "#FDA29B",
-          400: "#F97066",
-          500: "#F04438",
-          600: "#D92D20",
-          700: "#B42318",
-          800: "#912018",
-          900: "#7A271A",
+          DEFAULT: "#FDE2D1",
+          light: "#FFF5F5",
+          "dark-light": "rgba(226,38,31,.15)",
+          50: "#FFEFE5",
+          100: "#FDE2D1",
+          200: "#FCBEA5",
+          300: "#F69076",
+          400: "#ED6653",
+          500: "#E2261F",
+          600: "#C2161F",
+          700: "#A20F23",
+          800: "#830924",
+          900: "#6C0524",
         },
         danger: {
           //SAME LIKE ERROR, BUT THIS ONE WAS ADDED TO PREVENT ERROR ON THE COMPONENTS THAT STILL USE DANGER CLASS
-          DEFAULT: "#FEE4E2",
-          light: "#FEE4E2",
-          "dark-light": "rgba(231,81,90,.15)",
-          50: "#FEF3F2",
-          100: "#FEE4E2",
-          200: "#FECDCA",
-          300: "#FDA29B",
-          400: "#F97066",
-          500: "#F04438",
-          600: "#D92D20",
-          700: "#B42318",
-          800: "#912018",
-          900: "#7A271A",
+          DEFAULT: "#FDE2D1",
+          light: "#FDE2D1",
+          "dark-light": "rgba(226,38,31,.15)",
+          50: "#FFEFE5",
+          100: "#FDE2D1",
+          200: "#FCBEA5",
+          300: "#F69076",
+          400: "#ED6653",
+          500: "#E2261F",
+          600: "#C2161F",
+          700: "#A20F23",
+          800: "#830924",
+          900: "#6C0524",
         },
         warning: {
           DEFAULT: "#FFFAEB",
@@ -167,6 +167,91 @@ module.exports = {
         "grey-base": {
           DEFAULT: "#808080",
         },
+
+        "blue-gray": {
+          50: "#F8F9FC",
+          100: "#EAECF5",
+          200: "#D5D9EB",
+          300: "#B3B8DB",
+          400: "#717BBC",
+          500: "#4E5BA6",
+          600: "#3E4784",
+          700: "#363F72",
+          800: "#293056",
+          900: "#101323",
+        },
+        "blue-light": {
+          50: "#F0F9FF",
+          100: "#E0F2FE",
+          200: "#B9E6FE",
+          300: "#7CD4FD",
+          400: "#36BFFA",
+          500: "#0BA5EC",
+          600: "#0086C9",
+          700: "#026AA2",
+          800: "#065986",
+          900: "#0B4A6F",
+        },
+        indigo: {
+          50: "#EEF4FF",
+          100: "#E0EAFF",
+          200: "#C7D7FE",
+          300: "#A4BCFD",
+          400: "#8098F9",
+          500: "#6172F3",
+          600: "#444CE7",
+          700: "#3538CD",
+          800: "#2D31A6",
+          900: "#2D3282",
+        },
+        purple: {
+          50: "#F4F3FF",
+          100: "#EBE9FE",
+          200: "#D9D6FE",
+          300: "#BDB4FE",
+          400: "#9B8AFB",
+          500: "#7A5AF8",
+          600: "#6938EF",
+          700: "#5925DC",
+          800: "#4A1FB8",
+          900: "#3E1C96",
+        },
+        blue: {
+          50: "#EFF8FF",
+          100: "#D1E9FF",
+          200: "#B2DDFF",
+          300: "#84CAFF",
+          400: "#53B1FD",
+          500: "#2E90FA",
+          600: "#1570EF",
+          700: "#175CD3",
+          800: "#1849A9",
+          900: "#194185",
+        },
+        pink: {
+          50: "#FDF2FA",
+          100: "#FCE7F6",
+          200: "#FCCEEE",
+          300: "#FAA7E0",
+          400: "#F670C7",
+          500: "#EE46BC",
+          600: "#DD2590",
+          700: "#C11574",
+          800: "#9E165F",
+          900: "#851651",
+        },
+        orange: {
+          50: "#FEF6EE",
+          100: "#FDEAD7",
+          200: "#F9DBAF",
+          300: "#F7B27A",
+          400: "#F38744",
+          500: "#EF6820",
+          600: "#E04F16",
+          700: "#B93815",
+          800: "#932F19",
+          900: "#772917",
+        },
       },
 
       fontFamily: {
@@ -174,14 +259,9 @@ module.exports = {
       },
 
       fontWeight: {
-        extralight: "200",
-        light: "300",
+        // Tailwind's default theme already provides extralight/light/medium/semibold/bold/extrabold/black
+        // at these same values; "regular" is the only addition (Figma's name for weight 400, aliasing "normal").
         regular: "400",
-        medium: "500",
-        semibold: "600",
-        bold: "700",
-        extrabold: "800",
-        black: "900",
       },
 
       spacing: {
@@ -192,6 +272,9 @@ module.exports = {
         "3xl":
           "0 2px 2px rgb(224 230 237 / 46%), 1px 6px 7px rgb(224 230 237 / 46%)",
         "custom-1": "0px 4px 9px 0px rgba(152, 160, 180, 0.25)",
+        lg: "0px 4px 6px -2px rgba(16,24,40,0.03), 0px 12px 16px -4px rgba(16,24,40,0.08)",
+        xs: "0px 1px 2px 0px rgba(16,24,40,0.05)",
+        md: "0px 2px 4px -2px rgba(16,24,40,0.06), 0px 4px 8px -2px rgba(16,24,40,0.1)",
       },
 
       fontSize: {
@@ -208,6 +291,21 @@ module.exports = {
         "caption-lg": ["0.875rem", { lineHeight: "1.25rem" }],
         "caption-sm": ["0.75rem", { lineHeight: "1.125rem" }],
       },
+
+      lineHeight: {
+        h1: "4.5rem",
+        h2: "3.5rem",
+        h3: "2.75rem",
+        h4: "2.5rem",
+        h5: "2.25rem",
+        h6: "1.75rem",
+
+        "body-lg": "1.75rem",
+        "body-sm": "1.5rem",
+
+        "caption-lg": "1.25rem",
+        "caption-sm": "1.125rem",
+      },
     },
   },