npm - dash-ui-kit - Versions diffs - 2.0.0-dev → 2.1.0-dev - Mend

dash-ui-kit 2.0.0-dev → 2.1.0-dev

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/dist/react/components/heading/index.cjs.js CHANGED Viewed

@@ -4,6 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+var useColorScheme = require('../../hooks/useColorScheme.cjs.js');
 const sizeClasses = {
   xs: 'text-xs',
@@ -41,15 +42,19 @@ const Heading = ({
   as = 'h1',
   size = '2xl',
   weight = 'extrabold',
-  color = 'black',
+  color,
+  colorLight,
+  colorDark,
   className = '',
   children
 }) => {
+  var _a;
   const {
     theme
   } = ThemeContext.useTheme();
+  const effectiveColor = (_a = useColorScheme.useColorScheme(color, colorLight, colorDark)) !== null && _a !== void 0 ? _a : 'black';
   const Component = as;
-  const classes = [sizeClasses[size], weightClasses[weight], colorClasses[theme][color], 'tracking-[-0.4px]', className].filter(Boolean).join(' ');
+  const classes = [sizeClasses[size], weightClasses[weight], colorClasses[theme][effectiveColor], 'tracking-[-0.4px]', className].filter(Boolean).join(' ');
   return jsxRuntime.jsx(Component, {
     className: classes,
     children: children

package/dist/react/components/heading/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/heading/index.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '../../contexts/ThemeContext'\n\ninterface HeadingProps {\n as?: 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'\n size?: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'\n weight?: 'normal' \| 'medium' \| 'semibold' \| 'bold' \| 'extrabold'\n color?: ~~'black'~~ \| ~~'gray' \| 'blue' \| 'red' \| 'green'~~\n className?: string\n children: React.ReactNode\n}\n\nconst sizeClasses = {\n xs: 'text-xs',\n sm: 'text-sm', \n md: 'text-base',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-[2.375rem] leading-[1.3]',\n '3xl': 'text-[3rem] leading-[1.2]'\n}\n\nconst weightClasses = {\n normal: 'font-normal',\n medium: 'font-medium', \n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold'\n}\n\nconst colorClasses = {\n light: {\n black: 'text-black',\n gray: 'text-gray-600',\n blue: 'text-blue-600', \n red: 'text-red-600',\n green: 'text-green-600'\n },\n dark: {\n black: 'text-white',\n gray: 'text-gray-300',\n blue: 'text-blue-400', \n red: 'text-red-400',\n green: 'text-green-400'\n }\n}\n\nexport const Heading: React.FC<HeadingProps> = ({ \n as = 'h1',\n size = '2xl',\n weight = 'extrabold', \n color ~~= 'black'~~,\n className = '',\n children\n}) => {\n const { theme } = useTheme()\n const Component = as\n \n const classes = [\n sizeClasses[size],\n weightClasses[weight],\n colorClasses[theme][~~color~~],\n 'tracking-[-0.4px]',\n className\n ].filter(Boolean).join(' ')\n\n return (\n <Component className={classes}>\n {children}\n </Component>\n )\n}\n\nexport type { HeadingProps } "],"names":["sizeClasses","xs","sm","md","lg","xl","weightClasses","normal","medium","semibold","bold","extrabold","colorClasses","light","black","gray","blue","red","green","dark","Heading","as","size","weight","color","className","children","theme","useTheme","Component","classes","filter","Boolean","join","_jsx"],"mappings":"~~;;;;;;;AAYA~~,MAAMA,WAAW,GAAG;AAClBC,EAAAA,EAAE,EAAE,SAAS;AACbC,EAAAA,EAAE,EAAE,SAAS;AACbC,EAAAA,EAAE,EAAE,WAAW;AACfC,EAAAA,EAAE,EAAE,SAAS;AACbC,EAAAA,EAAE,EAAE,SAAS;AACb,EAAA,KAAK,EAAE,+BAA+B;AACtC,EAAA,KAAK,EAAE;CACR;AAED,MAAMC,aAAa,GAAG;AACpBC,EAAAA,MAAM,EAAE,aAAa;AACrBC,EAAAA,MAAM,EAAE,aAAa;AACrBC,EAAAA,QAAQ,EAAE,eAAe;AACzBC,EAAAA,IAAI,EAAE,WAAW;AACjBC,EAAAA,SAAS,EAAE;CACZ;AAED,MAAMC,YAAY,GAAG;AACnBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,YAAY;AACnBC,IAAAA,IAAI,EAAE,eAAe;AACrBC,IAAAA,IAAI,EAAE,eAAe;AACrBC,IAAAA,GAAG,EAAE,cAAc;AACnBC,IAAAA,KAAK,EAAE;GACR;AACDC,EAAAA,IAAI,EAAE;AACJL,IAAAA,KAAK,EAAE,YAAY;AACnBC,IAAAA,IAAI,EAAE,eAAe;AACrBC,IAAAA,IAAI,EAAE,eAAe;AACrBC,IAAAA,GAAG,EAAE,cAAc;AACnBC,IAAAA,KAAK,EAAE;AACR;CACF;AAEM,MAAME,OAAO,GAA2BA,CAAC;AAC9CC,EAAAA,EAAE,GAAG,IAAI;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,MAAM,GAAG,WAAW;~~AACpBC~~,~~EAAAA,~~KAAK,~~GAAG~~,~~OAAO~~;~~AACfC~~,EAAAA,SAAS,GAAG,EAAE;AACdC,EAAAA;AAAQ,CACT,KAAI;EACH,MAAM;AAAEC,IAAAA;GAAO,GAAGC,qBAAQ,EAAE;EAC5B,MAAMC,SAAS,~~GAAGR~~,EAAE;AAEpB,EAAA,~~MAAMS~~,OAAO,GAAG,~~CACd9B~~,WAAW,CAACsB,IAAI,CAAC,EACjBhB,aAAa,CAACiB,MAAM,CAAC,EACrBX,YAAY,~~CAACe~~,KAAK,CAAC,~~CAACH~~,~~KAAK~~,CAAC,~~EAC1B~~,mBAAmB,~~EACnBC~~,SAAS,CACV,~~CAACM~~,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;EAE3B,OACEC,cAAC,CAAAL,SAAS,EAAC;~~AAAAJ~~,IAAAA,SAAS,~~EAAEK~~,OAAO;~~AAC1BJ~~,IAAAA,QAAA,EAAAA;AACS,GAAA,CAAA;AAEhB;;;;"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/heading/index.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\ntype HeadingColor = 'black' \| 'gray' \| 'blue' \| 'red' \| 'green'\n\ninterface HeadingProps {\n as?: 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'\n size?: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'\n weight?: 'normal' \| 'medium' \| 'semibold' \| 'bold' \| 'extrabold'\n color?: HeadingColor\n colorLight?: HeadingColor\n colorDark?: HeadingColor\n className?: string\n children: React.ReactNode\n}\n\nconst sizeClasses = {\n xs: 'text-xs',\n sm: 'text-sm', \n md: 'text-base',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-[2.375rem] leading-[1.3]',\n '3xl': 'text-[3rem] leading-[1.2]'\n}\n\nconst weightClasses = {\n normal: 'font-normal',\n medium: 'font-medium', \n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold'\n}\n\nconst colorClasses = {\n light: {\n black: 'text-black',\n gray: 'text-gray-600',\n blue: 'text-blue-600', \n red: 'text-red-600',\n green: 'text-green-600'\n },\n dark: {\n black: 'text-white',\n gray: 'text-gray-300',\n blue: 'text-blue-400', \n red: 'text-red-400',\n green: 'text-green-400'\n }\n}\n\nexport const Heading: React.FC<HeadingProps> = ({ \n as = 'h1',\n size = '2xl',\n weight = 'extrabold', \n color,\n colorLight,\n colorDark,\n className = '',\n children\n}) => {\n const { theme } = useTheme()\n const effectiveColor = useColorScheme(color, colorLight, colorDark) ?? 'black'\n const Component = as\n \n const classes = [\n sizeClasses[size],\n weightClasses[weight],\n colorClasses[theme][effectiveColor],\n 'tracking-[-0.4px]',\n className\n ].filter(Boolean).join(' ')\n\n return (\n <Component className={classes}>\n {children}\n </Component>\n )\n}\n\nexport type { HeadingProps } "],"names":["sizeClasses","xs","sm","md","lg","xl","weightClasses","normal","medium","semibold","bold","extrabold","colorClasses","light","black","gray","blue","red","green","dark","Heading","as","size","weight","color","colorLight","colorDark","className","children","theme","useTheme","effectiveColor","_a","useColorScheme","Component","classes","filter","Boolean","join","_jsx"],"mappings":";;;;;;;;AAiBA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,EAAE,EAAE,SAAS;AACbC,EAAAA,EAAE,EAAE,SAAS;AACbC,EAAAA,EAAE,EAAE,WAAW;AACfC,EAAAA,EAAE,EAAE,SAAS;AACbC,EAAAA,EAAE,EAAE,SAAS;AACb,EAAA,KAAK,EAAE,+BAA+B;AACtC,EAAA,KAAK,EAAE;CACR;AAED,MAAMC,aAAa,GAAG;AACpBC,EAAAA,MAAM,EAAE,aAAa;AACrBC,EAAAA,MAAM,EAAE,aAAa;AACrBC,EAAAA,QAAQ,EAAE,eAAe;AACzBC,EAAAA,IAAI,EAAE,WAAW;AACjBC,EAAAA,SAAS,EAAE;CACZ;AAED,MAAMC,YAAY,GAAG;AACnBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,YAAY;AACnBC,IAAAA,IAAI,EAAE,eAAe;AACrBC,IAAAA,IAAI,EAAE,eAAe;AACrBC,IAAAA,GAAG,EAAE,cAAc;AACnBC,IAAAA,KAAK,EAAE;GACR;AACDC,EAAAA,IAAI,EAAE;AACJL,IAAAA,KAAK,EAAE,YAAY;AACnBC,IAAAA,IAAI,EAAE,eAAe;AACrBC,IAAAA,IAAI,EAAE,eAAe;AACrBC,IAAAA,GAAG,EAAE,cAAc;AACnBC,IAAAA,KAAK,EAAE;AACR;CACF;AAEM,MAAME,OAAO,GAA2BA,CAAC;AAC9CC,EAAAA,EAAE,GAAG,IAAI;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,MAAM,GAAG,WAAW;EACpBC,KAAK;EACLC,UAAU;EACVC,SAAS;AACTC,EAAAA,SAAS,GAAG,EAAE;AACdC,EAAAA;AAAQ,CACT,KAAI;;EACH,MAAM;AAAEC,IAAAA;GAAO,GAAGC,qBAAQ,EAAE;EAC5B,MAAMC,cAAc,GAAG,CAAAC,EAAA,GAAAC,6BAAc,CAACT,KAAK,EAAEC,UAAU,EAAEC,SAAS,CAAC,MAAA,IAAA,IAAAM,EAAA,KAAA,MAAA,GAAAA,EAAA,GAAI,OAAO;EAC9E,MAAME,SAAS,GAAGb,EAAE;AAEpB,EAAA,MAAMc,OAAO,GAAG,CACdnC,WAAW,CAACsB,IAAI,CAAC,EACjBhB,aAAa,CAACiB,MAAM,CAAC,EACrBX,YAAY,CAACiB,KAAK,CAAC,CAACE,cAAc,CAAC,EACnC,mBAAmB,EACnBJ,SAAS,CACV,CAACS,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;EAE3B,OACEC,cAAC,CAAAL,SAAS,EAAC;AAAAP,IAAAA,SAAS,EAAEQ,OAAO;AAC1BP,IAAAA,QAAA,EAAAA;AACS,GAAA,CAAA;AAEhB;;;;"}

package/dist/react/components/heading/index.d.ts CHANGED Viewed

@@ -1,9 +1,12 @@
 import React from 'react';
+type HeadingColor = 'black' | 'gray' | 'blue' | 'red' | 'green';
 interface HeadingProps {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
     weight?: 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';
-    color?: 'black' | 'gray' | 'blue' | 'red' | 'green';
+    color?: HeadingColor;
+    colorLight?: HeadingColor;
+    colorDark?: HeadingColor;
     className?: string;
     children: React.ReactNode;
 }

package/dist/react/components/heading/index.esm.js CHANGED Viewed

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useTheme } from '../../contexts/ThemeContext.esm.js';
+import { useColorScheme } from '../../hooks/useColorScheme.esm.js';
 const sizeClasses = {
   xs: 'text-xs',
@@ -39,15 +40,19 @@ const Heading = ({
   as = 'h1',
   size = '2xl',
   weight = 'extrabold',
-  color = 'black',
+  color,
+  colorLight,
+  colorDark,
   className = '',
   children
 }) => {
+  var _a;
   const {
     theme
   } = useTheme();
+  const effectiveColor = (_a = useColorScheme(color, colorLight, colorDark)) !== null && _a !== void 0 ? _a : 'black';
   const Component = as;
-  const classes = [sizeClasses[size], weightClasses[weight], colorClasses[theme][color], 'tracking-[-0.4px]', className].filter(Boolean).join(' ');
+  const classes = [sizeClasses[size], weightClasses[weight], colorClasses[theme][effectiveColor], 'tracking-[-0.4px]', className].filter(Boolean).join(' ');
   return jsx(Component, {
     className: classes,
     children: children

package/dist/react/components/heading/index.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/heading/index.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '../../contexts/ThemeContext'\n\ninterface HeadingProps {\n as?: 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'\n size?: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'\n weight?: 'normal' \| 'medium' \| 'semibold' \| 'bold' \| 'extrabold'\n color?: ~~'black'~~ \| ~~'gray' \| 'blue' \| 'red' \| 'green'~~\n className?: string\n children: React.ReactNode\n}\n\nconst sizeClasses = {\n xs: 'text-xs',\n sm: 'text-sm', \n md: 'text-base',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-[2.375rem] leading-[1.3]',\n '3xl': 'text-[3rem] leading-[1.2]'\n}\n\nconst weightClasses = {\n normal: 'font-normal',\n medium: 'font-medium', \n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold'\n}\n\nconst colorClasses = {\n light: {\n black: 'text-black',\n gray: 'text-gray-600',\n blue: 'text-blue-600', \n red: 'text-red-600',\n green: 'text-green-600'\n },\n dark: {\n black: 'text-white',\n gray: 'text-gray-300',\n blue: 'text-blue-400', \n red: 'text-red-400',\n green: 'text-green-400'\n }\n}\n\nexport const Heading: React.FC<HeadingProps> = ({ \n as = 'h1',\n size = '2xl',\n weight = 'extrabold', \n color ~~= 'black'~~,\n className = '',\n children\n}) => {\n const { theme } = useTheme()\n const Component = as\n \n const classes = [\n sizeClasses[size],\n weightClasses[weight],\n colorClasses[theme][~~color~~],\n 'tracking-[-0.4px]',\n className\n ].filter(Boolean).join(' ')\n\n return (\n <Component className={classes}>\n {children}\n </Component>\n )\n}\n\nexport type { HeadingProps } "],"names":["sizeClasses","xs","sm","md","lg","xl","weightClasses","normal","medium","semibold","bold","extrabold","colorClasses","light","black","gray","blue","red","green","dark","Heading","as","size","weight","color","className","children","theme","useTheme","Component","classes","filter","Boolean","join","_jsx"],"mappings":"~~;;;;;AAYA~~,MAAMA,WAAW,GAAG;AAClBC,EAAAA,EAAE,EAAE,SAAS;AACbC,EAAAA,EAAE,EAAE,SAAS;AACbC,EAAAA,EAAE,EAAE,WAAW;AACfC,EAAAA,EAAE,EAAE,SAAS;AACbC,EAAAA,EAAE,EAAE,SAAS;AACb,EAAA,KAAK,EAAE,+BAA+B;AACtC,EAAA,KAAK,EAAE;CACR;AAED,MAAMC,aAAa,GAAG;AACpBC,EAAAA,MAAM,EAAE,aAAa;AACrBC,EAAAA,MAAM,EAAE,aAAa;AACrBC,EAAAA,QAAQ,EAAE,eAAe;AACzBC,EAAAA,IAAI,EAAE,WAAW;AACjBC,EAAAA,SAAS,EAAE;CACZ;AAED,MAAMC,YAAY,GAAG;AACnBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,YAAY;AACnBC,IAAAA,IAAI,EAAE,eAAe;AACrBC,IAAAA,IAAI,EAAE,eAAe;AACrBC,IAAAA,GAAG,EAAE,cAAc;AACnBC,IAAAA,KAAK,EAAE;GACR;AACDC,EAAAA,IAAI,EAAE;AACJL,IAAAA,KAAK,EAAE,YAAY;AACnBC,IAAAA,IAAI,EAAE,eAAe;AACrBC,IAAAA,IAAI,EAAE,eAAe;AACrBC,IAAAA,GAAG,EAAE,cAAc;AACnBC,IAAAA,KAAK,EAAE;AACR;CACF;AAEM,MAAME,OAAO,GAA2BA,CAAC;AAC9CC,EAAAA,EAAE,GAAG,IAAI;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,MAAM,GAAG,WAAW;~~AACpBC~~,~~EAAAA,~~KAAK,~~GAAG~~,~~OAAO~~;~~AACfC~~,EAAAA,SAAS,GAAG,EAAE;AACdC,EAAAA;AAAQ,CACT,KAAI;EACH,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;EAC5B,MAAMC,SAAS,~~GAAGR~~,EAAE;AAEpB,EAAA,~~MAAMS~~,OAAO,GAAG,~~CACd9B~~,WAAW,CAACsB,IAAI,CAAC,EACjBhB,aAAa,CAACiB,MAAM,CAAC,EACrBX,YAAY,~~CAACe~~,KAAK,CAAC,~~CAACH~~,~~KAAK~~,CAAC,~~EAC1B~~,mBAAmB,~~EACnBC~~,SAAS,CACV,~~CAACM~~,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;EAE3B,OACEC,GAAC,CAAAL,SAAS,EAAC;~~AAAAJ~~,IAAAA,SAAS,~~EAAEK~~,OAAO;~~AAC1BJ~~,IAAAA,QAAA,EAAAA;AACS,GAAA,CAAA;AAEhB;;;;"}
1	+ {"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/heading/index.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\ntype HeadingColor = 'black' \| 'gray' \| 'blue' \| 'red' \| 'green'\n\ninterface HeadingProps {\n as?: 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'\n size?: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'\n weight?: 'normal' \| 'medium' \| 'semibold' \| 'bold' \| 'extrabold'\n color?: HeadingColor\n colorLight?: HeadingColor\n colorDark?: HeadingColor\n className?: string\n children: React.ReactNode\n}\n\nconst sizeClasses = {\n xs: 'text-xs',\n sm: 'text-sm', \n md: 'text-base',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-[2.375rem] leading-[1.3]',\n '3xl': 'text-[3rem] leading-[1.2]'\n}\n\nconst weightClasses = {\n normal: 'font-normal',\n medium: 'font-medium', \n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold'\n}\n\nconst colorClasses = {\n light: {\n black: 'text-black',\n gray: 'text-gray-600',\n blue: 'text-blue-600', \n red: 'text-red-600',\n green: 'text-green-600'\n },\n dark: {\n black: 'text-white',\n gray: 'text-gray-300',\n blue: 'text-blue-400', \n red: 'text-red-400',\n green: 'text-green-400'\n }\n}\n\nexport const Heading: React.FC<HeadingProps> = ({ \n as = 'h1',\n size = '2xl',\n weight = 'extrabold', \n color,\n colorLight,\n colorDark,\n className = '',\n children\n}) => {\n const { theme } = useTheme()\n const effectiveColor = useColorScheme(color, colorLight, colorDark) ?? 'black'\n const Component = as\n \n const classes = [\n sizeClasses[size],\n weightClasses[weight],\n colorClasses[theme][effectiveColor],\n 'tracking-[-0.4px]',\n className\n ].filter(Boolean).join(' ')\n\n return (\n <Component className={classes}>\n {children}\n </Component>\n )\n}\n\nexport type { HeadingProps } "],"names":["sizeClasses","xs","sm","md","lg","xl","weightClasses","normal","medium","semibold","bold","extrabold","colorClasses","light","black","gray","blue","red","green","dark","Heading","as","size","weight","color","colorLight","colorDark","className","children","theme","useTheme","effectiveColor","_a","useColorScheme","Component","classes","filter","Boolean","join","_jsx"],"mappings":";;;;;;AAiBA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,EAAE,EAAE,SAAS;AACbC,EAAAA,EAAE,EAAE,SAAS;AACbC,EAAAA,EAAE,EAAE,WAAW;AACfC,EAAAA,EAAE,EAAE,SAAS;AACbC,EAAAA,EAAE,EAAE,SAAS;AACb,EAAA,KAAK,EAAE,+BAA+B;AACtC,EAAA,KAAK,EAAE;CACR;AAED,MAAMC,aAAa,GAAG;AACpBC,EAAAA,MAAM,EAAE,aAAa;AACrBC,EAAAA,MAAM,EAAE,aAAa;AACrBC,EAAAA,QAAQ,EAAE,eAAe;AACzBC,EAAAA,IAAI,EAAE,WAAW;AACjBC,EAAAA,SAAS,EAAE;CACZ;AAED,MAAMC,YAAY,GAAG;AACnBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,YAAY;AACnBC,IAAAA,IAAI,EAAE,eAAe;AACrBC,IAAAA,IAAI,EAAE,eAAe;AACrBC,IAAAA,GAAG,EAAE,cAAc;AACnBC,IAAAA,KAAK,EAAE;GACR;AACDC,EAAAA,IAAI,EAAE;AACJL,IAAAA,KAAK,EAAE,YAAY;AACnBC,IAAAA,IAAI,EAAE,eAAe;AACrBC,IAAAA,IAAI,EAAE,eAAe;AACrBC,IAAAA,GAAG,EAAE,cAAc;AACnBC,IAAAA,KAAK,EAAE;AACR;CACF;AAEM,MAAME,OAAO,GAA2BA,CAAC;AAC9CC,EAAAA,EAAE,GAAG,IAAI;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,MAAM,GAAG,WAAW;EACpBC,KAAK;EACLC,UAAU;EACVC,SAAS;AACTC,EAAAA,SAAS,GAAG,EAAE;AACdC,EAAAA;AAAQ,CACT,KAAI;;EACH,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;EAC5B,MAAMC,cAAc,GAAG,CAAAC,EAAA,GAAAC,cAAc,CAACT,KAAK,EAAEC,UAAU,EAAEC,SAAS,CAAC,MAAA,IAAA,IAAAM,EAAA,KAAA,MAAA,GAAAA,EAAA,GAAI,OAAO;EAC9E,MAAME,SAAS,GAAGb,EAAE;AAEpB,EAAA,MAAMc,OAAO,GAAG,CACdnC,WAAW,CAACsB,IAAI,CAAC,EACjBhB,aAAa,CAACiB,MAAM,CAAC,EACrBX,YAAY,CAACiB,KAAK,CAAC,CAACE,cAAc,CAAC,EACnC,mBAAmB,EACnBJ,SAAS,CACV,CAACS,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;EAE3B,OACEC,GAAC,CAAAL,SAAS,EAAC;AAAAP,IAAAA,SAAS,EAAEQ,OAAO;AAC1BP,IAAAA,QAAA,EAAAA;AACS,GAAA,CAAA;AAEhB;;;;"}

package/dist/react/components/input/index.cjs.js CHANGED Viewed

@@ -10,6 +10,7 @@ var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
 var index = require('../icons/index.cjs.js');
+var useColorScheme = require('../../hooks/useColorScheme.cjs.js');
 const input = classVarianceAuthority.cva('w-full transition-all font-inter placeholder:text-opacity-60 text-[0.875rem] leading-[1.0625rem]', {
   variants: {
@@ -127,9 +128,12 @@ const input = classVarianceAuthority.cva('w-full transition-all font-inter place
  * />
  */
 const Input = _a => {
+  var _b;
   var {
       className = '',
       colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
       size,
       variant,
       error = false,
@@ -140,15 +144,16 @@ const Input = _a => {
       prefixClassName = '',
       showPasswordToggle = true
     } = _a,
-    props = tslib.__rest(_a, ["className", "colorScheme", "size", "variant", "error", "success", "disabled", "type", "prefix", "prefixClassName", "showPasswordToggle"]);
+    props = tslib.__rest(_a, ["className", "colorScheme", "colorSchemeLight", "colorSchemeDark", "size", "variant", "error", "success", "disabled", "type", "prefix", "prefixClassName", "showPasswordToggle"]);
   const {
     theme
   } = ThemeContext.useTheme();
   const [showPassword, setShowPassword] = React.useState(false);
   const [prefixWidth, setPrefixWidth] = React.useState(0);
   const prefixRef = React.useRef(null);
+  const effectiveColorScheme = (_b = useColorScheme.useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
   // Determine color scheme based on state
-  let finalColorScheme = colorScheme;
+  let finalColorScheme = effectiveColorScheme;
   if (error) finalColorScheme = 'error';else if (success) finalColorScheme = 'success';
   const classes = input({
     theme,

package/dist/react/components/input/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/input/index.tsx"],"sourcesContent":["import React, { InputHTMLAttributes, useState, useRef, useEffect } from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { EyeOpenIcon, EyeClosedIcon } from '../icons'\n\nconst input = cva(\n 'w-full transition-all font-inter placeholder:text-opacity-60 text-[0.875rem] leading-[1.0625rem]',\n {\n variants: {\n theme: {\n light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',\n dark: 'text-white placeholder:text-gray-400'\n },\n colorScheme: {\n default: 'focus:ring-blue-500/20',\n brand: 'focus:ring-dash-brand/20',\n error: 'focus:ring-red-500/20',\n success: 'focus:ring-green-500/20',\n 'light-gray': 'focus:ring-[#6B7280]/20'\n },\n size: {\n sm: 'dash-block-sm font-light',\n md: 'dash-block-md font-light',\n xl: 'dash-block-xl font-light'\n },\n variant: {\n outlined: 'outline outline-1 outline-offset-[-1px]',\n filled: 'border-none'\n },\n disabled: {\n false: '',\n true: 'opacity-60 cursor-not-allowed'\n }\n },\n compoundVariants: [\n // Outlined variant colors\n {\n variant: 'outlined',\n colorScheme: 'default',\n class: 'outline-[rgba(17,17,17,0.32)] focus:outline-[rgba(17,17,17,0.6)]'\n },\n {\n variant: 'outlined',\n colorScheme: 'brand',\n class: 'outline-dash-brand/30 focus:outline-dash-brand'\n },\n {\n variant: 'outlined',\n colorScheme: 'error',\n class: 'outline-red-500 focus:outline-red-500'\n },\n {\n variant: 'outlined',\n colorScheme: 'success',\n class: 'outline-green-500 focus:outline-green-500'\n },\n {\n variant: 'outlined',\n colorScheme: 'light-gray',\n class: 'outline-[#6B7280]/50 focus:outline-[#6B7280]'\n },\n // Outlined variant with focus ring\n {\n variant: 'outlined',\n class: 'focus:ring-2'\n },\n // Outlined variant background\n {\n variant: 'outlined',\n theme: 'light',\n class: 'bg-white'\n },\n {\n variant: 'outlined',\n theme: 'dark',\n class: 'bg-gray-800'\n },\n // Filled variant colors\n {\n variant: 'filled',\n colorScheme: 'default',\n class: 'bg-[rgba(76,126,255,0.15)] focus:bg-[rgba(76,126,255,0.2)]'\n },\n {\n variant: 'filled',\n colorScheme: 'brand',\n class: 'bg-dash-brand/15 focus:bg-dash-brand/20'\n },\n {\n variant: 'filled',\n colorScheme: 'error',\n class: 'bg-red-500/15 focus:bg-red-500/20'\n },\n {\n variant: 'filled',\n colorScheme: 'success',\n class: 'bg-green-500/15 focus:bg-green-500/20'\n },\n {\n variant: 'filled',\n colorScheme: 'light-gray',\n class: 'bg-[#0C1C33]/5 focus:bg-[#0C1C33]/10'\n },\n // Filled variant with focus ring\n {\n variant: 'filled',\n class: 'focus:ring-2'\n }\n ],\n defaultVariants: {\n theme: 'light',\n colorScheme: 'default',\n size: 'xl',\n variant: 'outlined',\n disabled: false\n }\n }\n)\n\ntype InputVariants = VariantProps<typeof input>\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' \| 'prefix'>, Omit<InputVariants, 'theme' \| 'disabled'> {\n className?: string\n error?: boolean\n success?: boolean\n prefix?: string \| React.ReactNode\n prefixClassName?: string\n /*\n Controls visibility toggle for password inputs. When false, the eye icon is hidden and no extra right padding is applied.\n * Defaults to true.\n /\n showPasswordToggle?: boolean\n}\n\n/\n A versatile input component that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, and states.\n * For password inputs, includes a toggleable eye icon.\n * Supports prefix text or elements before input content.\n \n @example\n * <Input\n * type='password'\n * placeholder='Enter password'\n * colorScheme='brand'\n * size='xl'\n * prefix=\"https://\"\n * />\n */\nexport const Input: React.FC<InputProps> = ({\n className = '',\n colorScheme,\n size,\n variant,\n error = false,\n success = false,\n disabled = false,\n type,\n prefix,\n prefixClassName = '',\n showPasswordToggle = true,\n ...props\n}) => {\n const { theme } = useTheme()\n const [showPassword, setShowPassword] = useState(false)\n const [prefixWidth, setPrefixWidth] = useState(0)\n const prefixRef = useRef<HTMLDivElement>(null)\n\n // Determine color scheme based on state\n let finalColorScheme = colorScheme\n if (error) finalColorScheme = 'error'\n else if (success) finalColorScheme = 'success'\n\n const classes = input({\n theme,\n colorScheme: finalColorScheme,\n size,\n variant,\n disabled\n }) + ' ' + className\n\n const isPassword = type === 'password'\n const inputType = isPassword && showPassword ? 'text' : type\n const hasPrefix = Boolean(prefix)\n\n const togglePasswordVisibility = (): void => {\n setShowPassword(!showPassword)\n }\n\n // Measure actual prefix width\n useEffect(() => {\n if (prefixRef.current) {\n const width = prefixRef.current.offsetWidth\n // Convert px to rem (assuming 16px base) and add base padding (1rem) + extra space (0.5rem)\n setPrefixWidth(width / 16 + 1.5)\n }\n }, [prefix])\n\n // Render with prefix\n if (hasPrefix) {\n return (\n <div className='relative'>\n <div \n ref={prefixRef}\n className={`absolute left-4 top-1/2 -translate-y-1/2 z-10 text-[0.875rem] opacity-60 pointer-events-none select-none ${prefixClassName}`}\n >\n {prefix}\n </div>\n <input\n className={`${classes}${isPassword && showPasswordToggle ? ' pr-12' : ''}`}\n style={{ paddingLeft: prefixWidth ? `${prefixWidth}rem` : '1rem' }}\n disabled={disabled}\n type={inputType}\n {...props}\n />\n {isPassword && showPasswordToggle && (\n <button\n type='button'\n className='absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none'\n onClick={togglePasswordVisibility}\n tabIndex={-1}\n >\n {showPassword\n ? <EyeClosedIcon size={16} color='#0C1C33' />\n : <EyeOpenIcon size={16} color='#0C1C33' />}\n </button>\n )}\n </div>\n )\n }\n\n // Render password input without prefix\n if (isPassword) {\n return (\n <div className='relative'>\n <input\n className={classes + (showPasswordToggle ? ' pr-12' : '')}\n disabled={disabled}\n type={inputType}\n {...props}\n />\n {showPasswordToggle && (\n <button\n type='button'\n className='absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none'\n onClick={togglePasswordVisibility}\n tabIndex={-1}\n >\n {showPassword\n ? <EyeClosedIcon size={16} color='#0C1C33' />\n : <EyeOpenIcon size={16} color='#0C1C33' />}\n </button>\n )}\n </div>\n )\n }\n\n // Regular input without prefix\n return (\n <input\n className={classes}\n disabled={disabled}\n type={inputType}\n {...props}\n />\n )\n}\n\nexport default Input "],"names":["input","cva","variants","theme","light","dark","colorScheme","default","brand","error","success","size","sm","md","xl","variant","outlined","filled","disabled","false","true","compoundVariants","class","defaultVariants","Input","_a","className","type","prefix","prefixClassName","showPasswordToggle","props","__rest","useTheme","showPassword","setShowPassword","useState","prefixWidth","setPrefixWidth","prefixRef","useRef","finalColorScheme","classes","isPassword","inputType","hasPrefix","Boolean","togglePasswordVisibility","useEffect","current","width","offsetWidth","_jsxs","children","_jsx","ref","Object","assign","style","paddingLeft","onClick","tabIndex","EyeClosedIcon","color","EyeOpenIcon"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/input/index.tsx"],"sourcesContent":["import React, { InputHTMLAttributes, useState, useRef, useEffect } from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { EyeOpenIcon, EyeClosedIcon } from '../icons'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\nconst input = cva(\n 'w-full transition-all font-inter placeholder:text-opacity-60 text-[0.875rem] leading-[1.0625rem]',\n {\n variants: {\n theme: {\n light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',\n dark: 'text-white placeholder:text-gray-400'\n },\n colorScheme: {\n default: 'focus:ring-blue-500/20',\n brand: 'focus:ring-dash-brand/20',\n error: 'focus:ring-red-500/20',\n success: 'focus:ring-green-500/20',\n 'light-gray': 'focus:ring-[#6B7280]/20'\n },\n size: {\n sm: 'dash-block-sm font-light',\n md: 'dash-block-md font-light',\n xl: 'dash-block-xl font-light'\n },\n variant: {\n outlined: 'outline outline-1 outline-offset-[-1px]',\n filled: 'border-none'\n },\n disabled: {\n false: '',\n true: 'opacity-60 cursor-not-allowed'\n }\n },\n compoundVariants: [\n // Outlined variant colors\n {\n variant: 'outlined',\n colorScheme: 'default',\n class: 'outline-[rgba(17,17,17,0.32)] focus:outline-[rgba(17,17,17,0.6)]'\n },\n {\n variant: 'outlined',\n colorScheme: 'brand',\n class: 'outline-dash-brand/30 focus:outline-dash-brand'\n },\n {\n variant: 'outlined',\n colorScheme: 'error',\n class: 'outline-red-500 focus:outline-red-500'\n },\n {\n variant: 'outlined',\n colorScheme: 'success',\n class: 'outline-green-500 focus:outline-green-500'\n },\n {\n variant: 'outlined',\n colorScheme: 'light-gray',\n class: 'outline-[#6B7280]/50 focus:outline-[#6B7280]'\n },\n // Outlined variant with focus ring\n {\n variant: 'outlined',\n class: 'focus:ring-2'\n },\n // Outlined variant background\n {\n variant: 'outlined',\n theme: 'light',\n class: 'bg-white'\n },\n {\n variant: 'outlined',\n theme: 'dark',\n class: 'bg-gray-800'\n },\n // Filled variant colors\n {\n variant: 'filled',\n colorScheme: 'default',\n class: 'bg-[rgba(76,126,255,0.15)] focus:bg-[rgba(76,126,255,0.2)]'\n },\n {\n variant: 'filled',\n colorScheme: 'brand',\n class: 'bg-dash-brand/15 focus:bg-dash-brand/20'\n },\n {\n variant: 'filled',\n colorScheme: 'error',\n class: 'bg-red-500/15 focus:bg-red-500/20'\n },\n {\n variant: 'filled',\n colorScheme: 'success',\n class: 'bg-green-500/15 focus:bg-green-500/20'\n },\n {\n variant: 'filled',\n colorScheme: 'light-gray',\n class: 'bg-[#0C1C33]/5 focus:bg-[#0C1C33]/10'\n },\n // Filled variant with focus ring\n {\n variant: 'filled',\n class: 'focus:ring-2'\n }\n ],\n defaultVariants: {\n theme: 'light',\n colorScheme: 'default',\n size: 'xl',\n variant: 'outlined',\n disabled: false\n }\n }\n)\n\ntype InputVariants = VariantProps<typeof input>\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' \| 'prefix'>, Omit<InputVariants, 'theme' \| 'disabled'> {\n className?: string\n error?: boolean\n success?: boolean\n prefix?: string \| React.ReactNode\n prefixClassName?: string\n /** Color scheme override for light theme /\n colorSchemeLight?: 'default' \| 'brand' \| 'error' \| 'success' \| 'light-gray'\n /* Color scheme override for dark theme /\n colorSchemeDark?: 'default' \| 'brand' \| 'error' \| 'success' \| 'light-gray'\n /\n Controls visibility toggle for password inputs. When false, the eye icon is hidden and no extra right padding is applied.\n * Defaults to true.\n /\n showPasswordToggle?: boolean\n}\n\n/\n A versatile input component that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, and states.\n * For password inputs, includes a toggleable eye icon.\n * Supports prefix text or elements before input content.\n \n @example\n * <Input\n * type='password'\n * placeholder='Enter password'\n * colorScheme='brand'\n * size='xl'\n * prefix=\"https://\"\n * />\n */\nexport const Input: React.FC<InputProps> = ({\n className = '',\n colorScheme,\n colorSchemeLight,\n colorSchemeDark,\n size,\n variant,\n error = false,\n success = false,\n disabled = false,\n type,\n prefix,\n prefixClassName = '',\n showPasswordToggle = true,\n ...props\n}) => {\n const { theme } = useTheme()\n const [showPassword, setShowPassword] = useState(false)\n const [prefixWidth, setPrefixWidth] = useState(0)\n const prefixRef = useRef<HTMLDivElement>(null)\n\n const effectiveColorScheme = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) ?? 'default'\n\n // Determine color scheme based on state\n let finalColorScheme: typeof effectiveColorScheme = effectiveColorScheme\n if (error) finalColorScheme = 'error'\n else if (success) finalColorScheme = 'success'\n\n const classes = input({\n theme,\n colorScheme: finalColorScheme,\n size,\n variant,\n disabled\n }) + ' ' + className\n\n const isPassword = type === 'password'\n const inputType = isPassword && showPassword ? 'text' : type\n const hasPrefix = Boolean(prefix)\n\n const togglePasswordVisibility = (): void => {\n setShowPassword(!showPassword)\n }\n\n // Measure actual prefix width\n useEffect(() => {\n if (prefixRef.current) {\n const width = prefixRef.current.offsetWidth\n // Convert px to rem (assuming 16px base) and add base padding (1rem) + extra space (0.5rem)\n setPrefixWidth(width / 16 + 1.5)\n }\n }, [prefix])\n\n // Render with prefix\n if (hasPrefix) {\n return (\n <div className='relative'>\n <div \n ref={prefixRef}\n className={`absolute left-4 top-1/2 -translate-y-1/2 z-10 text-[0.875rem] opacity-60 pointer-events-none select-none ${prefixClassName}`}\n >\n {prefix}\n </div>\n <input\n className={`${classes}${isPassword && showPasswordToggle ? ' pr-12' : ''}`}\n style={{ paddingLeft: prefixWidth ? `${prefixWidth}rem` : '1rem' }}\n disabled={disabled}\n type={inputType}\n {...props}\n />\n {isPassword && showPasswordToggle && (\n <button\n type='button'\n className='absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none'\n onClick={togglePasswordVisibility}\n tabIndex={-1}\n >\n {showPassword\n ? <EyeClosedIcon size={16} color='#0C1C33' />\n : <EyeOpenIcon size={16} color='#0C1C33' />}\n </button>\n )}\n </div>\n )\n }\n\n // Render password input without prefix\n if (isPassword) {\n return (\n <div className='relative'>\n <input\n className={classes + (showPasswordToggle ? ' pr-12' : '')}\n disabled={disabled}\n type={inputType}\n {...props}\n />\n {showPasswordToggle && (\n <button\n type='button'\n className='absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none'\n onClick={togglePasswordVisibility}\n tabIndex={-1}\n >\n {showPassword\n ? <EyeClosedIcon size={16} color='#0C1C33' />\n : <EyeOpenIcon size={16} color='#0C1C33' />}\n </button>\n )}\n </div>\n )\n }\n\n // Regular input without prefix\n return (\n <input\n className={classes}\n disabled={disabled}\n type={inputType}\n {...props}\n />\n )\n}\n\nexport default Input "],"names":["input","cva","variants","theme","light","dark","colorScheme","default","brand","error","success","size","sm","md","xl","variant","outlined","filled","disabled","false","true","compoundVariants","class","defaultVariants","Input","_a","className","colorSchemeLight","colorSchemeDark","type","prefix","prefixClassName","showPasswordToggle","props","__rest","useTheme","showPassword","setShowPassword","useState","prefixWidth","setPrefixWidth","prefixRef","useRef","effectiveColorScheme","_b","useColorScheme","finalColorScheme","classes","isPassword","inputType","hasPrefix","Boolean","togglePasswordVisibility","useEffect","current","width","offsetWidth","_jsxs","children","_jsx","ref","Object","assign","style","paddingLeft","onClick","tabIndex","EyeClosedIcon","color","EyeOpenIcon"],"mappings":"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"}

package/dist/react/components/input/index.d.ts CHANGED Viewed

@@ -14,6 +14,10 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     success?: boolean;
     prefix?: string | React.ReactNode;
     prefixClassName?: string;
+    /** Color scheme override for light theme */
+    colorSchemeLight?: 'default' | 'brand' | 'error' | 'success' | 'light-gray';
+    /** Color scheme override for dark theme */
+    colorSchemeDark?: 'default' | 'brand' | 'error' | 'success' | 'light-gray';
     /**
      * Controls visibility toggle for password inputs. When false, the eye icon is hidden and no extra right padding is applied.
      * Defaults to true.

package/dist/react/components/input/index.esm.js CHANGED Viewed

@@ -6,6 +6,7 @@ import { useState, useRef, useEffect } from 'react';
 import { cva } from 'class-variance-authority';
 import { useTheme } from '../../contexts/ThemeContext.esm.js';
 import { EyeClosedIcon, EyeOpenIcon } from '../icons/index.esm.js';
+import { useColorScheme } from '../../hooks/useColorScheme.esm.js';
 const input = cva('w-full transition-all font-inter placeholder:text-opacity-60 text-[0.875rem] leading-[1.0625rem]', {
   variants: {
@@ -123,9 +124,12 @@ const input = cva('w-full transition-all font-inter placeholder:text-opacity-60
  * />
  */
 const Input = _a => {
+  var _b;
   var {
       className = '',
       colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
       size,
       variant,
       error = false,
@@ -136,15 +140,16 @@ const Input = _a => {
       prefixClassName = '',
       showPasswordToggle = true
     } = _a,
-    props = __rest(_a, ["className", "colorScheme", "size", "variant", "error", "success", "disabled", "type", "prefix", "prefixClassName", "showPasswordToggle"]);
+    props = __rest(_a, ["className", "colorScheme", "colorSchemeLight", "colorSchemeDark", "size", "variant", "error", "success", "disabled", "type", "prefix", "prefixClassName", "showPasswordToggle"]);
   const {
     theme
   } = useTheme();
   const [showPassword, setShowPassword] = useState(false);
   const [prefixWidth, setPrefixWidth] = useState(0);
   const prefixRef = useRef(null);
+  const effectiveColorScheme = (_b = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
   // Determine color scheme based on state
-  let finalColorScheme = colorScheme;
+  let finalColorScheme = effectiveColorScheme;
   if (error) finalColorScheme = 'error';else if (success) finalColorScheme = 'success';
   const classes = input({
     theme,

package/dist/react/components/input/index.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/input/index.tsx"],"sourcesContent":["import React, { InputHTMLAttributes, useState, useRef, useEffect } from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { EyeOpenIcon, EyeClosedIcon } from '../icons'\n\nconst input = cva(\n 'w-full transition-all font-inter placeholder:text-opacity-60 text-[0.875rem] leading-[1.0625rem]',\n {\n variants: {\n theme: {\n light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',\n dark: 'text-white placeholder:text-gray-400'\n },\n colorScheme: {\n default: 'focus:ring-blue-500/20',\n brand: 'focus:ring-dash-brand/20',\n error: 'focus:ring-red-500/20',\n success: 'focus:ring-green-500/20',\n 'light-gray': 'focus:ring-[#6B7280]/20'\n },\n size: {\n sm: 'dash-block-sm font-light',\n md: 'dash-block-md font-light',\n xl: 'dash-block-xl font-light'\n },\n variant: {\n outlined: 'outline outline-1 outline-offset-[-1px]',\n filled: 'border-none'\n },\n disabled: {\n false: '',\n true: 'opacity-60 cursor-not-allowed'\n }\n },\n compoundVariants: [\n // Outlined variant colors\n {\n variant: 'outlined',\n colorScheme: 'default',\n class: 'outline-[rgba(17,17,17,0.32)] focus:outline-[rgba(17,17,17,0.6)]'\n },\n {\n variant: 'outlined',\n colorScheme: 'brand',\n class: 'outline-dash-brand/30 focus:outline-dash-brand'\n },\n {\n variant: 'outlined',\n colorScheme: 'error',\n class: 'outline-red-500 focus:outline-red-500'\n },\n {\n variant: 'outlined',\n colorScheme: 'success',\n class: 'outline-green-500 focus:outline-green-500'\n },\n {\n variant: 'outlined',\n colorScheme: 'light-gray',\n class: 'outline-[#6B7280]/50 focus:outline-[#6B7280]'\n },\n // Outlined variant with focus ring\n {\n variant: 'outlined',\n class: 'focus:ring-2'\n },\n // Outlined variant background\n {\n variant: 'outlined',\n theme: 'light',\n class: 'bg-white'\n },\n {\n variant: 'outlined',\n theme: 'dark',\n class: 'bg-gray-800'\n },\n // Filled variant colors\n {\n variant: 'filled',\n colorScheme: 'default',\n class: 'bg-[rgba(76,126,255,0.15)] focus:bg-[rgba(76,126,255,0.2)]'\n },\n {\n variant: 'filled',\n colorScheme: 'brand',\n class: 'bg-dash-brand/15 focus:bg-dash-brand/20'\n },\n {\n variant: 'filled',\n colorScheme: 'error',\n class: 'bg-red-500/15 focus:bg-red-500/20'\n },\n {\n variant: 'filled',\n colorScheme: 'success',\n class: 'bg-green-500/15 focus:bg-green-500/20'\n },\n {\n variant: 'filled',\n colorScheme: 'light-gray',\n class: 'bg-[#0C1C33]/5 focus:bg-[#0C1C33]/10'\n },\n // Filled variant with focus ring\n {\n variant: 'filled',\n class: 'focus:ring-2'\n }\n ],\n defaultVariants: {\n theme: 'light',\n colorScheme: 'default',\n size: 'xl',\n variant: 'outlined',\n disabled: false\n }\n }\n)\n\ntype InputVariants = VariantProps<typeof input>\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' \| 'prefix'>, Omit<InputVariants, 'theme' \| 'disabled'> {\n className?: string\n error?: boolean\n success?: boolean\n prefix?: string \| React.ReactNode\n prefixClassName?: string\n /*\n Controls visibility toggle for password inputs. When false, the eye icon is hidden and no extra right padding is applied.\n * Defaults to true.\n /\n showPasswordToggle?: boolean\n}\n\n/\n A versatile input component that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, and states.\n * For password inputs, includes a toggleable eye icon.\n * Supports prefix text or elements before input content.\n \n @example\n * <Input\n * type='password'\n * placeholder='Enter password'\n * colorScheme='brand'\n * size='xl'\n * prefix=\"https://\"\n * />\n */\nexport const Input: React.FC<InputProps> = ({\n className = '',\n colorScheme,\n size,\n variant,\n error = false,\n success = false,\n disabled = false,\n type,\n prefix,\n prefixClassName = '',\n showPasswordToggle = true,\n ...props\n}) => {\n const { theme } = useTheme()\n const [showPassword, setShowPassword] = useState(false)\n const [prefixWidth, setPrefixWidth] = useState(0)\n const prefixRef = useRef<HTMLDivElement>(null)\n\n // Determine color scheme based on state\n let finalColorScheme = colorScheme\n if (error) finalColorScheme = 'error'\n else if (success) finalColorScheme = 'success'\n\n const classes = input({\n theme,\n colorScheme: finalColorScheme,\n size,\n variant,\n disabled\n }) + ' ' + className\n\n const isPassword = type === 'password'\n const inputType = isPassword && showPassword ? 'text' : type\n const hasPrefix = Boolean(prefix)\n\n const togglePasswordVisibility = (): void => {\n setShowPassword(!showPassword)\n }\n\n // Measure actual prefix width\n useEffect(() => {\n if (prefixRef.current) {\n const width = prefixRef.current.offsetWidth\n // Convert px to rem (assuming 16px base) and add base padding (1rem) + extra space (0.5rem)\n setPrefixWidth(width / 16 + 1.5)\n }\n }, [prefix])\n\n // Render with prefix\n if (hasPrefix) {\n return (\n <div className='relative'>\n <div \n ref={prefixRef}\n className={`absolute left-4 top-1/2 -translate-y-1/2 z-10 text-[0.875rem] opacity-60 pointer-events-none select-none ${prefixClassName}`}\n >\n {prefix}\n </div>\n <input\n className={`${classes}${isPassword && showPasswordToggle ? ' pr-12' : ''}`}\n style={{ paddingLeft: prefixWidth ? `${prefixWidth}rem` : '1rem' }}\n disabled={disabled}\n type={inputType}\n {...props}\n />\n {isPassword && showPasswordToggle && (\n <button\n type='button'\n className='absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none'\n onClick={togglePasswordVisibility}\n tabIndex={-1}\n >\n {showPassword\n ? <EyeClosedIcon size={16} color='#0C1C33' />\n : <EyeOpenIcon size={16} color='#0C1C33' />}\n </button>\n )}\n </div>\n )\n }\n\n // Render password input without prefix\n if (isPassword) {\n return (\n <div className='relative'>\n <input\n className={classes + (showPasswordToggle ? ' pr-12' : '')}\n disabled={disabled}\n type={inputType}\n {...props}\n />\n {showPasswordToggle && (\n <button\n type='button'\n className='absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none'\n onClick={togglePasswordVisibility}\n tabIndex={-1}\n >\n {showPassword\n ? <EyeClosedIcon size={16} color='#0C1C33' />\n : <EyeOpenIcon size={16} color='#0C1C33' />}\n </button>\n )}\n </div>\n )\n }\n\n // Regular input without prefix\n return (\n <input\n className={classes}\n disabled={disabled}\n type={inputType}\n {...props}\n />\n )\n}\n\nexport default Input "],"names":["input","cva","variants","theme","light","dark","colorScheme","default","brand","error","success","size","sm","md","xl","variant","outlined","filled","disabled","false","true","compoundVariants","class","defaultVariants","Input","_a","className","type","prefix","prefixClassName","showPasswordToggle","props","__rest","useTheme","showPassword","setShowPassword","useState","prefixWidth","setPrefixWidth","prefixRef","useRef","finalColorScheme","classes","isPassword","inputType","hasPrefix","Boolean","togglePasswordVisibility","useEffect","current","width","offsetWidth","_jsxs","children","_jsx","ref","Object","assign","style","paddingLeft","onClick","tabIndex","EyeClosedIcon","color","EyeOpenIcon"],"mappings":"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"}
1	+ {"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/input/index.tsx"],"sourcesContent":["import React, { InputHTMLAttributes, useState, useRef, useEffect } from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { EyeOpenIcon, EyeClosedIcon } from '../icons'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\nconst input = cva(\n 'w-full transition-all font-inter placeholder:text-opacity-60 text-[0.875rem] leading-[1.0625rem]',\n {\n variants: {\n theme: {\n light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',\n dark: 'text-white placeholder:text-gray-400'\n },\n colorScheme: {\n default: 'focus:ring-blue-500/20',\n brand: 'focus:ring-dash-brand/20',\n error: 'focus:ring-red-500/20',\n success: 'focus:ring-green-500/20',\n 'light-gray': 'focus:ring-[#6B7280]/20'\n },\n size: {\n sm: 'dash-block-sm font-light',\n md: 'dash-block-md font-light',\n xl: 'dash-block-xl font-light'\n },\n variant: {\n outlined: 'outline outline-1 outline-offset-[-1px]',\n filled: 'border-none'\n },\n disabled: {\n false: '',\n true: 'opacity-60 cursor-not-allowed'\n }\n },\n compoundVariants: [\n // Outlined variant colors\n {\n variant: 'outlined',\n colorScheme: 'default',\n class: 'outline-[rgba(17,17,17,0.32)] focus:outline-[rgba(17,17,17,0.6)]'\n },\n {\n variant: 'outlined',\n colorScheme: 'brand',\n class: 'outline-dash-brand/30 focus:outline-dash-brand'\n },\n {\n variant: 'outlined',\n colorScheme: 'error',\n class: 'outline-red-500 focus:outline-red-500'\n },\n {\n variant: 'outlined',\n colorScheme: 'success',\n class: 'outline-green-500 focus:outline-green-500'\n },\n {\n variant: 'outlined',\n colorScheme: 'light-gray',\n class: 'outline-[#6B7280]/50 focus:outline-[#6B7280]'\n },\n // Outlined variant with focus ring\n {\n variant: 'outlined',\n class: 'focus:ring-2'\n },\n // Outlined variant background\n {\n variant: 'outlined',\n theme: 'light',\n class: 'bg-white'\n },\n {\n variant: 'outlined',\n theme: 'dark',\n class: 'bg-gray-800'\n },\n // Filled variant colors\n {\n variant: 'filled',\n colorScheme: 'default',\n class: 'bg-[rgba(76,126,255,0.15)] focus:bg-[rgba(76,126,255,0.2)]'\n },\n {\n variant: 'filled',\n colorScheme: 'brand',\n class: 'bg-dash-brand/15 focus:bg-dash-brand/20'\n },\n {\n variant: 'filled',\n colorScheme: 'error',\n class: 'bg-red-500/15 focus:bg-red-500/20'\n },\n {\n variant: 'filled',\n colorScheme: 'success',\n class: 'bg-green-500/15 focus:bg-green-500/20'\n },\n {\n variant: 'filled',\n colorScheme: 'light-gray',\n class: 'bg-[#0C1C33]/5 focus:bg-[#0C1C33]/10'\n },\n // Filled variant with focus ring\n {\n variant: 'filled',\n class: 'focus:ring-2'\n }\n ],\n defaultVariants: {\n theme: 'light',\n colorScheme: 'default',\n size: 'xl',\n variant: 'outlined',\n disabled: false\n }\n }\n)\n\ntype InputVariants = VariantProps<typeof input>\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' \| 'prefix'>, Omit<InputVariants, 'theme' \| 'disabled'> {\n className?: string\n error?: boolean\n success?: boolean\n prefix?: string \| React.ReactNode\n prefixClassName?: string\n /** Color scheme override for light theme /\n colorSchemeLight?: 'default' \| 'brand' \| 'error' \| 'success' \| 'light-gray'\n /* Color scheme override for dark theme /\n colorSchemeDark?: 'default' \| 'brand' \| 'error' \| 'success' \| 'light-gray'\n /\n Controls visibility toggle for password inputs. When false, the eye icon is hidden and no extra right padding is applied.\n * Defaults to true.\n /\n showPasswordToggle?: boolean\n}\n\n/\n A versatile input component that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, and states.\n * For password inputs, includes a toggleable eye icon.\n * Supports prefix text or elements before input content.\n \n @example\n * <Input\n * type='password'\n * placeholder='Enter password'\n * colorScheme='brand'\n * size='xl'\n * prefix=\"https://\"\n * />\n */\nexport const Input: React.FC<InputProps> = ({\n className = '',\n colorScheme,\n colorSchemeLight,\n colorSchemeDark,\n size,\n variant,\n error = false,\n success = false,\n disabled = false,\n type,\n prefix,\n prefixClassName = '',\n showPasswordToggle = true,\n ...props\n}) => {\n const { theme } = useTheme()\n const [showPassword, setShowPassword] = useState(false)\n const [prefixWidth, setPrefixWidth] = useState(0)\n const prefixRef = useRef<HTMLDivElement>(null)\n\n const effectiveColorScheme = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) ?? 'default'\n\n // Determine color scheme based on state\n let finalColorScheme: typeof effectiveColorScheme = effectiveColorScheme\n if (error) finalColorScheme = 'error'\n else if (success) finalColorScheme = 'success'\n\n const classes = input({\n theme,\n colorScheme: finalColorScheme,\n size,\n variant,\n disabled\n }) + ' ' + className\n\n const isPassword = type === 'password'\n const inputType = isPassword && showPassword ? 'text' : type\n const hasPrefix = Boolean(prefix)\n\n const togglePasswordVisibility = (): void => {\n setShowPassword(!showPassword)\n }\n\n // Measure actual prefix width\n useEffect(() => {\n if (prefixRef.current) {\n const width = prefixRef.current.offsetWidth\n // Convert px to rem (assuming 16px base) and add base padding (1rem) + extra space (0.5rem)\n setPrefixWidth(width / 16 + 1.5)\n }\n }, [prefix])\n\n // Render with prefix\n if (hasPrefix) {\n return (\n <div className='relative'>\n <div \n ref={prefixRef}\n className={`absolute left-4 top-1/2 -translate-y-1/2 z-10 text-[0.875rem] opacity-60 pointer-events-none select-none ${prefixClassName}`}\n >\n {prefix}\n </div>\n <input\n className={`${classes}${isPassword && showPasswordToggle ? ' pr-12' : ''}`}\n style={{ paddingLeft: prefixWidth ? `${prefixWidth}rem` : '1rem' }}\n disabled={disabled}\n type={inputType}\n {...props}\n />\n {isPassword && showPasswordToggle && (\n <button\n type='button'\n className='absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none'\n onClick={togglePasswordVisibility}\n tabIndex={-1}\n >\n {showPassword\n ? <EyeClosedIcon size={16} color='#0C1C33' />\n : <EyeOpenIcon size={16} color='#0C1C33' />}\n </button>\n )}\n </div>\n )\n }\n\n // Render password input without prefix\n if (isPassword) {\n return (\n <div className='relative'>\n <input\n className={classes + (showPasswordToggle ? ' pr-12' : '')}\n disabled={disabled}\n type={inputType}\n {...props}\n />\n {showPasswordToggle && (\n <button\n type='button'\n className='absolute right-4 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-70 transition-opacity cursor-pointer focus:outline-none'\n onClick={togglePasswordVisibility}\n tabIndex={-1}\n >\n {showPassword\n ? <EyeClosedIcon size={16} color='#0C1C33' />\n : <EyeOpenIcon size={16} color='#0C1C33' />}\n </button>\n )}\n </div>\n )\n }\n\n // Regular input without prefix\n return (\n <input\n className={classes}\n disabled={disabled}\n type={inputType}\n {...props}\n />\n )\n}\n\nexport default Input "],"names":["input","cva","variants","theme","light","dark","colorScheme","default","brand","error","success","size","sm","md","xl","variant","outlined","filled","disabled","false","true","compoundVariants","class","defaultVariants","Input","_a","className","colorSchemeLight","colorSchemeDark","type","prefix","prefixClassName","showPasswordToggle","props","__rest","useTheme","showPassword","setShowPassword","useState","prefixWidth","setPrefixWidth","prefixRef","useRef","effectiveColorScheme","_b","useColorScheme","finalColorScheme","classes","isPassword","inputType","hasPrefix","Boolean","togglePasswordVisibility","useEffect","current","width","offsetWidth","_jsxs","children","_jsx","ref","Object","assign","style","paddingLeft","onClick","tabIndex","EyeClosedIcon","color","EyeOpenIcon"],"mappings":"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"}

package/dist/react/components/overlayMenu/index.cjs.js CHANGED Viewed

@@ -10,6 +10,7 @@ var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
 var index = require('../icons/index.cjs.js');
+var useColorScheme = require('../../hooks/useColorScheme.cjs.js');
 const overlayMenuTrigger = classVarianceAuthority.cva('w-full transition-all font-inter appearance-none cursor-pointer relative text-[0.875rem] leading-[1.0625rem] inline-flex items-center justify-between', {
   variants: {
@@ -269,11 +270,48 @@ const ChevronDownIcon = ({
  * @param position - Position object for context-menu variant
  * @param width - Custom width (default: 200px for context-menu)
  */
+const closeButtonAlignClasses = {
+  left: 'justify-start',
+  center: 'justify-center',
+  right: 'justify-end'
+};
+const OverlayMenuHeader = ({
+  headerClasses,
+  hasContent,
+  showCloseButton,
+  closeButtonAlign,
+  isContextMenu,
+  theme,
+  onClose,
+  children
+}) => {
+  const isCloseOnly = showCloseButton && !hasContent;
+  return jsxRuntime.jsxs("div", {
+    className: `${headerClasses} ${isCloseOnly ? closeButtonAlignClasses[closeButtonAlign] : ''} ${!showCloseButton && !isContextMenu ? 'cursor-pointer' : ''}`,
+    onClick: !showCloseButton && !isContextMenu ? onClose : undefined,
+    children: [hasContent && jsxRuntime.jsx("div", {
+      className: 'w-full flex-1',
+      children: children
+    }), showCloseButton && jsxRuntime.jsx("button", {
+      className: 'flex items-center cursor-pointer hover:opacity-70 transition-opacity',
+      onClick: onClose,
+      "aria-label": 'Close menu',
+      children: jsxRuntime.jsx(index.CrossIcon, {
+        size: 16,
+        color: theme === 'dark' ? '#FFFFFF' : '#0C1C33'
+      })
+    })]
+  });
+};
 const OverlayMenu = _a => {
+  var _b;
   var {
       className = '',
+      triggerClassName = '',
       contentClassName = '',
       colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
       size,
       error = false,
       success = false,
@@ -289,20 +327,24 @@ const OverlayMenu = _a => {
       placeholder = 'Menu',
       showItemBorders = true,
       variant = 'dropdown',
+      align = 'left',
+      wrapperClassName = '',
       headerContent,
       showCloseButton = false,
+      closeButtonAlign = 'right',
       position,
       width,
       onClose
     } = _a,
-    props = tslib.__rest(_a, ["className", "contentClassName", "colorScheme", "size", "error", "success", "border", "filled", "disabled", "items", "showArrow", "name", "overlayLabel", "maxHeight", "triggerContent", "placeholder", "showItemBorders", "variant", "headerContent", "showCloseButton", "position", "width", "onClose"]);
+    props = tslib.__rest(_a, ["className", "triggerClassName", "contentClassName", "colorScheme", "colorSchemeLight", "colorSchemeDark", "size", "error", "success", "border", "filled", "disabled", "items", "showArrow", "name", "overlayLabel", "maxHeight", "triggerContent", "placeholder", "showItemBorders", "variant", "align", "wrapperClassName", "headerContent", "showCloseButton", "closeButtonAlign", "position", "width", "onClose"]);
   const {
     theme
   } = ThemeContext.useTheme();
   const [isOpen, setIsOpen] = React.useState(false);
   const triggerRef = React.useRef(null);
+  const effectiveColorScheme = (_b = useColorScheme.useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
   // Determine color scheme based on state
-  let finalColorScheme = colorScheme;
+  let finalColorScheme = effectiveColorScheme;
   if (error) finalColorScheme = 'error';else if (success) finalColorScheme = 'success';
   const isContextMenu = variant === 'context-menu';
   // Handle Escape key
@@ -320,6 +362,11 @@ const OverlayMenu = _a => {
     setIsOpen(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
   };
+  const alignClasses = {
+    left: 'left-0',
+    center: 'left-1/2 -translate-x-1/2',
+    right: 'right-0'
+  };
   const triggerClasses = overlayMenuTrigger({
     theme,
     colorScheme: finalColorScheme,
@@ -366,11 +413,11 @@ const OverlayMenu = _a => {
     return styles;
   };
   return jsxRuntime.jsxs("div", {
-    className: isContextMenu ? '' : 'relative',
+    className: isContextMenu ? wrapperClassName : `relative ${wrapperClassName}`,
     children: [!isContextMenu && jsxRuntime.jsxs("button", Object.assign({
       ref: triggerRef,
       type: 'button',
-      className: triggerClasses,
+      className: `${triggerClasses} ${triggerClassName}`,
       onClick: () => !disabled && setIsOpen(!isOpen),
       disabled: disabled,
       name: name
@@ -389,31 +436,28 @@ const OverlayMenu = _a => {
         className: `${isContextMenu ? 'fixed' : 'fixed'} inset-0 z-40`,
         onClick: handleClose
       }), jsxRuntime.jsxs("div", {
-        className: `${contentClasses} ${isContextMenu ? 'fixed' : ''} ${!isContextMenu ? 'top-0 left-0 right-0' : ''} overflow-y-auto ${contentClassName}`,
+        className: `${contentClasses} ${isContextMenu ? 'fixed' : ''} ${!isContextMenu ? `top-0 ${alignClasses[align]}` : ''} overflow-y-auto ${contentClassName}`,
         style: Object.assign({
           maxHeight
         }, getPositionStyles()),
-        children: [(headerContent || overlayLabel) && jsxRuntime.jsxs("div", {
-          className: `${headerClasses} ${!showCloseButton && !isContextMenu ? 'cursor-pointer' : ''}`,
-          onClick: !showCloseButton && !isContextMenu ? handleClose : undefined,
-          children: [jsxRuntime.jsx("div", {
-            className: 'w-full flex-1',
-            children: headerContent || overlayLabel
-          }), (showCloseButton || isContextMenu && headerContent) && jsxRuntime.jsx("button", {
-            className: 'flex items-center cursor-pointer hover:opacity-70 transition-opacity',
-            onClick: handleClose,
-            "aria-label": 'Close menu',
-            children: jsxRuntime.jsx(index.CrossIcon, {
-              size: 16,
-              color: theme === 'dark' ? '#FFFFFF' : '#0C1C33'
-            })
-          })]
+        children: [(headerContent || overlayLabel || showCloseButton) && jsxRuntime.jsx(OverlayMenuHeader, {
+          headerClasses: headerClasses,
+          hasContent: !!(headerContent || overlayLabel),
+          showCloseButton: showCloseButton || isContextMenu && !!headerContent,
+          closeButtonAlign: closeButtonAlign,
+          isContextMenu: isContextMenu,
+          theme: theme,
+          onClose: handleClose,
+          children: headerContent || overlayLabel
         }), jsxRuntime.jsx("div", {
-          children: items.map((item, index) => jsxRuntime.jsx("div", {
-            className: `${itemClasses} ${item.disabled ? 'opacity-50 cursor-not-allowed' : ''} ${showItemBorders && index < items.length - 1 ? `border-b ${theme === 'dark' ? 'border-[rgba(255,255,255,0.15)]' : 'border-[rgba(12,28,51,0.05)]'}` : ''}`,
-            onClick: () => handleItemClick(item),
-            children: item.content
-          }, item.id))
+          children: items.map((item, index) => {
+            var _a;
+            return jsxRuntime.jsx("div", {
+              className: `${itemClasses} ${item.disabled ? 'opacity-50 !cursor-not-allowed' : ''} ${showItemBorders && index < items.length - 1 ? `border-b ${theme === 'dark' ? 'border-[rgba(255,255,255,0.15)]' : 'border-[rgba(12,28,51,0.05)]'}` : ''} ${(_a = item.className) !== null && _a !== void 0 ? _a : ''}`,
+              onClick: () => handleItemClick(item),
+              children: item.content
+            }, item.id);
+          })
         })]
       })]
     })]