@becket-ui/react 0.1.0

package/dist/components/Dialog.js

@@ -0,0 +1,173 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useLayoutEffect,
+  useRef
+} from "react";
+import { dialog as dialogRecipe } from "@becket-ui/tokens/recipes";
+import { assignRef, useNativeDialog } from "../helpers/nativeDialog";
+const DialogContext = createContext(null);
+function useDialog() {
+  const ctx = useContext(DialogContext);
+  if (!ctx) {
+    throw new Error("Dialog parts must be used within Dialog");
+  }
+  return ctx;
+}
+function mergeClassName(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const Dialog = forwardRef(
+  ({
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    title,
+    footer,
+    role = "dialog",
+    className,
+    children,
+    onClick,
+    ...props
+  }, ref) => {
+    const innerRef = useRef(null);
+    const { setOpen, titleId, descriptionId, labelledBy, describedBy, registerTitle, registerDescription } = useNativeDialog(innerRef, {
+      open,
+      defaultOpen,
+      onOpenChange,
+      titlePresent: title != null,
+      descriptionPresent: children != null && children !== false
+    });
+    const styles = dialogRecipe();
+    const composeChrome = title != null || footer != null;
+    const lightDismiss = role !== "alertdialog";
+    return /* @__PURE__ */ jsx(
+      DialogContext.Provider,
+      {
+        value: { setOpen, titleId, descriptionId, registerTitle, registerDescription },
+        children: /* @__PURE__ */ jsx(
+          "dialog",
+          {
+            ref: (node) => {
+              innerRef.current = node;
+              assignRef(ref, node);
+            },
+            role,
+            tabIndex: -1,
+            className: mergeClassName(styles.root, className),
+            ...props,
+            "aria-modal": "true",
+            "aria-labelledby": labelledBy,
+            "aria-describedby": describedBy,
+            onClick: (event) => {
+              onClick?.(event);
+              if (event.defaultPrevented || !lightDismiss) return;
+              if (event.target === event.currentTarget) setOpen(false);
+            },
+            onClose: () => setOpen(false),
+            children: composeChrome ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              title != null && /* @__PURE__ */ jsxs(DialogHeader, { children: [
+                /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+                /* @__PURE__ */ jsx(DialogClose, {})
+              ] }),
+              /* @__PURE__ */ jsx(DialogBody, { children }),
+              footer != null && /* @__PURE__ */ jsx(DialogFooter, { children: footer })
+            ] }) : children
+          }
+        )
+      }
+    );
+  }
+);
+Dialog.displayName = "Dialog";
+const DialogHeader = forwardRef(
+  ({ className, ...props }, ref) => {
+    const styles = dialogRecipe();
+    return /* @__PURE__ */ jsx("div", { ref, ...props, className: mergeClassName(styles.header, className) });
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+const DialogTitle = forwardRef(
+  ({ className, as: Comp = "h2", ...props }, ref) => {
+    const { titleId, registerTitle } = useDialog();
+    const styles = dialogRecipe();
+    useLayoutEffect(() => {
+      registerTitle(true);
+      return () => registerTitle(false);
+    }, [registerTitle]);
+    return /* @__PURE__ */ jsx(Comp, { ref, id: titleId, ...props, className: mergeClassName(styles.title, className) });
+  }
+);
+DialogTitle.displayName = "DialogTitle";
+const DialogBody = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { descriptionId, registerDescription } = useDialog();
+    const styles = dialogRecipe();
+    const hasContent = children != null && children !== false;
+    useLayoutEffect(() => {
+      registerDescription(hasContent);
+      return () => registerDescription(false);
+    }, [hasContent, registerDescription]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id: descriptionId,
+        ...props,
+        className: mergeClassName(styles.body, className),
+        children
+      }
+    );
+  }
+);
+DialogBody.displayName = "DialogBody";
+const DialogFooter = forwardRef(
+  ({ className, ...props }, ref) => {
+    const styles = dialogRecipe();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-becket-dialog-footer": "",
+        ...props,
+        className: mergeClassName(styles.footer, className)
+      }
+    );
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+const DialogClose = forwardRef(
+  ({ className, children = "\xD7", type = "button", onClick, ...props }, ref) => {
+    const { setOpen } = useDialog();
+    const styles = dialogRecipe();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        "data-becket-dialog-close": "",
+        ...props,
+        "aria-label": props["aria-label"] ?? "Close",
+        className: mergeClassName(styles.close, className),
+        onClick: (event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented) setOpen(false);
+        },
+        children
+      }
+    );
+  }
+);
+DialogClose.displayName = "DialogClose";
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/components/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Dialog.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type DialogHTMLAttributes,\n  type ElementType,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport { dialog as dialogRecipe } from '@becket-ui/tokens/recipes';\nimport { assignRef, useNativeDialog } from '../helpers/nativeDialog';\n\ntype DialogRole = 'dialog' | 'alertdialog';\n\ntype DialogContextValue = {\n  setOpen: (open: boolean) => void;\n  titleId: string;\n  descriptionId: string;\n  registerTitle: (present: boolean) => void;\n  registerDescription: (present: boolean) => void;\n};\n\nconst DialogContext = createContext<DialogContextValue | null>(null);\n\nfunction useDialog() {\n  const ctx = useContext(DialogContext);\n  if (!ctx) {\n    throw new Error('Dialog parts must be used within Dialog');\n  }\n  return ctx;\n}\n\nfunction mergeClassName(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nexport type DialogProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'open' | 'title'> & {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Composed heading. When set, Dialog renders header + close. */\n  title?: ReactNode;\n  /** Composed actions (pass `Button` nodes). When set, Dialog renders the footer. */\n  footer?: ReactNode;\n  /**\n   * `alertdialog` is for confirms: no backdrop dismiss, Escape still closes,\n   * initial focus is the first footer action (Cancel) when present.\n   */\n  role?: DialogRole;\n  children?: ReactNode;\n};\n\nexport const Dialog = forwardRef<HTMLDialogElement, DialogProps>(\n  (\n    {\n      open,\n      defaultOpen = false,\n      onOpenChange,\n      title,\n      footer,\n      role = 'dialog',\n      className,\n      children,\n      onClick,\n      ...props\n    },\n    ref,\n  ) => {\n    const innerRef = useRef<HTMLDialogElement>(null);\n    const { setOpen, titleId, descriptionId, labelledBy, describedBy, registerTitle, registerDescription } =\n      useNativeDialog(innerRef, {\n        open,\n        defaultOpen,\n        onOpenChange,\n        titlePresent: title != null,\n        descriptionPresent: children != null && children !== false,\n      });\n    const styles = dialogRecipe();\n    const composeChrome = title != null || footer != null;\n    const lightDismiss = role !== 'alertdialog';\n\n    return (\n      <DialogContext.Provider\n        value={{ setOpen, titleId, descriptionId, registerTitle, registerDescription }}\n      >\n        <dialog\n          ref={(node) => {\n            innerRef.current = node;\n            assignRef(ref, node);\n          }}\n          role={role}\n          tabIndex={-1}\n          className={mergeClassName(styles.root, className)}\n          {...props}\n          aria-modal=\"true\"\n          aria-labelledby={labelledBy}\n          aria-describedby={describedBy}\n          onClick={(event: MouseEvent<HTMLDialogElement>) => {\n            onClick?.(event);\n            if (event.defaultPrevented || !lightDismiss) return;\n            if (event.target === event.currentTarget) setOpen(false);\n          }}\n          onClose={() => setOpen(false)}\n        >\n          {composeChrome ? (\n            <>\n              {title != null && (\n                <DialogHeader>\n                  <DialogTitle>{title}</DialogTitle>\n                  <DialogClose />\n                </DialogHeader>\n              )}\n              <DialogBody>{children}</DialogBody>\n              {footer != null && <DialogFooter>{footer}</DialogFooter>}\n            </>\n          ) : (\n            children\n          )}\n        </dialog>\n      </DialogContext.Provider>\n    );\n  },\n);\n\nDialog.displayName = 'Dialog';\n\nexport const DialogHeader = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => {\n    const styles = dialogRecipe();\n    return <div ref={ref} {...props} className={mergeClassName(styles.header, className)} />;\n  },\n);\nDialogHeader.displayName = 'DialogHeader';\n\ntype DialogTitleProps = ComponentPropsWithoutRef<'h2'> & { as?: ElementType };\n\nexport const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(\n  ({ className, as: Comp = 'h2', ...props }, ref) => {\n    const { titleId, registerTitle } = useDialog();\n    const styles = dialogRecipe();\n    useLayoutEffect(() => {\n      registerTitle(true);\n      return () => registerTitle(false);\n    }, [registerTitle]);\n    return (\n      <Comp ref={ref} id={titleId} {...props} className={mergeClassName(styles.title, className)} />\n    );\n  },\n);\nDialogTitle.displayName = 'DialogTitle';\n\nexport const DialogBody = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, children, ...props }, ref) => {\n    const { descriptionId, registerDescription } = useDialog();\n    const styles = dialogRecipe();\n    const hasContent = children != null && children !== false;\n    useLayoutEffect(() => {\n      registerDescription(hasContent);\n      return () => registerDescription(false);\n    }, [hasContent, registerDescription]);\n    return (\n      <div\n        ref={ref}\n        id={descriptionId}\n        {...props}\n        className={mergeClassName(styles.body, className)}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nDialogBody.displayName = 'DialogBody';\n\nexport const DialogFooter = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => {\n    const styles = dialogRecipe();\n    return (\n      <div\n        ref={ref}\n        data-becket-dialog-footer=\"\"\n        {...props}\n        className={mergeClassName(styles.footer, className)}\n      />\n    );\n  },\n);\nDialogFooter.displayName = 'DialogFooter';\n\ntype DialogCloseProps = ComponentPropsWithoutRef<'button'>;\n\nexport const DialogClose = forwardRef<HTMLButtonElement, DialogCloseProps>(\n  ({ className, children = '×', type = 'button', onClick, ...props }, ref) => {\n    const { setOpen } = useDialog();\n    const styles = dialogRecipe();\n    return (\n      <button\n        ref={ref}\n        type={type}\n        data-becket-dialog-close=\"\"\n        {...props}\n        aria-label={props['aria-label'] ?? 'Close'}\n        className={mergeClassName(styles.close, className)}\n        onClick={(event) => {\n          onClick?.(event);\n          if (!event.defaultPrevented) setOpen(false);\n        }}\n      >\n        {children}\n      </button>\n    );\n  },\n);\nDialogClose.displayName = 'DialogClose';\n"],"mappings":"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","names":[]}

package/dist/components/Dialog.test.js

@@ -0,0 +1,89 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { assertNoAxeViolations } from "@becket-ui/a11y";
+import { Button } from "./Button";
+import { Dialog } from "./Dialog";
+function ConfirmDialog({
+  open = true,
+  role = "dialog",
+  onOpenChange = () => {
+  },
+  ariaLabel
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange,
+      role,
+      title: ariaLabel ? void 0 : "Confirm",
+      "aria-label": ariaLabel,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { visual: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { visual: "primary", onClick: () => onOpenChange(false), children: "Confirm" })
+      ] }),
+      children: "Native dialog body."
+    }
+  );
+}
+describe("Dialog", () => {
+  it("points labelledby and describedby at rendered title and body", () => {
+    render(/* @__PURE__ */ jsx(ConfirmDialog, {}));
+    const dialog = screen.getByRole("dialog", { name: "Confirm" });
+    const labelledBy = dialog.getAttribute("aria-labelledby");
+    const describedBy = dialog.getAttribute("aria-describedby");
+    expect(document.getElementById(labelledBy)?.textContent).toBe("Confirm");
+    expect(document.getElementById(describedBy)?.textContent).toContain("Native dialog body");
+  });
+  it("omits labelledby when there is no title node", () => {
+    render(/* @__PURE__ */ jsx(ConfirmDialog, { ariaLabel: "Unnamed confirm" }));
+    const dialog = screen.getByRole("dialog", { name: "Unnamed confirm" });
+    expect(dialog.getAttribute("aria-labelledby")).toBeNull();
+  });
+  it("moves initial focus to Cancel, not Close", async () => {
+    render(/* @__PURE__ */ jsx(ConfirmDialog, {}));
+    await waitFor(() => {
+      expect(document.activeElement).toBe(screen.getByRole("button", { name: "Cancel" }));
+    });
+    expect(document.activeElement).not.toBe(screen.getByRole("button", { name: "Close" }));
+  });
+  it("tabs from the first footer action to Confirm", async () => {
+    const user = userEvent.setup();
+    render(/* @__PURE__ */ jsx(ConfirmDialog, {}));
+    await waitFor(() => {
+      expect(document.activeElement).toBe(screen.getByRole("button", { name: "Cancel" }));
+    });
+    await user.tab();
+    expect(document.activeElement).toBe(screen.getByRole("button", { name: "Confirm" }));
+  });
+  it("closes a dialog on backdrop click but not an alertdialog", () => {
+    const onDialog = vi.fn();
+    const { rerender } = render(/* @__PURE__ */ jsx(ConfirmDialog, { onOpenChange: onDialog }));
+    fireEvent.click(screen.getByRole("dialog", { name: "Confirm" }));
+    expect(onDialog).toHaveBeenCalledWith(false);
+    const onAlert = vi.fn();
+    rerender(/* @__PURE__ */ jsx(ConfirmDialog, { role: "alertdialog", onOpenChange: onAlert }));
+    fireEvent.click(screen.getByRole("alertdialog", { name: "Confirm" }));
+    expect(onAlert).not.toHaveBeenCalled();
+  });
+  it("lets Close aria-label be overridden", () => {
+    render(
+      /* @__PURE__ */ jsx(Dialog, { open: true, title: "Confirm", children: "Body" })
+    );
+    expect(screen.getByRole("button", { name: "Close" })).toBeTruthy();
+  });
+  it("closes on Escape via the native dialog close event", () => {
+    const onOpenChange = vi.fn();
+    render(/* @__PURE__ */ jsx(ConfirmDialog, { onOpenChange }));
+    fireEvent.keyDown(screen.getByRole("dialog", { name: "Confirm" }), { key: "Escape" });
+    fireEvent(screen.getByRole("dialog", { name: "Confirm" }), new Event("close", { bubbles: true }));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+  it("has no axe violations when open", async () => {
+    const { container } = render(/* @__PURE__ */ jsx(ConfirmDialog, {}));
+    await assertNoAxeViolations(container);
+  });
+});
+//# sourceMappingURL=Dialog.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Dialog.test.tsx"],"sourcesContent":["import { describe, expect, it, vi } from 'vitest';\nimport { fireEvent, render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { assertNoAxeViolations } from '@becket-ui/a11y';\n\nimport { Button } from './Button';\nimport { Dialog } from './Dialog';\n\nfunction ConfirmDialog({\n  open = true,\n  role = 'dialog' as 'dialog' | 'alertdialog',\n  onOpenChange = () => {},\n  ariaLabel,\n}: {\n  open?: boolean;\n  role?: 'dialog' | 'alertdialog';\n  onOpenChange?: (open: boolean) => void;\n  ariaLabel?: string;\n}) {\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={onOpenChange}\n      role={role}\n      title={ariaLabel ? undefined : 'Confirm'}\n      aria-label={ariaLabel}\n      footer={\n        <>\n          <Button visual=\"outline\" onClick={() => onOpenChange(false)}>\n            Cancel\n          </Button>\n          <Button visual=\"primary\" onClick={() => onOpenChange(false)}>\n            Confirm\n          </Button>\n        </>\n      }\n    >\n      Native dialog body.\n    </Dialog>\n  );\n}\n\ndescribe('Dialog', () => {\n  it('points labelledby and describedby at rendered title and body', () => {\n    render(<ConfirmDialog />);\n    const dialog = screen.getByRole('dialog', { name: 'Confirm' });\n    const labelledBy = dialog.getAttribute('aria-labelledby');\n    const describedBy = dialog.getAttribute('aria-describedby');\n    expect(document.getElementById(labelledBy as string)?.textContent).toBe('Confirm');\n    expect(document.getElementById(describedBy as string)?.textContent).toContain('Native dialog body');\n  });\n\n  it('omits labelledby when there is no title node', () => {\n    render(<ConfirmDialog ariaLabel=\"Unnamed confirm\" />);\n    const dialog = screen.getByRole('dialog', { name: 'Unnamed confirm' });\n    expect(dialog.getAttribute('aria-labelledby')).toBeNull();\n  });\n\n  it('moves initial focus to Cancel, not Close', async () => {\n    render(<ConfirmDialog />);\n    await waitFor(() => {\n      expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Cancel' }));\n    });\n    expect(document.activeElement).not.toBe(screen.getByRole('button', { name: 'Close' }));\n  });\n\n  it('tabs from the first footer action to Confirm', async () => {\n    const user = userEvent.setup();\n    render(<ConfirmDialog />);\n    await waitFor(() => {\n      expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Cancel' }));\n    });\n    await user.tab();\n    expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Confirm' }));\n  });\n\n  it('closes a dialog on backdrop click but not an alertdialog', () => {\n    const onDialog = vi.fn();\n    const { rerender } = render(<ConfirmDialog onOpenChange={onDialog} />);\n    fireEvent.click(screen.getByRole('dialog', { name: 'Confirm' }));\n    expect(onDialog).toHaveBeenCalledWith(false);\n\n    const onAlert = vi.fn();\n    rerender(<ConfirmDialog role=\"alertdialog\" onOpenChange={onAlert} />);\n    fireEvent.click(screen.getByRole('alertdialog', { name: 'Confirm' }));\n    expect(onAlert).not.toHaveBeenCalled();\n  });\n\n  it('lets Close aria-label be overridden', () => {\n    render(\n      <Dialog open title=\"Confirm\">\n        Body\n      </Dialog>,\n    );\n    expect(screen.getByRole('button', { name: 'Close' })).toBeTruthy();\n  });\n\n  it('closes on Escape via the native dialog close event', () => {\n    const onOpenChange = vi.fn();\n    render(<ConfirmDialog onOpenChange={onOpenChange} />);\n    fireEvent.keyDown(screen.getByRole('dialog', { name: 'Confirm' }), { key: 'Escape' });\n    fireEvent(screen.getByRole('dialog', { name: 'Confirm' }), new Event('close', { bubbles: true }));\n    expect(onOpenChange).toHaveBeenCalledWith(false);\n  });\n\n  it('has no axe violations when open', async () => {\n    const { container } = render(<ConfirmDialog />);\n    await assertNoAxeViolations(container);\n  });\n});\n"],"mappings":"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","names":[]}

package/dist/components/Drawer.d.ts

@@ -0,0 +1,38 @@
+import { type DialogHTMLAttributes, type ElementType, type ReactNode } from 'react';
+type DrawerPlacement = 'start' | 'end';
+type DrawerRole = 'dialog' | 'alertdialog';
+export type DrawerProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'open' | 'title'> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: DrawerPlacement;
+    /** Composed heading. When set, Drawer renders header + close. */
+    title?: ReactNode;
+    /** Composed actions (pass `Button` nodes). When set, Drawer renders the footer. */
+    footer?: ReactNode;
+    /** Same as Dialog: `alertdialog` disables backdrop dismiss. */
+    role?: DrawerRole;
+    children?: ReactNode;
+};
+export declare const Drawer: import("react").ForwardRefExoticComponent<Omit<DialogHTMLAttributes<HTMLDialogElement>, "open" | "title"> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: DrawerPlacement;
+    /** Composed heading. When set, Drawer renders header + close. */
+    title?: ReactNode;
+    /** Composed actions (pass `Button` nodes). When set, Drawer renders the footer. */
+    footer?: ReactNode;
+    /** Same as Dialog: `alertdialog` disables backdrop dismiss. */
+    role?: DrawerRole;
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLDialogElement>>;
+export declare const DrawerHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DrawerTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    as?: ElementType;
+} & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const DrawerBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DrawerFooter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DrawerClose: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=Drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/components/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,oBAAoB,EACzB,KAAK,WAAW,EAEhB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,KAAK,eAAe,GAAG,OAAO,GAAG,KAAK,CAAC;AACvC,KAAK,UAAU,GAAG,QAAQ,GAAG,aAAa,CAAC;AAwB3C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IAC1F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,iEAAiE;IACjE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mFAAmF;IACnF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,MAAM;WAbV,OAAO;kBACA,OAAO;mBACN,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;gBAC1B,eAAe;IAC3B,iEAAiE;YACzD,SAAS;IACjB,mFAAmF;aAC1E,SAAS;IAClB,+DAA+D;WACxD,UAAU;eACN,SAAS;qDA0ErB,CAAC;AAIF,eAAO,MAAM,YAAY,2MAKxB,CAAC;AAKF,eAAO,MAAM,WAAW;SAFwC,WAAW;sDAc1E,CAAC;AAGF,eAAO,MAAM,UAAU,2MAoBtB,CAAC;AAGF,eAAO,MAAM,YAAY,2MAYxB,CAAC;AAGF,eAAO,MAAM,WAAW,0NAqBvB,CAAC"}

package/dist/components/Drawer.js

@@ -0,0 +1,174 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useLayoutEffect,
+  useRef
+} from "react";
+import { drawer as drawerRecipe } from "@becket-ui/tokens/recipes";
+import { assignRef, useNativeDialog } from "../helpers/nativeDialog";
+const DrawerContext = createContext(null);
+function useDrawer() {
+  const ctx = useContext(DrawerContext);
+  if (!ctx) {
+    throw new Error("Drawer parts must be used within Drawer");
+  }
+  return ctx;
+}
+function mergeClassName(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const Drawer = forwardRef(
+  ({
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    placement = "end",
+    title,
+    footer,
+    role = "dialog",
+    className,
+    children,
+    onClick,
+    ...props
+  }, ref) => {
+    const innerRef = useRef(null);
+    const { setOpen, titleId, descriptionId, labelledBy, describedBy, registerTitle, registerDescription } = useNativeDialog(innerRef, {
+      open,
+      defaultOpen,
+      onOpenChange,
+      titlePresent: title != null,
+      descriptionPresent: children != null && children !== false
+    });
+    const styles = drawerRecipe({ placement });
+    const composeChrome = title != null || footer != null;
+    const lightDismiss = role !== "alertdialog";
+    return /* @__PURE__ */ jsx(
+      DrawerContext.Provider,
+      {
+        value: { setOpen, titleId, descriptionId, registerTitle, registerDescription },
+        children: /* @__PURE__ */ jsx(
+          "dialog",
+          {
+            ref: (node) => {
+              innerRef.current = node;
+              assignRef(ref, node);
+            },
+            role,
+            tabIndex: -1,
+            className: mergeClassName(styles.root, className),
+            ...props,
+            "aria-modal": "true",
+            "aria-labelledby": labelledBy,
+            "aria-describedby": describedBy,
+            onClick: (event) => {
+              onClick?.(event);
+              if (event.defaultPrevented || !lightDismiss) return;
+              if (event.target === event.currentTarget) setOpen(false);
+            },
+            onClose: () => setOpen(false),
+            children: composeChrome ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              title != null && /* @__PURE__ */ jsxs(DrawerHeader, { children: [
+                /* @__PURE__ */ jsx(DrawerTitle, { children: title }),
+                /* @__PURE__ */ jsx(DrawerClose, {})
+              ] }),
+              /* @__PURE__ */ jsx(DrawerBody, { children }),
+              footer != null && /* @__PURE__ */ jsx(DrawerFooter, { children: footer })
+            ] }) : children
+          }
+        )
+      }
+    );
+  }
+);
+Drawer.displayName = "Drawer";
+const DrawerHeader = forwardRef(
+  ({ className, ...props }, ref) => {
+    const styles = drawerRecipe();
+    return /* @__PURE__ */ jsx("div", { ref, ...props, className: mergeClassName(styles.header, className) });
+  }
+);
+DrawerHeader.displayName = "DrawerHeader";
+const DrawerTitle = forwardRef(
+  ({ className, as: Comp = "h2", ...props }, ref) => {
+    const { titleId, registerTitle } = useDrawer();
+    const styles = drawerRecipe();
+    useLayoutEffect(() => {
+      registerTitle(true);
+      return () => registerTitle(false);
+    }, [registerTitle]);
+    return /* @__PURE__ */ jsx(Comp, { ref, id: titleId, ...props, className: mergeClassName(styles.title, className) });
+  }
+);
+DrawerTitle.displayName = "DrawerTitle";
+const DrawerBody = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { descriptionId, registerDescription } = useDrawer();
+    const styles = drawerRecipe();
+    const hasContent = children != null && children !== false;
+    useLayoutEffect(() => {
+      registerDescription(hasContent);
+      return () => registerDescription(false);
+    }, [hasContent, registerDescription]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id: descriptionId,
+        ...props,
+        className: mergeClassName(styles.body, className),
+        children
+      }
+    );
+  }
+);
+DrawerBody.displayName = "DrawerBody";
+const DrawerFooter = forwardRef(
+  ({ className, ...props }, ref) => {
+    const styles = drawerRecipe();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-becket-dialog-footer": "",
+        ...props,
+        className: mergeClassName(styles.footer, className)
+      }
+    );
+  }
+);
+DrawerFooter.displayName = "DrawerFooter";
+const DrawerClose = forwardRef(
+  ({ className, children = "\xD7", type = "button", onClick, ...props }, ref) => {
+    const { setOpen } = useDrawer();
+    const styles = drawerRecipe();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        "data-becket-dialog-close": "",
+        ...props,
+        "aria-label": props["aria-label"] ?? "Close",
+        className: mergeClassName(styles.close, className),
+        onClick: (event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented) setOpen(false);
+        },
+        children
+      }
+    );
+  }
+);
+DrawerClose.displayName = "DrawerClose";
+export {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle
+};
+//# sourceMappingURL=Drawer.js.map

package/dist/components/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type DialogHTMLAttributes,\n  type ElementType,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport { drawer as drawerRecipe } from '@becket-ui/tokens/recipes';\nimport { assignRef, useNativeDialog } from '../helpers/nativeDialog';\n\ntype DrawerPlacement = 'start' | 'end';\ntype DrawerRole = 'dialog' | 'alertdialog';\n\ntype DrawerContextValue = {\n  setOpen: (open: boolean) => void;\n  titleId: string;\n  descriptionId: string;\n  registerTitle: (present: boolean) => void;\n  registerDescription: (present: boolean) => void;\n};\n\nconst DrawerContext = createContext<DrawerContextValue | null>(null);\n\nfunction useDrawer() {\n  const ctx = useContext(DrawerContext);\n  if (!ctx) {\n    throw new Error('Drawer parts must be used within Drawer');\n  }\n  return ctx;\n}\n\nfunction mergeClassName(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nexport type DrawerProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'open' | 'title'> & {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  placement?: DrawerPlacement;\n  /** Composed heading. When set, Drawer renders header + close. */\n  title?: ReactNode;\n  /** Composed actions (pass `Button` nodes). When set, Drawer renders the footer. */\n  footer?: ReactNode;\n  /** Same as Dialog: `alertdialog` disables backdrop dismiss. */\n  role?: DrawerRole;\n  children?: ReactNode;\n};\n\nexport const Drawer = forwardRef<HTMLDialogElement, DrawerProps>(\n  (\n    {\n      open,\n      defaultOpen = false,\n      onOpenChange,\n      placement = 'end',\n      title,\n      footer,\n      role = 'dialog',\n      className,\n      children,\n      onClick,\n      ...props\n    },\n    ref,\n  ) => {\n    const innerRef = useRef<HTMLDialogElement>(null);\n    const { setOpen, titleId, descriptionId, labelledBy, describedBy, registerTitle, registerDescription } =\n      useNativeDialog(innerRef, {\n        open,\n        defaultOpen,\n        onOpenChange,\n        titlePresent: title != null,\n        descriptionPresent: children != null && children !== false,\n      });\n    const styles = drawerRecipe({ placement });\n    const composeChrome = title != null || footer != null;\n    const lightDismiss = role !== 'alertdialog';\n\n    return (\n      <DrawerContext.Provider\n        value={{ setOpen, titleId, descriptionId, registerTitle, registerDescription }}\n      >\n        <dialog\n          ref={(node) => {\n            innerRef.current = node;\n            assignRef(ref, node);\n          }}\n          role={role}\n          tabIndex={-1}\n          className={mergeClassName(styles.root, className)}\n          {...props}\n          aria-modal=\"true\"\n          aria-labelledby={labelledBy}\n          aria-describedby={describedBy}\n          onClick={(event: MouseEvent<HTMLDialogElement>) => {\n            onClick?.(event);\n            if (event.defaultPrevented || !lightDismiss) return;\n            if (event.target === event.currentTarget) setOpen(false);\n          }}\n          onClose={() => setOpen(false)}\n        >\n          {composeChrome ? (\n            <>\n              {title != null && (\n                <DrawerHeader>\n                  <DrawerTitle>{title}</DrawerTitle>\n                  <DrawerClose />\n                </DrawerHeader>\n              )}\n              <DrawerBody>{children}</DrawerBody>\n              {footer != null && <DrawerFooter>{footer}</DrawerFooter>}\n            </>\n          ) : (\n            children\n          )}\n        </dialog>\n      </DrawerContext.Provider>\n    );\n  },\n);\n\nDrawer.displayName = 'Drawer';\n\nexport const DrawerHeader = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => {\n    const styles = drawerRecipe();\n    return <div ref={ref} {...props} className={mergeClassName(styles.header, className)} />;\n  },\n);\nDrawerHeader.displayName = 'DrawerHeader';\n\ntype DrawerTitleProps = ComponentPropsWithoutRef<'h2'> & { as?: ElementType };\n\nexport const DrawerTitle = forwardRef<HTMLHeadingElement, DrawerTitleProps>(\n  ({ className, as: Comp = 'h2', ...props }, ref) => {\n    const { titleId, registerTitle } = useDrawer();\n    const styles = drawerRecipe();\n    useLayoutEffect(() => {\n      registerTitle(true);\n      return () => registerTitle(false);\n    }, [registerTitle]);\n    return (\n      <Comp ref={ref} id={titleId} {...props} className={mergeClassName(styles.title, className)} />\n    );\n  },\n);\nDrawerTitle.displayName = 'DrawerTitle';\n\nexport const DrawerBody = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, children, ...props }, ref) => {\n    const { descriptionId, registerDescription } = useDrawer();\n    const styles = drawerRecipe();\n    const hasContent = children != null && children !== false;\n    useLayoutEffect(() => {\n      registerDescription(hasContent);\n      return () => registerDescription(false);\n    }, [hasContent, registerDescription]);\n    return (\n      <div\n        ref={ref}\n        id={descriptionId}\n        {...props}\n        className={mergeClassName(styles.body, className)}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nDrawerBody.displayName = 'DrawerBody';\n\nexport const DrawerFooter = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => {\n    const styles = drawerRecipe();\n    return (\n      <div\n        ref={ref}\n        data-becket-dialog-footer=\"\"\n        {...props}\n        className={mergeClassName(styles.footer, className)}\n      />\n    );\n  },\n);\nDrawerFooter.displayName = 'DrawerFooter';\n\nexport const DrawerClose = forwardRef<HTMLButtonElement, ComponentPropsWithoutRef<'button'>>(\n  ({ className, children = '×', type = 'button', onClick, ...props }, ref) => {\n    const { setOpen } = useDrawer();\n    const styles = drawerRecipe();\n    return (\n      <button\n        ref={ref}\n        type={type}\n        data-becket-dialog-close=\"\"\n        {...props}\n        aria-label={props['aria-label'] ?? 'Close'}\n        className={mergeClassName(styles.close, className)}\n        onClick={(event) => {\n          onClick?.(event);\n          if (!event.defaultPrevented) setOpen(false);\n        }}\n      >\n        {children}\n      </button>\n    );\n  },\n);\nDrawerClose.displayName = 'DrawerClose';\n"],"mappings":"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","names":[]}

package/dist/components/Drawer.test.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { assertNoAxeViolations } from "@becket-ui/a11y";
+import { Button } from "./Button";
+import { Drawer } from "./Drawer";
+function FiltersDrawer({
+  onOpenChange = () => {
+  },
+  role = "dialog"
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      open: true,
+      role,
+      onOpenChange,
+      title: "Filters",
+      footer: /* @__PURE__ */ jsx(Button, { visual: "primary", onClick: () => onOpenChange(false), children: "Done" }),
+      children: "Same a11y as Dialog."
+    }
+  );
+}
+describe("Drawer", () => {
+  it("names the dialog from the title and describes it from the body", () => {
+    render(/* @__PURE__ */ jsx(FiltersDrawer, {}));
+    const dialog = screen.getByRole("dialog", { name: "Filters" });
+    const labelledBy = dialog.getAttribute("aria-labelledby");
+    const describedBy = dialog.getAttribute("aria-describedby");
+    expect(document.getElementById(labelledBy)?.textContent).toBe("Filters");
+    expect(document.getElementById(describedBy)?.textContent).toContain("Same a11y as Dialog");
+  });
+  it("moves initial focus to the footer action, not Close", async () => {
+    render(/* @__PURE__ */ jsx(FiltersDrawer, {}));
+    await waitFor(() => {
+      expect(document.activeElement).toBe(screen.getByRole("button", { name: "Done" }));
+    });
+  });
+  it("does not light-dismiss an alertdialog", () => {
+    const onOpenChange = vi.fn();
+    render(/* @__PURE__ */ jsx(FiltersDrawer, { role: "alertdialog", onOpenChange }));
+    fireEvent.click(screen.getByRole("alertdialog", { name: "Filters" }));
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+  it("has no axe violations when open", async () => {
+    const { container } = render(/* @__PURE__ */ jsx(FiltersDrawer, {}));
+    await assertNoAxeViolations(container);
+  });
+});
+//# sourceMappingURL=Drawer.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Drawer.test.tsx"],"sourcesContent":["import { describe, expect, it, vi } from 'vitest';\nimport { fireEvent, render, screen, waitFor } from '@testing-library/react';\nimport { assertNoAxeViolations } from '@becket-ui/a11y';\n\nimport { Button } from './Button';\nimport { Drawer } from './Drawer';\n\nfunction FiltersDrawer({\n  onOpenChange = () => {},\n  role = 'dialog' as 'dialog' | 'alertdialog',\n}: {\n  onOpenChange?: (open: boolean) => void;\n  role?: 'dialog' | 'alertdialog';\n}) {\n  return (\n    <Drawer\n      open\n      role={role}\n      onOpenChange={onOpenChange}\n      title=\"Filters\"\n      footer={\n        <Button visual=\"primary\" onClick={() => onOpenChange(false)}>\n          Done\n        </Button>\n      }\n    >\n      Same a11y as Dialog.\n    </Drawer>\n  );\n}\n\ndescribe('Drawer', () => {\n  it('names the dialog from the title and describes it from the body', () => {\n    render(<FiltersDrawer />);\n    const dialog = screen.getByRole('dialog', { name: 'Filters' });\n    const labelledBy = dialog.getAttribute('aria-labelledby');\n    const describedBy = dialog.getAttribute('aria-describedby');\n    expect(document.getElementById(labelledBy as string)?.textContent).toBe('Filters');\n    expect(document.getElementById(describedBy as string)?.textContent).toContain('Same a11y as Dialog');\n  });\n\n  it('moves initial focus to the footer action, not Close', async () => {\n    render(<FiltersDrawer />);\n    await waitFor(() => {\n      expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Done' }));\n    });\n  });\n\n  it('does not light-dismiss an alertdialog', () => {\n    const onOpenChange = vi.fn();\n    render(<FiltersDrawer role=\"alertdialog\" onOpenChange={onOpenChange} />);\n    fireEvent.click(screen.getByRole('alertdialog', { name: 'Filters' }));\n    expect(onOpenChange).not.toHaveBeenCalled();\n  });\n\n  it('has no axe violations when open', async () => {\n    const { container } = render(<FiltersDrawer />);\n    await assertNoAxeViolations(container);\n  });\n});\n"],"mappings":"AAqBQ;AArBR,SAAS,UAAU,QAAQ,IAAI,UAAU;AACzC,SAAS,WAAW,QAAQ,QAAQ,eAAe;AACnD,SAAS,6BAA6B;AAEtC,SAAS,cAAc;AACvB,SAAS,cAAc;AAEvB,SAAS,cAAc;AAAA,EACrB,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,OAAO;AACT,GAGG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA,OAAM;AAAA,MACN,QACE,oBAAC,UAAO,QAAO,WAAU,SAAS,MAAM,aAAa,KAAK,GAAG,kBAE7D;AAAA,MAEH;AAAA;AAAA,EAED;AAEJ;AAEA,SAAS,UAAU,MAAM;AACvB,KAAG,kEAAkE,MAAM;AACzE,WAAO,oBAAC,iBAAc,CAAE;AACxB,UAAM,SAAS,OAAO,UAAU,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7D,UAAM,aAAa,OAAO,aAAa,iBAAiB;AACxD,UAAM,cAAc,OAAO,aAAa,kBAAkB;AAC1D,WAAO,SAAS,eAAe,UAAoB,GAAG,WAAW,EAAE,KAAK,SAAS;AACjF,WAAO,SAAS,eAAe,WAAqB,GAAG,WAAW,EAAE,UAAU,qBAAqB;AAAA,EACrG,CAAC;AAED,KAAG,uDAAuD,YAAY;AACpE,WAAO,oBAAC,iBAAc,CAAE;AACxB,UAAM,QAAQ,MAAM;AAClB,aAAO,SAAS,aAAa,EAAE,KAAK,OAAO,UAAU,UAAU,EAAE,MAAM,OAAO,CAAC,CAAC;AAAA,IAClF,CAAC;AAAA,EACH,CAAC;AAED,KAAG,yCAAyC,MAAM;AAChD,UAAM,eAAe,GAAG,GAAG;AAC3B,WAAO,oBAAC,iBAAc,MAAK,eAAc,cAA4B,CAAE;AACvE,cAAU,MAAM,OAAO,UAAU,eAAe,EAAE,MAAM,UAAU,CAAC,CAAC;AACpE,WAAO,YAAY,EAAE,IAAI,iBAAiB;AAAA,EAC5C,CAAC;AAED,KAAG,mCAAmC,YAAY;AAChD,UAAM,EAAE,UAAU,IAAI,OAAO,oBAAC,iBAAc,CAAE;AAC9C,UAAM,sBAAsB,SAAS;AAAA,EACvC,CAAC;AACH,CAAC;","names":[]}

package/dist/components/Field.d.ts

@@ -0,0 +1,37 @@
+import { type ComponentPropsWithoutRef, type InputHTMLAttributes, type LabelHTMLAttributes, type ReactNode } from 'react';
+export type FieldSize = 'sm' | 'md' | 'lg';
+export type FieldContextValue = {
+    id: string;
+    invalid: boolean;
+    size: FieldSize;
+    helperId: string;
+    errorId: string;
+    describedBy?: string;
+};
+export declare function useField(): FieldContextValue;
+export declare function useOptionalField(): FieldContextValue | null;
+export type FieldProps = ComponentPropsWithoutRef<'div'> & {
+    size?: FieldSize;
+    invalid?: boolean;
+    fullWidth?: boolean;
+    children?: ReactNode;
+};
+export declare const Field: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    size?: FieldSize;
+    invalid?: boolean;
+    fullWidth?: boolean;
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+type FieldLabelProps = LabelHTMLAttributes<HTMLLabelElement>;
+export declare const FieldLabel: import("react").ForwardRefExoticComponent<FieldLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const FieldHelper: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const FieldError: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+type FieldControlProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+/** Native text input wired to the parent Field (id, aria, size, invalid). */
+export declare const FieldControl: import("react").ForwardRefExoticComponent<FieldControlProps & import("react").RefAttributes<HTMLInputElement>>;
+type FieldSelectProps = Omit<ComponentPropsWithoutRef<'select'>, 'size'>;
+export declare const FieldSelect: import("react").ForwardRefExoticComponent<FieldSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+type FieldTextareaProps = Omit<ComponentPropsWithoutRef<'textarea'>, 'size'>;
+export declare const FieldTextarea: import("react").ForwardRefExoticComponent<FieldTextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};
+//# sourceMappingURL=Field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/components/Field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQL,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAeF,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AAMD,wBAAgB,gBAAgB,IAAI,iBAAiB,GAAG,IAAI,CAG3D;AAcD,MAAM,MAAM,UAAU,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACzD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,KAAK;WANT,SAAS;cACN,OAAO;gBACL,OAAO;eACR,SAAS;kDAsCrB,CAAC;AAIF,KAAK,eAAe,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE7D,eAAO,MAAM,UAAU,8GAQtB,CAAC;AAMF,eAAO,MAAM,WAAW,8MAiBvB,CAAC;AAIF,eAAO,MAAM,UAAU,8MAkBtB,CAAC;AAIF,KAAK,iBAAiB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAE7E,6EAA6E;AAC7E,eAAO,MAAM,YAAY,gHAexB,CAAC;AAIF,KAAK,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAC;AAEzE,eAAO,MAAM,WAAW,gHAevB,CAAC;AAIF,KAAK,kBAAkB,GAAG,IAAI,CAAC,wBAAwB,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,CAAC;AAE7E,eAAO,MAAM,aAAa,oHAezB,CAAC"}