dash-ui-kit 2.0.0-dev → 2.1.1

package/dist/react/components/copyButton/index.cjs.js

@@ -8,7 +8,7 @@ var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
-var Popover = require('@radix-ui/react-popover');
+var PopoverPrimitive = require('@radix-ui/react-popover');
 var index = require('../icons/index.cjs.js');
 var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
 var copyToClipboard = require('../../utils/copyToClipboard.cjs.js');
@@ -30,7 +30,7 @@ function _interopNamespaceDefault(e) {
     return Object.freeze(n);
 }
 
-var Popover__namespace = /*#__PURE__*/_interopNamespaceDefault(Popover);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
 
 const copyBtn = classVarianceAuthority.cva('p-0 flex-shrink-0 h-[max-content] min-w-0 bg-transparent transition-colors', {
   variants: {
@@ -61,9 +61,9 @@ const CopyButton = _a => {
     setOpen(true);
     setTimeout(() => setOpen(false), 1000);
   };
-  return jsxRuntime.jsxs(Popover__namespace.Root, {
+  return jsxRuntime.jsxs(PopoverPrimitive__namespace.Root, {
     open: open,
-    children: [jsxRuntime.jsx(Popover__namespace.Trigger, {
+    children: [jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, {
       asChild: true,
       children: jsxRuntime.jsx("button", Object.assign({
         type: 'button',
@@ -77,12 +77,12 @@ const CopyButton = _a => {
           color: theme === 'light' ? '#000000' : '#ffffff'
         })
       }))
-    }), jsxRuntime.jsx(Popover__namespace.Portal, {
-      children: jsxRuntime.jsxs(Popover__namespace.Content, {
+    }), jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, {
+      children: jsxRuntime.jsxs(PopoverPrimitive__namespace.Content, {
         className: 'bg-white text-gray-900 text-sm px-2 py-1 rounded shadow-lg',
         side: 'top',
         sideOffset: 5,
-        children: ["Copied", jsxRuntime.jsx(Popover__namespace.Arrow, {
+        children: ["Copied", jsxRuntime.jsx(PopoverPrimitive__namespace.Arrow, {
           className: 'fill-white'
         })]
       })

package/dist/react/components/copyButton/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/copyButton/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { cva } from 'class-variance-authority'\nimport * as Popover from '@radix-ui/react-popover'\nimport { CopyIcon } from '../icons'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport copyToClipboard, { CopyResult } from '../../utils/copyToClipboard'\n\nconst copyBtn = cva(\n  'p-0 flex-shrink-0 h-[max-content] min-w-0 bg-transparent transition-colors',\n  {\n    variants: {\n      theme: {\n        light: 'hover:text-gray-600 active:text-gray-800',\n        dark: 'hover:text-gray-300 active:text-gray-100'\n      }\n    },\n    defaultVariants: {\n      theme: 'light'\n    }\n  }\n)\n\nexport interface CopyButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onCopy'> {\n  /** Text to copy into clipboard */\n  text: string\n  /** Optional callback that will be called with the copy result */\n  onCopy?: (result: CopyResult) => void\n}\n\nexport const CopyButton: React.FC<CopyButtonProps> = ({ text, className, onCopy, ...props }) => {\n  const { theme } = useTheme()\n  const [open, setOpen] = useState(false)\n\n  const handleCopy = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation()\n    e.preventDefault()\n    copyToClipboard(text, onCopy)\n    setOpen(true)\n    setTimeout(() => setOpen(false), 1000)\n  }\n\n  return (\n    <Popover.Root open={open}>\n      <Popover.Trigger asChild>\n        <button\n          type='button'\n          className={`${copyBtn({ theme })} ${className ?? ''} hover:cursor-pointer`}\n          onClick={handleCopy}\n          {...props}\n        >\n          <CopyIcon\n            className='w-4 h-4 transition'\n            color={theme === 'light' ? '#000000' : '#ffffff'}\n          />\n        </button>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          className='bg-white text-gray-900 text-sm px-2 py-1 rounded shadow-lg'\n          side='top'\n          sideOffset={5}\n        >\n          Copied\n          <Popover.Arrow className='fill-white' />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nexport default CopyButton\n"],"names":["copyBtn","cva","variants","theme","light","dark","defaultVariants","CopyButton","_a","text","className","onCopy","props","__rest","useTheme","open","setOpen","useState","handleCopy","e","stopPropagation","preventDefault","copyToClipboard","setTimeout","_jsxs","Popover","Root","children","_jsx","Trigger","asChild","Object","assign","type","onClick","CopyIcon","color","Portal","Content","side","sideOffset","Arrow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAMA,OAAO,GAAGC,0BAAG,CACjB,4EAA4E,EAC5E;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,0CAA0C;AACjDC,MAAAA,IAAI,EAAE;AACP;GACF;AACDC,EAAAA,eAAe,EAAE;AACfH,IAAAA,KAAK,EAAE;AACR;AACF,CAAA,CACF;AASYI,MAAAA,UAAU,GAA+BC,EAAqC,IAAI;MAAzC;MAAEC,IAAI;MAAEC,SAAS;AAAEC,MAAAA;UAAkB;AAAPC,IAAAA,KAAK,GAAnCC,YAAA,CAAAL,EAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,QAAA,CAAqC,CAAF;EACvF,MAAM;AAAEL,IAAAA;GAAO,GAAGW,qBAAQ,EAAE;EAC5B,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,UAAU,GAAIC,CAAsC,IAAI;IAC5DA,CAAC,CAACC,eAAe,EAAE;IACnBD,CAAC,CAACE,cAAc,EAAE;AAClBC,IAAAA,+BAAe,CAACb,IAAI,EAAEE,MAAM,CAAC;IAC7BK,OAAO,CAAC,IAAI,CAAC;IACbO,UAAU,CAAC,MAAMP,OAAO,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;GACvC;AAED,EAAA,OACEQ,gBAACC,kBAAO,CAACC,IAAI,EAAC;AAAAX,IAAAA,IAAI,EAAEA,IAAI;AACtBY,IAAAA,QAAA,EAAA,CAAAC,cAAA,CAACH,kBAAO,CAACI,OAAO,EAAC;AAAAC,MAAAA,OAAO,EACtB,IAAA;MAAAH,QAAA,EAAAC,cAAA,CAAA,QAAA,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACEC,QAAAA,IAAI,EAAC,QAAQ;QACbvB,SAAS,EAAE,CAAGV,EAAAA,OAAO,CAAC;AAAEG,UAAAA;AAAK,SAAE,CAAC,CAAA,CAAA,EAAIO,SAAS,KAAT,IAAA,IAAAA,SAAS,KAAT,MAAA,GAAAA,SAAS,GAAI,EAAE,CAAuB,qBAAA,CAAA;AAC1EwB,QAAAA,OAAO,EAAEhB;OACL,EAAAN,KAAK;kBAETgB,cAAC,CAAAO,cAAQ,EACP;AAAAzB,UAAAA,SAAS,EAAC,oBAAoB;AAC9B0B,UAAAA,KAAK,EAAEjC,KAAK,KAAK,OAAO,GAAG,SAAS,GAAG;SACvC;AAAA,OAAA,CAAA;AAEY,KAAA,CAAA,EAClByB,cAAC,CAAAH,kBAAO,CAACY,MAAM,EAAA;AAAAV,MAAAA,QAAA,EACbH,eAAC,CAAAC,kBAAO,CAACa,OAAO;AACd5B,QAAAA,SAAS,EAAC,4DAA4D;AACtE6B,QAAAA,IAAI,EAAC,KAAK;AACVC,QAAAA,UAAU,EAAE,CAAC;QAGbb,QAAA,EAAA,CAAA,QAAA,EAAAC,cAAA,CAACH,kBAAO,CAACgB,KAAK,EAAC;AAAA/B,UAAAA,SAAS,EAAC;UAAe;OACxB;AAAA,KAAA,CACH;AACJ,GAAA,CAAA;AAEnB;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/copyButton/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { cva } from 'class-variance-authority'\nimport * as Popover from '@radix-ui/react-popover'\nimport { CopyIcon } from '../icons'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport copyToClipboard, { CopyResult } from '../../utils/copyToClipboard'\n\nconst copyBtn = cva(\n  'p-0 flex-shrink-0 h-[max-content] min-w-0 bg-transparent transition-colors',\n  {\n    variants: {\n      theme: {\n        light: 'hover:text-gray-600 active:text-gray-800',\n        dark: 'hover:text-gray-300 active:text-gray-100'\n      }\n    },\n    defaultVariants: {\n      theme: 'light'\n    }\n  }\n)\n\nexport interface CopyButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onCopy'> {\n  /** Text to copy into clipboard */\n  text: string\n  /** Optional callback that will be called with the copy result */\n  onCopy?: (result: CopyResult) => void\n}\n\nexport const CopyButton: React.FC<CopyButtonProps> = ({ text, className, onCopy, ...props }) => {\n  const { theme } = useTheme()\n  const [open, setOpen] = useState(false)\n\n  const handleCopy = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation()\n    e.preventDefault()\n    copyToClipboard(text, onCopy)\n    setOpen(true)\n    setTimeout(() => setOpen(false), 1000)\n  }\n\n  return (\n    <Popover.Root open={open}>\n      <Popover.Trigger asChild>\n        <button\n          type='button'\n          className={`${copyBtn({ theme })} ${className ?? ''} hover:cursor-pointer`}\n          onClick={handleCopy}\n          {...props}\n        >\n          <CopyIcon\n            className='w-4 h-4 transition'\n            color={theme === 'light' ? '#000000' : '#ffffff'}\n          />\n        </button>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          className='bg-white text-gray-900 text-sm px-2 py-1 rounded shadow-lg'\n          side='top'\n          sideOffset={5}\n        >\n          Copied\n          <Popover.Arrow className='fill-white' />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nexport default CopyButton\n"],"names":["copyBtn","cva","variants","theme","light","dark","defaultVariants","CopyButton","_a","text","className","onCopy","props","__rest","useTheme","open","setOpen","useState","handleCopy","e","stopPropagation","preventDefault","copyToClipboard","setTimeout","_jsxs","Popover","Root","children","_jsx","Trigger","asChild","Object","assign","type","onClick","CopyIcon","color","Portal","Content","side","sideOffset","Arrow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAMA,OAAO,GAAGC,0BAAG,CACjB,4EAA4E,EAC5E;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,0CAA0C;AACjDC,MAAAA,IAAI,EAAE;AACP;GACF;AACDC,EAAAA,eAAe,EAAE;AACfH,IAAAA,KAAK,EAAE;AACR;AACF,CAAA,CACF;AASYI,MAAAA,UAAU,GAA+BC,EAAqC,IAAI;MAAzC;MAAEC,IAAI;MAAEC,SAAS;AAAEC,MAAAA;UAAkB;AAAPC,IAAAA,KAAK,GAAnCC,YAAA,CAAAL,EAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,QAAA,CAAqC,CAAF;EACvF,MAAM;AAAEL,IAAAA;GAAO,GAAGW,qBAAQ,EAAE;EAC5B,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,UAAU,GAAIC,CAAsC,IAAI;IAC5DA,CAAC,CAACC,eAAe,EAAE;IACnBD,CAAC,CAACE,cAAc,EAAE;AAClBC,IAAAA,+BAAe,CAACb,IAAI,EAAEE,MAAM,CAAC;IAC7BK,OAAO,CAAC,IAAI,CAAC;IACbO,UAAU,CAAC,MAAMP,OAAO,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;GACvC;AAED,EAAA,OACEQ,gBAACC,2BAAO,CAACC,IAAI,EAAC;AAAAX,IAAAA,IAAI,EAAEA,IAAI;AACtBY,IAAAA,QAAA,EAAA,CAAAC,cAAA,CAACH,2BAAO,CAACI,OAAO,EAAC;AAAAC,MAAAA,OAAO,EACtB,IAAA;MAAAH,QAAA,EAAAC,cAAA,CAAA,QAAA,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACEC,QAAAA,IAAI,EAAC,QAAQ;QACbvB,SAAS,EAAE,CAAGV,EAAAA,OAAO,CAAC;AAAEG,UAAAA;AAAK,SAAE,CAAC,CAAA,CAAA,EAAIO,SAAS,KAAT,IAAA,IAAAA,SAAS,KAAT,MAAA,GAAAA,SAAS,GAAI,EAAE,CAAuB,qBAAA,CAAA;AAC1EwB,QAAAA,OAAO,EAAEhB;OACL,EAAAN,KAAK;kBAETgB,cAAC,CAAAO,cAAQ,EACP;AAAAzB,UAAAA,SAAS,EAAC,oBAAoB;AAC9B0B,UAAAA,KAAK,EAAEjC,KAAK,KAAK,OAAO,GAAG,SAAS,GAAG;SACvC;AAAA,OAAA,CAAA;AAEY,KAAA,CAAA,EAClByB,cAAC,CAAAH,2BAAO,CAACY,MAAM,EAAA;AAAAV,MAAAA,QAAA,EACbH,eAAC,CAAAC,2BAAO,CAACa,OAAO;AACd5B,QAAAA,SAAS,EAAC,4DAA4D;AACtE6B,QAAAA,IAAI,EAAC,KAAK;AACVC,QAAAA,UAAU,EAAE,CAAC;QAGbb,QAAA,EAAA,CAAA,QAAA,EAAAC,cAAA,CAACH,2BAAO,CAACgB,KAAK,EAAC;AAAA/B,UAAAA,SAAS,EAAC;UAAe;OACxB;AAAA,KAAA,CACH;AACJ,GAAA,CAAA;AAEnB;;;;;"}

package/dist/react/components/copyButton/index.esm.js

@@ -4,7 +4,7 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { cva } from 'class-variance-authority';
-import * as Popover from '@radix-ui/react-popover';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { CopyIcon } from '../icons/index.esm.js';
 import { useTheme } from '../../contexts/ThemeContext.esm.js';
 import { copyToClipboard } from '../../utils/copyToClipboard.esm.js';
@@ -38,9 +38,9 @@ const CopyButton = _a => {
     setOpen(true);
     setTimeout(() => setOpen(false), 1000);
   };
-  return jsxs(Popover.Root, {
+  return jsxs(PopoverPrimitive.Root, {
     open: open,
-    children: [jsx(Popover.Trigger, {
+    children: [jsx(PopoverPrimitive.Trigger, {
       asChild: true,
       children: jsx("button", Object.assign({
         type: 'button',
@@ -54,12 +54,12 @@ const CopyButton = _a => {
           color: theme === 'light' ? '#000000' : '#ffffff'
         })
       }))
-    }), jsx(Popover.Portal, {
-      children: jsxs(Popover.Content, {
+    }), jsx(PopoverPrimitive.Portal, {
+      children: jsxs(PopoverPrimitive.Content, {
         className: 'bg-white text-gray-900 text-sm px-2 py-1 rounded shadow-lg',
         side: 'top',
         sideOffset: 5,
-        children: ["Copied", jsx(Popover.Arrow, {
+        children: ["Copied", jsx(PopoverPrimitive.Arrow, {
           className: 'fill-white'
         })]
       })

package/dist/react/components/copyButton/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/copyButton/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { cva } from 'class-variance-authority'\nimport * as Popover from '@radix-ui/react-popover'\nimport { CopyIcon } from '../icons'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport copyToClipboard, { CopyResult } from '../../utils/copyToClipboard'\n\nconst copyBtn = cva(\n  'p-0 flex-shrink-0 h-[max-content] min-w-0 bg-transparent transition-colors',\n  {\n    variants: {\n      theme: {\n        light: 'hover:text-gray-600 active:text-gray-800',\n        dark: 'hover:text-gray-300 active:text-gray-100'\n      }\n    },\n    defaultVariants: {\n      theme: 'light'\n    }\n  }\n)\n\nexport interface CopyButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onCopy'> {\n  /** Text to copy into clipboard */\n  text: string\n  /** Optional callback that will be called with the copy result */\n  onCopy?: (result: CopyResult) => void\n}\n\nexport const CopyButton: React.FC<CopyButtonProps> = ({ text, className, onCopy, ...props }) => {\n  const { theme } = useTheme()\n  const [open, setOpen] = useState(false)\n\n  const handleCopy = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation()\n    e.preventDefault()\n    copyToClipboard(text, onCopy)\n    setOpen(true)\n    setTimeout(() => setOpen(false), 1000)\n  }\n\n  return (\n    <Popover.Root open={open}>\n      <Popover.Trigger asChild>\n        <button\n          type='button'\n          className={`${copyBtn({ theme })} ${className ?? ''} hover:cursor-pointer`}\n          onClick={handleCopy}\n          {...props}\n        >\n          <CopyIcon\n            className='w-4 h-4 transition'\n            color={theme === 'light' ? '#000000' : '#ffffff'}\n          />\n        </button>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          className='bg-white text-gray-900 text-sm px-2 py-1 rounded shadow-lg'\n          side='top'\n          sideOffset={5}\n        >\n          Copied\n          <Popover.Arrow className='fill-white' />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nexport default CopyButton\n"],"names":["copyBtn","cva","variants","theme","light","dark","defaultVariants","CopyButton","_a","text","className","onCopy","props","__rest","useTheme","open","setOpen","useState","handleCopy","e","stopPropagation","preventDefault","copyToClipboard","setTimeout","_jsxs","Popover","Root","children","_jsx","Trigger","asChild","Object","assign","type","onClick","CopyIcon","color","Portal","Content","side","sideOffset","Arrow"],"mappings":";;;;;;;;;;;AAOA,MAAMA,OAAO,GAAGC,GAAG,CACjB,4EAA4E,EAC5E;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,0CAA0C;AACjDC,MAAAA,IAAI,EAAE;AACP;GACF;AACDC,EAAAA,eAAe,EAAE;AACfH,IAAAA,KAAK,EAAE;AACR;AACF,CAAA,CACF;AASYI,MAAAA,UAAU,GAA+BC,EAAqC,IAAI;MAAzC;MAAEC,IAAI;MAAEC,SAAS;AAAEC,MAAAA;UAAkB;AAAPC,IAAAA,KAAK,GAAnCC,MAAA,CAAAL,EAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,QAAA,CAAqC,CAAF;EACvF,MAAM;AAAEL,IAAAA;GAAO,GAAGW,QAAQ,EAAE;EAC5B,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,UAAU,GAAIC,CAAsC,IAAI;IAC5DA,CAAC,CAACC,eAAe,EAAE;IACnBD,CAAC,CAACE,cAAc,EAAE;AAClBC,IAAAA,eAAe,CAACb,IAAI,EAAEE,MAAM,CAAC;IAC7BK,OAAO,CAAC,IAAI,CAAC;IACbO,UAAU,CAAC,MAAMP,OAAO,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;GACvC;AAED,EAAA,OACEQ,KAACC,OAAO,CAACC,IAAI,EAAC;AAAAX,IAAAA,IAAI,EAAEA,IAAI;AACtBY,IAAAA,QAAA,EAAA,CAAAC,GAAA,CAACH,OAAO,CAACI,OAAO,EAAC;AAAAC,MAAAA,OAAO,EACtB,IAAA;MAAAH,QAAA,EAAAC,GAAA,CAAA,QAAA,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACEC,QAAAA,IAAI,EAAC,QAAQ;QACbvB,SAAS,EAAE,CAAGV,EAAAA,OAAO,CAAC;AAAEG,UAAAA;AAAK,SAAE,CAAC,CAAA,CAAA,EAAIO,SAAS,KAAT,IAAA,IAAAA,SAAS,KAAT,MAAA,GAAAA,SAAS,GAAI,EAAE,CAAuB,qBAAA,CAAA;AAC1EwB,QAAAA,OAAO,EAAEhB;OACL,EAAAN,KAAK;kBAETgB,GAAC,CAAAO,QAAQ,EACP;AAAAzB,UAAAA,SAAS,EAAC,oBAAoB;AAC9B0B,UAAAA,KAAK,EAAEjC,KAAK,KAAK,OAAO,GAAG,SAAS,GAAG;SACvC;AAAA,OAAA,CAAA;AAEY,KAAA,CAAA,EAClByB,GAAC,CAAAH,OAAO,CAACY,MAAM,EAAA;AAAAV,MAAAA,QAAA,EACbH,IAAC,CAAAC,OAAO,CAACa,OAAO;AACd5B,QAAAA,SAAS,EAAC,4DAA4D;AACtE6B,QAAAA,IAAI,EAAC,KAAK;AACVC,QAAAA,UAAU,EAAE,CAAC;QAGbb,QAAA,EAAA,CAAA,QAAA,EAAAC,GAAA,CAACH,OAAO,CAACgB,KAAK,EAAC;AAAA/B,UAAAA,SAAS,EAAC;UAAe;OACxB;AAAA,KAAA,CACH;AACJ,GAAA,CAAA;AAEnB;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/copyButton/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { cva } from 'class-variance-authority'\nimport * as Popover from '@radix-ui/react-popover'\nimport { CopyIcon } from '../icons'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport copyToClipboard, { CopyResult } from '../../utils/copyToClipboard'\n\nconst copyBtn = cva(\n  'p-0 flex-shrink-0 h-[max-content] min-w-0 bg-transparent transition-colors',\n  {\n    variants: {\n      theme: {\n        light: 'hover:text-gray-600 active:text-gray-800',\n        dark: 'hover:text-gray-300 active:text-gray-100'\n      }\n    },\n    defaultVariants: {\n      theme: 'light'\n    }\n  }\n)\n\nexport interface CopyButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onCopy'> {\n  /** Text to copy into clipboard */\n  text: string\n  /** Optional callback that will be called with the copy result */\n  onCopy?: (result: CopyResult) => void\n}\n\nexport const CopyButton: React.FC<CopyButtonProps> = ({ text, className, onCopy, ...props }) => {\n  const { theme } = useTheme()\n  const [open, setOpen] = useState(false)\n\n  const handleCopy = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation()\n    e.preventDefault()\n    copyToClipboard(text, onCopy)\n    setOpen(true)\n    setTimeout(() => setOpen(false), 1000)\n  }\n\n  return (\n    <Popover.Root open={open}>\n      <Popover.Trigger asChild>\n        <button\n          type='button'\n          className={`${copyBtn({ theme })} ${className ?? ''} hover:cursor-pointer`}\n          onClick={handleCopy}\n          {...props}\n        >\n          <CopyIcon\n            className='w-4 h-4 transition'\n            color={theme === 'light' ? '#000000' : '#ffffff'}\n          />\n        </button>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          className='bg-white text-gray-900 text-sm px-2 py-1 rounded shadow-lg'\n          side='top'\n          sideOffset={5}\n        >\n          Copied\n          <Popover.Arrow className='fill-white' />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nexport default CopyButton\n"],"names":["copyBtn","cva","variants","theme","light","dark","defaultVariants","CopyButton","_a","text","className","onCopy","props","__rest","useTheme","open","setOpen","useState","handleCopy","e","stopPropagation","preventDefault","copyToClipboard","setTimeout","_jsxs","Popover","Root","children","_jsx","Trigger","asChild","Object","assign","type","onClick","CopyIcon","color","Portal","Content","side","sideOffset","Arrow"],"mappings":";;;;;;;;;;;AAOA,MAAMA,OAAO,GAAGC,GAAG,CACjB,4EAA4E,EAC5E;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,0CAA0C;AACjDC,MAAAA,IAAI,EAAE;AACP;GACF;AACDC,EAAAA,eAAe,EAAE;AACfH,IAAAA,KAAK,EAAE;AACR;AACF,CAAA,CACF;AASYI,MAAAA,UAAU,GAA+BC,EAAqC,IAAI;MAAzC;MAAEC,IAAI;MAAEC,SAAS;AAAEC,MAAAA;UAAkB;AAAPC,IAAAA,KAAK,GAAnCC,MAAA,CAAAL,EAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,QAAA,CAAqC,CAAF;EACvF,MAAM;AAAEL,IAAAA;GAAO,GAAGW,QAAQ,EAAE;EAC5B,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,UAAU,GAAIC,CAAsC,IAAI;IAC5DA,CAAC,CAACC,eAAe,EAAE;IACnBD,CAAC,CAACE,cAAc,EAAE;AAClBC,IAAAA,eAAe,CAACb,IAAI,EAAEE,MAAM,CAAC;IAC7BK,OAAO,CAAC,IAAI,CAAC;IACbO,UAAU,CAAC,MAAMP,OAAO,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;GACvC;AAED,EAAA,OACEQ,KAACC,gBAAO,CAACC,IAAI,EAAC;AAAAX,IAAAA,IAAI,EAAEA,IAAI;AACtBY,IAAAA,QAAA,EAAA,CAAAC,GAAA,CAACH,gBAAO,CAACI,OAAO,EAAC;AAAAC,MAAAA,OAAO,EACtB,IAAA;MAAAH,QAAA,EAAAC,GAAA,CAAA,QAAA,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACEC,QAAAA,IAAI,EAAC,QAAQ;QACbvB,SAAS,EAAE,CAAGV,EAAAA,OAAO,CAAC;AAAEG,UAAAA;AAAK,SAAE,CAAC,CAAA,CAAA,EAAIO,SAAS,KAAT,IAAA,IAAAA,SAAS,KAAT,MAAA,GAAAA,SAAS,GAAI,EAAE,CAAuB,qBAAA,CAAA;AAC1EwB,QAAAA,OAAO,EAAEhB;OACL,EAAAN,KAAK;kBAETgB,GAAC,CAAAO,QAAQ,EACP;AAAAzB,UAAAA,SAAS,EAAC,oBAAoB;AAC9B0B,UAAAA,KAAK,EAAEjC,KAAK,KAAK,OAAO,GAAG,SAAS,GAAG;SACvC;AAAA,OAAA,CAAA;AAEY,KAAA,CAAA,EAClByB,GAAC,CAAAH,gBAAO,CAACY,MAAM,EAAA;AAAAV,MAAAA,QAAA,EACbH,IAAC,CAAAC,gBAAO,CAACa,OAAO;AACd5B,QAAAA,SAAS,EAAC,4DAA4D;AACtE6B,QAAAA,IAAI,EAAC,KAAK;AACVC,QAAAA,UAAU,EAAE,CAAC;QAGbb,QAAA,EAAA,CAAA,QAAA,EAAAC,GAAA,CAACH,gBAAO,CAACgB,KAAK,EAAC;AAAA/B,UAAAA,SAAS,EAAC;UAAe;OACxB;AAAA,KAAA,CACH;AACJ,GAAA,CAAA;AAEnB;;;;"}

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

@@ -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

@@ -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;;;;"}
+{"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

@@ -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

@@ -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

@@ -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;;;;"}
+{"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/index.cjs.js

@@ -27,7 +27,9 @@ var index$l = require('./progressStepBar/index.cjs.js');
 var index$m = require('./dashLogo/index.cjs.js');
 var index$n = require('./dialog/index.cjs.js');
 var index$o = require('./tabs/index.cjs.js');
-var index$p = require('./icons/index.cjs.js');
+var index$p = require('./tooltip/index.cjs.js');
+var index$q = require('./popover/index.cjs.js');
+var index$r = require('./icons/index.cjs.js');
 
 
 
@@ -56,46 +58,48 @@ exports.ProgressStepBar = index$l.ProgressStepBar;
 exports.DashLogo = index$m.DashLogo;
 exports.Dialog = index$n.DashDialog;
 exports.Tabs = index$o.Tabs;
-exports.AirplaneIcon = index$p.AirplaneIcon;
-exports.ArrowIcon = index$p.ArrowIcon;
-exports.BroadcastedIcon = index$p.BroadcastedIcon;
-exports.BurgerMenuIcon = index$p.BurgerMenuIcon;
-exports.CalendarIcon = index$p.CalendarIcon;
-exports.ChainSmallIcon = index$p.ChainSmallIcon;
-exports.CheckIcon = index$p.CheckIcon;
-exports.CheckmarkIcon = index$p.CheckmarkIcon;
-exports.ChevronIcon = index$p.ChevronIcon;
-exports.CircleProcessIcon = index$p.CircleProcessIcon;
-exports.CopyIcon = index$p.CopyIcon;
-exports.CreditsIcon = index$p.CreditsIcon;
-exports.CrossIcon = index$p.CrossIcon;
-exports.DeleteIcon = index$p.DeleteIcon;
-exports.DocumentIcon = index$p.DocumentIcon;
-exports.EditIcon = index$p.EditIcon;
-exports.ErrorIcon = index$p.ErrorIcon;
-exports.ExternalLinkIcon = index$p.ExternalLinkIcon;
-exports.EyeClosedIcon = index$p.EyeClosedIcon;
-exports.EyeOpenIcon = index$p.EyeOpenIcon;
-exports.FaceIcon = index$p.FaceIcon;
-exports.FilterIcon = index$p.FilterIcon;
-exports.FingerprintIcon = index$p.FingerprintIcon;
-exports.InfoCircleIcon = index$p.InfoCircleIcon;
-exports.KebabMenuIcon = index$p.KebabMenuIcon;
-exports.KeyIcon = index$p.KeyIcon;
-exports.LockIcon = index$p.LockIcon;
-exports.PendingIcon = index$p.PendingIcon;
-exports.PlusIcon = index$p.PlusIcon;
-exports.PooledIcon = index$p.PooledIcon;
-exports.ProtectedMessageIcon = index$p.ProtectedMessageIcon;
-exports.QuestionMessageIcon = index$p.QuestionMessageIcon;
-exports.QueuedIcon = index$p.QueuedIcon;
-exports.SearchIcon = index$p.SearchIcon;
-exports.SettingsIcon = index$p.SettingsIcon;
-exports.ShieldSmallIcon = index$p.ShieldSmallIcon;
-exports.SignIcon = index$p.SignIcon;
-exports.SignLockIcon = index$p.SignLockIcon;
-exports.SmartphoneIcon = index$p.SmartphoneIcon;
-exports.SuccessIcon = index$p.SuccessIcon;
-exports.WalletIcon = index$p.WalletIcon;
-exports.WebIcon = index$p.WebIcon;
+exports.Tooltip = index$p.Tooltip;
+exports.Popover = index$q.Popover;
+exports.AirplaneIcon = index$r.AirplaneIcon;
+exports.ArrowIcon = index$r.ArrowIcon;
+exports.BroadcastedIcon = index$r.BroadcastedIcon;
+exports.BurgerMenuIcon = index$r.BurgerMenuIcon;
+exports.CalendarIcon = index$r.CalendarIcon;
+exports.ChainSmallIcon = index$r.ChainSmallIcon;
+exports.CheckIcon = index$r.CheckIcon;
+exports.CheckmarkIcon = index$r.CheckmarkIcon;
+exports.ChevronIcon = index$r.ChevronIcon;
+exports.CircleProcessIcon = index$r.CircleProcessIcon;
+exports.CopyIcon = index$r.CopyIcon;
+exports.CreditsIcon = index$r.CreditsIcon;
+exports.CrossIcon = index$r.CrossIcon;
+exports.DeleteIcon = index$r.DeleteIcon;
+exports.DocumentIcon = index$r.DocumentIcon;
+exports.EditIcon = index$r.EditIcon;
+exports.ErrorIcon = index$r.ErrorIcon;
+exports.ExternalLinkIcon = index$r.ExternalLinkIcon;
+exports.EyeClosedIcon = index$r.EyeClosedIcon;
+exports.EyeOpenIcon = index$r.EyeOpenIcon;
+exports.FaceIcon = index$r.FaceIcon;
+exports.FilterIcon = index$r.FilterIcon;
+exports.FingerprintIcon = index$r.FingerprintIcon;
+exports.InfoCircleIcon = index$r.InfoCircleIcon;
+exports.KebabMenuIcon = index$r.KebabMenuIcon;
+exports.KeyIcon = index$r.KeyIcon;
+exports.LockIcon = index$r.LockIcon;
+exports.PendingIcon = index$r.PendingIcon;
+exports.PlusIcon = index$r.PlusIcon;
+exports.PooledIcon = index$r.PooledIcon;
+exports.ProtectedMessageIcon = index$r.ProtectedMessageIcon;
+exports.QuestionMessageIcon = index$r.QuestionMessageIcon;
+exports.QueuedIcon = index$r.QueuedIcon;
+exports.SearchIcon = index$r.SearchIcon;
+exports.SettingsIcon = index$r.SettingsIcon;
+exports.ShieldSmallIcon = index$r.ShieldSmallIcon;
+exports.SignIcon = index$r.SignIcon;
+exports.SignLockIcon = index$r.SignLockIcon;
+exports.SmartphoneIcon = index$r.SmartphoneIcon;
+exports.SuccessIcon = index$r.SuccessIcon;
+exports.WalletIcon = index$r.WalletIcon;
+exports.WebIcon = index$r.WebIcon;
 //# sourceMappingURL=index.cjs.js.map

package/dist/react/components/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/react/components/index.d.ts

@@ -23,5 +23,7 @@ export { ProgressStepBar, type ProgressStepBarProps } from './progressStepBar';
 export { DashLogo, type DashLogoProps } from './dashLogo';
 export { Dialog, type DialogProps } from './dialog';
 export { Tabs, type TabsProps, type TabItem } from './tabs';
+export { Tooltip, type TooltipProps } from './tooltip';
+export { Popover, type PopoverProps } from './popover';
 export type { TimeDeltaFormat } from '../../shared/utils/datetime';
 export { ArrowIcon, CopyIcon, SuccessIcon, ErrorIcon, QueuedIcon, PooledIcon, BroadcastedIcon, CalendarIcon, EyeOpenIcon, EyeClosedIcon, CheckIcon, KeyIcon, ProtectedMessageIcon, SmartphoneIcon, CrossIcon, WalletIcon, PlusIcon, FilterIcon, EditIcon, DeleteIcon, DocumentIcon, ChevronIcon, BurgerMenuIcon, KebabMenuIcon, CircleProcessIcon, CreditsIcon, WebIcon, ChainSmallIcon, SettingsIcon, ShieldSmallIcon, QuestionMessageIcon, CheckmarkIcon, FingerprintIcon, FaceIcon, SignIcon, SignLockIcon, LockIcon, PendingIcon, SearchIcon, AirplaneIcon, ExternalLinkIcon, InfoCircleIcon } from './icons';

package/dist/react/components/index.esm.js

@@ -25,5 +25,7 @@ export { ProgressStepBar } from './progressStepBar/index.esm.js';
 export { DashLogo } from './dashLogo/index.esm.js';
 export { DashDialog as Dialog } from './dialog/index.esm.js';
 export { Tabs } from './tabs/index.esm.js';
+export { Tooltip } from './tooltip/index.esm.js';
+export { Popover } from './popover/index.esm.js';
 export { AirplaneIcon, ArrowIcon, BroadcastedIcon, BurgerMenuIcon, CalendarIcon, ChainSmallIcon, CheckIcon, CheckmarkIcon, ChevronIcon, CircleProcessIcon, CopyIcon, CreditsIcon, CrossIcon, DeleteIcon, DocumentIcon, EditIcon, ErrorIcon, ExternalLinkIcon, EyeClosedIcon, EyeOpenIcon, FaceIcon, FilterIcon, FingerprintIcon, InfoCircleIcon, KebabMenuIcon, KeyIcon, LockIcon, PendingIcon, PlusIcon, PooledIcon, ProtectedMessageIcon, QuestionMessageIcon, QueuedIcon, SearchIcon, SettingsIcon, ShieldSmallIcon, SignIcon, SignLockIcon, SmartphoneIcon, SuccessIcon, WalletIcon, WebIcon } from './icons/index.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/react/components/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -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

@@ -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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"}
+{"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

@@ -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

@@ -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,