@becket-ui/react 0.1.0

package/dist/components/Tooltip.js

@@ -0,0 +1,217 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { tooltip as tooltipRecipe } from "@becket-ui/tokens/recipes";
+const OFFSET_PX = 8;
+const NATIVE_FOCUSABLE = /* @__PURE__ */ new Set(["a", "button", "input", "select", "summary", "textarea"]);
+function mergeClassName(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function assignRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      assignRef(ref, node);
+    }
+  };
+}
+function chain(their, ours) {
+  return (event) => {
+    their?.(event);
+    ours?.(event);
+  };
+}
+function triggerNeedsTabIndex(element) {
+  if (typeof element.type !== "string") {
+    return false;
+  }
+  if (NATIVE_FOCUSABLE.has(element.type)) {
+    return false;
+  }
+  if (element.props.tabIndex != null) {
+    return false;
+  }
+  return true;
+}
+function computePosition(trigger, tip, placement) {
+  const cx = trigger.left + trigger.width / 2;
+  const cy = trigger.top + trigger.height / 2;
+  switch (placement) {
+    case "bottom":
+      return {
+        top: trigger.bottom + OFFSET_PX,
+        left: cx - tip.width / 2
+      };
+    case "left":
+      return {
+        top: cy - tip.height / 2,
+        left: trigger.left - tip.width - OFFSET_PX
+      };
+    case "right":
+      return {
+        top: cy - tip.height / 2,
+        left: trigger.right + OFFSET_PX
+      };
+    case "top":
+    default:
+      return {
+        top: trigger.top - tip.height - OFFSET_PX,
+        left: cx - tip.width / 2
+      };
+  }
+}
+function clampToViewport(top, left, tip) {
+  const pad = 4;
+  const maxLeft = window.innerWidth - tip.width - pad;
+  const maxTop = window.innerHeight - tip.height - pad;
+  return {
+    top: Math.min(Math.max(pad, top), Math.max(pad, maxTop)),
+    left: Math.min(Math.max(pad, left), Math.max(pad, maxLeft))
+  };
+}
+const Tooltip = forwardRef(
+  ({
+    content,
+    children,
+    placement = "top",
+    delayMs = 200,
+    disabled = false
+  }, ref) => {
+    const tipId = useId();
+    const triggerRef = useRef(null);
+    const tipRef = useRef(null);
+    const showTimer = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [coords, setCoords] = useState(null);
+    const setTriggerRef = useCallback(
+      (node) => {
+        triggerRef.current = node;
+        assignRef(ref, node);
+      },
+      [ref]
+    );
+    const clearShowTimer = useCallback(() => {
+      if (showTimer.current != null) {
+        clearTimeout(showTimer.current);
+        showTimer.current = null;
+      }
+    }, []);
+    const scheduleOpen = useCallback(() => {
+      if (disabled || content == null || content === "") return;
+      clearShowTimer();
+      showTimer.current = setTimeout(() => setOpen(true), delayMs);
+    }, [clearShowTimer, content, delayMs, disabled]);
+    const close = useCallback(() => {
+      clearShowTimer();
+      setOpen(false);
+      setCoords(null);
+    }, [clearShowTimer]);
+    useEffect(() => () => clearShowTimer(), [clearShowTimer]);
+    useEffect(() => {
+      if (!open) return;
+      const onKey = (event) => {
+        if (event.key === "Escape") close();
+      };
+      const onScroll = () => close();
+      window.addEventListener("keydown", onKey);
+      window.addEventListener("scroll", onScroll, true);
+      window.addEventListener("resize", onScroll);
+      return () => {
+        window.removeEventListener("keydown", onKey);
+        window.removeEventListener("scroll", onScroll, true);
+        window.removeEventListener("resize", onScroll);
+      };
+    }, [close, open]);
+    useLayoutEffect(() => {
+      if (!open || !triggerRef.current || !tipRef.current) return;
+      const trigger2 = triggerRef.current.getBoundingClientRect();
+      const tip = tipRef.current.getBoundingClientRect();
+      const raw = computePosition(trigger2, tip, placement);
+      setCoords(clampToViewport(raw.top, raw.left, tip));
+    }, [open, placement, content]);
+    const tipStyle = {
+      top: coords?.top ?? -9999,
+      left: coords?.left ?? -9999,
+      visibility: coords ? "visible" : "hidden"
+    };
+    const describedByWhenOpen = open ? tipId : void 0;
+    const hoverHandlers = {
+      onMouseEnter: scheduleOpen,
+      onMouseLeave: close,
+      onFocus: scheduleOpen,
+      onBlur: close
+    };
+    const childArray = Children.toArray(children);
+    const onlyChild = childArray.length === 1 ? childArray[0] : void 0;
+    let trigger;
+    if (isValidElement(onlyChild)) {
+      const child = onlyChild;
+      const childRef = child.ref ?? child.props.ref;
+      const describedBy = [child.props["aria-describedby"], describedByWhenOpen].filter(Boolean).join(" ");
+      trigger = cloneElement(child, {
+        ref: mergeRefs(childRef, setTriggerRef),
+        onMouseEnter: chain(child.props.onMouseEnter, hoverHandlers.onMouseEnter),
+        onMouseLeave: chain(child.props.onMouseLeave, hoverHandlers.onMouseLeave),
+        onFocus: chain(child.props.onFocus, hoverHandlers.onFocus),
+        onBlur: chain(child.props.onBlur, hoverHandlers.onBlur),
+        "aria-describedby": describedBy || void 0,
+        ...triggerNeedsTabIndex(child) ? { tabIndex: 0 } : {}
+      });
+    } else {
+      trigger = /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: setTriggerRef,
+          tabIndex: 0,
+          "aria-describedby": describedByWhenOpen,
+          onMouseEnter: hoverHandlers.onMouseEnter,
+          onMouseLeave: hoverHandlers.onMouseLeave,
+          onFocus: hoverHandlers.onFocus,
+          onBlur: hoverHandlers.onBlur,
+          style: { display: "inline-flex", maxWidth: "100%", verticalAlign: "middle" },
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      trigger,
+      open && typeof document !== "undefined" ? createPortal(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: tipRef,
+            id: tipId,
+            role: "tooltip",
+            className: mergeClassName(tooltipRecipe({ placement })),
+            style: tipStyle,
+            children: content
+          }
+        ),
+        document.body
+      ) : null
+    ] });
+  }
+);
+Tooltip.displayName = "Tooltip";
+export {
+  Tooltip
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tooltip.tsx"],"sourcesContent":["'use client';\n\n/**\n * Hover / focus tooltip (generic DS primitive).\n * Default placement top, open delay 200ms.\n */\n\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type FocusEventHandler,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { tooltip as tooltipRecipe } from '@becket-ui/tokens/recipes';\n\nexport type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\n\nexport type TooltipProps = {\n  /** Short glossary / hint text (or node). */\n  content: ReactNode;\n  children: ReactNode;\n  placement?: TooltipPlacement;\n  /** Delay before open on hover/focus (ms). */\n  delayMs?: number;\n  disabled?: boolean;\n};\n\nconst OFFSET_PX = 8;\n\nconst NATIVE_FOCUSABLE = new Set(['a', 'button', 'input', 'select', 'summary', 'textarea']);\n\ntype TriggerProps = {\n  ref?: Ref<HTMLElement>;\n  tabIndex?: number;\n  href?: string;\n  onMouseEnter?: MouseEventHandler<HTMLElement>;\n  onMouseLeave?: MouseEventHandler<HTMLElement>;\n  onFocus?: FocusEventHandler<HTMLElement>;\n  onBlur?: FocusEventHandler<HTMLElement>;\n  'aria-describedby'?: string;\n};\n\nfunction mergeClassName(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nfunction assignRef<T>(ref: Ref<T> | undefined, value: T | null) {\n  if (typeof ref === 'function') {\n    ref(value);\n  } else if (ref) {\n    ref.current = value;\n  }\n}\n\nfunction mergeRefs<T>(...refs: Array<Ref<T> | undefined>) {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      assignRef(ref, node);\n    }\n  };\n}\n\nfunction chain<E>(their?: (event: E) => void, ours?: (event: E) => void) {\n  return (event: E) => {\n    their?.(event);\n    ours?.(event);\n  };\n}\n\nfunction triggerNeedsTabIndex(element: ReactElement<TriggerProps>): boolean {\n  if (typeof element.type !== 'string') {\n    return false;\n  }\n  if (NATIVE_FOCUSABLE.has(element.type)) {\n    return false;\n  }\n  if (element.props.tabIndex != null) {\n    return false;\n  }\n  return true;\n}\n\nfunction computePosition(\n  trigger: DOMRect,\n  tip: DOMRect,\n  placement: TooltipPlacement,\n): { top: number; left: number } {\n  const cx = trigger.left + trigger.width / 2;\n  const cy = trigger.top + trigger.height / 2;\n\n  switch (placement) {\n    case 'bottom':\n      return {\n        top: trigger.bottom + OFFSET_PX,\n        left: cx - tip.width / 2,\n      };\n    case 'left':\n      return {\n        top: cy - tip.height / 2,\n        left: trigger.left - tip.width - OFFSET_PX,\n      };\n    case 'right':\n      return {\n        top: cy - tip.height / 2,\n        left: trigger.right + OFFSET_PX,\n      };\n    case 'top':\n    default:\n      return {\n        top: trigger.top - tip.height - OFFSET_PX,\n        left: cx - tip.width / 2,\n      };\n  }\n}\n\nfunction clampToViewport(top: number, left: number, tip: DOMRect): { top: number; left: number } {\n  const pad = 4;\n  const maxLeft = window.innerWidth - tip.width - pad;\n  const maxTop = window.innerHeight - tip.height - pad;\n  return {\n    top: Math.min(Math.max(pad, top), Math.max(pad, maxTop)),\n    left: Math.min(Math.max(pad, left), Math.max(pad, maxLeft)),\n  };\n}\n\nexport const Tooltip = forwardRef<HTMLElement, TooltipProps>(\n  (\n    {\n      content,\n      children,\n      placement = 'top',\n      delayMs = 200,\n      disabled = false,\n    },\n    ref,\n  ) => {\n    const tipId = useId();\n    const triggerRef = useRef<HTMLElement | null>(null);\n    const tipRef = useRef<HTMLDivElement | null>(null);\n    const showTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const [open, setOpen] = useState(false);\n    const [coords, setCoords] = useState<{ top: number; left: number } | null>(null);\n\n    const setTriggerRef = useCallback(\n      (node: HTMLElement | null) => {\n        triggerRef.current = node;\n        assignRef(ref, node);\n      },\n      [ref],\n    );\n\n    const clearShowTimer = useCallback(() => {\n      if (showTimer.current != null) {\n        clearTimeout(showTimer.current);\n        showTimer.current = null;\n      }\n    }, []);\n\n    const scheduleOpen = useCallback(() => {\n      if (disabled || content == null || content === '') return;\n      clearShowTimer();\n      showTimer.current = setTimeout(() => setOpen(true), delayMs);\n    }, [clearShowTimer, content, delayMs, disabled]);\n\n    const close = useCallback(() => {\n      clearShowTimer();\n      setOpen(false);\n      setCoords(null);\n    }, [clearShowTimer]);\n\n    useEffect(() => () => clearShowTimer(), [clearShowTimer]);\n\n    useEffect(() => {\n      if (!open) return;\n      const onKey = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') close();\n      };\n      const onScroll = () => close();\n      window.addEventListener('keydown', onKey);\n      window.addEventListener('scroll', onScroll, true);\n      window.addEventListener('resize', onScroll);\n      return () => {\n        window.removeEventListener('keydown', onKey);\n        window.removeEventListener('scroll', onScroll, true);\n        window.removeEventListener('resize', onScroll);\n      };\n    }, [close, open]);\n\n    useLayoutEffect(() => {\n      if (!open || !triggerRef.current || !tipRef.current) return;\n      const trigger = triggerRef.current.getBoundingClientRect();\n      const tip = tipRef.current.getBoundingClientRect();\n      const raw = computePosition(trigger, tip, placement);\n      setCoords(clampToViewport(raw.top, raw.left, tip));\n    }, [open, placement, content]);\n\n    const tipStyle: CSSProperties = {\n      top: coords?.top ?? -9999,\n      left: coords?.left ?? -9999,\n      visibility: coords ? 'visible' : 'hidden',\n    };\n\n    const describedByWhenOpen = open ? tipId : undefined;\n    const hoverHandlers = {\n      onMouseEnter: scheduleOpen,\n      onMouseLeave: close,\n      onFocus: scheduleOpen,\n      onBlur: close,\n    };\n\n    const childArray = Children.toArray(children);\n    const onlyChild = childArray.length === 1 ? childArray[0] : undefined;\n    let trigger: ReactNode;\n\n    if (isValidElement(onlyChild)) {\n      const child = onlyChild as ReactElement<TriggerProps>;\n      const childRef = (child as { ref?: Ref<HTMLElement> }).ref ?? child.props.ref;\n      const describedBy = [child.props['aria-describedby'], describedByWhenOpen]\n        .filter(Boolean)\n        .join(' ');\n      trigger = cloneElement(child, {\n        ref: mergeRefs(childRef, setTriggerRef),\n        onMouseEnter: chain(child.props.onMouseEnter, hoverHandlers.onMouseEnter),\n        onMouseLeave: chain(child.props.onMouseLeave, hoverHandlers.onMouseLeave),\n        onFocus: chain(child.props.onFocus, hoverHandlers.onFocus),\n        onBlur: chain(child.props.onBlur, hoverHandlers.onBlur),\n        'aria-describedby': describedBy || undefined,\n        ...(triggerNeedsTabIndex(child) ? { tabIndex: 0 } : {}),\n      });\n    } else {\n      trigger = (\n        <span\n          ref={setTriggerRef}\n          tabIndex={0}\n          aria-describedby={describedByWhenOpen}\n          onMouseEnter={hoverHandlers.onMouseEnter}\n          onMouseLeave={hoverHandlers.onMouseLeave}\n          onFocus={hoverHandlers.onFocus}\n          onBlur={hoverHandlers.onBlur}\n          style={{ display: 'inline-flex', maxWidth: '100%', verticalAlign: 'middle' }}\n        >\n          {children}\n        </span>\n      );\n    }\n\n    return (\n      <>\n        {trigger}\n        {open && typeof document !== 'undefined'\n          ? createPortal(\n              <div\n                ref={tipRef}\n                id={tipId}\n                role=\"tooltip\"\n                className={mergeClassName(tooltipRecipe({ placement }))}\n                style={tipStyle}\n              >\n                {content}\n              </div>,\n              document.body,\n            )\n          : null}\n      </>\n    );\n  },\n);\n\nTooltip.displayName = 'Tooltip';\n"],"mappings":"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","names":["trigger"]}

package/dist/components/Tooltip.test.js

@@ -0,0 +1,58 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { assertNoAxeViolations } from "@becket-ui/a11y";
+import { Button } from "./Button";
+import { Tooltip } from "./Tooltip";
+describe("Tooltip", () => {
+  it("does not add an extra tab stop around Button", async () => {
+    const user = userEvent.setup();
+    render(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("button", { type: "button", children: "Before" }),
+        /* @__PURE__ */ jsx(Tooltip, { content: "Short glossary hint.", delayMs: 0, children: /* @__PURE__ */ jsx(Button, { children: "Hover me" }) }),
+        /* @__PURE__ */ jsx("button", { type: "button", children: "After" })
+      ] })
+    );
+    const trigger = screen.getByRole("button", { name: "Hover me" });
+    expect(trigger.parentElement?.getAttribute("tabindex")).not.toBe("0");
+    await user.tab();
+    expect(document.activeElement).toBe(screen.getByRole("button", { name: "Before" }));
+    await user.tab();
+    expect(document.activeElement).toBe(trigger);
+    await user.tab();
+    expect(document.activeElement).toBe(screen.getByRole("button", { name: "After" }));
+  });
+  it("has no axe violations when wrapping a named Button", async () => {
+    const { container } = render(
+      /* @__PURE__ */ jsx(Tooltip, { content: "Short glossary hint.", delayMs: 0, children: /* @__PURE__ */ jsx(Button, { children: "Hover me" }) })
+    );
+    await assertNoAxeViolations(container);
+  });
+  it("sets aria-describedby on the Button while open and closes on Escape", async () => {
+    const user = userEvent.setup();
+    render(
+      /* @__PURE__ */ jsx(Tooltip, { content: "Short glossary hint.", delayMs: 0, children: /* @__PURE__ */ jsx(Button, { children: "Hover me" }) })
+    );
+    const trigger = screen.getByRole("button", { name: "Hover me" });
+    await user.hover(trigger);
+    const tip = await screen.findByRole("tooltip");
+    expect(trigger.getAttribute("aria-describedby")).toBe(tip.id);
+    await user.keyboard("{Escape}");
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+  it("wraps plain text so it is keyboard reachable", async () => {
+    const user = userEvent.setup();
+    render(
+      /* @__PURE__ */ jsx(Tooltip, { content: "Hint", delayMs: 0, children: "glossary" })
+    );
+    const trigger = screen.getByText("glossary");
+    expect(trigger.tagName).toBe("SPAN");
+    expect(trigger.getAttribute("tabindex")).toBe("0");
+    trigger.focus();
+    await user.hover(trigger);
+    expect(await screen.findByRole("tooltip")).toBeTruthy();
+  });
+});
+//# sourceMappingURL=Tooltip.test.js.map

package/dist/components/Tooltip.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tooltip.test.tsx"],"sourcesContent":["import { describe, expect, it } from 'vitest';\nimport { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { assertNoAxeViolations } from '@becket-ui/a11y';\n\nimport { Button } from './Button';\nimport { Tooltip } from './Tooltip';\n\ndescribe('Tooltip', () => {\n  it('does not add an extra tab stop around Button', async () => {\n    const user = userEvent.setup();\n    render(\n      <>\n        <button type=\"button\">Before</button>\n        <Tooltip content=\"Short glossary hint.\" delayMs={0}>\n          <Button>Hover me</Button>\n        </Tooltip>\n        <button type=\"button\">After</button>\n      </>,\n    );\n\n    const trigger = screen.getByRole('button', { name: 'Hover me' });\n    expect(trigger.parentElement?.getAttribute('tabindex')).not.toBe('0');\n\n    await user.tab();\n    expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Before' }));\n    await user.tab();\n    expect(document.activeElement).toBe(trigger);\n    await user.tab();\n    expect(document.activeElement).toBe(screen.getByRole('button', { name: 'After' }));\n  });\n\n  it('has no axe violations when wrapping a named Button', async () => {\n    const { container } = render(\n      <Tooltip content=\"Short glossary hint.\" delayMs={0}>\n        <Button>Hover me</Button>\n      </Tooltip>,\n    );\n    await assertNoAxeViolations(container);\n  });\n\n  it('sets aria-describedby on the Button while open and closes on Escape', async () => {\n    const user = userEvent.setup();\n    render(\n      <Tooltip content=\"Short glossary hint.\" delayMs={0}>\n        <Button>Hover me</Button>\n      </Tooltip>,\n    );\n\n    const trigger = screen.getByRole('button', { name: 'Hover me' });\n    await user.hover(trigger);\n    const tip = await screen.findByRole('tooltip');\n    expect(trigger.getAttribute('aria-describedby')).toBe(tip.id);\n\n    await user.keyboard('{Escape}');\n    expect(screen.queryByRole('tooltip')).toBeNull();\n  });\n\n  it('wraps plain text so it is keyboard reachable', async () => {\n    const user = userEvent.setup();\n    render(\n      <Tooltip content=\"Hint\" delayMs={0}>\n        glossary\n      </Tooltip>,\n    );\n\n    const trigger = screen.getByText('glossary');\n    expect(trigger.tagName).toBe('SPAN');\n    expect(trigger.getAttribute('tabindex')).toBe('0');\n\n    trigger.focus();\n    await user.hover(trigger);\n    expect(await screen.findByRole('tooltip')).toBeTruthy();\n  });\n});\n"],"mappings":"AAYM,mBACE,KADF;AAZN,SAAS,UAAU,QAAQ,UAAU;AACrC,SAAS,QAAQ,cAAc;AAC/B,OAAO,eAAe;AACtB,SAAS,6BAA6B;AAEtC,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB,SAAS,WAAW,MAAM;AACxB,KAAG,gDAAgD,YAAY;AAC7D,UAAM,OAAO,UAAU,MAAM;AAC7B;AAAA,MACE,iCACE;AAAA,4BAAC,YAAO,MAAK,UAAS,oBAAM;AAAA,QAC5B,oBAAC,WAAQ,SAAQ,wBAAuB,SAAS,GAC/C,8BAAC,UAAO,sBAAQ,GAClB;AAAA,QACA,oBAAC,YAAO,MAAK,UAAS,mBAAK;AAAA,SAC7B;AAAA,IACF;AAEA,UAAM,UAAU,OAAO,UAAU,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/D,WAAO,QAAQ,eAAe,aAAa,UAAU,CAAC,EAAE,IAAI,KAAK,GAAG;AAEpE,UAAM,KAAK,IAAI;AACf,WAAO,SAAS,aAAa,EAAE,KAAK,OAAO,UAAU,UAAU,EAAE,MAAM,SAAS,CAAC,CAAC;AAClF,UAAM,KAAK,IAAI;AACf,WAAO,SAAS,aAAa,EAAE,KAAK,OAAO;AAC3C,UAAM,KAAK,IAAI;AACf,WAAO,SAAS,aAAa,EAAE,KAAK,OAAO,UAAU,UAAU,EAAE,MAAM,QAAQ,CAAC,CAAC;AAAA,EACnF,CAAC;AAED,KAAG,sDAAsD,YAAY;AACnE,UAAM,EAAE,UAAU,IAAI;AAAA,MACpB,oBAAC,WAAQ,SAAQ,wBAAuB,SAAS,GAC/C,8BAAC,UAAO,sBAAQ,GAClB;AAAA,IACF;AACA,UAAM,sBAAsB,SAAS;AAAA,EACvC,CAAC;AAED,KAAG,uEAAuE,YAAY;AACpF,UAAM,OAAO,UAAU,MAAM;AAC7B;AAAA,MACE,oBAAC,WAAQ,SAAQ,wBAAuB,SAAS,GAC/C,8BAAC,UAAO,sBAAQ,GAClB;AAAA,IACF;AAEA,UAAM,UAAU,OAAO,UAAU,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/D,UAAM,KAAK,MAAM,OAAO;AACxB,UAAM,MAAM,MAAM,OAAO,WAAW,SAAS;AAC7C,WAAO,QAAQ,aAAa,kBAAkB,CAAC,EAAE,KAAK,IAAI,EAAE;AAE5D,UAAM,KAAK,SAAS,UAAU;AAC9B,WAAO,OAAO,YAAY,SAAS,CAAC,EAAE,SAAS;AAAA,EACjD,CAAC;AAED,KAAG,gDAAgD,YAAY;AAC7D,UAAM,OAAO,UAAU,MAAM;AAC7B;AAAA,MACE,oBAAC,WAAQ,SAAQ,QAAO,SAAS,GAAG,sBAEpC;AAAA,IACF;AAEA,UAAM,UAAU,OAAO,UAAU,UAAU;AAC3C,WAAO,QAAQ,OAAO,EAAE,KAAK,MAAM;AACnC,WAAO,QAAQ,aAAa,UAAU,CAAC,EAAE,KAAK,GAAG;AAEjD,YAAQ,MAAM;AACd,UAAM,KAAK,MAAM,OAAO;AACxB,WAAO,MAAM,OAAO,WAAW,SAAS,CAAC,EAAE,WAAW;AAAA,EACxD,CAAC;AACH,CAAC;","names":[]}

package/dist/helpers/gradientBorder.d.ts

@@ -0,0 +1,5 @@
+import type { GradientToken } from '@becket-ui/tokens/tokens';
+export type GradientBorderToken = Exclude<GradientToken, 'primaryHover'>;
+export declare function isGradientBorderToken(value: unknown): value is GradientBorderToken;
+export declare function getGradientBorderClassName(token: GradientBorderToken): string;
+//# sourceMappingURL=gradientBorder.d.ts.map

package/dist/helpers/gradientBorder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradientBorder.d.ts","sourceRoot":"","sources":["../../src/helpers/gradientBorder.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE9D,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;AAmBzE,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,mBAAmB,CAElF;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,mBAAmB,GAAG,MAAM,CAE7E"}

package/dist/helpers/gradientBorder.js

@@ -0,0 +1,25 @@
+import { css } from "@becket-ui/tokens";
+const outlineGradientBorder = (image) => css({
+  borderWidth: "2px",
+  borderStyle: "solid",
+  borderColor: "transparent",
+  backgroundImage: `linear-gradient({colors.background}, {colors.background}), ${image}`,
+  backgroundOrigin: "border-box",
+  backgroundClip: "padding-box, border-box"
+});
+const gradientBorderClassMap = {
+  primary: outlineGradientBorder("{gradients.primary}"),
+  secondary: outlineGradientBorder("{gradients.secondary}"),
+  neutral: outlineGradientBorder("{gradients.neutral}")
+};
+function isGradientBorderToken(value) {
+  return typeof value === "string" && value in gradientBorderClassMap;
+}
+function getGradientBorderClassName(token) {
+  return gradientBorderClassMap[token];
+}
+export {
+  getGradientBorderClassName,
+  isGradientBorderToken
+};
+//# sourceMappingURL=gradientBorder.js.map

package/dist/helpers/gradientBorder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/helpers/gradientBorder.ts"],"sourcesContent":["import { css } from '@becket-ui/tokens';\nimport type { GradientToken } from '@becket-ui/tokens/tokens';\n\nexport type GradientBorderToken = Exclude<GradientToken, 'primaryHover'>;\n\n/** Double-layer border-box fill so left/right caps match the radius (no ::before sliver). */\nconst outlineGradientBorder = (image: `{gradients.${GradientBorderToken}}`) =>\n  css({\n    borderWidth: '2px',\n    borderStyle: 'solid',\n    borderColor: 'transparent',\n    backgroundImage: `linear-gradient({colors.background}, {colors.background}), ${image}`,\n    backgroundOrigin: 'border-box',\n    backgroundClip: 'padding-box, border-box',\n  });\n\nconst gradientBorderClassMap: Record<GradientBorderToken, string> = {\n  primary: outlineGradientBorder('{gradients.primary}'),\n  secondary: outlineGradientBorder('{gradients.secondary}'),\n  neutral: outlineGradientBorder('{gradients.neutral}'),\n};\n\nexport function isGradientBorderToken(value: unknown): value is GradientBorderToken {\n  return typeof value === 'string' && value in gradientBorderClassMap;\n}\n\nexport function getGradientBorderClassName(token: GradientBorderToken): string {\n  return gradientBorderClassMap[token];\n}\n"],"mappings":"AAAA,SAAS,WAAW;AAMpB,MAAM,wBAAwB,CAAC,UAC7B,IAAI;AAAA,EACF,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,iBAAiB,8DAA8D,KAAK;AAAA,EACpF,kBAAkB;AAAA,EAClB,gBAAgB;AAClB,CAAC;AAEH,MAAM,yBAA8D;AAAA,EAClE,SAAS,sBAAsB,qBAAqB;AAAA,EACpD,WAAW,sBAAsB,uBAAuB;AAAA,EACxD,SAAS,sBAAsB,qBAAqB;AACtD;AAEO,SAAS,sBAAsB,OAA8C;AAClF,SAAO,OAAO,UAAU,YAAY,SAAS;AAC/C;AAEO,SAAS,2BAA2B,OAAoC;AAC7E,SAAO,uBAAuB,KAAK;AACrC;","names":[]}

package/dist/helpers/labelColors.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+export declare const LABEL_COLOR_VARS: {
+    readonly background: '--mav-label-bg';
+    readonly border: '--mav-label-border';
+    readonly color: '--mav-label-color';
+    readonly gradient: '--mav-label-gradient';
+};
+/** Downstream apps pass CSS values (tokens, vars, or literals) for label surfaces. */
+export type LabelCustomColors = {
+    background?: string;
+    border?: string;
+    color?: string;
+    gradient?: string;
+};
+export type LabelVisual = 'primary' | 'secondary' | 'neutral' | 'outline';
+export declare function resolveLabelColorVars(visual: LabelVisual, withGradient: boolean, customColors?: LabelCustomColors): CSSProperties;
+//# sourceMappingURL=labelColors.d.ts.map

package/dist/helpers/labelColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"labelColors.d.ts","sourceRoot":"","sources":["../../src/helpers/labelColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,gBAAgB;aAC3B,UAAU,EAAE,gBAAgB;aAC5B,MAAM,EAAE,oBAAoB;aAC5B,KAAK,EAAE,mBAAmB;aAC1B,QAAQ,EAAE,sBAAsB;CACxB,CAAC;AAEX,sFAAsF;AACtF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAgC1E,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,WAAW,EACnB,YAAY,EAAE,OAAO,EACrB,YAAY,CAAC,EAAE,iBAAiB,GAC/B,aAAa,CAkBf"}

package/dist/helpers/labelColors.js

@@ -0,0 +1,54 @@
+const LABEL_COLOR_VARS = {
+  background: "--mav-label-bg",
+  border: "--mav-label-border",
+  color: "--mav-label-color",
+  gradient: "--mav-label-gradient"
+};
+const VISUAL_DEFAULTS = {
+  primary: {
+    background: "var(--beckui--colors-primary)",
+    color: "var(--beckui--colors-neutral-50)",
+    border: "transparent"
+  },
+  secondary: {
+    background: "var(--beckui--colors-secondary)",
+    color: "var(--beckui--colors-neutral-50)",
+    border: "transparent"
+  },
+  neutral: {
+    background: "var(--beckui--colors-neutral-800)",
+    color: "var(--beckui--colors-text)",
+    border: "transparent"
+  },
+  outline: {
+    background: "transparent",
+    color: "var(--beckui--colors-secondary)",
+    border: "var(--beckui--colors-secondary)"
+  }
+};
+const GRADIENT_DEFAULTS = {
+  primary: "var(--beckui--gradients-primary)",
+  secondary: "var(--beckui--gradients-secondary)",
+  neutral: "var(--beckui--gradients-neutral)",
+  outline: "var(--beckui--gradients-primary)"
+};
+function resolveLabelColorVars(visual, withGradient, customColors) {
+  const defaults = VISUAL_DEFAULTS[visual];
+  const merged = { ...defaults, ...customColors };
+  const vars = {
+    [LABEL_COLOR_VARS.background]: merged.background,
+    [LABEL_COLOR_VARS.border]: merged.border,
+    [LABEL_COLOR_VARS.color]: merged.color
+  };
+  if (withGradient) {
+    vars[LABEL_COLOR_VARS.gradient] = customColors?.gradient ?? GRADIENT_DEFAULTS[visual];
+  }
+  return Object.fromEntries(
+    Object.entries(vars).filter((entry) => Boolean(entry[1]))
+  );
+}
+export {
+  LABEL_COLOR_VARS,
+  resolveLabelColorVars
+};
+//# sourceMappingURL=labelColors.js.map

package/dist/helpers/labelColors.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/helpers/labelColors.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport const LABEL_COLOR_VARS = {\n  background: '--mav-label-bg',\n  border: '--mav-label-border',\n  color: '--mav-label-color',\n  gradient: '--mav-label-gradient',\n} as const;\n\n/** Downstream apps pass CSS values (tokens, vars, or literals) for label surfaces. */\nexport type LabelCustomColors = {\n  background?: string;\n  border?: string;\n  color?: string;\n  gradient?: string;\n};\n\nexport type LabelVisual = 'primary' | 'secondary' | 'neutral' | 'outline';\n\nconst VISUAL_DEFAULTS: Record<LabelVisual, LabelCustomColors> = {\n  primary: {\n    background: 'var(--beckui--colors-primary)',\n    color: 'var(--beckui--colors-neutral-50)',\n    border: 'transparent',\n  },\n  secondary: {\n    background: 'var(--beckui--colors-secondary)',\n    color: 'var(--beckui--colors-neutral-50)',\n    border: 'transparent',\n  },\n  neutral: {\n    background: 'var(--beckui--colors-neutral-800)',\n    color: 'var(--beckui--colors-text)',\n    border: 'transparent',\n  },\n  outline: {\n    background: 'transparent',\n    color: 'var(--beckui--colors-secondary)',\n    border: 'var(--beckui--colors-secondary)',\n  },\n};\n\nconst GRADIENT_DEFAULTS: Record<LabelVisual, string> = {\n  primary: 'var(--beckui--gradients-primary)',\n  secondary: 'var(--beckui--gradients-secondary)',\n  neutral: 'var(--beckui--gradients-neutral)',\n  outline: 'var(--beckui--gradients-primary)',\n};\n\nexport function resolveLabelColorVars(\n  visual: LabelVisual,\n  withGradient: boolean,\n  customColors?: LabelCustomColors,\n): CSSProperties {\n  const defaults = VISUAL_DEFAULTS[visual];\n  const merged: LabelCustomColors = { ...defaults, ...customColors };\n\n  const vars: Record<string, string | undefined> = {\n    [LABEL_COLOR_VARS.background]: merged.background,\n    [LABEL_COLOR_VARS.border]: merged.border,\n    [LABEL_COLOR_VARS.color]: merged.color,\n  };\n\n  if (withGradient) {\n    vars[LABEL_COLOR_VARS.gradient] =\n      customColors?.gradient ?? GRADIENT_DEFAULTS[visual];\n  }\n\n  return Object.fromEntries(\n    Object.entries(vars).filter((entry): entry is [string, string] => Boolean(entry[1])),\n  ) as CSSProperties;\n}\n"],"mappings":"AAEO,MAAM,mBAAmB;AAAA,EAC9B,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AACZ;AAYA,MAAM,kBAA0D;AAAA,EAC9D,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACT,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF;AAEA,MAAM,oBAAiD;AAAA,EACrD,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AACX;AAEO,SAAS,sBACd,QACA,cACA,cACe;AACf,QAAM,WAAW,gBAAgB,MAAM;AACvC,QAAM,SAA4B,EAAE,GAAG,UAAU,GAAG,aAAa;AAEjE,QAAM,OAA2C;AAAA,IAC/C,CAAC,iBAAiB,UAAU,GAAG,OAAO;AAAA,IACtC,CAAC,iBAAiB,MAAM,GAAG,OAAO;AAAA,IAClC,CAAC,iBAAiB,KAAK,GAAG,OAAO;AAAA,EACnC;AAEA,MAAI,cAAc;AAChB,SAAK,iBAAiB,QAAQ,IAC5B,cAAc,YAAY,kBAAkB,MAAM;AAAA,EACtD;AAEA,SAAO,OAAO;AAAA,IACZ,OAAO,QAAQ,IAAI,EAAE,OAAO,CAAC,UAAqC,QAAQ,MAAM,CAAC,CAAC,CAAC;AAAA,EACrF;AACF;","names":[]}

package/dist/helpers/nativeDialog.d.ts

@@ -0,0 +1,23 @@
+import { type Ref, type RefObject } from 'react';
+type NativeDialogOptions = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Composed title is in the tree (skip waiting on DialogTitle mount). */
+    titlePresent?: boolean;
+    /** Composed body has content (skip waiting on DialogBody mount). */
+    descriptionPresent?: boolean;
+};
+export declare function useNativeDialog(dialogRef: RefObject<HTMLDialogElement | null>, { open, defaultOpen, onOpenChange, titlePresent, descriptionPresent, }: NativeDialogOptions): {
+    isOpen: boolean;
+    setOpen: (next: boolean) => void;
+    titleId: string;
+    descriptionId: string;
+    labelledBy: string | undefined;
+    describedBy: string | undefined;
+    registerTitle: (present: boolean) => void;
+    registerDescription: (present: boolean) => void;
+};
+export declare function assignRef<T>(ref: Ref<T> | undefined, value: T | null): void;
+export {};
+//# sourceMappingURL=nativeDialog.d.ts.map

package/dist/helpers/nativeDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nativeDialog.d.ts","sourceRoot":"","sources":["../../src/helpers/nativeDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,GAAG,EACR,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,KAAK,mBAAmB,GAAG;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,yEAAyE;IACzE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,wBAAgB,eAAe,CAC7B,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EAC9C,EACE,IAAI,EACJ,WAAmB,EACnB,YAAY,EACZ,YAAoB,EACpB,kBAA0B,GAC3B,EAAE,mBAAmB;;oBAkBb,OAAO;;;;;6BAT4B,OAAO;mCAID,OAAO;EAwD1D;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,QAQpE"}

package/dist/helpers/nativeDialog.js

@@ -0,0 +1,85 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useState
+} from "react";
+function useNativeDialog(dialogRef, {
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  titlePresent = false,
+  descriptionPresent = false
+}) {
+  const isControlled = open !== void 0;
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const isOpen = isControlled ? Boolean(open) : uncontrolled;
+  const titleId = useId();
+  const descriptionId = useId();
+  const [slots, setSlots] = useState({ title: false, description: false });
+  const registerTitle = useCallback((present) => {
+    setSlots((prev) => prev.title === present ? prev : { ...prev, title: present });
+  }, []);
+  const registerDescription = useCallback((present) => {
+    setSlots((prev) => prev.description === present ? prev : { ...prev, description: present });
+  }, []);
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  useEffect(() => {
+    const el = dialogRef.current;
+    if (!el) return;
+    if (!isOpen) {
+      if (el.open) el.close();
+      return;
+    }
+    if (!el.open) {
+      if (typeof el.showModal === "function") {
+        el.showModal();
+      } else {
+        el.setAttribute("open", "");
+      }
+    }
+    const focusInitial = () => {
+      if (!el.open && !el.hasAttribute("open")) return;
+      const marked = el.querySelector("[data-becket-initial-focus]");
+      const footerBtn = el.querySelector("[data-becket-dialog-footer] button:not([disabled])");
+      const target = marked ?? footerBtn ?? el;
+      target.focus();
+    };
+    const frame = requestAnimationFrame(() => {
+      requestAnimationFrame(focusInitial);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [dialogRef, isOpen]);
+  const labelledBy = titlePresent || slots.title ? titleId : void 0;
+  const describedBy = descriptionPresent || slots.description ? descriptionId : void 0;
+  return {
+    isOpen,
+    setOpen,
+    titleId,
+    descriptionId,
+    labelledBy,
+    describedBy,
+    registerTitle,
+    registerDescription
+  };
+}
+function assignRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  if (ref) {
+    ref.current = value;
+  }
+}
+export {
+  assignRef,
+  useNativeDialog
+};
+//# sourceMappingURL=nativeDialog.js.map

package/dist/helpers/nativeDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/helpers/nativeDialog.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useId,\n  useState,\n  type MutableRefObject,\n  type Ref,\n  type RefObject,\n} from 'react';\n\ntype NativeDialogOptions = {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Composed title is in the tree (skip waiting on DialogTitle mount). */\n  titlePresent?: boolean;\n  /** Composed body has content (skip waiting on DialogBody mount). */\n  descriptionPresent?: boolean;\n};\n\nexport function useNativeDialog(\n  dialogRef: RefObject<HTMLDialogElement | null>,\n  {\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    titlePresent = false,\n    descriptionPresent = false,\n  }: NativeDialogOptions,\n) {\n  const isControlled = open !== undefined;\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const isOpen = isControlled ? Boolean(open) : uncontrolled;\n  const titleId = useId();\n  const descriptionId = useId();\n  const [slots, setSlots] = useState({ title: false, description: false });\n\n  const registerTitle = useCallback((present: boolean) => {\n    setSlots((prev) => (prev.title === present ? prev : { ...prev, title: present }));\n  }, []);\n\n  const registerDescription = useCallback((present: boolean) => {\n    setSlots((prev) => (prev.description === present ? prev : { ...prev, description: present }));\n  }, []);\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!isControlled) setUncontrolled(next);\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  useEffect(() => {\n    const el = dialogRef.current;\n    if (!el) return;\n\n    if (!isOpen) {\n      if (el.open) el.close();\n      return;\n    }\n\n    if (!el.open) {\n      if (typeof el.showModal === 'function') {\n        el.showModal();\n      } else {\n        el.setAttribute('open', '');\n      }\n    }\n\n    const focusInitial = () => {\n      if (!el.open && !el.hasAttribute('open')) return;\n      const marked = el.querySelector<HTMLElement>('[data-becket-initial-focus]');\n      const footerBtn = el.querySelector<HTMLElement>('[data-becket-dialog-footer] button:not([disabled])');\n      const target = marked ?? footerBtn ?? el;\n      target.focus();\n    };\n\n    const frame = requestAnimationFrame(() => {\n      requestAnimationFrame(focusInitial);\n    });\n    return () => cancelAnimationFrame(frame);\n  }, [dialogRef, isOpen]);\n\n  const labelledBy = titlePresent || slots.title ? titleId : undefined;\n  const describedBy = descriptionPresent || slots.description ? descriptionId : undefined;\n\n  return {\n    isOpen,\n    setOpen,\n    titleId,\n    descriptionId,\n    labelledBy,\n    describedBy,\n    registerTitle,\n    registerDescription,\n  };\n}\n\nexport function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {\n  if (typeof ref === 'function') {\n    ref(value);\n    return;\n  }\n  if (ref) {\n    (ref as MutableRefObject<T | null>).current = value;\n  }\n}\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAYA,SAAS,gBACd,WACA;AAAA,EACE;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,eAAe;AAAA,EACf,qBAAqB;AACvB,GACA;AACA,QAAM,eAAe,SAAS;AAC9B,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,WAAW;AAC5D,QAAM,SAAS,eAAe,QAAQ,IAAI,IAAI;AAC9C,QAAM,UAAU,MAAM;AACtB,QAAM,gBAAgB,MAAM;AAC5B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE,OAAO,OAAO,aAAa,MAAM,CAAC;AAEvE,QAAM,gBAAgB,YAAY,CAAC,YAAqB;AACtD,aAAS,CAAC,SAAU,KAAK,UAAU,UAAU,OAAO,EAAE,GAAG,MAAM,OAAO,QAAQ,CAAE;AAAA,EAClF,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAsB,YAAY,CAAC,YAAqB;AAC5D,aAAS,CAAC,SAAU,KAAK,gBAAgB,UAAU,OAAO,EAAE,GAAG,MAAM,aAAa,QAAQ,CAAE;AAAA,EAC9F,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU;AAAA,IACd,CAAC,SAAkB;AACjB,UAAI,CAAC,aAAc,iBAAgB,IAAI;AACvC,qBAAe,IAAI;AAAA,IACrB;AAAA,IACA,CAAC,cAAc,YAAY;AAAA,EAC7B;AAEA,YAAU,MAAM;AACd,UAAM,KAAK,UAAU;AACrB,QAAI,CAAC,GAAI;AAET,QAAI,CAAC,QAAQ;AACX,UAAI,GAAG,KAAM,IAAG,MAAM;AACtB;AAAA,IACF;AAEA,QAAI,CAAC,GAAG,MAAM;AACZ,UAAI,OAAO,GAAG,cAAc,YAAY;AACtC,WAAG,UAAU;AAAA,MACf,OAAO;AACL,WAAG,aAAa,QAAQ,EAAE;AAAA,MAC5B;AAAA,IACF;AAEA,UAAM,eAAe,MAAM;AACzB,UAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,aAAa,MAAM,EAAG;AAC1C,YAAM,SAAS,GAAG,cAA2B,6BAA6B;AAC1E,YAAM,YAAY,GAAG,cAA2B,oDAAoD;AACpG,YAAM,SAAS,UAAU,aAAa;AACtC,aAAO,MAAM;AAAA,IACf;AAEA,UAAM,QAAQ,sBAAsB,MAAM;AACxC,4BAAsB,YAAY;AAAA,IACpC,CAAC;AACD,WAAO,MAAM,qBAAqB,KAAK;AAAA,EACzC,GAAG,CAAC,WAAW,MAAM,CAAC;AAEtB,QAAM,aAAa,gBAAgB,MAAM,QAAQ,UAAU;AAC3D,QAAM,cAAc,sBAAsB,MAAM,cAAc,gBAAgB;AAE9E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEO,SAAS,UAAa,KAAyB,OAAiB;AACrE,MAAI,OAAO,QAAQ,YAAY;AAC7B,QAAI,KAAK;AACT;AAAA,EACF;AACA,MAAI,KAAK;AACP,IAAC,IAAmC,UAAU;AAAA,EAChD;AACF;","names":[]}

package/dist/helpers/responsive.d.ts

@@ -0,0 +1,63 @@
+import type { ConditionalValue } from '@becket-ui/tokens/types';
+/**
+ * Responsive props — Chakra-aligned, mobile-first (min-width).
+ *
+ * Prefer **object syntax** with a `base`/`mobile` value (Chakra docs + community
+ * best practice). Arrays are supported for parity but are harder to read.
+ *
+ * @see https://chakra-ui.com/docs/styling/responsive-design
+ */
+/** Token breakpoints (Panda / Chakra keys). */
+export type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * Semantic aliases for layout in consuming apps.
+ * Map onto token breakpoints — do not invent separate media queries.
+ */
+export type SemanticBreakpoint = 'mobile' | 'tablet' | 'desktop' | 'largeDesktop';
+export type BreakpointAlias = Breakpoint | SemanticBreakpoint;
+/** Breakpoint-only keys for responsive object props (token + semantic). */
+export type BreakpointMap<T> = Partial<Record<BreakpointAlias, T>>;
+/**
+ * Chakra-style responsive value: single value, per-breakpoint object, or array
+ * (index 0 = base, 1 = sm, 2 = md, …).
+ */
+export type ResponsiveValue<T> = ConditionalValue<T> | BreakpointMap<T>;
+export declare const BREAKPOINTS: readonly ["base", "sm", "md", "lg", "xl", "2xl"];
+export declare const SEMANTIC_BREAKPOINTS: readonly ["mobile", "tablet", "desktop", "largeDesktop"];
+/** Semantic → token breakpoint (Chakra mobile-first scale). */
+export declare const SEMANTIC_TO_BREAKPOINT: {
+    readonly mobile: 'base';
+    readonly tablet: 'md';
+    readonly desktop: 'lg';
+    readonly largeDesktop: 'xl';
+};
+/** Becket-authored spacing steps (Fibonacci + zero). */
+export declare const SPACING_SCALE: readonly [0, 1, 2, 3, 5, 8, 13, 21, 34];
+export type SpacingStep = (typeof SPACING_SCALE)[number];
+/** Semantic aliases preferred in apps. */
+export type SpacingSemantic = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xs';
+/**
+ * Values that show up in IDE autocomplete for `gap` / spacing props.
+ * Numeric literals + string keys + semantic tokens.
+ * `(string & {})` / `(number & {})` keep IntelliSense while allowing escapes.
+ */
+export type SpacingScale = SpacingSemantic | SpacingStep | `${SpacingStep}` | (string & {}) | (number & {});
+/** Gap prop: single value or responsive ConditionalValue. */
+export type GapValue = ResponsiveValue<SpacingScale>;
+export declare function isSemanticBreakpoint(key: string): key is SemanticBreakpoint;
+export declare function isTokenBreakpoint(key: string): key is Breakpoint;
+/** Resolve `desktop` → `lg`, leave `md` unchanged. */
+export declare function resolveBreakpointAlias(key: string): string;
+/**
+ * Expand semantic keys in a responsive object to token breakpoints.
+ * Token keys already present win (not overwritten by semantic aliases).
+ * Non-objects / arrays pass through.
+ */
+export declare function normalizeResponsiveValue<T>(value: T): T;
+/**
+ * Coerce gap values so `gap={3}` and `gap="3"` both resolve to token key `"3"`.
+ * Walks responsive objects/arrays. Leaves semantic tokens unchanged.
+ * Expands semantic breakpoint keys (`mobile` → `base`, etc.).
+ */
+export declare function normalizeGapValue<T>(gap: T): T;
+//# sourceMappingURL=responsive.d.ts.map

package/dist/helpers/responsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../src/helpers/responsive.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE;;;;;;;GAOG;AAEH,+CAA+C;AAC/C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEpE;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,cAAc,CAAC;AAElF,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,kBAAkB,CAAC;AAE9D,2EAA2E;AAC3E,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,CAAC;AAEnE;;;GAGG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;AAExE,eAAO,MAAM,WAAW,kDAAmF,CAAC;AAE5G,eAAO,MAAM,oBAAoB,0DAKiB,CAAC;AAEnD,+DAA+D;AAC/D,eAAO,MAAM,sBAAsB;qBACzB,MAAM;qBACN,IAAI;sBACH,IAAI;2BACC,IAAI;CACuC,CAAC;AAE5D,wDAAwD;AACxD,eAAO,MAAM,aAAa,YAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAU,CAAC;AAErE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,0CAA0C;AAC1C,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEvE;;;;GAIG;AACH,MAAM,MAAM,YAAY,GACpB,eAAe,GACf,WAAW,GACX,GAAG,WAAW,EAAE,GAChB,CAAC,MAAM,GAAG,EAAE,CAAC,GACb,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAElB,6DAA6D;AAC7D,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;AAErD,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,IAAI,kBAAkB,CAE3E;AAED,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,IAAI,UAAU,CAEhE;AAED,sDAAsD;AACtD,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG1D;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CA4BvD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAgB9C"}