@flanksource/clicky-ui 0.2.2 → 0.2.3

package/dist/components/MultiSelect.cjs

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const button = require("./button.cjs");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const UiChevronUp = require("../icons/components/UiChevronUp.cjs");
+const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
+function MultiSelect({
+  options,
+  value,
+  onChange,
+  placeholder = "Select options",
+  disabled,
+  className,
+  triggerClassName,
+  menuClassName
+}) {
+  const rootRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  react.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      var _a;
+      if (!((_a = rootRef.current) == null ? void 0 : _a.contains(event.target))) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (event) => {
+      var _a;
+      if (event.key === "Escape") {
+        setOpen(false);
+        (_a = triggerRef.current) == null ? void 0 : _a.focus();
+      }
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  const selected = react.useMemo(() => {
+    const selectedOptions = options.filter((option) => value.includes(option.value));
+    const labels = selectedOptions.map((option) => option.label).filter((label) => typeof label === "string");
+    if (selectedOptions.length === 0) return placeholder;
+    if (labels.length === 0) return `${selectedOptions.length} selected`;
+    if (labels.length <= 2) return labels.join(", ");
+    return `${labels.length} selected`;
+  }, [options, placeholder, value]);
+  function toggleOption(nextValue) {
+    if (value.includes(nextValue)) {
+      onChange(value.filter((current) => current !== nextValue));
+      return;
+    }
+    onChange([...value, nextValue]);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: utils.cn("relative", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      button.Button,
+      {
+        ref: triggerRef,
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        disabled,
+        "aria-label": `${placeholder} filter`,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: () => setOpen((current) => !current),
+        className: utils.cn(
+          "w-fit max-w-[15rem] min-w-0 shrink-0 justify-between gap-3 text-left font-normal",
+          triggerClassName,
+          value.length === 0 && "text-muted-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: selected }),
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: open ? UiChevronUp.UiChevronUp : UiChevronDown.UiChevronDown, className: "text-muted-foreground" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "menu",
+        className: utils.cn(
+          "absolute left-0 top-[calc(100%+0.375rem)] z-50 min-w-[14rem] max-w-[20rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5",
+          menuClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between gap-2 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: placeholder }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "text-[10px] text-primary disabled:text-muted-foreground",
+                onClick: () => onChange([]),
+                disabled: value.length === 0,
+                children: "Clear all"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-64 overflow-auto", children: options.map((option) => {
+            const checked = value.includes(option.value);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "label",
+              {
+                className: utils.cn(
+                  "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent",
+                  option.disabled && "cursor-not-allowed opacity-50"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      role: "menuitemcheckbox",
+                      className: "size-4 rounded border border-input",
+                      checked,
+                      disabled: option.disabled,
+                      onChange: () => toggleOption(option.value)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
+                ]
+              },
+              option.value
+            );
+          }) })
+        ]
+      }
+    )
+  ] });
+}
+exports.MultiSelect = MultiSelect;
+//# sourceMappingURL=MultiSelect.cjs.map

package/dist/components/MultiSelect.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.cjs","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\n\nexport type MultiSelectOption = {\n  /** Stable option value written into the selected value array. */\n  value: string;\n  /** Visible option label in the menu and trigger summary. */\n  label: ReactNode;\n  /** Prevents selecting this option while still showing it in the menu. */\n  disabled?: boolean;\n  /** Optional browser tooltip for truncated or explanatory labels. */\n  title?: string;\n};\n\nexport type MultiSelectProps = {\n  /** Available options, rendered in the order provided. */\n  options: MultiSelectOption[];\n  /** Controlled selected option values. */\n  value: string[];\n  /** Called with the complete next value array after each toggle. */\n  onChange: (next: string[]) => void;\n  /** Trigger text when nothing is selected. Also labels the menu. */\n  placeholder?: string;\n  /** Disables opening and changing selections. */\n  disabled?: boolean;\n  /** Classes applied to the root wrapper. */\n  className?: string;\n  /** Classes applied to the trigger button. */\n  triggerClassName?: string;\n  /** Classes applied to the popover menu. */\n  menuClassName?: string;\n};\n\nexport function MultiSelect({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select options\",\n  disabled,\n  className,\n  triggerClassName,\n  menuClassName,\n}: MultiSelectProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (!open) return;\n\n    const onPointerDown = (event: MouseEvent) => {\n      if (!rootRef.current?.contains(event.target as Node)) {\n        setOpen(false);\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setOpen(false);\n        triggerRef.current?.focus();\n      }\n    };\n\n    document.addEventListener(\"mousedown\", onPointerDown);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      document.removeEventListener(\"mousedown\", onPointerDown);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [open]);\n\n  const selected = useMemo(() => {\n    const selectedOptions = options.filter((option) => value.includes(option.value));\n    const labels = selectedOptions\n      .map((option) => option.label)\n      .filter((label): label is string => typeof label === \"string\");\n\n    if (selectedOptions.length === 0) return placeholder;\n    if (labels.length === 0) return `${selectedOptions.length} selected`;\n    if (labels.length <= 2) return labels.join(\", \");\n    return `${labels.length} selected`;\n  }, [options, placeholder, value]);\n\n  function toggleOption(nextValue: string) {\n    if (value.includes(nextValue)) {\n      onChange(value.filter((current) => current !== nextValue));\n      return;\n    }\n    onChange([...value, nextValue]);\n  }\n\n  return (\n    <div ref={rootRef} className={cn(\"relative\", className)}>\n      <Button\n        ref={triggerRef}\n        type=\"button\"\n        variant=\"outline\"\n        size=\"sm\"\n        disabled={disabled}\n        aria-label={`${placeholder} filter`}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={() => setOpen((current) => !current)}\n        className={cn(\n          \"w-fit max-w-[15rem] min-w-0 shrink-0 justify-between gap-3 text-left font-normal\",\n          triggerClassName,\n          value.length === 0 && \"text-muted-foreground\",\n        )}\n      >\n        <span className=\"truncate\">{selected}</span>\n        <Icon icon={open ? UiChevronUp : UiChevronDown} className=\"text-muted-foreground\" />\n      </Button>\n      {open && (\n        <div\n          role=\"menu\"\n          className={cn(\n            \"absolute left-0 top-[calc(100%+0.375rem)] z-50 min-w-[14rem] max-w-[20rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n            menuClassName,\n          )}\n        >\n          <div className=\"mb-1 flex items-center justify-between gap-2 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            <span>{placeholder}</span>\n            <button\n              type=\"button\"\n              className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n              onClick={() => onChange([])}\n              disabled={value.length === 0}\n            >\n              Clear all\n            </button>\n          </div>\n          <div className=\"max-h-64 overflow-auto\">\n            {options.map((option) => {\n              const checked = value.includes(option.value);\n              return (\n                <label\n                  key={option.value}\n                  className={cn(\n                    \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent\",\n                    option.disabled && \"cursor-not-allowed opacity-50\",\n                  )}\n                >\n                  <input\n                    type=\"checkbox\"\n                    role=\"menuitemcheckbox\"\n                    className=\"size-4 rounded border border-input\"\n                    checked={checked}\n                    disabled={option.disabled}\n                    onChange={() => toggleOption(option.value)}\n                  />\n                  <span className=\"min-w-0 truncate\">{option.label}</span>\n                </label>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["useRef","useState","useEffect","useMemo","jsxs","cn","Button","jsx","Icon","UiChevronUp","UiChevronDown"],"mappings":"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"}

package/dist/components/MultiSelect.d.ts

@@ -1,18 +1,30 @@
 import { ReactNode } from 'react';
 export type MultiSelectOption = {
+    /** Stable option value written into the selected value array. */
     value: string;
+    /** Visible option label in the menu and trigger summary. */
     label: ReactNode;
+    /** Prevents selecting this option while still showing it in the menu. */
     disabled?: boolean;
+    /** Optional browser tooltip for truncated or explanatory labels. */
     title?: string;
 };
 export type MultiSelectProps = {
+    /** Available options, rendered in the order provided. */
     options: MultiSelectOption[];
+    /** Controlled selected option values. */
     value: string[];
+    /** Called with the complete next value array after each toggle. */
     onChange: (next: string[]) => void;
+    /** Trigger text when nothing is selected. Also labels the menu. */
     placeholder?: string;
+    /** Disables opening and changing selections. */
     disabled?: boolean;
+    /** Classes applied to the root wrapper. */
     className?: string;
+    /** Classes applied to the trigger button. */
     triggerClassName?: string;
+    /** Classes applied to the popover menu. */
     menuClassName?: string;
 };
 export declare function MultiSelect({ options, value, onChange, placeholder, disabled, className, triggerClassName, menuClassName, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../src/components/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAA8B,EAC9B,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,aAAa,GACd,EAAE,gBAAgB,2CAwHlB"}
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../src/components/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM7E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,KAAK,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,yDAAyD;IACzD,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,yCAAyC;IACzC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,mEAAmE;IACnE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAA8B,EAC9B,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,aAAa,GACd,EAAE,gBAAgB,2CAqHlB"}

package/dist/components/MultiSelect.js

@@ -3,6 +3,8 @@ import { useRef, useState, useEffect, useMemo } from "react";
 import { Button } from "./button.js";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
+import { UiChevronUp } from "../icons/components/UiChevronUp.js";
+import { UiChevronDown } from "../icons/components/UiChevronDown.js";
 function MultiSelect({
   options,
   value,
@@ -73,13 +75,7 @@ function MultiSelect({
         ),
         children: [
           /* @__PURE__ */ jsx("span", { className: "truncate", children: selected }),
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              name: open ? "codicon:chevron-up" : "codicon:chevron-down",
-              className: "text-muted-foreground"
-            }
-          )
+          /* @__PURE__ */ jsx(Icon, { icon: open ? UiChevronUp : UiChevronDown, className: "text-muted-foreground" })
         ]
       }
     ),

package/dist/components/MultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\n\nexport type MultiSelectOption = {\n  value: string;\n  label: ReactNode;\n  disabled?: boolean;\n  title?: string;\n};\n\nexport type MultiSelectProps = {\n  options: MultiSelectOption[];\n  value: string[];\n  onChange: (next: string[]) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  className?: string;\n  triggerClassName?: string;\n  menuClassName?: string;\n};\n\nexport function MultiSelect({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select options\",\n  disabled,\n  className,\n  triggerClassName,\n  menuClassName,\n}: MultiSelectProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (!open) return;\n\n    const onPointerDown = (event: MouseEvent) => {\n      if (!rootRef.current?.contains(event.target as Node)) {\n        setOpen(false);\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setOpen(false);\n        triggerRef.current?.focus();\n      }\n    };\n\n    document.addEventListener(\"mousedown\", onPointerDown);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      document.removeEventListener(\"mousedown\", onPointerDown);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [open]);\n\n  const selected = useMemo(() => {\n    const selectedOptions = options.filter((option) => value.includes(option.value));\n    const labels = selectedOptions\n      .map((option) => option.label)\n      .filter((label): label is string => typeof label === \"string\");\n\n    if (selectedOptions.length === 0) return placeholder;\n    if (labels.length === 0) return `${selectedOptions.length} selected`;\n    if (labels.length <= 2) return labels.join(\", \");\n    return `${labels.length} selected`;\n  }, [options, placeholder, value]);\n\n  function toggleOption(nextValue: string) {\n    if (value.includes(nextValue)) {\n      onChange(value.filter((current) => current !== nextValue));\n      return;\n    }\n    onChange([...value, nextValue]);\n  }\n\n  return (\n    <div ref={rootRef} className={cn(\"relative\", className)}>\n      <Button\n        ref={triggerRef}\n        type=\"button\"\n        variant=\"outline\"\n        size=\"sm\"\n        disabled={disabled}\n        aria-label={`${placeholder} filter`}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={() => setOpen((current) => !current)}\n        className={cn(\n          \"w-fit max-w-[15rem] min-w-0 shrink-0 justify-between gap-3 text-left font-normal\",\n          triggerClassName,\n          value.length === 0 && \"text-muted-foreground\",\n        )}\n      >\n        <span className=\"truncate\">{selected}</span>\n        <Icon\n          name={open ? \"codicon:chevron-up\" : \"codicon:chevron-down\"}\n          className=\"text-muted-foreground\"\n        />\n      </Button>\n      {open && (\n        <div\n          role=\"menu\"\n          className={cn(\n            \"absolute left-0 top-[calc(100%+0.375rem)] z-50 min-w-[14rem] max-w-[20rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n            menuClassName,\n          )}\n        >\n          <div className=\"mb-1 flex items-center justify-between gap-2 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            <span>{placeholder}</span>\n            <button\n              type=\"button\"\n              className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n              onClick={() => onChange([])}\n              disabled={value.length === 0}\n            >\n              Clear all\n            </button>\n          </div>\n          <div className=\"max-h-64 overflow-auto\">\n            {options.map((option) => {\n              const checked = value.includes(option.value);\n              return (\n                <label\n                  key={option.value}\n                  className={cn(\n                    \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent\",\n                    option.disabled && \"cursor-not-allowed opacity-50\",\n                  )}\n                >\n                  <input\n                    type=\"checkbox\"\n                    role=\"menuitemcheckbox\"\n                    className=\"size-4 rounded border border-input\"\n                    checked={checked}\n                    disabled={option.disabled}\n                    onChange={() => toggleOption(option.value)}\n                  />\n                  <span className=\"min-w-0 truncate\">{option.label}</span>\n                </label>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MultiSelect.js","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\n\nexport type MultiSelectOption = {\n  /** Stable option value written into the selected value array. */\n  value: string;\n  /** Visible option label in the menu and trigger summary. */\n  label: ReactNode;\n  /** Prevents selecting this option while still showing it in the menu. */\n  disabled?: boolean;\n  /** Optional browser tooltip for truncated or explanatory labels. */\n  title?: string;\n};\n\nexport type MultiSelectProps = {\n  /** Available options, rendered in the order provided. */\n  options: MultiSelectOption[];\n  /** Controlled selected option values. */\n  value: string[];\n  /** Called with the complete next value array after each toggle. */\n  onChange: (next: string[]) => void;\n  /** Trigger text when nothing is selected. Also labels the menu. */\n  placeholder?: string;\n  /** Disables opening and changing selections. */\n  disabled?: boolean;\n  /** Classes applied to the root wrapper. */\n  className?: string;\n  /** Classes applied to the trigger button. */\n  triggerClassName?: string;\n  /** Classes applied to the popover menu. */\n  menuClassName?: string;\n};\n\nexport function MultiSelect({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select options\",\n  disabled,\n  className,\n  triggerClassName,\n  menuClassName,\n}: MultiSelectProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (!open) return;\n\n    const onPointerDown = (event: MouseEvent) => {\n      if (!rootRef.current?.contains(event.target as Node)) {\n        setOpen(false);\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setOpen(false);\n        triggerRef.current?.focus();\n      }\n    };\n\n    document.addEventListener(\"mousedown\", onPointerDown);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      document.removeEventListener(\"mousedown\", onPointerDown);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [open]);\n\n  const selected = useMemo(() => {\n    const selectedOptions = options.filter((option) => value.includes(option.value));\n    const labels = selectedOptions\n      .map((option) => option.label)\n      .filter((label): label is string => typeof label === \"string\");\n\n    if (selectedOptions.length === 0) return placeholder;\n    if (labels.length === 0) return `${selectedOptions.length} selected`;\n    if (labels.length <= 2) return labels.join(\", \");\n    return `${labels.length} selected`;\n  }, [options, placeholder, value]);\n\n  function toggleOption(nextValue: string) {\n    if (value.includes(nextValue)) {\n      onChange(value.filter((current) => current !== nextValue));\n      return;\n    }\n    onChange([...value, nextValue]);\n  }\n\n  return (\n    <div ref={rootRef} className={cn(\"relative\", className)}>\n      <Button\n        ref={triggerRef}\n        type=\"button\"\n        variant=\"outline\"\n        size=\"sm\"\n        disabled={disabled}\n        aria-label={`${placeholder} filter`}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={() => setOpen((current) => !current)}\n        className={cn(\n          \"w-fit max-w-[15rem] min-w-0 shrink-0 justify-between gap-3 text-left font-normal\",\n          triggerClassName,\n          value.length === 0 && \"text-muted-foreground\",\n        )}\n      >\n        <span className=\"truncate\">{selected}</span>\n        <Icon icon={open ? UiChevronUp : UiChevronDown} className=\"text-muted-foreground\" />\n      </Button>\n      {open && (\n        <div\n          role=\"menu\"\n          className={cn(\n            \"absolute left-0 top-[calc(100%+0.375rem)] z-50 min-w-[14rem] max-w-[20rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n            menuClassName,\n          )}\n        >\n          <div className=\"mb-1 flex items-center justify-between gap-2 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            <span>{placeholder}</span>\n            <button\n              type=\"button\"\n              className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n              onClick={() => onChange([])}\n              disabled={value.length === 0}\n            >\n              Clear all\n            </button>\n          </div>\n          <div className=\"max-h-64 overflow-auto\">\n            {options.map((option) => {\n              const checked = value.includes(option.value);\n              return (\n                <label\n                  key={option.value}\n                  className={cn(\n                    \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent\",\n                    option.disabled && \"cursor-not-allowed opacity-50\",\n                  )}\n                >\n                  <input\n                    type=\"checkbox\"\n                    role=\"menuitemcheckbox\"\n                    className=\"size-4 rounded border border-input\"\n                    checked={checked}\n                    disabled={option.disabled}\n                    onChange={() => toggleOption(option.value)}\n                  />\n                  <span className=\"min-w-0 truncate\">{option.label}</span>\n                </label>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/RangeSlider.cjs

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const thumbClassName = "[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-background/80 [&::-webkit-slider-thumb]:bg-muted-foreground [&::-webkit-slider-thumb]:shadow-sm [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-background/80 [&::-moz-range-thumb]:bg-muted-foreground [&::-moz-range-thumb]:shadow-sm";
+function RangeSlider({
+  min,
+  max,
+  value,
+  onChange,
+  step = 1,
+  ariaLabelMin = "Minimum value",
+  ariaLabelMax = "Maximum value",
+  className,
+  trackClassName,
+  rangeClassName,
+  thumbClassName: thumbOverrideClassName
+}) {
+  const [lower, upper] = normalizeRangeValue(value, min, max);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative h-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils.cn(
+          "absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border",
+          trackClassName
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils.cn(
+          "absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary/70",
+          rangeClassName
+        ),
+        style: {
+          left: `${valueToPercent(lower, min, max)}%`,
+          right: `${100 - valueToPercent(upper, min, max)}%`
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "range",
+        "aria-label": ariaLabelMin,
+        min,
+        max,
+        step,
+        value: lower,
+        className: utils.cn(baseSliderClassName, thumbClassName, thumbOverrideClassName),
+        style: { zIndex: lower >= max ? 30 : 20 },
+        onChange: (event) => {
+          const nextLower = clampNumber(Number(event.target.value), min, max);
+          onChange([Math.min(nextLower, upper), upper]);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "range",
+        "aria-label": ariaLabelMax,
+        min,
+        max,
+        step,
+        value: upper,
+        className: utils.cn(baseSliderClassName, thumbClassName, thumbOverrideClassName),
+        onChange: (event) => {
+          const nextUpper = clampNumber(Number(event.target.value), min, max);
+          onChange([lower, Math.max(nextUpper, lower)]);
+        }
+      }
+    )
+  ] });
+}
+const baseSliderClassName = "pointer-events-none absolute inset-0 h-6 w-full appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent";
+function normalizeRangeValue(value, min, max) {
+  const lower = clampNumber(Math.min(value[0], value[1]), min, max);
+  const upper = clampNumber(Math.max(value[0], value[1]), min, max);
+  return [lower, upper];
+}
+function clampNumber(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function valueToPercent(value, min, max) {
+  if (max <= min) return 0;
+  return (value - min) / (max - min) * 100;
+}
+exports.RangeSlider = RangeSlider;
+//# sourceMappingURL=RangeSlider.cjs.map

package/dist/components/RangeSlider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSlider.cjs","sources":["../../src/components/RangeSlider.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\n\nexport type RangeSliderValue = [number, number];\n\nexport type RangeSliderProps = {\n  min: number;\n  max: number;\n  value: RangeSliderValue;\n  onChange: (value: RangeSliderValue) => void;\n  step?: number;\n  ariaLabelMin?: string;\n  ariaLabelMax?: string;\n  className?: string;\n  trackClassName?: string;\n  rangeClassName?: string;\n  thumbClassName?: string;\n};\n\nconst thumbClassName =\n  \"[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-background/80 [&::-webkit-slider-thumb]:bg-muted-foreground [&::-webkit-slider-thumb]:shadow-sm [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-background/80 [&::-moz-range-thumb]:bg-muted-foreground [&::-moz-range-thumb]:shadow-sm\";\n\nexport function RangeSlider({\n  min,\n  max,\n  value,\n  onChange,\n  step = 1,\n  ariaLabelMin = \"Minimum value\",\n  ariaLabelMax = \"Maximum value\",\n  className,\n  trackClassName,\n  rangeClassName,\n  thumbClassName: thumbOverrideClassName,\n}: RangeSliderProps) {\n  const [lower, upper] = normalizeRangeValue(value, min, max);\n\n  return (\n    <div className={cn(\"relative h-6\", className)}>\n      <div\n        className={cn(\n          \"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border\",\n          trackClassName,\n        )}\n      />\n      <div\n        className={cn(\n          \"absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary/70\",\n          rangeClassName,\n        )}\n        style={{\n          left: `${valueToPercent(lower, min, max)}%`,\n          right: `${100 - valueToPercent(upper, min, max)}%`,\n        }}\n      />\n      <input\n        type=\"range\"\n        aria-label={ariaLabelMin}\n        min={min}\n        max={max}\n        step={step}\n        value={lower}\n        className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n        style={{ zIndex: lower >= max ? 30 : 20 }}\n        onChange={(event) => {\n          const nextLower = clampNumber(Number(event.target.value), min, max);\n          onChange([Math.min(nextLower, upper), upper]);\n        }}\n      />\n      <input\n        type=\"range\"\n        aria-label={ariaLabelMax}\n        min={min}\n        max={max}\n        step={step}\n        value={upper}\n        className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n        onChange={(event) => {\n          const nextUpper = clampNumber(Number(event.target.value), min, max);\n          onChange([lower, Math.max(nextUpper, lower)]);\n        }}\n      />\n    </div>\n  );\n}\n\nconst baseSliderClassName =\n  \"pointer-events-none absolute inset-0 h-6 w-full appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent\";\n\nfunction normalizeRangeValue(value: RangeSliderValue, min: number, max: number): RangeSliderValue {\n  const lower = clampNumber(Math.min(value[0], value[1]), min, max);\n  const upper = clampNumber(Math.max(value[0], value[1]), min, max);\n  return [lower, upper];\n}\n\nfunction clampNumber(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\nfunction valueToPercent(value: number, min: number, max: number) {\n  if (max <= min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n"],"names":["cn","jsx"],"mappings":";;;;AAkBA,MAAM,iBACJ;AAEK,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,eAAe;AAAA,EACf,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,GAAqB;AACnB,QAAM,CAAC,OAAO,KAAK,IAAI,oBAAoB,OAAO,KAAK,GAAG;AAE1D,yCACG,OAAA,EAAI,WAAWA,MAAAA,GAAG,gBAAgB,SAAS,GAC1C,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,MAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAEFC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,MAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL,MAAM,GAAG,eAAe,OAAO,KAAK,GAAG,CAAC;AAAA,UACxC,OAAO,GAAG,MAAM,eAAe,OAAO,KAAK,GAAG,CAAC;AAAA,QAAA;AAAA,MACjD;AAAA,IAAA;AAAA,IAEFC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,WAAWD,MAAAA,GAAG,qBAAqB,gBAAgB,sBAAsB;AAAA,QACzE,OAAO,EAAE,QAAQ,SAAS,MAAM,KAAK,GAAA;AAAA,QACrC,UAAU,CAAC,UAAU;AACnB,gBAAM,YAAY,YAAY,OAAO,MAAM,OAAO,KAAK,GAAG,KAAK,GAAG;AAClE,mBAAS,CAAC,KAAK,IAAI,WAAW,KAAK,GAAG,KAAK,CAAC;AAAA,QAC9C;AAAA,MAAA;AAAA,IAAA;AAAA,IAEFC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,WAAWD,MAAAA,GAAG,qBAAqB,gBAAgB,sBAAsB;AAAA,QACzE,UAAU,CAAC,UAAU;AACnB,gBAAM,YAAY,YAAY,OAAO,MAAM,OAAO,KAAK,GAAG,KAAK,GAAG;AAClE,mBAAS,CAAC,OAAO,KAAK,IAAI,WAAW,KAAK,CAAC,CAAC;AAAA,QAC9C;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEA,MAAM,sBACJ;AAEF,SAAS,oBAAoB,OAAyB,KAAa,KAA+B;AAChG,QAAM,QAAQ,YAAY,KAAK,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG;AAChE,QAAM,QAAQ,YAAY,KAAK,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG;AAChE,SAAO,CAAC,OAAO,KAAK;AACtB;AAEA,SAAS,YAAY,OAAe,KAAa,KAAa;AAC5D,SAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAC3C;AAEA,SAAS,eAAe,OAAe,KAAa,KAAa;AAC/D,MAAI,OAAO,IAAK,QAAO;AACvB,UAAS,QAAQ,QAAQ,MAAM,OAAQ;AACzC;;"}