npm - @powerhousedao/design-system - Versions diffs - 6.2.0-dev.9 → 6.2.0-rc.0 - Mend

@powerhousedao/design-system 6.2.0-dev.9 → 6.2.0-rc.0

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

Files changed (97) hide show

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

	@@ -1 +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"}
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-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 CHANGED Viewed

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

	@@ -1 +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"}
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-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 CHANGED Viewed

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

	@@ -1 +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"}
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-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 CHANGED Viewed

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

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

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

	@@ -1 +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"}
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-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.js CHANGED Viewed

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

	@@ -1 +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"}
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-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 CHANGED Viewed

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

	@@ -1 +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":"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"}
1	+ {"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":";;;;;;;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,qBAAqB/B,SAAwB,KAAK;CAEzE,MAAMgC,oBAAoBjC,aACvBkC,MAA2C;AAC1CJ,oBAAkBI,EAAEC,OAAOC,MAAM;IAEnC,CAACN,kBACH,CAAC;CAED,MAAMO,eAAerC,YACnB,OAAOoC,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,eAAetC,kBAAkB;AACrC,MAAIuB,MAAMgB,MAAM,CACTF,cAAad,MAAMgB,MAAM,CAAC;IAEhC,CAAChB,OAAOc,aAAa,CAAC;CAEzB,MAAMG,gBAAgBxC,aACnBkC,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,WAAWR,QAAQ,2BAA2BgB,UAAU;YAA7D,CACE,oBAAC,OAAD;GACE,OAAOK;GACP,UAAUU;GACV,WAAWO;GACE1B;GACb,UAAUC,YAAYgB,mBAAmB;GACzC,WAAU;GAA0B,CAAA,EAEtC,oBAAC,UAAD;GACE,SAASO;GACT,UAAUvB,YAAY,CAACQ,MAAMgB,MAAM,IAAIR,mBAAmB;GAC1D,WAAU;aAETnB;GACK,CAAA,CACJ;;AAIV,QACE,qBAAC,OAAD;EAAK,WAAWV,QAAQ,YAAYgB,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;MAA0B,CAAA;KAEzB,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,CAAqD,KACjDF,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;cAAqC;IACnD,CAAA;GACAW,SAAS,oBAAC,KAAD;IAAG,WAAU;cAAiCA;IAAU,CAAA;GACjE,CAACX,WACA,CAACW,SACDJ,MAAMgB,MAAM,IACZd,QAAQkB,WAAW,KACnB,CAACf,UACC,oBAAC,KAAD;IAAG,WAAU;cAAqC;IACnD,CAAA;GACC"}

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

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

	@@ -1 +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"}
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-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 CHANGED Viewed

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

package/dist/ui/components/select-field/select-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select-field.js","names":["twMerge","React","useCallback","useId","Button","Command","FormDescription","FormGroup","FormLabel","FormMessageList","Popover","PopoverContent","PopoverTrigger","withFieldValidation","Content","SelectedContent","useSelectField","SelectFieldRaw","forwardRef","options","favoriteOptions","defaultValue","value","onChange","onBlur","id","propId","name","label","required","disabled","errors","warnings","multiple","selectionIcon","selectionIconPosition","searchable","description","placeholder","className","contentClassName","contentAlign","props","ref","prefix","selectedValues","isPopoverOpen","commandListRef","toggleOption","handleClear","toggleAll","handleOpenChange","onTriggerBlur","e","length","preventDefault","target","control","focus","open","document","activeElement","undefined","find","opt","SelectField","displayName"],"sources":["../../../../src/ui/components/select-field/select-field.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport React, { useCallback, useId } from \"react\";\nimport type { FieldErrorHandling, InputBaseProps } from \"../../types.js\";\nimport { Button } from \"../button/button.js\";\nimport { Command } from \"../command/command.js\";\nimport type { SelectOption, SelectProps } from \"../enum-field/types.js\";\nimport { FormDescription } from \"../form-description/form-description.js\";\nimport { FormGroup } from \"../form-group/form-group.js\";\nimport { FormLabel } from \"../form-label/form-label.js\";\nimport { FormMessageList } from \"../form-message/message-list.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/popover.js\";\nimport { withFieldValidation } from \"../with-field-validation/with-field-validation.js\";\nimport { Content } from \"./content.js\";\nimport { SelectedContent } from \"./selected-content.js\";\nimport { useSelectField } from \"./use-select-field.js\";\n\ntype SelectFieldBaseProps = Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n \| keyof InputBaseProps<string \| string[]>\n \| keyof FieldErrorHandling\n \| keyof SelectProps\n>;\n\nexport type SelectFieldProps = SelectFieldBaseProps &\n InputBaseProps<string \| string[]> &\n FieldErrorHandling & {\n options?: SelectOption[];\n favoriteOptions?: SelectOption[];\n } & Omit<SelectProps, \"options\" \| \"favoriteOptions\">;\n\nexport const SelectFieldRaw = React.forwardRef<\n HTMLButtonElement,\n SelectFieldProps\n>(\n (\n {\n // core functionality props\n options = [],\n favoriteOptions = [],\n defaultValue,\n value,\n onChange,\n onBlur,\n\n // form-related props\n id: propId,\n name,\n label,\n required,\n disabled,\n\n // validation props\n errors = [],\n warnings = [],\n\n // behavior props\n multiple,\n selectionIcon = \"auto\",\n selectionIconPosition = \"left\",\n searchable,\n\n // display props\n description,\n placeholder,\n className,\n contentClassName,\n contentAlign = \"start\",\n\n ...props\n },\n ref,\n ) => {\n const prefix = useId();\n const id = propId ?? `${prefix}-select`;\n\n const {\n selectedValues,\n isPopoverOpen,\n commandListRef,\n toggleOption,\n handleClear,\n toggleAll,\n handleOpenChange,\n } = useSelectField({\n options,\n multiple,\n defaultValue,\n value,\n onChange,\n });\n\n const onTriggerBlur = useCallback(\n (e: React.FocusEvent<HTMLButtonElement>) => {\n if (!isPopoverOpen) {\n // trigger the blur event when the trigger loses focus but the popover is not open,\n // because when the popover is open, the trigger loses focus but the select as a component still has the focus\n onBlur?.(e);\n }\n },\n [onBlur, isPopoverOpen],\n );\n\n return (\n <FormGroup>\n {label && (\n <FormLabel\n htmlFor={id}\n required={required}\n disabled={disabled}\n hasError={errors.length > 0}\n inline={false}\n onClick={(e) => {\n e.preventDefault();\n (e.target as HTMLLabelElement).control?.focus();\n }}\n >\n {label}\n </FormLabel>\n )}\n <Popover\n open={isPopoverOpen}\n onOpenChange={(open) => {\n handleOpenChange(open);\n // if the popover is closing and it was not by the trigger button\n if (!open && document.activeElement?.id !== id) {\n onBlur?.({ target: {} } as React.FocusEvent<HTMLButtonElement>);\n }\n }}\n >\n <PopoverTrigger asChild={true}>\n {/* TODO: create a trigger component */}\n <Button\n id={id}\n name={name}\n type=\"button\"\n role=\"combobox\"\n onBlur={onTriggerBlur}\n disabled={disabled}\n aria-invalid={errors.length > 0}\n aria-label={\n label ? undefined : multiple ? \"Multi select\" : \"Select\"\n }\n aria-required={required}\n aria-expanded={isPopoverOpen}\n className={twMerge(\n \"flex h-9 w-full items-center justify-between px-3 py-2\",\n \"rounded-md border border-gray-300 bg-gray-50 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100\",\n \"hover:border-gray-300 hover:bg-gray-100 dark:hover:border-slate-500 dark:hover:bg-slate-600 dark:hover:text-slate-100\",\n \"dark:hover:border-slate-500 dark:hover:bg-slate-600 dark:hover:text-slate-100\",\n \"focus:ring-1 focus:ring-gray-900 focus:ring-offset-0 focus:outline-none dark:focus:ring-slate-300\",\n \"focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0 dark:focus-visible:ring-slate-300\",\n disabled && [\n \"pointer-events-auto! cursor-not-allowed bg-gray-50 dark:bg-slate-800\",\n \"hover:border-gray-300 hover:bg-gray-50 dark:hover:border-slate-500 dark:hover:bg-slate-600 dark:hover:text-slate-100\",\n ],\n className,\n )}\n {...props}\n ref={ref}\n >\n <SelectedContent\n selectedValues={selectedValues}\n options={[...favoriteOptions, ...options]}\n multiple={multiple}\n searchable={searchable}\n placeholder={placeholder}\n handleClear={handleClear}\n />\n </Button>\n </PopoverTrigger>\n <PopoverContent\n align={contentAlign}\n onEscapeKeyDown={(e) => {\n e.preventDefault();\n handleOpenChange(false);\n }}\n className={contentClassName}\n >\n <Command\n defaultValue={\n !multiple && selectedValues[0]\n ? options.find((opt) => opt.value === selectedValues[0])\n ?.label\n : undefined\n }\n >\n <Content\n favoriteOptions={favoriteOptions}\n searchable={searchable}\n commandListRef={commandListRef}\n multiple={multiple}\n selectedValues={selectedValues}\n selectionIcon={selectionIcon}\n selectionIconPosition={selectionIconPosition}\n options={options}\n toggleAll={toggleAll}\n toggleOption={toggleOption}\n />\n </Command>\n </PopoverContent>\n </Popover>\n {description && <FormDescription>{description}</FormDescription>}\n {warnings.length > 0 && (\n <FormMessageList messages={warnings} type=\"warning\" />\n )}\n {errors.length > 0 && (\n <FormMessageList messages={errors} type=\"error\" />\n )}\n </FormGroup>\n );\n },\n);\n\nexport const SelectField =\n withFieldValidation<SelectFieldProps>(SelectFieldRaw);\n\nSelectField.displayName = \"SelectField\";\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAaiB,iBAAiBhB,sBAAMiB,YAKhC,EAEEC,UAAU,EAAE,EACZC,kBAAkB,EAAE,EACpBC,cACAC,OACAC,UACAC,QAGAC,IAAIC,QACJC,MACAC,OACAC,UACAC,UAGAC,SAAS,EAAE,EACXC,WAAW,EAAE,EAGbC,UACAC,gBAAgB,QAChBC,wBAAwB,QACxBC,YAGAC,aACAC,aACAC,WACAC,kBACAC,eAAe,SAEf,GAAGC,SAELC,QACG;CACH,MAAMC,SAASzC,OAAO;CACtB,MAAMsB,KAAKC,UAAU,GAAGkB,OAAM;CAE9B,MAAM,EACJC,gBACAC,eACAC,gBACAC,cACAC,aACAC,WACAC,qBACEnC,eAAe;EACjBG;EACAc;EACAZ;EACAC;EACAC;EACD,CAAC;CAEF,MAAM6B,gBAAgBlD,aACnBmD,MAA2C;AAC1C,MAAI,CAACP,cAGHtB,UAAS6B,EAAE;IAGf,CAAC7B,QAAQsB,cACX,CAAC;AAED,QACE,qBAAC,WAAD,EAAA,UAAA;EACGlB,SACC,oBAAC,WAAD;GACE,SAASH;GACCI;GACAC;GACV,UAAUC,OAAOuB,SAAS;GAC1B,QAAQ;GACR,UAAUD,MAAM;AACdA,MAAEE,gBAAgB;AACjBF,MAAEG,OAA4BC,SAASC,OAAO;;aAGhD9B;GAEJ,CAAA;EACD,qBAAC,SAAD;GACE,MAAMkB;GACN,eAAea,SAAS;AACtBR,qBAAiBQ,KAAK;AAEtB,QAAI,CAACA,QAAQC,SAASC,eAAepC,OAAOA,GAC1CD,UAAS,EAAEgC,QAAQ,EAAC,EAA0C,CAAC;;aANrE,CAUE,oBAAC,gBAAD;IAAgB,SAAS;cAEvB,oBAAC,QAAD;KACM/B;KACEE;KACN,MAAK;KACL,MAAK;KACL,QAAQyB;KACEtB;KACV,gBAAcC,OAAOuB,SAAS;KAC9B,cACE1B,QAAQkC,KAAAA,IAAY7B,WAAW,iBAAiB;KAElD,iBAAeJ;KACf,iBAAeiB;KACf,WAAW9C,QACT,0DACA,4GACA,yHACA,iFACA,qGACA,kHACA8B,YAAY,CACV,wEACA,uHACD,EACDS,UACD;KACD,GAAIG;KACCC;eAEL,oBAAC,iBAAD;MACkBE;MAChB,SAAS,CAAC,GAAGzB,iBAAiB,GAAGD,QAAQ;MAC/Bc;MACEG;MACCE;MACAW;MAAY,CAAA;KAErB,CAAA;IACM,CAAA,EAChB,oBAAC,gBAAD;IACE,OAAOR;IACP,kBAAkBY,MAAM;AACtBA,OAAEE,gBAAgB;AAClBJ,sBAAiB,MAAM;;IAEzB,WAAWX;cAEX,oBAAC,SAAD;KACE,cACE,CAACP,YAAYY,eAAe,KACxB1B,QAAQ4C,MAAMC,QAAQA,IAAI1C,UAAUuB,eAAe,GAAG,EAClDjB,QACJkC,KAAAA;eAGN,oBAAC,SAAD;MACmB1C;MACLgB;MACIW;MACNd;MACMY;MACDX;MACQC;MACdhB;MACE+B;MACGF;MAAa,CAAA;KAEtB,CAAA;IACK,CAAA,CACT;;EACRX,eAAe,oBAAC,iBAAD,EAAA,UAAkBA,aAA8B,CAAA;EAC/DL,SAASsB,SAAS,KACjB,oBAAC,iBAAD;GAAiB,UAAUtB;GAAU,MAAK;GAC3C,CAAA;EACAD,OAAOuB,SAAS,KACf,oBAAC,iBAAD;GAAiB,UAAUvB;GAAQ,MAAK;GACzC,CAAA;EACS,EAAA,CAAA;EAGjB;AAED,MAAakC,cACXpD,oBAAsCI,eAAe;AAEvDgD,YAAYC,cAAc"}
1	+ {"version":3,"file":"select-field.js","names":["twMerge","React","useCallback","useId","Button","Command","FormDescription","FormGroup","FormLabel","FormMessageList","Popover","PopoverContent","PopoverTrigger","withFieldValidation","Content","SelectedContent","useSelectField","SelectFieldRaw","forwardRef","options","favoriteOptions","defaultValue","value","onChange","onBlur","id","propId","name","label","required","disabled","errors","warnings","multiple","selectionIcon","selectionIconPosition","searchable","description","placeholder","className","contentClassName","contentAlign","props","ref","prefix","selectedValues","isPopoverOpen","commandListRef","toggleOption","handleClear","toggleAll","handleOpenChange","onTriggerBlur","e","length","preventDefault","target","control","focus","open","document","activeElement","undefined","find","opt","SelectField","displayName"],"sources":["../../../../src/ui/components/select-field/select-field.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport React, { useCallback, useId } from \"react\";\nimport type { FieldErrorHandling, InputBaseProps } from \"../../types.js\";\nimport { Button } from \"../button/button.js\";\nimport { Command } from \"../command/command.js\";\nimport type { SelectOption, SelectProps } from \"../enum-field/types.js\";\nimport { FormDescription } from \"../form-description/form-description.js\";\nimport { FormGroup } from \"../form-group/form-group.js\";\nimport { FormLabel } from \"../form-label/form-label.js\";\nimport { FormMessageList } from \"../form-message/message-list.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/popover.js\";\nimport { withFieldValidation } from \"../with-field-validation/with-field-validation.js\";\nimport { Content } from \"./content.js\";\nimport { SelectedContent } from \"./selected-content.js\";\nimport { useSelectField } from \"./use-select-field.js\";\n\ntype SelectFieldBaseProps = Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n \| keyof InputBaseProps<string \| string[]>\n \| keyof FieldErrorHandling\n \| keyof SelectProps\n>;\n\nexport type SelectFieldProps = SelectFieldBaseProps &\n InputBaseProps<string \| string[]> &\n FieldErrorHandling & {\n options?: SelectOption[];\n favoriteOptions?: SelectOption[];\n } & Omit<SelectProps, \"options\" \| \"favoriteOptions\">;\n\nexport const SelectFieldRaw = React.forwardRef<\n HTMLButtonElement,\n SelectFieldProps\n>(\n (\n {\n // core functionality props\n options = [],\n favoriteOptions = [],\n defaultValue,\n value,\n onChange,\n onBlur,\n\n // form-related props\n id: propId,\n name,\n label,\n required,\n disabled,\n\n // validation props\n errors = [],\n warnings = [],\n\n // behavior props\n multiple,\n selectionIcon = \"auto\",\n selectionIconPosition = \"left\",\n searchable,\n\n // display props\n description,\n placeholder,\n className,\n contentClassName,\n contentAlign = \"start\",\n\n ...props\n },\n ref,\n ) => {\n const prefix = useId();\n const id = propId ?? `${prefix}-select`;\n\n const {\n selectedValues,\n isPopoverOpen,\n commandListRef,\n toggleOption,\n handleClear,\n toggleAll,\n handleOpenChange,\n } = useSelectField({\n options,\n multiple,\n defaultValue,\n value,\n onChange,\n });\n\n const onTriggerBlur = useCallback(\n (e: React.FocusEvent<HTMLButtonElement>) => {\n if (!isPopoverOpen) {\n // trigger the blur event when the trigger loses focus but the popover is not open,\n // because when the popover is open, the trigger loses focus but the select as a component still has the focus\n onBlur?.(e);\n }\n },\n [onBlur, isPopoverOpen],\n );\n\n return (\n <FormGroup>\n {label && (\n <FormLabel\n htmlFor={id}\n required={required}\n disabled={disabled}\n hasError={errors.length > 0}\n inline={false}\n onClick={(e) => {\n e.preventDefault();\n (e.target as HTMLLabelElement).control?.focus();\n }}\n >\n {label}\n </FormLabel>\n )}\n <Popover\n open={isPopoverOpen}\n onOpenChange={(open) => {\n handleOpenChange(open);\n // if the popover is closing and it was not by the trigger button\n if (!open && document.activeElement?.id !== id) {\n onBlur?.({ target: {} } as React.FocusEvent<HTMLButtonElement>);\n }\n }}\n >\n <PopoverTrigger asChild={true}>\n {/* TODO: create a trigger component */}\n <Button\n id={id}\n name={name}\n type=\"button\"\n role=\"combobox\"\n onBlur={onTriggerBlur}\n disabled={disabled}\n aria-invalid={errors.length > 0}\n aria-label={\n label ? undefined : multiple ? \"Multi select\" : \"Select\"\n }\n aria-required={required}\n aria-expanded={isPopoverOpen}\n className={twMerge(\n \"flex h-9 w-full items-center justify-between px-3 py-2\",\n \"rounded-md border border-border bg-background\",\n \"hover:hover-effect\",\n \"hover:hover-effect\",\n \"focus:ring-1 focus:ring-ring focus:ring-offset-0 focus:outline-none\",\n \"focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0\",\n disabled && [\n \"pointer-events-auto! cursor-not-allowed bg-background\",\n \"hover:hover-effect\",\n ],\n className,\n )}\n {...props}\n ref={ref}\n >\n <SelectedContent\n selectedValues={selectedValues}\n options={[...favoriteOptions, ...options]}\n multiple={multiple}\n searchable={searchable}\n placeholder={placeholder}\n handleClear={handleClear}\n />\n </Button>\n </PopoverTrigger>\n <PopoverContent\n align={contentAlign}\n onEscapeKeyDown={(e) => {\n e.preventDefault();\n handleOpenChange(false);\n }}\n className={contentClassName}\n >\n <Command\n defaultValue={\n !multiple && selectedValues[0]\n ? options.find((opt) => opt.value === selectedValues[0])\n ?.label\n : undefined\n }\n >\n <Content\n favoriteOptions={favoriteOptions}\n searchable={searchable}\n commandListRef={commandListRef}\n multiple={multiple}\n selectedValues={selectedValues}\n selectionIcon={selectionIcon}\n selectionIconPosition={selectionIconPosition}\n options={options}\n toggleAll={toggleAll}\n toggleOption={toggleOption}\n />\n </Command>\n </PopoverContent>\n </Popover>\n {description && <FormDescription>{description}</FormDescription>}\n {warnings.length > 0 && (\n <FormMessageList messages={warnings} type=\"warning\" />\n )}\n {errors.length > 0 && (\n <FormMessageList messages={errors} type=\"error\" />\n )}\n </FormGroup>\n );\n },\n);\n\nexport const SelectField =\n withFieldValidation<SelectFieldProps>(SelectFieldRaw);\n\nSelectField.displayName = \"SelectField\";\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAaiB,iBAAiBhB,sBAAMiB,YAKhC,EAEEC,UAAU,EAAE,EACZC,kBAAkB,EAAE,EACpBC,cACAC,OACAC,UACAC,QAGAC,IAAIC,QACJC,MACAC,OACAC,UACAC,UAGAC,SAAS,EAAE,EACXC,WAAW,EAAE,EAGbC,UACAC,gBAAgB,QAChBC,wBAAwB,QACxBC,YAGAC,aACAC,aACAC,WACAC,kBACAC,eAAe,SAEf,GAAGC,SAELC,QACG;CACH,MAAMC,SAASzC,OAAO;CACtB,MAAMsB,KAAKC,UAAU,GAAGkB,OAAM;CAE9B,MAAM,EACJC,gBACAC,eACAC,gBACAC,cACAC,aACAC,WACAC,qBACEnC,eAAe;EACjBG;EACAc;EACAZ;EACAC;EACAC;EACD,CAAC;CAEF,MAAM6B,gBAAgBlD,aACnBmD,MAA2C;AAC1C,MAAI,CAACP,cAGHtB,UAAS6B,EAAE;IAGf,CAAC7B,QAAQsB,cACX,CAAC;AAED,QACE,qBAAC,WAAD,EAAA,UAAA;EACGlB,SACC,oBAAC,WAAD;GACE,SAASH;GACCI;GACAC;GACV,UAAUC,OAAOuB,SAAS;GAC1B,QAAQ;GACR,UAAUD,MAAM;AACdA,MAAEE,gBAAgB;AACjBF,MAAEG,OAA4BC,SAASC,OAAO;;aAGhD9B;GAEJ,CAAA;EACD,qBAAC,SAAD;GACE,MAAMkB;GACN,eAAea,SAAS;AACtBR,qBAAiBQ,KAAK;AAEtB,QAAI,CAACA,QAAQC,SAASC,eAAepC,OAAOA,GAC1CD,UAAS,EAAEgC,QAAQ,EAAC,EAA0C,CAAC;;aANrE,CAUE,oBAAC,gBAAD;IAAgB,SAAS;cAEvB,oBAAC,QAAD;KACM/B;KACEE;KACN,MAAK;KACL,MAAK;KACL,QAAQyB;KACEtB;KACV,gBAAcC,OAAOuB,SAAS;KAC9B,cACE1B,QAAQkC,KAAAA,IAAY7B,WAAW,iBAAiB;KAElD,iBAAeJ;KACf,iBAAeiB;KACf,WAAW9C,QACT,0DACA,iDACA,sBACA,sBACA,uEACA,4EACA8B,YAAY,CACV,yDACA,qBACD,EACDS,UACD;KACD,GAAIG;KACCC;eAEL,oBAAC,iBAAD;MACkBE;MAChB,SAAS,CAAC,GAAGzB,iBAAiB,GAAGD,QAAQ;MAC/Bc;MACEG;MACCE;MACAW;MAAY,CAAA;KAErB,CAAA;IACM,CAAA,EAChB,oBAAC,gBAAD;IACE,OAAOR;IACP,kBAAkBY,MAAM;AACtBA,OAAEE,gBAAgB;AAClBJ,sBAAiB,MAAM;;IAEzB,WAAWX;cAEX,oBAAC,SAAD;KACE,cACE,CAACP,YAAYY,eAAe,KACxB1B,QAAQ4C,MAAMC,QAAQA,IAAI1C,UAAUuB,eAAe,GAAG,EAClDjB,QACJkC,KAAAA;eAGN,oBAAC,SAAD;MACmB1C;MACLgB;MACIW;MACNd;MACMY;MACDX;MACQC;MACdhB;MACE+B;MACGF;MAAa,CAAA;KAEtB,CAAA;IACK,CAAA,CACT;;EACRX,eAAe,oBAAC,iBAAD,EAAA,UAAkBA,aAA8B,CAAA;EAC/DL,SAASsB,SAAS,KACjB,oBAAC,iBAAD;GAAiB,UAAUtB;GAAU,MAAK;GAC3C,CAAA;EACAD,OAAOuB,SAAS,KACf,oBAAC,iBAAD;GAAiB,UAAUvB;GAAQ,MAAK;GACzC,CAAA;EACS,EAAA,CAAA;EAGjB;AAED,MAAakC,cACXpD,oBAAsCI,eAAe;AAEvDgD,YAAYC,cAAc"}