npm - @openhands/agent-canvas - Versions diffs - 1.0.0-beta.5 → 1.0.0-beta.7 - Mend

@openhands/agent-canvas 1.0.0-beta.5 → 1.0.0-beta.7

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 (879) hide show

package/dist/ui/combobox-caret.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../utils/utils.cjs`);let t=require(`react/jsx-runtime`);function n({className:e}){return(0,t.jsx)(`svg`,{"aria-hidden":!0,fill:`none`,focusable:`false`,height:`1em`,role:`presentation`,stroke:`currentColor`,strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:1.5,viewBox:`0 0 24 24`,width:`1em`,className:e,children:(0,t.jsx)(`path`,{d:`m6 9 6 6 6-6`})})}var r=`inline-flex items-center justify-center shrink-0 rounded-none bg-transparent px-1 min-w-0 w-auto h-auto text-medium cursor-pointer outline-none transition-[transform] duration-150 ease motion-reduce:transition-none`,i=e.cn(r,`!rounded-none !bg-transparent data-[hover=true]:!bg-transparent`);function a({isOpen:r,className:i}){return(0,t.jsx)(n,{className:e.cn(`shrink-0 transition-[transform] duration-150 ease motion-reduce:transition-none`,r&&`rotate-180`,i)})}exports.ComboboxCaretIcon=n,exports.ComboboxCaretInline=a,exports.comboboxCaretButtonClassName=r,exports.heroUiAutocompleteSelectorButtonClassName=i;
+require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../utils/utils.cjs`),t=require(`../utils/form-control-classes.cjs`);let n=require(`react/jsx-runtime`);function r({className:e}){return(0,n.jsx)(`svg`,{"aria-hidden":!0,fill:`none`,focusable:`false`,height:`1em`,role:`presentation`,stroke:`currentColor`,strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:1.5,viewBox:`0 0 24 24`,width:`1em`,className:e,children:(0,n.jsx)(`path`,{d:`m6 9 6 6 6-6`})})}var i=e.cn(`inline-flex items-center justify-center shrink-0 rounded-none bg-transparent px-1 min-w-0 w-auto h-auto text-medium cursor-pointer outline-none`,t.formControlTransformTransitionClassName),a=e.cn(i,`!rounded-none !bg-transparent data-[hover=true]:!bg-transparent`);function o({isOpen:i,className:a}){return(0,n.jsx)(r,{className:e.cn(`shrink-0`,t.formControlTransformTransitionClassName,i&&`rotate-180`,a)})}exports.ComboboxCaretIcon=r,exports.ComboboxCaretInline=o,exports.comboboxCaretButtonClassName=i,exports.heroUiAutocompleteSelectorButtonClassName=a;
 //# sourceMappingURL=combobox-caret.cjs.map

package/dist/ui/combobox-caret.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-caret.cjs","names":[],"sources":["../../src/ui/combobox-caret.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\n\nexport function ComboboxCaretIcon({ className }: { className?: string }) {\n return (\n <svg\n aria-hidden\n fill=\"none\"\n focusable=\"false\"\n height=\"1em\"\n role=\"presentation\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n viewBox=\"0 0 24 24\"\n width=\"1em\"\n className={className}\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n );\n}\n\n/** Matches HeroUI Autocomplete selectorButton styling. /\nexport const comboboxCaretButtonClassName =\n \"inline-flex items-center justify-center shrink-0 rounded-none bg-transparent px-1 min-w-0 w-auto h-auto text-medium cursor-pointer outline-none ~~transition-[transform] duration-150 ease motion-reduce:transition-none~~\";\n\n/* HeroUI Autocomplete selectorButton slot — keep only chevron rotation animated. /\nexport const heroUiAutocompleteSelectorButtonClassName = cn(\n comboboxCaretButtonClassName,\n \"!rounded-none !bg-transparent data-[hover=true]:!bg-transparent\",\n);\n\ninterface ComboboxCaretButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n isOpen?: boolean;\n}\n\nexport function ComboboxCaretButton({\n isOpen,\n className,\n disabled,\n children,\n ...props\n}: ComboboxCaretButtonProps) {\n return (\n <button\n type=\"button\"\n disabled={disabled}\n className={cn(\n comboboxCaretButtonClassName,\n isOpen && \"rotate-180\",\n disabled && \"cursor-not-allowed opacity-60\",\n className,\n )}\n {...props}\n >\n {children ?? <ComboboxCaretIcon />}\n </button>\n );\n}\n\n/* Inline caret for buttons where only the icon rotates, not the whole control. */\nexport function ComboboxCaretInline({\n isOpen,\n className,\n}: {\n isOpen?: boolean;\n className?: string;\n}) {\n return (\n <ComboboxCaretIcon\n className={cn(\n \"shrink-0 ~~transition-[transform] duration-150 ease motion-reduce:transition-none~~\",\n isOpen && \"rotate-180\",\n className,\n )}\n />\n );\n}\n"],"mappings":"~~sHAEA~~,SAAgB,EAAkB,CAAE,aAAqC,CACvE,OACE,EAAA,EAAA,KAAC,MAAD,CACE,cAAA,GACA,KAAK,OACL,UAAU,QACV,OAAO,MACP,KAAK,eACL,OAAO,eACP,cAAc,QACd,eAAe,QACf,YAAa,IACb,QAAQ,YACR,MAAM,MACK,sBAEX,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,eAAiB,CAAA,CACrB,CAAA,CAKV,IAAa,~~EACX~~,~~yNAGW~~,EAA4C,EAAA,GACvD,EACA,kEACD,CA+BD,SAAgB,EAAoB,CAClC,SACA,aAIC,CACD,OACE,EAAA,EAAA,KAAC,EAAD,CACE,UAAW,EAAA,GACT,~~kFACA~~,GAAU,aACV,EACD,CACD,CAAA"}
1	+ {"version":3,"file":"combobox-caret.cjs","names":[],"sources":["../../src/ui/combobox-caret.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\nimport { formControlTransformTransitionClassName } from \"#/utils/form-control-classes\";\n\nexport function ComboboxCaretIcon({ className }: { className?: string }) {\n return (\n <svg\n aria-hidden\n fill=\"none\"\n focusable=\"false\"\n height=\"1em\"\n role=\"presentation\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n viewBox=\"0 0 24 24\"\n width=\"1em\"\n className={className}\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n );\n}\n\n/** Matches HeroUI Autocomplete selectorButton styling. /\nexport const comboboxCaretButtonClassName = cn(\n \"inline-flex items-center justify-center shrink-0 rounded-none bg-transparent px-1 min-w-0 w-auto h-auto text-medium cursor-pointer outline-none\",\n formControlTransformTransitionClassName,\n);\n\n/* HeroUI Autocomplete selectorButton slot — keep only chevron rotation animated. /\nexport const heroUiAutocompleteSelectorButtonClassName = cn(\n comboboxCaretButtonClassName,\n \"!rounded-none !bg-transparent data-[hover=true]:!bg-transparent\",\n);\n\ninterface ComboboxCaretButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n isOpen?: boolean;\n}\n\nexport function ComboboxCaretButton({\n isOpen,\n className,\n disabled,\n children,\n ...props\n}: ComboboxCaretButtonProps) {\n return (\n <button\n type=\"button\"\n disabled={disabled}\n className={cn(\n comboboxCaretButtonClassName,\n isOpen && \"rotate-180\",\n disabled && \"cursor-not-allowed opacity-60\",\n className,\n )}\n {...props}\n >\n {children ?? <ComboboxCaretIcon />}\n </button>\n );\n}\n\n/* Inline caret for buttons where only the icon rotates, not the whole control. */\nexport function ComboboxCaretInline({\n isOpen,\n className,\n}: {\n isOpen?: boolean;\n className?: string;\n}) {\n return (\n <ComboboxCaretIcon\n className={cn(\n \"shrink-0\",\n formControlTransformTransitionClassName,\n isOpen && \"rotate-180\",\n className,\n )}\n />\n );\n}\n"],"mappings":"qKAGA,SAAgB,EAAkB,CAAE,aAAqC,CACvE,OACE,EAAA,EAAA,KAAC,MAAD,CACE,cAAA,GACA,KAAK,OACL,UAAU,QACV,OAAO,MACP,KAAK,eACL,OAAO,eACP,cAAc,QACd,eAAe,QACf,YAAa,IACb,QAAQ,YACR,MAAM,MACK,sBAEX,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,eAAiB,CAAA,CACrB,CAAA,CAKV,IAAa,EAA+B,EAAA,GAC1C,kJACA,EAAA,wCACD,CAGY,EAA4C,EAAA,GACvD,EACA,kEACD,CA+BD,SAAgB,EAAoB,CAClC,SACA,aAIC,CACD,OACE,EAAA,EAAA,KAAC,EAAD,CACE,UAAW,EAAA,GACT,WACA,EAAA,wCACA,GAAU,aACV,EACD,CACD,CAAA"}

package/dist/ui/combobox-caret.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ export declare function ComboboxCaretIcon({ className }: {
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 /** Matches HeroUI Autocomplete selectorButton styling. */
-export declare const comboboxCaretButtonClassName = "inline-flex items-center justify-center shrink-0 rounded-none bg-transparent px-1 min-w-0 w-auto h-auto text-medium cursor-pointer outline-none transition-[transform] duration-150 ease motion-reduce:transition-none";
+export declare const comboboxCaretButtonClassName: string;
 /** HeroUI Autocomplete selectorButton slot — keep only chevron rotation animated. */
 export declare const heroUiAutocompleteSelectorButtonClassName: string;
 interface ComboboxCaretButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {

package/dist/ui/combobox-caret.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { cn as e } from "../utils/utils.js";
-import { jsx as t } from "react/jsx-runtime";
+import { formControlTransformTransitionClassName as t } from "../utils/form-control-classes.js";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/ui/combobox-caret.tsx
-function n({ className: e }) {
-	return /* @__PURE__ */ t("svg", {
+function r({ className: e }) {
+	return /* @__PURE__ */ n("svg", {
 		"aria-hidden": !0,
 		fill: "none",
 		focusable: "false",
@@ -15,14 +16,14 @@ function n({ className: e }) {
 		viewBox: "0 0 24 24",
 		width: "1em",
 		className: e,
-		children: /* @__PURE__ */ t("path", { d: "m6 9 6 6 6-6" })
+		children: /* @__PURE__ */ n("path", { d: "m6 9 6 6 6-6" })
 	});
 }
-var r = "inline-flex items-center justify-center shrink-0 rounded-none bg-transparent px-1 min-w-0 w-auto h-auto text-medium cursor-pointer outline-none transition-[transform] duration-150 ease motion-reduce:transition-none", i = e(r, "!rounded-none !bg-transparent data-[hover=true]:!bg-transparent");
-function a({ isOpen: r, className: i }) {
-	return /* @__PURE__ */ t(n, { className: e("shrink-0 transition-[transform] duration-150 ease motion-reduce:transition-none", r && "rotate-180", i) });
+var i = e("inline-flex items-center justify-center shrink-0 rounded-none bg-transparent px-1 min-w-0 w-auto h-auto text-medium cursor-pointer outline-none", t), a = e(i, "!rounded-none !bg-transparent data-[hover=true]:!bg-transparent");
+function o({ isOpen: i, className: a }) {
+	return /* @__PURE__ */ n(r, { className: e("shrink-0", t, i && "rotate-180", a) });
 }
 //#endregion
-export { n as ComboboxCaretIcon, a as ComboboxCaretInline, r as comboboxCaretButtonClassName, i as heroUiAutocompleteSelectorButtonClassName };
+export { r as ComboboxCaretIcon, o as ComboboxCaretInline, i as comboboxCaretButtonClassName, a as heroUiAutocompleteSelectorButtonClassName };
 //# sourceMappingURL=combobox-caret.js.map

package/dist/ui/combobox-caret.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-caret.js","names":[],"sources":["../../src/ui/combobox-caret.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\n\nexport function ComboboxCaretIcon({ className }: { className?: string }) {\n return (\n <svg\n aria-hidden\n fill=\"none\"\n focusable=\"false\"\n height=\"1em\"\n role=\"presentation\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n viewBox=\"0 0 24 24\"\n width=\"1em\"\n className={className}\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n );\n}\n\n/** Matches HeroUI Autocomplete selectorButton styling. /\nexport const comboboxCaretButtonClassName =\n \"inline-flex items-center justify-center shrink-0 rounded-none bg-transparent px-1 min-w-0 w-auto h-auto text-medium cursor-pointer outline-none ~~transition-[transform] duration-150 ease motion-reduce:transition-none~~\";\n\n/* HeroUI Autocomplete selectorButton slot — keep only chevron rotation animated. /\nexport const heroUiAutocompleteSelectorButtonClassName = cn(\n comboboxCaretButtonClassName,\n \"!rounded-none !bg-transparent data-[hover=true]:!bg-transparent\",\n);\n\ninterface ComboboxCaretButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n isOpen?: boolean;\n}\n\nexport function ComboboxCaretButton({\n isOpen,\n className,\n disabled,\n children,\n ...props\n}: ComboboxCaretButtonProps) {\n return (\n <button\n type=\"button\"\n disabled={disabled}\n className={cn(\n comboboxCaretButtonClassName,\n isOpen && \"rotate-180\",\n disabled && \"cursor-not-allowed opacity-60\",\n className,\n )}\n {...props}\n >\n {children ?? <ComboboxCaretIcon />}\n </button>\n );\n}\n\n/* Inline caret for buttons where only the icon rotates, not the whole control. */\nexport function ComboboxCaretInline({\n isOpen,\n className,\n}: {\n isOpen?: boolean;\n className?: string;\n}) {\n return (\n <ComboboxCaretIcon\n className={cn(\n \"shrink-0 ~~transition-[transform] duration-150 ease motion-reduce:transition-none~~\",\n isOpen && \"rotate-180\",\n className,\n )}\n />\n );\n}\n"],"mappings":"~~;;;AAEA~~,SAAgB,EAAkB,EAAE,gBAAqC;AACvE,QACE,kBAAC,OAAD;EACE,eAAA;EACA,MAAK;EACL,WAAU;EACV,QAAO;EACP,MAAK;EACL,QAAO;EACP,eAAc;EACd,gBAAe;EACf,aAAa;EACb,SAAQ;EACR,OAAM;EACK;YAEX,kBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;EACrB,CAAA;;AAKV,IAAa,~~IACX~~,~~0NAGW~~,IAA4C,EACvD,GACA,kEACD;AA+BD,SAAgB,EAAoB,EAClC,WACA,gBAIC;AACD,QACE,kBAAC,GAAD,EACE,WAAW,EACT,~~mFACA~~,KAAU,cACV,EACD,EACD,CAAA"}
1	+ {"version":3,"file":"combobox-caret.js","names":[],"sources":["../../src/ui/combobox-caret.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\nimport { formControlTransformTransitionClassName } from \"#/utils/form-control-classes\";\n\nexport function ComboboxCaretIcon({ className }: { className?: string }) {\n return (\n <svg\n aria-hidden\n fill=\"none\"\n focusable=\"false\"\n height=\"1em\"\n role=\"presentation\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n viewBox=\"0 0 24 24\"\n width=\"1em\"\n className={className}\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n );\n}\n\n/** Matches HeroUI Autocomplete selectorButton styling. /\nexport const comboboxCaretButtonClassName = cn(\n \"inline-flex items-center justify-center shrink-0 rounded-none bg-transparent px-1 min-w-0 w-auto h-auto text-medium cursor-pointer outline-none\",\n formControlTransformTransitionClassName,\n);\n\n/* HeroUI Autocomplete selectorButton slot — keep only chevron rotation animated. /\nexport const heroUiAutocompleteSelectorButtonClassName = cn(\n comboboxCaretButtonClassName,\n \"!rounded-none !bg-transparent data-[hover=true]:!bg-transparent\",\n);\n\ninterface ComboboxCaretButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n isOpen?: boolean;\n}\n\nexport function ComboboxCaretButton({\n isOpen,\n className,\n disabled,\n children,\n ...props\n}: ComboboxCaretButtonProps) {\n return (\n <button\n type=\"button\"\n disabled={disabled}\n className={cn(\n comboboxCaretButtonClassName,\n isOpen && \"rotate-180\",\n disabled && \"cursor-not-allowed opacity-60\",\n className,\n )}\n {...props}\n >\n {children ?? <ComboboxCaretIcon />}\n </button>\n );\n}\n\n/* Inline caret for buttons where only the icon rotates, not the whole control. */\nexport function ComboboxCaretInline({\n isOpen,\n className,\n}: {\n isOpen?: boolean;\n className?: string;\n}) {\n return (\n <ComboboxCaretIcon\n className={cn(\n \"shrink-0\",\n formControlTransformTransitionClassName,\n isOpen && \"rotate-180\",\n className,\n )}\n />\n );\n}\n"],"mappings":";;;;AAGA,SAAgB,EAAkB,EAAE,gBAAqC;AACvE,QACE,kBAAC,OAAD;EACE,eAAA;EACA,MAAK;EACL,WAAU;EACV,QAAO;EACP,MAAK;EACL,QAAO;EACP,eAAc;EACd,gBAAe;EACf,aAAa;EACb,SAAQ;EACR,OAAM;EACK;YAEX,kBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;EACrB,CAAA;;AAKV,IAAa,IAA+B,EAC1C,mJACA,EACD,EAGY,IAA4C,EACvD,GACA,kEACD;AA+BD,SAAgB,EAAoB,EAClC,WACA,gBAIC;AACD,QACE,kBAAC,GAAD,EACE,WAAW,EACT,YACA,GACA,KAAU,cACV,EACD,EACD,CAAA"}

package/dist/ui/context-menu.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require(`../_virtual/_rolldown/runtime.cjs`),t=require(`../utils/utils.cjs`),n=require(`../node_modules/class-variance-authority/dist/index.cjs`);let r=require(`react`);r=e.__toESM(r,1);let i=require(`react/jsx-runtime`);var a=n.cva(`z-50 overflow-hidden text-[var(--oh-foreground)]`,{variants:{theme:{default:`absolute rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg`,naked:`relative`,popover:`relative rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg`},size:{compact:`py-1 px-1`,default:``},layout:{vertical:`flex flex-col gap-0`},position:{top:`bottom-full`,bottom:`top-full`,none:``},spacing:{default:`mt-2`,none:``},alignment:{left:`left-0`,right:`right-0`,none:``}},compoundVariants:[{theme:`naked`,className:`shadow-none`}],defaultVariants:{theme:`default`,size:`default`,layout:`vertical`,spacing:`default`}});function o({testId:e,children:n,className:r,style:o,ref:s,theme:c,size:l,layout:u,position:d,spacing:f,alignment:p}){return(0,i.jsx)(`ul`,{"data-testid":e,"data-position":d,ref:s,style:o,className:t.cn(a({theme:c,size:l,layout:u,position:d,spacing:f,alignment:p}),r),children:n})}exports.ContextMenu=o;
+const e=require(`../_virtual/_rolldown/runtime.cjs`),t=require(`../utils/utils.cjs`),n=require(`../node_modules/class-variance-authority/dist/index.cjs`),r=require(`../utils/dropdown-classes.cjs`);let i=require(`react`);i=e.__toESM(i,1);let a=require(`react/jsx-runtime`);var o=n.cva(`z-50 overflow-hidden text-[var(--oh-foreground)]`,{variants:{theme:{default:`absolute rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg`,naked:`relative`,popover:`relative rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg`},size:{compact:`py-1 px-1`,default:``},layout:{vertical:t.cn(`flex flex-col`,r.dropdownMenuListGapClassName)},position:{top:`bottom-full`,bottom:`top-full`,none:``},spacing:{default:`mt-2`,none:``},alignment:{left:`left-0`,right:`right-0`,none:``}},compoundVariants:[{theme:`naked`,className:`shadow-none`}],defaultVariants:{theme:`default`,size:`default`,layout:`vertical`,spacing:`default`}});function s({testId:e,children:n,className:r,style:i,ref:s,theme:c,size:l,layout:u,position:d,spacing:f,alignment:p}){return(0,a.jsx)(`ul`,{"data-testid":e,"data-position":d,ref:s,style:i,className:t.cn(o({theme:c,size:l,layout:u,position:d,spacing:f,alignment:p}),r),children:n})}exports.ContextMenu=s;
 //# sourceMappingURL=context-menu.cjs.map

package/dist/ui/context-menu.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context-menu.cjs","names":[],"sources":["../../src/ui/context-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"#/utils/utils\";\n\nconst contextMenuVariants = cva(\n \"z-50 overflow-hidden text-[var(--oh-foreground)]\",\n {\n variants: {\n theme: {\n default:\n \"absolute rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg\",\n naked: \"relative\",\n /** In document-body portal; coordinates come from inline `style`. */\n popover:\n \"relative rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg\",\n },\n size: {\n compact: \"py-1 px-1\",\n default: \"\",\n },\n layout: {\n vertical: \"flex flex-col ~~gap-0~~\",\n },\n position: {\n top: \"bottom-full\",\n bottom: \"top-full\",\n none: \"\",\n },\n spacing: {\n default: \"mt-2\",\n none: \"\",\n },\n alignment: {\n left: \"left-0\",\n right: \"right-0\",\n none: \"\",\n },\n },\n compoundVariants: [\n {\n theme: \"naked\",\n className: \"shadow-none\",\n },\n ],\n defaultVariants: {\n theme: \"default\",\n size: \"default\",\n layout: \"vertical\",\n spacing: \"default\",\n },\n },\n);\n\ninterface ContextMenuProps {\n ref?: React.RefObject<HTMLUListElement \| null>;\n testId?: string;\n children: React.ReactNode;\n className?: React.HTMLAttributes<HTMLUListElement>[\"className\"];\n style?: React.CSSProperties;\n theme?: VariantProps<typeof contextMenuVariants>[\"theme\"];\n size?: VariantProps<typeof contextMenuVariants>[\"size\"];\n layout?: VariantProps<typeof contextMenuVariants>[\"layout\"];\n position?: VariantProps<typeof contextMenuVariants>[\"position\"];\n spacing?: VariantProps<typeof contextMenuVariants>[\"spacing\"];\n alignment?: VariantProps<typeof contextMenuVariants>[\"alignment\"];\n}\n\nexport function ContextMenu({\n testId,\n children,\n className,\n style,\n ref,\n theme,\n size,\n layout,\n position,\n spacing,\n alignment,\n}: ContextMenuProps) {\n return (\n <ul\n data-testid={testId}\n data-position={position}\n ref={ref}\n style={style}\n className={cn(\n contextMenuVariants({\n theme,\n size,\n layout,\n position,\n spacing,\n alignment,\n }),\n className,\n )}\n >\n {children}\n </ul>\n );\n}\n"],"mappings":"~~qOAIA~~,IAAM,EAAsB,EAAA,IAC1B,mDACA,CACE,SAAU,CACR,MAAO,CACL,QACE,8FACF,MAAO,WAEP,QACE,8FACH,CACD,KAAM,CACJ,QAAS,YACT,QAAS,GACV,CACD,OAAQ,CACN,SAAU,~~sBACX~~,CACD,SAAU,CACR,IAAK,cACL,OAAQ,WACR,KAAM,GACP,CACD,QAAS,CACP,QAAS,OACT,KAAM,GACP,CACD,UAAW,CACT,KAAM,SACN,MAAO,UACP,KAAM,GACP,CACF,CACD,iBAAkB,CAChB,CACE,MAAO,QACP,UAAW,cACZ,CACF,CACD,gBAAiB,CACf,MAAO,UACP,KAAM,UACN,OAAQ,WACR,QAAS,UACV,CACF,CACF,CAgBD,SAAgB,EAAY,CAC1B,SACA,WACA,YACA,QACA,MACA,QACA,OACA,SACA,WACA,UACA,aACmB,CACnB,OACE,EAAA,EAAA,KAAC,KAAD,CACE,cAAa,EACb,gBAAe,EACV,MACE,QACP,UAAW,EAAA,GACT,EAAoB,CAClB,QACA,OACA,SACA,WACA,UACA,YACD,CAAC,CACF,EACD,CAEA,WACE,CAAA"}
1	+ {"version":3,"file":"context-menu.cjs","names":[],"sources":["../../src/ui/context-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"#/utils/utils\";\nimport { dropdownMenuListGapClassName } from \"#/utils/dropdown-classes\";\n\nconst contextMenuVariants = cva(\n \"z-50 overflow-hidden text-[var(--oh-foreground)]\",\n {\n variants: {\n theme: {\n default:\n \"absolute rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg\",\n naked: \"relative\",\n /** In document-body portal; coordinates come from inline `style`. */\n popover:\n \"relative rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg\",\n },\n size: {\n compact: \"py-1 px-1\",\n default: \"\",\n },\n layout: {\n vertical: cn(\"flex flex-col\", dropdownMenuListGapClassName),\n },\n position: {\n top: \"bottom-full\",\n bottom: \"top-full\",\n none: \"\",\n },\n spacing: {\n default: \"mt-2\",\n none: \"\",\n },\n alignment: {\n left: \"left-0\",\n right: \"right-0\",\n none: \"\",\n },\n },\n compoundVariants: [\n {\n theme: \"naked\",\n className: \"shadow-none\",\n },\n ],\n defaultVariants: {\n theme: \"default\",\n size: \"default\",\n layout: \"vertical\",\n spacing: \"default\",\n },\n },\n);\n\ninterface ContextMenuProps {\n ref?: React.RefObject<HTMLUListElement \| null>;\n testId?: string;\n children: React.ReactNode;\n className?: React.HTMLAttributes<HTMLUListElement>[\"className\"];\n style?: React.CSSProperties;\n theme?: VariantProps<typeof contextMenuVariants>[\"theme\"];\n size?: VariantProps<typeof contextMenuVariants>[\"size\"];\n layout?: VariantProps<typeof contextMenuVariants>[\"layout\"];\n position?: VariantProps<typeof contextMenuVariants>[\"position\"];\n spacing?: VariantProps<typeof contextMenuVariants>[\"spacing\"];\n alignment?: VariantProps<typeof contextMenuVariants>[\"alignment\"];\n}\n\nexport function ContextMenu({\n testId,\n children,\n className,\n style,\n ref,\n theme,\n size,\n layout,\n position,\n spacing,\n alignment,\n}: ContextMenuProps) {\n return (\n <ul\n data-testid={testId}\n data-position={position}\n ref={ref}\n style={style}\n className={cn(\n contextMenuVariants({\n theme,\n size,\n layout,\n position,\n spacing,\n alignment,\n }),\n className,\n )}\n >\n {children}\n </ul>\n );\n}\n"],"mappings":"gRAKA,IAAM,EAAsB,EAAA,IAC1B,mDACA,CACE,SAAU,CACR,MAAO,CACL,QACE,8FACF,MAAO,WAEP,QACE,8FACH,CACD,KAAM,CACJ,QAAS,YACT,QAAS,GACV,CACD,OAAQ,CACN,SAAU,EAAA,GAAG,gBAAiB,EAAA,6BAA6B,CAC5D,CACD,SAAU,CACR,IAAK,cACL,OAAQ,WACR,KAAM,GACP,CACD,QAAS,CACP,QAAS,OACT,KAAM,GACP,CACD,UAAW,CACT,KAAM,SACN,MAAO,UACP,KAAM,GACP,CACF,CACD,iBAAkB,CAChB,CACE,MAAO,QACP,UAAW,cACZ,CACF,CACD,gBAAiB,CACf,MAAO,UACP,KAAM,UACN,OAAQ,WACR,QAAS,UACV,CACF,CACF,CAgBD,SAAgB,EAAY,CAC1B,SACA,WACA,YACA,QACA,MACA,QACA,OACA,SACA,WACA,UACA,aACmB,CACnB,OACE,EAAA,EAAA,KAAC,KAAD,CACE,cAAa,EACb,gBAAe,EACV,MACE,QACP,UAAW,EAAA,GACT,EAAoB,CAClB,QACA,OACA,SACA,WACA,UACA,YACD,CAAC,CACF,EACD,CAEA,WACE,CAAA"}

package/dist/ui/context-menu.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import { cn as e } from "../utils/utils.js";
 import { cva as t } from "../node_modules/class-variance-authority/dist/index.js";
+import { dropdownMenuListGapClassName as n } from "../utils/dropdown-classes.js";
 import "react";
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/ui/context-menu.tsx
-var r = t("z-50 overflow-hidden text-[var(--oh-foreground)]", {
+var i = t("z-50 overflow-hidden text-[var(--oh-foreground)]", {
 	variants: {
 		theme: {
 			default: "absolute rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg",
@@ -14,7 +15,7 @@ var r = t("z-50 overflow-hidden text-[var(--oh-foreground)]", {
 			compact: "py-1 px-1",
 			default: ""
 		},
-		layout: { vertical: "flex flex-col gap-0" },
+		layout: { vertical: e("flex flex-col", n) },
 		position: {
 			top: "bottom-full",
 			bottom: "top-full",
@@ -41,13 +42,13 @@ var r = t("z-50 overflow-hidden text-[var(--oh-foreground)]", {
 		spacing: "default"
 	}
 });
-function i({ testId: t, children: i, className: a, style: o, ref: s, theme: c, size: l, layout: u, position: d, spacing: f, alignment: p }) {
-	return /* @__PURE__ */ n("ul", {
+function a({ testId: t, children: n, className: a, style: o, ref: s, theme: c, size: l, layout: u, position: d, spacing: f, alignment: p }) {
+	return /* @__PURE__ */ r("ul", {
 		"data-testid": t,
 		"data-position": d,
 		ref: s,
 		style: o,
-		className: e(r({
+		className: e(i({
 			theme: c,
 			size: l,
 			layout: u,
@@ -55,10 +56,10 @@ function i({ testId: t, children: i, className: a, style: o, ref: s, theme: c, s
 			spacing: f,
 			alignment: p
 		}), a),
-		children: i
+		children: n
 	});
 }
 //#endregion
-export { i as ContextMenu };
+export { a as ContextMenu };
 //# sourceMappingURL=context-menu.js.map

package/dist/ui/context-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context-menu.js","names":[],"sources":["../../src/ui/context-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"#/utils/utils\";\n\nconst contextMenuVariants = cva(\n \"z-50 overflow-hidden text-[var(--oh-foreground)]\",\n {\n variants: {\n theme: {\n default:\n \"absolute rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg\",\n naked: \"relative\",\n /** In document-body portal; coordinates come from inline `style`. */\n popover:\n \"relative rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg\",\n },\n size: {\n compact: \"py-1 px-1\",\n default: \"\",\n },\n layout: {\n vertical: \"flex flex-col ~~gap-0~~\",\n },\n position: {\n top: \"bottom-full\",\n bottom: \"top-full\",\n none: \"\",\n },\n spacing: {\n default: \"mt-2\",\n none: \"\",\n },\n alignment: {\n left: \"left-0\",\n right: \"right-0\",\n none: \"\",\n },\n },\n compoundVariants: [\n {\n theme: \"naked\",\n className: \"shadow-none\",\n },\n ],\n defaultVariants: {\n theme: \"default\",\n size: \"default\",\n layout: \"vertical\",\n spacing: \"default\",\n },\n },\n);\n\ninterface ContextMenuProps {\n ref?: React.RefObject<HTMLUListElement \| null>;\n testId?: string;\n children: React.ReactNode;\n className?: React.HTMLAttributes<HTMLUListElement>[\"className\"];\n style?: React.CSSProperties;\n theme?: VariantProps<typeof contextMenuVariants>[\"theme\"];\n size?: VariantProps<typeof contextMenuVariants>[\"size\"];\n layout?: VariantProps<typeof contextMenuVariants>[\"layout\"];\n position?: VariantProps<typeof contextMenuVariants>[\"position\"];\n spacing?: VariantProps<typeof contextMenuVariants>[\"spacing\"];\n alignment?: VariantProps<typeof contextMenuVariants>[\"alignment\"];\n}\n\nexport function ContextMenu({\n testId,\n children,\n className,\n style,\n ref,\n theme,\n size,\n layout,\n position,\n spacing,\n alignment,\n}: ContextMenuProps) {\n return (\n <ul\n data-testid={testId}\n data-position={position}\n ref={ref}\n style={style}\n className={cn(\n contextMenuVariants({\n theme,\n size,\n layout,\n position,\n spacing,\n alignment,\n }),\n className,\n )}\n >\n {children}\n </ul>\n );\n}\n"],"mappings":"~~;;;;;AAIA~~,IAAM,IAAsB,EAC1B,oDACA;CACE,UAAU;EACR,OAAO;GACL,SACE;GACF,OAAO;GAEP,SACE;GACH;EACD,MAAM;GACJ,SAAS;GACT,SAAS;GACV;EACD,QAAQ,EACN,UAAU,~~uBACX~~;EACD,UAAU;GACR,KAAK;GACL,QAAQ;GACR,MAAM;GACP;EACD,SAAS;GACP,SAAS;GACT,MAAM;GACP;EACD,WAAW;GACT,MAAM;GACN,OAAO;GACP,MAAM;GACP;EACF;CACD,kBAAkB,CAChB;EACE,OAAO;EACP,WAAW;EACZ,CACF;CACD,iBAAiB;EACf,OAAO;EACP,MAAM;EACN,QAAQ;EACR,SAAS;EACV;CACF,CACF;AAgBD,SAAgB,EAAY,EAC1B,WACA,aACA,cACA,UACA,QACA,UACA,SACA,WACA,aACA,YACA,gBACmB;AACnB,QACE,kBAAC,MAAD;EACE,eAAa;EACb,iBAAe;EACV;EACE;EACP,WAAW,EACT,EAAoB;GAClB;GACA;GACA;GACA;GACA;GACA;GACD,CAAC,EACF,EACD;EAEA;EACE,CAAA"}
1	+ {"version":3,"file":"context-menu.js","names":[],"sources":["../../src/ui/context-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"#/utils/utils\";\nimport { dropdownMenuListGapClassName } from \"#/utils/dropdown-classes\";\n\nconst contextMenuVariants = cva(\n \"z-50 overflow-hidden text-[var(--oh-foreground)]\",\n {\n variants: {\n theme: {\n default:\n \"absolute rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg\",\n naked: \"relative\",\n /** In document-body portal; coordinates come from inline `style`. */\n popover:\n \"relative rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg\",\n },\n size: {\n compact: \"py-1 px-1\",\n default: \"\",\n },\n layout: {\n vertical: cn(\"flex flex-col\", dropdownMenuListGapClassName),\n },\n position: {\n top: \"bottom-full\",\n bottom: \"top-full\",\n none: \"\",\n },\n spacing: {\n default: \"mt-2\",\n none: \"\",\n },\n alignment: {\n left: \"left-0\",\n right: \"right-0\",\n none: \"\",\n },\n },\n compoundVariants: [\n {\n theme: \"naked\",\n className: \"shadow-none\",\n },\n ],\n defaultVariants: {\n theme: \"default\",\n size: \"default\",\n layout: \"vertical\",\n spacing: \"default\",\n },\n },\n);\n\ninterface ContextMenuProps {\n ref?: React.RefObject<HTMLUListElement \| null>;\n testId?: string;\n children: React.ReactNode;\n className?: React.HTMLAttributes<HTMLUListElement>[\"className\"];\n style?: React.CSSProperties;\n theme?: VariantProps<typeof contextMenuVariants>[\"theme\"];\n size?: VariantProps<typeof contextMenuVariants>[\"size\"];\n layout?: VariantProps<typeof contextMenuVariants>[\"layout\"];\n position?: VariantProps<typeof contextMenuVariants>[\"position\"];\n spacing?: VariantProps<typeof contextMenuVariants>[\"spacing\"];\n alignment?: VariantProps<typeof contextMenuVariants>[\"alignment\"];\n}\n\nexport function ContextMenu({\n testId,\n children,\n className,\n style,\n ref,\n theme,\n size,\n layout,\n position,\n spacing,\n alignment,\n}: ContextMenuProps) {\n return (\n <ul\n data-testid={testId}\n data-position={position}\n ref={ref}\n style={style}\n className={cn(\n contextMenuVariants({\n theme,\n size,\n layout,\n position,\n spacing,\n alignment,\n }),\n className,\n )}\n >\n {children}\n </ul>\n );\n}\n"],"mappings":";;;;;;AAKA,IAAM,IAAsB,EAC1B,oDACA;CACE,UAAU;EACR,OAAO;GACL,SACE;GACF,OAAO;GAEP,SACE;GACH;EACD,MAAM;GACJ,SAAS;GACT,SAAS;GACV;EACD,QAAQ,EACN,UAAU,EAAG,iBAAiB,EAA6B,EAC5D;EACD,UAAU;GACR,KAAK;GACL,QAAQ;GACR,MAAM;GACP;EACD,SAAS;GACP,SAAS;GACT,MAAM;GACP;EACD,WAAW;GACT,MAAM;GACN,OAAO;GACP,MAAM;GACP;EACF;CACD,kBAAkB,CAChB;EACE,OAAO;EACP,WAAW;EACZ,CACF;CACD,iBAAiB;EACf,OAAO;EACP,MAAM;EACN,QAAQ;EACR,SAAS;EACV;CACF,CACF;AAgBD,SAAgB,EAAY,EAC1B,WACA,aACA,cACA,UACA,QACA,UACA,SACA,WACA,aACA,YACA,gBACmB;AACnB,QACE,kBAAC,MAAD;EACE,eAAa;EACb,iBAAe;EACV;EACE;EACP,WAAW,EACT,EAAoB;GAClB;GACA;GACA;GACA;GACA;GACA;GACD,CAAC,EACF,EACD;EAEA;EACE,CAAA"}

package/dist/ui/dropdown/dropdown-menu.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../utils/utils.cjs`),n=require(`../divider.cjs`);let r=require(`react`);r=e.__toESM(r,1);let i=require(`react/jsx-runtime`);function a({isOpen:e,filteredOptions:r,selectedItem:a,emptyMessage:o,getMenuProps:s,getItemProps:c,footer:l,openUpward:u=!1,fitContent:d=!1}){return(0,i.jsxs)(`div`,{className:t.cn(`absolute z-50 overflow-hidden text-white`,d?`min-w-full w-max`:`w-full`,u?`bottom-full mb-1`:`mt-1`,`bg-tertiary rounded-[6px] context-menu-box-shadow p-1`,`max-h-60 overflow-auto`,!e&&`hidden`),children:[(0,i.jsxs)(`ul`,{...s({className:`p-0`}),children:[e&&r.length===0&&(0,i.jsx)(`li`,{className:`px-2 py-2 text-sm text-[var(--oh-muted)] italic`,children:o}),e&&r.map((e,n)=>(0,i.jsxs)(`li`,{...c({item:e,index:n,className:t.cn(`px-2 py-2 cursor-pointer text-sm rounded`,`text-white focus:outline-none font-normal`,`flex items-center gap-2`,a?.value===e.value?`bg-[var(--oh-interactive-selected)] text-white`:`hover:bg-[var(--oh-interactive-hover)]`)}),children:[e.prefix,(0,i.jsx)(`span`,{className:`min-w-0 truncate`,children:e.label})]},e.value))]}),e&&l?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.Divider,{inset:`menu`}),(0,i.jsx)(`div`,{className:`p-0`,children:l})]}):null]})}exports.DropdownMenu=a;
+const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../utils/utils.cjs`),n=require(`../../utils/dropdown-classes.cjs`),r=require(`../divider.cjs`);let i=require(`react`);i=e.__toESM(i,1);let a=require(`react/jsx-runtime`);function o({isOpen:e,filteredOptions:i,selectedItem:o,emptyMessage:s,getMenuProps:c,getItemProps:l,footer:u,openUpward:d=!1,fitContent:f=!1}){return(0,a.jsxs)(`div`,{className:t.cn(`absolute z-50 overflow-hidden text-white`,f?`min-w-full w-max`:`w-full`,d?`bottom-full mb-1`:`mt-1`,`bg-tertiary rounded-[6px] context-menu-box-shadow p-1`,`max-h-60 overflow-auto`,!e&&`hidden`),children:[(0,a.jsxs)(`ul`,{...c({className:t.cn(`p-0`,n.dropdownMenuListClassName)}),children:[e&&i.length===0&&(0,a.jsx)(`li`,{className:`px-2 py-2 text-sm text-[var(--oh-muted)] italic`,children:s}),e&&i.map((e,r)=>(0,a.jsxs)(`li`,{...l({item:e,index:r,className:t.cn(n.dropdownMenuRowClassName,`focus:outline-none`,o?.value===e.value&&`bg-[var(--oh-interactive-selected)] text-white`)}),children:[e.prefix?(0,a.jsx)(`span`,{className:n.dropdownMenuRowIconWrapperClassName,children:e.prefix}):null,(0,a.jsx)(`span`,{className:`min-w-0 truncate`,children:e.label})]},e.value))]}),e&&u?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.Divider,{inset:`menu`}),(0,a.jsx)(`div`,{className:`p-0`,children:u})]}):null]})}exports.DropdownMenu=o;
 //# sourceMappingURL=dropdown-menu.cjs.map

package/dist/ui/dropdown/dropdown-menu.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-menu.cjs","names":[],"sources":["../../../src/ui/dropdown/dropdown-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { Divider } from \"#/ui/divider\";\nimport { cn } from \"#/utils/utils\";\nimport { DropdownOption } from \"./types\";\n\ninterface DropdownMenuProps {\n isOpen: boolean;\n filteredOptions: DropdownOption[];\n selectedItem: DropdownOption \| null;\n emptyMessage: string;\n getMenuProps: (props?: object) => object;\n getItemProps: (props: {\n item: DropdownOption;\n index: number;\n className?: string;\n }) => object;\n footer?: React.ReactNode;\n openUpward?: boolean;\n fitContent?: boolean;\n}\n\nexport function DropdownMenu({\n isOpen,\n filteredOptions,\n selectedItem,\n emptyMessage,\n getMenuProps,\n getItemProps,\n footer,\n openUpward = false,\n fitContent = false,\n}: DropdownMenuProps) {\n return (\n <div\n className={cn(\n \"absolute z-50 overflow-hidden text-white\",\n fitContent ? \"min-w-full w-max\" : \"w-full\",\n openUpward ? \"bottom-full mb-1\" : \"mt-1\",\n \"bg-tertiary rounded-[6px] context-menu-box-shadow p-1\",\n \"max-h-60 overflow-auto\",\n !isOpen && \"hidden\",\n )}\n >\n <ul {...getMenuProps({ className: \"p-0\" })}>\n {isOpen && filteredOptions.length === 0 && (\n <li className=\"px-2 py-2 text-sm text-[var(--oh-muted)] italic\">\n {emptyMessage}\n </li>\n )}\n {isOpen &&\n filteredOptions.map((option, index) => (\n <li\n key={option.value}\n {...getItemProps({\n item: option,\n index,\n className: cn(\n ~~\"px-2 py-2 cursor-pointer text-sm rounded\"~~,\n \"~~text-white~~ focus:outline-none ~~font-normal~~\",\n ~~\"flex items-center gap-2\",\n~~ selectedItem?.value === option.value\n ? \"bg-[var(--oh-interactive-selected)] text-white\"~~\n : \"hover:bg-[var(--oh-interactive-hover)]\"~~,\n ),\n })}\n >\n {option.prefix}\n <span className=\"min-w-0 truncate\">{option.label}</span>\n </li>\n ))}\n </ul>\n {isOpen && footer ? (\n <>\n <Divider inset=\"menu\" />\n <div className=\"p-0\">{footer}</div>\n </>\n ) : null}\n </div>\n );\n}\n"],"mappings":"~~kMAqBA~~,SAAgB,EAAa,CAC3B,SACA,kBACA,eACA,eACA,eACA,eACA,SACA,aAAa,GACb,aAAa,IACO,CACpB,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,2CACA,EAAa,mBAAqB,SAClC,EAAa,mBAAqB,OAClC,wDACA,yBACA,CAAC,GAAU,SACZ,UARH,EAUE,EAAA,EAAA,MAAC,KAAD,~~CAAI~~,GAAI,EAAa,CAAE,UAAW,MAAO,CAAC,~~UAA1C~~,~~CACG~~,GAAU,EAAgB,SAAW,IACpC,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,2DACX,EACE,CAAA,CAEN,GACC,EAAgB,KAAK,EAAQ,KAC3B,EAAA,EAAA,MAAC,KAAD,CAEE,GAAI,EAAa,CACf,KAAM,EACN,QACA,UAAW,EAAA,GACT,~~2CACA~~,~~4CACA~~,~~0BACA~~,GAAc,QAAU,EAAO,~~MAC3B~~,~~iDACA~~,~~yCACL,~~CACF,CAAC,~~UAbJ~~,~~CAeG~~,EAAO,~~QACR~~,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,4BAAoB,EAAO,MAAa,CAAA,CACrD,~~EAhBE~~,EAAO,~~MAgBT~~,CACL,CACD,GACJ,GAAU,GACT,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAS,MAAM,OAAS,CAAA,EACxB,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,eAAO,EAAa,CAAA,CAClC,CAAA,CAAA,CACD,KACA"}
1	+ {"version":3,"file":"dropdown-menu.cjs","names":[],"sources":["../../../src/ui/dropdown/dropdown-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { Divider } from \"#/ui/divider\";\nimport { cn } from \"#/utils/utils\";\nimport { DropdownOption } from \"./types\";\nimport {\n dropdownMenuListClassName,\n dropdownMenuRowClassName,\n dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-classes\";\n\ninterface DropdownMenuProps {\n isOpen: boolean;\n filteredOptions: DropdownOption[];\n selectedItem: DropdownOption \| null;\n emptyMessage: string;\n getMenuProps: (props?: object) => object;\n getItemProps: (props: {\n item: DropdownOption;\n index: number;\n className?: string;\n }) => object;\n footer?: React.ReactNode;\n openUpward?: boolean;\n fitContent?: boolean;\n}\n\nexport function DropdownMenu({\n isOpen,\n filteredOptions,\n selectedItem,\n emptyMessage,\n getMenuProps,\n getItemProps,\n footer,\n openUpward = false,\n fitContent = false,\n}: DropdownMenuProps) {\n return (\n <div\n className={cn(\n \"absolute z-50 overflow-hidden text-white\",\n fitContent ? \"min-w-full w-max\" : \"w-full\",\n openUpward ? \"bottom-full mb-1\" : \"mt-1\",\n \"bg-tertiary rounded-[6px] context-menu-box-shadow p-1\",\n \"max-h-60 overflow-auto\",\n !isOpen && \"hidden\",\n )}\n >\n <ul\n {...getMenuProps({ className: cn(\"p-0\", dropdownMenuListClassName) })}\n >\n {isOpen && filteredOptions.length === 0 && (\n <li className=\"px-2 py-2 text-sm text-[var(--oh-muted)] italic\">\n {emptyMessage}\n </li>\n )}\n {isOpen &&\n filteredOptions.map((option, index) => (\n <li\n key={option.value}\n {...getItemProps({\n item: option,\n index,\n className: cn(\n dropdownMenuRowClassName,\n \"focus:outline-none\",\n selectedItem?.value === option.value &&\n \"bg-[var(--oh-interactive-selected)] text-white\",\n ),\n })}\n >\n {option.prefix ? (\n <span className={dropdownMenuRowIconWrapperClassName}>\n {option.prefix}\n </span>\n ) : null}\n <span className=\"min-w-0 truncate\">{option.label}</span>\n </li>\n ))}\n </ul>\n {isOpen && footer ? (\n <>\n <Divider inset=\"menu\" />\n <div className=\"p-0\">{footer}</div>\n </>\n ) : null}\n </div>\n );\n}\n"],"mappings":"gPA0BA,SAAgB,EAAa,CAC3B,SACA,kBACA,eACA,eACA,eACA,eACA,SACA,aAAa,GACb,aAAa,IACO,CACpB,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,2CACA,EAAa,mBAAqB,SAClC,EAAa,mBAAqB,OAClC,wDACA,yBACA,CAAC,GAAU,SACZ,UARH,EAUE,EAAA,EAAA,MAAC,KAAD,CACE,GAAI,EAAa,CAAE,UAAW,EAAA,GAAG,MAAO,EAAA,0BAA0B,CAAE,CAAC,UADvE,CAGG,GAAU,EAAgB,SAAW,IACpC,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,2DACX,EACE,CAAA,CAEN,GACC,EAAgB,KAAK,EAAQ,KAC3B,EAAA,EAAA,MAAC,KAAD,CAEE,GAAI,EAAa,CACf,KAAM,EACN,QACA,UAAW,EAAA,GACT,EAAA,yBACA,qBACA,GAAc,QAAU,EAAO,OAC7B,iDACH,CACF,CAAC,UAXJ,CAaG,EAAO,QACN,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,6CACd,EAAO,OACH,CAAA,CACL,MACJ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,4BAAoB,EAAO,MAAa,CAAA,CACrD,EAlBE,EAAO,MAkBT,CACL,CACD,GACJ,GAAU,GACT,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAS,MAAM,OAAS,CAAA,EACxB,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,eAAO,EAAa,CAAA,CAClC,CAAA,CAAA,CACD,KACA"}

package/dist/ui/dropdown/dropdown-menu.js CHANGED Viewed

@@ -1,34 +1,38 @@
 import { cn as e } from "../../utils/utils.js";
-import { Divider as t } from "../divider.js";
+import { dropdownMenuListClassName as t, dropdownMenuRowClassName as n, dropdownMenuRowIconWrapperClassName as r } from "../../utils/dropdown-classes.js";
+import { Divider as i } from "../divider.js";
 import "react";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/ui/dropdown/dropdown-menu.tsx
-function a({ isOpen: a, filteredOptions: o, selectedItem: s, emptyMessage: c, getMenuProps: l, getItemProps: u, footer: d, openUpward: f = !1, fitContent: p = !1 }) {
-	return /* @__PURE__ */ i("div", {
-		className: e("absolute z-50 overflow-hidden text-white", p ? "min-w-full w-max" : "w-full", f ? "bottom-full mb-1" : "mt-1", "bg-tertiary rounded-[6px] context-menu-box-shadow p-1", "max-h-60 overflow-auto", !a && "hidden"),
-		children: [/* @__PURE__ */ i("ul", {
-			...l({ className: "p-0" }),
-			children: [a && o.length === 0 && /* @__PURE__ */ r("li", {
+function c({ isOpen: c, filteredOptions: l, selectedItem: u, emptyMessage: d, getMenuProps: f, getItemProps: p, footer: m, openUpward: h = !1, fitContent: g = !1 }) {
+	return /* @__PURE__ */ s("div", {
+		className: e("absolute z-50 overflow-hidden text-white", g ? "min-w-full w-max" : "w-full", h ? "bottom-full mb-1" : "mt-1", "bg-tertiary rounded-[6px] context-menu-box-shadow p-1", "max-h-60 overflow-auto", !c && "hidden"),
+		children: [/* @__PURE__ */ s("ul", {
+			...f({ className: e("p-0", t) }),
+			children: [c && l.length === 0 && /* @__PURE__ */ o("li", {
 				className: "px-2 py-2 text-sm text-[var(--oh-muted)] italic",
-				children: c
-			}), a && o.map((t, n) => /* @__PURE__ */ i("li", {
-				...u({
+				children: d
+			}), c && l.map((t, i) => /* @__PURE__ */ s("li", {
+				...p({
 					item: t,
-					index: n,
-					className: e("px-2 py-2 cursor-pointer text-sm rounded", "text-white focus:outline-none font-normal", "flex items-center gap-2", s?.value === t.value ? "bg-[var(--oh-interactive-selected)] text-white" : "hover:bg-[var(--oh-interactive-hover)]")
+					index: i,
+					className: e(n, "focus:outline-none", u?.value === t.value && "bg-[var(--oh-interactive-selected)] text-white")
 				}),
-				children: [t.prefix, /* @__PURE__ */ r("span", {
+				children: [t.prefix ? /* @__PURE__ */ o("span", {
+					className: r,
+					children: t.prefix
+				}) : null, /* @__PURE__ */ o("span", {
 					className: "min-w-0 truncate",
 					children: t.label
 				})]
 			}, t.value))]
-		}), a && d ? /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(t, { inset: "menu" }), /* @__PURE__ */ r("div", {
+		}), c && m ? /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(i, { inset: "menu" }), /* @__PURE__ */ o("div", {
 			className: "p-0",
-			children: d
+			children: m
 		})] }) : null]
 	});
 }
 //#endregion
-export { a as DropdownMenu };
+export { c as DropdownMenu };
 //# sourceMappingURL=dropdown-menu.js.map

package/dist/ui/dropdown/dropdown-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../../src/ui/dropdown/dropdown-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { Divider } from \"#/ui/divider\";\nimport { cn } from \"#/utils/utils\";\nimport { DropdownOption } from \"./types\";\n\ninterface DropdownMenuProps {\n isOpen: boolean;\n filteredOptions: DropdownOption[];\n selectedItem: DropdownOption \| null;\n emptyMessage: string;\n getMenuProps: (props?: object) => object;\n getItemProps: (props: {\n item: DropdownOption;\n index: number;\n className?: string;\n }) => object;\n footer?: React.ReactNode;\n openUpward?: boolean;\n fitContent?: boolean;\n}\n\nexport function DropdownMenu({\n isOpen,\n filteredOptions,\n selectedItem,\n emptyMessage,\n getMenuProps,\n getItemProps,\n footer,\n openUpward = false,\n fitContent = false,\n}: DropdownMenuProps) {\n return (\n <div\n className={cn(\n \"absolute z-50 overflow-hidden text-white\",\n fitContent ? \"min-w-full w-max\" : \"w-full\",\n openUpward ? \"bottom-full mb-1\" : \"mt-1\",\n \"bg-tertiary rounded-[6px] context-menu-box-shadow p-1\",\n \"max-h-60 overflow-auto\",\n !isOpen && \"hidden\",\n )}\n >\n <ul {...getMenuProps({ className: \"p-0\" })}>\n {isOpen && filteredOptions.length === 0 && (\n <li className=\"px-2 py-2 text-sm text-[var(--oh-muted)] italic\">\n {emptyMessage}\n </li>\n )}\n {isOpen &&\n filteredOptions.map((option, index) => (\n <li\n key={option.value}\n {...getItemProps({\n item: option,\n index,\n className: cn(\n ~~\"px-2 py-2 cursor-pointer text-sm rounded\"~~,\n \"~~text-white~~ focus:outline-none ~~font-normal~~\",\n ~~\"flex items-center gap-2\",\n~~ selectedItem?.value === option.value\n ? \"bg-[var(--oh-interactive-selected)] text-white\"~~\n : \"hover:bg-[var(--oh-interactive-hover)]\"~~,\n ),\n })}\n >\n {option.prefix}\n <span className=\"min-w-0 truncate\">{option.label}</span>\n </li>\n ))}\n </ul>\n {isOpen && footer ? (\n <>\n <Divider inset=\"menu\" />\n <div className=\"p-0\">{footer}</div>\n </>\n ) : null}\n </div>\n );\n}\n"],"mappings":"~~;;;;;AAqBA~~,SAAgB,EAAa,EAC3B,WACA,oBACA,iBACA,iBACA,iBACA,iBACA,WACA,gBAAa,IACb,gBAAa,MACO;AACpB,QACE,kBAAC,OAAD;EACE,WAAW,EACT,4CACA,IAAa,qBAAqB,UAClC,IAAa,qBAAqB,QAClC,yDACA,0BACA,CAAC,KAAU,SACZ;YARH,CAUE,kBAAC,MAAD;~~GAAI~~,GAAI,EAAa,EAAE,WAAW,OAAO,CAAC;~~aAA1C~~,~~CACG~~,KAAU,EAAgB,WAAW,KACpC,kBAAC,MAAD;IAAI,WAAU;cACX;IACE,CAAA,EAEN,KACC,EAAgB,KAAK,GAAQ,MAC3B,kBAAC,MAAD;IAEE,GAAI,EAAa;KACf,MAAM;KACN;KACA,WAAW,EACT,~~4CACA~~,~~6CACA~~,~~2BACA,~~GAAc,UAAU,EAAO,~~QAC3B~~,~~mDACA,yCACL~~;KACF,CAAC;~~cAbJ~~,~~CAeG~~,EAAO,~~QACR~~,kBAAC,QAAD;KAAM,WAAU;eAAoB,EAAO;KAAa,CAAA,CACrD;~~MAhBE~~,EAAO,~~MAgBT~~,CACL,CACD;MACJ,KAAU,IACT,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,OAAM,QAAS,CAAA,EACxB,kBAAC,OAAD;GAAK,WAAU;aAAO;GAAa,CAAA,CAClC,EAAA,CAAA,GACD,KACA"}
1	+ {"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../../src/ui/dropdown/dropdown-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { Divider } from \"#/ui/divider\";\nimport { cn } from \"#/utils/utils\";\nimport { DropdownOption } from \"./types\";\nimport {\n dropdownMenuListClassName,\n dropdownMenuRowClassName,\n dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-classes\";\n\ninterface DropdownMenuProps {\n isOpen: boolean;\n filteredOptions: DropdownOption[];\n selectedItem: DropdownOption \| null;\n emptyMessage: string;\n getMenuProps: (props?: object) => object;\n getItemProps: (props: {\n item: DropdownOption;\n index: number;\n className?: string;\n }) => object;\n footer?: React.ReactNode;\n openUpward?: boolean;\n fitContent?: boolean;\n}\n\nexport function DropdownMenu({\n isOpen,\n filteredOptions,\n selectedItem,\n emptyMessage,\n getMenuProps,\n getItemProps,\n footer,\n openUpward = false,\n fitContent = false,\n}: DropdownMenuProps) {\n return (\n <div\n className={cn(\n \"absolute z-50 overflow-hidden text-white\",\n fitContent ? \"min-w-full w-max\" : \"w-full\",\n openUpward ? \"bottom-full mb-1\" : \"mt-1\",\n \"bg-tertiary rounded-[6px] context-menu-box-shadow p-1\",\n \"max-h-60 overflow-auto\",\n !isOpen && \"hidden\",\n )}\n >\n <ul\n {...getMenuProps({ className: cn(\"p-0\", dropdownMenuListClassName) })}\n >\n {isOpen && filteredOptions.length === 0 && (\n <li className=\"px-2 py-2 text-sm text-[var(--oh-muted)] italic\">\n {emptyMessage}\n </li>\n )}\n {isOpen &&\n filteredOptions.map((option, index) => (\n <li\n key={option.value}\n {...getItemProps({\n item: option,\n index,\n className: cn(\n dropdownMenuRowClassName,\n \"focus:outline-none\",\n selectedItem?.value === option.value &&\n \"bg-[var(--oh-interactive-selected)] text-white\",\n ),\n })}\n >\n {option.prefix ? (\n <span className={dropdownMenuRowIconWrapperClassName}>\n {option.prefix}\n </span>\n ) : null}\n <span className=\"min-w-0 truncate\">{option.label}</span>\n </li>\n ))}\n </ul>\n {isOpen && footer ? (\n <>\n <Divider inset=\"menu\" />\n <div className=\"p-0\">{footer}</div>\n </>\n ) : null}\n </div>\n );\n}\n"],"mappings":";;;;;;AA0BA,SAAgB,EAAa,EAC3B,WACA,oBACA,iBACA,iBACA,iBACA,iBACA,WACA,gBAAa,IACb,gBAAa,MACO;AACpB,QACE,kBAAC,OAAD;EACE,WAAW,EACT,4CACA,IAAa,qBAAqB,UAClC,IAAa,qBAAqB,QAClC,yDACA,0BACA,CAAC,KAAU,SACZ;YARH,CAUE,kBAAC,MAAD;GACE,GAAI,EAAa,EAAE,WAAW,EAAG,OAAO,EAA0B,EAAE,CAAC;aADvE,CAGG,KAAU,EAAgB,WAAW,KACpC,kBAAC,MAAD;IAAI,WAAU;cACX;IACE,CAAA,EAEN,KACC,EAAgB,KAAK,GAAQ,MAC3B,kBAAC,MAAD;IAEE,GAAI,EAAa;KACf,MAAM;KACN;KACA,WAAW,EACT,GACA,sBACA,GAAc,UAAU,EAAO,SAC7B,iDACH;KACF,CAAC;cAXJ,CAaG,EAAO,SACN,kBAAC,QAAD;KAAM,WAAW;eACd,EAAO;KACH,CAAA,GACL,MACJ,kBAAC,QAAD;KAAM,WAAU;eAAoB,EAAO;KAAa,CAAA,CACrD;MAlBE,EAAO,MAkBT,CACL,CACD;MACJ,KAAU,IACT,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,OAAM,QAAS,CAAA,EACxB,kBAAC,OAAD;GAAK,WAAU;aAAO;GAAa,CAAA,CAClC,EAAA,CAAA,GACD,KACA"}

package/dist/ui/dropdown/dropdown.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../utils/utils.cjs`),n=require(`../../utils/form-control-classes.cjs`),r=require(`../../node_modules/downshift/dist/downshift.esm.cjs`),i=require(`./loading-spinner.cjs`),a=require(`./clear-button.cjs`),o=require(`./toggle-button.cjs`),s=require(`./dropdown-menu.cjs`),c=require(`./dropdown-input.cjs`);let l=require(`react`);l=e.__toESM(l,1);let u=require(`react/jsx-runtime`);var d={position:`absolute`,width:1,height:1,padding:0,margin:-1,overflow:`hidden`,clip:`rect(0, 0, 0, 0)`,whiteSpace:`nowrap`,border:0};function f({options:e,emptyMessage:f=`No options`,clearable:p=!1,loading:m=!1,disabled:h=!1,placeholder:g,defaultValue:_,onChange:v,testId:y,className:b,footer:x,openUpward:S=!1,hideTrigger:C=!1,defaultOpen:w=!1,openOnHover:T=!1,italicPlaceholder:E=!0,fitContent:D=!1}){let O=l.default.useRef(null),[k,A]=(0,l.useState)(_?.label??``),[j,M]=(0,l.useState)(``),N=e.filter(e=>e.label.toLowerCase().includes(j.toLowerCase())),{isOpen:P,selectedItem:F,selectItem:I,openMenu:L,closeMenu:R,getToggleButtonProps:z,getMenuProps:B,getItemProps:V,getInputProps:H}=r.useCombobox({items:N,itemToString:e=>e?.label??``,inputValue:k,stateReducer:(e,t)=>t.type===r.useCombobox.stateChangeTypes.InputClick&&e.isOpen?{...t.changes,isOpen:!0}:t.changes,initialIsOpen:w,onInputValueChange:({inputValue:e})=>{A(e??``),M(e??``)},defaultSelectedItem:_,onSelectedItemChange:({selectedItem:e})=>{v?.(e??null)},onIsOpenChange:({isOpen:e,selectedItem:t})=>{e?(A(``),M(``)):(A(t?.label??``),M(``))}}),U=m||h,W=F?e.find(e=>e.value===F.value)??F:null,G=e=>H({...e,onChange:e=>{A(e.target.value),M(e.target.value)}});return(0,u.jsxs)(`div`,{className:t.cn(`relative`,D?`inline-block w-auto`:`w-full`),"data-testid":y,onMouseEnter:T?()=>{O.current&&=(clearTimeout(O.current),null),L()}:void 0,onMouseLeave:T?()=>{O.current=setTimeout(()=>R(),150)}:void 0,children:[C?(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(`input`,{...G({"aria-label":g??`Filter options`,tabIndex:-1}),style:d}),(0,u.jsx)(`button`,{type:`button`,...z({tabIndex:-1}),style:d,"aria-hidden":!0})]}):(0,u.jsxs)(`div`,{className:t.cn(`bg-tertiary border border-[var(--oh-border-input)] rounded p-2`,`flex items-center gap-2`,D?`w-auto`:`w-full`,n.formControlShellClassName,`group w-full gap-2 px-3 text-[var(--oh-muted)] hover:text-white`,U&&`cursor-not-allowed opacity-60`,b),children:[W?.prefix?(0,u.jsx)(`span`,{className:`flex items-center shrink-0`,children:W.prefix}):null,(0,u.jsx)(c.DropdownInput,{placeholder:g,isDisabled:U,getInputProps:G,italicPlaceholder:E,fitContent:D}),m&&(0,u.jsx)(i.LoadingSpinner,{}),p&&F&&(0,u.jsx)(a.ClearButton,{onClear:()=>I(null)}),(0,u.jsx)(o.ToggleButton,{isOpen:P,isDisabled:U,getToggleButtonProps:z})]}),(0,u.jsx)(s.DropdownMenu,{isOpen:P,filteredOptions:N,selectedItem:F,emptyMessage:f,getMenuProps:B,getItemProps:V,footer:x,openUpward:S,fitContent:D})]})}exports.Dropdown=f;
+const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../utils/utils.cjs`),n=require(`../../utils/dropdown-classes.cjs`),r=require(`../../node_modules/downshift/dist/downshift.esm.cjs`),i=require(`./loading-spinner.cjs`),a=require(`./clear-button.cjs`),o=require(`./toggle-button.cjs`),s=require(`./dropdown-menu.cjs`),c=require(`./dropdown-input.cjs`);let l=require(`react`);l=e.__toESM(l,1);let u=require(`react/jsx-runtime`);var d={position:`absolute`,width:1,height:1,padding:0,margin:-1,overflow:`hidden`,clip:`rect(0, 0, 0, 0)`,whiteSpace:`nowrap`,border:0};function f({options:e,emptyMessage:f=`No options`,clearable:p=!1,loading:m=!1,disabled:h=!1,placeholder:g,defaultValue:_,onChange:v,testId:y,className:b,footer:x,openUpward:S=!1,hideTrigger:C=!1,defaultOpen:w=!1,openOnHover:T=!1,italicPlaceholder:E=!0,fitContent:D=!1}){let O=l.default.useRef(null),[k,A]=(0,l.useState)(_?.label??``),[j,M]=(0,l.useState)(``),N=e.filter(e=>e.label.toLowerCase().includes(j.toLowerCase())),{isOpen:P,selectedItem:F,selectItem:I,openMenu:L,closeMenu:R,getToggleButtonProps:z,getMenuProps:B,getItemProps:V,getInputProps:H}=r.useCombobox({items:N,itemToString:e=>e?.label??``,inputValue:k,stateReducer:(e,t)=>t.type===r.useCombobox.stateChangeTypes.InputClick&&e.isOpen?{...t.changes,isOpen:!0}:t.changes,initialIsOpen:w,onInputValueChange:({inputValue:e})=>{A(e??``),M(e??``)},defaultSelectedItem:_,onSelectedItemChange:({selectedItem:e})=>{v?.(e??null)},onIsOpenChange:({isOpen:e,selectedItem:t})=>{e?(A(``),M(``)):(A(t?.label??``),M(``))}}),U=m||h,W=F?e.find(e=>e.value===F.value)??F:null,G=e=>H({...e,onChange:e=>{A(e.target.value),M(e.target.value)}});return(0,u.jsxs)(`div`,{className:t.cn(`relative`,D?`inline-block w-auto`:`w-full`),"data-testid":y,onMouseEnter:T?()=>{O.current&&=(clearTimeout(O.current),null),L()}:void 0,onMouseLeave:T?()=>{O.current=setTimeout(()=>R(),150)}:void 0,children:[C?(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(`input`,{...G({"aria-label":g??`Filter options`,tabIndex:-1}),style:d}),(0,u.jsx)(`button`,{type:`button`,...z({tabIndex:-1}),style:d,"aria-hidden":!0})]}):(0,u.jsxs)(`div`,{className:t.cn(n.dropdownTriggerShellClassName,D?`w-auto`:`w-full`,U&&`cursor-not-allowed opacity-60`,b),children:[W?.prefix?(0,u.jsx)(`span`,{className:`flex items-center shrink-0`,children:W.prefix}):null,(0,u.jsx)(c.DropdownInput,{placeholder:g,isDisabled:U,getInputProps:G,italicPlaceholder:E,fitContent:D}),m&&(0,u.jsx)(i.LoadingSpinner,{}),p&&F&&(0,u.jsx)(a.ClearButton,{onClear:()=>I(null)}),(0,u.jsx)(o.ToggleButton,{isOpen:P,isDisabled:U,getToggleButtonProps:z})]}),(0,u.jsx)(s.DropdownMenu,{isOpen:P,filteredOptions:N,selectedItem:F,emptyMessage:f,getMenuProps:B,getItemProps:V,footer:x,openUpward:S,fitContent:D})]})}exports.Dropdown=f;
 //# sourceMappingURL=dropdown.cjs.map

package/dist/ui/dropdown/dropdown.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.cjs","names":[],"sources":["../../../src/ui/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useCombobox } from \"downshift\";\nimport { cn } from \"#/utils/utils\";\nimport { DropdownOption } from \"./types\";\nimport { formControlShellClassName } from \"#/utils/form-control-classes\";\nimport { LoadingSpinner } from \"./loading-spinner\";\nimport { ClearButton } from \"./clear-button\";\nimport { ToggleButton } from \"./toggle-button\";\nimport { DropdownMenu } from \"./dropdown-menu\";\nimport { DropdownInput } from \"./dropdown-input\";\n\n// Equivalent to Tailwind's `sr-only`, inlined so we don't depend on the\n// utility class being preserved by the host project's CSS pipeline.\nconst visuallyHiddenStyle: React.CSSProperties = {\n position: \"absolute\",\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: \"hidden\",\n clip: \"rect(0, 0, 0, 0)\",\n whiteSpace: \"nowrap\",\n border: 0,\n};\n\ninterface DropdownProps {\n options: DropdownOption[];\n emptyMessage?: string;\n clearable?: boolean;\n loading?: boolean;\n disabled?: boolean;\n placeholder?: string;\n defaultValue?: DropdownOption;\n onChange?: (item: DropdownOption \| null) => void;\n testId?: string;\n className?: string;\n footer?: React.ReactNode;\n openUpward?: boolean;\n hideTrigger?: boolean;\n defaultOpen?: boolean;\n /** Open the dropdown menu on hover instead of requiring a click. /\n openOnHover?: boolean;\n /* When false, the combobox placeholder uses normal (non-italic) type. /\n italicPlaceholder?: boolean;\n /* Size the trigger to its label instead of stretching to the container width. */\n fitContent?: boolean;\n}\n\nexport function Dropdown({\n options,\n emptyMessage = \"No options\",\n clearable = false,\n loading = false,\n disabled = false,\n placeholder,\n defaultValue,\n onChange,\n testId,\n className,\n footer,\n openUpward = false,\n hideTrigger = false,\n defaultOpen = false,\n openOnHover = false,\n italicPlaceholder = true,\n fitContent = false,\n}: DropdownProps) {\n const closeTimerRef = React.useRef<ReturnType<typeof setTimeout> \| null>(\n null,\n );\n const [inputValue, setInputValue] = useState(defaultValue?.label ?? \"\");\n const [searchTerm, setSearchTerm] = useState(\"\");\n\n const filteredOptions = options.filter((option) =>\n option.label.toLowerCase().includes(searchTerm.toLowerCase()),\n );\n\n const {\n isOpen,\n selectedItem,\n selectItem,\n openMenu,\n closeMenu,\n getToggleButtonProps,\n getMenuProps,\n getItemProps,\n getInputProps,\n } = useCombobox({\n items: filteredOptions,\n itemToString: (item) => item?.label ?? \"\",\n inputValue,\n stateReducer: (state, actionAndChanges) =>\n actionAndChanges.type === useCombobox.stateChangeTypes.InputClick &&\n state.isOpen\n ? { ...actionAndChanges.changes, isOpen: true }\n : actionAndChanges.changes,\n initialIsOpen: defaultOpen,\n onInputValueChange: ({ inputValue: newValue }) => {\n setInputValue(newValue ?? \"\");\n setSearchTerm(newValue ?? \"\");\n },\n defaultSelectedItem: defaultValue,\n onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {\n onChange?.(newSelectedItem ?? null);\n },\n onIsOpenChange: ({\n isOpen: newIsOpen,\n selectedItem: currentSelectedItem,\n }) => {\n if (newIsOpen) {\n // Clear the input on open so the user sees an empty search box\n // (with the placeholder reminding them of the current value)\n // and the full options list. Otherwise the active label would\n // appear both in the trigger AND as the highlighted menu row.\n setInputValue(\"\");\n setSearchTerm(\"\");\n } else {\n setInputValue(currentSelectedItem?.label ?? \"\");\n setSearchTerm(\"\");\n }\n },\n });\n\n const isDisabled = loading \|\| disabled;\n\n // `selectedItem` is downshift's internal state, frozen to whatever\n // initialized it. Resolve the currently selected option against the\n // live `options` array so per-option fields like `prefix` (e.g. a\n // status indicator that re-renders on a timer) update on the trigger\n // without remounting the dropdown.\n const liveSelectedOption = selectedItem\n ? (options.find((o) => o.value === selectedItem.value) ?? selectedItem)\n : null;\n\n // Wrap getInputProps to inject a direct onChange handler that preserves\n // cursor position. Downshift's default onInputValueChange resets cursor\n // to end of input on every keystroke; reading from e.target.value keeps\n // the browser's native cursor position intact.\n const getInputPropsWithCursorFix = (props?: object) =>\n getInputProps({\n ...props,\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.target.value);\n setSearchTerm(e.target.value);\n },\n });\n\n return (\n <div\n className={cn(\"relative\", fitContent ? \"inline-block w-auto\" : \"w-full\")}\n data-testid={testId}\n onMouseEnter={\n openOnHover\n ? () => {\n if (closeTimerRef.current) {\n clearTimeout(closeTimerRef.current);\n closeTimerRef.current = null;\n }\n openMenu();\n }\n : undefined\n }\n onMouseLeave={\n openOnHover\n ? () => {\n closeTimerRef.current = setTimeout(() => closeMenu(), 150);\n }\n : undefined\n }\n >\n {!hideTrigger ? (\n <div\n className={cn(\n \"bg-tertiary border border-[var(--oh-border-input)] rounded p-2\",\n \"flex items-center gap-2\",\n fitContent ? \"w-auto\" : \"w-full\",\n formControlShellClassName,\n \"group w-full gap-2 px-3 text-[var(--oh-muted)] hover:text-white\",\n isDisabled && \"cursor-not-allowed opacity-60\",\n className,\n )}\n >\n {liveSelectedOption?.prefix ? (\n <span className=\"flex items-center shrink-0\">\n {liveSelectedOption.prefix}\n </span>\n ) : null}\n <DropdownInput\n placeholder={placeholder}\n isDisabled={isDisabled}\n getInputProps={getInputPropsWithCursorFix}\n italicPlaceholder={italicPlaceholder}\n fitContent={fitContent}\n />\n {loading && <LoadingSpinner />}\n {clearable && selectedItem && (\n <ClearButton onClear={() => selectItem(null)} />\n )}\n <ToggleButton\n isOpen={isOpen}\n isDisabled={isDisabled}\n getToggleButtonProps={getToggleButtonProps}\n />\n </div>\n ) : (\n // downshift's useCombobox always expects getInputProps() (and the\n // toggle button) to be wired up. When the trigger is hidden (e.g.\n // collapsed-sidebar popover) we still need to mount a real input\n // so it stops warning every render. Keep it visually hidden but\n // present in the DOM for accessibility.\n <>\n <input\n {...getInputPropsWithCursorFix({\n \"aria-label\": placeholder ?? \"Filter options\",\n tabIndex: -1,\n })}\n style={visuallyHiddenStyle}\n />\n <button\n type=\"button\"\n {...getToggleButtonProps({ tabIndex: -1 })}\n style={visuallyHiddenStyle}\n aria-hidden\n />\n </>\n )}\n <DropdownMenu\n isOpen={isOpen}\n filteredOptions={filteredOptions}\n selectedItem={selectedItem}\n emptyMessage={emptyMessage}\n getMenuProps={getMenuProps}\n getItemProps={getItemProps}\n footer={footer}\n openUpward={openUpward}\n fitContent={fitContent}\n />\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"dropdown.cjs","names":[],"sources":["../../../src/ui/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useCombobox } from \"downshift\";\nimport { cn } from \"#/utils/utils\";\nimport { DropdownOption } from \"./types\";\nimport { dropdownTriggerShellClassName } from \"#/utils/dropdown-classes\";\nimport { LoadingSpinner } from \"./loading-spinner\";\nimport { ClearButton } from \"./clear-button\";\nimport { ToggleButton } from \"./toggle-button\";\nimport { DropdownMenu } from \"./dropdown-menu\";\nimport { DropdownInput } from \"./dropdown-input\";\n\n// Equivalent to Tailwind's `sr-only`, inlined so we don't depend on the\n// utility class being preserved by the host project's CSS pipeline.\nconst visuallyHiddenStyle: React.CSSProperties = {\n position: \"absolute\",\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: \"hidden\",\n clip: \"rect(0, 0, 0, 0)\",\n whiteSpace: \"nowrap\",\n border: 0,\n};\n\ninterface DropdownProps {\n options: DropdownOption[];\n emptyMessage?: string;\n clearable?: boolean;\n loading?: boolean;\n disabled?: boolean;\n placeholder?: string;\n defaultValue?: DropdownOption;\n onChange?: (item: DropdownOption \| null) => void;\n testId?: string;\n className?: string;\n footer?: React.ReactNode;\n openUpward?: boolean;\n hideTrigger?: boolean;\n defaultOpen?: boolean;\n /** Open the dropdown menu on hover instead of requiring a click. /\n openOnHover?: boolean;\n /* When false, the combobox placeholder uses normal (non-italic) type. /\n italicPlaceholder?: boolean;\n /* Size the trigger to its label instead of stretching to the container width. */\n fitContent?: boolean;\n}\n\nexport function Dropdown({\n options,\n emptyMessage = \"No options\",\n clearable = false,\n loading = false,\n disabled = false,\n placeholder,\n defaultValue,\n onChange,\n testId,\n className,\n footer,\n openUpward = false,\n hideTrigger = false,\n defaultOpen = false,\n openOnHover = false,\n italicPlaceholder = true,\n fitContent = false,\n}: DropdownProps) {\n const closeTimerRef = React.useRef<ReturnType<typeof setTimeout> \| null>(\n null,\n );\n const [inputValue, setInputValue] = useState(defaultValue?.label ?? \"\");\n const [searchTerm, setSearchTerm] = useState(\"\");\n\n const filteredOptions = options.filter((option) =>\n option.label.toLowerCase().includes(searchTerm.toLowerCase()),\n );\n\n const {\n isOpen,\n selectedItem,\n selectItem,\n openMenu,\n closeMenu,\n getToggleButtonProps,\n getMenuProps,\n getItemProps,\n getInputProps,\n } = useCombobox({\n items: filteredOptions,\n itemToString: (item) => item?.label ?? \"\",\n inputValue,\n stateReducer: (state, actionAndChanges) =>\n actionAndChanges.type === useCombobox.stateChangeTypes.InputClick &&\n state.isOpen\n ? { ...actionAndChanges.changes, isOpen: true }\n : actionAndChanges.changes,\n initialIsOpen: defaultOpen,\n onInputValueChange: ({ inputValue: newValue }) => {\n setInputValue(newValue ?? \"\");\n setSearchTerm(newValue ?? \"\");\n },\n defaultSelectedItem: defaultValue,\n onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {\n onChange?.(newSelectedItem ?? null);\n },\n onIsOpenChange: ({\n isOpen: newIsOpen,\n selectedItem: currentSelectedItem,\n }) => {\n if (newIsOpen) {\n // Clear the input on open so the user sees an empty search box\n // (with the placeholder reminding them of the current value)\n // and the full options list. Otherwise the active label would\n // appear both in the trigger AND as the highlighted menu row.\n setInputValue(\"\");\n setSearchTerm(\"\");\n } else {\n setInputValue(currentSelectedItem?.label ?? \"\");\n setSearchTerm(\"\");\n }\n },\n });\n\n const isDisabled = loading \|\| disabled;\n\n // `selectedItem` is downshift's internal state, frozen to whatever\n // initialized it. Resolve the currently selected option against the\n // live `options` array so per-option fields like `prefix` (e.g. a\n // status indicator that re-renders on a timer) update on the trigger\n // without remounting the dropdown.\n const liveSelectedOption = selectedItem\n ? (options.find((o) => o.value === selectedItem.value) ?? selectedItem)\n : null;\n\n // Wrap getInputProps to inject a direct onChange handler that preserves\n // cursor position. Downshift's default onInputValueChange resets cursor\n // to end of input on every keystroke; reading from e.target.value keeps\n // the browser's native cursor position intact.\n const getInputPropsWithCursorFix = (props?: object) =>\n getInputProps({\n ...props,\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.target.value);\n setSearchTerm(e.target.value);\n },\n });\n\n return (\n <div\n className={cn(\"relative\", fitContent ? \"inline-block w-auto\" : \"w-full\")}\n data-testid={testId}\n onMouseEnter={\n openOnHover\n ? () => {\n if (closeTimerRef.current) {\n clearTimeout(closeTimerRef.current);\n closeTimerRef.current = null;\n }\n openMenu();\n }\n : undefined\n }\n onMouseLeave={\n openOnHover\n ? () => {\n closeTimerRef.current = setTimeout(() => closeMenu(), 150);\n }\n : undefined\n }\n >\n {!hideTrigger ? (\n <div\n className={cn(\n dropdownTriggerShellClassName,\n fitContent ? \"w-auto\" : \"w-full\",\n isDisabled && \"cursor-not-allowed opacity-60\",\n className,\n )}\n >\n {liveSelectedOption?.prefix ? (\n <span className=\"flex items-center shrink-0\">\n {liveSelectedOption.prefix}\n </span>\n ) : null}\n <DropdownInput\n placeholder={placeholder}\n isDisabled={isDisabled}\n getInputProps={getInputPropsWithCursorFix}\n italicPlaceholder={italicPlaceholder}\n fitContent={fitContent}\n />\n {loading && <LoadingSpinner />}\n {clearable && selectedItem && (\n <ClearButton onClear={() => selectItem(null)} />\n )}\n <ToggleButton\n isOpen={isOpen}\n isDisabled={isDisabled}\n getToggleButtonProps={getToggleButtonProps}\n />\n </div>\n ) : (\n // downshift's useCombobox always expects getInputProps() (and the\n // toggle button) to be wired up. When the trigger is hidden (e.g.\n // collapsed-sidebar popover) we still need to mount a real input\n // so it stops warning every render. Keep it visually hidden but\n // present in the DOM for accessibility.\n <>\n <input\n {...getInputPropsWithCursorFix({\n \"aria-label\": placeholder ?? \"Filter options\",\n tabIndex: -1,\n })}\n style={visuallyHiddenStyle}\n />\n <button\n type=\"button\"\n {...getToggleButtonProps({ tabIndex: -1 })}\n style={visuallyHiddenStyle}\n aria-hidden\n />\n </>\n )}\n <DropdownMenu\n isOpen={isOpen}\n filteredOptions={filteredOptions}\n selectedItem={selectedItem}\n emptyMessage={emptyMessage}\n getMenuProps={getMenuProps}\n getItemProps={getItemProps}\n footer={footer}\n openUpward={openUpward}\n fitContent={fitContent}\n />\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/ui/dropdown/dropdown.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { cn as e } from "../../utils/utils.js";
-import { formControlShellClassName as t } from "../../utils/form-control-classes.js";
+import { dropdownTriggerShellClassName as t } from "../../utils/dropdown-classes.js";
 import { useCombobox as n } from "../../node_modules/downshift/dist/downshift.esm.js";
 import { LoadingSpinner as r } from "./loading-spinner.js";
 import { ClearButton as i } from "./clear-button.js";
@@ -67,7 +67,7 @@ function m({ options: m, emptyMessage: h = "No options", clearable: g = !1, load
 			style: p,
 			"aria-hidden": !0
 		})] }) : /* @__PURE__ */ f("div", {
-			className: e("bg-tertiary border border-[var(--oh-border-input)] rounded p-2", "flex items-center gap-2", A ? "w-auto" : "w-full", t, "group w-full gap-2 px-3 text-[var(--oh-muted)] hover:text-white", K && "cursor-not-allowed opacity-60", C),
+			className: e(t, A ? "w-auto" : "w-full", K && "cursor-not-allowed opacity-60", C),
 			children: [
 				q?.prefix ? /* @__PURE__ */ d("span", {
 					className: "flex items-center shrink-0",

package/dist/ui/dropdown/dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.js","names":[],"sources":["../../../src/ui/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useCombobox } from \"downshift\";\nimport { cn } from \"#/utils/utils\";\nimport { DropdownOption } from \"./types\";\nimport { formControlShellClassName } from \"#/utils/form-control-classes\";\nimport { LoadingSpinner } from \"./loading-spinner\";\nimport { ClearButton } from \"./clear-button\";\nimport { ToggleButton } from \"./toggle-button\";\nimport { DropdownMenu } from \"./dropdown-menu\";\nimport { DropdownInput } from \"./dropdown-input\";\n\n// Equivalent to Tailwind's `sr-only`, inlined so we don't depend on the\n// utility class being preserved by the host project's CSS pipeline.\nconst visuallyHiddenStyle: React.CSSProperties = {\n position: \"absolute\",\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: \"hidden\",\n clip: \"rect(0, 0, 0, 0)\",\n whiteSpace: \"nowrap\",\n border: 0,\n};\n\ninterface DropdownProps {\n options: DropdownOption[];\n emptyMessage?: string;\n clearable?: boolean;\n loading?: boolean;\n disabled?: boolean;\n placeholder?: string;\n defaultValue?: DropdownOption;\n onChange?: (item: DropdownOption \| null) => void;\n testId?: string;\n className?: string;\n footer?: React.ReactNode;\n openUpward?: boolean;\n hideTrigger?: boolean;\n defaultOpen?: boolean;\n /** Open the dropdown menu on hover instead of requiring a click. /\n openOnHover?: boolean;\n /* When false, the combobox placeholder uses normal (non-italic) type. /\n italicPlaceholder?: boolean;\n /* Size the trigger to its label instead of stretching to the container width. */\n fitContent?: boolean;\n}\n\nexport function Dropdown({\n options,\n emptyMessage = \"No options\",\n clearable = false,\n loading = false,\n disabled = false,\n placeholder,\n defaultValue,\n onChange,\n testId,\n className,\n footer,\n openUpward = false,\n hideTrigger = false,\n defaultOpen = false,\n openOnHover = false,\n italicPlaceholder = true,\n fitContent = false,\n}: DropdownProps) {\n const closeTimerRef = React.useRef<ReturnType<typeof setTimeout> \| null>(\n null,\n );\n const [inputValue, setInputValue] = useState(defaultValue?.label ?? \"\");\n const [searchTerm, setSearchTerm] = useState(\"\");\n\n const filteredOptions = options.filter((option) =>\n option.label.toLowerCase().includes(searchTerm.toLowerCase()),\n );\n\n const {\n isOpen,\n selectedItem,\n selectItem,\n openMenu,\n closeMenu,\n getToggleButtonProps,\n getMenuProps,\n getItemProps,\n getInputProps,\n } = useCombobox({\n items: filteredOptions,\n itemToString: (item) => item?.label ?? \"\",\n inputValue,\n stateReducer: (state, actionAndChanges) =>\n actionAndChanges.type === useCombobox.stateChangeTypes.InputClick &&\n state.isOpen\n ? { ...actionAndChanges.changes, isOpen: true }\n : actionAndChanges.changes,\n initialIsOpen: defaultOpen,\n onInputValueChange: ({ inputValue: newValue }) => {\n setInputValue(newValue ?? \"\");\n setSearchTerm(newValue ?? \"\");\n },\n defaultSelectedItem: defaultValue,\n onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {\n onChange?.(newSelectedItem ?? null);\n },\n onIsOpenChange: ({\n isOpen: newIsOpen,\n selectedItem: currentSelectedItem,\n }) => {\n if (newIsOpen) {\n // Clear the input on open so the user sees an empty search box\n // (with the placeholder reminding them of the current value)\n // and the full options list. Otherwise the active label would\n // appear both in the trigger AND as the highlighted menu row.\n setInputValue(\"\");\n setSearchTerm(\"\");\n } else {\n setInputValue(currentSelectedItem?.label ?? \"\");\n setSearchTerm(\"\");\n }\n },\n });\n\n const isDisabled = loading \|\| disabled;\n\n // `selectedItem` is downshift's internal state, frozen to whatever\n // initialized it. Resolve the currently selected option against the\n // live `options` array so per-option fields like `prefix` (e.g. a\n // status indicator that re-renders on a timer) update on the trigger\n // without remounting the dropdown.\n const liveSelectedOption = selectedItem\n ? (options.find((o) => o.value === selectedItem.value) ?? selectedItem)\n : null;\n\n // Wrap getInputProps to inject a direct onChange handler that preserves\n // cursor position. Downshift's default onInputValueChange resets cursor\n // to end of input on every keystroke; reading from e.target.value keeps\n // the browser's native cursor position intact.\n const getInputPropsWithCursorFix = (props?: object) =>\n getInputProps({\n ...props,\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.target.value);\n setSearchTerm(e.target.value);\n },\n });\n\n return (\n <div\n className={cn(\"relative\", fitContent ? \"inline-block w-auto\" : \"w-full\")}\n data-testid={testId}\n onMouseEnter={\n openOnHover\n ? () => {\n if (closeTimerRef.current) {\n clearTimeout(closeTimerRef.current);\n closeTimerRef.current = null;\n }\n openMenu();\n }\n : undefined\n }\n onMouseLeave={\n openOnHover\n ? () => {\n closeTimerRef.current = setTimeout(() => closeMenu(), 150);\n }\n : undefined\n }\n >\n {!hideTrigger ? (\n <div\n className={cn(\n \"bg-tertiary border border-[var(--oh-border-input)] rounded p-2\",\n \"flex items-center gap-2\",\n fitContent ? \"w-auto\" : \"w-full\",\n formControlShellClassName,\n \"group w-full gap-2 px-3 text-[var(--oh-muted)] hover:text-white\",\n isDisabled && \"cursor-not-allowed opacity-60\",\n className,\n )}\n >\n {liveSelectedOption?.prefix ? (\n <span className=\"flex items-center shrink-0\">\n {liveSelectedOption.prefix}\n </span>\n ) : null}\n <DropdownInput\n placeholder={placeholder}\n isDisabled={isDisabled}\n getInputProps={getInputPropsWithCursorFix}\n italicPlaceholder={italicPlaceholder}\n fitContent={fitContent}\n />\n {loading && <LoadingSpinner />}\n {clearable && selectedItem && (\n <ClearButton onClear={() => selectItem(null)} />\n )}\n <ToggleButton\n isOpen={isOpen}\n isDisabled={isDisabled}\n getToggleButtonProps={getToggleButtonProps}\n />\n </div>\n ) : (\n // downshift's useCombobox always expects getInputProps() (and the\n // toggle button) to be wired up. When the trigger is hidden (e.g.\n // collapsed-sidebar popover) we still need to mount a real input\n // so it stops warning every render. Keep it visually hidden but\n // present in the DOM for accessibility.\n <>\n <input\n {...getInputPropsWithCursorFix({\n \"aria-label\": placeholder ?? \"Filter options\",\n tabIndex: -1,\n })}\n style={visuallyHiddenStyle}\n />\n <button\n type=\"button\"\n {...getToggleButtonProps({ tabIndex: -1 })}\n style={visuallyHiddenStyle}\n aria-hidden\n />\n </>\n )}\n <DropdownMenu\n isOpen={isOpen}\n filteredOptions={filteredOptions}\n selectedItem={selectedItem}\n emptyMessage={emptyMessage}\n getMenuProps={getMenuProps}\n getItemProps={getItemProps}\n footer={footer}\n openUpward={openUpward}\n fitContent={fitContent}\n />\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"dropdown.js","names":[],"sources":["../../../src/ui/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useCombobox } from \"downshift\";\nimport { cn } from \"#/utils/utils\";\nimport { DropdownOption } from \"./types\";\nimport { dropdownTriggerShellClassName } from \"#/utils/dropdown-classes\";\nimport { LoadingSpinner } from \"./loading-spinner\";\nimport { ClearButton } from \"./clear-button\";\nimport { ToggleButton } from \"./toggle-button\";\nimport { DropdownMenu } from \"./dropdown-menu\";\nimport { DropdownInput } from \"./dropdown-input\";\n\n// Equivalent to Tailwind's `sr-only`, inlined so we don't depend on the\n// utility class being preserved by the host project's CSS pipeline.\nconst visuallyHiddenStyle: React.CSSProperties = {\n position: \"absolute\",\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: \"hidden\",\n clip: \"rect(0, 0, 0, 0)\",\n whiteSpace: \"nowrap\",\n border: 0,\n};\n\ninterface DropdownProps {\n options: DropdownOption[];\n emptyMessage?: string;\n clearable?: boolean;\n loading?: boolean;\n disabled?: boolean;\n placeholder?: string;\n defaultValue?: DropdownOption;\n onChange?: (item: DropdownOption \| null) => void;\n testId?: string;\n className?: string;\n footer?: React.ReactNode;\n openUpward?: boolean;\n hideTrigger?: boolean;\n defaultOpen?: boolean;\n /** Open the dropdown menu on hover instead of requiring a click. /\n openOnHover?: boolean;\n /* When false, the combobox placeholder uses normal (non-italic) type. /\n italicPlaceholder?: boolean;\n /* Size the trigger to its label instead of stretching to the container width. */\n fitContent?: boolean;\n}\n\nexport function Dropdown({\n options,\n emptyMessage = \"No options\",\n clearable = false,\n loading = false,\n disabled = false,\n placeholder,\n defaultValue,\n onChange,\n testId,\n className,\n footer,\n openUpward = false,\n hideTrigger = false,\n defaultOpen = false,\n openOnHover = false,\n italicPlaceholder = true,\n fitContent = false,\n}: DropdownProps) {\n const closeTimerRef = React.useRef<ReturnType<typeof setTimeout> \| null>(\n null,\n );\n const [inputValue, setInputValue] = useState(defaultValue?.label ?? \"\");\n const [searchTerm, setSearchTerm] = useState(\"\");\n\n const filteredOptions = options.filter((option) =>\n option.label.toLowerCase().includes(searchTerm.toLowerCase()),\n );\n\n const {\n isOpen,\n selectedItem,\n selectItem,\n openMenu,\n closeMenu,\n getToggleButtonProps,\n getMenuProps,\n getItemProps,\n getInputProps,\n } = useCombobox({\n items: filteredOptions,\n itemToString: (item) => item?.label ?? \"\",\n inputValue,\n stateReducer: (state, actionAndChanges) =>\n actionAndChanges.type === useCombobox.stateChangeTypes.InputClick &&\n state.isOpen\n ? { ...actionAndChanges.changes, isOpen: true }\n : actionAndChanges.changes,\n initialIsOpen: defaultOpen,\n onInputValueChange: ({ inputValue: newValue }) => {\n setInputValue(newValue ?? \"\");\n setSearchTerm(newValue ?? \"\");\n },\n defaultSelectedItem: defaultValue,\n onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {\n onChange?.(newSelectedItem ?? null);\n },\n onIsOpenChange: ({\n isOpen: newIsOpen,\n selectedItem: currentSelectedItem,\n }) => {\n if (newIsOpen) {\n // Clear the input on open so the user sees an empty search box\n // (with the placeholder reminding them of the current value)\n // and the full options list. Otherwise the active label would\n // appear both in the trigger AND as the highlighted menu row.\n setInputValue(\"\");\n setSearchTerm(\"\");\n } else {\n setInputValue(currentSelectedItem?.label ?? \"\");\n setSearchTerm(\"\");\n }\n },\n });\n\n const isDisabled = loading \|\| disabled;\n\n // `selectedItem` is downshift's internal state, frozen to whatever\n // initialized it. Resolve the currently selected option against the\n // live `options` array so per-option fields like `prefix` (e.g. a\n // status indicator that re-renders on a timer) update on the trigger\n // without remounting the dropdown.\n const liveSelectedOption = selectedItem\n ? (options.find((o) => o.value === selectedItem.value) ?? selectedItem)\n : null;\n\n // Wrap getInputProps to inject a direct onChange handler that preserves\n // cursor position. Downshift's default onInputValueChange resets cursor\n // to end of input on every keystroke; reading from e.target.value keeps\n // the browser's native cursor position intact.\n const getInputPropsWithCursorFix = (props?: object) =>\n getInputProps({\n ...props,\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.target.value);\n setSearchTerm(e.target.value);\n },\n });\n\n return (\n <div\n className={cn(\"relative\", fitContent ? \"inline-block w-auto\" : \"w-full\")}\n data-testid={testId}\n onMouseEnter={\n openOnHover\n ? () => {\n if (closeTimerRef.current) {\n clearTimeout(closeTimerRef.current);\n closeTimerRef.current = null;\n }\n openMenu();\n }\n : undefined\n }\n onMouseLeave={\n openOnHover\n ? () => {\n closeTimerRef.current = setTimeout(() => closeMenu(), 150);\n }\n : undefined\n }\n >\n {!hideTrigger ? (\n <div\n className={cn(\n dropdownTriggerShellClassName,\n fitContent ? \"w-auto\" : \"w-full\",\n isDisabled && \"cursor-not-allowed opacity-60\",\n className,\n )}\n >\n {liveSelectedOption?.prefix ? (\n <span className=\"flex items-center shrink-0\">\n {liveSelectedOption.prefix}\n </span>\n ) : null}\n <DropdownInput\n placeholder={placeholder}\n isDisabled={isDisabled}\n getInputProps={getInputPropsWithCursorFix}\n italicPlaceholder={italicPlaceholder}\n fitContent={fitContent}\n />\n {loading && <LoadingSpinner />}\n {clearable && selectedItem && (\n <ClearButton onClear={() => selectItem(null)} />\n )}\n <ToggleButton\n isOpen={isOpen}\n isDisabled={isDisabled}\n getToggleButtonProps={getToggleButtonProps}\n />\n </div>\n ) : (\n // downshift's useCombobox always expects getInputProps() (and the\n // toggle button) to be wired up. When the trigger is hidden (e.g.\n // collapsed-sidebar popover) we still need to mount a real input\n // so it stops warning every render. Keep it visually hidden but\n // present in the DOM for accessibility.\n <>\n <input\n {...getInputPropsWithCursorFix({\n \"aria-label\": placeholder ?? \"Filter options\",\n tabIndex: -1,\n })}\n style={visuallyHiddenStyle}\n />\n <button\n type=\"button\"\n {...getToggleButtonProps({ tabIndex: -1 })}\n style={visuallyHiddenStyle}\n aria-hidden\n />\n </>\n )}\n <DropdownMenu\n isOpen={isOpen}\n filteredOptions={filteredOptions}\n selectedItem={selectedItem}\n emptyMessage={emptyMessage}\n getMenuProps={getMenuProps}\n getItemProps={getItemProps}\n footer={footer}\n openUpward={openUpward}\n fitContent={fitContent}\n />\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/utils/automation-schedule.d.ts CHANGED Viewed

@@ -19,3 +19,4 @@ export declare function parseTimeOfDay(value: string): {
     hour: number;
     minute: number;
 } | null;
+export declare function formatEventOn(on: string | string[] | undefined): string;

package/dist/utils/dropdown-classes.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`./utils.cjs`),t=require(`./form-control-classes.cjs`);var n=`transition-none`,r=`gap-0.5`,i=`gap-2`,a=e.cn(`flex flex-col`,r),o=e.cn(`bg-tertiary border border-[var(--oh-border-input)] rounded p-2`,`flex items-center gap-2`,t.formControlShellClassName,n,`group w-full gap-2 px-3 text-[var(--oh-muted)] hover:text-white`),s=e.cn(`group flex w-full cursor-pointer items-center rounded px-2 py-2 text-left text-sm font-normal text-white`,i,`hover:bg-[var(--oh-interactive-hover)] disabled:cursor-not-allowed disabled:opacity-60`,n),c=e.cn(`group flex w-full cursor-pointer items-center rounded px-2 py-2 text-start text-sm font-normal`,i,`text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]`,`disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent`,n),l=e.cn(`shrink-0 text-[var(--oh-muted)] group-hover:text-white group-focus-visible:text-white`,n),u=e.cn(`flex size-4 shrink-0 items-center justify-center [&_svg]:text-current`,l),d=e.cn(`inline-flex cursor-pointer items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium`,`border-[var(--oh-border)] bg-base-secondary text-white`,`focus-visible:border-white/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20`,n),f=e.cn(a,`overflow-y-auto custom-scrollbar-always`,`max-h-[13.875rem]`),p=e.cn(`overflow-y-auto custom-scrollbar`,`max-h-[min(60vh,calc(100dvh-5rem))]`),m=e.cn(`group flex w-full items-center rounded-md px-2 py-2 text-sm font-normal text-white`,i,`hover:bg-[var(--oh-interactive-hover)]`,n);exports.dropdownFilterTriggerClassName=d,exports.dropdownFooterActionClassName=m,exports.dropdownInstantColorClassName=n,exports.dropdownMenuListClassName=a,exports.dropdownMenuListGapClassName=r,exports.dropdownMenuRowClassName=s,exports.dropdownMenuRowForegroundClassName=c,exports.dropdownMenuRowGapClassName=i,exports.dropdownMenuRowIconClassName=l,exports.dropdownMenuRowIconWrapperClassName=u,exports.dropdownMenuViewportScrollClassName=p,exports.dropdownTriggerShellClassName=o,exports.switchProfileMenuListScrollClassName=f;
2	+ //# sourceMappingURL=dropdown-classes.cjs.map

package/dist/utils/dropdown-classes.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dropdown-classes.cjs","names":[],"sources":["../../src/utils/dropdown-classes.ts"],"sourcesContent":["import { cn } from \"#/utils/utils\";\nimport { formControlShellClassName } from \"#/utils/form-control-classes\";\n\n/** Snap hover colors instantly — no transition-colors delay on menus/dropdowns. */\nexport const dropdownInstantColorClassName = \"transition-none\";\n\n/** 2px vertical gap between rows in a dropdown/context menu list. */\nexport const dropdownMenuListGapClassName = \"gap-0.5\";\n\n/** Standard horizontal gap between a row icon and its label. */\nexport const dropdownMenuRowGapClassName = \"gap-2\";\n\n/** Flex column shell for a dropdown menu item list. */\nexport const dropdownMenuListClassName = cn(\n \"flex flex-col\",\n dropdownMenuListGapClassName,\n);\n\n/** Combobox/select trigger shell with instant hover colors. */\nexport const dropdownTriggerShellClassName = cn(\n \"bg-tertiary border border-[var(--oh-border-input)] rounded p-2\",\n \"flex items-center gap-2\",\n formControlShellClassName,\n dropdownInstantColorClassName,\n \"group w-full gap-2 px-3 text-[var(--oh-muted)] hover:text-white\",\n);\n\n/** Standard white-label menu row. */\nexport const dropdownMenuRowClassName = cn(\n \"group flex w-full cursor-pointer items-center rounded px-2 py-2 text-left text-sm font-normal text-white\",\n dropdownMenuRowGapClassName,\n \"hover:bg-[var(--oh-interactive-hover)] disabled:cursor-not-allowed disabled:opacity-60\",\n dropdownInstantColorClassName,\n);\n\n/** Menu row using foreground token (context menus). */\nexport const dropdownMenuRowForegroundClassName = cn(\n \"group flex w-full cursor-pointer items-center rounded px-2 py-2 text-start text-sm font-normal\",\n dropdownMenuRowGapClassName,\n \"text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]\",\n \"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent\",\n dropdownInstantColorClassName,\n);\n\n/** Icon inside a menu row — muted until row hover/focus. */\nexport const dropdownMenuRowIconClassName = cn(\n \"shrink-0 text-[var(--oh-muted)] group-hover:text-white group-focus-visible:text-white\",\n dropdownInstantColorClassName,\n);\n\n/** Wrapper for SVG/React icon nodes inside a menu row. */\nexport const dropdownMenuRowIconWrapperClassName = cn(\n \"flex size-4 shrink-0 items-center justify-center [&_svg]:text-current\",\n dropdownMenuRowIconClassName,\n);\n\n/** Enum/filter dropdown trigger chip. */\nexport const dropdownFilterTriggerClassName = cn(\n \"inline-flex cursor-pointer items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium\",\n \"border-[var(--oh-border)] bg-base-secondary text-white\",\n \"focus-visible:border-white/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20\",\n dropdownInstantColorClassName,\n);\n\n/**\n * Scroll cap for the switch-profile menu: four two-line rows\n * (p-2 + leading-5 title + gap-0.5 + leading-4 subtitle) plus list gaps.\n */\nexport const switchProfileMenuListScrollClassName = cn(\n dropdownMenuListClassName,\n \"overflow-y-auto custom-scrollbar-always\",\n \"max-h-[13.875rem]\",\n);\n\n/**\n * Tall sidebar/context menus: cap height to the viewport and scroll with the\n * custom scrollbar when content overflows (no scrollbar when everything fits).\n */\nexport const dropdownMenuViewportScrollClassName = cn(\n \"overflow-y-auto custom-scrollbar\",\n \"max-h-[min(60vh,calc(100dvh-5rem))]\",\n);\n\n/** Footer action row inside a dropdown panel. */\nexport const dropdownFooterActionClassName = cn(\n \"group flex w-full items-center rounded-md px-2 py-2 text-sm font-normal text-white\",\n dropdownMenuRowGapClassName,\n \"hover:bg-[var(--oh-interactive-hover)]\",\n dropdownInstantColorClassName,\n);\n"],"mappings":"oHAIA,IAAa,EAAgC,kBAGhC,EAA+B,UAG/B,EAA8B,QAG9B,EAA4B,EAAA,GACvC,gBACA,EACD,CAGY,EAAgC,EAAA,GAC3C,iEACA,0BACA,EAAA,0BACA,EACA,kEACD,CAGY,EAA2B,EAAA,GACtC,2GACA,EACA,yFACA,EACD,CAGY,EAAqC,EAAA,GAChD,iGACA,EACA,qEACA,gFACA,EACD,CAGY,EAA+B,EAAA,GAC1C,wFACA,EACD,CAGY,EAAsC,EAAA,GACjD,wEACA,EACD,CAGY,EAAiC,EAAA,GAC5C,kGACA,yDACA,4GACA,EACD,CAMY,EAAuC,EAAA,GAClD,EACA,0CACA,oBACD,CAMY,EAAsC,EAAA,GACjD,mCACA,sCACD,CAGY,EAAgC,EAAA,GAC3C,qFACA,EACA,yCACA,EACD"}

package/dist/utils/dropdown-classes.d.ts ADDED Viewed

@@ -0,0 +1,32 @@
+/** Snap hover colors instantly — no transition-colors delay on menus/dropdowns. */
+export declare const dropdownInstantColorClassName = "transition-none";
+/** 2px vertical gap between rows in a dropdown/context menu list. */
+export declare const dropdownMenuListGapClassName = "gap-0.5";
+/** Standard horizontal gap between a row icon and its label. */
+export declare const dropdownMenuRowGapClassName = "gap-2";
+/** Flex column shell for a dropdown menu item list. */
+export declare const dropdownMenuListClassName: string;
+/** Combobox/select trigger shell with instant hover colors. */
+export declare const dropdownTriggerShellClassName: string;
+/** Standard white-label menu row. */
+export declare const dropdownMenuRowClassName: string;
+/** Menu row using foreground token (context menus). */
+export declare const dropdownMenuRowForegroundClassName: string;
+/** Icon inside a menu row — muted until row hover/focus. */
+export declare const dropdownMenuRowIconClassName: string;
+/** Wrapper for SVG/React icon nodes inside a menu row. */
+export declare const dropdownMenuRowIconWrapperClassName: string;
+/** Enum/filter dropdown trigger chip. */
+export declare const dropdownFilterTriggerClassName: string;
+/**
+ * Scroll cap for the switch-profile menu: four two-line rows
+ * (p-2 + leading-5 title + gap-0.5 + leading-4 subtitle) plus list gaps.
+ */
+export declare const switchProfileMenuListScrollClassName: string;
+/**
+ * Tall sidebar/context menus: cap height to the viewport and scroll with the
+ * custom scrollbar when content overflows (no scrollbar when everything fits).
+ */
+export declare const dropdownMenuViewportScrollClassName: string;
+/** Footer action row inside a dropdown panel. */
+export declare const dropdownFooterActionClassName: string;

package/dist/utils/dropdown-classes.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { cn as e } from "./utils.js";
+import { formControlShellClassName as t } from "./form-control-classes.js";
+//#region src/utils/dropdown-classes.ts
+var n = "transition-none", r = "gap-0.5", i = "gap-2", a = e("flex flex-col", r), o = e("bg-tertiary border border-[var(--oh-border-input)] rounded p-2", "flex items-center gap-2", t, n, "group w-full gap-2 px-3 text-[var(--oh-muted)] hover:text-white"), s = e("group flex w-full cursor-pointer items-center rounded px-2 py-2 text-left text-sm font-normal text-white", i, "hover:bg-[var(--oh-interactive-hover)] disabled:cursor-not-allowed disabled:opacity-60", n), c = e("group flex w-full cursor-pointer items-center rounded px-2 py-2 text-start text-sm font-normal", i, "text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]", "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent", n), l = e("shrink-0 text-[var(--oh-muted)] group-hover:text-white group-focus-visible:text-white", n), u = e("flex size-4 shrink-0 items-center justify-center [&_svg]:text-current", l), d = e("inline-flex cursor-pointer items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium", "border-[var(--oh-border)] bg-base-secondary text-white", "focus-visible:border-white/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20", n), f = e(a, "overflow-y-auto custom-scrollbar-always", "max-h-[13.875rem]"), p = e("overflow-y-auto custom-scrollbar", "max-h-[min(60vh,calc(100dvh-5rem))]"), m = e("group flex w-full items-center rounded-md px-2 py-2 text-sm font-normal text-white", i, "hover:bg-[var(--oh-interactive-hover)]", n);
+//#endregion
+export { d as dropdownFilterTriggerClassName, m as dropdownFooterActionClassName, n as dropdownInstantColorClassName, a as dropdownMenuListClassName, r as dropdownMenuListGapClassName, s as dropdownMenuRowClassName, c as dropdownMenuRowForegroundClassName, i as dropdownMenuRowGapClassName, l as dropdownMenuRowIconClassName, u as dropdownMenuRowIconWrapperClassName, p as dropdownMenuViewportScrollClassName, o as dropdownTriggerShellClassName, f as switchProfileMenuListScrollClassName };
+//# sourceMappingURL=dropdown-classes.js.map

package/dist/utils/dropdown-classes.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dropdown-classes.js","names":[],"sources":["../../src/utils/dropdown-classes.ts"],"sourcesContent":["import { cn } from \"#/utils/utils\";\nimport { formControlShellClassName } from \"#/utils/form-control-classes\";\n\n/** Snap hover colors instantly — no transition-colors delay on menus/dropdowns. */\nexport const dropdownInstantColorClassName = \"transition-none\";\n\n/** 2px vertical gap between rows in a dropdown/context menu list. */\nexport const dropdownMenuListGapClassName = \"gap-0.5\";\n\n/** Standard horizontal gap between a row icon and its label. */\nexport const dropdownMenuRowGapClassName = \"gap-2\";\n\n/** Flex column shell for a dropdown menu item list. */\nexport const dropdownMenuListClassName = cn(\n \"flex flex-col\",\n dropdownMenuListGapClassName,\n);\n\n/** Combobox/select trigger shell with instant hover colors. */\nexport const dropdownTriggerShellClassName = cn(\n \"bg-tertiary border border-[var(--oh-border-input)] rounded p-2\",\n \"flex items-center gap-2\",\n formControlShellClassName,\n dropdownInstantColorClassName,\n \"group w-full gap-2 px-3 text-[var(--oh-muted)] hover:text-white\",\n);\n\n/** Standard white-label menu row. */\nexport const dropdownMenuRowClassName = cn(\n \"group flex w-full cursor-pointer items-center rounded px-2 py-2 text-left text-sm font-normal text-white\",\n dropdownMenuRowGapClassName,\n \"hover:bg-[var(--oh-interactive-hover)] disabled:cursor-not-allowed disabled:opacity-60\",\n dropdownInstantColorClassName,\n);\n\n/** Menu row using foreground token (context menus). */\nexport const dropdownMenuRowForegroundClassName = cn(\n \"group flex w-full cursor-pointer items-center rounded px-2 py-2 text-start text-sm font-normal\",\n dropdownMenuRowGapClassName,\n \"text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]\",\n \"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent\",\n dropdownInstantColorClassName,\n);\n\n/** Icon inside a menu row — muted until row hover/focus. */\nexport const dropdownMenuRowIconClassName = cn(\n \"shrink-0 text-[var(--oh-muted)] group-hover:text-white group-focus-visible:text-white\",\n dropdownInstantColorClassName,\n);\n\n/** Wrapper for SVG/React icon nodes inside a menu row. */\nexport const dropdownMenuRowIconWrapperClassName = cn(\n \"flex size-4 shrink-0 items-center justify-center [&_svg]:text-current\",\n dropdownMenuRowIconClassName,\n);\n\n/** Enum/filter dropdown trigger chip. */\nexport const dropdownFilterTriggerClassName = cn(\n \"inline-flex cursor-pointer items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium\",\n \"border-[var(--oh-border)] bg-base-secondary text-white\",\n \"focus-visible:border-white/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20\",\n dropdownInstantColorClassName,\n);\n\n/**\n * Scroll cap for the switch-profile menu: four two-line rows\n * (p-2 + leading-5 title + gap-0.5 + leading-4 subtitle) plus list gaps.\n */\nexport const switchProfileMenuListScrollClassName = cn(\n dropdownMenuListClassName,\n \"overflow-y-auto custom-scrollbar-always\",\n \"max-h-[13.875rem]\",\n);\n\n/**\n * Tall sidebar/context menus: cap height to the viewport and scroll with the\n * custom scrollbar when content overflows (no scrollbar when everything fits).\n */\nexport const dropdownMenuViewportScrollClassName = cn(\n \"overflow-y-auto custom-scrollbar\",\n \"max-h-[min(60vh,calc(100dvh-5rem))]\",\n);\n\n/** Footer action row inside a dropdown panel. */\nexport const dropdownFooterActionClassName = cn(\n \"group flex w-full items-center rounded-md px-2 py-2 text-sm font-normal text-white\",\n dropdownMenuRowGapClassName,\n \"hover:bg-[var(--oh-interactive-hover)]\",\n dropdownInstantColorClassName,\n);\n"],"mappings":";;;AAIA,IAAa,IAAgC,mBAGhC,IAA+B,WAG/B,IAA8B,SAG9B,IAA4B,EACvC,iBACA,EACD,EAGY,IAAgC,EAC3C,kEACA,2BACA,GACA,GACA,kEACD,EAGY,IAA2B,EACtC,4GACA,GACA,0FACA,EACD,EAGY,IAAqC,EAChD,kGACA,GACA,sEACA,iFACA,EACD,EAGY,IAA+B,EAC1C,yFACA,EACD,EAGY,IAAsC,EACjD,yEACA,EACD,EAGY,IAAiC,EAC5C,mGACA,0DACA,6GACA,EACD,EAMY,IAAuC,EAClD,GACA,2CACA,oBACD,EAMY,IAAsC,EACjD,oCACA,sCACD,EAGY,IAAgC,EAC3C,sFACA,GACA,0CACA,EACD"}

package/dist/utils/form-control-classes.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`./utils.cjs`);var t=`h-9 min-h-9`,n=`rounded-lg`,r=`border border-[var(--oh-border)]`,i=`bg-base-secondary`,a=`transition-[background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none`,o=`!transition-[background-color,border-color,box-shadow,opacity] !duration-150 motion-reduce:transition-none`,s=`focus:border-white/40 focus:ring-1 focus:ring-white/20 focus:outline-none`,c=`focus-within:border-white/40 focus-within:ring-1 focus-within:ring-white/20`,l=`disabled:cursor-not-allowed disabled:opacity-60`,u=e.cn(t,n,r,i,a,s,l,`w-full min-w-0 px-3 text-sm text-white placeholder:text-tertiary-alt`),d=e.cn(u,`placeholder:italic`,o),f=e.cn(n,r,i,a,s,l,`w-full min-w-0 px-3 py-2 text-sm text-white placeholder:text-tertiary-alt`),p=e.cn(t,`relative flex min-w-0 items-center`,n,r,i,a,c),m=e.cn(`min-w-0 flex-1 border-0 bg-transparent px-3 text-sm outline-none`,`placeholder:text-tertiary-alt`,`[&::-webkit-search-cancel-button]:hidden`),h=e.cn(t,`inline-flex w-fit cursor-pointer items-center justify-center gap-2 px-3`,n,a,`text-sm font-normal disabled:cursor-not-allowed disabled:opacity-30`),g=`pl-12`;e.cn(h,r,i,`shrink-0 text-white`),exports.formControlBorderClassName=r,exports.formControlButtonClassName=h,exports.formControlFieldClassName=u,exports.formControlInlineInputClassName=m,exports.formControlMultilineFieldClassName=f,exports.formControlRadiusClassName=n,exports.formControlSettingsFieldClassName=d,exports.formControlShellClassName=p,exports.formControlSurfaceClassName=i,exports.formControlSwitchDescriptionClassName=g,exports.formControlTransitionClassName=a;
+require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`./utils.cjs`);var t=`h-9 min-h-9`,n=`rounded-lg`,r=`border border-[var(--oh-border)]`,i=`bg-base-secondary`,a=`duration-75`,o=`!duration-75`,s=`motion-reduce:transition-none`,c=e.cn(`transition-[background-color,border-color,box-shadow,opacity]`,a,s),l=e.cn(`!transition-[background-color,border-color,box-shadow,opacity]`,o,s),u=e.cn(`transition-[transform] ease`,a,s),d=`hover:text-white hover:bg-white/10`,f=e.cn(`inline-flex items-center gap-1 rounded-[100px] border border-transparent px-1.5`,`text-sm font-normal leading-5 text-[var(--oh-muted)] whitespace-nowrap min-w-0 cursor-pointer`,c,d),p=e.cn(`flex items-center justify-center rounded-full text-[var(--oh-muted)] cursor-pointer`,c,d),m=`focus:border-white/40 focus:ring-1 focus:ring-white/20 focus:outline-none`,h=`focus-within:border-white/40 focus-within:ring-1 focus-within:ring-white/20`,g=`disabled:cursor-not-allowed disabled:opacity-60`,_=e.cn(t,n,r,i,c,m,g,`w-full min-w-0 px-3 text-sm text-white placeholder:text-tertiary-alt`),v=e.cn(_,`placeholder:italic`,l),y=e.cn(n,r,i,c,m,g,`w-full min-w-0 px-3 py-2 text-sm text-white placeholder:text-tertiary-alt`),b=e.cn(t,`relative flex min-w-0 items-center`,n,r,i,c,h),x=e.cn(`min-w-0 flex-1 border-0 bg-transparent px-3 text-sm outline-none`,`placeholder:text-tertiary-alt`,`[&::-webkit-search-cancel-button]:hidden`),S=e.cn(t,`inline-flex w-fit cursor-pointer items-center justify-center gap-2 px-3`,n,c,`text-sm font-normal disabled:cursor-not-allowed disabled:opacity-30`),C=`pl-12`;e.cn(S,r,i,`shrink-0 text-white`);var w=e.cn(`inline-flex items-center gap-2 self-start rounded-lg p-2`,`text-sm font-normal leading-5 text-[var(--oh-muted)] cursor-pointer`,c,`hover:bg-tertiary hover:text-white`);exports.chatInputIconButtonClassName=p,exports.chatInputPillButtonClassName=f,exports.formControlBackNavButtonClassName=w,exports.formControlBorderClassName=r,exports.formControlButtonClassName=S,exports.formControlFieldClassName=_,exports.formControlInlineInputClassName=x,exports.formControlMultilineFieldClassName=y,exports.formControlMutedHoverClassName=d,exports.formControlRadiusClassName=n,exports.formControlSettingsFieldClassName=v,exports.formControlShellClassName=b,exports.formControlSurfaceClassName=i,exports.formControlSwitchDescriptionClassName=C,exports.formControlTransformTransitionClassName=u,exports.formControlTransitionClassName=c;
 //# sourceMappingURL=form-control-classes.cjs.map