@flanksource/clicky-ui 0.1.0 → 0.2.2

package/dist/components/button.js

@@ -0,0 +1,126 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../lib/utils.js";
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-control-h px-control-px py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-control-h w-control-h"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function ButtonSpinner() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "32",
+      height: "32",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      className: "h-4 w-4 shrink-0",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "4", cy: "12", r: "3", fill: "#151515", children: /* @__PURE__ */ jsx(
+          "animate",
+          {
+            id: "SVG7x14Dcom",
+            fill: "freeze",
+            attributeName: "opacity",
+            begin: "0;SVGqSjG0dUp.end-0.25s",
+            dur: "0.75s",
+            values: "1;0.2"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3", fill: "#151515", opacity: "0.4", children: /* @__PURE__ */ jsx(
+          "animate",
+          {
+            fill: "freeze",
+            attributeName: "opacity",
+            begin: "SVG7x14Dcom.begin+0.15s",
+            dur: "0.75s",
+            values: "1;0.2"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("circle", { cx: "20", cy: "12", r: "3", fill: "#151515", opacity: "0.3", children: /* @__PURE__ */ jsx(
+          "animate",
+          {
+            id: "SVGqSjG0dUp",
+            fill: "freeze",
+            attributeName: "opacity",
+            begin: "SVG7x14Dcom.begin+0.3s",
+            dur: "0.75s",
+            values: "1;0.2"
+          }
+        ) })
+      ]
+    }
+  );
+}
+const Button = forwardRef(
+  ({
+    children,
+    className,
+    disabled,
+    loading = false,
+    loadingLabel,
+    variant,
+    size,
+    asChild = false,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const content = loadingLabel !== void 0 ? loadingLabel : children;
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Comp,
+        {
+          ref,
+          "aria-busy": loading || void 0,
+          className: cn(buttonVariants({ variant, size }), className),
+          disabled: disabled || loading,
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        ref,
+        "aria-busy": loading || void 0,
+        className: cn(buttonVariants({ variant, size }), className),
+        disabled: disabled || loading,
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ jsx(ButtonSpinner, {}),
+          content
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button,
+  buttonVariants
+};
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../src/components/button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline: \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-control-h px-control-px py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-control-h w-control-h\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    loading?: boolean;\n    loadingLabel?: ReactNode;\n  };\n\nfunction ButtonSpinner() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n      className=\"h-4 w-4 shrink-0\"\n    >\n      <circle cx=\"4\" cy=\"12\" r=\"3\" fill=\"#151515\">\n        <animate\n          id=\"SVG7x14Dcom\"\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"0;SVGqSjG0dUp.end-0.25s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n      <circle cx=\"12\" cy=\"12\" r=\"3\" fill=\"#151515\" opacity=\"0.4\">\n        <animate\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"SVG7x14Dcom.begin+0.15s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n      <circle cx=\"20\" cy=\"12\" r=\"3\" fill=\"#151515\" opacity=\"0.3\">\n        <animate\n          id=\"SVGqSjG0dUp\"\n          fill=\"freeze\"\n          attributeName=\"opacity\"\n          begin=\"SVG7x14Dcom.begin+0.3s\"\n          dur=\"0.75s\"\n          values=\"1;0.2\"\n        />\n      </circle>\n    </svg>\n  );\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      children,\n      className,\n      disabled,\n      loading = false,\n      loadingLabel,\n      variant,\n      size,\n      asChild = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const content = loadingLabel !== undefined ? loadingLabel : children;\n\n    if (asChild) {\n      return (\n        <Comp\n          ref={ref}\n          aria-busy={loading || undefined}\n          className={cn(buttonVariants({ variant, size }), className)}\n          disabled={disabled || loading}\n          {...props}\n        >\n          {children}\n        </Comp>\n      );\n    }\n\n    return (\n      <Comp\n        ref={ref}\n        aria-busy={loading || undefined}\n        className={cn(buttonVariants({ variant, size }), className)}\n        disabled={disabled || loading}\n        {...props}\n      >\n        {loading && <ButtonSpinner />}\n        {content}\n      </Comp>\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { buttonVariants };\n"],"names":[],"mappings":";;;;;AAKA,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,MAER,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AASA,SAAS,gBAAgB;AACvB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,eAAY;AAAA,MACZ,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,IAAG,KAAI,IAAG,MAAK,GAAE,KAAI,MAAK,WAChC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,GAEX;AAAA,QACA,oBAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,WAAU,SAAQ,OACnD,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,GAEX;AAAA,QACA,oBAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,WAAU,SAAQ,OACnD,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,UAAA;AAAA,QAAA,EACT,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEO,MAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,UAAU,OAAO;AAC9B,UAAM,UAAU,iBAAiB,SAAY,eAAe;AAE5D,QAAI,SAAS;AACX,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,aAAW,WAAW;AAAA,UACtB,WAAW,GAAG,eAAe,EAAE,SAAS,KAAA,CAAM,GAAG,SAAS;AAAA,UAC1D,UAAU,YAAY;AAAA,UACrB,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,aAAW,WAAW;AAAA,QACtB,WAAW,GAAG,eAAe,EAAE,SAAS,KAAA,CAAM,GAAG,SAAS;AAAA,QAC1D,UAAU,YAAY;AAAA,QACrB,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,+BAAY,eAAA,EAAc;AAAA,UAC1B;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,OAAO,cAAc;"}

package/dist/components/density-switcher.d.ts

@@ -0,0 +1,7 @@
+export type DensitySwitcherProps = {
+    className?: string;
+    triggerClassName?: string;
+    menuClassName?: string;
+};
+export declare const DensitySwitcher: import('react').ForwardRefExoticComponent<DensitySwitcherProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=density-switcher.d.ts.map

package/dist/components/density-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"density-switcher.d.ts","sourceRoot":"","sources":["../../src/components/density-switcher.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,eAAe,iHAgB3B,CAAC"}

package/dist/components/density-switcher.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { IconMenuPicker } from "./icon-menu-picker.js";
+import { useDensity } from "../hooks/use-density.js";
+const DENSITY_OPTIONS = [
+  { value: "compact", icon: "ph:rows", label: "compact" },
+  { value: "comfortable", icon: "ph:list", label: "comfortable" },
+  { value: "spacious", icon: "ph:list-dashes", label: "spacious" }
+];
+const DensitySwitcher = forwardRef(
+  ({ className, triggerClassName, menuClassName }, ref) => {
+    const { density, setDensity } = useDensity();
+    return /* @__PURE__ */ jsx(
+      IconMenuPicker,
+      {
+        ref,
+        value: density,
+        onChange: setDensity,
+        options: DENSITY_OPTIONS,
+        ariaLabel: "Density",
+        className,
+        triggerClassName,
+        menuClassName
+      }
+    );
+  }
+);
+DensitySwitcher.displayName = "DensitySwitcher";
+export {
+  DensitySwitcher
+};
+//# sourceMappingURL=density-switcher.js.map

package/dist/components/density-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"density-switcher.js","sources":["../../src/components/density-switcher.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { IconMenuPicker, type IconMenuOption } from \"./icon-menu-picker\";\nimport { useDensity, type Density } from \"../hooks/use-density\";\n\nconst DENSITY_OPTIONS: IconMenuOption<Density>[] = [\n  { value: \"compact\", icon: \"ph:rows\", label: \"compact\" },\n  { value: \"comfortable\", icon: \"ph:list\", label: \"comfortable\" },\n  { value: \"spacious\", icon: \"ph:list-dashes\", label: \"spacious\" },\n];\n\nexport type DensitySwitcherProps = {\n  className?: string;\n  triggerClassName?: string;\n  menuClassName?: string;\n};\n\nexport const DensitySwitcher = forwardRef<HTMLDivElement, DensitySwitcherProps>(\n  ({ className, triggerClassName, menuClassName }, ref) => {\n    const { density, setDensity } = useDensity();\n    return (\n      <IconMenuPicker<Density>\n        ref={ref}\n        value={density}\n        onChange={setDensity}\n        options={DENSITY_OPTIONS}\n        ariaLabel=\"Density\"\n        className={className}\n        triggerClassName={triggerClassName}\n        menuClassName={menuClassName}\n      />\n    );\n  },\n);\nDensitySwitcher.displayName = \"DensitySwitcher\";\n"],"names":[],"mappings":";;;;AAIA,MAAM,kBAA6C;AAAA,EACjD,EAAE,OAAO,WAAW,MAAM,WAAW,OAAO,UAAA;AAAA,EAC5C,EAAE,OAAO,eAAe,MAAM,WAAW,OAAO,cAAA;AAAA,EAChD,EAAE,OAAO,YAAY,MAAM,kBAAkB,OAAO,WAAA;AACtD;AAQO,MAAM,kBAAkB;AAAA,EAC7B,CAAC,EAAE,WAAW,kBAAkB,cAAA,GAAiB,QAAQ;AACvD,UAAM,EAAE,SAAS,WAAA,IAAe,WAAA;AAChC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACA,gBAAgB,cAAc;"}

package/dist/components/icon-menu-picker.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export type IconMenuOption<T extends string> = {
+    value: T;
+    icon: string;
+    label: string;
+    description?: string;
+};
+export type IconMenuPickerProps<T extends string> = {
+    value: T;
+    onChange: (next: T) => void;
+    options: IconMenuOption<T>[];
+    ariaLabel: string;
+    triggerTitle?: string | undefined;
+    footer?: ReactNode | undefined;
+    showLabel?: boolean | undefined;
+    className?: string | undefined;
+    triggerClassName?: string | undefined;
+    menuClassName?: string | undefined;
+};
+export declare const IconMenuPicker: <T extends string>(props: IconMenuPickerProps<T> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => JSX.Element;
+//# sourceMappingURL=icon-menu-picker.d.ts.map

package/dist/components/icon-menu-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-menu-picker.d.ts","sourceRoot":"","sources":["../../src/components/icon-menu-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI;IAC7C,KAAK,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,IAAI;IAClD,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC,CAAC;AA4MF,eAAO,MAAM,cAAc,EAAsC,CAAC,CAAC,SAAS,MAAM,EAChF,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KAChE,GAAG,CAAC,OAAO,CAAC"}

package/dist/components/icon-menu-picker.js

@@ -0,0 +1,192 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useCallback, useEffect } from "react";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+import { Button } from "./button.js";
+function IconMenuPickerInner({
+  value,
+  onChange,
+  options,
+  ariaLabel,
+  triggerTitle,
+  footer,
+  showLabel,
+  className,
+  triggerClassName,
+  menuClassName
+}, ref) {
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const itemRefs = useRef([]);
+  const [open, setOpen] = useState(false);
+  useImperativeHandle(ref, () => rootRef.current);
+  const activeIndex = useMemo(
+    () => Math.max(
+      0,
+      options.findIndex((option) => option.value === value)
+    ),
+    [options, value]
+  );
+  const close = useCallback((returnFocus) => {
+    var _a;
+    setOpen(false);
+    if (returnFocus) (_a = triggerRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  const select = useCallback(
+    (next) => {
+      onChange(next);
+      close(true);
+    },
+    [close, onChange]
+  );
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      var _a;
+      if (event.button !== 0) return;
+      if (!((_a = rootRef.current) == null ? void 0 : _a.contains(event.target))) {
+        close(false);
+      }
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        close(true);
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [close, open]);
+  useEffect(() => {
+    if (!open) return;
+    const node = itemRefs.current[activeIndex];
+    node == null ? void 0 : node.focus();
+  }, [activeIndex, open]);
+  const focusItem = (index) => {
+    var _a;
+    const wrapped = (index + options.length) % options.length;
+    (_a = itemRefs.current[wrapped]) == null ? void 0 : _a.focus();
+  };
+  const onMenuKeyDown = (event) => {
+    const focusedIndex = itemRefs.current.findIndex((node) => node === document.activeElement);
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusItem((focusedIndex < 0 ? activeIndex : focusedIndex) + 1);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusItem((focusedIndex < 0 ? activeIndex : focusedIndex) - 1);
+      return;
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      focusItem(0);
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      focusItem(options.length - 1);
+      return;
+    }
+    if (event.key === "Tab") {
+      close(false);
+    }
+  };
+  const onTriggerKeyDown = (event) => {
+    if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setOpen(true);
+    }
+  };
+  const selected = options[activeIndex];
+  if (!selected) {
+    throw new Error(`IconMenuPicker: value "${value}" not found in options for ${ariaLabel}`);
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative inline-flex", showLabel && "w-full", className), children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref: triggerRef,
+        type: "button",
+        variant: "ghost",
+        size: showLabel ? "default" : "icon",
+        "aria-label": ariaLabel,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        title: triggerTitle ?? `${ariaLabel}: ${selected.label}`,
+        onClick: () => setOpen((current) => !current),
+        onKeyDown: onTriggerKeyDown,
+        className: cn(
+          "text-muted-foreground hover:text-foreground",
+          showLabel && "w-full justify-start",
+          triggerClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: selected.icon, className: showLabel ? "shrink-0 text-foreground" : void 0 }),
+          showLabel && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left capitalize", children: selected.label }),
+            /* @__PURE__ */ jsx(Icon, { name: "ph:caret-up-down", className: "shrink-0 text-muted-foreground" })
+          ] })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "menu",
+        "aria-label": ariaLabel,
+        onKeyDown: onMenuKeyDown,
+        className: cn(
+          "absolute left-0 top-[calc(100%+0.375rem)] z-50 min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5",
+          menuClassName
+        ),
+        children: [
+          options.map((option, index) => {
+            const active = option.value === value;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                ref: (node) => {
+                  itemRefs.current[index] = node;
+                },
+                type: "button",
+                role: "menuitemradio",
+                "aria-checked": active,
+                tabIndex: active ? 0 : -1,
+                onClick: () => select(option.value),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    select(option.value);
+                  }
+                },
+                className: cn(
+                  "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors",
+                  "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none",
+                  active && "text-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { name: option.icon, className: "shrink-0 text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate capitalize", children: option.label }),
+                  active ? /* @__PURE__ */ jsx(Icon, { name: "ph:check", className: "shrink-0 text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "inline-block size-4 shrink-0", "aria-hidden": true })
+                ]
+              },
+              option.value
+            );
+          }),
+          footer ? /* @__PURE__ */ jsx("div", { className: "mt-1 border-t border-border/60 px-2 py-1.5 text-[11px] text-muted-foreground", children: footer }) : null
+        ]
+      }
+    )
+  ] });
+}
+const IconMenuPicker = forwardRef(IconMenuPickerInner);
+export {
+  IconMenuPicker
+};
+//# sourceMappingURL=icon-menu-picker.js.map

package/dist/components/icon-menu-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-menu-picker.js","sources":["../../src/components/icon-menu-picker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"./button\";\n\nexport type IconMenuOption<T extends string> = {\n  value: T;\n  icon: string;\n  label: string;\n  description?: string;\n};\n\nexport type IconMenuPickerProps<T extends string> = {\n  value: T;\n  onChange: (next: T) => void;\n  options: IconMenuOption<T>[];\n  ariaLabel: string;\n  triggerTitle?: string | undefined;\n  footer?: ReactNode | undefined;\n  showLabel?: boolean | undefined;\n  className?: string | undefined;\n  triggerClassName?: string | undefined;\n  menuClassName?: string | undefined;\n};\n\nfunction IconMenuPickerInner<T extends string>(\n  {\n    value,\n    onChange,\n    options,\n    ariaLabel,\n    triggerTitle,\n    footer,\n    showLabel,\n    className,\n    triggerClassName,\n    menuClassName,\n  }: IconMenuPickerProps<T>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const [open, setOpen] = useState(false);\n\n  useImperativeHandle(ref, () => rootRef.current as HTMLDivElement);\n\n  const activeIndex = useMemo(\n    () =>\n      Math.max(\n        0,\n        options.findIndex((option) => option.value === value),\n      ),\n    [options, value],\n  );\n\n  const close = useCallback((returnFocus: boolean) => {\n    setOpen(false);\n    if (returnFocus) triggerRef.current?.focus();\n  }, []);\n\n  const select = useCallback(\n    (next: T) => {\n      onChange(next);\n      close(true);\n    },\n    [close, onChange],\n  );\n\n  useEffect(() => {\n    if (!open) return;\n\n    const onPointerDown = (event: PointerEvent) => {\n      if (event.button !== 0) return;\n      if (!rootRef.current?.contains(event.target as Node)) {\n        close(false);\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        close(true);\n      }\n    };\n\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [close, open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const node = itemRefs.current[activeIndex];\n    node?.focus();\n  }, [activeIndex, open]);\n\n  const focusItem = (index: number) => {\n    const wrapped = (index + options.length) % options.length;\n    itemRefs.current[wrapped]?.focus();\n  };\n\n  const onMenuKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    const focusedIndex = itemRefs.current.findIndex((node) => node === document.activeElement);\n    if (event.key === \"ArrowDown\") {\n      event.preventDefault();\n      focusItem((focusedIndex < 0 ? activeIndex : focusedIndex) + 1);\n      return;\n    }\n    if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      focusItem((focusedIndex < 0 ? activeIndex : focusedIndex) - 1);\n      return;\n    }\n    if (event.key === \"Home\") {\n      event.preventDefault();\n      focusItem(0);\n      return;\n    }\n    if (event.key === \"End\") {\n      event.preventDefault();\n      focusItem(options.length - 1);\n      return;\n    }\n    if (event.key === \"Tab\") {\n      close(false);\n    }\n  };\n\n  const onTriggerKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === \"ArrowDown\" || event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      setOpen(true);\n    }\n  };\n\n  const selected = options[activeIndex];\n  if (!selected) {\n    throw new Error(`IconMenuPicker: value \"${value}\" not found in options for ${ariaLabel}`);\n  }\n\n  return (\n    <div ref={rootRef} className={cn(\"relative inline-flex\", showLabel && \"w-full\", className)}>\n      <Button\n        ref={triggerRef}\n        type=\"button\"\n        variant=\"ghost\"\n        size={showLabel ? \"default\" : \"icon\"}\n        aria-label={ariaLabel}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        title={triggerTitle ?? `${ariaLabel}: ${selected.label}`}\n        onClick={() => setOpen((current) => !current)}\n        onKeyDown={onTriggerKeyDown}\n        className={cn(\n          \"text-muted-foreground hover:text-foreground\",\n          showLabel && \"w-full justify-start\",\n          triggerClassName,\n        )}\n      >\n        <Icon name={selected.icon} className={showLabel ? \"shrink-0 text-foreground\" : undefined} />\n        {showLabel && (\n          <>\n            <span className=\"min-w-0 flex-1 truncate text-left capitalize\">{selected.label}</span>\n            <Icon name=\"ph:caret-up-down\" className=\"shrink-0 text-muted-foreground\" />\n          </>\n        )}\n      </Button>\n      {open && (\n        <div\n          role=\"menu\"\n          aria-label={ariaLabel}\n          onKeyDown={onMenuKeyDown}\n          className={cn(\n            \"absolute left-0 top-[calc(100%+0.375rem)] z-50 min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n            menuClassName,\n          )}\n        >\n          {options.map((option, index) => {\n            const active = option.value === value;\n            return (\n              <button\n                key={option.value}\n                ref={(node) => {\n                  itemRefs.current[index] = node;\n                }}\n                type=\"button\"\n                role=\"menuitemradio\"\n                aria-checked={active}\n                tabIndex={active ? 0 : -1}\n                onClick={() => select(option.value)}\n                onKeyDown={(event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault();\n                    select(option.value);\n                  }\n                }}\n                className={cn(\n                  \"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\",\n                  \"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none\",\n                  active && \"text-foreground\",\n                )}\n              >\n                <Icon name={option.icon} className=\"shrink-0 text-muted-foreground\" />\n                <span className=\"min-w-0 flex-1 truncate capitalize\">{option.label}</span>\n                {active ? (\n                  <Icon name=\"ph:check\" className=\"shrink-0 text-foreground\" />\n                ) : (\n                  <span className=\"inline-block size-4 shrink-0\" aria-hidden />\n                )}\n              </button>\n            );\n          })}\n          {footer ? (\n            <div className=\"mt-1 border-t border-border/60 px-2 py-1.5 text-[11px] text-muted-foreground\">\n              {footer}\n            </div>\n          ) : null}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const IconMenuPicker = forwardRef(IconMenuPickerInner) as <T extends string>(\n  props: IconMenuPickerProps<T> & { ref?: React.Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":[],"mappings":"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"}

package/dist/components/select.d.ts

@@ -0,0 +1,15 @@
+import { SelectHTMLAttributes } from 'react';
+export type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
+    options?: SelectOption[];
+    placeholder?: string;
+};
+export declare const Select: import('react').ForwardRefExoticComponent<SelectHTMLAttributes<HTMLSelectElement> & {
+    options?: SelectOption[];
+    placeholder?: string;
+} & import('react').RefAttributes<HTMLSelectElement>>;
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAI9D,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEhF,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAClE,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,MAAM;cAJP,YAAY,EAAE;kBACV,MAAM;qDAqCrB,CAAC"}

package/dist/components/select.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+const Select = forwardRef(
+  ({ className, options, placeholder, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex w-full items-center", children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          ref,
+          className: cn(
+            "h-control-h w-full appearance-none rounded-md border border-input bg-background px-control-px pr-8 text-sm text-foreground",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          ...props,
+          children: [
+            placeholder !== void 0 && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+            options ? options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value)) : children
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: "codicon:chevron-down",
+          className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground"
+        }
+      )
+    ] });
+  }
+);
+Select.displayName = "Select";
+export {
+  Select
+};
+//# sourceMappingURL=select.js.map

package/dist/components/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sources":["../../src/components/select.tsx"],"sourcesContent":["import { forwardRef, type SelectHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\n\nexport type SelectOption = { value: string; label: string; disabled?: boolean };\n\nexport type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n  options?: SelectOption[];\n  placeholder?: string;\n};\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n  ({ className, options, placeholder, children, ...props }, ref) => {\n    return (\n      <div className=\"relative inline-flex w-full items-center\">\n        <select\n          ref={ref}\n          className={cn(\n            \"h-control-h w-full appearance-none rounded-md border border-input bg-background px-control-px pr-8 text-sm text-foreground\",\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\",\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            className,\n          )}\n          {...props}\n        >\n          {placeholder !== undefined && (\n            <option value=\"\" disabled>\n              {placeholder}\n            </option>\n          )}\n          {options\n            ? options.map((opt) => (\n                <option key={opt.value} value={opt.value} disabled={opt.disabled}>\n                  {opt.label}\n                </option>\n              ))\n            : children}\n        </select>\n        <Icon\n          name=\"codicon:chevron-down\"\n          className=\"pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground\"\n        />\n      </div>\n    );\n  },\n);\nSelect.displayName = \"Select\";\n"],"names":[],"mappings":";;;;AAWO,MAAM,SAAS;AAAA,EACpB,CAAC,EAAE,WAAW,SAAS,aAAa,UAAU,GAAG,MAAA,GAAS,QAAQ;AAChE,WACE,qBAAC,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAED,GAAG;AAAA,UAEH,UAAA;AAAA,YAAA,gBAAgB,UACf,oBAAC,UAAA,EAAO,OAAM,IAAG,UAAQ,MACtB,UAAA,YAAA,CACH;AAAA,YAED,UACG,QAAQ,IAAI,CAAC,QACX,oBAAC,YAAuB,OAAO,IAAI,OAAO,UAAU,IAAI,UACrD,UAAA,IAAI,SADM,IAAI,KAEjB,CACD,IACD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEN;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ,GACF;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;"}

package/dist/components/theme-switcher.d.ts

@@ -0,0 +1,7 @@
+export type ThemeSwitcherProps = {
+    className?: string;
+    triggerClassName?: string;
+    menuClassName?: string;
+};
+export declare const ThemeSwitcher: import('react').ForwardRefExoticComponent<ThemeSwitcherProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=theme-switcher.d.ts.map

package/dist/components/theme-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-switcher.d.ts","sourceRoot":"","sources":["../../src/components/theme-switcher.tsx"],"names":[],"mappings":"AAWA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,aAAa,+GA6BzB,CAAC"}

package/dist/components/theme-switcher.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Icon } from "../data/Icon.js";
+import { IconMenuPicker } from "./icon-menu-picker.js";
+import { useTheme } from "../hooks/use-theme.js";
+const THEME_OPTIONS = [
+  { value: "light", icon: "ph:sun", label: "light" },
+  { value: "dark", icon: "ph:moon", label: "dark" },
+  { value: "system", icon: "ph:desktop", label: "system" }
+];
+const ThemeSwitcher = forwardRef(
+  ({ className, triggerClassName, menuClassName }, ref) => {
+    const { theme, setTheme, resolvedTheme } = useTheme();
+    const footer = theme === "system" ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(Icon, { name: resolvedTheme === "dark" ? "ph:moon" : "ph:sun", width: 12, height: 12 }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "resolves to",
+        " ",
+        /* @__PURE__ */ jsx("span", { "data-testid": "resolved-theme", className: "font-medium text-foreground", children: resolvedTheme })
+      ] })
+    ] }) : null;
+    return /* @__PURE__ */ jsx(
+      IconMenuPicker,
+      {
+        ref,
+        value: theme,
+        onChange: setTheme,
+        options: THEME_OPTIONS,
+        ariaLabel: "Theme",
+        footer,
+        className,
+        triggerClassName,
+        menuClassName
+      }
+    );
+  }
+);
+ThemeSwitcher.displayName = "ThemeSwitcher";
+export {
+  ThemeSwitcher
+};
+//# sourceMappingURL=theme-switcher.js.map

package/dist/components/theme-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-switcher.js","sources":["../../src/components/theme-switcher.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { IconMenuPicker, type IconMenuOption } from \"./icon-menu-picker\";\nimport { useTheme, type Theme } from \"../hooks/use-theme\";\n\nconst THEME_OPTIONS: IconMenuOption<Theme>[] = [\n  { value: \"light\", icon: \"ph:sun\", label: \"light\" },\n  { value: \"dark\", icon: \"ph:moon\", label: \"dark\" },\n  { value: \"system\", icon: \"ph:desktop\", label: \"system\" },\n];\n\nexport type ThemeSwitcherProps = {\n  className?: string;\n  triggerClassName?: string;\n  menuClassName?: string;\n};\n\nexport const ThemeSwitcher = forwardRef<HTMLDivElement, ThemeSwitcherProps>(\n  ({ className, triggerClassName, menuClassName }, ref) => {\n    const { theme, setTheme, resolvedTheme } = useTheme();\n    const footer =\n      theme === \"system\" ? (\n        <span className=\"inline-flex items-center gap-1.5\">\n          <Icon name={resolvedTheme === \"dark\" ? \"ph:moon\" : \"ph:sun\"} width={12} height={12} />\n          <span>\n            resolves to{\" \"}\n            <span data-testid=\"resolved-theme\" className=\"font-medium text-foreground\">\n              {resolvedTheme}\n            </span>\n          </span>\n        </span>\n      ) : null;\n    return (\n      <IconMenuPicker<Theme>\n        ref={ref}\n        value={theme}\n        onChange={setTheme}\n        options={THEME_OPTIONS}\n        ariaLabel=\"Theme\"\n        footer={footer}\n        className={className}\n        triggerClassName={triggerClassName}\n        menuClassName={menuClassName}\n      />\n    );\n  },\n);\nThemeSwitcher.displayName = \"ThemeSwitcher\";\n"],"names":[],"mappings":";;;;;AAKA,MAAM,gBAAyC;AAAA,EAC7C,EAAE,OAAO,SAAS,MAAM,UAAU,OAAO,QAAA;AAAA,EACzC,EAAE,OAAO,QAAQ,MAAM,WAAW,OAAO,OAAA;AAAA,EACzC,EAAE,OAAO,UAAU,MAAM,cAAc,OAAO,SAAA;AAChD;AAQO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,kBAAkB,cAAA,GAAiB,QAAQ;AACvD,UAAM,EAAE,OAAO,UAAU,cAAA,IAAkB,SAAA;AAC3C,UAAM,SACJ,UAAU,WACR,qBAAC,QAAA,EAAK,WAAU,oCACd,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAK,MAAM,kBAAkB,SAAS,YAAY,UAAU,OAAO,IAAI,QAAQ,GAAA,CAAI;AAAA,2BACnF,QAAA,EAAK,UAAA;AAAA,QAAA;AAAA,QACQ;AAAA,4BACX,QAAA,EAAK,eAAY,kBAAiB,WAAU,+BAC1C,UAAA,cAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF,IACE;AACN,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACA,cAAc,cAAc;"}

package/dist/components.d.ts

@@ -0,0 +1,15 @@
+export { Button, buttonVariants, type ButtonProps } from './components/button';
+export { DatePicker, type DatePickerProps } from './components/DatePicker';
+export { DateTimePicker, type DateTimePickerProps } from './components/DateTimePicker';
+export { RangeSlider, type RangeSliderProps, type RangeSliderValue, } from './components/RangeSlider';
+export { FilterBar, type FilterBarBooleanFilter, type FilterBarEnumFilter, type FilterBarFilter, type FilterBarLookupFilter, type FilterBarLookupInputType, type FilterBarLookupMultiFilter, type FilterBarLookupOption, type FilterBarMultiFilter, type FilterBarMultiFilterMode, type FilterBarNestedMultiFilter, type FilterBarNestedMultiGroup, type FilterBarNumberFilter, type FilterBarNumberValue, type FilterBarProps, type FilterBarRangePreset, type FilterBarRangeProps, type FilterBarSearchProps, type FilterBarSelectMultiFilter, type FilterBarTextFilter, } from './components/FilterBar';
+export { MultiSelect, type MultiSelectOption, type MultiSelectProps, } from './components/MultiSelect';
+export { Select, type SelectProps, type SelectOption } from './components/select';
+export { ThemeSwitcher, type ThemeSwitcherProps } from './components/theme-switcher';
+export { DensitySwitcher, type DensitySwitcherProps } from './components/density-switcher';
+export { IconMenuPicker, type IconMenuPickerProps, type IconMenuOption, } from './components/icon-menu-picker';
+export { SplitPane, type SplitPaneProps } from './layout/SplitPane';
+export { Section, DetailEmptyState, type SectionProps, type DetailEmptyStateProps, } from './layout/Section';
+export { HoverCard, type HoverCardProps, type HoverCardPlacement } from './overlay/HoverCard';
+export { Modal, type ModalProps, type ModalSize } from './overlay/Modal';
+//# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvF,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,GACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,SAAS,EACT,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,0BAA0B,EAC/B,KAAK,mBAAmB,GACzB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,WAAW,EACX,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACrF,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAC3F,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,EACxB,KAAK,cAAc,GACpB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,KAAK,YAAY,EACjB,KAAK,qBAAqB,GAC3B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC9F,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components.js

@@ -0,0 +1,33 @@
+import { Button, buttonVariants } from "./components/button.js";
+import { DatePicker } from "./components/DatePicker.js";
+import { DateTimePicker } from "./components/DateTimePicker.js";
+import { RangeSlider } from "./components/RangeSlider.js";
+import { FilterBar } from "./components/FilterBar.js";
+import { MultiSelect } from "./components/MultiSelect.js";
+import { Select } from "./components/select.js";
+import { ThemeSwitcher } from "./components/theme-switcher.js";
+import { DensitySwitcher } from "./components/density-switcher.js";
+import { IconMenuPicker } from "./components/icon-menu-picker.js";
+import { SplitPane } from "./layout/SplitPane.js";
+import { DetailEmptyState, Section } from "./layout/Section.js";
+import { HoverCard } from "./overlay/HoverCard.js";
+import { Modal } from "./overlay/Modal.js";
+export {
+  Button,
+  DatePicker,
+  DateTimePicker,
+  DensitySwitcher,
+  DetailEmptyState,
+  FilterBar,
+  HoverCard,
+  IconMenuPicker,
+  Modal,
+  MultiSelect,
+  RangeSlider,
+  Section,
+  Select,
+  SplitPane,
+  ThemeSwitcher,
+  buttonVariants
+};
+//# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/data/AnsiHtml.d.ts

@@ -0,0 +1,7 @@
+export type AnsiHtmlProps = {
+    text: string;
+    className?: string;
+    as?: "pre" | "span";
+};
+export declare function AnsiHtml({ text, className, as }: AnsiHtmlProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AnsiHtml.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnsiHtml.d.ts","sourceRoot":"","sources":["../../src/data/AnsiHtml.tsx"],"names":[],"mappings":"AAmEA,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CACrB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAU,EAAE,EAAE,aAAa,2CAatE"}