@becket-ui/react 0.1.0

package/dist/components/Menu.js

@@ -0,0 +1,132 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useRef,
+  useState
+} from "react";
+import { menu as menuRecipe } from "@becket-ui/tokens/recipes";
+const MenuContext = createContext(null);
+function mergeClassName(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function menuItems(root) {
+  return [...root?.querySelectorAll('[role="menuitem"]:not([disabled])') ?? []];
+}
+const Menu = forwardRef(
+  ({ label, className, children, onKeyDown, ...props }, ref) => {
+    const detailsRef = useRef(null);
+    const [expanded, setExpanded] = useState(false);
+    const styles = menuRecipe();
+    const close = () => {
+      if (detailsRef.current) detailsRef.current.open = false;
+    };
+    const focusItem = (index) => {
+      const items = menuItems(detailsRef.current);
+      if (items.length === 0) return;
+      const next = items[(index + items.length) % items.length];
+      next?.focus();
+    };
+    const onMenuKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      const details = detailsRef.current;
+      if (!details) return;
+      if (event.key === "Escape") {
+        close();
+        details.querySelector("summary")?.focus();
+        return;
+      }
+      if (event.key === "Tab" && details.open) {
+        close();
+        return;
+      }
+      if (event.key === "Home" && details.open) {
+        event.preventDefault();
+        focusItem(0);
+        return;
+      }
+      if (event.key === "End" && details.open) {
+        event.preventDefault();
+        const items2 = menuItems(details);
+        focusItem(items2.length - 1);
+        return;
+      }
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+      event.preventDefault();
+      const items = menuItems(details);
+      if (items.length === 0) return;
+      if (!details.open) {
+        details.open = true;
+        requestAnimationFrame(() => focusItem(event.key === "ArrowUp" ? -1 : 0));
+        return;
+      }
+      const current = document.activeElement;
+      const index = items.findIndex((item) => item === current);
+      const delta = event.key === "ArrowDown" ? 1 : -1;
+      focusItem(index < 0 ? 0 : index + delta);
+    };
+    return /* @__PURE__ */ jsx(MenuContext.Provider, { value: { close }, children: /* @__PURE__ */ jsxs(
+      "details",
+      {
+        ref: (node) => {
+          detailsRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: mergeClassName(styles.root, className),
+        ...props,
+        onToggle: (event) => {
+          const next = event.currentTarget.open;
+          setExpanded(next);
+          if (next) {
+            requestAnimationFrame(() => focusItem(0));
+          }
+        },
+        onKeyDown: onMenuKeyDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            "summary",
+            {
+              className: styles.trigger,
+              "aria-haspopup": "menu",
+              "aria-expanded": expanded,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: styles.content, role: "menu", children })
+        ]
+      }
+    ) });
+  }
+);
+Menu.displayName = "Menu";
+const MenuItem = forwardRef(
+  ({ className, onClick, type = "button", tabIndex = -1, ...props }, ref) => {
+    const menu = useContext(MenuContext);
+    const styles = menuRecipe();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        role: "menuitem",
+        ...props,
+        tabIndex,
+        className: mergeClassName(styles.item, className),
+        onClick: (event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented) menu?.close();
+        }
+      }
+    );
+  }
+);
+MenuItem.displayName = "MenuItem";
+export {
+  Menu,
+  MenuItem
+};
+//# sourceMappingURL=Menu.js.map

package/dist/components/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Menu.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  useRef,\n  useState,\n  type ButtonHTMLAttributes,\n  type DetailsHTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  type ToggleEvent,\n} from 'react';\nimport { menu as menuRecipe } from '@becket-ui/tokens/recipes';\n\ntype MenuContextValue = {\n  close: () => void;\n};\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nfunction mergeClassName(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nfunction menuItems(root: HTMLDetailsElement | null) {\n  return [...(root?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([disabled])') ?? [])];\n}\n\nexport type MenuProps = Omit<DetailsHTMLAttributes<HTMLDetailsElement>, 'onToggle'> & {\n  label: ReactNode;\n};\n\nexport const Menu = forwardRef<HTMLDetailsElement, MenuProps>(\n  ({ label, className, children, onKeyDown, ...props }, ref) => {\n    const detailsRef = useRef<HTMLDetailsElement>(null);\n    const [expanded, setExpanded] = useState(false);\n    const styles = menuRecipe();\n\n    const close = () => {\n      if (detailsRef.current) detailsRef.current.open = false;\n    };\n\n    const focusItem = (index: number) => {\n      const items = menuItems(detailsRef.current);\n      if (items.length === 0) return;\n      const next = items[(index + items.length) % items.length];\n      next?.focus();\n    };\n\n    const onMenuKeyDown = (event: KeyboardEvent<HTMLDetailsElement>) => {\n      onKeyDown?.(event);\n      if (event.defaultPrevented) return;\n      const details = detailsRef.current;\n      if (!details) return;\n\n      if (event.key === 'Escape') {\n        close();\n        details.querySelector('summary')?.focus();\n        return;\n      }\n\n      if (event.key === 'Tab' && details.open) {\n        close();\n        return;\n      }\n\n      if (event.key === 'Home' && details.open) {\n        event.preventDefault();\n        focusItem(0);\n        return;\n      }\n\n      if (event.key === 'End' && details.open) {\n        event.preventDefault();\n        const items = menuItems(details);\n        focusItem(items.length - 1);\n        return;\n      }\n\n      if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;\n      event.preventDefault();\n      const items = menuItems(details);\n      if (items.length === 0) return;\n      if (!details.open) {\n        details.open = true;\n        requestAnimationFrame(() => focusItem(event.key === 'ArrowUp' ? -1 : 0));\n        return;\n      }\n      const current = document.activeElement;\n      const index = items.findIndex((item) => item === current);\n      const delta = event.key === 'ArrowDown' ? 1 : -1;\n      focusItem(index < 0 ? 0 : index + delta);\n    };\n\n    return (\n      <MenuContext.Provider value={{ close }}>\n        <details\n          ref={(node) => {\n            detailsRef.current = node;\n            if (typeof ref === 'function') ref(node);\n            else if (ref) ref.current = node;\n          }}\n          className={mergeClassName(styles.root, className)}\n          {...props}\n          onToggle={(event: ToggleEvent<HTMLDetailsElement>) => {\n            const next = event.currentTarget.open;\n            setExpanded(next);\n            if (next) {\n              requestAnimationFrame(() => focusItem(0));\n            }\n          }}\n          onKeyDown={onMenuKeyDown}\n        >\n          <summary\n            className={styles.trigger}\n            aria-haspopup=\"menu\"\n            aria-expanded={expanded}\n          >\n            {label}\n          </summary>\n          <div className={styles.content} role=\"menu\">\n            {children}\n          </div>\n        </details>\n      </MenuContext.Provider>\n    );\n  },\n);\n\nMenu.displayName = 'Menu';\n\ntype MenuItemProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(\n  ({ className, onClick, type = 'button', tabIndex = -1, ...props }, ref) => {\n    const menu = useContext(MenuContext);\n    const styles = menuRecipe();\n    return (\n      <button\n        ref={ref}\n        type={type}\n        role=\"menuitem\"\n        {...props}\n        tabIndex={tabIndex}\n        className={mergeClassName(styles.item, className)}\n        onClick={(event) => {\n          onClick?.(event);\n          if (!event.defaultPrevented) menu?.close();\n        }}\n      />\n    );\n  },\n);\n\nMenuItem.displayName = 'MenuItem';\n"],"mappings":"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","names":["items"]}

package/dist/components/Menu.test.js

@@ -0,0 +1,69 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { assertNoAxeViolations } from "@becket-ui/a11y";
+import { Menu, MenuItem } from "./Menu";
+describe("Menu", () => {
+  it("exposes expanded and haspopup on the trigger", async () => {
+    const user = userEvent.setup();
+    render(
+      /* @__PURE__ */ jsxs(Menu, { label: "Actions", children: [
+        /* @__PURE__ */ jsx(MenuItem, { children: "Edit" }),
+        /* @__PURE__ */ jsx(MenuItem, { children: "Duplicate" })
+      ] })
+    );
+    const trigger = screen.getByText("Actions");
+    expect(trigger.tagName).toBe("SUMMARY");
+    expect(trigger.getAttribute("aria-haspopup")).toBe("menu");
+    expect(trigger.getAttribute("aria-expanded")).toBe("false");
+    await user.click(trigger);
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+  });
+  it("keeps open items out of Tab order", async () => {
+    const user = userEvent.setup();
+    render(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("button", { type: "button", children: "Before" }),
+        /* @__PURE__ */ jsxs(Menu, { label: "Actions", children: [
+          /* @__PURE__ */ jsx(MenuItem, { children: "Edit" }),
+          /* @__PURE__ */ jsx(MenuItem, { children: "Duplicate" })
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "button", children: "After" })
+      ] })
+    );
+    await user.click(screen.getByText("Actions"));
+    expect(screen.getByRole("menuitem", { name: "Edit" }).getAttribute("tabindex")).toBe("-1");
+    expect(screen.getByRole("menuitem", { name: "Duplicate" }).getAttribute("tabindex")).toBe("-1");
+    await waitFor(() => {
+      expect(document.activeElement).toBe(screen.getByRole("menuitem", { name: "Edit" }));
+    });
+    await user.tab();
+    expect(document.activeElement).toBe(screen.getByRole("button", { name: "After" }));
+  });
+  it("moves between items with arrows", async () => {
+    const user = userEvent.setup();
+    render(
+      /* @__PURE__ */ jsxs(Menu, { label: "Actions", children: [
+        /* @__PURE__ */ jsx(MenuItem, { children: "Edit" }),
+        /* @__PURE__ */ jsx(MenuItem, { children: "Duplicate" })
+      ] })
+    );
+    await user.click(screen.getByText("Actions"));
+    await waitFor(() => {
+      expect(document.activeElement).toBe(screen.getByRole("menuitem", { name: "Edit" }));
+    });
+    await user.keyboard("{ArrowDown}");
+    expect(document.activeElement).toBe(screen.getByRole("menuitem", { name: "Duplicate" }));
+  });
+  it("has no axe violations", async () => {
+    const { container } = render(
+      /* @__PURE__ */ jsxs(Menu, { label: "Actions", children: [
+        /* @__PURE__ */ jsx(MenuItem, { children: "Edit" }),
+        /* @__PURE__ */ jsx(MenuItem, { children: "Duplicate" })
+      ] })
+    );
+    await assertNoAxeViolations(container);
+  });
+});
+//# sourceMappingURL=Menu.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Menu.test.tsx"],"sourcesContent":["import { describe, expect, it } from 'vitest';\nimport { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { assertNoAxeViolations } from '@becket-ui/a11y';\n\nimport { Menu, MenuItem } from './Menu';\n\ndescribe('Menu', () => {\n  it('exposes expanded and haspopup on the trigger', async () => {\n    const user = userEvent.setup();\n    render(\n      <Menu label=\"Actions\">\n        <MenuItem>Edit</MenuItem>\n        <MenuItem>Duplicate</MenuItem>\n      </Menu>,\n    );\n    const trigger = screen.getByText('Actions');\n    expect(trigger.tagName).toBe('SUMMARY');\n    expect(trigger.getAttribute('aria-haspopup')).toBe('menu');\n    expect(trigger.getAttribute('aria-expanded')).toBe('false');\n\n    await user.click(trigger);\n    expect(trigger.getAttribute('aria-expanded')).toBe('true');\n  });\n\n  it('keeps open items out of Tab order', async () => {\n    const user = userEvent.setup();\n    render(\n      <>\n        <button type=\"button\">Before</button>\n        <Menu label=\"Actions\">\n          <MenuItem>Edit</MenuItem>\n          <MenuItem>Duplicate</MenuItem>\n        </Menu>\n        <button type=\"button\">After</button>\n      </>,\n    );\n\n    await user.click(screen.getByText('Actions'));\n    expect(screen.getByRole('menuitem', { name: 'Edit' }).getAttribute('tabindex')).toBe('-1');\n    expect(screen.getByRole('menuitem', { name: 'Duplicate' }).getAttribute('tabindex')).toBe('-1');\n\n    await waitFor(() => {\n      expect(document.activeElement).toBe(screen.getByRole('menuitem', { name: 'Edit' }));\n    });\n    await user.tab();\n    expect(document.activeElement).toBe(screen.getByRole('button', { name: 'After' }));\n  });\n\n  it('moves between items with arrows', async () => {\n    const user = userEvent.setup();\n    render(\n      <Menu label=\"Actions\">\n        <MenuItem>Edit</MenuItem>\n        <MenuItem>Duplicate</MenuItem>\n      </Menu>,\n    );\n    await user.click(screen.getByText('Actions'));\n    await waitFor(() => {\n      expect(document.activeElement).toBe(screen.getByRole('menuitem', { name: 'Edit' }));\n    });\n    await user.keyboard('{ArrowDown}');\n    expect(document.activeElement).toBe(screen.getByRole('menuitem', { name: 'Duplicate' }));\n  });\n\n  it('has no axe violations', async () => {\n    const { container } = render(\n      <Menu label=\"Actions\">\n        <MenuItem>Edit</MenuItem>\n        <MenuItem>Duplicate</MenuItem>\n      </Menu>,\n    );\n    await assertNoAxeViolations(container);\n  });\n});\n"],"mappings":"AAWM,SAiBA,UAhBE,KADF;AAXN,SAAS,UAAU,QAAQ,UAAU;AACrC,SAAS,QAAQ,QAAQ,eAAe;AACxC,OAAO,eAAe;AACtB,SAAS,6BAA6B;AAEtC,SAAS,MAAM,gBAAgB;AAE/B,SAAS,QAAQ,MAAM;AACrB,KAAG,gDAAgD,YAAY;AAC7D,UAAM,OAAO,UAAU,MAAM;AAC7B;AAAA,MACE,qBAAC,QAAK,OAAM,WACV;AAAA,4BAAC,YAAS,kBAAI;AAAA,QACd,oBAAC,YAAS,uBAAS;AAAA,SACrB;AAAA,IACF;AACA,UAAM,UAAU,OAAO,UAAU,SAAS;AAC1C,WAAO,QAAQ,OAAO,EAAE,KAAK,SAAS;AACtC,WAAO,QAAQ,aAAa,eAAe,CAAC,EAAE,KAAK,MAAM;AACzD,WAAO,QAAQ,aAAa,eAAe,CAAC,EAAE,KAAK,OAAO;AAE1D,UAAM,KAAK,MAAM,OAAO;AACxB,WAAO,QAAQ,aAAa,eAAe,CAAC,EAAE,KAAK,MAAM;AAAA,EAC3D,CAAC;AAED,KAAG,qCAAqC,YAAY;AAClD,UAAM,OAAO,UAAU,MAAM;AAC7B;AAAA,MACE,iCACE;AAAA,4BAAC,YAAO,MAAK,UAAS,oBAAM;AAAA,QAC5B,qBAAC,QAAK,OAAM,WACV;AAAA,8BAAC,YAAS,kBAAI;AAAA,UACd,oBAAC,YAAS,uBAAS;AAAA,WACrB;AAAA,QACA,oBAAC,YAAO,MAAK,UAAS,mBAAK;AAAA,SAC7B;AAAA,IACF;AAEA,UAAM,KAAK,MAAM,OAAO,UAAU,SAAS,CAAC;AAC5C,WAAO,OAAO,UAAU,YAAY,EAAE,MAAM,OAAO,CAAC,EAAE,aAAa,UAAU,CAAC,EAAE,KAAK,IAAI;AACzF,WAAO,OAAO,UAAU,YAAY,EAAE,MAAM,YAAY,CAAC,EAAE,aAAa,UAAU,CAAC,EAAE,KAAK,IAAI;AAE9F,UAAM,QAAQ,MAAM;AAClB,aAAO,SAAS,aAAa,EAAE,KAAK,OAAO,UAAU,YAAY,EAAE,MAAM,OAAO,CAAC,CAAC;AAAA,IACpF,CAAC;AACD,UAAM,KAAK,IAAI;AACf,WAAO,SAAS,aAAa,EAAE,KAAK,OAAO,UAAU,UAAU,EAAE,MAAM,QAAQ,CAAC,CAAC;AAAA,EACnF,CAAC;AAED,KAAG,mCAAmC,YAAY;AAChD,UAAM,OAAO,UAAU,MAAM;AAC7B;AAAA,MACE,qBAAC,QAAK,OAAM,WACV;AAAA,4BAAC,YAAS,kBAAI;AAAA,QACd,oBAAC,YAAS,uBAAS;AAAA,SACrB;AAAA,IACF;AACA,UAAM,KAAK,MAAM,OAAO,UAAU,SAAS,CAAC;AAC5C,UAAM,QAAQ,MAAM;AAClB,aAAO,SAAS,aAAa,EAAE,KAAK,OAAO,UAAU,YAAY,EAAE,MAAM,OAAO,CAAC,CAAC;AAAA,IACpF,CAAC;AACD,UAAM,KAAK,SAAS,aAAa;AACjC,WAAO,SAAS,aAAa,EAAE,KAAK,OAAO,UAAU,YAAY,EAAE,MAAM,YAAY,CAAC,CAAC;AAAA,EACzF,CAAC;AAED,KAAG,yBAAyB,YAAY;AACtC,UAAM,EAAE,UAAU,IAAI;AAAA,MACpB,qBAAC,QAAK,OAAM,WACV;AAAA,4BAAC,YAAS,kBAAI;AAAA,QACd,oBAAC,YAAS,uBAAS;AAAA,SACrB;AAAA,IACF;AACA,UAAM,sBAAsB,SAAS;AAAA,EACvC,CAAC;AACH,CAAC;","names":[]}

package/dist/components/Radio.d.ts

@@ -0,0 +1,38 @@
+import { type ComponentPropsWithoutRef, type InputHTMLAttributes, type ReactNode } from 'react';
+type RadioSize = 'sm' | 'md';
+export type RadioGroupProps = Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> & {
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: RadioSize;
+    legend?: ReactNode;
+    onValueChange?: (value: string) => void;
+    children?: ReactNode;
+};
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref">, "onChange"> & {
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: RadioSize;
+    legend?: ReactNode;
+    onValueChange?: (value: string) => void;
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLFieldSetElement>>;
+export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> & {
+    value: string;
+    label?: ReactNode;
+    description?: ReactNode;
+    size?: RadioSize;
+};
+export declare const Radio: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+    value: string;
+    label?: ReactNode;
+    description?: ReactNode;
+    size?: RadioSize;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=Radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAuB7B,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,CAAC,UAAU,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,UAAU;WAXd,MAAM;YACL,MAAM;mBACC,MAAM;eACV,OAAO;cACR,OAAO;WACV,SAAS;aACP,SAAS;oBACF,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;eAC5B,SAAS;uDA0DrB,CAAC;AAIF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,KAAK;WANT,MAAM;YACL,SAAS;kBACH,SAAS;WAChB,SAAS;oDA8EjB,CAAC"}

package/dist/components/Radio.js

@@ -0,0 +1,144 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useId,
+  useMemo
+} from "react";
+import { radio as radioRecipe } from "@becket-ui/tokens/recipes";
+import { useOptionalField } from "./Field";
+const RadioGroupContext = createContext(null);
+function mergeClassName(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function fieldRadioSize(size) {
+  if (size == null) return void 0;
+  return size === "lg" ? "md" : size;
+}
+const RadioGroup = forwardRef(
+  ({
+    name: nameProp,
+    value,
+    defaultValue,
+    disabled = false,
+    invalid: invalidProp,
+    size: sizeProp,
+    legend,
+    onValueChange,
+    className,
+    children,
+    "aria-describedby": describedByProp,
+    ...props
+  }, ref) => {
+    const autoName = useId();
+    const field = useOptionalField();
+    const name = nameProp ?? autoName;
+    const invalid = invalidProp ?? field?.invalid ?? false;
+    const size = sizeProp ?? fieldRadioSize(field?.size) ?? "md";
+    const describedBy = describedByProp ?? field?.describedBy;
+    const styles = radioRecipe({ size });
+    const ctx = useMemo(
+      () => ({
+        name,
+        value,
+        defaultValue,
+        disabled,
+        invalid,
+        size,
+        onValueChange
+      }),
+      [defaultValue, disabled, invalid, name, onValueChange, size, value]
+    );
+    return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+      "fieldset",
+      {
+        ref,
+        ...props,
+        disabled,
+        "aria-invalid": invalid || void 0,
+        "aria-describedby": describedBy,
+        className: mergeClassName(styles.group, className),
+        children: [
+          legend != null ? /* @__PURE__ */ jsx("legend", { className: styles.legend, children: legend }) : null,
+          children
+        ]
+      }
+    ) });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+const Radio = forwardRef(
+  ({
+    id,
+    name: nameProp,
+    value,
+    label,
+    description,
+    disabled: disabledProp,
+    className,
+    size: sizeProp,
+    checked: checkedProp,
+    defaultChecked: defaultCheckedProp,
+    onChange,
+    ...props
+  }, ref) => {
+    const autoId = useId();
+    const group = useContext(RadioGroupContext);
+    const inputId = id ?? autoId;
+    const descriptionId = description != null ? `${inputId}-desc` : void 0;
+    const name = group?.name ?? nameProp;
+    const disabled = Boolean(disabledProp || group?.disabled);
+    const invalid = group?.invalid;
+    const size = sizeProp ?? group?.size ?? "md";
+    const groupControlled = group != null && group.value !== void 0;
+    const checked = groupControlled ? group.value === value : checkedProp;
+    const defaultChecked = groupControlled ? void 0 : group?.defaultValue != null ? group.defaultValue === value : defaultCheckedProp;
+    const styles = radioRecipe({ size });
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: mergeClassName(styles.root, className),
+        htmlFor: inputId,
+        "data-disabled": disabled ? "" : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              id: inputId,
+              type: "radio",
+              name,
+              value,
+              disabled,
+              "aria-invalid": invalid || void 0,
+              "aria-describedby": descriptionId,
+              ...props,
+              ...checked !== void 0 ? { checked } : {},
+              ...checked === void 0 && defaultChecked !== void 0 ? { defaultChecked } : {},
+              className: styles.control,
+              onChange: (event) => {
+                onChange?.(event);
+                if (event.target.checked) {
+                  group?.onValueChange?.(event.target.value);
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: styles.indicator, "aria-hidden": "true" }),
+          label != null || description != null ? /* @__PURE__ */ jsxs("span", { className: styles.text, children: [
+            label != null ? /* @__PURE__ */ jsx("span", { className: styles.label, children: label }) : null,
+            description != null ? /* @__PURE__ */ jsx("span", { id: descriptionId, className: styles.description, children: description }) : null
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+export {
+  Radio,
+  RadioGroup
+};
+//# sourceMappingURL=Radio.js.map

package/dist/components/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Radio.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  useId,\n  useMemo,\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { radio as radioRecipe } from '@becket-ui/tokens/recipes';\nimport { useOptionalField } from './Field';\n\ntype RadioSize = 'sm' | 'md';\n\ntype RadioGroupContextValue = {\n  name: string;\n  value?: string;\n  defaultValue?: string;\n  disabled: boolean;\n  invalid: boolean;\n  size: RadioSize;\n  onValueChange?: (value: string) => void;\n};\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nfunction mergeClassName(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nfunction fieldRadioSize(size?: 'sm' | 'md' | 'lg'): RadioSize | undefined {\n  if (size == null) return undefined;\n  return size === 'lg' ? 'md' : size;\n}\n\nexport type RadioGroupProps = Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> & {\n  name?: string;\n  value?: string;\n  defaultValue?: string;\n  disabled?: boolean;\n  invalid?: boolean;\n  size?: RadioSize;\n  legend?: ReactNode;\n  onValueChange?: (value: string) => void;\n  children?: ReactNode;\n};\n\nexport const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(\n  (\n    {\n      name: nameProp,\n      value,\n      defaultValue,\n      disabled = false,\n      invalid: invalidProp,\n      size: sizeProp,\n      legend,\n      onValueChange,\n      className,\n      children,\n      'aria-describedby': describedByProp,\n      ...props\n    },\n    ref,\n  ) => {\n    const autoName = useId();\n    const field = useOptionalField();\n    const name = nameProp ?? autoName;\n    const invalid = invalidProp ?? field?.invalid ?? false;\n    const size = sizeProp ?? fieldRadioSize(field?.size) ?? 'md';\n    const describedBy = describedByProp ?? field?.describedBy;\n    const styles = radioRecipe({ size });\n\n    const ctx = useMemo(\n      () => ({\n        name,\n        value,\n        defaultValue,\n        disabled,\n        invalid,\n        size,\n        onValueChange,\n      }),\n      [defaultValue, disabled, invalid, name, onValueChange, size, value],\n    );\n\n    return (\n      <RadioGroupContext.Provider value={ctx}>\n        <fieldset\n          ref={ref}\n          {...props}\n          disabled={disabled}\n          aria-invalid={invalid || undefined}\n          aria-describedby={describedBy}\n          className={mergeClassName(styles.group, className)}\n        >\n          {legend != null ? <legend className={styles.legend}>{legend}</legend> : null}\n          {children}\n        </fieldset>\n      </RadioGroupContext.Provider>\n    );\n  },\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> & {\n  value: string;\n  label?: ReactNode;\n  description?: ReactNode;\n  size?: RadioSize;\n};\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      id,\n      name: nameProp,\n      value,\n      label,\n      description,\n      disabled: disabledProp,\n      className,\n      size: sizeProp,\n      checked: checkedProp,\n      defaultChecked: defaultCheckedProp,\n      onChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const autoId = useId();\n    const group = useContext(RadioGroupContext);\n    const inputId = id ?? autoId;\n    const descriptionId = description != null ? `${inputId}-desc` : undefined;\n    const name = group?.name ?? nameProp;\n    const disabled = Boolean(disabledProp || group?.disabled);\n    const invalid = group?.invalid;\n    const size = sizeProp ?? group?.size ?? 'md';\n    const groupControlled = group != null && group.value !== undefined;\n    const checked = groupControlled ? group.value === value : checkedProp;\n    const defaultChecked = groupControlled\n      ? undefined\n      : group?.defaultValue != null\n        ? group.defaultValue === value\n        : defaultCheckedProp;\n    const styles = radioRecipe({ size });\n\n    return (\n      <label\n        className={mergeClassName(styles.root, className)}\n        htmlFor={inputId}\n        data-disabled={disabled ? '' : undefined}\n      >\n        <input\n          ref={ref}\n          id={inputId}\n          type=\"radio\"\n          name={name}\n          value={value}\n          disabled={disabled}\n          aria-invalid={invalid || undefined}\n          aria-describedby={descriptionId}\n          {...props}\n          {...(checked !== undefined ? { checked } : {})}\n          {...(checked === undefined && defaultChecked !== undefined ? { defaultChecked } : {})}\n          className={styles.control}\n          onChange={(event: ChangeEvent<HTMLInputElement>) => {\n            onChange?.(event);\n            if (event.target.checked) {\n              group?.onValueChange?.(event.target.value);\n            }\n          }}\n        />\n        <span className={styles.indicator} aria-hidden=\"true\" />\n        {label != null || description != null ? (\n          <span className={styles.text}>\n            {label != null ? <span className={styles.label}>{label}</span> : null}\n            {description != null ? (\n              <span id={descriptionId} className={styles.description}>\n                {description}\n              </span>\n            ) : null}\n          </span>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nRadio.displayName = 'Radio';\n"],"mappings":"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","names":[]}

package/dist/components/Select.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode, type SelectHTMLAttributes } from 'react';
+import { type FieldSize } from './Field';
+export type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> & {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    size?: FieldSize;
+    invalid?: boolean;
+    fullWidth?: boolean;
+};
+export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> & {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    size?: FieldSize;
+    invalid?: boolean;
+    fullWidth?: boolean;
+} & import("react").RefAttributes<HTMLSelectElement>>;
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,EAML,KAAK,SAAS,EACf,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAAG;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM;YAPT,SAAS;iBACJ,SAAS;WACf,SAAS;cACN,OAAO;gBACL,OAAO;qDAiCpB,CAAC"}

package/dist/components/Select.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import {
+  Field,
+  FieldError,
+  FieldHelper,
+  FieldLabel,
+  FieldSelect
+} from "./Field";
+const Select = forwardRef(
+  ({
+    label,
+    helperText,
+    size = "md",
+    invalid = false,
+    fullWidth = false,
+    id,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(Field, { id, size, invalid, fullWidth, children: [
+      label != null ? /* @__PURE__ */ jsx(FieldLabel, { children: label }) : null,
+      /* @__PURE__ */ jsx(FieldSelect, { ref, ...props, children }),
+      helperText != null ? invalid ? /* @__PURE__ */ jsx(FieldError, { children: helperText }) : /* @__PURE__ */ jsx(FieldHelper, { children: helperText }) : null
+    ] });
+  }
+);
+Select.displayName = "Select";
+export {
+  Select
+};
+//# sourceMappingURL=Select.js.map

package/dist/components/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Select.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ReactNode, type SelectHTMLAttributes } from 'react';\nimport {\n  Field,\n  FieldError,\n  FieldHelper,\n  FieldLabel,\n  FieldSelect,\n  type FieldSize,\n} from './Field';\n\nexport type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> & {\n  label?: ReactNode;\n  helperText?: ReactNode;\n  size?: FieldSize;\n  invalid?: boolean;\n  fullWidth?: boolean;\n};\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n  (\n    {\n      label,\n      helperText,\n      size = 'md',\n      invalid = false,\n      fullWidth = false,\n      id,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Field id={id} size={size} invalid={invalid} fullWidth={fullWidth}>\n        {label != null ? <FieldLabel>{label}</FieldLabel> : null}\n        <FieldSelect ref={ref} {...props}>\n          {children}\n        </FieldSelect>\n        {helperText != null ? (\n          invalid ? (\n            <FieldError>{helperText}</FieldError>\n          ) : (\n            <FieldHelper>{helperText}</FieldHelper>\n          )\n        ) : null}\n      </Field>\n    );\n  },\n);\n\nSelect.displayName = 'Select';\n"],"mappings":";AAmCM,SACmB,KADnB;AAjCN,SAAS,kBAA6D;AACtE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAUA,MAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE,qBAAC,SAAM,IAAQ,MAAY,SAAkB,WAC1C;AAAA,eAAS,OAAO,oBAAC,cAAY,iBAAM,IAAgB;AAAA,MACpD,oBAAC,eAAY,KAAW,GAAG,OACxB,UACH;AAAA,MACC,cAAc,OACb,UACE,oBAAC,cAAY,sBAAW,IAExB,oBAAC,eAAa,sBAAW,IAEzB;AAAA,OACN;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}

package/dist/components/Separator.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentPropsWithoutRef } from 'react';
+type SeparatorOrientation = 'horizontal' | 'vertical';
+export type SeparatorProps = ComponentPropsWithoutRef<'hr'> & {
+    orientation?: SeparatorOrientation;
+    /** When true, hide from the accessibility tree (decorative). */
+    decorative?: boolean;
+};
+export declare const Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
+    orientation?: SeparatorOrientation;
+    /** When true, hide from the accessibility tree (decorative). */
+    decorative?: boolean;
+} & import("react").RefAttributes<HTMLHRElement>>;
+export {};
+//# sourceMappingURL=Separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../src/components/Separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGlE,KAAK,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,wBAAwB,CAAC,IAAI,CAAC,GAAG;IAC5D,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAMF,eAAO,MAAM,SAAS;kBATN,oBAAoB;IAClC,gEAAgE;iBACnD,OAAO;iDAmBrB,CAAC"}

package/dist/components/Separator.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { separator as separatorRecipe } from "@becket-ui/tokens/recipes";
+function mergeClassName(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const Separator = forwardRef(
+  ({ orientation = "horizontal", decorative = false, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "hr",
+      {
+        ref,
+        ...props,
+        className: mergeClassName(separatorRecipe({ orientation }), className),
+        "aria-orientation": orientation,
+        "aria-hidden": decorative ? true : void 0
+      }
+    );
+  }
+);
+Separator.displayName = "Separator";
+export {
+  Separator
+};
+//# sourceMappingURL=Separator.js.map

package/dist/components/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Separator.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef } from 'react';\nimport { separator as separatorRecipe } from '@becket-ui/tokens/recipes';\n\ntype SeparatorOrientation = 'horizontal' | 'vertical';\n\nexport type SeparatorProps = ComponentPropsWithoutRef<'hr'> & {\n  orientation?: SeparatorOrientation;\n  /** When true, hide from the accessibility tree (decorative). */\n  decorative?: boolean;\n};\n\nfunction mergeClassName(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nexport const Separator = forwardRef<HTMLHRElement, SeparatorProps>(\n  ({ orientation = 'horizontal', decorative = false, className, ...props }, ref) => {\n    return (\n      <hr\n        ref={ref}\n        {...props}\n        className={mergeClassName(separatorRecipe({ orientation }), className)}\n        aria-orientation={orientation}\n        aria-hidden={decorative ? true : undefined}\n      />\n    );\n  },\n);\n\nSeparator.displayName = 'Separator';\n"],"mappings":"AAkBM;AAlBN,SAAS,kBAAiD;AAC1D,SAAS,aAAa,uBAAuB;AAU7C,SAAS,kBAAkB,SAAyC;AAClE,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;AAEO,MAAM,YAAY;AAAA,EACvB,CAAC,EAAE,cAAc,cAAc,aAAa,OAAO,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,eAAe,gBAAgB,EAAE,YAAY,CAAC,GAAG,SAAS;AAAA,QACrE,oBAAkB;AAAA,QAClB,eAAa,aAAa,OAAO;AAAA;AAAA,IACnC;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}

package/dist/components/SimpleGrid.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentPropsWithoutRef, type ElementType } from 'react';
+import { grid } from '@becket-ui/tokens/patterns';
+import { type GapValue, type ResponsiveValue } from '../helpers/responsive';
+type GridOptions = NonNullable<Parameters<typeof grid>[0]>;
+export type SimpleGridProps = ComponentPropsWithoutRef<'div'> & {
+    columns?: ResponsiveValue<number> | GridOptions['columns'];
+    minChildWidth?: GridOptions['minChildWidth'];
+    gap?: GapValue;
+    rowGap?: GapValue;
+    columnGap?: GapValue;
+    as?: ElementType;
+};
+/**
+ * Responsive CSS grid layout. Pass `columns` (number or breakpoint object)
+ * or `minChildWidth` for auto-fit tracks. App-specific presets belong in consumers.
+ */
+export declare const SimpleGrid: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    columns?: ResponsiveValue<number> | GridOptions['columns'];
+    minChildWidth?: GridOptions['minChildWidth'];
+    gap?: GapValue;
+    rowGap?: GapValue;
+    columnGap?: GapValue;
+    as?: ElementType;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=SimpleGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleGrid.d.ts","sourceRoot":"","sources":["../../src/components/SimpleGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,wBAAwB,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAGlD,OAAO,EAA+C,KAAK,QAAQ,EAAE,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEzH,KAAK,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AA4D3D,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC9D,OAAO,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IAC3D,aAAa,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAC7C,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU;cAZX,eAAe,CAAC,MAAM,CAAC,GAAG,WAAW,CAAC,SAAS,CAAC;oBAC1C,WAAW,CAAC,eAAe,CAAC;UACtC,QAAQ;aACL,QAAQ;gBACL,QAAQ;SACf,WAAW;kDAmDjB,CAAC"}