cekat-ui 1.0.7 → 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.0.7",
+  "version": "1.2.0",
   "description": "Cekat UI Component Library",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -12,10 +12,12 @@
       "require": "./dist/index.umd.js",
       "types": "./dist/index.d.ts"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./tailwind-preset": "./tailwind.preset.cjs"
   },
   "files": [
-    "dist"
+    "dist",
+    "tailwind.preset.cjs"
   ],
   "sideEffects": false,
   "peerDependencies": {
@@ -29,10 +31,11 @@
     "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",
     "@tabler/icons-react": "^3.36.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -40,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",
@@ -55,4 +57,4 @@
     "vite": "^7.3.0",
     "vite-plugin-dts": "^4.5.4"
   }
-}
+}

package/tailwind.preset.cjs

@@ -0,0 +1,317 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    container: {
+      center: true,
+    },
+    extend: {
+      animation: {
+        "spin-slow": "spin 3s linear infinite",
+        loading: "loading 1.5s ease-in-out infinite",
+      },
+      keyframes: {
+        loading: {
+          "0%": { transform: "translateX(-100%)" },
+          "100%": { transform: "translateX(200%)" },
+        },
+      },
+
+      colors: {
+        black: {
+          DEFAULT: "#000000",
+          light: "#E3E4EB",
+          "dark-light": "rgba(14,23,38,.15)",
+        },
+        white: {
+          DEFAULT: "#FFFFFF",
+          light: "#E0E6ED",
+          dark: "#888EA8",
+        },
+        transparent: {
+          DEFAULT: "#FFFFFF00",
+        },
+        primary: {
+          DEFAULT: "#1352BF",
+          light: "#E4EBF9",
+          "dark-light": "rgba(67,97,238,.15)",
+          50: "#FBFCFF",
+          100: "#E4EBF9",
+          200: "#CDDAF2",
+          300: "#9EB8E5",
+          400: "#7096D9",
+          500: "#1352BF",
+          600: "#0F4299",
+          700: "#0B3173",
+          800: "#08214C",
+          900: "#041026",
+        },
+        secondary: {
+          DEFAULT: "#13A8BF",
+          light: "#EBE4F7",
+          "dark-light": "rgb(128 93 202 / 15%)",
+          50: "#FBFEFF",
+          100: "#E4F5F9",
+          200: "#9EDCE5",
+          300: "#70CAD9",
+          400: "#41B9CC",
+          500: "#13A8BF",
+          600: "#0F8699",
+          700: "#0B6573",
+          800: "#08434C",
+          900: "#042226",
+        },
+        light: {
+          DEFAULT: "#182230",
+          50: "#F9FAFB",
+          100: "#F2F4F7",
+          200: "#E4E7EC",
+          300: "#D0D5DD",
+          400: "#98A2B3",
+          500: "#667085",
+          600: "#475467",
+          700: "#344054",
+          800: "#182230",
+          900: "#101828",
+        },
+        dark: {
+          DEFAULT: "#1F242F",
+          light: "#EAEAEC",
+          "dark-light": "rgba(59,63,92,.15)",
+          50: "#F5F5F6",
+          100: "#F0F1F1",
+          200: "#ECECED",
+          300: "#CECFD2",
+          400: "#94969C",
+          500: "#85888E",
+          600: "#61646C",
+          700: "#333741",
+          800: "#1F242F",
+          900: "#161B26",
+        },
+        error: {
+          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: "#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",
+          light: "#FFFAEB",
+          "dark-light": "rgba(226,160,63,.15)",
+          50: "#FFFCF5",
+          100: "#FFFAEB",
+          200: "#FEF0C7",
+          300: "#FEC84B",
+          400: "#FDB022",
+          500: "#F79009",
+          600: "#DC6803",
+          700: "#B54708",
+          800: "#93370D",
+          900: "#7A2E0E",
+        },
+        success: {
+          DEFAULT: "#CAF9CC",
+          light: "#CAF9CC",
+          "dark-light": "rgba(0,171,85,.15)",
+          50: "#EEFFEE",
+          100: "#CAF9CC",
+          200: "#97F4A5",
+          300: "#60DE7F",
+          400: "#37BD66",
+          500: "#089146",
+          600: "#057C47",
+          700: "#046845",
+          800: "#02543F",
+          900: "#01453B",
+        },
+        info: {
+          DEFAULT: "#CEE9FD",
+          light: "#CEE9FD",
+          "dark-light": "rgba(33,150,243,.15)",
+          50: "#E5F4FF",
+          100: "#CEE9FD",
+          200: "#9ED1FC",
+          300: "#6DB1F7",
+          400: "#4894EF",
+          500: "#1068E5",
+          600: "#0B50C4",
+          700: "#083BA4",
+          800: "#052984",
+          900: "#031D6D",
+        },
+        "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: {
+        nunito: ["Nunito", "sans-serif"],
+      },
+
+      fontWeight: {
+        // 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",
+      },
+
+      spacing: {
+        4.5: "18px",
+      },
+
+      boxShadow: {
+        "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: {
+        h1: ["3.75rem", { lineHeight: "4.5rem" }],
+        h2: ["3rem", { lineHeight: "3.5rem" }],
+        h3: ["2.25rem", { lineHeight: "2.75rem" }],
+        h4: ["1.875rem", { lineHeight: "2.5rem" }],
+        h5: ["1.5rem", { lineHeight: "2.25rem" }],
+        h6: ["1.25rem", { lineHeight: "1.75rem" }],
+
+        "body-lg": ["1.125rem", { lineHeight: "1.75rem" }],
+        "body-sm": ["1rem", { lineHeight: "1.5rem" }],
+
+        "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",
+      },
+    },
+  },
+
+  corePlugins: {
+    preflight: false, // 🔥 IMPORTANT — prevent CSS reset conflicts
+  },
+
+  plugins: [],
+};