@becket-ui/react 0.1.0

package/dist/components/Field.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useState
+} from "react";
+import { field, selectRecipe, textFieldRecipe, textareaRecipe } from "@becket-ui/tokens/recipes";
+const FieldContext = createContext(null);
+function toPublicField(ctx) {
+  const { registerDescribedBy: _register, ...publicCtx } = ctx;
+  return publicCtx;
+}
+function useField() {
+  const ctx = useOptionalFieldInternal();
+  if (!ctx) {
+    throw new Error("useField must be used within Field");
+  }
+  return toPublicField(ctx);
+}
+function useOptionalFieldInternal() {
+  return useContext(FieldContext);
+}
+function useOptionalField() {
+  const ctx = useOptionalFieldInternal();
+  return ctx ? toPublicField(ctx) : null;
+}
+function useFieldInternal() {
+  const ctx = useOptionalFieldInternal();
+  if (!ctx) {
+    throw new Error("useField must be used within Field");
+  }
+  return ctx;
+}
+function mergeClassName(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const Field = forwardRef(
+  ({
+    size = "md",
+    invalid = false,
+    fullWidth = false,
+    id: idProp,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const autoId = useId();
+    const id = idProp ?? autoId;
+    const helperId = `${id}-helper`;
+    const errorId = `${id}-error`;
+    const [slots, setSlots] = useState({ helper: false, error: false });
+    const registerDescribedBy = useCallback((slot, present) => {
+      setSlots((prev) => prev[slot] === present ? prev : { ...prev, [slot]: present });
+    }, []);
+    const describedBy = invalid && slots.error ? errorId : slots.helper ? helperId : void 0;
+    const styles = field({ size, fullWidth });
+    return /* @__PURE__ */ jsx(
+      FieldContext.Provider,
+      {
+        value: { id, invalid, size, helperId, errorId, describedBy, registerDescribedBy },
+        children: /* @__PURE__ */ jsx("div", { ref, ...props, className: mergeClassName(styles.root, className), children })
+      }
+    );
+  }
+);
+Field.displayName = "Field";
+const FieldLabel = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { id, size } = useField();
+    const styles = field({ size });
+    return /* @__PURE__ */ jsx("label", { ref, htmlFor: id, ...props, className: mergeClassName(styles.label, className) });
+  }
+);
+FieldLabel.displayName = "FieldLabel";
+const FieldHelper = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { size, helperId, registerDescribedBy } = useFieldInternal();
+    const styles = field({ size });
+    useLayoutEffect(() => {
+      registerDescribedBy("helper", true);
+      return () => registerDescribedBy("helper", false);
+    }, [registerDescribedBy]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        id: helperId,
+        ...props,
+        className: mergeClassName(styles.helper, className)
+      }
+    );
+  }
+);
+FieldHelper.displayName = "FieldHelper";
+const FieldError = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { size, errorId, registerDescribedBy } = useFieldInternal();
+    const styles = field({ size });
+    useLayoutEffect(() => {
+      registerDescribedBy("error", true);
+      return () => registerDescribedBy("error", false);
+    }, [registerDescribedBy]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        id: errorId,
+        role: "alert",
+        ...props,
+        className: mergeClassName(styles.error, className)
+      }
+    );
+  }
+);
+FieldError.displayName = "FieldError";
+const FieldControl = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { id, invalid, size, describedBy } = useField();
+    const controlClass = textFieldRecipe({ size, invalid });
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        id,
+        "aria-invalid": invalid || void 0,
+        "aria-describedby": describedBy,
+        ...props,
+        className: mergeClassName(controlClass, className)
+      }
+    );
+  }
+);
+FieldControl.displayName = "FieldControl";
+const FieldSelect = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { id, invalid, size, describedBy } = useField();
+    const controlClass = selectRecipe({ size, invalid });
+    return /* @__PURE__ */ jsx(
+      "select",
+      {
+        ref,
+        id,
+        "aria-invalid": invalid || void 0,
+        "aria-describedby": describedBy,
+        ...props,
+        className: mergeClassName(controlClass, className)
+      }
+    );
+  }
+);
+FieldSelect.displayName = "FieldSelect";
+const FieldTextarea = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { id, invalid, size, describedBy } = useField();
+    const controlClass = textareaRecipe({ size, invalid });
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        id,
+        "aria-invalid": invalid || void 0,
+        "aria-describedby": describedBy,
+        ...props,
+        className: mergeClassName(controlClass, className)
+      }
+    );
+  }
+);
+FieldTextarea.displayName = "FieldTextarea";
+export {
+  Field,
+  FieldControl,
+  FieldError,
+  FieldHelper,
+  FieldLabel,
+  FieldSelect,
+  FieldTextarea,
+  useField,
+  useOptionalField
+};
+//# sourceMappingURL=Field.js.map

package/dist/components/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Field.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useId,\n  useLayoutEffect,\n  useState,\n  type ComponentPropsWithoutRef,\n  type InputHTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { field, selectRecipe, textFieldRecipe, textareaRecipe } from '@becket-ui/tokens/recipes';\n\nexport type FieldSize = 'sm' | 'md' | 'lg';\n\nexport type FieldContextValue = {\n  id: string;\n  invalid: boolean;\n  size: FieldSize;\n  helperId: string;\n  errorId: string;\n  describedBy?: string;\n};\n\ntype DescribedBySlot = 'helper' | 'error';\n\ntype FieldContextInternal = FieldContextValue & {\n  registerDescribedBy: (slot: DescribedBySlot, present: boolean) => void;\n};\n\nconst FieldContext = createContext<FieldContextInternal | null>(null);\n\nfunction toPublicField(ctx: FieldContextInternal): FieldContextValue {\n  const { registerDescribedBy: _register, ...publicCtx } = ctx;\n  return publicCtx;\n}\n\nexport function useField(): FieldContextValue {\n  const ctx = useOptionalFieldInternal();\n  if (!ctx) {\n    throw new Error('useField must be used within Field');\n  }\n  return toPublicField(ctx);\n}\n\nfunction useOptionalFieldInternal(): FieldContextInternal | null {\n  return useContext(FieldContext);\n}\n\nexport function useOptionalField(): FieldContextValue | null {\n  const ctx = useOptionalFieldInternal();\n  return ctx ? toPublicField(ctx) : null;\n}\n\nfunction useFieldInternal(): FieldContextInternal {\n  const ctx = useOptionalFieldInternal();\n  if (!ctx) {\n    throw new Error('useField must be used within Field');\n  }\n  return ctx;\n}\n\nfunction mergeClassName(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nexport type FieldProps = ComponentPropsWithoutRef<'div'> & {\n  size?: FieldSize;\n  invalid?: boolean;\n  fullWidth?: boolean;\n  children?: ReactNode;\n};\n\nexport const Field = forwardRef<HTMLDivElement, FieldProps>(\n  (\n    {\n      size = 'md',\n      invalid = false,\n      fullWidth = false,\n      id: idProp,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const autoId = useId();\n    const id = idProp ?? autoId;\n    const helperId = `${id}-helper`;\n    const errorId = `${id}-error`;\n    const [slots, setSlots] = useState({ helper: false, error: false });\n    const registerDescribedBy = useCallback((slot: DescribedBySlot, present: boolean) => {\n      setSlots((prev) => (prev[slot] === present ? prev : { ...prev, [slot]: present }));\n    }, []);\n    const describedBy =\n      invalid && slots.error ? errorId : slots.helper ? helperId : undefined;\n    const styles = field({ size, fullWidth });\n\n    return (\n      <FieldContext.Provider\n        value={{ id, invalid, size, helperId, errorId, describedBy, registerDescribedBy }}\n      >\n        <div ref={ref} {...props} className={mergeClassName(styles.root, className)}>\n          {children}\n        </div>\n      </FieldContext.Provider>\n    );\n  },\n);\n\nField.displayName = 'Field';\n\ntype FieldLabelProps = LabelHTMLAttributes<HTMLLabelElement>;\n\nexport const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(\n  ({ className, ...props }, ref) => {\n    const { id, size } = useField();\n    const styles = field({ size });\n    return (\n      <label ref={ref} htmlFor={id} {...props} className={mergeClassName(styles.label, className)} />\n    );\n  },\n);\n\nFieldLabel.displayName = 'FieldLabel';\n\ntype FieldHelperProps = ComponentPropsWithoutRef<'span'>;\n\nexport const FieldHelper = forwardRef<HTMLSpanElement, FieldHelperProps>(\n  ({ className, ...props }, ref) => {\n    const { size, helperId, registerDescribedBy } = useFieldInternal();\n    const styles = field({ size });\n    useLayoutEffect(() => {\n      registerDescribedBy('helper', true);\n      return () => registerDescribedBy('helper', false);\n    }, [registerDescribedBy]);\n    return (\n      <span\n        ref={ref}\n        id={helperId}\n        {...props}\n        className={mergeClassName(styles.helper, className)}\n      />\n    );\n  },\n);\n\nFieldHelper.displayName = 'FieldHelper';\n\nexport const FieldError = forwardRef<HTMLSpanElement, FieldHelperProps>(\n  ({ className, ...props }, ref) => {\n    const { size, errorId, registerDescribedBy } = useFieldInternal();\n    const styles = field({ size });\n    useLayoutEffect(() => {\n      registerDescribedBy('error', true);\n      return () => registerDescribedBy('error', false);\n    }, [registerDescribedBy]);\n    return (\n      <span\n        ref={ref}\n        id={errorId}\n        role=\"alert\"\n        {...props}\n        className={mergeClassName(styles.error, className)}\n      />\n    );\n  },\n);\n\nFieldError.displayName = 'FieldError';\n\ntype FieldControlProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;\n\n/** Native text input wired to the parent Field (id, aria, size, invalid). */\nexport const FieldControl = forwardRef<HTMLInputElement, FieldControlProps>(\n  ({ className, ...props }, ref) => {\n    const { id, invalid, size, describedBy } = useField();\n    const controlClass = textFieldRecipe({ size, invalid });\n    return (\n      <input\n        ref={ref}\n        id={id}\n        aria-invalid={invalid || undefined}\n        aria-describedby={describedBy}\n        {...props}\n        className={mergeClassName(controlClass, className)}\n      />\n    );\n  },\n);\n\nFieldControl.displayName = 'FieldControl';\n\ntype FieldSelectProps = Omit<ComponentPropsWithoutRef<'select'>, 'size'>;\n\nexport const FieldSelect = forwardRef<HTMLSelectElement, FieldSelectProps>(\n  ({ className, ...props }, ref) => {\n    const { id, invalid, size, describedBy } = useField();\n    const controlClass = selectRecipe({ size, invalid });\n    return (\n      <select\n        ref={ref}\n        id={id}\n        aria-invalid={invalid || undefined}\n        aria-describedby={describedBy}\n        {...props}\n        className={mergeClassName(controlClass, className)}\n      />\n    );\n  },\n);\n\nFieldSelect.displayName = 'FieldSelect';\n\ntype FieldTextareaProps = Omit<ComponentPropsWithoutRef<'textarea'>, 'size'>;\n\nexport const FieldTextarea = forwardRef<HTMLTextAreaElement, FieldTextareaProps>(\n  ({ className, ...props }, ref) => {\n    const { id, invalid, size, describedBy } = useField();\n    const controlClass = textareaRecipe({ size, invalid });\n    return (\n      <textarea\n        ref={ref}\n        id={id}\n        aria-invalid={invalid || undefined}\n        aria-describedby={describedBy}\n        {...props}\n        className={mergeClassName(controlClass, className)}\n      />\n    );\n  },\n);\n\nFieldTextarea.displayName = 'FieldTextarea';\n"],"mappings":"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","names":[]}

package/dist/components/Field.test.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Field } from "./Field";
+import { Radio, RadioGroup } from "./Radio";
+import { TextField } from "./TextField";
+describe("Field describedBy", () => {
+  it("omits aria-describedby when TextField has no helper", () => {
+    render(/* @__PURE__ */ jsx(TextField, { label: "Offset" }));
+    expect(screen.getByLabelText("Offset").getAttribute("aria-describedby")).toBeNull();
+  });
+  it("points at FieldHelper when valid with helperText", () => {
+    render(/* @__PURE__ */ jsx(TextField, { label: "Offset", helperText: "Optional hint" }));
+    const describedBy = screen.getByLabelText("Offset").getAttribute("aria-describedby");
+    expect(describedBy).toBeTruthy();
+    expect(document.getElementById(describedBy)?.textContent).toBe("Optional hint");
+  });
+  it("points at FieldError when invalid with helperText", () => {
+    render(/* @__PURE__ */ jsx(TextField, { label: "Email", invalid: true, helperText: "Enter a valid email address" }));
+    const describedBy = screen.getByLabelText("Email").getAttribute("aria-describedby");
+    expect(describedBy).toBeTruthy();
+    const node = document.getElementById(describedBy);
+    expect(node?.getAttribute("role")).toBe("alert");
+    expect(node?.textContent).toBe("Enter a valid email address");
+  });
+  it("does not give RadioGroup a dangling describedBy", () => {
+    render(
+      /* @__PURE__ */ jsx(Field, { children: /* @__PURE__ */ jsx(RadioGroup, { legend: "Side", children: /* @__PURE__ */ jsx(Radio, { value: "yes", label: "Yes" }) }) })
+    );
+    expect(screen.getByRole("group", { name: "Side" }).getAttribute("aria-describedby")).toBeNull();
+  });
+});
+//# sourceMappingURL=Field.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Field.test.tsx"],"sourcesContent":["import { describe, expect, it } from 'vitest';\nimport { render, screen } from '@testing-library/react';\n\nimport { Field } from './Field';\nimport { Radio, RadioGroup } from './Radio';\nimport { TextField } from './TextField';\n\ndescribe('Field describedBy', () => {\n  it('omits aria-describedby when TextField has no helper', () => {\n    render(<TextField label=\"Offset\" />);\n    expect(screen.getByLabelText('Offset').getAttribute('aria-describedby')).toBeNull();\n  });\n\n  it('points at FieldHelper when valid with helperText', () => {\n    render(<TextField label=\"Offset\" helperText=\"Optional hint\" />);\n    const describedBy = screen.getByLabelText('Offset').getAttribute('aria-describedby');\n    expect(describedBy).toBeTruthy();\n    expect(document.getElementById(describedBy as string)?.textContent).toBe('Optional hint');\n  });\n\n  it('points at FieldError when invalid with helperText', () => {\n    render(<TextField label=\"Email\" invalid helperText=\"Enter a valid email address\" />);\n    const describedBy = screen.getByLabelText('Email').getAttribute('aria-describedby');\n    expect(describedBy).toBeTruthy();\n    const node = document.getElementById(describedBy as string);\n    expect(node?.getAttribute('role')).toBe('alert');\n    expect(node?.textContent).toBe('Enter a valid email address');\n  });\n\n  it('does not give RadioGroup a dangling describedBy', () => {\n    render(\n      <Field>\n        <RadioGroup legend=\"Side\">\n          <Radio value=\"yes\" label=\"Yes\" />\n        </RadioGroup>\n      </Field>,\n    );\n    expect(screen.getByRole('group', { name: 'Side' }).getAttribute('aria-describedby')).toBeNull();\n  });\n});\n"],"mappings":"AASW;AATX,SAAS,UAAU,QAAQ,UAAU;AACrC,SAAS,QAAQ,cAAc;AAE/B,SAAS,aAAa;AACtB,SAAS,OAAO,kBAAkB;AAClC,SAAS,iBAAiB;AAE1B,SAAS,qBAAqB,MAAM;AAClC,KAAG,uDAAuD,MAAM;AAC9D,WAAO,oBAAC,aAAU,OAAM,UAAS,CAAE;AACnC,WAAO,OAAO,eAAe,QAAQ,EAAE,aAAa,kBAAkB,CAAC,EAAE,SAAS;AAAA,EACpF,CAAC;AAED,KAAG,oDAAoD,MAAM;AAC3D,WAAO,oBAAC,aAAU,OAAM,UAAS,YAAW,iBAAgB,CAAE;AAC9D,UAAM,cAAc,OAAO,eAAe,QAAQ,EAAE,aAAa,kBAAkB;AACnF,WAAO,WAAW,EAAE,WAAW;AAC/B,WAAO,SAAS,eAAe,WAAqB,GAAG,WAAW,EAAE,KAAK,eAAe;AAAA,EAC1F,CAAC;AAED,KAAG,qDAAqD,MAAM;AAC5D,WAAO,oBAAC,aAAU,OAAM,SAAQ,SAAO,MAAC,YAAW,+BAA8B,CAAE;AACnF,UAAM,cAAc,OAAO,eAAe,OAAO,EAAE,aAAa,kBAAkB;AAClF,WAAO,WAAW,EAAE,WAAW;AAC/B,UAAM,OAAO,SAAS,eAAe,WAAqB;AAC1D,WAAO,MAAM,aAAa,MAAM,CAAC,EAAE,KAAK,OAAO;AAC/C,WAAO,MAAM,WAAW,EAAE,KAAK,6BAA6B;AAAA,EAC9D,CAAC;AAED,KAAG,mDAAmD,MAAM;AAC1D;AAAA,MACE,oBAAC,SACC,8BAAC,cAAW,QAAO,QACjB,8BAAC,SAAM,OAAM,OAAM,OAAM,OAAM,GACjC,GACF;AAAA,IACF;AACA,WAAO,OAAO,UAAU,SAAS,EAAE,MAAM,OAAO,CAAC,EAAE,aAAa,kBAAkB,CAAC,EAAE,SAAS;AAAA,EAChG,CAAC;AACH,CAAC;","names":[]}

package/dist/components/Flex.d.ts

@@ -0,0 +1,38 @@
+import { type ComponentPropsWithoutRef, type ElementType } from 'react';
+import { flex } from '@becket-ui/tokens/patterns';
+import { type GradientBorderToken } from '../helpers/gradientBorder';
+import { type GapValue, type ResponsiveValue } from '../helpers/responsive';
+type FlexOptions = NonNullable<Parameters<typeof flex>[0]>;
+type AlignVariant = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type JustifyVariant = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+type BorderProp = FlexOptions['border'] | GradientBorderToken;
+export type FlexProps = ComponentPropsWithoutRef<'div'> & {
+    direction?: FlexOptions['direction'];
+    gap?: GapValue;
+    align?: AlignVariant;
+    justify?: JustifyVariant;
+    wrap?: FlexOptions['wrap'];
+    basis?: FlexOptions['basis'];
+    grow?: FlexOptions['grow'];
+    shrink?: FlexOptions['shrink'];
+    inline?: boolean;
+    border?: BorderProp;
+    order?: ResponsiveValue<number>;
+    as?: ElementType;
+};
+export declare const Flex: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    direction?: FlexOptions['direction'];
+    gap?: GapValue;
+    align?: AlignVariant;
+    justify?: JustifyVariant;
+    wrap?: FlexOptions['wrap'];
+    basis?: FlexOptions['basis'];
+    grow?: FlexOptions['grow'];
+    shrink?: FlexOptions['shrink'];
+    inline?: boolean;
+    border?: BorderProp;
+    order?: ResponsiveValue<number>;
+    as?: ElementType;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Flex.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../src/components/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,wBAAwB,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,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;AAC3D,KAAK,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;AACxE,KAAK,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACnF,KAAK,UAAU,GAAG,WAAW,CAAC,QAAQ,CAAC,GAAG,mBAAmB,CAAC;AAuB9D,MAAM,MAAM,SAAS,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACxD,SAAS,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACrC,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAChC,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,IAAI;gBAdH,WAAW,CAAC,WAAW,CAAC;UAC9B,QAAQ;YACN,YAAY;cACV,cAAc;WACjB,WAAW,CAAC,MAAM,CAAC;YAClB,WAAW,CAAC,OAAO,CAAC;WACrB,WAAW,CAAC,MAAM,CAAC;aACjB,WAAW,CAAC,QAAQ,CAAC;aACrB,OAAO;aACP,UAAU;YACX,eAAe,CAAC,MAAM,CAAC;SAC1B,WAAW;kDA8DjB,CAAC"}

package/dist/components/Flex.js

@@ -0,0 +1,85 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { css } from "@becket-ui/tokens/css";
+import { flex } from "@becket-ui/tokens/patterns";
+import {
+  getGradientBorderClassName,
+  isGradientBorderToken
+} from "../helpers/gradientBorder";
+import { normalizeGapValue, normalizeResponsiveValue } from "../helpers/responsive";
+const ALIGN_MAP = {
+  start: "start",
+  center: "center",
+  end: "end",
+  stretch: "stretch",
+  baseline: "baseline"
+};
+const JUSTIFY_MAP = {
+  start: "start",
+  center: "center",
+  end: "end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly"
+};
+function mergeClassName(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const Flex = forwardRef(
+  ({
+    direction = "row",
+    gap = "md",
+    align,
+    justify,
+    wrap,
+    basis,
+    grow,
+    shrink,
+    inline = false,
+    border,
+    order,
+    as: Component = "div",
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const isGradientBorder = isGradientBorderToken(border);
+    const resolvedGap = normalizeGapValue(gap);
+    const resolvedDirection = normalizeResponsiveValue(direction);
+    const resolvedOrder = order != null ? normalizeResponsiveValue(order) : void 0;
+    const recipeClassName = css({
+      ...flex.raw({
+        direction: resolvedDirection,
+        gap: resolvedGap,
+        ...align && { align: ALIGN_MAP[align] },
+        ...justify && { justify: JUSTIFY_MAP[justify] },
+        ...wrap != null && { wrap },
+        ...basis != null && { basis },
+        ...grow != null && { grow },
+        ...shrink != null && { shrink },
+        ...border && !isGradientBorder && { border },
+        ...inline && { display: "inline-flex" }
+      }),
+      ...resolvedOrder != null && { order: resolvedOrder }
+    });
+    const gradientBorderClassName = isGradientBorder ? getGradientBorderClassName(border) : void 0;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        ...props,
+        style,
+        className: mergeClassName(
+          recipeClassName,
+          gradientBorderClassName,
+          className
+        )
+      }
+    );
+  }
+);
+Flex.displayName = "Flex";
+export {
+  Flex
+};
+//# sourceMappingURL=Flex.js.map

package/dist/components/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Flex.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ElementType } from 'react';\nimport { css } from '@becket-ui/tokens/css';\nimport { flex } from '@becket-ui/tokens/patterns';\nimport {\n  getGradientBorderClassName,\n  isGradientBorderToken,\n  type GradientBorderToken,\n} from '../helpers/gradientBorder';\nimport { normalizeGapValue, normalizeResponsiveValue, type GapValue, type ResponsiveValue } from '../helpers/responsive';\n\ntype FlexOptions = NonNullable<Parameters<typeof flex>[0]>;\ntype AlignVariant = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\ntype JustifyVariant = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\ntype BorderProp = FlexOptions['border'] | GradientBorderToken;\n\nconst ALIGN_MAP: Record<AlignVariant, string> = {\n  start: 'start',\n  center: 'center',\n  end: 'end',\n  stretch: 'stretch',\n  baseline: 'baseline',\n};\n\nconst JUSTIFY_MAP: Record<JustifyVariant, string> = {\n  start: 'start',\n  center: 'center',\n  end: 'end',\n  between: 'space-between',\n  around: 'space-around',\n  evenly: 'space-evenly',\n};\n\nfunction mergeClassName(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nexport type FlexProps = ComponentPropsWithoutRef<'div'> & {\n  direction?: FlexOptions['direction'];\n  gap?: GapValue;\n  align?: AlignVariant;\n  justify?: JustifyVariant;\n  wrap?: FlexOptions['wrap'];\n  basis?: FlexOptions['basis'];\n  grow?: FlexOptions['grow'];\n  shrink?: FlexOptions['shrink'];\n  inline?: boolean;\n  border?: BorderProp;\n  order?: ResponsiveValue<number>;\n  as?: ElementType;\n};\n\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>(\n  (\n    {\n      direction = 'row',\n      gap = 'md',\n      align,\n      justify,\n      wrap,\n      basis,\n      grow,\n      shrink,\n      inline = false,\n      border,\n      order,\n      as: Component = 'div',\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isGradientBorder = isGradientBorderToken(border);\n    const resolvedGap = normalizeGapValue(gap);\n    const resolvedDirection = normalizeResponsiveValue(direction);\n    const resolvedOrder = order != null ? normalizeResponsiveValue(order) : undefined;\n\n    const recipeClassName = css({\n      ...flex.raw({\n        direction: resolvedDirection as FlexOptions['direction'],\n        gap: resolvedGap as FlexOptions['gap'],\n        ...(align && { align: ALIGN_MAP[align] }),\n        ...(justify && { justify: JUSTIFY_MAP[justify] }),\n        ...(wrap != null && { wrap }),\n        ...(basis != null && { basis }),\n        ...(grow != null && { grow }),\n        ...(shrink != null && { shrink }),\n        ...(border && !isGradientBorder && { border }),\n        ...(inline && { display: 'inline-flex' }),\n      }),\n      ...(resolvedOrder != null && { order: resolvedOrder }),\n    });\n\n    const gradientBorderClassName = isGradientBorder\n      ? getGradientBorderClassName(border)\n      : undefined;\n\n    return (\n      <Component\n        ref={ref}\n        {...props}\n        style={style}\n        className={mergeClassName(\n          recipeClassName,\n          gradientBorderClassName,\n          className,\n        )}\n      />\n    );\n  },\n);\n\nFlex.displayName = 'Flex';\n"],"mappings":"AAkGM;AAlGN,SAAS,kBAAmE;AAC5E,SAAS,WAAW;AACpB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,mBAAmB,gCAAqE;AAOjG,MAAM,YAA0C;AAAA,EAC9C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AAAA,EACT,UAAU;AACZ;AAEA,MAAM,cAA8C;AAAA,EAClD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV;AAEA,SAAS,kBAAkB,SAAyC;AAClE,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;AAiBO,MAAM,OAAO;AAAA,EAClB,CACE;AAAA,IACE,YAAY;AAAA,IACZ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,IAAI,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,mBAAmB,sBAAsB,MAAM;AACrD,UAAM,cAAc,kBAAkB,GAAG;AACzC,UAAM,oBAAoB,yBAAyB,SAAS;AAC5D,UAAM,gBAAgB,SAAS,OAAO,yBAAyB,KAAK,IAAI;AAExE,UAAM,kBAAkB,IAAI;AAAA,MAC1B,GAAG,KAAK,IAAI;AAAA,QACV,WAAW;AAAA,QACX,KAAK;AAAA,QACL,GAAI,SAAS,EAAE,OAAO,UAAU,KAAK,EAAE;AAAA,QACvC,GAAI,WAAW,EAAE,SAAS,YAAY,OAAO,EAAE;AAAA,QAC/C,GAAI,QAAQ,QAAQ,EAAE,KAAK;AAAA,QAC3B,GAAI,SAAS,QAAQ,EAAE,MAAM;AAAA,QAC7B,GAAI,QAAQ,QAAQ,EAAE,KAAK;AAAA,QAC3B,GAAI,UAAU,QAAQ,EAAE,OAAO;AAAA,QAC/B,GAAI,UAAU,CAAC,oBAAoB,EAAE,OAAO;AAAA,QAC5C,GAAI,UAAU,EAAE,SAAS,cAAc;AAAA,MACzC,CAAC;AAAA,MACD,GAAI,iBAAiB,QAAQ,EAAE,OAAO,cAAc;AAAA,IACtD,CAAC;AAED,UAAM,0BAA0B,mBAC5B,2BAA2B,MAAM,IACjC;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;","names":[]}

package/dist/components/Heading.d.ts

@@ -0,0 +1,14 @@
+import { type ElementType } from 'react';
+type HeadingSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+export type HeadingProps = React.ComponentPropsWithoutRef<'h2'> & {
+    size?: HeadingSize;
+    withGradient?: boolean;
+    as?: ElementType;
+};
+export declare const Heading: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    size?: HeadingSize;
+    withGradient?: boolean;
+    as?: ElementType;
+} & import("react").RefAttributes<HTMLHeadingElement>>;
+export {};
+//# sourceMappingURL=Heading.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/components/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAGrD,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAErF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG;IAChE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB,CAAC;AAMF,eAAO,MAAM,OAAO;WATX,WAAW;mBACH,OAAO;SACjB,WAAW;sDA+BjB,CAAC"}

package/dist/components/Heading.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { heading as headingRecipe } from "@becket-ui/tokens/recipes";
+function mergeClassName(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const Heading = forwardRef(
+  ({
+    size = "xl",
+    withGradient = false,
+    as: HeadingComponent = "h2",
+    className,
+    ...props
+  }, ref) => {
+    const recipeClassName = headingRecipe({
+      size,
+      withGradient
+    });
+    return /* @__PURE__ */ jsx(
+      HeadingComponent,
+      {
+        ref,
+        ...props,
+        className: mergeClassName(recipeClassName, className)
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
+export {
+  Heading
+};
+//# sourceMappingURL=Heading.js.map

package/dist/components/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Heading.tsx"],"sourcesContent":["import { forwardRef, type ElementType } from 'react';\nimport { heading as headingRecipe } from '@becket-ui/tokens/recipes';\n\ntype HeadingSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';\n\nexport type HeadingProps = React.ComponentPropsWithoutRef<'h2'> & {\n  size?: HeadingSize;\n  withGradient?: boolean;\n  as?: ElementType;\n};\n\nfunction mergeClassName(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(\n  (\n    {\n      size = 'xl',\n      withGradient = false,\n      as: HeadingComponent = 'h2',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const recipeClassName = headingRecipe({\n      size,\n      withGradient,\n    });\n\n    return (\n      <HeadingComponent\n        ref={ref}\n        {...props}\n        className={mergeClassName(recipeClassName, className)}\n      />\n    );\n  },\n);\n\nHeading.displayName = 'Heading';\n"],"mappings":"AAgCM;AAhCN,SAAS,kBAAoC;AAC7C,SAAS,WAAW,qBAAqB;AAUzC,SAAS,kBAAkB,SAAyC;AAClE,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;AAEO,MAAM,UAAU;AAAA,EACrB,CACE;AAAA,IACE,OAAO;AAAA,IACP,eAAe;AAAA,IACf,IAAI,mBAAmB;AAAA,IACvB;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,kBAAkB,cAAc;AAAA,MACpC;AAAA,MACA;AAAA,IACF,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,eAAe,iBAAiB,SAAS;AAAA;AAAA,IACtD;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;","names":[]}

package/dist/components/Hide.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Chakra-style visibility helper.
+ * Uses CSS media queries — no JS flash; single DOM for UI tests.
+ */
+import { type ComponentPropsWithoutRef, type ElementType } from 'react';
+import { type BreakpointAlias } from '../helpers/responsive';
+export type HideProps = ComponentPropsWithoutRef<'div'> & {
+    /** Hide when viewport is **below** this breakpoint (show from breakpoint up). */
+    below?: BreakpointAlias;
+    /** Hide from this breakpoint **and up** (show only below). */
+    from?: BreakpointAlias;
+    /**
+     * When visible, use `display: contents` so the wrapper does not affect flex/grid
+     * (Chakra Show/Hide pattern). Set `false` for a real block box.
+     */
+    asContents?: boolean;
+    as?: ElementType;
+};
+/**
+ * Conditionally hide children by breakpoint.
+ * Prefer over duplicating trees for mobile/desktop — keeps `data-testid` stable.
+ *
+ * @example
+ * <Hide below="desktop">{sidebar}</Hide>
+ * <Hide from="desktop">{mobileOnlyNav}</Hide>
+ */
+export declare const Hide: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /** Hide when viewport is **below** this breakpoint (show from breakpoint up). */
+    below?: BreakpointAlias;
+    /** Hide from this breakpoint **and up** (show only below). */
+    from?: BreakpointAlias;
+    /**
+     * When visible, use `display: contents` so the wrapper does not affect flex/grid
+     * (Chakra Show/Hide pattern). Set `false` for a real block box.
+     */
+    asContents?: boolean;
+    as?: ElementType;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Hide.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hide.d.ts","sourceRoot":"","sources":["../../src/components/Hide.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAc,KAAK,wBAAwB,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAIpF,OAAO,EAA0B,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAerF,MAAM,MAAM,SAAS,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACxD,iFAAiF;IACjF,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,IAAI;IApBf,iFAAiF;YACzE,eAAe;IACvB,8DAA8D;WACvD,eAAe;IACtB;;;OAGG;iBACU,OAAO;SACf,WAAW;kDAiDjB,CAAC"}

package/dist/components/Hide.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { hide } from "@becket-ui/tokens/recipes";
+import { resolveBreakpointAlias } from "../helpers/responsive";
+function mergeClassName(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function asHideBreakpoint(token) {
+  if (token === "sm" || token === "md" || token === "lg" || token === "xl" || token === "2xl") {
+    return token;
+  }
+  return void 0;
+}
+const Hide = forwardRef(
+  ({
+    below,
+    from,
+    asContents = true,
+    as: Component = "div",
+    className,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    if (below && from || !below && !from) {
+      console.warn("Hide: pass exactly one of `below` or `from`.");
+    }
+    const belowBp = below ? asHideBreakpoint(resolveBreakpointAlias(below)) : void 0;
+    const fromBp = from ? asHideBreakpoint(resolveBreakpointAlias(from)) : void 0;
+    const recipeClassName = hide({
+      ...belowBp && { below: belowBp },
+      ...fromBp && { from: fromBp },
+      asContents
+    });
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        ...props,
+        style,
+        className: mergeClassName(recipeClassName, className),
+        children
+      }
+    );
+  }
+);
+Hide.displayName = "Hide";
+export {
+  Hide
+};
+//# sourceMappingURL=Hide.js.map

package/dist/components/Hide.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Hide.tsx"],"sourcesContent":["/**\n * Chakra-style visibility helper.\n * Uses CSS media queries — no JS flash; single DOM for UI tests.\n */\n\nimport { forwardRef, type ComponentPropsWithoutRef, type ElementType } from 'react';\nimport { hide } from '@becket-ui/tokens/recipes';\nimport type { HideVariantProps } from '@becket-ui/tokens/recipes';\n\nimport { resolveBreakpointAlias, type BreakpointAlias } from '../helpers/responsive';\n\nfunction mergeClassName(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\ntype HideBreakpoint = NonNullable<HideVariantProps['below']>;\n\nfunction asHideBreakpoint(token: string): HideBreakpoint | undefined {\n  if (token === 'sm' || token === 'md' || token === 'lg' || token === 'xl' || token === '2xl') {\n    return token;\n  }\n  return undefined;\n}\n\nexport type HideProps = ComponentPropsWithoutRef<'div'> & {\n  /** Hide when viewport is **below** this breakpoint (show from breakpoint up). */\n  below?: BreakpointAlias;\n  /** Hide from this breakpoint **and up** (show only below). */\n  from?: BreakpointAlias;\n  /**\n   * When visible, use `display: contents` so the wrapper does not affect flex/grid\n   * (Chakra Show/Hide pattern). Set `false` for a real block box.\n   */\n  asContents?: boolean;\n  as?: ElementType;\n};\n\n/**\n * Conditionally hide children by breakpoint.\n * Prefer over duplicating trees for mobile/desktop — keeps `data-testid` stable.\n *\n * @example\n * <Hide below=\"desktop\">{sidebar}</Hide>\n * <Hide from=\"desktop\">{mobileOnlyNav}</Hide>\n */\nexport const Hide = forwardRef<HTMLDivElement, HideProps>(\n  (\n    {\n      below,\n      from,\n      asContents = true,\n      as: Component = 'div',\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    if ((below && from) || (!below && !from)) {\n      console.warn('Hide: pass exactly one of `below` or `from`.');\n    }\n\n    const belowBp = below ? asHideBreakpoint(resolveBreakpointAlias(below)) : undefined;\n    const fromBp = from ? asHideBreakpoint(resolveBreakpointAlias(from)) : undefined;\n\n    const recipeClassName = hide({\n      ...(belowBp && { below: belowBp }),\n      ...(fromBp && { from: fromBp }),\n      asContents,\n    });\n\n    return (\n      <Component\n        ref={ref}\n        {...props}\n        style={style}\n        className={mergeClassName(recipeClassName, className)}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nHide.displayName = 'Hide';\n"],"mappings":"AAyEM;AApEN,SAAS,kBAAmE;AAC5E,SAAS,YAAY;AAGrB,SAAS,8BAAoD;AAE7D,SAAS,kBAAkB,SAAyC;AAClE,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;AAIA,SAAS,iBAAiB,OAA2C;AACnE,MAAI,UAAU,QAAQ,UAAU,QAAQ,UAAU,QAAQ,UAAU,QAAQ,UAAU,OAAO;AAC3F,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAuBO,MAAM,OAAO;AAAA,EAClB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,IAAI,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAK,SAAS,QAAU,CAAC,SAAS,CAAC,MAAO;AACxC,cAAQ,KAAK,8CAA8C;AAAA,IAC7D;AAEA,UAAM,UAAU,QAAQ,iBAAiB,uBAAuB,KAAK,CAAC,IAAI;AAC1E,UAAM,SAAS,OAAO,iBAAiB,uBAAuB,IAAI,CAAC,IAAI;AAEvE,UAAM,kBAAkB,KAAK;AAAA,MAC3B,GAAI,WAAW,EAAE,OAAO,QAAQ;AAAA,MAChC,GAAI,UAAU,EAAE,MAAM,OAAO;AAAA,MAC7B;AAAA,IACF,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ;AAAA,QACA,WAAW,eAAe,iBAAiB,SAAS;AAAA,QAEnD;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;","names":[]}

package/dist/components/Link.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentPropsWithoutRef, type ElementType } from 'react';
+type LinkVisual = 'default' | 'muted';
+export type LinkProps = ComponentPropsWithoutRef<'a'> & {
+    visual?: LinkVisual;
+    visited?: boolean;
+    as?: ElementType;
+};
+export declare const Link: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    visual?: LinkVisual;
+    visited?: boolean;
+    as?: ElementType;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};
+//# sourceMappingURL=Link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,wBAAwB,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAGpF,KAAK,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtC,MAAM,MAAM,SAAS,GAAG,wBAAwB,CAAC,GAAG,CAAC,GAAG;IACtD,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB,CAAC;AAMF,eAAO,MAAM,IAAI;aATN,UAAU;cACT,OAAO;SACZ,WAAW;qDAiBjB,CAAC"}

package/dist/components/Link.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { link as linkRecipe } from "@becket-ui/tokens/recipes";
+function mergeClassName(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const Link = forwardRef(
+  ({ visual = "default", visited = false, as: Comp = "a", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        ...props,
+        className: mergeClassName(linkRecipe({ visual, visited }), className)
+      }
+    );
+  }
+);
+Link.displayName = "Link";
+export {
+  Link
+};
+//# sourceMappingURL=Link.js.map

package/dist/components/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Link.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ElementType } from 'react';\nimport { link as linkRecipe } from '@becket-ui/tokens/recipes';\n\ntype LinkVisual = 'default' | 'muted';\n\nexport type LinkProps = ComponentPropsWithoutRef<'a'> & {\n  visual?: LinkVisual;\n  visited?: boolean;\n  as?: ElementType;\n};\n\nfunction mergeClassName(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ visual = 'default', visited = false, as: Comp = 'a', className, ...props }, ref) => {\n    return (\n      <Comp\n        ref={ref}\n        {...props}\n        className={mergeClassName(linkRecipe({ visual, visited }), className)}\n      />\n    );\n  },\n);\n\nLink.displayName = 'Link';\n"],"mappings":"AAkBM;AAlBN,SAAS,kBAAmE;AAC5E,SAAS,QAAQ,kBAAkB;AAUnC,SAAS,kBAAkB,SAAyC;AAClE,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;AAEO,MAAM,OAAO;AAAA,EAClB,CAAC,EAAE,SAAS,WAAW,UAAU,OAAO,IAAI,OAAO,KAAK,WAAW,GAAG,MAAM,GAAG,QAAQ;AACrF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,eAAe,WAAW,EAAE,QAAQ,QAAQ,CAAC,GAAG,SAAS;AAAA;AAAA,IACtE;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;","names":[]}

package/dist/components/Menu.d.ts

@@ -0,0 +1,11 @@
+import { type ButtonHTMLAttributes, type DetailsHTMLAttributes, type ReactNode } from 'react';
+export type MenuProps = Omit<DetailsHTMLAttributes<HTMLDetailsElement>, 'onToggle'> & {
+    label: ReactNode;
+};
+export declare const Menu: import("react").ForwardRefExoticComponent<Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "onToggle"> & {
+    label: ReactNode;
+} & import("react").RefAttributes<HTMLDetailsElement>>;
+type MenuItemProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=Menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAE1B,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAiBf,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,qBAAqB,CAAC,kBAAkB,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,IAAI;WAHR,SAAS;sDAkGjB,CAAC;AAIF,KAAK,aAAa,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE7D,eAAO,MAAM,QAAQ,6GAmBpB,CAAC"}