@cloudflare/kumo 1.0.0

package/dist/link-provider-DPBGo-0n.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { createContext as a, forwardRef as c, useContext as s } from "react";
+const e = c(
+  function({ to: n, href: i, ...u }, f) {
+    return /* @__PURE__ */ t("a", { ref: f, href: i ?? n ?? void 0, ...u });
+  }
+), r = a(e);
+function C() {
+  return s(r);
+}
+function x({
+  component: o,
+  children: n
+}) {
+  return /* @__PURE__ */ t(r.Provider, { value: o ?? e, children: n });
+}
+export {
+  x as L,
+  C as u
+};
+//# sourceMappingURL=link-provider-DPBGo-0n.js.map

package/dist/link-provider-DPBGo-0n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-provider-DPBGo-0n.js","sources":["../src/utils/link-provider.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type ForwardRefExoticComponent,\n  type ReactNode,\n  type RefAttributes,\n  useContext,\n} from \"react\";\n\ntype LinkComponentProps = AnchorHTMLAttributes<HTMLAnchorElement> & {\n  to?: string;\n};\n\nconst DefaultLinkComponent = forwardRef<HTMLAnchorElement, LinkComponentProps>(\n  function DefaultAnchor({ to, href, ...rest }, ref) {\n    // Children and other content props are passed via ...rest spread\n    // oxlint-disable-next-line anchor-has-content\n    return <a ref={ref} href={href ?? to ?? undefined} {...rest} />;\n  },\n);\n\ntype ForwardLinkComponent = ForwardRefExoticComponent<\n  LinkComponentProps & RefAttributes<HTMLAnchorElement>\n>;\n\nconst LinkComponentContext =\n  createContext<ForwardLinkComponent>(DefaultLinkComponent);\n\nexport function useLinkComponent() {\n  return useContext(LinkComponentContext);\n}\n\nexport function LinkProvider({\n  component,\n  children,\n}: {\n  component?: ForwardLinkComponent;\n  children: ReactNode;\n}) {\n  return (\n    <LinkComponentContext.Provider value={component ?? DefaultLinkComponent}>\n      {children}\n    </LinkComponentContext.Provider>\n  );\n}\n\nexport type { LinkComponentProps };\n"],"names":["DefaultLinkComponent","forwardRef","to","href","rest","ref","jsx","LinkComponentContext","createContext","useLinkComponent","useContext","LinkProvider","component","children"],"mappings":";;;AAcA,MAAMA,IAAuBC;AAAA,EAC3B,SAAuB,EAAE,IAAAC,GAAI,MAAAC,GAAM,GAAGC,EAAA,GAAQC,GAAK;AAGjD,WAAO,gBAAAC,EAAC,OAAE,KAAAD,GAAU,MAAMF,KAAQD,KAAM,QAAY,GAAGE,GAAM;AAAA,EAC/D;AACF,GAMMG,IACJC,EAAoCR,CAAoB;AAEnD,SAASS,IAAmB;AACjC,SAAOC,EAAWH,CAAoB;AACxC;AAEO,SAASI,EAAa;AAAA,EAC3B,WAAAC;AAAA,EACA,UAAAC;AACF,GAGG;AACD,2BACGN,EAAqB,UAArB,EAA8B,OAAOK,KAAaZ,GAChD,UAAAa,GACH;AAEJ;"}

package/dist/loader-DHGMYlC6.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+const n = {
+  size: {
+    sm: {
+      value: 16,
+      description: "Small loader for inline use"
+    },
+    base: {
+      value: 24,
+      description: "Default loader size"
+    },
+    lg: {
+      value: 32,
+      description: "Large loader for prominent loading states"
+    }
+  }
+}, a = {
+  size: "base"
+};
+function o({
+  size: e = a.size
+} = {}) {
+  return typeof e == "number" ? e : n.size[e].value;
+}
+const u = ({
+  className: e,
+  size: s = a.size
+}) => {
+  const r = o({ size: s });
+  return /* @__PURE__ */ i(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      stroke: "currentColor",
+      className: e,
+      style: { height: r, width: r },
+      children: [
+        /* @__PURE__ */ i(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "9.5",
+            fill: "none",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            children: [
+              /* @__PURE__ */ t(
+                "animateTransform",
+                {
+                  attributeName: "transform",
+                  type: "rotate",
+                  from: "0 12 12",
+                  to: "360 12 12",
+                  dur: "2s",
+                  repeatCount: "indefinite"
+                }
+              ),
+              /* @__PURE__ */ t(
+                "animate",
+                {
+                  attributeName: "stroke-dasharray",
+                  values: "0 150;42 150;42 150",
+                  keyTimes: "0;0.5;1",
+                  dur: "1.5s",
+                  repeatCount: "indefinite"
+                }
+              ),
+              /* @__PURE__ */ t(
+                "animate",
+                {
+                  attributeName: "stroke-dashoffset",
+                  values: "0;-16;-59",
+                  keyTimes: "0;0.5;1",
+                  dur: "1.5s",
+                  repeatCount: "indefinite"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "9.5",
+            fill: "none",
+            opacity: 0.1,
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  u as L
+};
+//# sourceMappingURL=loader-DHGMYlC6.js.map

package/dist/loader-DHGMYlC6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-DHGMYlC6.js","sources":["../src/components/loader/loader.tsx"],"sourcesContent":["export const KUMO_LOADER_VARIANTS = {\n  size: {\n    sm: {\n      value: 16,\n      description: \"Small loader for inline use\",\n    },\n    base: {\n      value: 24,\n      description: \"Default loader size\",\n    },\n    lg: {\n      value: 32,\n      description: \"Large loader for prominent loading states\",\n    },\n  },\n} as const;\n\nexport const KUMO_LOADER_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\n// Derived types from KUMO_LOADER_VARIANTS\nexport type KumoLoaderSize = keyof typeof KUMO_LOADER_VARIANTS.size;\n\nexport interface KumoLoaderVariantsProps {\n  size?: KumoLoaderSize | number;\n}\n\nexport function loaderVariants({\n  size = KUMO_LOADER_DEFAULT_VARIANTS.size,\n}: KumoLoaderVariantsProps = {}): number {\n  if (typeof size === \"number\") return size;\n  return KUMO_LOADER_VARIANTS.size[size].value;\n}\n\nexport interface LoaderProps {\n  className?: string;\n  size?: KumoLoaderSize | number;\n}\n\nexport const Loader = ({\n  className,\n  size = KUMO_LOADER_DEFAULT_VARIANTS.size,\n}: LoaderProps) => {\n  const sizeValue = loaderVariants({ size });\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      className={className}\n      style={{ height: sizeValue, width: sizeValue }}\n    >\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"9.5\"\n        fill=\"none\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      >\n        <animateTransform\n          attributeName=\"transform\"\n          type=\"rotate\"\n          from=\"0 12 12\"\n          to=\"360 12 12\"\n          dur=\"2s\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-dasharray\"\n          values=\"0 150;42 150;42 150\"\n          keyTimes=\"0;0.5;1\"\n          dur=\"1.5s\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-dashoffset\"\n          values=\"0;-16;-59\"\n          keyTimes=\"0;0.5;1\"\n          dur=\"1.5s\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"9.5\"\n        fill=\"none\"\n        opacity={0.1}\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  );\n};\n"],"names":["KUMO_LOADER_VARIANTS","KUMO_LOADER_DEFAULT_VARIANTS","loaderVariants","size","Loader","className","sizeValue","jsxs","jsx"],"mappings":";;AAAO,MAAMA,IAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,OAAO;AAAA,MACP,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,OAAO;AAAA,MACP,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA+B;AAAA,EAC1C,MAAM;AACR;AASO,SAASC,EAAe;AAAA,EAC7B,MAAAC,IAAOF,EAA6B;AACtC,IAA6B,IAAY;AACvC,SAAI,OAAOE,KAAS,WAAiBA,IAC9BH,EAAqB,KAAKG,CAAI,EAAE;AACzC;AAOO,MAAMC,IAAS,CAAC;AAAA,EACrB,WAAAC;AAAA,EACA,MAAAF,IAAOF,EAA6B;AACtC,MAAmB;AACjB,QAAMK,IAAYJ,EAAe,EAAE,MAAAC,GAAM;AACzC,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,QAAO;AAAA,MACP,WAAAF;AAAA,MACA,OAAO,EAAE,QAAQC,GAAW,OAAOA,EAAA;AAAA,MAEnC,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,aAAY;AAAA,YACZ,eAAc;AAAA,YAEd,UAAA;AAAA,cAAA,gBAAAC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAc;AAAA,kBACd,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,IAAG;AAAA,kBACH,KAAI;AAAA,kBACJ,aAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEd,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAc;AAAA,kBACd,QAAO;AAAA,kBACP,UAAS;AAAA,kBACT,KAAI;AAAA,kBACJ,aAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEd,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAc;AAAA,kBACd,QAAO;AAAA,kBACP,UAAS;AAAA,kBACT,KAAI;AAAA,kBACJ,aAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,YACd;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,SAAS;AAAA,YACT,aAAY;AAAA,YACZ,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MAChB;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/menubar-DLwLRFB1.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as c } from "react/jsx-runtime";
+import { T as w } from "./tooltip-DJWsDTWJ.js";
+import { c as h } from "./cn-Bhsu1vx2.js";
+import { IconContext as g } from "@phosphor-icons/react";
+import { useRef as p, useEffect as y } from "react";
+const E = ({
+  menuRef: e,
+  direction: o = "horizontal"
+}) => {
+  const n = p(null);
+  y(() => {
+    if (!e.current) return;
+    const t = Array.from(
+      e.current.querySelectorAll(
+        'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+      )
+    );
+    if (t.length === 0) return;
+    const r = (l) => {
+      if (!n.current) return;
+      const u = t.indexOf(n.current);
+      let a = u;
+      const m = o === "horizontal", x = m ? "ArrowRight" : "ArrowDown", b = m ? "ArrowLeft" : "ArrowUp";
+      if (l.key === x)
+        l.preventDefault(), a = (u + 1) % t.length;
+      else if (l.key === b)
+        l.preventDefault(), a = (u - 1 + t.length) % t.length;
+      else
+        return;
+      const v = t[a];
+      n.current = v, v.focus();
+    }, i = () => document.addEventListener("keydown", r), s = () => document.removeEventListener("keydown", r), d = () => {
+      n.current = document.activeElement, i();
+    }, f = () => {
+      n.current = null, s();
+    };
+    return e.current.addEventListener("focusin", d), e.current.addEventListener("focusout", f), () => {
+      e.current?.removeEventListener("focusin", d), e.current?.removeEventListener("focusout", f), s();
+    };
+  }, [e, o]);
+}, k = ({
+  icon: e,
+  id: o,
+  isActive: n,
+  onClick: t,
+  tooltip: r
+}) => /* @__PURE__ */ c(w, { content: r, asChild: !0, children: /* @__PURE__ */ c(
+  "button",
+  {
+    className: h(
+      "focus:inset-ring-focus relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-kumo-fill transition-colors focus:z-10 focus:outline-none focus-visible:z-10 focus-visible:inset-ring-[0.5]",
+      {
+        "z-20 bg-kumo-base shadow-xs transition-colors": n === o
+      }
+    ),
+    onClick: t,
+    children: /* @__PURE__ */ c(g.Provider, { value: { size: 18 }, children: e })
+  }
+) }), I = ({
+  className: e,
+  isActive: o,
+  options: n,
+  optionIds: t = !1
+  // if option needs an extra unique ID
+}) => {
+  const r = p(null);
+  return E({ menuRef: r, direction: "horizontal" }), /* @__PURE__ */ c(
+    "nav",
+    {
+      className: h(
+        "flex rounded-lg border border-kumo-fill bg-kumo-fill pl-px shadow-xs transition-colors",
+        e
+      ),
+      ref: r,
+      children: n.map((i, s) => /* @__PURE__ */ c(
+        k,
+        {
+          ...i,
+          isActive: o,
+          id: t ? i.id : s
+        },
+        s
+      ))
+    }
+  );
+};
+export {
+  I as M,
+  E as u
+};
+//# sourceMappingURL=menubar-DLwLRFB1.js.map

package/dist/menubar-DLwLRFB1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar-DLwLRFB1.js","sources":["../src/components/menubar/use-menu-navigation.ts","../src/components/menubar/menubar.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\ntype UseMenuNavigationProps = {\n  menuRef: React.RefObject<HTMLElement | null>;\n  direction?: \"horizontal\" | \"vertical\"; // Default: horizontal\n};\n\nexport const useMenuNavigation = ({\n  menuRef,\n  direction = \"horizontal\",\n}: UseMenuNavigationProps) => {\n  const activeElementRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!menuRef.current) return;\n\n    const focusableElements = Array.from(\n      menuRef.current.querySelectorAll(\n        'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])',\n      ),\n    ) as HTMLElement[];\n\n    if (focusableElements.length === 0) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (!activeElementRef.current) return;\n\n      const currentIndex = focusableElements.indexOf(activeElementRef.current);\n      let nextIndex = currentIndex;\n\n      const isHorizontal = direction === \"horizontal\";\n      const forwardKey = isHorizontal ? \"ArrowRight\" : \"ArrowDown\";\n      const backwardKey = isHorizontal ? \"ArrowLeft\" : \"ArrowUp\";\n\n      if (e.key === forwardKey) {\n        e.preventDefault();\n        nextIndex = (currentIndex + 1) % focusableElements.length;\n      } else if (e.key === backwardKey) {\n        e.preventDefault();\n        nextIndex =\n          (currentIndex - 1 + focusableElements.length) %\n          focusableElements.length;\n      } else {\n        return;\n      }\n\n      const nextElement = focusableElements[nextIndex];\n      activeElementRef.current = nextElement;\n      nextElement.focus();\n    };\n\n    const addKeyListener = () =>\n      document.addEventListener(\"keydown\", handleKeyDown);\n    const removeKeyListener = () =>\n      document.removeEventListener(\"keydown\", handleKeyDown);\n\n    const handleFocusIn = () => {\n      activeElementRef.current = document.activeElement as HTMLElement;\n      addKeyListener();\n    };\n\n    const handleFocusOut = () => {\n      activeElementRef.current = null;\n      removeKeyListener();\n    };\n\n    menuRef.current.addEventListener(\"focusin\", handleFocusIn);\n    menuRef.current.addEventListener(\"focusout\", handleFocusOut);\n\n    return () => {\n      menuRef.current?.removeEventListener(\"focusin\", handleFocusIn);\n      menuRef.current?.removeEventListener(\"focusout\", handleFocusOut);\n      removeKeyListener();\n    };\n  }, [menuRef, direction]);\n};\n","import { Tooltip } from \"../tooltip\";\nimport { cn } from \"../../utils/cn\";\nimport { IconContext } from \"@phosphor-icons/react\";\nimport React, { useRef } from \"react\";\nimport { useMenuNavigation } from \"./use-menu-navigation\";\n\nexport const KUMO_MENUBAR_VARIANTS = {\n  // MenuBar currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_MENUBAR_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_MENUBAR_VARIANTS\nexport interface KumoMenuBarVariantsProps {}\n\nexport function menuBarVariants(_props: KumoMenuBarVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex rounded-lg border border-kumo-fill bg-kumo-fill pl-px shadow-xs transition-colors\",\n  );\n}\n\ntype MenuOptionProps = {\n  icon: React.ReactNode;\n  id?: number | string;\n  isActive?: number | boolean | string | undefined;\n  onClick: () => void;\n  tooltip: string;\n};\n\nconst MenuOption = ({\n  icon,\n  id,\n  isActive,\n  onClick,\n  tooltip,\n}: MenuOptionProps) => {\n  return (\n    <Tooltip content={tooltip} asChild>\n      <button\n        className={cn(\n          \"focus:inset-ring-focus relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-kumo-fill transition-colors focus:z-10 focus:outline-none focus-visible:z-10 focus-visible:inset-ring-[0.5]\",\n          {\n            \"z-20 bg-kumo-base shadow-xs transition-colors\": isActive === id,\n          },\n        )}\n        onClick={onClick}\n      >\n        <IconContext.Provider value={{ size: 18 }} {...({} as any)}>\n          {icon}\n        </IconContext.Provider>\n      </button>\n    </Tooltip>\n  );\n};\n\ntype MenuBarProps = {\n  className?: string;\n  isActive: number | boolean | string | undefined;\n  options: MenuOptionProps[];\n  optionIds?: boolean;\n};\n\nexport const MenuBar = ({\n  className,\n  isActive,\n  options,\n  optionIds = false, // if option needs an extra unique ID\n}: MenuBarProps) => {\n  const menuRef = useRef<HTMLElement | null>(null);\n\n  useMenuNavigation({ menuRef, direction: \"horizontal\" });\n\n  return (\n    <nav\n      className={cn(\n        \"flex rounded-lg border border-kumo-fill bg-kumo-fill pl-px shadow-xs transition-colors\",\n        className,\n      )}\n      ref={menuRef}\n    >\n      {options.map((option, index) => (\n        <MenuOption\n          key={index}\n          {...option}\n          isActive={isActive}\n          id={optionIds ? option.id : index}\n        />\n      ))}\n    </nav>\n  );\n};\n"],"names":["useMenuNavigation","menuRef","direction","activeElementRef","useRef","useEffect","focusableElements","handleKeyDown","e","currentIndex","nextIndex","isHorizontal","forwardKey","backwardKey","nextElement","addKeyListener","removeKeyListener","handleFocusIn","handleFocusOut","MenuOption","icon","id","isActive","onClick","tooltip","jsx","Tooltip","cn","IconContext","MenuBar","className","options","optionIds","option","index"],"mappings":"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"}

package/dist/meter-DKUuvXxS.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs as r, jsx as e, Fragment as d } from "react/jsx-runtime";
+import { c as t } from "./cn-Bhsu1vx2.js";
+import { ax as c, ay as f, az as x, aA as b, aB as h } from "./vendor-base-ui-DWIDNgE1.js";
+function N({
+  value: l,
+  customValue: a,
+  label: s,
+  showValue: n = !0,
+  className: o,
+  trackClassName: m,
+  indicatorClassName: u,
+  ...i
+}) {
+  return /* @__PURE__ */ r(
+    c,
+    {
+      value: l,
+      ...i,
+      className: t("flex w-full flex-col gap-2", o),
+      children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ e(f, { className: "text-xs text-kumo-strong", children: s }),
+          a ? /* @__PURE__ */ e("span", { className: "text-sm font-medium text-kumo-default tabular-nums", children: a }) : /* @__PURE__ */ e(d, { children: n && /* @__PURE__ */ e(x, { className: "text-sm font-medium text-kumo-default tabular-nums" }) })
+        ] }),
+        /* @__PURE__ */ e(
+          b,
+          {
+            className: t(
+              "relative h-2 w-full overflow-hidden rounded-full bg-kumo-fill",
+              m
+            ),
+            children: /* @__PURE__ */ e(
+              h,
+              {
+                className: t(
+                  "absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-kumo-brand via-kumo-brand to-kumo-brand transition-[width] duration-300 ease-out",
+                  u
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  N as M
+};
+//# sourceMappingURL=meter-DKUuvXxS.js.map

package/dist/meter-DKUuvXxS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-DKUuvXxS.js","sources":["../src/components/meter/meter.tsx"],"sourcesContent":["import { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport { type ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_METER_VARIANTS = {\n  // Meter currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_METER_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_METER_VARIANTS\nexport interface KumoMeterVariantsProps {}\n\nexport function meterVariants(_props: KumoMeterVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex w-full flex-col gap-2\",\n  );\n}\n\ntype RootProps = ComponentPropsWithoutRef<typeof BaseMeter.Root>;\n\nexport interface MeterProps extends RootProps, KumoMeterVariantsProps {\n  customValue?: string;\n  label: string;\n  showValue?: boolean;\n  trackClassName?: string;\n  indicatorClassName?: string;\n}\n\nexport function Meter({\n  value,\n  customValue,\n  label,\n  showValue = true,\n  className,\n  trackClassName,\n  indicatorClassName,\n  ...props\n}: MeterProps) {\n  return (\n    <BaseMeter.Root\n      value={value}\n      {...props}\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n    >\n      <div className=\"flex items-center justify-between gap-4\">\n        <BaseMeter.Label className=\"text-xs text-kumo-strong\">\n          {label}\n        </BaseMeter.Label>\n        {customValue ? (\n          <span className=\"text-sm font-medium text-kumo-default tabular-nums\">\n            {customValue}\n          </span>\n        ) : (\n          <>\n            {showValue && (\n              <BaseMeter.Value className=\"text-sm font-medium text-kumo-default tabular-nums\" />\n            )}\n          </>\n        )}\n      </div>\n      <BaseMeter.Track\n        className={cn(\n          \"relative h-2 w-full overflow-hidden rounded-full bg-kumo-fill\",\n          trackClassName,\n        )}\n      >\n        <BaseMeter.Indicator\n          className={cn(\n            \"absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-kumo-brand via-kumo-brand to-kumo-brand transition-[width] duration-300 ease-out\",\n            indicatorClassName,\n          )}\n        />\n      </BaseMeter.Track>\n    </BaseMeter.Root>\n  );\n}\n"],"names":["Meter","value","customValue","label","showValue","className","trackClassName","indicatorClassName","props","jsxs","BaseMeter.Root","cn","jsx","BaseMeter.Label","Fragment","BaseMeter.Value","BaseMeter.Track","BaseMeter.Indicator"],"mappings":";;;;AA8BO,SAASA,EAAM;AAAA,EACpB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAT;AAAA,MACC,GAAGO;AAAA,MACJ,WAAWG,EAAG,8BAA8BN,CAAS;AAAA,MAErD,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,UAAA,gBAAAG,EAACC,GAAA,EAAgB,WAAU,4BACxB,UAAAV,GACH;AAAA,UACCD,IACC,gBAAAU,EAAC,QAAA,EAAK,WAAU,sDACb,UAAAV,EAAA,CACH,IAEA,gBAAAU,EAAAE,GAAA,EACG,UAAAV,uBACEW,GAAA,EAAgB,WAAU,sDAAqD,EAAA,CAEpF;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAH;AAAA,UAACI;AAAAA,UAAA;AAAA,YACC,WAAWL;AAAA,cACT;AAAA,cACAL;AAAA,YAAA;AAAA,YAGF,UAAA,gBAAAM;AAAA,cAACK;AAAAA,cAAA;AAAA,gBACC,WAAWN;AAAA,kBACT;AAAA,kBACAJ;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/pagination-C4HQqodz.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { useState as b, useEffect as N, useMemo as h } from "react";
+import { I as s } from "./input-group-Bl6tgD5-.js";
+import { CaretDoubleLeftIcon as x, CaretLeftIcon as v, CaretRightIcon as I, CaretDoubleRightIcon as M } from "@phosphor-icons/react";
+const w = {
+  controls: "full"
+};
+function g({
+  page: i = 1,
+  perPage: t,
+  totalCount: r,
+  setPage: o,
+  controls: c = w.controls
+}) {
+  const [d, a] = b(1);
+  N(() => {
+    a(i);
+  }, [i]);
+  const f = h(() => {
+    let e = i * (t ?? 1) - (t ?? 0) + 1, u = Math.min(i * (t ?? 0), r ?? 0);
+    return Number.isNaN(e) && (e = 0), Number.isNaN(u) && (u = 0), `${e}-${u}`;
+  }, [i, t, r]), l = h(() => Math.ceil((r ?? 1) / (t ?? 1)), [r, t]);
+  return /* @__PURE__ */ m("div", { className: "flex items-center justify-between gap-2", children: [
+    /* @__PURE__ */ n("div", { className: "grow text-sm text-kumo-strong", children: r && r > 0 ? `Showing ${f} of ${r}` : null }),
+    /* @__PURE__ */ n("div", { children: /* @__PURE__ */ m(s, { focusMode: "individual", children: [
+      c === "full" && /* @__PURE__ */ n(
+        s.Button,
+        {
+          variant: "secondary",
+          "aria-label": "First page",
+          disabled: i <= 1,
+          onClick: () => {
+            o(1), a(1);
+          },
+          children: /* @__PURE__ */ n(x, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ n(
+        s.Button,
+        {
+          variant: "secondary",
+          "aria-label": "Previous page",
+          disabled: i <= 1,
+          onClick: () => {
+            const e = Math.max(i - 1, 1);
+            o(e), a(e);
+          },
+          children: /* @__PURE__ */ n(v, { size: 16 })
+        }
+      ),
+      c === "full" && /* @__PURE__ */ n(
+        s.Input,
+        {
+          style: { width: 50 },
+          className: "text-center",
+          "aria-label": "Page number",
+          value: d,
+          onValueChange: (e) => {
+            a(Number(e));
+          },
+          onBlur: () => {
+            let e = Math.max(d, 1);
+            e = Math.min(e, l), o(e), a(e);
+          }
+        }
+      ),
+      /* @__PURE__ */ n(
+        s.Button,
+        {
+          variant: "secondary",
+          "aria-label": "Next page",
+          disabled: i === l,
+          onClick: () => {
+            const e = Math.min(i + 1, l);
+            o(e), a(e);
+          },
+          children: /* @__PURE__ */ n(I, { size: 16 })
+        }
+      ),
+      c === "full" && /* @__PURE__ */ n(
+        s.Button,
+        {
+          variant: "secondary",
+          "aria-label": "Last page",
+          disabled: i === l,
+          onClick: () => {
+            o(l), a(l);
+          },
+          children: /* @__PURE__ */ n(M, { size: 16 })
+        }
+      )
+    ] }) })
+  ] });
+}
+export {
+  g as P
+};
+//# sourceMappingURL=pagination-C4HQqodz.js.map

package/dist/pagination-C4HQqodz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-C4HQqodz.js","sources":["../src/components/pagination/pagination.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { InputGroup } from \"../input\";\nimport {\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_PAGINATION_VARIANTS = {\n  controls: {\n    full: {\n      classes: \"\",\n      description:\n        \"Full pagination controls with first, previous, page input, next, and last buttons\",\n    },\n    simple: {\n      classes: \"\",\n      description:\n        \"Simple pagination controls with only previous and next buttons\",\n    },\n  },\n} as const;\n\nexport type KumoPaginationControls =\n  keyof typeof KUMO_PAGINATION_VARIANTS.controls;\n\nexport const KUMO_PAGINATION_DEFAULT_VARIANTS = {\n  controls: \"full\",\n} as const;\n\nexport interface KumoPaginationVariantsProps {\n  controls?: KumoPaginationControls;\n}\n\nexport function paginationVariants({\n  controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n}: KumoPaginationVariantsProps = {}) {\n  return cn(\n    \"flex items-center justify-between gap-2\",\n    KUMO_PAGINATION_VARIANTS.controls[controls].classes,\n  );\n}\n\nexport interface PaginationProps extends KumoPaginationVariantsProps {\n  setPage: (page: number) => void;\n  page?: number;\n  perPage?: number;\n  totalCount?: number;\n}\n\nexport function Pagination({\n  page = 1,\n  perPage,\n  totalCount,\n  setPage,\n  controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n}: PaginationProps) {\n  const [editingPage, setEditingPage] = useState<number>(1);\n\n  // Value of the input as its being modified to display in the input, eventually syncs with `pagination.page`\n  useEffect(() => {\n    setEditingPage(page);\n  }, [page]);\n\n  const pageShowingRange = useMemo(() => {\n    let lower = page * (perPage ?? 1) - (perPage ?? 0) + 1;\n    let upper = Math.min(page * (perPage ?? 0), totalCount ?? 0);\n\n    if (Number.isNaN(lower)) lower = 0;\n    if (Number.isNaN(upper)) upper = 0;\n\n    return `${lower}-${upper}`;\n  }, [page, perPage, totalCount]);\n\n  const maxPage = useMemo(() => {\n    return Math.ceil((totalCount ?? 1) / (perPage ?? 1));\n  }, [totalCount, perPage]);\n\n  return (\n    <div className=\"flex items-center justify-between gap-2\">\n      <div className=\"grow text-sm text-kumo-strong\">\n        {totalCount && totalCount > 0\n          ? `Showing ${pageShowingRange} of ${totalCount}`\n          : null}\n      </div>\n      <div>\n        <InputGroup focusMode=\"individual\">\n          {controls === \"full\" && (\n            <InputGroup.Button\n              variant=\"secondary\"\n              aria-label=\"First page\"\n              disabled={page <= 1}\n              onClick={() => {\n                setPage(1);\n                setEditingPage(1);\n              }}\n            >\n              <CaretDoubleLeftIcon size={16} />\n            </InputGroup.Button>\n          )}\n          <InputGroup.Button\n            variant=\"secondary\"\n            aria-label=\"Previous page\"\n            disabled={page <= 1}\n            onClick={() => {\n              const previousPage = Math.max(page - 1, 1);\n              setPage(previousPage);\n              setEditingPage(previousPage);\n            }}\n          >\n            <CaretLeftIcon size={16} />\n          </InputGroup.Button>\n          {controls === \"full\" && (\n            <InputGroup.Input\n              style={{ width: 50 }}\n              className=\"text-center\"\n              aria-label=\"Page number\"\n              value={editingPage}\n              onValueChange={(value: string) => {\n                setEditingPage(Number(value));\n              }}\n              onBlur={() => {\n                let number = Math.max(editingPage, 1);\n                number = Math.min(number, maxPage);\n                setPage(number);\n                setEditingPage(number);\n              }}\n            />\n          )}\n          <InputGroup.Button\n            variant=\"secondary\"\n            aria-label=\"Next page\"\n            disabled={page === maxPage}\n            onClick={() => {\n              const nextPage = Math.min(page + 1, maxPage);\n              setPage(nextPage);\n              setEditingPage(nextPage);\n            }}\n          >\n            <CaretRightIcon size={16} />\n          </InputGroup.Button>\n          {controls === \"full\" && (\n            <InputGroup.Button\n              variant=\"secondary\"\n              aria-label=\"Last page\"\n              disabled={page === maxPage}\n              onClick={() => {\n                setPage(maxPage);\n                setEditingPage(maxPage);\n              }}\n            >\n              <CaretDoubleRightIcon size={16} />\n            </InputGroup.Button>\n          )}\n        </InputGroup>\n      </div>\n    </div>\n  );\n}\n"],"names":["KUMO_PAGINATION_DEFAULT_VARIANTS","Pagination","page","perPage","totalCount","setPage","controls","editingPage","setEditingPage","useState","useEffect","pageShowingRange","useMemo","lower","upper","maxPage","jsxs","jsx","InputGroup","CaretDoubleLeftIcon","previousPage","CaretLeftIcon","value","number","nextPage","CaretRightIcon","CaretDoubleRightIcon"],"mappings":"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"}

package/dist/popover-DhdIqrP7.js

@@ -0,0 +1,178 @@
+"use client";
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { c as s } from "./cn-Bhsu1vx2.js";
+import { b6 as u, b7 as P, b8 as f, b9 as b, ba as h, bb as C, bc as x, bd as N, be as y } from "./vendor-base-ui-DWIDNgE1.js";
+const A = {
+  side: {
+    top: {
+      classes: "",
+      description: "Popover appears above the trigger"
+    },
+    bottom: {
+      classes: "",
+      description: "Popover appears below the trigger"
+    },
+    left: {
+      classes: "",
+      description: "Popover appears to the left of the trigger"
+    },
+    right: {
+      classes: "",
+      description: "Popover appears to the right of the trigger"
+    }
+  }
+}, L = {
+  side: "bottom"
+};
+function p({ children: e, ...t }) {
+  return /* @__PURE__ */ o(u, { ...t, children: e });
+}
+p.displayName = "Popover";
+function n({
+  children: e,
+  className: t,
+  asChild: a,
+  ...r
+}) {
+  return /* @__PURE__ */ o(
+    P,
+    {
+      className: t,
+      render: a ? e : void 0,
+      ...r,
+      children: a ? void 0 : e
+    }
+  );
+}
+n.displayName = "Popover.Trigger";
+function l({
+  children: e,
+  side: t = L.side,
+  align: a = "center",
+  sideOffset: r = 8,
+  alignOffset: g = 0,
+  className: v
+}) {
+  return /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(
+    b,
+    {
+      align: a,
+      alignOffset: g,
+      side: t,
+      sideOffset: r,
+      children: /* @__PURE__ */ i(
+        h,
+        {
+          className: s(
+            "flex origin-(--transform-origin) flex-col rounded-lg bg-kumo-base px-4 py-3 text-sm text-kumo-default",
+            "shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill",
+            "transition-[transform,scale,opacity] duration-150",
+            "data-starting-style:scale-90 data-starting-style:opacity-0",
+            "data-ending-style:scale-90 data-ending-style:opacity-0",
+            "data-instant:duration-0",
+            "kumo-popover-popup",
+            v
+          ),
+          children: [
+            /* @__PURE__ */ o(
+              C,
+              {
+                className: s(
+                  "flex",
+                  "data-[side=bottom]:-top-2",
+                  "data-[side=left]:right-[-13px] data-[side=left]:rotate-90",
+                  "data-[side=right]:left-[-13px] data-[side=right]:-rotate-90",
+                  "data-[side=top]:-bottom-2 data-[side=top]:rotate-180"
+                ),
+                children: /* @__PURE__ */ o(T, {})
+              }
+            ),
+            e
+          ]
+        }
+      )
+    }
+  ) });
+}
+l.displayName = "Popover.Content";
+function d({ className: e, ...t }) {
+  return /* @__PURE__ */ o(
+    x,
+    {
+      className: s("m-0 text-base leading-6 font-medium", e),
+      ...t
+    }
+  );
+}
+d.displayName = "Popover.Title";
+function c({ className: e, ...t }) {
+  return /* @__PURE__ */ o(
+    N,
+    {
+      className: s("m-0 text-base leading-6 text-kumo-subtle", e),
+      ...t
+    }
+  );
+}
+c.displayName = "Popover.Description";
+function m({
+  children: e,
+  className: t,
+  asChild: a,
+  ...r
+}) {
+  return /* @__PURE__ */ o(
+    y,
+    {
+      className: t,
+      render: a ? e : void 0,
+      ...r,
+      children: a ? void 0 : e
+    }
+  );
+}
+m.displayName = "Popover.Close";
+function T(e) {
+  return /* @__PURE__ */ i("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", ...e, children: [
+    /* @__PURE__ */ o(
+      "path",
+      {
+        d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+        className: "fill-kumo-base"
+      }
+    ),
+    /* @__PURE__ */ o(
+      "path",
+      {
+        d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
+        className: "fill-kumo-tip-shadow"
+      }
+    ),
+    /* @__PURE__ */ o(
+      "path",
+      {
+        d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+        className: "fill-kumo-tip-stroke"
+      }
+    )
+  ] });
+}
+const H = Object.assign(p, {
+  Trigger: n,
+  Content: l,
+  Title: d,
+  Description: c,
+  Close: m
+});
+export {
+  A as K,
+  H as P,
+  L as a,
+  p as b,
+  n as c,
+  l as d,
+  d as e,
+  c as f,
+  m as g
+};
+//# sourceMappingURL=popover-DhdIqrP7.js.map

package/dist/popover-DhdIqrP7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-DhdIqrP7.js","sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import { Popover as PopoverBase } from \"@base-ui/react/popover\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_POPOVER_VARIANTS = {\n  side: {\n    top: {\n      classes: \"\",\n      description: \"Popover appears above the trigger\",\n    },\n    bottom: {\n      classes: \"\",\n      description: \"Popover appears below the trigger\",\n    },\n    left: {\n      classes: \"\",\n      description: \"Popover appears to the left of the trigger\",\n    },\n    right: {\n      classes: \"\",\n      description: \"Popover appears to the right of the trigger\",\n    },\n  },\n} as const;\n\nexport const KUMO_POPOVER_DEFAULT_VARIANTS = {\n  side: \"bottom\",\n} as const;\n\n// Derived types from KUMO_POPOVER_VARIANTS\nexport type KumoPopoverSide = keyof typeof KUMO_POPOVER_VARIANTS.side;\n\nexport interface KumoPopoverVariantsProps {\n  side?: KumoPopoverSide;\n}\n\n// ============================================================================\n// Popover Root\n// ============================================================================\n\ntype BasePopoverRootProps = ComponentPropsWithoutRef<typeof PopoverBase.Root>;\n\nexport type PopoverRootProps = BasePopoverRootProps;\n\nfunction PopoverRoot({ children, ...props }: PopoverRootProps) {\n  return <PopoverBase.Root {...props}>{children}</PopoverBase.Root>;\n}\n\nPopoverRoot.displayName = \"Popover\";\n\n// ============================================================================\n// Popover Trigger\n// ============================================================================\n\ntype BasePopoverTriggerProps = ComponentPropsWithoutRef<\n  typeof PopoverBase.Trigger\n>;\n\nexport type PopoverTriggerProps = BasePopoverTriggerProps & {\n  /** When true, the trigger element will be the child element */\n  asChild?: boolean;\n};\n\nfunction PopoverTrigger({\n  children,\n  className,\n  asChild,\n  ...props\n}: PopoverTriggerProps) {\n  return (\n    <PopoverBase.Trigger\n      className={className}\n      render={\n        asChild ? (children as BasePopoverTriggerProps[\"render\"]) : undefined\n      }\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </PopoverBase.Trigger>\n  );\n}\n\nPopoverTrigger.displayName = \"Popover.Trigger\";\n\n// ============================================================================\n// Popover Content\n// ============================================================================\n\n/** Alignment options for popover positioning */\ntype PopoverAlign = \"start\" | \"center\" | \"end\";\n\nexport type PopoverContentProps = KumoPopoverVariantsProps & {\n  /** How to align the popover relative to the trigger */\n  align?: PopoverAlign;\n  /** Distance between the trigger and the popover in pixels */\n  sideOffset?: number;\n  /** Additional offset along the alignment axis in pixels */\n  alignOffset?: number;\n  /** Additional class name for the popup */\n  className?: string;\n  /** Content to render inside the popover */\n  children?: ReactNode;\n};\n\nfunction PopoverContent({\n  children,\n  side = KUMO_POPOVER_DEFAULT_VARIANTS.side,\n  align = \"center\",\n  sideOffset = 8,\n  alignOffset = 0,\n  className,\n}: PopoverContentProps) {\n  return (\n    <PopoverBase.Portal>\n      <PopoverBase.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverBase.Popup\n          className={cn(\n            \"flex origin-(--transform-origin) flex-col rounded-lg bg-kumo-base px-4 py-3 text-sm text-kumo-default\",\n            \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n            \"transition-[transform,scale,opacity] duration-150\",\n            \"data-starting-style:scale-90 data-starting-style:opacity-0\",\n            \"data-ending-style:scale-90 data-ending-style:opacity-0\",\n            \"data-instant:duration-0\",\n            \"kumo-popover-popup\",\n            className,\n          )}\n        >\n          <PopoverBase.Arrow\n            className={cn(\n              \"flex\",\n              \"data-[side=bottom]:-top-2\",\n              \"data-[side=left]:right-[-13px] data-[side=left]:rotate-90\",\n              \"data-[side=right]:left-[-13px] data-[side=right]:-rotate-90\",\n              \"data-[side=top]:-bottom-2 data-[side=top]:rotate-180\",\n            )}\n          >\n            <ArrowSvg />\n          </PopoverBase.Arrow>\n          {children}\n        </PopoverBase.Popup>\n      </PopoverBase.Positioner>\n    </PopoverBase.Portal>\n  );\n}\n\nPopoverContent.displayName = \"Popover.Content\";\n\n// ============================================================================\n// Popover Title\n// ============================================================================\n\ntype BasePopoverTitleProps = ComponentPropsWithoutRef<typeof PopoverBase.Title>;\n\nexport type PopoverTitleProps = BasePopoverTitleProps;\n\nfunction PopoverTitle({ className, ...props }: PopoverTitleProps) {\n  return (\n    <PopoverBase.Title\n      className={cn(\"m-0 text-base leading-6 font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nPopoverTitle.displayName = \"Popover.Title\";\n\n// ============================================================================\n// Popover Description\n// ============================================================================\n\ntype BasePopoverDescriptionProps = ComponentPropsWithoutRef<\n  typeof PopoverBase.Description\n>;\n\nexport type PopoverDescriptionProps = BasePopoverDescriptionProps;\n\nfunction PopoverDescription({ className, ...props }: PopoverDescriptionProps) {\n  return (\n    <PopoverBase.Description\n      className={cn(\"m-0 text-base leading-6 text-kumo-subtle\", className)}\n      {...props}\n    />\n  );\n}\n\nPopoverDescription.displayName = \"Popover.Description\";\n\n// ============================================================================\n// Popover Close\n// ============================================================================\n\ntype BasePopoverCloseProps = ComponentPropsWithoutRef<typeof PopoverBase.Close>;\n\nexport type PopoverCloseProps = BasePopoverCloseProps & {\n  /** When true, the close element will be the child element */\n  asChild?: boolean;\n};\n\nfunction PopoverClose({\n  children,\n  className,\n  asChild,\n  ...props\n}: PopoverCloseProps) {\n  return (\n    <PopoverBase.Close\n      className={className}\n      render={\n        asChild ? (children as BasePopoverCloseProps[\"render\"]) : undefined\n      }\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </PopoverBase.Close>\n  );\n}\n\nPopoverClose.displayName = \"Popover.Close\";\n\n// ============================================================================\n// Arrow SVG\n// ============================================================================\n\n/**\n * Arrow SVG with three paths for proper border rendering in both light and dark modes.\n * This approach matches Base UI's popover/tooltip implementation.\n *\n * The three paths are:\n * 1. ArrowFill - The main arrow body, matches popover background\n * 2. ArrowOuterStroke - Border visible in light mode only (transparent in dark)\n * 3. ArrowInnerStroke - Border visible in dark mode only (transparent in light)\n *\n * This is necessary because the outer and inner stroke paths have different geometries,\n * and using both ensures the arrow border aligns perfectly with the popover's outline\n * in both color modes.\n *\n * @see https://base-ui.com/react/components/popover\n */\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n      <path\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n        className=\"fill-kumo-base\"\n      />\n      <path\n        d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n        className=\"fill-kumo-tip-shadow\"\n      />\n      <path\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n        className=\"fill-kumo-tip-stroke\"\n      />\n    </svg>\n  );\n}\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Popover component for displaying accessible popup content anchored to a trigger.\n *\n * @example\n * ```tsx\n * <Popover>\n *   <Popover.Trigger asChild>\n *     <Button>Open</Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <Popover.Title>Notifications</Popover.Title>\n *     <Popover.Description>You are all caught up!</Popover.Description>\n *   </Popover.Content>\n * </Popover>\n * ```\n *\n * @see https://base-ui.com/react/components/popover\n */\nexport const Popover = Object.assign(PopoverRoot, {\n  Trigger: PopoverTrigger,\n  Content: PopoverContent,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n  Close: PopoverClose,\n});\n\n// Export sub-components for direct access and type inference\nexport {\n  PopoverRoot,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverTitle,\n  PopoverDescription,\n  PopoverClose,\n};\n"],"names":["KUMO_POPOVER_VARIANTS","KUMO_POPOVER_DEFAULT_VARIANTS","PopoverRoot","children","props","PopoverBase.Root","PopoverTrigger","className","asChild","jsx","PopoverBase.Trigger","PopoverContent","side","align","sideOffset","alignOffset","PopoverBase.Portal","PopoverBase.Positioner","jsxs","PopoverBase.Popup","cn","PopoverBase.Arrow","ArrowSvg","PopoverTitle","PopoverBase.Title","PopoverDescription","PopoverBase.Description","PopoverClose","PopoverBase.Close","Popover"],"mappings":"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"}

package/dist/primitives/accordion.js

@@ -0,0 +1,6 @@
+"use client";
+import { a as e } from "../vendor-base-ui-DWIDNgE1.js";
+export {
+  e as Accordion
+};
+//# sourceMappingURL=accordion.js.map

package/dist/primitives/accordion.js.map

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