@powerhousedao/design-system 6.2.0-dev.5 → 6.2.0-dev.50

package/dist/ui/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["React","twMerge","inputBaseStyles","Input","forwardRef","className","type","props","ref","displayName"],"sources":["../../../../src/ui/components/input/input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement>;\n\nconst inputBaseStyles = twMerge(\n  // Base styles\n  \"flex h-9 w-full rounded-md text-sm/5 font-normal text-gray-900 dark:text-slate-50\",\n  // Border & Background\n  \"border border-gray-300 bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100\",\n  // Padding\n  \"px-3 py-2\",\n  // Placeholder\n  \"font-sans placeholder:text-gray-500 dark:placeholder:text-slate-400\",\n  // Focus styles\n  \"focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0 focus-visible:ring-offset-white focus-visible:outline-none\",\n  \"focus:bg-gray-50 dark:focus:bg-slate-700 dark:focus-visible:ring-slate-400 dark:focus-visible:ring-offset-slate-800\",\n  // Disabled state\n  \"disabled:cursor-not-allowed\",\n  \"disabled:border-gray-300 disabled:bg-gray-50 disabled:text-gray-700 dark:disabled:border-slate-500 dark:disabled:bg-slate-700 dark:disabled:placeholder:text-slate-400\",\n);\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={twMerge(inputBaseStyles, className)}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n\nexport { Input };\n"],"mappings":";;;;AAKA,MAAME,kBAAkBD,QAEtB,qFAEA,iGAEA,aAEA,uEAEA,2IACA,uHAEA,+BACA,yKACD;AAED,MAAME,QAAQH,wBAAMI,YACjB,EAAEC,WAAWC,MAAM,GAAGC,SAASC,QAAQ;AACtC,QACE,oBAAC,SAAD;EACQF;EACN,WAAWL,QAAQC,iBAAiBG,UAAU;EACzCG;EACL,GAAID;EACJ,CAAA;EAGP;AAEDJ,MAAMM,cAAc"}
+{"version":3,"file":"input.js","names":["React","twMerge","inputBaseStyles","Input","forwardRef","className","type","props","ref","displayName"],"sources":["../../../../src/ui/components/input/input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement>;\n\nconst inputBaseStyles = twMerge(\n  // Base styles\n  \"flex h-9 w-full rounded-md text-sm/5 font-normal text-foreground\",\n  // Border & Background\n  \"border border-border bg-background\",\n  // Padding\n  \"px-3 py-2\",\n  // Placeholder\n  \"font-sans placeholder:text-muted-foreground disabled:disabled-effect\",\n  // Focus styles\n  \"focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 focus-visible:ring-offset-white focus-visible:outline-none\",\n  \"focus:bg-background focus-visible:ring-offset-background\",\n  // Disabled state\n  \"disabled:disabled-effect\",\n  \"disabled:disabled-effect\",\n);\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={twMerge(inputBaseStyles, className)}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n\nexport { Input };\n"],"mappings":";;;;AAKA,MAAME,kBAAkBD,QAEtB,oEAEA,sCAEA,aAEA,wEAEA,uIACA,4DAEA,4BACA,2BACD;AAED,MAAME,QAAQH,wBAAMI,YACjB,EAAEC,WAAWC,MAAM,GAAGC,SAASC,QAAQ;AACtC,QACE,oBAAC,SAAD;EACQF;EACN,WAAWL,QAAQC,iBAAiBG,UAAU;EACzCG;EACL,GAAID;EACJ,CAAA;EAGP;AAEDJ,MAAMM,cAAc"}

package/dist/ui/components/input/splitted-input-diff.js

@@ -26,7 +26,7 @@ const CopyIcon = ({ value, hasCopied, setHasCopied, hasHover }) => {
 			children: /* @__PURE__ */ jsx(Icon, {
 				name: "Copy",
 				size: 16,
-				className: twMerge("text-gray-500 dark:text-slate-400")
+				className: twMerge("text-muted-foreground")
 			})
 		})
 	}) });
@@ -53,7 +53,7 @@ const SplittedInputDiff = ({ baseValue, value, viewMode, diffMode, showCopyIcon
 					hasHover
 				})]
 			}),
-			/* @__PURE__ */ jsx("div", { className: twMerge("mx-3 h-[34px] w-px bg-gray-300 dark:bg-slate-600 dark:text-slate-100") }),
+			/* @__PURE__ */ jsx("div", { className: twMerge("mx-3 h-[34px] w-px bg-secondary") }),
 			/* @__PURE__ */ jsxs("div", {
 				className: twMerge("flex flex-1 items-center gap-2 truncate [&>span]:truncate"),
 				children: [/* @__PURE__ */ jsx(TextDiff, {

package/dist/ui/components/input/splitted-input-diff.js.map

@@ -1 +1 @@
-{"version":3,"file":"splitted-input-diff.js","names":["Icon","twMerge","useCallback","useState","useMediaQuery","Tooltip","TooltipProvider","InputDiff","TextDiff","CopyIcon","value","hasCopied","setHasCopied","hasHover","copy","navigator","clipboard","writeText","then","setTimeout","catch","error","console","SplittedInputDiff","baseValue","viewMode","diffMode","showCopyIcon","hasCopiedLeft","setHasCopiedLeft","hasCopiedRight","setHasCopiedRight","undefined"],"sources":["../../../../src/ui/components/input/splitted-input-diff.tsx"],"sourcesContent":["import { Icon } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport { useCallback, useState } from \"react\";\nimport { useMediaQuery } from \"usehooks-ts\";\nimport type { WithDifference } from \"../../types.js\";\nimport { Tooltip, TooltipProvider } from \"../tooltip/tooltip.js\";\nimport { InputDiff } from \"./subcomponent/input-diff.js\";\nimport { TextDiff } from \"./subcomponent/text-diff.js\";\ninterface CopyIconProps {\n  value: string;\n  hasCopied: boolean;\n  setHasCopied: (hasCopied: boolean) => void;\n  hasHover: boolean;\n}\n\nconst CopyIcon = ({\n  value,\n  hasCopied,\n  setHasCopied,\n  hasHover,\n}: CopyIconProps) => {\n  const copy = useCallback(() => {\n    navigator.clipboard\n      .writeText(value)\n      .then(() => {\n        setHasCopied(true);\n        setTimeout(() => setHasCopied(false), 2000);\n      })\n      .catch((error: unknown) => {\n        console.error(\"Failed to copy value: \", error);\n      });\n  }, [value, setHasCopied]);\n\n  return (\n    <TooltipProvider>\n      <Tooltip content=\"Copied!\" open={hasCopied} triggerAsChild>\n        <button\n          type=\"button\"\n          onClick={copy}\n          className={twMerge(\n            \"focus-visible:outline-none [&_svg]:pointer-events-none\",\n            hasHover &&\n              \"opacity-0 transition-opacity duration-500 group-hover:opacity-100\",\n          )}\n        >\n          <Icon\n            name=\"Copy\"\n            size={16}\n            className={twMerge(\"text-gray-500 dark:text-slate-400\")}\n          />\n        </button>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n\ninterface SplittedInputDiffProps extends WithDifference<string> {\n  value: string;\n  showCopyIcon?: boolean;\n}\n\nexport const SplittedInputDiff = ({\n  baseValue,\n  value,\n  viewMode,\n  diffMode,\n  showCopyIcon = false,\n}: SplittedInputDiffProps) => {\n  const [hasCopiedLeft, setHasCopiedLeft] = useState(false);\n  const [hasCopiedRight, setHasCopiedRight] = useState(false);\n  const hasHover = useMediaQuery(\"(hover: hover) and (pointer: fine)\");\n\n  return (\n    <InputDiff className={twMerge(\"group\")}>\n      {viewMode === \"mixed\" ? (\n        <>\n          <div\n            className={twMerge(\n              \"flex flex-1 items-center gap-2 truncate [&>span]:truncate\",\n            )}\n          >\n            <TextDiff\n              baseValue={baseValue}\n              value={value}\n              viewMode=\"removal\"\n              diffMode={diffMode}\n              className={twMerge(\"flex-1\")}\n            />\n            {showCopyIcon && baseValue !== undefined && baseValue !== \"\" && (\n              <CopyIcon\n                value={baseValue}\n                hasCopied={hasCopiedLeft}\n                setHasCopied={setHasCopiedLeft}\n                hasHover={hasHover}\n              />\n            )}\n          </div>\n          <div\n            className={twMerge(\n              \"mx-3 h-[34px] w-px bg-gray-300 dark:bg-slate-600 dark:text-slate-100\",\n            )}\n          />\n          <div\n            className={twMerge(\n              \"flex flex-1 items-center gap-2 truncate [&>span]:truncate\",\n            )}\n          >\n            <TextDiff\n              baseValue={baseValue}\n              value={value}\n              viewMode=\"addition\"\n              diffMode={diffMode}\n              className={twMerge(\"flex-1\")}\n            />\n            {showCopyIcon && value !== \"\" && (\n              <CopyIcon\n                value={value}\n                hasCopied={hasCopiedRight}\n                setHasCopied={setHasCopiedRight}\n                hasHover={hasHover}\n              />\n            )}\n          </div>\n        </>\n      ) : (\n        <div\n          className={twMerge(\n            \"flex flex-1 items-center gap-2 truncate [&>span]:truncate\",\n          )}\n        >\n          <TextDiff\n            baseValue={baseValue}\n            value={value}\n            viewMode={viewMode}\n            diffMode={diffMode}\n            className={twMerge(\"flex-1\")}\n          />\n          {showCopyIcon &&\n            ((viewMode === \"removal\" &&\n              baseValue !== undefined &&\n              baseValue !== \"\") ||\n              (viewMode === \"addition\" && value !== \"\")) && (\n              <CopyIcon\n                value={viewMode === \"removal\" ? (baseValue ?? \"\") : value}\n                hasCopied={hasCopiedLeft}\n                setHasCopied={setHasCopiedLeft}\n                hasHover={hasHover}\n              />\n            )}\n        </div>\n      )}\n    </InputDiff>\n  );\n};\n"],"mappings":";;;;;;;;;AAeA,MAAMS,YAAY,EAChBC,OACAC,WACAC,cACAC,eACmB;AAanB,QACE,oBAAC,UAAD,EAAA,UACE,oBAAC,SAAD;EAAS,SAAQ;EAAU,MAAMF;EAAW,gBAAA;YAC1C,oBAAC,UAAD;GACE,MAAK;GACL,SAjBKT,kBAAkB;AAC7Ba,cAAUC,UACPC,UAAUP,MAAM,CAChBQ,WAAW;AACVN,kBAAa,KAAK;AAClBO,sBAAiBP,aAAa,MAAM,EAAE,IAAK;MAC3C,CACDQ,OAAOC,UAAmB;AACzBC,aAAQD,MAAM,0BAA0BA,MAAM;MAC9C;MACH,CAACX,OAAOE,aAAa,CAAC;GAQjB,WAAWX,QACT,0DACAY,YACE,oEACH;aAED,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,WAAWZ,QAAQ,oCAAoC;IAAC,CAAA;GAEpD,CAAA;EACD,CAAA,EACO,CAAA;;AAStB,MAAasB,qBAAqB,EAChCC,WACAd,OACAe,UACAC,UACAC,eAAe,YACa;CAC5B,MAAM,CAACC,eAAeC,oBAAoB1B,SAAS,MAAM;CACzD,MAAM,CAAC2B,gBAAgBC,qBAAqB5B,SAAS,MAAM;CAC3D,MAAMU,WAAWT,cAAc,qCAAqC;AAEpE,QACE,oBAAC,WAAD;EAAW,WAAWH,QAAQ,QAAQ;YACnCwB,aAAa,UACZ,qBAAA,YAAA,EAAA,UAAA;GACE,qBAAC,OAAD;IACE,WAAWxB,QACT,4DACD;cAHH,CAKE,oBAAC,UAAD;KACauB;KACJd;KACP,UAAS;KACCgB;KACV,WAAWzB,QAAQ,SAAS;KAAC,CAAA,EAE9B0B,gBAAgBH,cAAcQ,KAAAA,KAAaR,cAAc,MACxD,oBAAC,UAAD;KACE,OAAOA;KACP,WAAWI;KACX,cAAcC;KACJhB;KAEb,CAAA,CACE;;GACL,oBAAC,OAAD,EACE,WAAWZ,QACT,uEACD,EAAC,CAAA;GAEJ,qBAAC,OAAD;IACE,WAAWA,QACT,4DACD;cAHH,CAKE,oBAAC,UAAD;KACauB;KACJd;KACP,UAAS;KACCgB;KACV,WAAWzB,QAAQ,SAAS;KAAC,CAAA,EAE9B0B,gBAAgBjB,UAAU,MACzB,oBAAC,UAAD;KACSA;KACP,WAAWoB;KACX,cAAcC;KACJlB;KAEb,CAAA,CACE;;GACJ,EAAA,CAAA,GAEH,qBAAC,OAAD;GACE,WAAWZ,QACT,4DACD;aAHH,CAKE,oBAAC,UAAD;IACauB;IACJd;IACGe;IACAC;IACV,WAAWzB,QAAQ,SAAS;IAAC,CAAA,EAE9B0B,iBACGF,aAAa,aACbD,cAAcQ,KAAAA,KACdR,cAAc,MACbC,aAAa,cAAcf,UAAU,OACtC,oBAAC,UAAD;IACE,OAAOe,aAAa,YAAaD,aAAa,KAAMd;IACpD,WAAWkB;IACX,cAAcC;IACJhB;IAEb,CAAA,CAEN;;EACS,CAAA"}
+{"version":3,"file":"splitted-input-diff.js","names":["Icon","twMerge","useCallback","useState","useMediaQuery","Tooltip","TooltipProvider","InputDiff","TextDiff","CopyIcon","value","hasCopied","setHasCopied","hasHover","copy","navigator","clipboard","writeText","then","setTimeout","catch","error","console","SplittedInputDiff","baseValue","viewMode","diffMode","showCopyIcon","hasCopiedLeft","setHasCopiedLeft","hasCopiedRight","setHasCopiedRight","undefined"],"sources":["../../../../src/ui/components/input/splitted-input-diff.tsx"],"sourcesContent":["import { Icon } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport { useCallback, useState } from \"react\";\nimport { useMediaQuery } from \"usehooks-ts\";\nimport type { WithDifference } from \"../../types.js\";\nimport { Tooltip, TooltipProvider } from \"../tooltip/tooltip.js\";\nimport { InputDiff } from \"./subcomponent/input-diff.js\";\nimport { TextDiff } from \"./subcomponent/text-diff.js\";\ninterface CopyIconProps {\n  value: string;\n  hasCopied: boolean;\n  setHasCopied: (hasCopied: boolean) => void;\n  hasHover: boolean;\n}\n\nconst CopyIcon = ({\n  value,\n  hasCopied,\n  setHasCopied,\n  hasHover,\n}: CopyIconProps) => {\n  const copy = useCallback(() => {\n    navigator.clipboard\n      .writeText(value)\n      .then(() => {\n        setHasCopied(true);\n        setTimeout(() => setHasCopied(false), 2000);\n      })\n      .catch((error: unknown) => {\n        console.error(\"Failed to copy value: \", error);\n      });\n  }, [value, setHasCopied]);\n\n  return (\n    <TooltipProvider>\n      <Tooltip content=\"Copied!\" open={hasCopied} triggerAsChild>\n        <button\n          type=\"button\"\n          onClick={copy}\n          className={twMerge(\n            \"focus-visible:outline-none [&_svg]:pointer-events-none\",\n            hasHover &&\n              \"opacity-0 transition-opacity duration-500 group-hover:opacity-100\",\n          )}\n        >\n          <Icon\n            name=\"Copy\"\n            size={16}\n            className={twMerge(\"text-muted-foreground\")}\n          />\n        </button>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n\ninterface SplittedInputDiffProps extends WithDifference<string> {\n  value: string;\n  showCopyIcon?: boolean;\n}\n\nexport const SplittedInputDiff = ({\n  baseValue,\n  value,\n  viewMode,\n  diffMode,\n  showCopyIcon = false,\n}: SplittedInputDiffProps) => {\n  const [hasCopiedLeft, setHasCopiedLeft] = useState(false);\n  const [hasCopiedRight, setHasCopiedRight] = useState(false);\n  const hasHover = useMediaQuery(\"(hover: hover) and (pointer: fine)\");\n\n  return (\n    <InputDiff className={twMerge(\"group\")}>\n      {viewMode === \"mixed\" ? (\n        <>\n          <div\n            className={twMerge(\n              \"flex flex-1 items-center gap-2 truncate [&>span]:truncate\",\n            )}\n          >\n            <TextDiff\n              baseValue={baseValue}\n              value={value}\n              viewMode=\"removal\"\n              diffMode={diffMode}\n              className={twMerge(\"flex-1\")}\n            />\n            {showCopyIcon && baseValue !== undefined && baseValue !== \"\" && (\n              <CopyIcon\n                value={baseValue}\n                hasCopied={hasCopiedLeft}\n                setHasCopied={setHasCopiedLeft}\n                hasHover={hasHover}\n              />\n            )}\n          </div>\n          <div className={twMerge(\"mx-3 h-[34px] w-px bg-secondary\")} />\n          <div\n            className={twMerge(\n              \"flex flex-1 items-center gap-2 truncate [&>span]:truncate\",\n            )}\n          >\n            <TextDiff\n              baseValue={baseValue}\n              value={value}\n              viewMode=\"addition\"\n              diffMode={diffMode}\n              className={twMerge(\"flex-1\")}\n            />\n            {showCopyIcon && value !== \"\" && (\n              <CopyIcon\n                value={value}\n                hasCopied={hasCopiedRight}\n                setHasCopied={setHasCopiedRight}\n                hasHover={hasHover}\n              />\n            )}\n          </div>\n        </>\n      ) : (\n        <div\n          className={twMerge(\n            \"flex flex-1 items-center gap-2 truncate [&>span]:truncate\",\n          )}\n        >\n          <TextDiff\n            baseValue={baseValue}\n            value={value}\n            viewMode={viewMode}\n            diffMode={diffMode}\n            className={twMerge(\"flex-1\")}\n          />\n          {showCopyIcon &&\n            ((viewMode === \"removal\" &&\n              baseValue !== undefined &&\n              baseValue !== \"\") ||\n              (viewMode === \"addition\" && value !== \"\")) && (\n              <CopyIcon\n                value={viewMode === \"removal\" ? (baseValue ?? \"\") : value}\n                hasCopied={hasCopiedLeft}\n                setHasCopied={setHasCopiedLeft}\n                hasHover={hasHover}\n              />\n            )}\n        </div>\n      )}\n    </InputDiff>\n  );\n};\n"],"mappings":";;;;;;;;;AAeA,MAAMS,YAAY,EAChBC,OACAC,WACAC,cACAC,eACmB;AAanB,QACE,oBAAC,UAAD,EAAA,UACE,oBAAC,SAAD;EAAS,SAAQ;EAAU,MAAMF;EAAW,gBAAA;YAC1C,oBAAC,UAAD;GACE,MAAK;GACL,SAjBKT,kBAAkB;AAC7Ba,cAAUC,UACPC,UAAUP,MAAM,CAChBQ,WAAW;AACVN,kBAAa,KAAK;AAClBO,sBAAiBP,aAAa,MAAM,EAAE,IAAK;MAC3C,CACDQ,OAAOC,UAAmB;AACzBC,aAAQD,MAAM,0BAA0BA,MAAM;MAC9C;MACH,CAACX,OAAOE,aAAa,CAAC;GAQjB,WAAWX,QACT,0DACAY,YACE,oEACH;aAED,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,WAAWZ,QAAQ,wBAAwB;IAAC,CAAA;GAExC,CAAA;EACD,CAAA,EACO,CAAA;;AAStB,MAAasB,qBAAqB,EAChCC,WACAd,OACAe,UACAC,UACAC,eAAe,YACa;CAC5B,MAAM,CAACC,eAAeC,oBAAoB1B,SAAS,MAAM;CACzD,MAAM,CAAC2B,gBAAgBC,qBAAqB5B,SAAS,MAAM;CAC3D,MAAMU,WAAWT,cAAc,qCAAqC;AAEpE,QACE,oBAAC,WAAD;EAAW,WAAWH,QAAQ,QAAQ;YACnCwB,aAAa,UACZ,qBAAA,YAAA,EAAA,UAAA;GACE,qBAAC,OAAD;IACE,WAAWxB,QACT,4DACD;cAHH,CAKE,oBAAC,UAAD;KACauB;KACJd;KACP,UAAS;KACCgB;KACV,WAAWzB,QAAQ,SAAS;KAAC,CAAA,EAE9B0B,gBAAgBH,cAAcQ,KAAAA,KAAaR,cAAc,MACxD,oBAAC,UAAD;KACE,OAAOA;KACP,WAAWI;KACX,cAAcC;KACJhB;KAEb,CAAA,CACE;;GACL,oBAAC,OAAD,EAAK,WAAWZ,QAAQ,kCAAkC,EAAC,CAAA;GAC3D,qBAAC,OAAD;IACE,WAAWA,QACT,4DACD;cAHH,CAKE,oBAAC,UAAD;KACauB;KACJd;KACP,UAAS;KACCgB;KACV,WAAWzB,QAAQ,SAAS;KAAC,CAAA,EAE9B0B,gBAAgBjB,UAAU,MACzB,oBAAC,UAAD;KACSA;KACP,WAAWoB;KACX,cAAcC;KACJlB;KAEb,CAAA,CACE;;GACJ,EAAA,CAAA,GAEH,qBAAC,OAAD;GACE,WAAWZ,QACT,4DACD;aAHH,CAKE,oBAAC,UAAD;IACauB;IACJd;IACGe;IACAC;IACV,WAAWzB,QAAQ,SAAS;IAAC,CAAA,EAE9B0B,iBACGF,aAAa,aACbD,cAAcQ,KAAAA,KACdR,cAAc,MACbC,aAAa,cAAcf,UAAU,OACtC,oBAAC,UAAD;IACE,OAAOe,aAAa,YAAaD,aAAa,KAAMd;IACpD,WAAWkB;IACX,cAAcC;IACJhB;IAEb,CAAA,CAEN;;EACS,CAAA"}

package/dist/ui/components/input/subcomponent/input-diff.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/ui/components/input/subcomponent/input-diff.tsx
 const InputDiff = ({ children, className, ellipsis = true, multiline = false, rows = 3, hasPadding = false }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: twMerge("flex w-full items-center rounded-md font-sans text-sm/5 font-normal text-gray-700 dark:text-slate-200", "cursor-not-allowed border border-gray-300 bg-transparent px-3 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100", !multiline && ellipsis && "truncate [&>span]:truncate", hasPadding && "items-start py-2", className),
+		className: twMerge("flex w-full items-center rounded-md font-sans text-sm/5 font-normal text-foreground", "cursor-not-allowed border border-border bg-transparent px-3", !multiline && ellipsis && "truncate [&>span]:truncate", hasPadding && "items-start py-2", className),
 		style: { minHeight: multiline ? `${rows * 1.5}rem` : "2.25rem" },
 		children
 	});

package/dist/ui/components/input/subcomponent/input-diff.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-diff.js","names":["twMerge","InputDiff","children","className","ellipsis","multiline","rows","hasPadding","minHeight"],"sources":["../../../../../src/ui/components/input/subcomponent/input-diff.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\n\ninterface InputDiffProps {\n  children: React.ReactNode;\n  className?: string;\n  ellipsis?: boolean;\n  multiline?: boolean;\n  rows?: number;\n  hasPadding?: boolean;\n}\n\nexport const InputDiff = ({\n  children,\n  className,\n  ellipsis = true,\n  multiline = false,\n  rows = 3,\n  hasPadding = false,\n}: InputDiffProps) => {\n  return (\n    <div\n      className={twMerge(\n        \"flex w-full items-center rounded-md font-sans text-sm/5 font-normal text-gray-700 dark:text-slate-200\",\n        \"cursor-not-allowed border border-gray-300 bg-transparent px-3 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100\",\n        !multiline && ellipsis && \"truncate [&>span]:truncate\",\n        hasPadding && \"items-start py-2\",\n        className,\n      )}\n      style={{\n        minHeight: multiline ? `${rows * 1.5}rem` : \"2.25rem\",\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAWA,MAAaC,aAAa,EACxBC,UACAC,WACAC,WAAW,MACXC,YAAY,OACZC,OAAO,GACPC,aAAa,YACO;AACpB,QACE,oBAAC,OAAD;EACE,WAAWP,QACT,yGACA,6HACA,CAACK,aAAaD,YAAY,8BAC1BG,cAAc,oBACdJ,UACD;EACD,OAAO,EACLK,WAAWH,YAAY,GAAGC,OAAO,IAAG,OAAQ,WAC7C;EAEAJ;EACG,CAAA"}
+{"version":3,"file":"input-diff.js","names":["twMerge","InputDiff","children","className","ellipsis","multiline","rows","hasPadding","minHeight"],"sources":["../../../../../src/ui/components/input/subcomponent/input-diff.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\n\ninterface InputDiffProps {\n  children: React.ReactNode;\n  className?: string;\n  ellipsis?: boolean;\n  multiline?: boolean;\n  rows?: number;\n  hasPadding?: boolean;\n}\n\nexport const InputDiff = ({\n  children,\n  className,\n  ellipsis = true,\n  multiline = false,\n  rows = 3,\n  hasPadding = false,\n}: InputDiffProps) => {\n  return (\n    <div\n      className={twMerge(\n        \"flex w-full items-center rounded-md font-sans text-sm/5 font-normal text-foreground\",\n        \"cursor-not-allowed border border-border bg-transparent px-3\",\n        !multiline && ellipsis && \"truncate [&>span]:truncate\",\n        hasPadding && \"items-start py-2\",\n        className,\n      )}\n      style={{\n        minHeight: multiline ? `${rows * 1.5}rem` : \"2.25rem\",\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAWA,MAAaC,aAAa,EACxBC,UACAC,WACAC,WAAW,MACXC,YAAY,OACZC,OAAO,GACPC,aAAa,YACO;AACpB,QACE,oBAAC,OAAD;EACE,WAAWP,QACT,uFACA,+DACA,CAACK,aAAaD,YAAY,8BAC1BG,cAAc,oBACdJ,UACD;EACD,OAAO,EACLK,WAAWH,YAAY,GAAGC,OAAO,IAAG,OAAQ,WAC7C;EAEAJ;EACG,CAAA"}

package/dist/ui/components/input/subcomponent/text-diff.js

@@ -15,13 +15,13 @@ const TextDiff = ({ baseValue, value, viewMode, diffMode = "words", className, c
 		return wordsDiff.some((word) => word.added || word.removed);
 	}, [wordsDiff]);
 	return /* @__PURE__ */ jsx("span", {
-		className: twMerge("leading-[18px] text-gray-700 dark:text-slate-200", diffMode === "sentences" && hasChanges ? viewMode === "addition" ? "bg-green-600/30 dark:bg-green-600/30" : viewMode === "removal" ? "bg-red-600/30 dark:bg-red-300/30" : void 0 : void 0, className),
+		className: twMerge("leading-[18px] text-foreground", diffMode === "sentences" && hasChanges ? viewMode === "addition" ? "bg-success/10" : viewMode === "removal" ? "bg-destructive/10" : void 0 : void 0, className),
 		children: wordsDiff.map((word, index) => {
 			return word.added ? viewMode === "addition" || viewMode === "mixed" ? /* @__PURE__ */ jsx("span", {
-				className: twMerge((diffMode === "words" || viewMode === "mixed") && "bg-green-600/30 dark:bg-green-600/30", childrenClassName),
+				className: twMerge((diffMode === "words" || viewMode === "mixed") && "bg-success/10", childrenClassName),
 				children: word.value
 			}, `${word.value}-${index}`) : null : word.removed ? viewMode === "removal" || viewMode === "mixed" ? /* @__PURE__ */ jsx("span", {
-				className: twMerge((diffMode === "words" || viewMode === "mixed") && "bg-red-600/30 dark:bg-red-300/30", childrenClassName),
+				className: twMerge((diffMode === "words" || viewMode === "mixed") && "bg-destructive/10", childrenClassName),
 				children: word.value
 			}, `${word.value}-${index}`) : null : /* @__PURE__ */ jsx("span", {
 				className: twMerge(childrenClassName),

package/dist/ui/components/input/subcomponent/text-diff.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-diff.js","names":["twMerge","diffSentences","diffWords","useMemo","TextDiff","baseValue","value","viewMode","diffMode","className","childrenClassName","wordsDiff","hasChanges","some","word","added","removed","bgColor","undefined","map","index"],"sources":["../../../../../src/ui/components/input/subcomponent/text-diff.tsx"],"sourcesContent":["import type { WithDifference } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport { diffSentences, diffWords } from \"diff\";\nimport { useMemo } from \"react\";\n\ninterface TextDiffProps extends WithDifference<string> {\n  value: string;\n  className?: string;\n  childrenClassName?: string;\n}\n\nexport const TextDiff = ({\n  baseValue,\n  value,\n  viewMode,\n  diffMode = \"words\",\n  className,\n  childrenClassName,\n}: TextDiffProps) => {\n  const wordsDiff = useMemo(() => {\n    return diffMode === \"words\"\n      ? diffWords(baseValue ?? \"\", value)\n      : diffSentences(baseValue ?? \"\", value);\n  }, [baseValue, value, diffMode]);\n\n  const hasChanges = useMemo(() => {\n    return wordsDiff.some((word) => word.added || word.removed);\n  }, [wordsDiff]);\n\n  const bgColor =\n    diffMode === \"sentences\" && hasChanges\n      ? viewMode === \"addition\"\n        ? \"bg-green-600/30 dark:bg-green-600/30\"\n        : viewMode === \"removal\"\n          ? \"bg-red-600/30 dark:bg-red-300/30\"\n          : undefined\n      : undefined;\n\n  return (\n    <span\n      className={twMerge(\n        \"leading-[18px] text-gray-700 dark:text-slate-200\",\n        bgColor,\n        className,\n      )}\n    >\n      {wordsDiff.map((word, index) => {\n        return word.added ? (\n          viewMode === \"addition\" || viewMode === \"mixed\" ? (\n            <span\n              className={twMerge(\n                (diffMode === \"words\" || viewMode === \"mixed\") &&\n                  \"bg-green-600/30 dark:bg-green-600/30\",\n                childrenClassName,\n              )}\n              key={`${word.value}-${index}`}\n            >\n              {word.value}\n            </span>\n          ) : null\n        ) : word.removed ? (\n          viewMode === \"removal\" || viewMode === \"mixed\" ? (\n            <span\n              className={twMerge(\n                (diffMode === \"words\" || viewMode === \"mixed\") &&\n                  \"bg-red-600/30 dark:bg-red-300/30\",\n                childrenClassName,\n              )}\n              key={`${word.value}-${index}`}\n            >\n              {word.value}\n            </span>\n          ) : null\n        ) : (\n          <span\n            key={`${word.value}-${index}`}\n            className={twMerge(childrenClassName)}\n          >\n            {word.value}\n          </span>\n        );\n      })}\n    </span>\n  );\n};\n"],"mappings":";;;;;AAWA,MAAaI,YAAY,EACvBC,WACAC,OACAC,UACAC,WAAW,SACXC,WACAC,wBACmB;CACnB,MAAMC,YAAYR,cAAc;AAC9B,SAAOK,aAAa,UAChBN,UAAUG,aAAa,IAAIC,MAAM,GACjCL,cAAcI,aAAa,IAAIC,MAAM;IACxC;EAACD;EAAWC;EAAOE;EAAS,CAAC;CAEhC,MAAMI,aAAaT,cAAc;AAC/B,SAAOQ,UAAUE,MAAMC,SAASA,KAAKC,SAASD,KAAKE,QAAQ;IAC1D,CAACL,UAAU,CAAC;AAWf,QACE,oBAAC,QAAD;EACE,WAAWX,QACT,oDAXJQ,aAAa,eAAeI,aACxBL,aAAa,aACX,yCACAA,aAAa,YACX,qCACAW,KAAAA,IACJA,KAAAA,GAOAT,UACD;YAEAE,UAAUQ,KAAKL,MAAMM,UAAU;AAC9B,UAAON,KAAKC,QACVR,aAAa,cAAcA,aAAa,UACtC,oBAAC,QAAD;IACE,WAAWP,SACRQ,aAAa,WAAWD,aAAa,YACpC,wCACFG,kBACD;cAGAI,KAAKR;IACD,EAHA,GAAGQ,KAAKR,MAAK,GAAIc,QAGjB,GACL,OACFN,KAAKE,UACPT,aAAa,aAAaA,aAAa,UACrC,oBAAC,QAAD;IACE,WAAWP,SACRQ,aAAa,WAAWD,aAAa,YACpC,oCACFG,kBACD;cAGAI,KAAKR;IACD,EAHA,GAAGQ,KAAKR,MAAK,GAAIc,QAGjB,GACL,OAEJ,oBAAC,QAAD;IAEE,WAAWpB,QAAQU,kBAAkB;cAEpCI,KAAKR;IAET,EALQ,GAAGQ,KAAKR,MAAK,GAAIc,QAKzB;IACD;EACG,CAAA"}
+{"version":3,"file":"text-diff.js","names":["twMerge","diffSentences","diffWords","useMemo","TextDiff","baseValue","value","viewMode","diffMode","className","childrenClassName","wordsDiff","hasChanges","some","word","added","removed","bgColor","undefined","map","index"],"sources":["../../../../../src/ui/components/input/subcomponent/text-diff.tsx"],"sourcesContent":["import type { WithDifference } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport { diffSentences, diffWords } from \"diff\";\nimport { useMemo } from \"react\";\n\ninterface TextDiffProps extends WithDifference<string> {\n  value: string;\n  className?: string;\n  childrenClassName?: string;\n}\n\nexport const TextDiff = ({\n  baseValue,\n  value,\n  viewMode,\n  diffMode = \"words\",\n  className,\n  childrenClassName,\n}: TextDiffProps) => {\n  const wordsDiff = useMemo(() => {\n    return diffMode === \"words\"\n      ? diffWords(baseValue ?? \"\", value)\n      : diffSentences(baseValue ?? \"\", value);\n  }, [baseValue, value, diffMode]);\n\n  const hasChanges = useMemo(() => {\n    return wordsDiff.some((word) => word.added || word.removed);\n  }, [wordsDiff]);\n\n  const bgColor =\n    diffMode === \"sentences\" && hasChanges\n      ? viewMode === \"addition\"\n        ? \"bg-success/10\"\n        : viewMode === \"removal\"\n          ? \"bg-destructive/10\"\n          : undefined\n      : undefined;\n\n  return (\n    <span\n      className={twMerge(\"leading-[18px] text-foreground\", bgColor, className)}\n    >\n      {wordsDiff.map((word, index) => {\n        return word.added ? (\n          viewMode === \"addition\" || viewMode === \"mixed\" ? (\n            <span\n              className={twMerge(\n                (diffMode === \"words\" || viewMode === \"mixed\") &&\n                  \"bg-success/10\",\n                childrenClassName,\n              )}\n              key={`${word.value}-${index}`}\n            >\n              {word.value}\n            </span>\n          ) : null\n        ) : word.removed ? (\n          viewMode === \"removal\" || viewMode === \"mixed\" ? (\n            <span\n              className={twMerge(\n                (diffMode === \"words\" || viewMode === \"mixed\") &&\n                  \"bg-destructive/10\",\n                childrenClassName,\n              )}\n              key={`${word.value}-${index}`}\n            >\n              {word.value}\n            </span>\n          ) : null\n        ) : (\n          <span\n            key={`${word.value}-${index}`}\n            className={twMerge(childrenClassName)}\n          >\n            {word.value}\n          </span>\n        );\n      })}\n    </span>\n  );\n};\n"],"mappings":";;;;;AAWA,MAAaI,YAAY,EACvBC,WACAC,OACAC,UACAC,WAAW,SACXC,WACAC,wBACmB;CACnB,MAAMC,YAAYR,cAAc;AAC9B,SAAOK,aAAa,UAChBN,UAAUG,aAAa,IAAIC,MAAM,GACjCL,cAAcI,aAAa,IAAIC,MAAM;IACxC;EAACD;EAAWC;EAAOE;EAAS,CAAC;CAEhC,MAAMI,aAAaT,cAAc;AAC/B,SAAOQ,UAAUE,MAAMC,SAASA,KAAKC,SAASD,KAAKE,QAAQ;IAC1D,CAACL,UAAU,CAAC;AAWf,QACE,oBAAC,QAAD;EACE,WAAWX,QAAQ,kCAVrBQ,aAAa,eAAeI,aACxBL,aAAa,aACX,kBACAA,aAAa,YACX,sBACAW,KAAAA,IACJA,KAAAA,GAI4DT,UAAU;YAEvEE,UAAUQ,KAAKL,MAAMM,UAAU;AAC9B,UAAON,KAAKC,QACVR,aAAa,cAAcA,aAAa,UACtC,oBAAC,QAAD;IACE,WAAWP,SACRQ,aAAa,WAAWD,aAAa,YACpC,iBACFG,kBACD;cAGAI,KAAKR;IACD,EAHA,GAAGQ,KAAKR,MAAK,GAAIc,QAGjB,GACL,OACFN,KAAKE,UACPT,aAAa,aAAaA,aAAa,UACrC,oBAAC,QAAD;IACE,WAAWP,SACRQ,aAAa,WAAWD,aAAa,YACpC,qBACFG,kBACD;cAGAI,KAAKR;IACD,EAHA,GAAGQ,KAAKR,MAAK,GAAIc,QAGjB,GACL,OAEJ,oBAAC,QAAD;IAEE,WAAWpB,QAAQU,kBAAkB;cAEpCI,KAAKR;IAET,EALQ,GAAGQ,KAAKR,MAAK,GAAIc,QAKzB;IACD;EACG,CAAA"}

package/dist/ui/components/json-viewer/json-viewer.js

@@ -1,4 +1,5 @@
 import { Suspense, lazy } from "react";
+import { twMerge } from "tailwind-merge";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/components/json-viewer/json-viewer.tsx
 const styles = {
@@ -64,11 +65,11 @@ const _defaultStyles = {
 };
 const defaultStyles = {
 	..._defaultStyles,
-	container: `${_defaultStyles.container} !bg-transparent`,
-	label: `${_defaultStyles.label} !text-gray-600`,
-	punctuation: `${_defaultStyles.punctuation} !text-gray-700 !font-semibold`,
-	collapseIcon: `${_defaultStyles.collapseIcon} !text-gray-600`,
-	stringValue: `${_defaultStyles.stringValue} !text-gray-600`
+	container: twMerge(_defaultStyles.container, "bg-transparent!"),
+	label: twMerge(_defaultStyles.label, "text-muted-foreground!"),
+	punctuation: twMerge(_defaultStyles.punctuation, "font-semibold! text-foreground!"),
+	collapseIcon: twMerge(_defaultStyles.collapseIcon, "text-muted-foreground!"),
+	stringValue: twMerge(_defaultStyles.stringValue, "text-muted-foreground!")
 };
 const allExpanded = () => true;
 const JsonView = /* @__PURE__ */ lazy(() => import("react-json-view-lite").then((m) => ({ default: m.JsonView })));

package/dist/ui/components/json-viewer/json-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"json-viewer.js","names":["lazy","Suspense","styles","pointer","defaultAriaLables","collapseJson","expandJson","_defaultStyles","container","basicChildStyle","childFieldsContainer","label","clickableLabel","nullValue","undefinedValue","stringValue","booleanValue","numberValue","otherValue","punctuation","collapseIcon","expandIcon","collapsedContent","noQuotesForStringValues","quotesForFieldNames","ariaLables","stringifyStringValues","defaultStyles","allExpanded","JsonView","then","m","default","JsonViewer","props","shouldExpandNode","style"],"sources":["../../../../src/ui/components/json-viewer/json-viewer.tsx"],"sourcesContent":["import { lazy, Suspense } from \"react\";\nimport type { Props } from \"react-json-view-lite\";\n\n// copied from react-json-view-lite to allow lazy loading the component itself\nconst styles = {\n  \"container-base\": \"_GzYRV\",\n  \"punctuation-base\": \"_3eOF8\",\n  pointer: \"_1MFti\",\n  \"expander-base\": \"_f10Tu _1MFti\",\n  \"expand-icon\": \"_1UmXx\",\n  \"collapse-icon\": \"_1LId0\",\n  \"collapsed-content-base\": \"_1pNG9 _1MFti\",\n  \"container-light\": \"_2IvMF _GzYRV\",\n  \"basic-element-style\": \"_2bkNM\",\n  \"child-fields-container\": \"_1BXBN\",\n  \"label-light\": \"_1MGIk\",\n  \"clickable-label-light\": \"_2YKJg _1MGIk _1MFti\",\n  \"punctuation-light\": \"_3uHL6 _3eOF8\",\n  \"value-null-light\": \"_2T6PJ\",\n  \"value-undefined-light\": \"_1Gho6\",\n  \"value-string-light\": \"_vGjyY\",\n  \"value-number-light\": \"_1bQdo\",\n  \"value-boolean-light\": \"_3zQKs\",\n  \"value-other-light\": \"_1xvuR\",\n  \"collapse-icon-light\": \"_oLqym _f10Tu _1MFti _1LId0\",\n  \"expand-icon-light\": \"_2AXVT _f10Tu _1MFti _1UmXx\",\n  \"collapsed-content-light\": \"_2KJWg _1pNG9 _1MFti\",\n  \"container-dark\": \"_11RoI _GzYRV\",\n  \"expand-icon-dark\": \"_17H2C _f10Tu _1MFti _1UmXx\",\n  \"collapse-icon-dark\": \"_3QHg2 _f10Tu _1MFti _1LId0\",\n  \"collapsed-content-dark\": \"_3fDAz _1pNG9 _1MFti\",\n  \"label-dark\": \"_2bSDX\",\n  \"clickable-label-dark\": \"_1RQEj _2bSDX _1MFti\",\n  \"punctuation-dark\": \"_gsbQL _3eOF8\",\n  \"value-null-dark\": \"_LaAZe\",\n  \"value-undefined-dark\": \"_GTKgm\",\n  \"value-string-dark\": \"_Chy1W\",\n  \"value-number-dark\": \"_2bveF\",\n  \"value-boolean-dark\": \"_2vRm-\",\n  \"value-other-dark\": \"_1prJR\",\n};\nconst defaultAriaLables = {\n  collapseJson: \"collapse JSON\",\n  expandJson: \"expand JSON\",\n};\nconst _defaultStyles = {\n  container: styles[\"container-light\"],\n  basicChildStyle: styles[\"basic-element-style\"],\n  childFieldsContainer: styles[\"child-fields-container\"],\n  label: styles[\"label-light\"],\n  clickableLabel: styles[\"clickable-label-light\"],\n  nullValue: styles[\"value-null-light\"],\n  undefinedValue: styles[\"value-undefined-light\"],\n  stringValue: styles[\"value-string-light\"],\n  booleanValue: styles[\"value-boolean-light\"],\n  numberValue: styles[\"value-number-light\"],\n  otherValue: styles[\"value-other-light\"],\n  punctuation: styles[\"punctuation-light\"],\n  collapseIcon: styles[\"collapse-icon-light\"],\n  expandIcon: styles[\"expand-icon-light\"],\n  collapsedContent: styles[\"collapsed-content-light\"],\n  noQuotesForStringValues: false,\n  quotesForFieldNames: false,\n  ariaLables: defaultAriaLables,\n  stringifyStringValues: false,\n};\nconst defaultStyles = {\n  ..._defaultStyles,\n  container: `${_defaultStyles.container} !bg-transparent`,\n  label: `${_defaultStyles.label} !text-gray-600`,\n  punctuation: `${_defaultStyles.punctuation} !text-gray-700 !font-semibold`,\n  collapseIcon: `${_defaultStyles.collapseIcon} !text-gray-600`,\n  stringValue: `${_defaultStyles.stringValue} !text-gray-600`,\n};\n\nconst allExpanded = () => true;\n\nconst JsonView = lazy(() =>\n  import(\"react-json-view-lite\").then((m) => ({ default: m.JsonView })),\n);\n\nexport function JsonViewer(props: Props) {\n  return (\n    <Suspense>\n      <JsonView\n        {...props}\n        shouldExpandNode={props.shouldExpandNode ?? allExpanded}\n        style={props.style ?? defaultStyles}\n      />\n    </Suspense>\n  );\n}\n"],"mappings":";;;AAIA,MAAME,SAAS;CACb,kBAAkB;CAClB,oBAAoB;CACpBC,SAAS;CACT,iBAAiB;CACjB,eAAe;CACf,iBAAiB;CACjB,0BAA0B;CAC1B,mBAAmB;CACnB,uBAAuB;CACvB,0BAA0B;CAC1B,eAAe;CACf,yBAAyB;CACzB,qBAAqB;CACrB,oBAAoB;CACpB,yBAAyB;CACzB,sBAAsB;CACtB,sBAAsB;CACtB,uBAAuB;CACvB,qBAAqB;CACrB,uBAAuB;CACvB,qBAAqB;CACrB,2BAA2B;CAC3B,kBAAkB;CAClB,oBAAoB;CACpB,sBAAsB;CACtB,0BAA0B;CAC1B,cAAc;CACd,wBAAwB;CACxB,oBAAoB;CACpB,mBAAmB;CACnB,wBAAwB;CACxB,qBAAqB;CACrB,qBAAqB;CACrB,sBAAsB;CACtB,oBAAoB;CACrB;AAKD,MAAMI,iBAAiB;CACrBC,WAAWN,OAAO;CAClBO,iBAAiBP,OAAO;CACxBQ,sBAAsBR,OAAO;CAC7BS,OAAOT,OAAO;CACdU,gBAAgBV,OAAO;CACvBW,WAAWX,OAAO;CAClBY,gBAAgBZ,OAAO;CACvBa,aAAab,OAAO;CACpBc,cAAcd,OAAO;CACrBe,aAAaf,OAAO;CACpBgB,YAAYhB,OAAO;CACnBiB,aAAajB,OAAO;CACpBkB,cAAclB,OAAO;CACrBmB,YAAYnB,OAAO;CACnBoB,kBAAkBpB,OAAO;CACzBqB,yBAAyB;CACzBC,qBAAqB;CACrBC,YAtBwB;EACxBpB,cAAc;EACdC,YAAY;EACb;CAoBCoB,uBAAuB;CACxB;AACD,MAAMC,gBAAgB;CACpB,GAAGpB;CACHC,WAAW,GAAGD,eAAeC,UAAS;CACtCG,OAAO,GAAGJ,eAAeI,MAAK;CAC9BQ,aAAa,GAAGZ,eAAeY,YAAW;CAC1CC,cAAc,GAAGb,eAAea,aAAY;CAC5CL,aAAa,GAAGR,eAAeQ,YAAW;CAC3C;AAED,MAAMa,oBAAoB;AAE1B,MAAMC,WAAW7B,2BACf,OAAO,wBAAwB8B,MAAMC,OAAO,EAAEC,SAASD,EAAEF,UAAU,EACrE,CAAC;AAED,SAAgBI,WAAWC,OAAc;AACvC,QACE,oBAAC,UAAD,EAAA,UACE,oBAAC,UAAD;EACE,GAAIA;EACJ,kBAAkBA,MAAMC,oBAAoBP;EAC5C,OAAOM,MAAME,SAAST;EAAc,CAAA,EAE7B,CAAA"}
+{"version":3,"file":"json-viewer.js","names":["lazy","Suspense","twMerge","styles","pointer","defaultAriaLables","collapseJson","expandJson","_defaultStyles","container","basicChildStyle","childFieldsContainer","label","clickableLabel","nullValue","undefinedValue","stringValue","booleanValue","numberValue","otherValue","punctuation","collapseIcon","expandIcon","collapsedContent","noQuotesForStringValues","quotesForFieldNames","ariaLables","stringifyStringValues","defaultStyles","allExpanded","JsonView","then","m","default","JsonViewer","props","shouldExpandNode","style"],"sources":["../../../../src/ui/components/json-viewer/json-viewer.tsx"],"sourcesContent":["import { lazy, Suspense } from \"react\";\nimport type { Props } from \"react-json-view-lite\";\nimport { twMerge } from \"tailwind-merge\";\n\n// copied from react-json-view-lite to allow lazy loading the component itself\nconst styles = {\n  \"container-base\": \"_GzYRV\",\n  \"punctuation-base\": \"_3eOF8\",\n  pointer: \"_1MFti\",\n  \"expander-base\": \"_f10Tu _1MFti\",\n  \"expand-icon\": \"_1UmXx\",\n  \"collapse-icon\": \"_1LId0\",\n  \"collapsed-content-base\": \"_1pNG9 _1MFti\",\n  \"container-light\": \"_2IvMF _GzYRV\",\n  \"basic-element-style\": \"_2bkNM\",\n  \"child-fields-container\": \"_1BXBN\",\n  \"label-light\": \"_1MGIk\",\n  \"clickable-label-light\": \"_2YKJg _1MGIk _1MFti\",\n  \"punctuation-light\": \"_3uHL6 _3eOF8\",\n  \"value-null-light\": \"_2T6PJ\",\n  \"value-undefined-light\": \"_1Gho6\",\n  \"value-string-light\": \"_vGjyY\",\n  \"value-number-light\": \"_1bQdo\",\n  \"value-boolean-light\": \"_3zQKs\",\n  \"value-other-light\": \"_1xvuR\",\n  \"collapse-icon-light\": \"_oLqym _f10Tu _1MFti _1LId0\",\n  \"expand-icon-light\": \"_2AXVT _f10Tu _1MFti _1UmXx\",\n  \"collapsed-content-light\": \"_2KJWg _1pNG9 _1MFti\",\n  \"container-dark\": \"_11RoI _GzYRV\",\n  \"expand-icon-dark\": \"_17H2C _f10Tu _1MFti _1UmXx\",\n  \"collapse-icon-dark\": \"_3QHg2 _f10Tu _1MFti _1LId0\",\n  \"collapsed-content-dark\": \"_3fDAz _1pNG9 _1MFti\",\n  \"label-dark\": \"_2bSDX\",\n  \"clickable-label-dark\": \"_1RQEj _2bSDX _1MFti\",\n  \"punctuation-dark\": \"_gsbQL _3eOF8\",\n  \"value-null-dark\": \"_LaAZe\",\n  \"value-undefined-dark\": \"_GTKgm\",\n  \"value-string-dark\": \"_Chy1W\",\n  \"value-number-dark\": \"_2bveF\",\n  \"value-boolean-dark\": \"_2vRm-\",\n  \"value-other-dark\": \"_1prJR\",\n};\nconst defaultAriaLables = {\n  collapseJson: \"collapse JSON\",\n  expandJson: \"expand JSON\",\n};\nconst _defaultStyles = {\n  container: styles[\"container-light\"],\n  basicChildStyle: styles[\"basic-element-style\"],\n  childFieldsContainer: styles[\"child-fields-container\"],\n  label: styles[\"label-light\"],\n  clickableLabel: styles[\"clickable-label-light\"],\n  nullValue: styles[\"value-null-light\"],\n  undefinedValue: styles[\"value-undefined-light\"],\n  stringValue: styles[\"value-string-light\"],\n  booleanValue: styles[\"value-boolean-light\"],\n  numberValue: styles[\"value-number-light\"],\n  otherValue: styles[\"value-other-light\"],\n  punctuation: styles[\"punctuation-light\"],\n  collapseIcon: styles[\"collapse-icon-light\"],\n  expandIcon: styles[\"expand-icon-light\"],\n  collapsedContent: styles[\"collapsed-content-light\"],\n  noQuotesForStringValues: false,\n  quotesForFieldNames: false,\n  ariaLables: defaultAriaLables,\n  stringifyStringValues: false,\n};\nconst defaultStyles = {\n  ..._defaultStyles,\n  container: twMerge(_defaultStyles.container, \"bg-transparent!\"),\n  label: twMerge(_defaultStyles.label, \"text-muted-foreground!\"),\n  punctuation: twMerge(\n    _defaultStyles.punctuation,\n    \"font-semibold! text-foreground!\",\n  ),\n  collapseIcon: twMerge(_defaultStyles.collapseIcon, \"text-muted-foreground!\"),\n  stringValue: twMerge(_defaultStyles.stringValue, \"text-muted-foreground!\"),\n};\n\nconst allExpanded = () => true;\n\nconst JsonView = lazy(() =>\n  import(\"react-json-view-lite\").then((m) => ({ default: m.JsonView })),\n);\n\nexport function JsonViewer(props: Props) {\n  return (\n    <Suspense>\n      <JsonView\n        {...props}\n        shouldExpandNode={props.shouldExpandNode ?? allExpanded}\n        style={props.style ?? defaultStyles}\n      />\n    </Suspense>\n  );\n}\n"],"mappings":";;;;AAKA,MAAMG,SAAS;CACb,kBAAkB;CAClB,oBAAoB;CACpBC,SAAS;CACT,iBAAiB;CACjB,eAAe;CACf,iBAAiB;CACjB,0BAA0B;CAC1B,mBAAmB;CACnB,uBAAuB;CACvB,0BAA0B;CAC1B,eAAe;CACf,yBAAyB;CACzB,qBAAqB;CACrB,oBAAoB;CACpB,yBAAyB;CACzB,sBAAsB;CACtB,sBAAsB;CACtB,uBAAuB;CACvB,qBAAqB;CACrB,uBAAuB;CACvB,qBAAqB;CACrB,2BAA2B;CAC3B,kBAAkB;CAClB,oBAAoB;CACpB,sBAAsB;CACtB,0BAA0B;CAC1B,cAAc;CACd,wBAAwB;CACxB,oBAAoB;CACpB,mBAAmB;CACnB,wBAAwB;CACxB,qBAAqB;CACrB,qBAAqB;CACrB,sBAAsB;CACtB,oBAAoB;CACrB;AAKD,MAAMI,iBAAiB;CACrBC,WAAWN,OAAO;CAClBO,iBAAiBP,OAAO;CACxBQ,sBAAsBR,OAAO;CAC7BS,OAAOT,OAAO;CACdU,gBAAgBV,OAAO;CACvBW,WAAWX,OAAO;CAClBY,gBAAgBZ,OAAO;CACvBa,aAAab,OAAO;CACpBc,cAAcd,OAAO;CACrBe,aAAaf,OAAO;CACpBgB,YAAYhB,OAAO;CACnBiB,aAAajB,OAAO;CACpBkB,cAAclB,OAAO;CACrBmB,YAAYnB,OAAO;CACnBoB,kBAAkBpB,OAAO;CACzBqB,yBAAyB;CACzBC,qBAAqB;CACrBC,YAtBwB;EACxBpB,cAAc;EACdC,YAAY;EACb;CAoBCoB,uBAAuB;CACxB;AACD,MAAMC,gBAAgB;CACpB,GAAGpB;CACHC,WAAWP,QAAQM,eAAeC,WAAW,kBAAkB;CAC/DG,OAAOV,QAAQM,eAAeI,OAAO,yBAAyB;CAC9DQ,aAAalB,QACXM,eAAeY,aACf,kCACD;CACDC,cAAcnB,QAAQM,eAAea,cAAc,yBAAyB;CAC5EL,aAAad,QAAQM,eAAeQ,aAAa,yBAAwB;CAC1E;AAED,MAAMa,oBAAoB;AAE1B,MAAMC,WAAW9B,2BACf,OAAO,wBAAwB+B,MAAMC,OAAO,EAAEC,SAASD,EAAEF,UAAU,EACrE,CAAC;AAED,SAAgBI,WAAWC,OAAc;AACvC,QACE,oBAAC,UAAD,EAAA,UACE,oBAAC,UAAD;EACE,GAAIA;EACJ,kBAAkBA,MAAMC,oBAAoBP;EAC5C,OAAOM,MAAME,SAAST;EAAc,CAAA,EAE7B,CAAA"}

package/dist/ui/components/popover/popover.js

@@ -15,7 +15,7 @@ const PopoverContent = /* @__PURE__ */ React.forwardRef(({ align = "center", sid
 		"data-[side=bottom]:animate-slide-in-from-top data-[side=left]:animate-slide-in-from-right",
 		"data-[side=right]:animate-slide-in-from-left data-[side=top]:animate-slide-in-from-bottom",
 		"z-50 w-(--radix-popover-trigger-width) border p-0 outline-none",
-		"border-gray-300 bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100",
+		"border-border bg-popover text-popover-foreground",
 		"rounded-md shadow-sidebar"
 	], className),
 	ref,

package/dist/ui/components/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["twMerge","PopoverPrimitive","React","Popover","Root","PopoverAnchor","Anchor","PopoverTrigger","Trigger","PopoverContent","forwardRef","align","sideOffset","className","props","ref"],"sources":["../../../../src/ui/components/popover/popover.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport React from \"react\";\n\nexport const Popover = PopoverPrimitive.Root;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\n\nexport const PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ align = \"center\", sideOffset = 4, className, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      align={align}\n      sideOffset={sideOffset}\n      className={twMerge(\n        [\n          \"data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in\",\n          \"data-[state=closed]:animate-zoom-out data-[state=open]:animate-zoom-in\",\n          \"data-[side=bottom]:animate-slide-in-from-top data-[side=left]:animate-slide-in-from-right\",\n          \"data-[side=right]:animate-slide-in-from-left data-[side=top]:animate-slide-in-from-bottom\",\n          \"z-50 w-(--radix-popover-trigger-width) border p-0 outline-none\",\n          \"border-gray-300 bg-gray-50 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100\",\n          \"rounded-md shadow-sidebar\",\n        ],\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n));\n"],"mappings":";;;;;AAIA,MAAaG,UAAUF,iBAAiBG;AACxC,MAAaC,gBAAgBJ,iBAAiBK;AAC9C,MAAaC,iBAAiBN,iBAAiBO;AAE/C,MAAaC,iBAAiBP,sBAAMQ,YAGjC,EAAEC,QAAQ,UAAUC,aAAa,GAAGC,WAAW,GAAGC,SAASC,QAC5D,oBAAC,iBAAiB,QAAlB,EAAA,UACE,oBAAC,iBAAiB,SAAlB;CACSJ;CACKC;CACZ,WAAWZ,QACT;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,EACDa,UACD;CACIE;CACL,GAAID;CAAM,CAAA,EAGf,CAAA,CAAC"}
+{"version":3,"file":"popover.js","names":["twMerge","PopoverPrimitive","React","Popover","Root","PopoverAnchor","Anchor","PopoverTrigger","Trigger","PopoverContent","forwardRef","align","sideOffset","className","props","ref"],"sources":["../../../../src/ui/components/popover/popover.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport React from \"react\";\n\nexport const Popover = PopoverPrimitive.Root;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\n\nexport const PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ align = \"center\", sideOffset = 4, className, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      align={align}\n      sideOffset={sideOffset}\n      className={twMerge(\n        [\n          \"data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in\",\n          \"data-[state=closed]:animate-zoom-out data-[state=open]:animate-zoom-in\",\n          \"data-[side=bottom]:animate-slide-in-from-top data-[side=left]:animate-slide-in-from-right\",\n          \"data-[side=right]:animate-slide-in-from-left data-[side=top]:animate-slide-in-from-bottom\",\n          \"z-50 w-(--radix-popover-trigger-width) border p-0 outline-none\",\n          \"border-border bg-popover text-popover-foreground\",\n          \"rounded-md shadow-sidebar\",\n        ],\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n));\n"],"mappings":";;;;;AAIA,MAAaG,UAAUF,iBAAiBG;AACxC,MAAaC,gBAAgBJ,iBAAiBK;AAC9C,MAAaC,iBAAiBN,iBAAiBO;AAE/C,MAAaC,iBAAiBP,sBAAMQ,YAGjC,EAAEC,QAAQ,UAAUC,aAAa,GAAGC,WAAW,GAAGC,SAASC,QAC5D,oBAAC,iBAAiB,QAAlB,EAAA,UACE,oBAAC,iBAAiB,SAAlB;CACSJ;CACKC;CACZ,WAAWZ,QACT;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,EACDa,UACD;CACIE;CACL,GAAID;CAAM,CAAA,EAGf,CAAA,CAAC"}

package/dist/ui/components/radio-group-field/radio-group-field.d.ts

@@ -1,2 +1,2 @@
-import { n as RadioGroupFieldProps, t as RadioGroupField } from "../../../radio-group-field-wlqeiLN3.js";
+import { n as RadioGroupFieldProps, t as RadioGroupField } from "../../../radio-group-field-BN654-SO.js";
 export { RadioGroupField, RadioGroupFieldProps };

package/dist/ui/components/radio-group-field/radio.js

@@ -10,15 +10,15 @@ const Radio = /* @__PURE__ */ React.forwardRef(({ className, description, disabl
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
 		"aria-disabled": disabled,
 		"aria-invalid": hasError,
-		className: twMerge("group peer", "aspect-square size-4 rounded-full border border-gray-800 dark:border-slate-100", "hover:border-gray-900 dark:hover:border-slate-50", disabled && ["cursor-not-allowed border-gray-600 hover:border-gray-600 dark:border-slate-300 dark:hover:border-slate-300", "dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:border-slate-500 dark:hover:bg-slate-600 dark:hover:text-slate-100"], hasError && ["border-red-700 hover:border-red-900 dark:border-red-200 dark:hover:border-red-50", "dark:border-red-700 dark:hover:border-red-900"], className),
+		className: twMerge("group peer", "aspect-square size-4 rounded-full border border-foreground", "hover:hover-effect", disabled && ["cursor-not-allowed border-border", ""], hasError && ["border-destructive", ""], className),
 		disabled,
 		id,
 		value,
 		...props,
 		ref,
-		children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: twMerge("relative flex size-full items-center justify-center", "after:absolute after:top-1/2 after:left-1/2 after:size-2.5", "after:-translate-1/2", "after:rounded-full after:bg-gray-800 after:content-[''] dark:after:bg-slate-100", "dark:after:bg-slate-400", !disabled && ["group-hover:after:bg-gray-900 dark:group-hover:after:bg-slate-50", "dark:group-hover:after:bg-slate-50"], disabled && ["after:bg-gray-600 dark:after:bg-slate-300", "dark:after:bg-slate-600 dark:after:text-slate-100"]) })
+		children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: twMerge("relative flex size-full items-center justify-center", "after:absolute after:top-1/2 after:left-1/2 after:size-2.5", "after:-translate-1/2", "after:rounded-full after:bg-primary after:content-['']", "", !disabled && ["group-hover:after:hover-effect dark:group-hover:after:hover-effect", "dark:group-hover:after:hover-effect"], disabled && ["after:bg-muted-foreground", ""]) })
 	}), /* @__PURE__ */ jsx(FormLabel, {
-		className: twMerge(!disabled && !hasError && ["cursor-pointer", "peer-hover:text-gray-900 dark:peer-hover:text-slate-50"]),
+		className: twMerge(!disabled && !hasError && ["cursor-pointer", "peer-hover:hover-effect dark:peer-hover:hover-effect"]),
 		description,
 		disabled,
 		hasError,

package/dist/ui/components/radio-group-field/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":["twMerge","RadioGroupPrimitive","React","useId","FormLabel","Radio","forwardRef","className","description","disabled","hasError","id","propId","label","value","props","ref","prefix","required"],"sources":["../../../../src/ui/components/radio-group-field/radio.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport React, { useId } from \"react\";\nimport { FormLabel } from \"../form-label/form-label.js\";\n\nexport interface RadioProps extends React.ComponentPropsWithoutRef<\n  typeof RadioGroupPrimitive.Item\n> {\n  className?: string;\n  description?: string;\n  disabled?: boolean;\n  hasError?: boolean;\n  id?: string;\n  label: string;\n  value: string;\n}\n\nexport const Radio = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  RadioProps\n>(\n  (\n    {\n      className,\n      description,\n      disabled = false,\n      hasError = false,\n      id: propId,\n      label,\n      value,\n      ...props\n    },\n    ref,\n  ) => {\n    const prefix = useId();\n    const id = propId ?? `${prefix}-radio`;\n\n    return (\n      <>\n        <RadioGroupPrimitive.Item\n          aria-disabled={disabled}\n          aria-invalid={hasError}\n          className={twMerge(\n            \"group peer\",\n            \"aspect-square size-4 rounded-full border border-gray-800 dark:border-slate-100\",\n            \"hover:border-gray-900 dark:hover:border-slate-50\",\n            disabled && [\n              \"cursor-not-allowed border-gray-600 hover:border-gray-600 dark:border-slate-300 dark:hover:border-slate-300\",\n              \"dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100 dark:hover:border-slate-500 dark:hover:bg-slate-600 dark:hover:text-slate-100\",\n            ],\n            hasError && [\n              \"border-red-700 hover:border-red-900 dark:border-red-200 dark:hover:border-red-50\",\n              \"dark:border-red-700 dark:hover:border-red-900\",\n            ],\n            className,\n          )}\n          disabled={disabled}\n          id={id}\n          value={value}\n          {...props}\n          ref={ref}\n        >\n          <RadioGroupPrimitive.Indicator\n            className={twMerge(\n              \"relative flex size-full items-center justify-center\",\n              \"after:absolute after:top-1/2 after:left-1/2 after:size-2.5\",\n              \"after:-translate-1/2\",\n              \"after:rounded-full after:bg-gray-800 after:content-[''] dark:after:bg-slate-100\",\n              \"dark:after:bg-slate-400\",\n              !disabled && [\n                \"group-hover:after:bg-gray-900 dark:group-hover:after:bg-slate-50\",\n                \"dark:group-hover:after:bg-slate-50\",\n              ],\n              disabled && [\n                \"after:bg-gray-600 dark:after:bg-slate-300\",\n                \"dark:after:bg-slate-600 dark:after:text-slate-100\",\n              ],\n            )}\n          />\n        </RadioGroupPrimitive.Item>\n        <FormLabel\n          className={twMerge(\n            !disabled &&\n              !hasError && [\n                \"cursor-pointer\",\n                \"peer-hover:text-gray-900 dark:peer-hover:text-slate-50\",\n              ],\n          )}\n          description={description}\n          disabled={disabled}\n          hasError={hasError}\n          htmlFor={id}\n          required={props.required}\n          inline\n        >\n          {label}\n        </FormLabel>\n      </>\n    );\n  },\n);\n"],"mappings":";;;;;;AAiBA,MAAaK,QAAQH,sBAAMI,YAKvB,EACEC,WACAC,aACAC,WAAW,OACXC,WAAW,OACXC,IAAIC,QACJC,OACAC,OACA,GAAGC,SAELC,QACG;CACH,MAAMC,SAASd,OAAO;CACtB,MAAMQ,KAAKC,UAAU,GAAGK,OAAM;AAE9B,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,oBAAoB,MAArB;EACE,iBAAeR;EACf,gBAAcC;EACd,WAAWV,QACT,cACA,kFACA,oDACAS,YAAY,CACV,8GACA,4IACD,EACDC,YAAY,CACV,oFACA,gDACD,EACDH,UACD;EACSE;EACNE;EACGG;EACP,GAAIC;EACCC;YAEL,oBAAC,oBAAoB,WAArB,EACE,WAAWhB,QACT,uDACA,8DACA,wBACA,mFACA,2BACA,CAACS,YAAY,CACX,oEACA,qCACD,EACDA,YAAY,CACV,6CACA,oDAEJ,CAAC,EAAC,CAAA;EAEoB,CAAA,EAC1B,oBAAC,WAAD;EACE,WAAWT,QACT,CAACS,YACC,CAACC,YAAY,CACX,kBACA,yDAEN,CAAC;EACYF;EACHC;EACAC;EACV,SAASC;EACT,UAAUI,MAAMG;EAChB,QAAA;YAECL;EACQ,CAAA,CACV,EAAA,CAAA;EAGR"}
+{"version":3,"file":"radio.js","names":["twMerge","RadioGroupPrimitive","React","useId","FormLabel","Radio","forwardRef","className","description","disabled","hasError","id","propId","label","value","props","ref","prefix","required"],"sources":["../../../../src/ui/components/radio-group-field/radio.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport React, { useId } from \"react\";\nimport { FormLabel } from \"../form-label/form-label.js\";\n\nexport interface RadioProps extends React.ComponentPropsWithoutRef<\n  typeof RadioGroupPrimitive.Item\n> {\n  className?: string;\n  description?: string;\n  disabled?: boolean;\n  hasError?: boolean;\n  id?: string;\n  label: string;\n  value: string;\n}\n\nexport const Radio = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  RadioProps\n>(\n  (\n    {\n      className,\n      description,\n      disabled = false,\n      hasError = false,\n      id: propId,\n      label,\n      value,\n      ...props\n    },\n    ref,\n  ) => {\n    const prefix = useId();\n    const id = propId ?? `${prefix}-radio`;\n\n    return (\n      <>\n        <RadioGroupPrimitive.Item\n          aria-disabled={disabled}\n          aria-invalid={hasError}\n          className={twMerge(\n            \"group peer\",\n            \"aspect-square size-4 rounded-full border border-foreground\",\n            \"hover:hover-effect\",\n            disabled && [\"cursor-not-allowed border-border\", \"\"],\n            hasError && [\"border-destructive\", \"\"],\n            className,\n          )}\n          disabled={disabled}\n          id={id}\n          value={value}\n          {...props}\n          ref={ref}\n        >\n          <RadioGroupPrimitive.Indicator\n            className={twMerge(\n              \"relative flex size-full items-center justify-center\",\n              \"after:absolute after:top-1/2 after:left-1/2 after:size-2.5\",\n              \"after:-translate-1/2\",\n              \"after:rounded-full after:bg-primary after:content-['']\",\n              \"\",\n              !disabled && [\n                \"group-hover:after:hover-effect dark:group-hover:after:hover-effect\",\n                \"dark:group-hover:after:hover-effect\",\n              ],\n              disabled && [\"after:bg-muted-foreground\", \"\"],\n            )}\n          />\n        </RadioGroupPrimitive.Item>\n        <FormLabel\n          className={twMerge(\n            !disabled &&\n              !hasError && [\n                \"cursor-pointer\",\n                \"peer-hover:hover-effect dark:peer-hover:hover-effect\",\n              ],\n          )}\n          description={description}\n          disabled={disabled}\n          hasError={hasError}\n          htmlFor={id}\n          required={props.required}\n          inline\n        >\n          {label}\n        </FormLabel>\n      </>\n    );\n  },\n);\n"],"mappings":";;;;;;AAiBA,MAAaK,QAAQH,sBAAMI,YAKvB,EACEC,WACAC,aACAC,WAAW,OACXC,WAAW,OACXC,IAAIC,QACJC,OACAC,OACA,GAAGC,SAELC,QACG;CACH,MAAMC,SAASd,OAAO;CACtB,MAAMQ,KAAKC,UAAU,GAAGK,OAAM;AAE9B,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,oBAAoB,MAArB;EACE,iBAAeR;EACf,gBAAcC;EACd,WAAWV,QACT,cACA,8DACA,sBACAS,YAAY,CAAC,oCAAoC,GAAG,EACpDC,YAAY,CAAC,sBAAsB,GAAG,EACtCH,UACD;EACSE;EACNE;EACGG;EACP,GAAIC;EACCC;YAEL,oBAAC,oBAAoB,WAArB,EACE,WAAWhB,QACT,uDACA,8DACA,wBACA,0DACA,IACA,CAACS,YAAY,CACX,sEACA,sCACD,EACDA,YAAY,CAAC,6BAA6B,GAC5C,CAAC,EAAC,CAAA;EAEoB,CAAA,EAC1B,oBAAC,WAAD;EACE,WAAWT,QACT,CAACS,YACC,CAACC,YAAY,CACX,kBACA,uDAEN,CAAC;EACYF;EACHC;EACAC;EACV,SAASC;EACT,UAAUI,MAAMG;EAChB,QAAA;YAECL;EACQ,CAAA,CACV,EAAA,CAAA;EAGR"}

package/dist/ui/components/search-autocomplete/search-autocomplete.js

@@ -51,11 +51,11 @@ const SearchAutocomplete = (props) => {
 			onKeyDown: handleKeyDown,
 			placeholder,
 			disabled: disabled || selectingValue !== null,
-			className: "max-w-xs text-gray-700 dark:text-slate-200"
+			className: "max-w-xs text-foreground"
 		}), /* @__PURE__ */ jsx("button", {
 			onClick: handleSubmit,
 			disabled: disabled || !query.trim() || selectingValue !== null,
-			className: "h-9 rounded-md bg-gray-900 px-4 text-sm font-semibold text-white transition-colors hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-100",
+			className: "h-9 rounded-md bg-primary px-4 text-sm font-semibold text-primary-foreground transition-colors hover:hover-effect disabled:disabled-effect",
 			children: selectLabel
 		})]
 	});
@@ -73,7 +73,7 @@ const SearchAutocomplete = (props) => {
 						onKeyDown: handleKeyDown,
 						placeholder,
 						disabled,
-						className: "max-w-xs text-gray-700 dark:text-slate-200"
+						className: "max-w-xs text-foreground"
 					})
 				}), /* @__PURE__ */ jsx(PopoverContent, {
 					align: "start",
@@ -101,7 +101,7 @@ const SearchAutocomplete = (props) => {
 								})
 							}, option.value);
 							return /* @__PURE__ */ jsxs("div", {
-								className: "flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-slate-700",
+								className: "flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:hover-effect",
 								children: [renderOption ? /* @__PURE__ */ jsx("div", {
 									className: "min-w-0 flex-1",
 									children: renderOption(option)
@@ -109,19 +109,19 @@ const SearchAutocomplete = (props) => {
 									className: "min-w-0 flex-1",
 									children: [
 										/* @__PURE__ */ jsx("p", {
-											className: "truncate text-sm font-medium text-gray-900 dark:text-slate-50",
+											className: "truncate text-sm font-medium text-foreground",
 											children: option.label
 										}),
 										option.version && /* @__PURE__ */ jsxs("p", {
-											className: "truncate text-xs text-gray-500 dark:text-slate-400",
+											className: "truncate text-xs text-muted-foreground",
 											children: ["v", option.version]
 										}),
 										option.description && /* @__PURE__ */ jsx("p", {
-											className: "truncate text-xs text-gray-500 dark:text-slate-400",
+											className: "truncate text-xs text-muted-foreground",
 											children: option.description
 										}),
 										option.meta && /* @__PURE__ */ jsx("p", {
-											className: "truncate text-xs text-gray-400 dark:text-slate-500",
+											className: "truncate text-xs text-muted-foreground",
 											children: option.meta
 										})
 									]
@@ -129,12 +129,12 @@ const SearchAutocomplete = (props) => {
 									className: "flex shrink-0 items-center justify-center",
 									children: selectingContent
 								}) : option.disabled ? /* @__PURE__ */ jsx("span", {
-									className: "shrink-0 rounded-md bg-gray-100 px-3 py-1 text-xs font-medium text-gray-500 dark:bg-slate-700 dark:text-slate-400",
+									className: "shrink-0 rounded-md bg-muted px-3 py-1 text-xs font-medium text-muted-foreground",
 									children: option.disabledLabel ?? "Unavailable"
 								}) : /* @__PURE__ */ jsx("button", {
 									onClick: () => void handleSelect(option.value),
 									disabled: selectingValue === option.value,
-									className: "shrink-0 rounded-md bg-gray-900 px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-gray-800 disabled:opacity-50 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-100",
+									className: "shrink-0 rounded-md bg-primary px-3 py-1 text-xs font-medium text-primary-foreground transition-colors hover:hover-effect disabled:disabled-effect",
 									children: selectingValue === option.value ? "..." : selectLabel
 								})]
 							}, option.value);
@@ -143,15 +143,15 @@ const SearchAutocomplete = (props) => {
 				})]
 			}),
 			loading && /* @__PURE__ */ jsx("p", {
-				className: "mt-1 text-xs text-gray-500 dark:text-slate-400",
+				className: "mt-1 text-xs text-muted-foreground",
 				children: "Searching..."
 			}),
 			error && /* @__PURE__ */ jsx("p", {
-				className: "mt-1 text-xs text-red-600 dark:text-red-100",
+				className: "mt-1 text-xs text-destructive",
 				children: error
 			}),
 			!loading && !error && query.trim() && results.length === 0 && !isOpen && /* @__PURE__ */ jsx("p", {
-				className: "mt-1 text-xs text-gray-500 dark:text-slate-400",
+				className: "mt-1 text-xs text-muted-foreground",
 				children: "No results found"
 			})
 		]

package/dist/ui/components/search-autocomplete/search-autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-autocomplete.js","names":["twMerge","React","useCallback","useState","Input","Popover","PopoverAnchor","PopoverContent","useSearchAutocomplete","SearchAutocomplete","props","fetchOptions","onSelect","selectLabel","selectingContent","placeholder","disabled","loading","externalLoading","className","renderOption","renderRow","keepOpenSelector","debounceMs","query","setQuery","results","isLoading","error","isOpen","setIsOpen","handleQueryChange","selectingValue","setSelectingValue","handleInputChange","e","target","value","handleSelect","handleSubmit","trim","handleKeyDown","key","preventDefault","length","closest","map","option","label","version","description","meta","disabledLabel"],"sources":["../../../../src/ui/components/search-autocomplete/search-autocomplete.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport React, { useCallback, useState } from \"react\";\nimport { Input } from \"../input/input.js\";\nimport { Popover, PopoverAnchor, PopoverContent } from \"../popover/popover.js\";\nimport type { SearchAutocompleteProps } from \"./types.js\";\nimport { useSearchAutocomplete } from \"./use-search-autocomplete.js\";\n\nexport const SearchAutocomplete: React.FC<SearchAutocompleteProps> = (\n  props,\n) => {\n  const {\n    fetchOptions,\n    onSelect,\n    selectLabel = \"Select\",\n    selectingContent,\n    placeholder = \"Search...\",\n    disabled = false,\n    loading: externalLoading = false,\n    className,\n    renderOption,\n    renderRow,\n    keepOpenSelector,\n    debounceMs = 300,\n  } = props;\n\n  const {\n    query,\n    setQuery,\n    results,\n    isLoading,\n    error,\n    isOpen,\n    setIsOpen,\n    handleQueryChange,\n  } = useSearchAutocomplete({ fetchOptions, debounceMs });\n\n  const [selectingValue, setSelectingValue] = useState<string | null>(null);\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      handleQueryChange(e.target.value);\n    },\n    [handleQueryChange],\n  );\n\n  const handleSelect = useCallback(\n    async (value: string) => {\n      setSelectingValue(value);\n      try {\n        await onSelect(value);\n        setQuery(\"\");\n        setIsOpen(false);\n      } catch {\n        // error handled by caller\n      } finally {\n        setSelectingValue(null);\n      }\n    },\n    [onSelect, setQuery, setIsOpen],\n  );\n\n  const handleSubmit = useCallback(() => {\n    if (query.trim()) {\n      void handleSelect(query.trim());\n    }\n  }, [query, handleSelect]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === \"Enter\") {\n        e.preventDefault();\n        if (!fetchOptions && query.trim()) {\n          handleSubmit();\n        }\n      }\n    },\n    [fetchOptions, query, handleSubmit],\n  );\n\n  const loading = isLoading || externalLoading;\n\n  // Fallback: plain text input + submit when no fetchOptions\n  if (!fetchOptions) {\n    return (\n      <div className={twMerge(\"flex items-center gap-2\", className)}>\n        <Input\n          value={query}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          disabled={disabled || selectingValue !== null}\n          className=\"max-w-xs text-gray-700 dark:text-slate-200\"\n        />\n        <button\n          onClick={handleSubmit}\n          disabled={disabled || !query.trim() || selectingValue !== null}\n          className=\"h-9 rounded-md bg-gray-900 px-4 text-sm font-semibold text-white transition-colors hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-100\"\n        >\n          {selectLabel}\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div className={twMerge(\"relative\", className)}>\n      <Popover open={isOpen && results.length > 0} onOpenChange={setIsOpen}>\n        <PopoverAnchor asChild>\n          <Input\n            value={query}\n            onChange={handleInputChange}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n            disabled={disabled}\n            className=\"max-w-xs text-gray-700 dark:text-slate-200\"\n          />\n        </PopoverAnchor>\n        <PopoverContent\n          align=\"start\"\n          onOpenAutoFocus={(e) => e.preventDefault()}\n          onInteractOutside={(e) => {\n            if (keepOpenSelector) {\n              const target = e.target as HTMLElement | null;\n              if (target?.closest(keepOpenSelector)) {\n                e.preventDefault();\n                return;\n              }\n            }\n            setIsOpen(false);\n          }}\n          className=\"max-h-80 overflow-visible p-1\"\n        >\n          <div className=\"max-h-80 overflow-y-auto\">\n            {results.map((option) => {\n              if (renderRow) {\n                return (\n                  <div key={option.value} className=\"rounded-md\">\n                    {renderRow(option, {\n                      selectingValue,\n                      selectLabel,\n                      selectingContent,\n                      handleSelect: (value) => void handleSelect(value),\n                    })}\n                  </div>\n                );\n              }\n              return (\n                <div\n                  key={option.value}\n                  className=\"flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-slate-700\"\n                >\n                  {renderOption ? (\n                    <div className=\"min-w-0 flex-1\">{renderOption(option)}</div>\n                  ) : (\n                    <div className=\"min-w-0 flex-1\">\n                      <p className=\"truncate text-sm font-medium text-gray-900 dark:text-slate-50\">\n                        {option.label}\n                      </p>\n                      {option.version && (\n                        <p className=\"truncate text-xs text-gray-500 dark:text-slate-400\">\n                          v{option.version}\n                        </p>\n                      )}\n                      {option.description && (\n                        <p className=\"truncate text-xs text-gray-500 dark:text-slate-400\">\n                          {option.description}\n                        </p>\n                      )}\n                      {option.meta && (\n                        <p className=\"truncate text-xs text-gray-400 dark:text-slate-500\">\n                          {option.meta}\n                        </p>\n                      )}\n                    </div>\n                  )}\n                  {selectingValue === option.value && selectingContent ? (\n                    <div className=\"flex shrink-0 items-center justify-center\">\n                      {selectingContent}\n                    </div>\n                  ) : option.disabled ? (\n                    <span className=\"shrink-0 rounded-md bg-gray-100 px-3 py-1 text-xs font-medium text-gray-500 dark:bg-slate-700 dark:text-slate-400\">\n                      {option.disabledLabel ?? \"Unavailable\"}\n                    </span>\n                  ) : (\n                    <button\n                      onClick={() => void handleSelect(option.value)}\n                      disabled={selectingValue === option.value}\n                      className=\"shrink-0 rounded-md bg-gray-900 px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-gray-800 disabled:opacity-50 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-100\"\n                    >\n                      {selectingValue === option.value ? \"...\" : selectLabel}\n                    </button>\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </PopoverContent>\n      </Popover>\n      {loading && (\n        <p className=\"mt-1 text-xs text-gray-500 dark:text-slate-400\">\n          Searching...\n        </p>\n      )}\n      {error && (\n        <p className=\"mt-1 text-xs text-red-600 dark:text-red-100\">{error}</p>\n      )}\n      {!loading &&\n        !error &&\n        query.trim() &&\n        results.length === 0 &&\n        !isOpen && (\n          <p className=\"mt-1 text-xs text-gray-500 dark:text-slate-400\">\n            No results found\n          </p>\n        )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAOA,MAAaS,sBACXC,UACG;CACH,MAAM,EACJC,cACAC,UACAC,cAAc,UACdC,kBACAC,cAAc,aACdC,WAAW,OACXC,SAASC,kBAAkB,OAC3BC,WACAC,cACAC,WACAC,kBACAC,aAAa,QACXb;CAEJ,MAAM,EACJc,OACAC,UACAC,SACAC,WACAC,OACAC,QACAC,WACAC,sBACEvB,sBAAsB;EAAEG;EAAcY;EAAY,CAAC;CAEvD,MAAM,CAACS,gBAAgBC,qBAAqB9B,SAAwB,KAAK;CAEzE,MAAM+B,oBAAoBhC,aACvBiC,MAA2C;AAC1CJ,oBAAkBI,EAAEC,OAAOC,MAAM;IAEnC,CAACN,kBACH,CAAC;CAED,MAAMO,eAAepC,YACnB,OAAOmC,UAAkB;AACvBJ,oBAAkBI,MAAM;AACxB,MAAI;AACF,SAAMzB,SAASyB,MAAM;AACrBZ,YAAS,GAAG;AACZK,aAAU,MAAM;UACV,WAEE;AACRG,qBAAkB,KAAK;;IAG3B;EAACrB;EAAUa;EAAUK;EACvB,CAAC;CAED,MAAMS,eAAerC,kBAAkB;AACrC,MAAIsB,MAAMgB,MAAM,CACTF,cAAad,MAAMgB,MAAM,CAAC;IAEhC,CAAChB,OAAOc,aAAa,CAAC;CAEzB,MAAMG,gBAAgBvC,aACnBiC,MAA2B;AAC1B,MAAIA,EAAEO,QAAQ,SAAS;AACrBP,KAAEQ,gBAAgB;AAClB,OAAI,CAAChC,gBAAgBa,MAAMgB,MAAM,CAC/BD,eAAc;;IAIpB;EAAC5B;EAAca;EAAOe;EACxB,CAAC;CAED,MAAMtB,UAAUU,aAAaT;AAG7B,KAAI,CAACP,aACH,QACE,qBAAC,OAAD;EAAK,WAAWX,QAAQ,2BAA2BmB,UAAU;YAA7D,CACE,oBAAC,OAAD;GACE,OAAOK;GACP,UAAUU;GACV,WAAWO;GACE1B;GACb,UAAUC,YAAYgB,mBAAmB;GACzC,WAAU;GAA4C,CAAA,EAExD,oBAAC,UAAD;GACE,SAASO;GACT,UAAUvB,YAAY,CAACQ,MAAMgB,MAAM,IAAIR,mBAAmB;GAC1D,WAAU;aAETnB;GACK,CAAA,CACJ;;AAIV,QACE,qBAAC,OAAD;EAAK,WAAWb,QAAQ,YAAYmB,UAAU;YAA9C;GACE,qBAAC,SAAD;IAAS,MAAMU,UAAUH,QAAQkB,SAAS;IAAG,cAAcd;cAA3D,CACE,oBAAC,eAAD;KAAe,SAAA;eACb,oBAAC,OAAD;MACE,OAAON;MACP,UAAUU;MACV,WAAWO;MACE1B;MACHC;MACV,WAAU;MAA4C,CAAA;KAE3C,CAAA,EACf,oBAAC,gBAAD;KACE,OAAM;KACN,kBAAkBmB,MAAMA,EAAEQ,gBAAgB;KAC1C,oBAAoBR,MAAM;AACxB,UAAIb;WACaa,EAAEC,QACLS,QAAQvB,iBAAiB,EAAE;AACrCa,UAAEQ,gBAAgB;AAClB;;;AAGJb,gBAAU,MAAM;;KAElB,WAAU;eAEV,oBAAC,OAAD;MAAK,WAAU;gBACZJ,QAAQoB,KAAKC,WAAW;AACvB,WAAI1B,UACF,QACE,oBAAC,OAAD;QAAwB,WAAU;kBAC/BA,UAAU0B,QAAQ;SACjBf;SACAnB;SACAC;SACAwB,eAAeD,UAAU,KAAKC,aAAaD,MAAK;SACjD,CAAC;QACE,EAPIU,OAAOV,MAOX;AAGV,cACE,qBAAC,OAAD;QAEE,WAAU;kBAFZ,CAIGjB,eACC,oBAAC,OAAD;SAAK,WAAU;mBAAkBA,aAAa2B,OAAO;SAAO,CAAA,GAE5D,qBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,oBAAC,KAAD;WAAG,WAAU;qBACVA,OAAOC;WACP,CAAA;UACFD,OAAOE,WACN,qBAAC,KAAD;WAAG,WAAU;qBAAb,CAAiE,KAC7DF,OAAOE,QAEZ;;UACAF,OAAOG,eACN,oBAAC,KAAD;WAAG,WAAU;qBACVH,OAAOG;WAEX,CAAA;UACAH,OAAOI,QACN,oBAAC,KAAD;WAAG,WAAU;qBACVJ,OAAOI;WAEX,CAAA;UAEJ;YACAnB,mBAAmBe,OAAOV,SAASvB,mBAClC,oBAAC,OAAD;SAAK,WAAU;mBACZA;SACG,CAAA,GACJiC,OAAO/B,WACT,oBAAC,QAAD;SAAM,WAAU;mBACb+B,OAAOK,iBAAiB;SACpB,CAAA,GAEP,oBAAC,UAAD;SACE,eAAe,KAAKd,aAAaS,OAAOV,MAAM;SAC9C,UAAUL,mBAAmBe,OAAOV;SACpC,WAAU;mBAETL,mBAAmBe,OAAOV,QAAQ,QAAQxB;SAE9C,CAAA,CACG;UA5CCkC,OAAOV,MA4CR;QAER;MACC,CAAA;KACS,CAAA,CACT;;GACRpB,WACC,oBAAC,KAAD;IAAG,WAAU;cAAgD;IAG9D,CAAA;GACAW,SACC,oBAAC,KAAD;IAAG,WAAU;cAA+CA;IAC7D,CAAA;GACA,CAACX,WACA,CAACW,SACDJ,MAAMgB,MAAM,IACZd,QAAQkB,WAAW,KACnB,CAACf,UACC,oBAAC,KAAD;IAAG,WAAU;cAAgD;IAG9D,CAAA;GACC"}
+{"version":3,"file":"search-autocomplete.js","names":["React","useCallback","useState","twMerge","Input","Popover","PopoverAnchor","PopoverContent","useSearchAutocomplete","SearchAutocomplete","props","fetchOptions","onSelect","selectLabel","selectingContent","placeholder","disabled","loading","externalLoading","className","renderOption","renderRow","keepOpenSelector","debounceMs","query","setQuery","results","isLoading","error","isOpen","setIsOpen","handleQueryChange","selectingValue","setSelectingValue","handleInputChange","e","target","value","handleSelect","handleSubmit","trim","handleKeyDown","key","preventDefault","length","closest","map","option","label","version","description","meta","disabledLabel"],"sources":["../../../../src/ui/components/search-autocomplete/search-autocomplete.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Input } from \"../input/input.js\";\nimport { Popover, PopoverAnchor, PopoverContent } from \"../popover/popover.js\";\nimport type { SearchAutocompleteProps } from \"./types.js\";\nimport { useSearchAutocomplete } from \"./use-search-autocomplete.js\";\n\nexport const SearchAutocomplete: React.FC<SearchAutocompleteProps> = (\n  props,\n) => {\n  const {\n    fetchOptions,\n    onSelect,\n    selectLabel = \"Select\",\n    selectingContent,\n    placeholder = \"Search...\",\n    disabled = false,\n    loading: externalLoading = false,\n    className,\n    renderOption,\n    renderRow,\n    keepOpenSelector,\n    debounceMs = 300,\n  } = props;\n\n  const {\n    query,\n    setQuery,\n    results,\n    isLoading,\n    error,\n    isOpen,\n    setIsOpen,\n    handleQueryChange,\n  } = useSearchAutocomplete({ fetchOptions, debounceMs });\n\n  const [selectingValue, setSelectingValue] = useState<string | null>(null);\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      handleQueryChange(e.target.value);\n    },\n    [handleQueryChange],\n  );\n\n  const handleSelect = useCallback(\n    async (value: string) => {\n      setSelectingValue(value);\n      try {\n        await onSelect(value);\n        setQuery(\"\");\n        setIsOpen(false);\n      } catch {\n        // error handled by caller\n      } finally {\n        setSelectingValue(null);\n      }\n    },\n    [onSelect, setQuery, setIsOpen],\n  );\n\n  const handleSubmit = useCallback(() => {\n    if (query.trim()) {\n      void handleSelect(query.trim());\n    }\n  }, [query, handleSelect]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === \"Enter\") {\n        e.preventDefault();\n        if (!fetchOptions && query.trim()) {\n          handleSubmit();\n        }\n      }\n    },\n    [fetchOptions, query, handleSubmit],\n  );\n\n  const loading = isLoading || externalLoading;\n\n  // Fallback: plain text input + submit when no fetchOptions\n  if (!fetchOptions) {\n    return (\n      <div className={twMerge(\"flex items-center gap-2\", className)}>\n        <Input\n          value={query}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          disabled={disabled || selectingValue !== null}\n          className=\"max-w-xs text-foreground\"\n        />\n        <button\n          onClick={handleSubmit}\n          disabled={disabled || !query.trim() || selectingValue !== null}\n          className=\"h-9 rounded-md bg-primary px-4 text-sm font-semibold text-primary-foreground transition-colors hover:hover-effect disabled:disabled-effect\"\n        >\n          {selectLabel}\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div className={twMerge(\"relative\", className)}>\n      <Popover open={isOpen && results.length > 0} onOpenChange={setIsOpen}>\n        <PopoverAnchor asChild>\n          <Input\n            value={query}\n            onChange={handleInputChange}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n            disabled={disabled}\n            className=\"max-w-xs text-foreground\"\n          />\n        </PopoverAnchor>\n        <PopoverContent\n          align=\"start\"\n          onOpenAutoFocus={(e) => e.preventDefault()}\n          onInteractOutside={(e) => {\n            if (keepOpenSelector) {\n              const target = e.target as HTMLElement | null;\n              if (target?.closest(keepOpenSelector)) {\n                e.preventDefault();\n                return;\n              }\n            }\n            setIsOpen(false);\n          }}\n          className=\"max-h-80 overflow-visible p-1\"\n        >\n          <div className=\"max-h-80 overflow-y-auto\">\n            {results.map((option) => {\n              if (renderRow) {\n                return (\n                  <div key={option.value} className=\"rounded-md\">\n                    {renderRow(option, {\n                      selectingValue,\n                      selectLabel,\n                      selectingContent,\n                      handleSelect: (value) => void handleSelect(value),\n                    })}\n                  </div>\n                );\n              }\n              return (\n                <div\n                  key={option.value}\n                  className=\"flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:hover-effect\"\n                >\n                  {renderOption ? (\n                    <div className=\"min-w-0 flex-1\">{renderOption(option)}</div>\n                  ) : (\n                    <div className=\"min-w-0 flex-1\">\n                      <p className=\"truncate text-sm font-medium text-foreground\">\n                        {option.label}\n                      </p>\n                      {option.version && (\n                        <p className=\"truncate text-xs text-muted-foreground\">\n                          v{option.version}\n                        </p>\n                      )}\n                      {option.description && (\n                        <p className=\"truncate text-xs text-muted-foreground\">\n                          {option.description}\n                        </p>\n                      )}\n                      {option.meta && (\n                        <p className=\"truncate text-xs text-muted-foreground\">\n                          {option.meta}\n                        </p>\n                      )}\n                    </div>\n                  )}\n                  {selectingValue === option.value && selectingContent ? (\n                    <div className=\"flex shrink-0 items-center justify-center\">\n                      {selectingContent}\n                    </div>\n                  ) : option.disabled ? (\n                    <span className=\"shrink-0 rounded-md bg-muted px-3 py-1 text-xs font-medium text-muted-foreground\">\n                      {option.disabledLabel ?? \"Unavailable\"}\n                    </span>\n                  ) : (\n                    <button\n                      onClick={() => void handleSelect(option.value)}\n                      disabled={selectingValue === option.value}\n                      className=\"shrink-0 rounded-md bg-primary px-3 py-1 text-xs font-medium text-primary-foreground transition-colors hover:hover-effect disabled:disabled-effect\"\n                    >\n                      {selectingValue === option.value ? \"...\" : selectLabel}\n                    </button>\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </PopoverContent>\n      </Popover>\n      {loading && (\n        <p className=\"mt-1 text-xs text-muted-foreground\">Searching...</p>\n      )}\n      {error && <p className=\"mt-1 text-xs text-destructive\">{error}</p>}\n      {!loading &&\n        !error &&\n        query.trim() &&\n        results.length === 0 &&\n        !isOpen && (\n          <p className=\"mt-1 text-xs text-muted-foreground\">No results found</p>\n        )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/components/select-field/content.js

@@ -26,13 +26,13 @@ const Content = ({ searchable, commandListRef, multiple, selectedValues, selecti
 			].includes(e.key) && enabledOptions.length > 0)) e.stopPropagation();
 		},
 		wrapperClassName: "rounded-t",
-		className: "text-gray-900 dark:text-slate-50"
+		className: "text-foreground"
 	}), /* @__PURE__ */ jsxs(CommandList, {
 		ref: commandListRef,
 		tabIndex: !searchable ? 0 : void 0,
 		children: [
 			/* @__PURE__ */ jsx(CommandEmpty, {
-				className: "p-4 text-center text-sm/5 font-normal text-gray-700 dark:text-slate-200",
+				className: "p-4 text-center text-sm/5 font-normal text-foreground",
 				children: "No results found."
 			}),
 			multiple && cmdkSearch === "" && /* @__PURE__ */ jsx(CommandGroup, {
@@ -41,14 +41,14 @@ const Content = ({ searchable, commandListRef, multiple, selectedValues, selecti
 					value: "select-all",
 					onSelect: toggleAll,
 					disabled: false,
-					className: twMerge("cursor-pointer", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-slate-600"),
+					className: twMerge("cursor-pointer", "data-[selected=true]:bg-accent"),
 					role: "option",
 					"aria-selected": selectedValues.length === enabledOptions.length,
 					children: /* @__PURE__ */ jsxs("div", {
 						className: "flex w-full items-center gap-2",
 						children: [
 							selectionIcon === "auto" && /* @__PURE__ */ jsx("div", {
-								className: twMerge("flex size-4 items-center justify-center rounded-md border", "border-gray-700 dark:border-slate-200", selectedValues.length === enabledOptions.length && "bg-gray-900 text-gray-50 dark:bg-slate-50 dark:text-slate-900"),
+								className: twMerge("flex size-4 items-center justify-center rounded-md border", "border-foreground", selectedValues.length === enabledOptions.length && "bg-primary text-primary-foreground"),
 								children: selectedValues.length === enabledOptions.length && /* @__PURE__ */ jsx(Icon, {
 									name: "Checkmark",
 									size: 16
@@ -59,11 +59,11 @@ const Content = ({ searchable, commandListRef, multiple, selectedValues, selecti
 								children: selectionIconPosition === "left" && selectedValues.length === enabledOptions.length && /* @__PURE__ */ jsx(Icon, {
 									name: "Checkmark",
 									size: 16,
-									className: "text-gray-900 dark:text-slate-50"
+									className: "text-foreground"
 								})
 							}),
 							/* @__PURE__ */ jsx("span", {
-								className: "text-sm/4 font-semibold text-gray-900 dark:text-slate-50",
+								className: "text-sm/4 font-semibold text-foreground",
 								children: selectedValues.length === enabledOptions.length ? "Deselect All" : "Select All"
 							}),
 							selectionIcon === "checkmark" && selectionIconPosition === "right" && /* @__PURE__ */ jsx("div", {
@@ -71,7 +71,7 @@ const Content = ({ searchable, commandListRef, multiple, selectedValues, selecti
 								children: selectedValues.length === enabledOptions.length && /* @__PURE__ */ jsx(Icon, {
 									name: "Checkmark",
 									size: 16,
-									className: "text-gray-900 dark:text-slate-50"
+									className: "text-foreground"
 								})
 							})
 						]
@@ -91,7 +91,7 @@ const Content = ({ searchable, commandListRef, multiple, selectedValues, selecti
 						toggleOption,
 						tabIndex: !searchable ? 0 : void 0
 					}),
-					favoriteOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: "my-1 border-b border-gray-300 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100" }),
+					favoriteOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: "my-1 border-b border-border" }),
 					/* @__PURE__ */ jsx(CommandItemList, {
 						options,
 						selectedValues,

package/dist/ui/components/select-field/content.js.map

@@ -1 +1 @@
-{"version":3,"file":"content.js","names":["Icon","twMerge","useCommandState","React","useEffect","CommandEmpty","CommandGroup","CommandInput","CommandItem","CommandList","CommandItemList","Content","searchable","commandListRef","multiple","selectedValues","selectionIcon","selectionIconPosition","options","toggleAll","toggleOption","favoriteOptions","enabledOptions","filter","opt","disabled","hasAnyIcon","some","icon","cmdkSearch","state","search","current","scrollTo","top","behavior","e","isOptionsRelatedKey","includes","key","length","stopPropagation","undefined"],"sources":["../../../../src/ui/components/select-field/content.tsx"],"sourcesContent":["import { Icon } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport { useCommandState } from \"cmdk\";\nimport React, { useEffect } from \"react\";\nimport {\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"../command/command.js\";\nimport type { SelectProps } from \"../enum-field/types.js\";\nimport { CommandItemList } from \"./subcomponents/CommandItemList.js\";\ninterface ContentProps {\n  searchable?: boolean;\n  commandListRef: React.RefObject<HTMLDivElement | null>;\n  multiple?: boolean;\n  selectedValues: string[];\n  selectionIcon: \"auto\" | \"checkmark\";\n  selectionIconPosition: \"left\" | \"right\";\n  options: SelectProps[\"options\"];\n  favoriteOptions?: SelectProps[\"options\"];\n  toggleAll: () => void;\n  toggleOption: (value: string) => void;\n}\n\nexport const Content: React.FC<ContentProps> = ({\n  searchable,\n  commandListRef,\n  multiple,\n  selectedValues,\n  selectionIcon,\n  selectionIconPosition,\n  options = [],\n  toggleAll,\n  toggleOption,\n  favoriteOptions = [],\n}) => {\n  const enabledOptions = options.filter((opt) => !opt.disabled);\n  const hasAnyIcon = options.some((opt) => opt.icon);\n\n  const cmdkSearch = useCommandState((state) => state.search);\n  // scroll to top when search change\n  useEffect(() => {\n    commandListRef.current?.scrollTo({ top: 0, behavior: \"instant\" });\n  }, [commandListRef, cmdkSearch]);\n\n  return (\n    <>\n      {searchable && (\n        <CommandInput\n          placeholder=\"Search...\"\n          onKeyDown={(e) => {\n            const isOptionsRelatedKey = [\n              \"ArrowUp\",\n              \"ArrowDown\",\n              \"Enter\",\n            ].includes(e.key);\n            if (!(isOptionsRelatedKey && enabledOptions.length > 0)) {\n              e.stopPropagation();\n            }\n          }}\n          wrapperClassName=\"rounded-t\"\n          className=\"text-gray-900 dark:text-slate-50\"\n        />\n      )}\n      <CommandList ref={commandListRef} tabIndex={!searchable ? 0 : undefined}>\n        <CommandEmpty className=\"p-4 text-center text-sm/5 font-normal text-gray-700 dark:text-slate-200\">\n          No results found.\n        </CommandEmpty>\n        {multiple && cmdkSearch === \"\" && (\n          <CommandGroup className=\"pb-0\">\n            <CommandItem\n              value=\"select-all\"\n              onSelect={toggleAll}\n              disabled={false}\n              className={twMerge(\n                \"cursor-pointer\",\n                \"data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-slate-600\",\n              )}\n              role=\"option\"\n              aria-selected={selectedValues.length === enabledOptions.length}\n            >\n              <div className=\"flex w-full items-center gap-2\">\n                {selectionIcon === \"auto\" && (\n                  <div\n                    className={twMerge(\n                      \"flex size-4 items-center justify-center rounded-md border\",\n                      \"border-gray-700 dark:border-slate-200\",\n                      selectedValues.length === enabledOptions.length &&\n                        \"bg-gray-900 text-gray-50 dark:bg-slate-50 dark:text-slate-900\",\n                    )}\n                  >\n                    {selectedValues.length === enabledOptions.length && (\n                      <Icon name=\"Checkmark\" size={16} />\n                    )}\n                  </div>\n                )}\n                {selectionIcon === \"checkmark\" &&\n                  !(selectionIconPosition === \"right\" && hasAnyIcon) && (\n                    <div className=\"size-4\">\n                      {selectionIconPosition === \"left\" &&\n                        selectedValues.length === enabledOptions.length && (\n                          <Icon\n                            name=\"Checkmark\"\n                            size={16}\n                            className=\"text-gray-900 dark:text-slate-50\"\n                          />\n                        )}\n                    </div>\n                  )}\n                <span className=\"text-sm/4 font-semibold text-gray-900 dark:text-slate-50\">\n                  {selectedValues.length === enabledOptions.length\n                    ? \"Deselect All\"\n                    : \"Select All\"}\n                </span>\n                {selectionIcon === \"checkmark\" &&\n                  selectionIconPosition === \"right\" && (\n                    <div className=\"ml-auto size-4\">\n                      {selectedValues.length === enabledOptions.length && (\n                        <Icon\n                          name=\"Checkmark\"\n                          size={16}\n                          className=\"text-gray-900 dark:text-slate-50\"\n                        />\n                      )}\n                    </div>\n                  )}\n              </div>\n            </CommandItem>\n          </CommandGroup>\n        )}\n        <CommandGroup\n          className={multiple && cmdkSearch === \"\" ? \"pt-0\" : undefined}\n        >\n          <CommandItemList\n            options={favoriteOptions}\n            selectedValues={selectedValues}\n            multiple={multiple}\n            selectionIcon={selectionIcon}\n            selectionIconPosition={selectionIconPosition}\n            hasAnyIcon={hasAnyIcon}\n            toggleOption={toggleOption}\n            tabIndex={!searchable ? 0 : undefined}\n          />\n\n          {favoriteOptions.length > 0 && (\n            <div className=\"my-1 border-b border-gray-300 dark:border-slate-500 dark:bg-slate-600 dark:text-slate-100\" />\n          )}\n          <CommandItemList\n            options={options}\n            selectedValues={selectedValues}\n            multiple={multiple}\n            selectionIcon={selectionIcon}\n            selectionIconPosition={selectionIconPosition}\n            hasAnyIcon={hasAnyIcon}\n            toggleOption={toggleOption}\n            tabIndex={!searchable ? 0 : undefined}\n          />\n        </CommandGroup>\n      </CommandList>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;AA0BA,MAAaW,WAAmC,EAC9CC,YACAC,gBACAC,UACAC,gBACAC,eACAC,uBACAC,UAAU,EAAE,EACZC,WACAC,cACAC,kBAAkB,EAAA,OACd;CACJ,MAAMC,iBAAiBJ,QAAQK,QAAQC,QAAQ,CAACA,IAAIC,SAAS;CAC7D,MAAMC,aAAaR,QAAQS,MAAMH,QAAQA,IAAII,KAAK;CAElD,MAAMC,aAAa3B,iBAAiB4B,UAAUA,MAAMC,OAAO;AAE3D3B,iBAAgB;AACdS,iBAAemB,SAASC,SAAS;GAAEC,KAAK;GAAGC,UAAU;GAAW,CAAC;IAChE,CAACtB,gBAAgBgB,WAAW,CAAC;AAEhC,QACE,qBAAA,YAAA,EAAA,UAAA,CACGjB,cACC,oBAAC,cAAD;EACE,aAAY;EACZ,YAAYwB,MAAM;AAMhB,OAAI,EALwB;IAC1B;IACA;IACA;IACD,CAACE,SAASF,EAAEG,IAAI,IACYjB,eAAekB,SAAS,GACnDJ,GAAEK,iBAAiB;;EAGvB,kBAAiB;EACjB,WAAU;EAEb,CAAA,EACD,qBAAC,aAAD;EAAa,KAAK5B;EAAgB,UAAU,CAACD,aAAa,IAAI8B,KAAAA;YAA9D;GACE,oBAAC,cAAD;IAAc,WAAU;cAAyE;IAEnF,CAAA;GACb5B,YAAYe,eAAe,MAC1B,oBAAC,cAAD;IAAc,WAAU;cACtB,oBAAC,aAAD;KACE,OAAM;KACN,UAAUV;KACV,UAAU;KACV,WAAWlB,QACT,kBACA,0EACD;KACD,MAAK;KACL,iBAAec,eAAeyB,WAAWlB,eAAekB;eAExD,qBAAC,OAAD;MAAK,WAAU;gBAAf;OACGxB,kBAAkB,UACjB,oBAAC,OAAD;QACE,WAAWf,QACT,6DACA,yCACAc,eAAeyB,WAAWlB,eAAekB,UACvC,gEACH;kBAEAzB,eAAeyB,WAAWlB,eAAekB,UACxC,oBAAC,MAAD;SAAM,MAAK;SAAY,MAAM;SAC9B,CAAA;QAEJ,CAAA;OACAxB,kBAAkB,eACjB,EAAEC,0BAA0B,WAAWS,eACrC,oBAAC,OAAD;QAAK,WAAU;kBACZT,0BAA0B,UACzBF,eAAeyB,WAAWlB,eAAekB,UACvC,oBAAC,MAAD;SACE,MAAK;SACL,MAAM;SACN,WAAU;SAEb,CAAA;QAEN,CAAA;OACH,oBAAC,QAAD;QAAM,WAAU;kBACbzB,eAAeyB,WAAWlB,eAAekB,SACtC,iBACA;QACA,CAAA;OACLxB,kBAAkB,eACjBC,0BAA0B,WACxB,oBAAC,OAAD;QAAK,WAAU;kBACZF,eAAeyB,WAAWlB,eAAekB,UACxC,oBAAC,MAAD;SACE,MAAK;SACL,MAAM;SACN,WAAU;SAEb,CAAA;QAEJ,CAAA;OACA;;KACM,CAAA;IAEhB,CAAA;GACD,qBAAC,cAAD;IACE,WAAW1B,YAAYe,eAAe,KAAK,SAASa,KAAAA;cADtD;KAGE,oBAAC,iBAAD;MACE,SAASrB;MACON;MACND;MACKE;MACQC;MACXS;MACEN;MACd,UAAU,CAACR,aAAa,IAAI8B,KAAAA;MAAU,CAAA;KAGvCrB,gBAAgBmB,SAAS,KACxB,oBAAC,OAAD,EAAK,WAAU,6FAChB,CAAA;KACD,oBAAC,iBAAD;MACWtB;MACOH;MACND;MACKE;MACQC;MACXS;MACEN;MACd,UAAU,CAACR,aAAa,IAAI8B,KAAAA;MAAU,CAAA;KAE5B;;GACH;IACZ,EAAA,CAAA"}
+{"version":3,"file":"content.js","names":["Icon","twMerge","useCommandState","React","useEffect","CommandEmpty","CommandGroup","CommandInput","CommandItem","CommandList","CommandItemList","Content","searchable","commandListRef","multiple","selectedValues","selectionIcon","selectionIconPosition","options","toggleAll","toggleOption","favoriteOptions","enabledOptions","filter","opt","disabled","hasAnyIcon","some","icon","cmdkSearch","state","search","current","scrollTo","top","behavior","e","isOptionsRelatedKey","includes","key","length","stopPropagation","undefined"],"sources":["../../../../src/ui/components/select-field/content.tsx"],"sourcesContent":["import { Icon } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport { useCommandState } from \"cmdk\";\nimport React, { useEffect } from \"react\";\nimport {\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"../command/command.js\";\nimport type { SelectProps } from \"../enum-field/types.js\";\nimport { CommandItemList } from \"./subcomponents/CommandItemList.js\";\ninterface ContentProps {\n  searchable?: boolean;\n  commandListRef: React.RefObject<HTMLDivElement | null>;\n  multiple?: boolean;\n  selectedValues: string[];\n  selectionIcon: \"auto\" | \"checkmark\";\n  selectionIconPosition: \"left\" | \"right\";\n  options: SelectProps[\"options\"];\n  favoriteOptions?: SelectProps[\"options\"];\n  toggleAll: () => void;\n  toggleOption: (value: string) => void;\n}\n\nexport const Content: React.FC<ContentProps> = ({\n  searchable,\n  commandListRef,\n  multiple,\n  selectedValues,\n  selectionIcon,\n  selectionIconPosition,\n  options = [],\n  toggleAll,\n  toggleOption,\n  favoriteOptions = [],\n}) => {\n  const enabledOptions = options.filter((opt) => !opt.disabled);\n  const hasAnyIcon = options.some((opt) => opt.icon);\n\n  const cmdkSearch = useCommandState((state) => state.search);\n  // scroll to top when search change\n  useEffect(() => {\n    commandListRef.current?.scrollTo({ top: 0, behavior: \"instant\" });\n  }, [commandListRef, cmdkSearch]);\n\n  return (\n    <>\n      {searchable && (\n        <CommandInput\n          placeholder=\"Search...\"\n          onKeyDown={(e) => {\n            const isOptionsRelatedKey = [\n              \"ArrowUp\",\n              \"ArrowDown\",\n              \"Enter\",\n            ].includes(e.key);\n            if (!(isOptionsRelatedKey && enabledOptions.length > 0)) {\n              e.stopPropagation();\n            }\n          }}\n          wrapperClassName=\"rounded-t\"\n          className=\"text-foreground\"\n        />\n      )}\n      <CommandList ref={commandListRef} tabIndex={!searchable ? 0 : undefined}>\n        <CommandEmpty className=\"p-4 text-center text-sm/5 font-normal text-foreground\">\n          No results found.\n        </CommandEmpty>\n        {multiple && cmdkSearch === \"\" && (\n          <CommandGroup className=\"pb-0\">\n            <CommandItem\n              value=\"select-all\"\n              onSelect={toggleAll}\n              disabled={false}\n              className={twMerge(\n                \"cursor-pointer\",\n                \"data-[selected=true]:bg-accent\",\n              )}\n              role=\"option\"\n              aria-selected={selectedValues.length === enabledOptions.length}\n            >\n              <div className=\"flex w-full items-center gap-2\">\n                {selectionIcon === \"auto\" && (\n                  <div\n                    className={twMerge(\n                      \"flex size-4 items-center justify-center rounded-md border\",\n                      \"border-foreground\",\n                      selectedValues.length === enabledOptions.length &&\n                        \"bg-primary text-primary-foreground\",\n                    )}\n                  >\n                    {selectedValues.length === enabledOptions.length && (\n                      <Icon name=\"Checkmark\" size={16} />\n                    )}\n                  </div>\n                )}\n                {selectionIcon === \"checkmark\" &&\n                  !(selectionIconPosition === \"right\" && hasAnyIcon) && (\n                    <div className=\"size-4\">\n                      {selectionIconPosition === \"left\" &&\n                        selectedValues.length === enabledOptions.length && (\n                          <Icon\n                            name=\"Checkmark\"\n                            size={16}\n                            className=\"text-foreground\"\n                          />\n                        )}\n                    </div>\n                  )}\n                <span className=\"text-sm/4 font-semibold text-foreground\">\n                  {selectedValues.length === enabledOptions.length\n                    ? \"Deselect All\"\n                    : \"Select All\"}\n                </span>\n                {selectionIcon === \"checkmark\" &&\n                  selectionIconPosition === \"right\" && (\n                    <div className=\"ml-auto size-4\">\n                      {selectedValues.length === enabledOptions.length && (\n                        <Icon\n                          name=\"Checkmark\"\n                          size={16}\n                          className=\"text-foreground\"\n                        />\n                      )}\n                    </div>\n                  )}\n              </div>\n            </CommandItem>\n          </CommandGroup>\n        )}\n        <CommandGroup\n          className={multiple && cmdkSearch === \"\" ? \"pt-0\" : undefined}\n        >\n          <CommandItemList\n            options={favoriteOptions}\n            selectedValues={selectedValues}\n            multiple={multiple}\n            selectionIcon={selectionIcon}\n            selectionIconPosition={selectionIconPosition}\n            hasAnyIcon={hasAnyIcon}\n            toggleOption={toggleOption}\n            tabIndex={!searchable ? 0 : undefined}\n          />\n\n          {favoriteOptions.length > 0 && (\n            <div className=\"my-1 border-b border-border\" />\n          )}\n          <CommandItemList\n            options={options}\n            selectedValues={selectedValues}\n            multiple={multiple}\n            selectionIcon={selectionIcon}\n            selectionIconPosition={selectionIconPosition}\n            hasAnyIcon={hasAnyIcon}\n            toggleOption={toggleOption}\n            tabIndex={!searchable ? 0 : undefined}\n          />\n        </CommandGroup>\n      </CommandList>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;AA0BA,MAAaW,WAAmC,EAC9CC,YACAC,gBACAC,UACAC,gBACAC,eACAC,uBACAC,UAAU,EAAE,EACZC,WACAC,cACAC,kBAAkB,EAAA,OACd;CACJ,MAAMC,iBAAiBJ,QAAQK,QAAQC,QAAQ,CAACA,IAAIC,SAAS;CAC7D,MAAMC,aAAaR,QAAQS,MAAMH,QAAQA,IAAII,KAAK;CAElD,MAAMC,aAAa3B,iBAAiB4B,UAAUA,MAAMC,OAAO;AAE3D3B,iBAAgB;AACdS,iBAAemB,SAASC,SAAS;GAAEC,KAAK;GAAGC,UAAU;GAAW,CAAC;IAChE,CAACtB,gBAAgBgB,WAAW,CAAC;AAEhC,QACE,qBAAA,YAAA,EAAA,UAAA,CACGjB,cACC,oBAAC,cAAD;EACE,aAAY;EACZ,YAAYwB,MAAM;AAMhB,OAAI,EALwB;IAC1B;IACA;IACA;IACD,CAACE,SAASF,EAAEG,IAAI,IACYjB,eAAekB,SAAS,GACnDJ,GAAEK,iBAAiB;;EAGvB,kBAAiB;EACjB,WAAU;EAEb,CAAA,EACD,qBAAC,aAAD;EAAa,KAAK5B;EAAgB,UAAU,CAACD,aAAa,IAAI8B,KAAAA;YAA9D;GACE,oBAAC,cAAD;IAAc,WAAU;cAAuD;IAEjE,CAAA;GACb5B,YAAYe,eAAe,MAC1B,oBAAC,cAAD;IAAc,WAAU;cACtB,oBAAC,aAAD;KACE,OAAM;KACN,UAAUV;KACV,UAAU;KACV,WAAWlB,QACT,kBACA,iCACD;KACD,MAAK;KACL,iBAAec,eAAeyB,WAAWlB,eAAekB;eAExD,qBAAC,OAAD;MAAK,WAAU;gBAAf;OACGxB,kBAAkB,UACjB,oBAAC,OAAD;QACE,WAAWf,QACT,6DACA,qBACAc,eAAeyB,WAAWlB,eAAekB,UACvC,qCACH;kBAEAzB,eAAeyB,WAAWlB,eAAekB,UACxC,oBAAC,MAAD;SAAM,MAAK;SAAY,MAAM;SAC9B,CAAA;QAEJ,CAAA;OACAxB,kBAAkB,eACjB,EAAEC,0BAA0B,WAAWS,eACrC,oBAAC,OAAD;QAAK,WAAU;kBACZT,0BAA0B,UACzBF,eAAeyB,WAAWlB,eAAekB,UACvC,oBAAC,MAAD;SACE,MAAK;SACL,MAAM;SACN,WAAU;SAEb,CAAA;QAEN,CAAA;OACH,oBAAC,QAAD;QAAM,WAAU;kBACbzB,eAAeyB,WAAWlB,eAAekB,SACtC,iBACA;QACA,CAAA;OACLxB,kBAAkB,eACjBC,0BAA0B,WACxB,oBAAC,OAAD;QAAK,WAAU;kBACZF,eAAeyB,WAAWlB,eAAekB,UACxC,oBAAC,MAAD;SACE,MAAK;SACL,MAAM;SACN,WAAU;SAEb,CAAA;QAEJ,CAAA;OACA;;KACM,CAAA;IAEhB,CAAA;GACD,qBAAC,cAAD;IACE,WAAW1B,YAAYe,eAAe,KAAK,SAASa,KAAAA;cADtD;KAGE,oBAAC,iBAAD;MACE,SAASrB;MACON;MACND;MACKE;MACQC;MACXS;MACEN;MACd,UAAU,CAACR,aAAa,IAAI8B,KAAAA;MAAU,CAAA;KAGvCrB,gBAAgBmB,SAAS,KACxB,oBAAC,OAAD,EAAK,WAAU,+BAChB,CAAA;KACD,oBAAC,iBAAD;MACWtB;MACOH;MACND;MACKE;MACQC;MACXS;MACEN;MACd,UAAU,CAACR,aAAa,IAAI8B,KAAAA;MAAU,CAAA;KAE5B;;GACH;IACZ,EAAA,CAAA"}

package/dist/ui/components/select-field/select-field.js

@@ -58,7 +58,7 @@ const SelectFieldRaw = /* @__PURE__ */ React.forwardRef(({ options = [], favorit
 					"aria-label": label ? void 0 : multiple ? "Multi select" : "Select",
 					"aria-required": required,
 					"aria-expanded": isPopoverOpen,
-					className: twMerge("flex h-9 w-full items-center justify-between px-3 py-2", "rounded-md border border-gray-300 bg-gray-50 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100", "hover:border-gray-300 hover:bg-gray-100 dark:hover:border-slate-500 dark:hover:bg-slate-600 dark:hover:text-slate-100", "dark:hover:border-slate-500 dark:hover:bg-slate-600 dark:hover:text-slate-100", "focus:ring-1 focus:ring-gray-900 focus:ring-offset-0 focus:outline-none dark:focus:ring-slate-300", "focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0 dark:focus-visible:ring-slate-300", disabled && ["pointer-events-auto! cursor-not-allowed bg-gray-50 dark:bg-slate-800", "hover:border-gray-300 hover:bg-gray-50 dark:hover:border-slate-500 dark:hover:bg-slate-600 dark:hover:text-slate-100"], className),
+					className: twMerge("flex h-9 w-full items-center justify-between px-3 py-2", "rounded-md border border-border bg-background", "hover:hover-effect", "hover:hover-effect", "focus:ring-1 focus:ring-ring focus:ring-offset-0 focus:outline-none", "focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0", disabled && ["pointer-events-auto! cursor-not-allowed bg-background", "hover:hover-effect"], className),
 					...props,
 					ref,
 					children: /* @__PURE__ */ jsx(SelectedContent, {