@flanksource/clicky-ui 0.3.10 → 0.3.11

package/dist/data/FilterPill.cjs

@@ -28,7 +28,8 @@ const SLOT_TRANSLATE = {
 function TristateSwitch({
   mode,
   onChange,
-  ariaLabel
+  ariaLabel,
+  interactive = true
 }) {
   const slot = mode === "exclude" ? "exclude" : mode === "include" ? "include" : "neutral";
   const bg = slot === "exclude" ? "bg-red-500/80" : slot === "include" ? "bg-green-500/80" : "bg-muted";
@@ -45,7 +46,43 @@ function TristateSwitch({
       className: "relative z-10 h-full flex-1 cursor-pointer"
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    region(mode === "exclude" ? "neutral" : "exclude", "exclude"),
+    region(nextTriStateMode(mode), "neutral"),
+    region(mode === "include" ? "neutral" : "include", "include"),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: utils.cn(
+          // The knob stays white in BOTH themes (standard switch look): on the
+          // dark-mode muted/red/green tracks white is the high-contrast choice,
+          // while bg-background would vanish against the track.
+          "pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150",
+          SLOT_TRANSLATE[slot]
+        ),
+        children: slot !== "neutral" && /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            icon: slot === "exclude" ? UiClose.UiClose : UiCheck.UiCheck,
+            className: utils.cn(
+              "text-[10px]",
+              slot === "exclude" && "text-red-600",
+              slot === "include" && "text-green-600"
+            )
+          }
+        )
+      }
+    )
+  ] });
+  const trackClasses = utils.cn(
+    "relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200",
+    bg
+  );
+  if (!interactive) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: trackClasses, children: content });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       type: "button",
@@ -56,39 +93,8 @@ function TristateSwitch({
         event.stopPropagation();
         onChange(nextTriStateMode(mode));
       },
-      className: utils.cn(
-        "relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200",
-        bg
-      ),
-      children: [
-        region(mode === "exclude" ? "neutral" : "exclude", "exclude"),
-        region(nextTriStateMode(mode), "neutral"),
-        region(mode === "include" ? "neutral" : "include", "include"),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: utils.cn(
-              // The knob stays white in BOTH themes (standard switch look): on the
-              // dark-mode muted/red/green tracks white is the high-contrast choice,
-              // while bg-background would vanish against the track.
-              "pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150",
-              SLOT_TRANSLATE[slot]
-            ),
-            children: slot !== "neutral" && /* @__PURE__ */ jsxRuntime.jsx(
-              Icon.Icon,
-              {
-                icon: slot === "exclude" ? UiClose.UiClose : UiCheck.UiCheck,
-                className: utils.cn(
-                  "text-[10px]",
-                  slot === "exclude" && "text-red-600",
-                  slot === "include" && "text-green-600"
-                )
-              }
-            )
-          }
-        )
-      ]
+      className: trackClasses,
+      children: content
     }
   );
 }
@@ -102,6 +108,7 @@ function FilterPill({
   onClick,
   title,
   togglePosition = "left",
+  interactive = true,
   className
 }) {
   const triState = !!onModeChange;
@@ -125,6 +132,7 @@ function FilterPill({
       {
         mode,
         onChange: onModeChange,
+        interactive,
         ...title ? { ariaLabel: title } : {}
       }
     );

package/dist/data/FilterPill.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPill.cjs","sources":["../../src/data/FilterPill.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { UiAdd, UiCheck, UiClose, UiRemove } from \"../icons\";\n\nexport type FilterMode = \"active\" | \"neutral\" | \"include\" | \"exclude\";\n\nexport type FilterPillProps = {\n  /** Visual and semantic state for the pill. */\n  mode?: FilterMode;\n  /** Primary visible label. */\n  label: ReactNode;\n  /** Optional count badge rendered before the label. */\n  count?: number;\n  /** Iconify name or imported icon component. */\n  icon?: string | StaticIconComponent;\n  /** Classes for the count badge background. */\n  badge?: string;\n  /**\n   * Tri-state handler. When provided the pill renders as a toggle with a left\n   * minus (exclude) and right plus (include) region. Clicking a side toggles\n   * that state against \"neutral\"; clicking the label cycles neutral → include\n   * → exclude → neutral.\n   */\n  onModeChange?: (next: FilterMode) => void;\n  /** Legacy single-click handler, used when onModeChange is not provided. */\n  onClick?: () => void;\n  /** Browser tooltip and accessible label for tri-state controls. */\n  title?: string;\n  /** Places the tri-state toggle before or after the label. */\n  togglePosition?: \"left\" | \"right\";\n  /** Classes applied to the pill root. */\n  className?: string;\n};\n\nfunction bodyClasses(mode: FilterMode): string {\n  switch (mode) {\n    case \"active\":\n      return \"bg-primary/10 border-primary/40 text-primary font-medium\";\n    case \"include\":\n      return \"bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium\";\n    case \"exclude\":\n      return \"bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium\";\n    case \"neutral\":\n    default:\n      return \"border-border text-muted-foreground hover:bg-accent\";\n  }\n}\n\ntype SlotMode = \"exclude\" | \"neutral\" | \"include\";\n\nconst SLOT_TRANSLATE: Record<SlotMode, string> = {\n  exclude: \"translate-x-0\",\n  neutral: \"translate-x-4\",\n  include: \"translate-x-8\",\n};\n\nfunction TristateSwitch({\n  mode,\n  onChange,\n  ariaLabel,\n}: {\n  mode: FilterMode;\n  onChange: (next: FilterMode) => void;\n  ariaLabel?: string;\n}) {\n  const slot: SlotMode =\n    mode === \"exclude\" ? \"exclude\" : mode === \"include\" ? \"include\" : \"neutral\";\n  const bg =\n    slot === \"exclude\" ? \"bg-red-500/80\" : slot === \"include\" ? \"bg-green-500/80\" : \"bg-muted\";\n\n  // The three regions are aria-hidden click targets layered over the toggle\n  // track: clicking the left edge toggles exclude, the right edge toggles\n  // include, and the middle rotates. They are NOT focusable buttons — the\n  // whole switch is a single <button> so it exposes one accessible name and\n  // does not pollute the accessible name of any FilterBar wrapper that hosts\n  // it (e.g. the multi-filter option row, which is itself a role=\"button\").\n  const region = (next: FilterMode, regionMode: SlotMode) => (\n    <span\n      aria-hidden\n      data-tristate-region={regionMode}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(next);\n      }}\n      className=\"relative z-10 h-full flex-1 cursor-pointer\"\n    />\n  );\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      onClick={(event) => {\n        // Keyboard activation (Enter/Space) lands here without a region —\n        // cycle, matching the middle-region rotation.\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(nextTriStateMode(mode));\n      }}\n      className={cn(\n        \"relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200\",\n        bg,\n      )}\n    >\n      {region(mode === \"exclude\" ? \"neutral\" : \"exclude\", \"exclude\")}\n      {region(nextTriStateMode(mode), \"neutral\")}\n      {region(mode === \"include\" ? \"neutral\" : \"include\", \"include\")}\n      <span\n        aria-hidden\n        className={cn(\n          // The knob stays white in BOTH themes (standard switch look): on the\n          // dark-mode muted/red/green tracks white is the high-contrast choice,\n          // while bg-background would vanish against the track.\n          \"pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150\",\n          SLOT_TRANSLATE[slot],\n        )}\n      >\n        {slot !== \"neutral\" && (\n          <Icon\n            icon={slot === \"exclude\" ? UiClose : UiCheck}\n            className={cn(\n              \"text-[10px]\",\n              slot === \"exclude\" && \"text-red-600\",\n              slot === \"include\" && \"text-green-600\",\n            )}\n          />\n        )}\n      </span>\n    </button>\n  );\n}\n\nexport function FilterPill({\n  mode = \"neutral\",\n  label,\n  count,\n  icon,\n  badge,\n  onModeChange,\n  onClick,\n  title,\n  togglePosition = \"left\",\n  className,\n}: FilterPillProps) {\n  const triState = !!onModeChange;\n  const content = (\n    <>\n      {count !== undefined && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white\",\n            badge ?? \"bg-muted-foreground\",\n          )}\n        >\n          {count}\n        </span>\n      )}\n      {icon && (\n        <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-sm\" />\n      )}\n      <span className=\"truncate\">{label}</span>\n    </>\n  );\n\n  if (triState) {\n    const control = (\n      <TristateSwitch\n        mode={mode}\n        onChange={onModeChange!}\n        {...(title ? { ariaLabel: title } : {})}\n      />\n    );\n    const labelContent = (\n      <span className=\"inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground\">\n        {content}\n      </span>\n    );\n\n    return (\n      <span className={cn(\"inline-flex items-center gap-1.5 select-none\", className)} title={title}>\n        {togglePosition === \"right\" ? (\n          <>\n            {labelContent}\n            {control}\n          </>\n        ) : (\n          <>\n            {control}\n            {labelContent}\n          </>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      title={title}\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors\",\n        bodyClasses(mode),\n        className,\n      )}\n    >\n      <LegacyMarker mode={mode} />\n      {content}\n    </button>\n  );\n}\n\nfunction LegacyMarker({ mode }: { mode: FilterMode }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  if (mode === \"active\") return <span className=\"w-2 h-2 rounded-full bg-current\" />;\n  return <span className=\"w-2 h-2 rounded-full bg-current opacity-30\" />;\n}\n\nfunction nextTriStateMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\nexport type FilterPillGroupProps = {\n  /** Filter pills or separators to lay out. */\n  children: ReactNode;\n  /** Classes applied to the wrapping row. */\n  className?: string;\n};\n\nexport function FilterPillGroup({ children, className }: FilterPillGroupProps) {\n  return <div className={cn(\"flex items-center gap-1.5 flex-wrap\", className)}>{children}</div>;\n}\n\nexport function FilterSeparator() {\n  return (\n    <span aria-hidden className=\"text-border mx-0.5\">\n      |\n    </span>\n  );\n}\n"],"names":["jsx","jsxs","cn","Icon","UiClose","UiCheck","Fragment","UiAdd","UiRemove"],"mappings":"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"}
+{"version":3,"file":"FilterPill.cjs","sources":["../../src/data/FilterPill.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { UiAdd, UiCheck, UiClose, UiRemove } from \"../icons\";\n\nexport type FilterMode = \"active\" | \"neutral\" | \"include\" | \"exclude\";\n\nexport type FilterPillProps = {\n  /** Visual and semantic state for the pill. */\n  mode?: FilterMode;\n  /** Primary visible label. */\n  label: ReactNode;\n  /** Optional count badge rendered before the label. */\n  count?: number;\n  /** Iconify name or imported icon component. */\n  icon?: string | StaticIconComponent;\n  /** Classes for the count badge background. */\n  badge?: string;\n  /**\n   * Tri-state handler. When provided the pill renders as a toggle with a left\n   * minus (exclude) and right plus (include) region. Clicking a side toggles\n   * that state against \"neutral\"; clicking the label cycles neutral → include\n   * → exclude → neutral.\n   */\n  onModeChange?: (next: FilterMode) => void;\n  /** Legacy single-click handler, used when onModeChange is not provided. */\n  onClick?: () => void;\n  /** Browser tooltip and accessible label for tri-state controls. */\n  title?: string;\n  /** Places the tri-state toggle before or after the label. */\n  togglePosition?: \"left\" | \"right\";\n  /**\n   * When false the tri-state switch renders without button semantics (an\n   * aria-hidden span, nothing focusable) for hosts that own focus and keyboard\n   * themselves — e.g. a combobox listbox option, where a nested focusable\n   * button would violate the option content model. The region click zones\n   * remain active. Defaults to true.\n   */\n  interactive?: boolean;\n  /** Classes applied to the pill root. */\n  className?: string;\n};\n\nfunction bodyClasses(mode: FilterMode): string {\n  switch (mode) {\n    case \"active\":\n      return \"bg-primary/10 border-primary/40 text-primary font-medium\";\n    case \"include\":\n      return \"bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium\";\n    case \"exclude\":\n      return \"bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium\";\n    case \"neutral\":\n    default:\n      return \"border-border text-muted-foreground hover:bg-accent\";\n  }\n}\n\ntype SlotMode = \"exclude\" | \"neutral\" | \"include\";\n\nconst SLOT_TRANSLATE: Record<SlotMode, string> = {\n  exclude: \"translate-x-0\",\n  neutral: \"translate-x-4\",\n  include: \"translate-x-8\",\n};\n\nfunction TristateSwitch({\n  mode,\n  onChange,\n  ariaLabel,\n  interactive = true,\n}: {\n  mode: FilterMode;\n  onChange: (next: FilterMode) => void;\n  ariaLabel?: string;\n  interactive?: boolean;\n}) {\n  const slot: SlotMode =\n    mode === \"exclude\" ? \"exclude\" : mode === \"include\" ? \"include\" : \"neutral\";\n  const bg =\n    slot === \"exclude\" ? \"bg-red-500/80\" : slot === \"include\" ? \"bg-green-500/80\" : \"bg-muted\";\n\n  // The three regions are aria-hidden click targets layered over the toggle\n  // track: clicking the left edge toggles exclude, the right edge toggles\n  // include, and the middle rotates. They are NOT focusable buttons — the\n  // whole switch is a single <button> so it exposes one accessible name and\n  // does not pollute the accessible name of any FilterBar wrapper that hosts\n  // it (e.g. the multi-filter option row, which is itself a role=\"button\").\n  const region = (next: FilterMode, regionMode: SlotMode) => (\n    <span\n      aria-hidden\n      data-tristate-region={regionMode}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(next);\n      }}\n      className=\"relative z-10 h-full flex-1 cursor-pointer\"\n    />\n  );\n\n  const content = (\n    <>\n      {region(mode === \"exclude\" ? \"neutral\" : \"exclude\", \"exclude\")}\n      {region(nextTriStateMode(mode), \"neutral\")}\n      {region(mode === \"include\" ? \"neutral\" : \"include\", \"include\")}\n      <span\n        aria-hidden\n        className={cn(\n          // The knob stays white in BOTH themes (standard switch look): on the\n          // dark-mode muted/red/green tracks white is the high-contrast choice,\n          // while bg-background would vanish against the track.\n          \"pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150\",\n          SLOT_TRANSLATE[slot],\n        )}\n      >\n        {slot !== \"neutral\" && (\n          <Icon\n            icon={slot === \"exclude\" ? UiClose : UiCheck}\n            className={cn(\n              \"text-[10px]\",\n              slot === \"exclude\" && \"text-red-600\",\n              slot === \"include\" && \"text-green-600\",\n            )}\n          />\n        )}\n      </span>\n    </>\n  );\n\n  const trackClasses = cn(\n    \"relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200\",\n    bg,\n  );\n\n  // Non-interactive hosts (combobox listbox options) own focus and keyboard;\n  // the switch must not add a nested focusable button inside role=\"option\".\n  if (!interactive) {\n    return (\n      <span aria-hidden className={trackClasses}>\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      onClick={(event) => {\n        // Keyboard activation (Enter/Space) lands here without a region —\n        // cycle, matching the middle-region rotation.\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(nextTriStateMode(mode));\n      }}\n      className={trackClasses}\n    >\n      {content}\n    </button>\n  );\n}\n\nexport function FilterPill({\n  mode = \"neutral\",\n  label,\n  count,\n  icon,\n  badge,\n  onModeChange,\n  onClick,\n  title,\n  togglePosition = \"left\",\n  interactive = true,\n  className,\n}: FilterPillProps) {\n  const triState = !!onModeChange;\n  const content = (\n    <>\n      {count !== undefined && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white\",\n            badge ?? \"bg-muted-foreground\",\n          )}\n        >\n          {count}\n        </span>\n      )}\n      {icon && (\n        <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-sm\" />\n      )}\n      <span className=\"truncate\">{label}</span>\n    </>\n  );\n\n  if (triState) {\n    const control = (\n      <TristateSwitch\n        mode={mode}\n        onChange={onModeChange!}\n        interactive={interactive}\n        {...(title ? { ariaLabel: title } : {})}\n      />\n    );\n    const labelContent = (\n      <span className=\"inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground\">\n        {content}\n      </span>\n    );\n\n    return (\n      <span className={cn(\"inline-flex items-center gap-1.5 select-none\", className)} title={title}>\n        {togglePosition === \"right\" ? (\n          <>\n            {labelContent}\n            {control}\n          </>\n        ) : (\n          <>\n            {control}\n            {labelContent}\n          </>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      title={title}\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors\",\n        bodyClasses(mode),\n        className,\n      )}\n    >\n      <LegacyMarker mode={mode} />\n      {content}\n    </button>\n  );\n}\n\nfunction LegacyMarker({ mode }: { mode: FilterMode }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  if (mode === \"active\") return <span className=\"w-2 h-2 rounded-full bg-current\" />;\n  return <span className=\"w-2 h-2 rounded-full bg-current opacity-30\" />;\n}\n\nfunction nextTriStateMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\nexport type FilterPillGroupProps = {\n  /** Filter pills or separators to lay out. */\n  children: ReactNode;\n  /** Classes applied to the wrapping row. */\n  className?: string;\n};\n\nexport function FilterPillGroup({ children, className }: FilterPillGroupProps) {\n  return <div className={cn(\"flex items-center gap-1.5 flex-wrap\", className)}>{children}</div>;\n}\n\nexport function FilterSeparator() {\n  return (\n    <span aria-hidden className=\"text-border mx-0.5\">\n      |\n    </span>\n  );\n}\n"],"names":["jsx","jsxs","Fragment","cn","Icon","UiClose","UiCheck","UiAdd","UiRemove"],"mappings":"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"}

package/dist/data/FilterPill.d.ts

@@ -25,10 +25,18 @@ export type FilterPillProps = {
     title?: string;
     /** Places the tri-state toggle before or after the label. */
     togglePosition?: "left" | "right";
+    /**
+     * When false the tri-state switch renders without button semantics (an
+     * aria-hidden span, nothing focusable) for hosts that own focus and keyboard
+     * themselves — e.g. a combobox listbox option, where a nested focusable
+     * button would violate the option content model. The region click zones
+     * remain active. Defaults to true.
+     */
+    interactive?: boolean;
     /** Classes applied to the pill root. */
     className?: string;
 };
-export declare function FilterPill({ mode, label, count, icon, badge, onModeChange, onClick, title, togglePosition, className, }: FilterPillProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterPill({ mode, label, count, icon, badge, onModeChange, onClick, title, togglePosition, interactive, className, }: FilterPillProps): import("react/jsx-runtime").JSX.Element;
 export type FilterPillGroupProps = {
     /** Filter pills or separators to lay out. */
     children: ReactNode;

package/dist/data/FilterPill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPill.d.ts","sourceRoot":"","sources":["../../src/data/FilterPill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAGxD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG;IAC5B,8CAA8C;IAC9C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAsGF,wBAAgB,UAAU,CAAC,EACzB,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,OAAO,EACP,KAAK,EACL,cAAuB,EACvB,SAAS,GACV,EAAE,eAAe,2CAmEjB;AAeD,MAAM,MAAM,oBAAoB,GAAG;IACjC,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,oBAAoB,2CAE5E;AAED,wBAAgB,eAAe,4CAM9B"}
+{"version":3,"file":"FilterPill.d.ts","sourceRoot":"","sources":["../../src/data/FilterPill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAGxD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG;IAC5B,8CAA8C;IAC9C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0HF,wBAAgB,UAAU,CAAC,EACzB,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,OAAO,EACP,KAAK,EACL,cAAuB,EACvB,WAAkB,EAClB,SAAS,GACV,EAAE,eAAe,2CAoEjB;AAeD,MAAM,MAAM,oBAAoB,GAAG;IACjC,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,oBAAoB,2CAE5E;AAED,wBAAgB,eAAe,4CAM9B"}

package/dist/data/FilterPill.js

@@ -26,7 +26,8 @@ const SLOT_TRANSLATE = {
 function TristateSwitch({
   mode,
   onChange,
-  ariaLabel
+  ariaLabel,
+  interactive = true
 }) {
   const slot = mode === "exclude" ? "exclude" : mode === "include" ? "include" : "neutral";
   const bg = slot === "exclude" ? "bg-red-500/80" : slot === "include" ? "bg-green-500/80" : "bg-muted";
@@ -43,7 +44,43 @@ function TristateSwitch({
       className: "relative z-10 h-full flex-1 cursor-pointer"
     }
   );
-  return /* @__PURE__ */ jsxs(
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    region(mode === "exclude" ? "neutral" : "exclude", "exclude"),
+    region(nextTriStateMode(mode), "neutral"),
+    region(mode === "include" ? "neutral" : "include", "include"),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn(
+          // The knob stays white in BOTH themes (standard switch look): on the
+          // dark-mode muted/red/green tracks white is the high-contrast choice,
+          // while bg-background would vanish against the track.
+          "pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150",
+          SLOT_TRANSLATE[slot]
+        ),
+        children: slot !== "neutral" && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: slot === "exclude" ? UiClose : UiCheck,
+            className: cn(
+              "text-[10px]",
+              slot === "exclude" && "text-red-600",
+              slot === "include" && "text-green-600"
+            )
+          }
+        )
+      }
+    )
+  ] });
+  const trackClasses = cn(
+    "relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200",
+    bg
+  );
+  if (!interactive) {
+    return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: trackClasses, children: content });
+  }
+  return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
@@ -54,39 +91,8 @@ function TristateSwitch({
         event.stopPropagation();
         onChange(nextTriStateMode(mode));
       },
-      className: cn(
-        "relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200",
-        bg
-      ),
-      children: [
-        region(mode === "exclude" ? "neutral" : "exclude", "exclude"),
-        region(nextTriStateMode(mode), "neutral"),
-        region(mode === "include" ? "neutral" : "include", "include"),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: cn(
-              // The knob stays white in BOTH themes (standard switch look): on the
-              // dark-mode muted/red/green tracks white is the high-contrast choice,
-              // while bg-background would vanish against the track.
-              "pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150",
-              SLOT_TRANSLATE[slot]
-            ),
-            children: slot !== "neutral" && /* @__PURE__ */ jsx(
-              Icon,
-              {
-                icon: slot === "exclude" ? UiClose : UiCheck,
-                className: cn(
-                  "text-[10px]",
-                  slot === "exclude" && "text-red-600",
-                  slot === "include" && "text-green-600"
-                )
-              }
-            )
-          }
-        )
-      ]
+      className: trackClasses,
+      children: content
     }
   );
 }
@@ -100,6 +106,7 @@ function FilterPill({
   onClick,
   title,
   togglePosition = "left",
+  interactive = true,
   className
 }) {
   const triState = !!onModeChange;
@@ -123,6 +130,7 @@ function FilterPill({
       {
         mode,
         onChange: onModeChange,
+        interactive,
         ...title ? { ariaLabel: title } : {}
       }
     );

package/dist/data/FilterPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPill.js","sources":["../../src/data/FilterPill.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { UiAdd, UiCheck, UiClose, UiRemove } from \"../icons\";\n\nexport type FilterMode = \"active\" | \"neutral\" | \"include\" | \"exclude\";\n\nexport type FilterPillProps = {\n  /** Visual and semantic state for the pill. */\n  mode?: FilterMode;\n  /** Primary visible label. */\n  label: ReactNode;\n  /** Optional count badge rendered before the label. */\n  count?: number;\n  /** Iconify name or imported icon component. */\n  icon?: string | StaticIconComponent;\n  /** Classes for the count badge background. */\n  badge?: string;\n  /**\n   * Tri-state handler. When provided the pill renders as a toggle with a left\n   * minus (exclude) and right plus (include) region. Clicking a side toggles\n   * that state against \"neutral\"; clicking the label cycles neutral → include\n   * → exclude → neutral.\n   */\n  onModeChange?: (next: FilterMode) => void;\n  /** Legacy single-click handler, used when onModeChange is not provided. */\n  onClick?: () => void;\n  /** Browser tooltip and accessible label for tri-state controls. */\n  title?: string;\n  /** Places the tri-state toggle before or after the label. */\n  togglePosition?: \"left\" | \"right\";\n  /** Classes applied to the pill root. */\n  className?: string;\n};\n\nfunction bodyClasses(mode: FilterMode): string {\n  switch (mode) {\n    case \"active\":\n      return \"bg-primary/10 border-primary/40 text-primary font-medium\";\n    case \"include\":\n      return \"bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium\";\n    case \"exclude\":\n      return \"bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium\";\n    case \"neutral\":\n    default:\n      return \"border-border text-muted-foreground hover:bg-accent\";\n  }\n}\n\ntype SlotMode = \"exclude\" | \"neutral\" | \"include\";\n\nconst SLOT_TRANSLATE: Record<SlotMode, string> = {\n  exclude: \"translate-x-0\",\n  neutral: \"translate-x-4\",\n  include: \"translate-x-8\",\n};\n\nfunction TristateSwitch({\n  mode,\n  onChange,\n  ariaLabel,\n}: {\n  mode: FilterMode;\n  onChange: (next: FilterMode) => void;\n  ariaLabel?: string;\n}) {\n  const slot: SlotMode =\n    mode === \"exclude\" ? \"exclude\" : mode === \"include\" ? \"include\" : \"neutral\";\n  const bg =\n    slot === \"exclude\" ? \"bg-red-500/80\" : slot === \"include\" ? \"bg-green-500/80\" : \"bg-muted\";\n\n  // The three regions are aria-hidden click targets layered over the toggle\n  // track: clicking the left edge toggles exclude, the right edge toggles\n  // include, and the middle rotates. They are NOT focusable buttons — the\n  // whole switch is a single <button> so it exposes one accessible name and\n  // does not pollute the accessible name of any FilterBar wrapper that hosts\n  // it (e.g. the multi-filter option row, which is itself a role=\"button\").\n  const region = (next: FilterMode, regionMode: SlotMode) => (\n    <span\n      aria-hidden\n      data-tristate-region={regionMode}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(next);\n      }}\n      className=\"relative z-10 h-full flex-1 cursor-pointer\"\n    />\n  );\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      onClick={(event) => {\n        // Keyboard activation (Enter/Space) lands here without a region —\n        // cycle, matching the middle-region rotation.\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(nextTriStateMode(mode));\n      }}\n      className={cn(\n        \"relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200\",\n        bg,\n      )}\n    >\n      {region(mode === \"exclude\" ? \"neutral\" : \"exclude\", \"exclude\")}\n      {region(nextTriStateMode(mode), \"neutral\")}\n      {region(mode === \"include\" ? \"neutral\" : \"include\", \"include\")}\n      <span\n        aria-hidden\n        className={cn(\n          // The knob stays white in BOTH themes (standard switch look): on the\n          // dark-mode muted/red/green tracks white is the high-contrast choice,\n          // while bg-background would vanish against the track.\n          \"pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150\",\n          SLOT_TRANSLATE[slot],\n        )}\n      >\n        {slot !== \"neutral\" && (\n          <Icon\n            icon={slot === \"exclude\" ? UiClose : UiCheck}\n            className={cn(\n              \"text-[10px]\",\n              slot === \"exclude\" && \"text-red-600\",\n              slot === \"include\" && \"text-green-600\",\n            )}\n          />\n        )}\n      </span>\n    </button>\n  );\n}\n\nexport function FilterPill({\n  mode = \"neutral\",\n  label,\n  count,\n  icon,\n  badge,\n  onModeChange,\n  onClick,\n  title,\n  togglePosition = \"left\",\n  className,\n}: FilterPillProps) {\n  const triState = !!onModeChange;\n  const content = (\n    <>\n      {count !== undefined && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white\",\n            badge ?? \"bg-muted-foreground\",\n          )}\n        >\n          {count}\n        </span>\n      )}\n      {icon && (\n        <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-sm\" />\n      )}\n      <span className=\"truncate\">{label}</span>\n    </>\n  );\n\n  if (triState) {\n    const control = (\n      <TristateSwitch\n        mode={mode}\n        onChange={onModeChange!}\n        {...(title ? { ariaLabel: title } : {})}\n      />\n    );\n    const labelContent = (\n      <span className=\"inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground\">\n        {content}\n      </span>\n    );\n\n    return (\n      <span className={cn(\"inline-flex items-center gap-1.5 select-none\", className)} title={title}>\n        {togglePosition === \"right\" ? (\n          <>\n            {labelContent}\n            {control}\n          </>\n        ) : (\n          <>\n            {control}\n            {labelContent}\n          </>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      title={title}\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors\",\n        bodyClasses(mode),\n        className,\n      )}\n    >\n      <LegacyMarker mode={mode} />\n      {content}\n    </button>\n  );\n}\n\nfunction LegacyMarker({ mode }: { mode: FilterMode }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  if (mode === \"active\") return <span className=\"w-2 h-2 rounded-full bg-current\" />;\n  return <span className=\"w-2 h-2 rounded-full bg-current opacity-30\" />;\n}\n\nfunction nextTriStateMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\nexport type FilterPillGroupProps = {\n  /** Filter pills or separators to lay out. */\n  children: ReactNode;\n  /** Classes applied to the wrapping row. */\n  className?: string;\n};\n\nexport function FilterPillGroup({ children, className }: FilterPillGroupProps) {\n  return <div className={cn(\"flex items-center gap-1.5 flex-wrap\", className)}>{children}</div>;\n}\n\nexport function FilterSeparator() {\n  return (\n    <span aria-hidden className=\"text-border mx-0.5\">\n      |\n    </span>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FilterPill.js","sources":["../../src/data/FilterPill.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { UiAdd, UiCheck, UiClose, UiRemove } from \"../icons\";\n\nexport type FilterMode = \"active\" | \"neutral\" | \"include\" | \"exclude\";\n\nexport type FilterPillProps = {\n  /** Visual and semantic state for the pill. */\n  mode?: FilterMode;\n  /** Primary visible label. */\n  label: ReactNode;\n  /** Optional count badge rendered before the label. */\n  count?: number;\n  /** Iconify name or imported icon component. */\n  icon?: string | StaticIconComponent;\n  /** Classes for the count badge background. */\n  badge?: string;\n  /**\n   * Tri-state handler. When provided the pill renders as a toggle with a left\n   * minus (exclude) and right plus (include) region. Clicking a side toggles\n   * that state against \"neutral\"; clicking the label cycles neutral → include\n   * → exclude → neutral.\n   */\n  onModeChange?: (next: FilterMode) => void;\n  /** Legacy single-click handler, used when onModeChange is not provided. */\n  onClick?: () => void;\n  /** Browser tooltip and accessible label for tri-state controls. */\n  title?: string;\n  /** Places the tri-state toggle before or after the label. */\n  togglePosition?: \"left\" | \"right\";\n  /**\n   * When false the tri-state switch renders without button semantics (an\n   * aria-hidden span, nothing focusable) for hosts that own focus and keyboard\n   * themselves — e.g. a combobox listbox option, where a nested focusable\n   * button would violate the option content model. The region click zones\n   * remain active. Defaults to true.\n   */\n  interactive?: boolean;\n  /** Classes applied to the pill root. */\n  className?: string;\n};\n\nfunction bodyClasses(mode: FilterMode): string {\n  switch (mode) {\n    case \"active\":\n      return \"bg-primary/10 border-primary/40 text-primary font-medium\";\n    case \"include\":\n      return \"bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400 font-medium\";\n    case \"exclude\":\n      return \"bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-400 font-medium\";\n    case \"neutral\":\n    default:\n      return \"border-border text-muted-foreground hover:bg-accent\";\n  }\n}\n\ntype SlotMode = \"exclude\" | \"neutral\" | \"include\";\n\nconst SLOT_TRANSLATE: Record<SlotMode, string> = {\n  exclude: \"translate-x-0\",\n  neutral: \"translate-x-4\",\n  include: \"translate-x-8\",\n};\n\nfunction TristateSwitch({\n  mode,\n  onChange,\n  ariaLabel,\n  interactive = true,\n}: {\n  mode: FilterMode;\n  onChange: (next: FilterMode) => void;\n  ariaLabel?: string;\n  interactive?: boolean;\n}) {\n  const slot: SlotMode =\n    mode === \"exclude\" ? \"exclude\" : mode === \"include\" ? \"include\" : \"neutral\";\n  const bg =\n    slot === \"exclude\" ? \"bg-red-500/80\" : slot === \"include\" ? \"bg-green-500/80\" : \"bg-muted\";\n\n  // The three regions are aria-hidden click targets layered over the toggle\n  // track: clicking the left edge toggles exclude, the right edge toggles\n  // include, and the middle rotates. They are NOT focusable buttons — the\n  // whole switch is a single <button> so it exposes one accessible name and\n  // does not pollute the accessible name of any FilterBar wrapper that hosts\n  // it (e.g. the multi-filter option row, which is itself a role=\"button\").\n  const region = (next: FilterMode, regionMode: SlotMode) => (\n    <span\n      aria-hidden\n      data-tristate-region={regionMode}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(next);\n      }}\n      className=\"relative z-10 h-full flex-1 cursor-pointer\"\n    />\n  );\n\n  const content = (\n    <>\n      {region(mode === \"exclude\" ? \"neutral\" : \"exclude\", \"exclude\")}\n      {region(nextTriStateMode(mode), \"neutral\")}\n      {region(mode === \"include\" ? \"neutral\" : \"include\", \"include\")}\n      <span\n        aria-hidden\n        className={cn(\n          // The knob stays white in BOTH themes (standard switch look): on the\n          // dark-mode muted/red/green tracks white is the high-contrast choice,\n          // while bg-background would vanish against the track.\n          \"pointer-events-none absolute left-0.5 top-0.5 z-20 flex size-4 items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-150\",\n          SLOT_TRANSLATE[slot],\n        )}\n      >\n        {slot !== \"neutral\" && (\n          <Icon\n            icon={slot === \"exclude\" ? UiClose : UiCheck}\n            className={cn(\n              \"text-[10px]\",\n              slot === \"exclude\" && \"text-red-600\",\n              slot === \"include\" && \"text-green-600\",\n            )}\n          />\n        )}\n      </span>\n    </>\n  );\n\n  const trackClasses = cn(\n    \"relative inline-flex h-5 w-[52px] shrink-0 overflow-hidden rounded-full transition-colors duration-200\",\n    bg,\n  );\n\n  // Non-interactive hosts (combobox listbox options) own focus and keyboard;\n  // the switch must not add a nested focusable button inside role=\"option\".\n  if (!interactive) {\n    return (\n      <span aria-hidden className={trackClasses}>\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      onClick={(event) => {\n        // Keyboard activation (Enter/Space) lands here without a region —\n        // cycle, matching the middle-region rotation.\n        event.preventDefault();\n        event.stopPropagation();\n        onChange(nextTriStateMode(mode));\n      }}\n      className={trackClasses}\n    >\n      {content}\n    </button>\n  );\n}\n\nexport function FilterPill({\n  mode = \"neutral\",\n  label,\n  count,\n  icon,\n  badge,\n  onModeChange,\n  onClick,\n  title,\n  togglePosition = \"left\",\n  interactive = true,\n  className,\n}: FilterPillProps) {\n  const triState = !!onModeChange;\n  const content = (\n    <>\n      {count !== undefined && (\n        <span\n          className={cn(\n            \"inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full text-[10px] font-bold text-white\",\n            badge ?? \"bg-muted-foreground\",\n          )}\n        >\n          {count}\n        </span>\n      )}\n      {icon && (\n        <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-sm\" />\n      )}\n      <span className=\"truncate\">{label}</span>\n    </>\n  );\n\n  if (triState) {\n    const control = (\n      <TristateSwitch\n        mode={mode}\n        onChange={onModeChange!}\n        interactive={interactive}\n        {...(title ? { ariaLabel: title } : {})}\n      />\n    );\n    const labelContent = (\n      <span className=\"inline-flex min-w-0 items-center gap-1.5 text-xs text-foreground\">\n        {content}\n      </span>\n    );\n\n    return (\n      <span className={cn(\"inline-flex items-center gap-1.5 select-none\", className)} title={title}>\n        {togglePosition === \"right\" ? (\n          <>\n            {labelContent}\n            {control}\n          </>\n        ) : (\n          <>\n            {control}\n            {labelContent}\n          </>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      title={title}\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full border transition-colors\",\n        bodyClasses(mode),\n        className,\n      )}\n    >\n      <LegacyMarker mode={mode} />\n      {content}\n    </button>\n  );\n}\n\nfunction LegacyMarker({ mode }: { mode: FilterMode }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  if (mode === \"active\") return <span className=\"w-2 h-2 rounded-full bg-current\" />;\n  return <span className=\"w-2 h-2 rounded-full bg-current opacity-30\" />;\n}\n\nfunction nextTriStateMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\nexport type FilterPillGroupProps = {\n  /** Filter pills or separators to lay out. */\n  children: ReactNode;\n  /** Classes applied to the wrapping row. */\n  className?: string;\n};\n\nexport function FilterPillGroup({ children, className }: FilterPillGroupProps) {\n  return <div className={cn(\"flex items-center gap-1.5 flex-wrap\", className)}>{children}</div>;\n}\n\nexport function FilterSeparator() {\n  return (\n    <span aria-hidden className=\"text-border mx-0.5\">\n      |\n    </span>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/FixtureEditor/FenceForm.cjs

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const JsonSchemaForm = require("../../components/JsonSchemaForm.cjs");
+const Badge = require("../Badge.cjs");
+const fixtureBlocks = require("./fixture-blocks.cjs");
+const RawFenceEditor = require("./RawFenceEditor.cjs");
+function FenceForm({
+  info,
+  body,
+  schema,
+  parseAsYaml,
+  known,
+  readOnly,
+  onChangeBody
+}) {
+  const parsed = react.useMemo(
+    () => parseAsYaml ? fixtureBlocks.parseFixtureYaml(body) : void 0,
+    [body, parseAsYaml]
+  );
+  const raw = react.useMemo(
+    () => !parseAsYaml ? parseRawFenceValue(body) : void 0,
+    [body, parseAsYaml]
+  );
+  const formValue = parseAsYaml ? (parsed == null ? void 0 : parsed.ok) === true ? parsed.value : void 0 : raw == null ? void 0 : raw.value;
+  const canRenderForm = schema != null && formValue != null;
+  if (!canRenderForm) {
+    return /* @__PURE__ */ jsxRuntime.jsx(NestedPanel, { title: "Source", aside: sourceBadge(parseAsYaml, schema, parsed, known), children: /* @__PURE__ */ jsxRuntime.jsx(
+      RawFenceEditor.RawFenceEditor,
+      {
+        info,
+        body,
+        helper: (parsed == null ? void 0 : parsed.ok) === false ? parsed.error : void 0,
+        readOnly,
+        onChange: onChangeBody
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col border-t border-border", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(NestedPanel, { title: "Structured options", children: /* @__PURE__ */ jsxRuntime.jsx(
+      JsonSchemaForm.JsonSchemaForm,
+      {
+        schema,
+        value: formValue,
+        onChange: (next) => onChangeBody(
+          parseAsYaml ? fixtureBlocks.stringifyFixtureYaml(next) : stringifyRawFenceValue(next)
+        ),
+        readOnly,
+        size: "md",
+        showPreferencesMenu: false,
+        persistPreferences: false,
+        layout: {
+          mode: "inline",
+          labelMaxWidth: "12rem",
+          valueMaxWidth: "min(100%, 34rem)"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(NestedPanel, { title: "Source", children: /* @__PURE__ */ jsxRuntime.jsx(
+      RawFenceEditor.RawFenceEditor,
+      {
+        info,
+        body,
+        readOnly,
+        onChange: onChangeBody
+      }
+    ) })
+  ] });
+}
+function parseRawFenceValue(body) {
+  const parsed = fixtureBlocks.parseFixtureYaml(body);
+  if (parsed.ok && isRecord(parsed.value) && typeof parsed.value.content === "string") {
+    return { value: parsed.value };
+  }
+  return { value: { content: body } };
+}
+function stringifyRawFenceValue(value) {
+  const content = typeof value.content === "string" ? value.content : "";
+  const compact = {};
+  for (const [key, field] of Object.entries(value)) {
+    if (key === "content") continue;
+    if (isEmptyValue(field)) continue;
+    compact[key] = field;
+  }
+  if (Object.keys(compact).length === 0) {
+    return content;
+  }
+  return fixtureBlocks.stringifyFixtureYaml({ content, ...compact });
+}
+function isEmptyValue(value) {
+  if (value == null || value === "") return true;
+  if (Array.isArray(value)) return value.length === 0;
+  if (isRecord(value)) return Object.keys(value).length === 0;
+  return false;
+}
+function isRecord(value) {
+  return typeof value === "object" && value != null && !Array.isArray(value);
+}
+function sourceBadge(parseAsYaml, schema, parsed, known) {
+  if ((parsed == null ? void 0 : parsed.ok) === false) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { variant: "status", status: "error", size: "xs", clickToCopy: false, children: "YAML error" });
+  }
+  if (parseAsYaml && schema == null && !known) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { variant: "status", status: "warning", size: "xs", clickToCopy: false, children: "Unknown fence" });
+  }
+  return void 0;
+}
+function NestedPanel({
+  title,
+  aside,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "border-b border-border last:border-b-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-9 items-center justify-between gap-3 bg-muted/30 px-4 py-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xs font-semibold uppercase tracking-normal text-muted-foreground", children: title }),
+      aside
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 p-4", children })
+  ] });
+}
+exports.FenceForm = FenceForm;
+//# sourceMappingURL=FenceForm.cjs.map

package/dist/data/FixtureEditor/FenceForm.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FenceForm.cjs","sources":["../../../src/data/FixtureEditor/FenceForm.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { JsonSchemaForm } from \"../../components/JsonSchemaForm\";\nimport type { JsonSchemaObject } from \"../../components/json-schema-form-types\";\nimport { Badge } from \"../Badge\";\nimport type { FixtureEditorSize } from \"./types\";\nimport {\n  parseFixtureYaml,\n  stringifyFixtureYaml,\n  type ParsedFixtureYaml,\n} from \"./fixture-blocks\";\nimport { RawFenceEditor } from \"./RawFenceEditor\";\n\nexport type FenceFormProps = {\n  info: string;\n  body: string;\n  schema: JsonSchemaObject | undefined;\n  parseAsYaml: boolean;\n  known: boolean;\n  readOnly: boolean;\n  size: FixtureEditorSize;\n  onChangeBody: (body: string) => void;\n};\n\nexport function FenceForm({\n  info,\n  body,\n  schema,\n  parseAsYaml,\n  known,\n  readOnly,\n  onChangeBody,\n}: FenceFormProps) {\n  const parsed = useMemo<ParsedFixtureYaml | undefined>(\n    () => (parseAsYaml ? parseFixtureYaml(body) : undefined),\n    [body, parseAsYaml],\n  );\n  const raw = useMemo(\n    () => (!parseAsYaml ? parseRawFenceValue(body) : undefined),\n    [body, parseAsYaml],\n  );\n  const formValue = parseAsYaml\n    ? parsed?.ok === true\n      ? parsed.value\n      : undefined\n    : raw?.value;\n  const canRenderForm = schema != null && formValue != null;\n\n  if (!canRenderForm) {\n    return (\n      <NestedPanel title=\"Source\" aside={sourceBadge(parseAsYaml, schema, parsed, known)}>\n        <RawFenceEditor\n          info={info}\n          body={body}\n          helper={parsed?.ok === false ? parsed.error : undefined}\n          readOnly={readOnly}\n          onChange={onChangeBody}\n        />\n      </NestedPanel>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col border-t border-border\">\n      <NestedPanel title=\"Structured options\">\n        <JsonSchemaForm\n          schema={schema}\n          value={formValue}\n          onChange={(next) =>\n            onChangeBody(\n              parseAsYaml\n                ? stringifyFixtureYaml(next)\n                : stringifyRawFenceValue(next),\n            )\n          }\n          readOnly={readOnly}\n          size=\"md\"\n          showPreferencesMenu={false}\n          persistPreferences={false}\n          layout={{\n            mode: \"inline\",\n            labelMaxWidth: \"12rem\",\n            valueMaxWidth: \"min(100%, 34rem)\",\n          }}\n        />\n      </NestedPanel>\n      <NestedPanel title=\"Source\">\n        <RawFenceEditor\n          info={info}\n          body={body}\n          readOnly={readOnly}\n          onChange={onChangeBody}\n        />\n      </NestedPanel>\n    </div>\n  );\n}\n\nfunction parseRawFenceValue(body: string): { value: Record<string, unknown> } {\n  const parsed = parseFixtureYaml(body);\n  if (\n    parsed.ok &&\n    isRecord(parsed.value) &&\n    typeof parsed.value.content === \"string\"\n  ) {\n    return { value: parsed.value };\n  }\n  return { value: { content: body } };\n}\n\nfunction stringifyRawFenceValue(value: Record<string, unknown>): string {\n  const content = typeof value.content === \"string\" ? value.content : \"\";\n  const compact: Record<string, unknown> = {};\n  for (const [key, field] of Object.entries(value)) {\n    if (key === \"content\") continue;\n    if (isEmptyValue(field)) continue;\n    compact[key] = field;\n  }\n  if (Object.keys(compact).length === 0) {\n    return content;\n  }\n  return stringifyFixtureYaml({ content, ...compact });\n}\n\nfunction isEmptyValue(value: unknown): boolean {\n  if (value == null || value === \"\") return true;\n  if (Array.isArray(value)) return value.length === 0;\n  if (isRecord(value)) return Object.keys(value).length === 0;\n  return false;\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === \"object\" && value != null && !Array.isArray(value);\n}\n\nfunction sourceBadge(\n  parseAsYaml: boolean,\n  schema: JsonSchemaObject | undefined,\n  parsed: ParsedFixtureYaml | undefined,\n  known: boolean,\n) {\n  if (parsed?.ok === false) {\n    return (\n      <Badge variant=\"status\" status=\"error\" size=\"xs\" clickToCopy={false}>\n        YAML error\n      </Badge>\n    );\n  }\n\n  if (parseAsYaml && schema == null && !known) {\n    return (\n      <Badge variant=\"status\" status=\"warning\" size=\"xs\" clickToCopy={false}>\n        Unknown fence\n      </Badge>\n    );\n  }\n\n  return undefined;\n}\n\nfunction NestedPanel({\n  title,\n  aside,\n  children,\n}: {\n  title: string;\n  aside?: ReactNode;\n  children: ReactNode;\n}) {\n  return (\n    <section className=\"border-b border-border last:border-b-0\">\n      <div className=\"flex min-h-9 items-center justify-between gap-3 bg-muted/30 px-4 py-2\">\n        <h4 className=\"text-xs font-semibold uppercase tracking-normal text-muted-foreground\">\n          {title}\n        </h4>\n        {aside}\n      </div>\n      <div className=\"min-w-0 p-4\">{children}</div>\n    </section>\n  );\n}\n"],"names":["useMemo","parseFixtureYaml","jsx","RawFenceEditor","jsxs","JsonSchemaForm","stringifyFixtureYaml","Badge"],"mappings":"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"}

package/dist/data/FixtureEditor/FenceForm.d.ts

@@ -0,0 +1,14 @@
+import { JsonSchemaObject } from '../../components/json-schema-form-types';
+import { FixtureEditorSize } from './types';
+export type FenceFormProps = {
+    info: string;
+    body: string;
+    schema: JsonSchemaObject | undefined;
+    parseAsYaml: boolean;
+    known: boolean;
+    readOnly: boolean;
+    size: FixtureEditorSize;
+    onChangeBody: (body: string) => void;
+};
+export declare function FenceForm({ info, body, schema, parseAsYaml, known, readOnly, onChangeBody, }: FenceFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FenceForm.d.ts.map

package/dist/data/FixtureEditor/FenceForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FenceForm.d.ts","sourceRoot":"","sources":["../../../src/data/FixtureEditor/FenceForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAEhF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAQjD,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACrC,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,iBAAiB,CAAC;IACxB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,WAAW,EACX,KAAK,EACL,QAAQ,EACR,YAAY,GACb,EAAE,cAAc,2CAgEhB"}