@deepnoid/ui 0.1.223 → 1.0.0

package/dist/{chunk-U4DJHAM5.mjs → chunk-DPWUIAVC.mjs}

@@ -78,141 +78,349 @@ import { createTV } from "tailwind-variants";
 // ../tailwind-config/src/plugin.ts
 var import_plugin = __toESM(require_plugin());
 
+// ../tailwind-config/src/colors/primitive-palette.ts
+var primitivePalette = {
+  bg: {
+    "01": "#040811",
+    "02": "#040811",
+    "03": "#14161E",
+    "04": "#070414",
+    "05": "#070C12",
+    "06": "#202123"
+  },
+  gray: {
+    cool: {
+      50: "#F7F7F8",
+      100: "#EEEEF0",
+      200: "#D8D9DF",
+      300: "#B6B8C3",
+      400: "#999CA9",
+      500: "#717486",
+      600: "#5B5E6E",
+      700: "#4A4C5A",
+      800: "#40424C",
+      900: "#36373F",
+      950: "#25252C"
+    },
+    warm: {
+      50: "#F6F6F6",
+      100: "#E7E7E7",
+      200: "#D1D1D1",
+      300: "#B0B0B0",
+      400: "#888888",
+      500: "#6D6D6D",
+      600: "#5D5D5D",
+      700: "#525252",
+      800: "#454545",
+      900: "#3D3D3D",
+      950: "#25252C"
+    }
+  },
+  opacity: {
+    white: {
+      "0": "#FFFFFF, 0",
+      5: "#FFFFFF, 5",
+      10: "#FFFFFF, 10",
+      20: "#FFFFFF, 20",
+      30: "#FFFFFF, 30",
+      40: "#FFFFFF, 40",
+      50: "#FFFFFF, 50",
+      60: "#FFFFFF, 60",
+      70: "#FFFFFF, 70",
+      80: "#FFFFFF, 80",
+      90: "#FFFFFF, 90"
+    },
+    black: {
+      "0": "#000000, 0",
+      5: "#000000, 5",
+      10: "#000000, 10",
+      20: "#000000, 20",
+      30: "#000000, 30",
+      40: "#000000, 40",
+      50: "#000000, 50",
+      60: "#000000, 60",
+      70: "#000000, 70",
+      80: "#000000, 80",
+      90: "#000000, 90"
+    }
+  },
+  red: {
+    50: "#FEF2F2",
+    100: "#FEE9E9",
+    200: "#FCCFD2",
+    300: "#F9A8AC",
+    400: "#F57780",
+    500: "#EC4757",
+    600: "#D82640",
+    700: "#B71934",
+    800: "#991832",
+    900: "#831831",
+    950: "#831831"
+  },
+  rose: {
+    50: "#FDF4F6",
+    100: "#F9E9EC",
+    200: "#F4D8DD",
+    300: "#E9B8C2",
+    400: "#DF96A6",
+    500: "#CB6881",
+    600: "#B54969",
+    700: "#973957",
+    800: "#7F324D",
+    900: "#6A2740",
+    950: "#3C1523"
+  },
+  hotPink: {
+    50: "#FDF2F7",
+    100: "#FDE6F0",
+    200: "#FCCEE3",
+    300: "#FBA6CA",
+    400: "#F76FA6",
+    500: "#F04485",
+    600: "#E2326C",
+    700: "#C21448",
+    800: "#A1133C",
+    900: "#861535",
+    950: "#52051B"
+  },
+  sepia: {
+    50: "#FCF5F4",
+    100: "#FAE9E9",
+    200: "#F5D6D7",
+    300: "#EDB4B6",
+    400: "#E28A8F",
+    500: "#D45F69",
+    600: "#BE4051",
+    700: "#9F3142",
+    800: "#862B3C",
+    900: "#6B2433",
+    950: "#320E15"
+  },
+  orange: {
+    50: "#FEF7EE",
+    100: "#FDEDD7",
+    200: "#F9D8AF",
+    300: "#F5BB7C",
+    400: "#F09447",
+    500: "#EC7723",
+    600: "#E15F19",
+    700: "#E15F19",
+    800: "#92391A",
+    900: "#763118",
+    950: "#40160A"
+  },
+  yellow: {
+    50: "#F9F2E5",
+    100: "#F5E6BC",
+    200: "#FFE9BC",
+    300: "#FFD174",
+    400: "#F8BE4A",
+    500: "#EAAD30",
+    600: "#D77908",
+    700: "#B2550B",
+    800: "#91420F",
+    900: "#773610",
+    950: "#441B04"
+  },
+  tree: {
+    50: "#F5F3F1",
+    100: "#E5E1DC",
+    200: "#CCC5BC",
+    300: "#AFA395",
+    400: "#978878",
+    500: "#907E6F",
+    600: "#756459",
+    700: "#5F4F49",
+    800: "#524541",
+    900: "#483D3B",
+    950: "#282120"
+  },
+  brown: {
+    50: "#F6F3F0",
+    100: "#F4EDEC",
+    200: "#EBDFDD",
+    300: "#DCC9C5",
+    400: "#C6A9A3",
+    500: "#B08983",
+    600: "#A27E77",
+    700: "#7F5D56",
+    800: "#6A4F4A",
+    900: "#5B4541",
+    950: "#2C1E1C"
+  },
+  lime: {
+    50: "#F7FFE5",
+    100: "#ECFFC7",
+    200: "#D9FF95",
+    300: "#BDFE58",
+    400: "#A1F524",
+    500: "#82DC06",
+    600: "#63B000",
+    700: "#4B8506",
+    800: "#3E690B",
+    900: "#34580F",
+    950: "#193102"
+  },
+  green: {
+    50: "#E7F3EB",
+    100: "#DFF9EA",
+    200: "#CEECDA",
+    300: "#9CD4B3",
+    400: "#6EC092",
+    500: "#3FA46B",
+    600: "#209754",
+    700: "#1E7745",
+    800: "#1D5E3A",
+    900: "#194E32",
+    950: "#082B19"
+  },
+  timberGreen: {
+    50: "#F1FCF5",
+    100: "#DFF9EA",
+    200: "#B5DACD",
+    300: "#8ABFAF",
+    400: "#60A18F",
+    500: "#468675",
+    600: "#366B5F",
+    700: "#2E574D",
+    800: "#2A4641",
+    900: "#1D2F2B",
+    950: "#11221E"
+  },
+  teal: {
+    50: "#E2F1F0",
+    100: "#C9EBE8",
+    200: "#C7E8E5",
+    300: "#8AD0D0",
+    400: "#67C4C4",
+    500: "#39A6A7",
+    600: "#258386",
+    700: "#1B666A",
+    800: "#1A5255",
+    900: "#1A4447",
+    950: "#09272A"
+  },
+  lightBlue: {
+    50: "#F2F8FD",
+    100: "#E3EFFB",
+    200: "#C1E0F6",
+    300: "#8BC6EE",
+    400: "#3DA2E1",
+    500: "#258FD2",
+    600: "#1771B2",
+    700: "#145A90",
+    800: "#154D77",
+    900: "#174163",
+    950: "#062C2D"
+  },
+  sea: {
+    50: "#F4F6FC",
+    100: "#E8EDF6",
+    200: "#CBD9EB",
+    300: "#9FB9DA",
+    400: "#6A93C5",
+    500: "#446FA4",
+    600: "#375D92",
+    700: "#2D4B77",
+    800: "#294163",
+    900: "#263954",
+    950: "#1A2537"
+  },
+  blue: {
+    50: "#F0F6FE",
+    100: "#DDEAFC",
+    200: "#C2DBFB",
+    300: "#98C5F8",
+    400: "#68A7F2",
+    500: "#377CEB",
+    600: "#2F68E1",
+    700: "#2754CE",
+    800: "#20429E",
+    900: "#1C2A52",
+    950: "#061132"
+  },
+  lightPurple: {
+    50: "#F6F5FD",
+    100: "#EEEDFA",
+    200: "#DDDCFD",
+    300: "#BDB9EC",
+    400: "#AAA1E4",
+    500: "#826CE3",
+    600: "#7250D7",
+    700: "#623DC4",
+    800: "#5133A4",
+    900: "#442B87",
+    950: "#291A5B"
+  }
+};
+
 // ../tailwind-config/src/colors/semantic-palette.ts
 var semanticPalette = {
-  light: {
-    primary: {
-      soft: "#EFF8FF",
-      light: "#C7E5FA",
-      main: "#3F9CF2",
-      dark: "#2980E7",
-      strong: "#204A88"
-    },
-    secondary: {
-      soft: "#F8F1FF",
-      light: "#DEC1FA",
-      main: "#9B3FF2",
-      dark: "#7E27CF",
-      strong: "#3E0C6D"
-    },
-    body: {
-      foreground: "#333333",
-      background: "#FFFFFF"
-    },
-    neutral: {
-      soft: "#F2F3F4",
-      light: "#DFE2E7",
-      main: "#808488",
-      dark: "#5B5E62",
-      strong: "#383A3E"
-    },
-    trans: {
-      soft: "#000000, 0.05",
-      light: "#000000, 0.1",
-      main: "#000000, 0.2",
-      dark: "#000000, 0.3",
-      strong: "#000000, 0.6"
-    },
-    common: {
-      black: "#333333",
-      white: "#FFFFFF",
-      transparent: "#FFFFFF, 0"
-    },
-    info: {
-      soft: "#F3FBFB",
-      light: "#B5F0F0",
-      main: "#1FAFAF",
-      dark: "#189494",
-      strong: ""
-    },
-    success: {
-      soft: "#F0FBF0",
-      light: "#92DCB2",
-      main: "#24A25B",
-      dark: "#137F42",
-      strong: ""
-    },
-    warning: {
-      soft: "#FEF8EB",
-      light: "#F9C967",
-      main: "#EDA410",
-      dark: "#C8890A",
-      strong: ""
-    },
-    danger: {
-      soft: "#FFF3F7",
-      light: "#FFBAD1",
-      main: "#FF4684",
-      dark: "#C62F62",
-      strong: ""
-    }
-  },
-  dark: {
-    primary: {
-      soft: "#EFF8FF",
-      light: "#C7E5FA",
-      main: "#3F9CF2",
-      dark: "#2980E7",
-      strong: "#204A88"
-    },
-    secondary: {
-      soft: "#F8F1FF",
-      light: "#DEC1FA",
-      main: "#9B3FF2",
-      dark: "#7E27CF",
-      strong: "#3E0C6D"
-    },
-    body: {
-      foreground: "#333333",
-      background: "#FFFFFF"
-    },
-    neutral: {
-      soft: "#F2F3F4",
-      light: "#DFE2E7",
-      main: "#808488",
-      dark: "#5B5E62",
-      strong: "#383A3E"
-    },
-    trans: {
-      soft: "#000000, 0.05",
-      light: "#000000, 0.1",
-      main: "#000000, 0.2",
-      dark: "#000000, 0.3",
-      strong: "#000000, 0.6"
-    },
-    common: {
-      black: "#333333",
-      white: "#FFFFFF",
-      transparent: "#FFFFFF, 0"
-    },
-    info: {
-      soft: "#F3FBFB",
-      light: "#B5F0F0",
-      main: "#1FAFAF",
-      dark: "#189494",
-      strong: ""
-    },
-    success: {
-      soft: "#F0FBF0",
-      light: "#92DCB2",
-      main: "#24A25B",
-      dark: "#137F42",
-      strong: ""
-    },
-    warning: {
-      soft: "#FEF8EB",
-      light: "#F9C967",
-      main: "#EDA410",
-      dark: "#C8890A",
-      strong: ""
-    },
-    danger: {
-      soft: "#FFF3F7",
-      light: "#FFBAD1",
-      main: "#FF4684",
-      dark: "#C62F62",
-      strong: ""
-    }
+  primary: {
+    soft: { light: primitivePalette.blue[100], dark: primitivePalette.blue[950] },
+    light: { light: primitivePalette.blue[200], dark: primitivePalette.blue[900] },
+    main: { light: primitivePalette.blue[600], dark: primitivePalette.blue[600] },
+    dark: { light: primitivePalette.blue[800], dark: primitivePalette.blue[500] },
+    strong: { light: primitivePalette.blue[900], dark: primitivePalette.blue[200] }
+  },
+  secondary: {
+    soft: { light: primitivePalette.lightPurple[100], dark: primitivePalette.lightPurple[950] },
+    light: { light: primitivePalette.lightPurple[200], dark: primitivePalette.lightPurple[900] },
+    main: { light: primitivePalette.lightPurple[600], dark: primitivePalette.lightPurple[500] },
+    dark: { light: primitivePalette.lightPurple[800], dark: primitivePalette.lightPurple[700] },
+    strong: { light: primitivePalette.lightPurple[950], dark: primitivePalette.lightPurple[950] }
+  },
+  body: {
+    foreground: { light: primitivePalette.gray.cool[950], dark: primitivePalette.gray.cool[50] },
+    background: { light: primitivePalette.gray.cool[50], dark: primitivePalette.bg["06"] }
+  },
+  neutral: {
+    soft: { light: primitivePalette.gray.cool[100], dark: primitivePalette.gray.cool[900] },
+    light: { light: primitivePalette.gray.cool[200], dark: primitivePalette.gray.cool[700] },
+    main: { light: primitivePalette.gray.cool[400], dark: primitivePalette.gray.cool[400] },
+    dark: { light: primitivePalette.gray.cool[500], dark: primitivePalette.gray.cool[300] },
+    strong: { light: primitivePalette.gray.cool[700], dark: primitivePalette.gray.cool[200] }
+  },
+  trans: {
+    soft: { light: primitivePalette.opacity.black[5], dark: primitivePalette.opacity.white[5] },
+    light: { light: primitivePalette.opacity.black[10], dark: primitivePalette.opacity.white[10] },
+    main: { light: primitivePalette.opacity.black[20], dark: primitivePalette.opacity.white[20] },
+    dark: { light: primitivePalette.opacity.black[30], dark: primitivePalette.opacity.white[30] },
+    strong: { light: primitivePalette.opacity.black[60], dark: primitivePalette.opacity.black[60] }
+  },
+  common: {
+    black: { light: primitivePalette.gray.cool[950], dark: primitivePalette.gray.cool[950] },
+    white: { light: primitivePalette.gray.cool[50], dark: primitivePalette.gray.cool[50] },
+    transparent: { light: primitivePalette.opacity.white["0"], dark: primitivePalette.opacity.black["0"] },
+    hover: { light: primitivePalette.opacity.black[5], dark: primitivePalette.opacity.white[5] }
+  },
+  info: {
+    soft: { light: primitivePalette.teal[50], dark: primitivePalette.teal[950] },
+    light: { light: primitivePalette.teal[100], dark: primitivePalette.teal[900] },
+    main: { light: primitivePalette.teal[500], dark: primitivePalette.teal[500] },
+    dark: { light: primitivePalette.teal[600], dark: primitivePalette.teal[700] },
+    strong: { light: "", dark: "" }
+  },
+  success: {
+    soft: { light: primitivePalette.green[50], dark: primitivePalette.green[950] },
+    light: { light: primitivePalette.green[200], dark: primitivePalette.green[900] },
+    main: { light: primitivePalette.green[500], dark: primitivePalette.green[600] },
+    dark: { light: primitivePalette.green[600], dark: primitivePalette.green[700] },
+    strong: { light: "", dark: "" }
+  },
+  warning: {
+    soft: { light: primitivePalette.yellow[50], dark: primitivePalette.yellow[950] },
+    light: { light: primitivePalette.yellow[100], dark: primitivePalette.yellow[900] },
+    main: { light: primitivePalette.yellow[500], dark: primitivePalette.yellow[600] },
+    dark: { light: primitivePalette.yellow[600], dark: primitivePalette.yellow[700] },
+    strong: { light: "", dark: "" }
+  },
+  danger: {
+    soft: { light: primitivePalette.hotPink[50], dark: primitivePalette.hotPink[950] },
+    light: { light: primitivePalette.hotPink[200], dark: primitivePalette.hotPink[900] },
+    main: { light: primitivePalette.hotPink[500], dark: primitivePalette.hotPink[500] },
+    dark: { light: primitivePalette.hotPink[600], dark: primitivePalette.hotPink[700] },
+    strong: { light: "", dark: "" }
   }
 };
 
@@ -419,7 +627,7 @@ var boxShadow = {
   "drop-sm": "0 4px 12px 0 rgba(0, 0, 0, 0.1)",
   "drop-md": "0 6px 18px 0 rgba(0, 0, 0, 0.1)",
   "drop-lg": "0 8px 24px 0 rgba(0, 0, 0, 0.1)",
-  "drop-xl": "0 10px 30px 0 rgba(0, 0, 0, 0.1)"
+  "drop-xl": "0 0px 60px 0 rgba(0, 0, 0, 0.2)"
 };
 
 // ../tailwind-config/src/border/radius.ts
@@ -428,8 +636,11 @@ var borderRadius = {
   md: "6px",
   lg: "8px",
   xl: "10px",
+  "2xl": "20px",
   none: "0",
-  full: "9999px"
+  full: "9999px",
+  2: "2px",
+  5: "5px"
 };
 
 // ../tailwind-config/src/border/width.ts
@@ -440,12 +651,38 @@ var borderWidth = {
   xl: "1.75px"
 };
 
+// ../tailwind-config/src/border/ringWidth.ts
+var ringWidth = {
+  sm: "1px",
+  md: "1.25px",
+  lg: "1.5px",
+  xl: "1.75px",
+  2: "2px",
+  3: "3px",
+  4: "4px",
+  5: "5px"
+};
+
 // ../tailwind-config/src/space/gap.ts
 var gap = {
   sm: "4px",
   md: "6px",
   lg: "8px",
-  xl: "10px"
+  xl: "10px",
+  5: "5px",
+  10: "10px",
+  20: "20px",
+  30: "30px"
+};
+
+// ../tailwind-config/src/space/padding.ts
+var padding = {
+  xs: "4px",
+  sm: "6px",
+  md: "8px",
+  lg: "10px",
+  xl: "12px",
+  20: "20px"
 };
 
 // ../tailwind-config/src/utils/color.ts
@@ -532,18 +769,24 @@ var resolveConfig = (themes = {}, defaultTheme, prefix = "dn") => {
       if (!colorValue) continue;
       try {
         const ColorVariable = `--${prefix}-${colorName}`;
-        resolved.utilities[cssSelector][ColorVariable] = colorValue;
         if (colorValue.includes(",")) {
           const [hex, alpha] = colorValue.split(",").map((s) => s.trim());
           if ((hex == null ? void 0 : hex.startsWith("#")) && alpha !== void 0) {
-            resolved.colors[colorName] = () => {
-              return getTransColor(hex, parseFloat(alpha) || 1);
+            const parsedAlpha = parseFloat(alpha);
+            const finalAlpha = isNaN(parsedAlpha) ? 1 : parsedAlpha / 100;
+            const rgbaColor = getTransColor(hex, finalAlpha);
+            resolved.utilities[cssSelector] = {
+              ...resolved.utilities[cssSelector] || {},
+              [ColorVariable]: rgbaColor
             };
+            resolved.colors[colorName] = () => `var(${ColorVariable})`;
           }
         } else {
-          resolved.colors[colorName] = () => {
-            return `var(${ColorVariable})`;
+          resolved.utilities[cssSelector] = {
+            ...resolved.utilities[cssSelector] || {},
+            [ColorVariable]: colorValue
           };
+          resolved.colors[colorName] = () => `var(${ColorVariable})`;
         }
       } catch (error) {
         console.error("error", error == null ? void 0 : error.message);
@@ -584,13 +827,31 @@ var flattenThemeObject = (theme) => {
   return result;
 };
 var deepnoidUi = (colorChip = {}, defaultTheme = "light") => {
-  const lightPalette = structuredClone(semanticPalette.light);
-  const darkPalette = structuredClone(semanticPalette.dark);
-  const mergedLight = { ...lightPalette, ...colorChip.light };
-  const mergedDark = { ...darkPalette, ...colorChip.dark };
+  const lightPalette = {};
+  const darkPalette = {};
+  Object.entries(semanticPalette).forEach(([role, levels]) => {
+    const lightGroup = {};
+    const darkGroup = {};
+    Object.entries(levels).forEach(([level, value]) => {
+      if (value == null ? void 0 : value.light) lightGroup[level] = value.light;
+      if (value == null ? void 0 : value.dark) darkGroup[level] = value.dark;
+    });
+    lightPalette[role] = lightGroup;
+    darkPalette[role] = darkGroup;
+  });
+  Object.entries(colorChip).forEach(([role, levels]) => {
+    const lightGroup = lightPalette[role] || (lightPalette[role] = {});
+    const darkGroup = darkPalette[role] || (darkPalette[role] = {});
+    if (levels) {
+      Object.entries(levels).forEach(([level, value]) => {
+        if (value == null ? void 0 : value.light) lightGroup[level] = value.light;
+        if (value == null ? void 0 : value.dark) darkGroup[level] = value.dark;
+      });
+    }
+  });
   const themes = {
-    light: { extend: "light", colors: mergedLight },
-    dark: { extend: "dark", colors: mergedDark }
+    light: { extend: "light", colors: lightPalette },
+    dark: { extend: "dark", colors: darkPalette }
   };
   const resolved = resolveConfig(themes, defaultTheme);
   return (0, import_plugin.default)(
@@ -631,12 +892,14 @@ var deepnoidUi = (colorChip = {}, defaultTheme = "light") => {
             ]
           },
           // @ts-ignore
-          colors: { ...resolved == null ? void 0 : resolved.colors },
+          colors: { ...primitivePalette, ...resolved == null ? void 0 : resolved.colors },
           borderRadius,
           borderWidth,
           fontSize,
           boxShadow,
           gap,
+          padding,
+          ringWidth,
           keyframes,
           animation
         }
@@ -657,7 +920,8 @@ var tv = createTV({
       borderRadius: [{ rounded: [...typedKeys(borderRadius)] }],
       boxShadow: [{ shadow: [...typedKeys(boxShadow)] }],
       padding: [{ p: [...COMMON_SIZE] }],
-      gap: [{ gap: [...typedKeys(gap)] }]
+      gap: [{ gap: [...typedKeys(gap)] }],
+      borderWidth: [{ border: [...typedKeys(borderWidth)] }]
     }
   }
 });