@purpur/library 9.6.0 → 9.7.0

package/dist/radio-card-group-ZBXjYcQs.mjs

@@ -0,0 +1,166 @@
+import { jsxs as c, Fragment as I, jsx as i } from "react/jsx-runtime";
+import { useState as x, forwardRef as v, isValidElement as z, Children as C, cloneElement as E } from "react";
+import { H as L } from "./heading-xwBuT_-9.mjs";
+import { I as S, a as j, R as G } from "./index-DSf4qCR-.mjs";
+import { c as H } from "./bind-CU-R61T-.mjs";
+import { P as y } from "./paragraph-DSxXmX_0.mjs";
+import { S as P } from "./skeleton-CDGzLI-T.mjs";
+const k = {
+  "purpur-radio-card-group": "_purpur-radio-card-group_19np7_1",
+  "purpur-radio-card-group--vertical": "_purpur-radio-card-group--vertical_19np7_5",
+  "purpur-radio-card-group--horizontal": "_purpur-radio-card-group--horizontal_19np7_9",
+  "purpur-radio-card-group--radio-left": "_purpur-radio-card-group--radio-left_19np7_18",
+  "purpur-radio-card-group__item": "_purpur-radio-card-group__item_19np7_18",
+  "purpur-radio-card-group__item-bottom-container": "_purpur-radio-card-group__item-bottom-container_19np7_21",
+  "purpur-radio-card-group__item-top-container": "_purpur-radio-card-group__item-top-container_19np7_24",
+  "purpur-radio-card-group__container": "_purpur-radio-card-group__container_19np7_35",
+  "purpur-radio-card-group__item-container": "_purpur-radio-card-group__item-container_19np7_42",
+  "purpur-radio-card-group__item-radio": "_purpur-radio-card-group__item-radio_19np7_78",
+  "purpur-radio-card-group__item-content": "_purpur-radio-card-group__item-content_19np7_107",
+  "purpur-radio-card-group__item-title": "_purpur-radio-card-group__item-title_19np7_120",
+  "purpur-radio-card-group__item-indicator": "_purpur-radio-card-group__item-indicator_19np7_140",
+  "purpur-radio-card-group__item-image-container": "_purpur-radio-card-group__item-image-container_19np7_150",
+  "purpur-radio-card-group__item-image": "_purpur-radio-card-group__item-image_19np7_150",
+  "purpur-radio-card-group__item-image--loaded": "_purpur-radio-card-group__item-image--loaded_19np7_163",
+  "purpur-radio-card-group__item-image-placeholder": "_purpur-radio-card-group__item-image-placeholder_19np7_166",
+  "purpur-radio-card-group__item-image-placeholder--loaded": "_purpur-radio-card-group__item-image-placeholder--loaded_19np7_171",
+  "purpur-radio-card-group__item-children": "_purpur-radio-card-group__item-children_19np7_174"
+}, a = H.bind(k), h = "purpur-radio-card-group__item-image", q = (r) => !!r?.src && !!r.altText, w = ({
+  src: r,
+  altText: t,
+  noPlaceholder: m,
+  loading: d = "lazy",
+  ["data-testid"]: e
+}) => {
+  const [u, _] = x(!1), l = () => _(!0), n = a(h, {
+    [`${h}--loaded`]: u
+  }), g = a(`${h}-placeholder`, {
+    [`${h}-placeholder--loaded`]: u
+  });
+  return /* @__PURE__ */ c(I, { children: [
+    /* @__PURE__ */ i(
+      "img",
+      {
+        "data-testid": e,
+        className: n,
+        src: r,
+        alt: t,
+        loading: d,
+        onLoad: l
+      }
+    ),
+    !m && /* @__PURE__ */ i(P, { className: g })
+  ] });
+}, p = "purpur-radio-card-group__item", N = (r, { disabled: t }) => typeof r == "function" ? r({ disabled: t }) : r, b = v(
+  ({ title: r, ...t }, m) => {
+    const { ["data-testid"]: d, body: e, children: u, disabled: _, id: l, image: n, value: g } = t, o = { ...t };
+    return /* @__PURE__ */ c("div", { className: a(`${p}-container`), ref: m, children: [
+      /* @__PURE__ */ c(
+        S,
+        {
+          className: a(p),
+          "data-testid": d,
+          disabled: _,
+          id: l,
+          value: g,
+          children: [
+            n && /* @__PURE__ */ i("span", { className: a(`${p}-image-container`), children: q(n) ? /* @__PURE__ */ i(w, { ...n, "data-testid": d && `${d}-image` }) : N(n, o) }),
+            /* @__PURE__ */ c("span", { className: a(`${p}-content`), children: [
+              /* @__PURE__ */ c("span", { className: a(`${p}-top-container`), children: [
+                typeof r == "string" ? /* @__PURE__ */ i(
+                  y,
+                  {
+                    className: a(`${p}-title`),
+                    "data-testid": d && `${d}-title`,
+                    variant: "paragraph-100",
+                    disabled: _,
+                    children: r
+                  }
+                ) : N(r, o),
+                /* @__PURE__ */ i("span", { className: a(`${p}-radio`), children: /* @__PURE__ */ i(j, { className: a(`${p}-indicator`) }) })
+              ] }),
+              e && /* @__PURE__ */ i("span", { className: a(`${p}-bottom-container`), children: typeof e == "string" ? /* @__PURE__ */ i(
+                y,
+                {
+                  "data-testid": d && `${d}-body`,
+                  variant: "paragraph-100",
+                  disabled: _,
+                  children: e
+                }
+              ) : N(e, o) })
+            ] })
+          ]
+        }
+      ),
+      u
+    ] });
+  }
+);
+b.displayName = "RadioCardItem";
+const A = (r) => z(r) && r.type === b, $ = "purpur-radio-card-group", F = v(
+  ({
+    "data-testid": r,
+    "aria-labelledby": t,
+    children: m,
+    className: d,
+    items: e,
+    heading: u,
+    headingTag: _ = "h2",
+    loop: l = !0,
+    orientation: n = "vertical",
+    radioPosition: g = "right",
+    ...o
+  }, R) => {
+    const f = C.toArray(m).filter(A);
+    return /* @__PURE__ */ c("div", { className: a(d, `${$}__container`), ref: R, children: [
+      u && /* @__PURE__ */ c(
+        L,
+        {
+          "data-testid": r ? `${r}-heading` : void 0,
+          id: `${o.id}-heading`,
+          tag: _,
+          variant: "subsection-100",
+          children: [
+            o.required && /* @__PURE__ */ i("span", { "aria-hidden": !0, children: "* " }),
+            u
+          ]
+        }
+      ),
+      (!!e?.length || f.length) && /* @__PURE__ */ c(
+        G,
+        {
+          ...o,
+          "aria-labelledby": t || (u ? `${o.id}-heading` : void 0),
+          className: a(
+            $,
+            `${$}--${n}`,
+            `${$}--radio-${g}`
+          ),
+          "data-testid": r,
+          loop: l,
+          children: [
+            e?.map((s) => /* @__PURE__ */ i(
+              b,
+              {
+                ...s,
+                disabled: s.disabled || o.disabled,
+                "data-testid": r ? `${r}-item` : void 0
+              },
+              s.id
+            )),
+            C.map(
+              f,
+              (s) => E(s, { disabled: s.props.disabled || o.disabled })
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+F.displayName = "RadioCardGroup";
+export {
+  F as R,
+  b as a
+};
+//# sourceMappingURL=radio-card-group-ZBXjYcQs.mjs.map

package/dist/radio-card-group-ZBXjYcQs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-card-group-ZBXjYcQs.mjs","sources":["../../../components/radio-card-group/src/classnames.ts","../../../components/radio-card-group/src/radio-card-item-image.tsx","../../../components/radio-card-group/src/radio-card-item.tsx","../../../components/radio-card-group/src/is-radio-card-item.ts","../../../components/radio-card-group/src/radio-card-group.tsx"],"sourcesContent":["import c from \"classnames/bind\";\n\nimport styles from \"./radio-card-group.module.scss\";\nexport const cx = c.bind(styles);\n","import React from \"react\";\nimport { useState } from \"react\";\nimport { Skeleton } from \"@purpur/skeleton\";\n\nimport { cx } from \"./classnames\";\n\nexport type RadioCardImageProps = {\n  [\"data-testid\"]?: string;\n  altText: string;\n  loading?: \"lazy\" | \"eager\";\n  noPlaceholder?: boolean;\n  src: string;\n};\n\nconst rootClassName = \"purpur-radio-card-group__item-image\";\n\nexport const isRadioCardItemImageProps = (\n  imageProps?: RadioCardImageProps | unknown\n): imageProps is RadioCardImageProps =>\n  !!(imageProps as RadioCardImageProps)?.src && !!(imageProps as RadioCardImageProps).altText;\n\nexport const RadioCardImage = ({\n  src,\n  altText,\n  noPlaceholder,\n  loading = \"lazy\",\n  [\"data-testid\"]: dataTestid,\n}: RadioCardImageProps) => {\n  const [isLoaded, setIsLoaded] = useState(false);\n  const onLoad = () => setIsLoaded(true);\n\n  const imageClassName = cx(rootClassName, {\n    [`${rootClassName}--loaded`]: isLoaded,\n  });\n\n  const placeholderClassName = cx(`${rootClassName}-placeholder`, {\n    [`${rootClassName}-placeholder--loaded`]: isLoaded,\n  });\n\n  return (\n    <>\n      <img\n        data-testid={dataTestid}\n        className={imageClassName}\n        src={src}\n        alt={altText}\n        loading={loading}\n        onLoad={onLoad}\n      />\n      {!noPlaceholder && <Skeleton className={placeholderClassName} />}\n    </>\n  );\n};\n","import React, { forwardRef, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport { Paragraph } from \"@purpur/paragraph\";\nimport * as RadixRadioGroup from \"@radix-ui/react-radio-group\";\n\nimport { cx } from \"./classnames\";\nimport {\n  isRadioCardItemImageProps,\n  RadioCardImage,\n  type RadioCardImageProps,\n} from \"./radio-card-item-image\";\n\nconst rootClassName = \"purpur-radio-card-group__item\";\n\ntype CustomElement = ((props: { disabled?: boolean }) => ReactNode) | ReactNode;\ntype NonNullCustomElement =\n  | ((props: { disabled?: boolean }) => NonNullable<ReactNode>)\n  | NonNullable<ReactNode>;\n\nexport type RadioCardItemProps = Omit<BaseProps, \"id\" | \"title\"> & {\n  /**\n   * `string | ReactNode | (props: { disabled?: boolean }) => ReactNode`\n   */\n  body?: string | CustomElement;\n  disabled?: boolean;\n  id: string;\n  /**\n   * The radio image.\n   *\n      union = {\n        \"data-testid\"?: string | undefined;\n        altText: string;\n        loading?: \"lazy\" | \"eager\" | undefined;\n        noPlaceholder?: boolean | undefined;\n        src: string;\n      } |\n      ((props: {\n        disabled?: boolean;\n      }) => ReactNode) | React.ReactNode\n   * */\n  image?: RadioCardImageProps | CustomElement;\n  value: string;\n  /**\n   * `union = string | Omit<ReactNode, \"undefined\" | \"null\">`\n   */\n  title: string | NonNullCustomElement;\n};\n\nconst renderCustomElement = (\n  element: CustomElement | NonNullCustomElement,\n  { disabled }: Pick<RadioCardItemProps, \"disabled\">\n) => (typeof element === \"function\" ? element({ disabled }) : element);\n\nexport const RadioCardItem = forwardRef<HTMLDivElement, RadioCardItemProps>(\n  ({ title, ...propsx }, ref) => {\n    const { [\"data-testid\"]: dataTestid, body, children, disabled, id, image, value } = propsx;\n\n    const props = { title, ...propsx };\n\n    return (\n      <div className={cx(`${rootClassName}-container`)} ref={ref}>\n        <RadixRadioGroup.Item\n          className={cx(rootClassName)}\n          data-testid={dataTestid}\n          disabled={disabled}\n          id={id}\n          value={value}\n        >\n          {image && (\n            <span className={cx(`${rootClassName}-image-container`)}>\n              {isRadioCardItemImageProps(image) ? (\n                <RadioCardImage {...image} data-testid={dataTestid && `${dataTestid}-image`} />\n              ) : (\n                renderCustomElement(image, props)\n              )}\n            </span>\n          )}\n          <span className={cx(`${rootClassName}-content`)}>\n            <span className={cx(`${rootClassName}-top-container`)}>\n              {typeof title === \"string\" ? (\n                <Paragraph\n                  className={cx(`${rootClassName}-title`)}\n                  data-testid={dataTestid && `${dataTestid}-title`}\n                  variant=\"paragraph-100\"\n                  disabled={disabled}\n                >\n                  {title}\n                </Paragraph>\n              ) : (\n                renderCustomElement(title, props)\n              )}\n              <span className={cx(`${rootClassName}-radio`)}>\n                <RadixRadioGroup.Indicator className={cx(`${rootClassName}-indicator`)} />\n              </span>\n            </span>\n            {body && (\n              <span className={cx(`${rootClassName}-bottom-container`)}>\n                {typeof body === \"string\" ? (\n                  <Paragraph\n                    data-testid={dataTestid && `${dataTestid}-body`}\n                    variant=\"paragraph-100\"\n                    disabled={disabled}\n                  >\n                    {body}\n                  </Paragraph>\n                ) : (\n                  renderCustomElement(body, props)\n                )}\n              </span>\n            )}\n          </span>\n        </RadixRadioGroup.Item>\n        {children}\n      </div>\n    );\n  }\n);\n\nRadioCardItem.displayName = \"RadioCardItem\";\n","import { isValidElement, type ReactElement, type ReactNode } from \"react\";\n\nimport { RadioCardItem, type RadioCardItemProps } from \"./radio-card-item\";\n\nexport const isRadioCardItem = (child?: ReactNode): child is ReactElement<RadioCardItemProps> =>\n  isValidElement<RadioCardItemProps>(child) && child.type === RadioCardItem;\n","import React, { Children, cloneElement, forwardRef, type ReactNode, type Ref } from \"react\";\nimport { Heading, type HeadingTagType } from \"@purpur/heading\";\nimport * as RadixRadioGroup from \"@radix-ui/react-radio-group\";\n\nimport { cx } from \"./classnames\";\nimport { isRadioCardItem } from \"./is-radio-card-item\";\nimport type { RadioCardGroupOrientation, RadioPosition } from \"./radio-card-group.constants\";\nimport { RadioCardItem, type RadioCardItemProps } from \"./radio-card-item\";\n\nexport type RadioCardGroupItem = RadioCardItemProps & { ref?: Ref<HTMLDivElement> };\n\ntype StylingProps = Pick<React.HTMLAttributes<HTMLElement>, \"className\" | \"style\">;\n\nexport type RadioCardGroupProps = StylingProps & {\n  /**\n   * To use when no heading is given.\n   * */\n  [\"aria-label\"]?: string;\n  /**\n   * To use with custom label.\n   * */\n  [\"aria-labelledby\"]?: string;\n  [\"data-testid\"]?: string;\n  /**\n   * The value of the radio card item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.\n   * */\n  defaultValue?: string;\n  /**\n   * When true, prevents the user from interacting with radio card items.\n   * */\n  disabled?: boolean;\n  /**\n   * ID of the radio card group container.\n   * */\n  id: string;\n  /**\n   * The radio card items.\n   * */\n  items?: RadioCardGroupItem[];\n  /**\n   * Renders above the radio card group as a heading\n   * */\n  heading?: string;\n  /**\n   * Changes heading level for heading.\n   */\n  headingTag?: HeadingTagType;\n  /**\n   * When true, keyboard navigation will loop from last item to first, and vice versa.\n   * */\n  loop?: boolean;\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   * */\n  name?: string;\n  /**\n   * Event handler called when the value changes.\n   * */\n  onValueChange?: (value: string) => void;\n  /**\n   * Set to stack cards horizontally or vertically. When `horizontal`, the min card width with is 100% when container is sm, and `--purpur-breakpoint-lg` / 4 when the container is md or larger.\n   * */\n  orientation?: RadioCardGroupOrientation;\n  /**\n   * The position if the radio in the card items.\n   * */\n  radioPosition?: RadioPosition;\n  /**\n   * When true, indicates that the user must check a radio card item before the owning form can be submitted.\n   * */\n  required?: boolean;\n  /**\n   * The controlled value of the radio card item to check. Should be used in conjunction with onValueChange.\n   * */\n  value?: string;\n  /**\n   * Will only render given RadioCardItems.\n   * */\n  children?: ReactNode;\n};\n\nconst rootClassName = \"purpur-radio-card-group\";\n\nexport const RadioCardGroup = forwardRef<HTMLDivElement, RadioCardGroupProps>(\n  (\n    {\n      \"data-testid\": dataTestId,\n      \"aria-labelledby\": ariaLabelledby,\n      children,\n      className,\n      items,\n      heading,\n      headingTag = \"h2\",\n      loop = true,\n      orientation = \"vertical\",\n      radioPosition = \"right\",\n      ...props\n    },\n    ref\n  ) => {\n    const radioCardItemChildren = Children.toArray(children).filter(isRadioCardItem);\n\n    return (\n      <div className={cx(className, `${rootClassName}__container`)} ref={ref}>\n        {heading && (\n          <Heading\n            data-testid={dataTestId ? `${dataTestId}-heading` : undefined}\n            id={`${props.id}-heading`}\n            tag={headingTag}\n            variant=\"subsection-100\"\n          >\n            {props.required && <span aria-hidden>{\"* \"}</span>}\n            {heading}\n          </Heading>\n        )}\n        {(!!items?.length || radioCardItemChildren.length) && (\n          <RadixRadioGroup.Root\n            {...props}\n            aria-labelledby={ariaLabelledby || (heading ? `${props.id}-heading` : undefined)}\n            className={cx(\n              rootClassName,\n              `${rootClassName}--${orientation}`,\n              `${rootClassName}--radio-${radioPosition}`\n            )}\n            data-testid={dataTestId}\n            loop={loop}\n          >\n            {items?.map((item) => (\n              <RadioCardItem\n                key={item.id}\n                {...item}\n                disabled={item.disabled || props.disabled}\n                data-testid={dataTestId ? `${dataTestId}-item` : undefined}\n              />\n            ))}\n            {Children.map(radioCardItemChildren, (child) =>\n              cloneElement(child, { disabled: child.props.disabled || props.disabled })\n            )}\n          </RadixRadioGroup.Root>\n        )}\n      </div>\n    );\n  }\n);\n\nRadioCardGroup.displayName = \"RadioCardGroup\";\n\n// RadioCardItem must be exported after `RadioCardGroup` for the Storybook controls to be generated from RadioCardGroup props\nexport type { RadioCardItemProps } from \"./radio-card-item\";\nexport { RadioCardItem } from \"./radio-card-item\";\n"],"names":["cx","c","styles","rootClassName","isRadioCardItemImageProps","imageProps","RadioCardImage","src","altText","noPlaceholder","loading","dataTestid","isLoaded","setIsLoaded","useState","onLoad","imageClassName","placeholderClassName","jsxs","Fragment","jsx","Skeleton","renderCustomElement","element","disabled","RadioCardItem","forwardRef","title","propsx","ref","body","children","id","image","value","props","RadixRadioGroup.Item","Paragraph","RadixRadioGroup.Indicator","isRadioCardItem","child","isValidElement","RadioCardGroup","dataTestId","ariaLabelledby","className","items","heading","headingTag","loop","orientation","radioPosition","radioCardItemChildren","Children","Heading","RadixRadioGroup.Root","item","cloneElement"],"mappings":"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"}

package/dist/radio-card-group-nrDi5EPK.js

@@ -0,0 +1,2 @@
+"use strict";const a=require("react/jsx-runtime"),s=require("react"),f=require("./heading-drD5ugCC.js"),N=require("./index-BbtRr5Q6.js"),v=require("./bind-DeUYJ6m9.js"),C=require("./paragraph-By4jMjnH.js"),q=require("./skeleton-BU0KtWIM.js"),I={"purpur-radio-card-group":"_purpur-radio-card-group_19np7_1","purpur-radio-card-group--vertical":"_purpur-radio-card-group--vertical_19np7_5","purpur-radio-card-group--horizontal":"_purpur-radio-card-group--horizontal_19np7_9","purpur-radio-card-group--radio-left":"_purpur-radio-card-group--radio-left_19np7_18","purpur-radio-card-group__item":"_purpur-radio-card-group__item_19np7_18","purpur-radio-card-group__item-bottom-container":"_purpur-radio-card-group__item-bottom-container_19np7_21","purpur-radio-card-group__item-top-container":"_purpur-radio-card-group__item-top-container_19np7_24","purpur-radio-card-group__container":"_purpur-radio-card-group__container_19np7_35","purpur-radio-card-group__item-container":"_purpur-radio-card-group__item-container_19np7_42","purpur-radio-card-group__item-radio":"_purpur-radio-card-group__item-radio_19np7_78","purpur-radio-card-group__item-content":"_purpur-radio-card-group__item-content_19np7_107","purpur-radio-card-group__item-title":"_purpur-radio-card-group__item-title_19np7_120","purpur-radio-card-group__item-indicator":"_purpur-radio-card-group__item-indicator_19np7_140","purpur-radio-card-group__item-image-container":"_purpur-radio-card-group__item-image-container_19np7_150","purpur-radio-card-group__item-image":"_purpur-radio-card-group__item-image_19np7_150","purpur-radio-card-group__item-image--loaded":"_purpur-radio-card-group__item-image--loaded_19np7_163","purpur-radio-card-group__item-image-placeholder":"_purpur-radio-card-group__item-image-placeholder_19np7_166","purpur-radio-card-group__item-image-placeholder--loaded":"_purpur-radio-card-group__item-image-placeholder--loaded_19np7_171","purpur-radio-card-group__item-children":"_purpur-radio-card-group__item-children_19np7_174"},d=v.c.bind(I),h="purpur-radio-card-group__item-image",z=r=>!!r?.src&&!!r.altText,E=({src:r,altText:p,noPlaceholder:l,loading:e="lazy",["data-testid"]:o})=>{const[u,c]=s.useState(!1),m=()=>c(!0),n=d(h,{[`${h}--loaded`]:u}),g=d(`${h}-placeholder`,{[`${h}-placeholder--loaded`]:u});return a.jsxs(a.Fragment,{children:[a.jsx("img",{"data-testid":o,className:n,src:r,alt:p,loading:e,onLoad:m}),!l&&a.jsx(q.Skeleton,{className:g})]})},t="purpur-radio-card-group__item",j=(r,{disabled:p})=>typeof r=="function"?r({disabled:p}):r,x=s.forwardRef(({title:r,...p},l)=>{const{["data-testid"]:e,body:o,children:u,disabled:c,id:m,image:n,value:g}=p,i={...p};return a.jsxs("div",{className:d(`${t}-container`),ref:l,children:[a.jsxs(N.Item2,{className:d(t),"data-testid":e,disabled:c,id:m,value:g,children:[n&&a.jsx("span",{className:d(`${t}-image-container`),children:z(n)?a.jsx(E,{...n,"data-testid":e&&`${e}-image`}):j(n,i)}),a.jsxs("span",{className:d(`${t}-content`),children:[a.jsxs("span",{className:d(`${t}-top-container`),children:[typeof r=="string"?a.jsx(C.Paragraph,{className:d(`${t}-title`),"data-testid":e&&`${e}-title`,variant:"paragraph-100",disabled:c,children:r}):j(r,i),a.jsx("span",{className:d(`${t}-radio`),children:a.jsx(N.Indicator,{className:d(`${t}-indicator`)})})]}),o&&a.jsx("span",{className:d(`${t}-bottom-container`),children:typeof o=="string"?a.jsx(C.Paragraph,{"data-testid":e&&`${e}-body`,variant:"paragraph-100",disabled:c,children:o}):j(o,i)})]})]}),u]})});x.displayName="RadioCardItem";const G=r=>s.isValidElement(r)&&r.type===x,$="purpur-radio-card-group",R=s.forwardRef(({"data-testid":r,"aria-labelledby":p,children:l,className:e,items:o,heading:u,headingTag:c="h2",loop:m=!0,orientation:n="vertical",radioPosition:g="right",...i},y)=>{const b=s.Children.toArray(l).filter(G);return a.jsxs("div",{className:d(e,`${$}__container`),ref:y,children:[u&&a.jsxs(f.Heading,{"data-testid":r?`${r}-heading`:void 0,id:`${i.id}-heading`,tag:c,variant:"subsection-100",children:[i.required&&a.jsx("span",{"aria-hidden":!0,children:"* "}),u]}),(!!o?.length||b.length)&&a.jsxs(N.Root2,{...i,"aria-labelledby":p||(u?`${i.id}-heading`:void 0),className:d($,`${$}--${n}`,`${$}--radio-${g}`),"data-testid":r,loop:m,children:[o?.map(_=>a.jsx(x,{..._,disabled:_.disabled||i.disabled,"data-testid":r?`${r}-item`:void 0},_.id)),s.Children.map(b,_=>s.cloneElement(_,{disabled:_.props.disabled||i.disabled}))]})]})});R.displayName="RadioCardGroup";exports.RadioCardGroup=R;exports.RadioCardItem=x;
+//# sourceMappingURL=radio-card-group-nrDi5EPK.js.map

package/dist/radio-card-group-nrDi5EPK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-card-group-nrDi5EPK.js","sources":["../../../components/radio-card-group/src/classnames.ts","../../../components/radio-card-group/src/radio-card-item-image.tsx","../../../components/radio-card-group/src/radio-card-item.tsx","../../../components/radio-card-group/src/is-radio-card-item.ts","../../../components/radio-card-group/src/radio-card-group.tsx"],"sourcesContent":["import c from \"classnames/bind\";\n\nimport styles from \"./radio-card-group.module.scss\";\nexport const cx = c.bind(styles);\n","import React from \"react\";\nimport { useState } from \"react\";\nimport { Skeleton } from \"@purpur/skeleton\";\n\nimport { cx } from \"./classnames\";\n\nexport type RadioCardImageProps = {\n  [\"data-testid\"]?: string;\n  altText: string;\n  loading?: \"lazy\" | \"eager\";\n  noPlaceholder?: boolean;\n  src: string;\n};\n\nconst rootClassName = \"purpur-radio-card-group__item-image\";\n\nexport const isRadioCardItemImageProps = (\n  imageProps?: RadioCardImageProps | unknown\n): imageProps is RadioCardImageProps =>\n  !!(imageProps as RadioCardImageProps)?.src && !!(imageProps as RadioCardImageProps).altText;\n\nexport const RadioCardImage = ({\n  src,\n  altText,\n  noPlaceholder,\n  loading = \"lazy\",\n  [\"data-testid\"]: dataTestid,\n}: RadioCardImageProps) => {\n  const [isLoaded, setIsLoaded] = useState(false);\n  const onLoad = () => setIsLoaded(true);\n\n  const imageClassName = cx(rootClassName, {\n    [`${rootClassName}--loaded`]: isLoaded,\n  });\n\n  const placeholderClassName = cx(`${rootClassName}-placeholder`, {\n    [`${rootClassName}-placeholder--loaded`]: isLoaded,\n  });\n\n  return (\n    <>\n      <img\n        data-testid={dataTestid}\n        className={imageClassName}\n        src={src}\n        alt={altText}\n        loading={loading}\n        onLoad={onLoad}\n      />\n      {!noPlaceholder && <Skeleton className={placeholderClassName} />}\n    </>\n  );\n};\n","import React, { forwardRef, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport { Paragraph } from \"@purpur/paragraph\";\nimport * as RadixRadioGroup from \"@radix-ui/react-radio-group\";\n\nimport { cx } from \"./classnames\";\nimport {\n  isRadioCardItemImageProps,\n  RadioCardImage,\n  type RadioCardImageProps,\n} from \"./radio-card-item-image\";\n\nconst rootClassName = \"purpur-radio-card-group__item\";\n\ntype CustomElement = ((props: { disabled?: boolean }) => ReactNode) | ReactNode;\ntype NonNullCustomElement =\n  | ((props: { disabled?: boolean }) => NonNullable<ReactNode>)\n  | NonNullable<ReactNode>;\n\nexport type RadioCardItemProps = Omit<BaseProps, \"id\" | \"title\"> & {\n  /**\n   * `string | ReactNode | (props: { disabled?: boolean }) => ReactNode`\n   */\n  body?: string | CustomElement;\n  disabled?: boolean;\n  id: string;\n  /**\n   * The radio image.\n   *\n      union = {\n        \"data-testid\"?: string | undefined;\n        altText: string;\n        loading?: \"lazy\" | \"eager\" | undefined;\n        noPlaceholder?: boolean | undefined;\n        src: string;\n      } |\n      ((props: {\n        disabled?: boolean;\n      }) => ReactNode) | React.ReactNode\n   * */\n  image?: RadioCardImageProps | CustomElement;\n  value: string;\n  /**\n   * `union = string | Omit<ReactNode, \"undefined\" | \"null\">`\n   */\n  title: string | NonNullCustomElement;\n};\n\nconst renderCustomElement = (\n  element: CustomElement | NonNullCustomElement,\n  { disabled }: Pick<RadioCardItemProps, \"disabled\">\n) => (typeof element === \"function\" ? element({ disabled }) : element);\n\nexport const RadioCardItem = forwardRef<HTMLDivElement, RadioCardItemProps>(\n  ({ title, ...propsx }, ref) => {\n    const { [\"data-testid\"]: dataTestid, body, children, disabled, id, image, value } = propsx;\n\n    const props = { title, ...propsx };\n\n    return (\n      <div className={cx(`${rootClassName}-container`)} ref={ref}>\n        <RadixRadioGroup.Item\n          className={cx(rootClassName)}\n          data-testid={dataTestid}\n          disabled={disabled}\n          id={id}\n          value={value}\n        >\n          {image && (\n            <span className={cx(`${rootClassName}-image-container`)}>\n              {isRadioCardItemImageProps(image) ? (\n                <RadioCardImage {...image} data-testid={dataTestid && `${dataTestid}-image`} />\n              ) : (\n                renderCustomElement(image, props)\n              )}\n            </span>\n          )}\n          <span className={cx(`${rootClassName}-content`)}>\n            <span className={cx(`${rootClassName}-top-container`)}>\n              {typeof title === \"string\" ? (\n                <Paragraph\n                  className={cx(`${rootClassName}-title`)}\n                  data-testid={dataTestid && `${dataTestid}-title`}\n                  variant=\"paragraph-100\"\n                  disabled={disabled}\n                >\n                  {title}\n                </Paragraph>\n              ) : (\n                renderCustomElement(title, props)\n              )}\n              <span className={cx(`${rootClassName}-radio`)}>\n                <RadixRadioGroup.Indicator className={cx(`${rootClassName}-indicator`)} />\n              </span>\n            </span>\n            {body && (\n              <span className={cx(`${rootClassName}-bottom-container`)}>\n                {typeof body === \"string\" ? (\n                  <Paragraph\n                    data-testid={dataTestid && `${dataTestid}-body`}\n                    variant=\"paragraph-100\"\n                    disabled={disabled}\n                  >\n                    {body}\n                  </Paragraph>\n                ) : (\n                  renderCustomElement(body, props)\n                )}\n              </span>\n            )}\n          </span>\n        </RadixRadioGroup.Item>\n        {children}\n      </div>\n    );\n  }\n);\n\nRadioCardItem.displayName = \"RadioCardItem\";\n","import { isValidElement, type ReactElement, type ReactNode } from \"react\";\n\nimport { RadioCardItem, type RadioCardItemProps } from \"./radio-card-item\";\n\nexport const isRadioCardItem = (child?: ReactNode): child is ReactElement<RadioCardItemProps> =>\n  isValidElement<RadioCardItemProps>(child) && child.type === RadioCardItem;\n","import React, { Children, cloneElement, forwardRef, type ReactNode, type Ref } from \"react\";\nimport { Heading, type HeadingTagType } from \"@purpur/heading\";\nimport * as RadixRadioGroup from \"@radix-ui/react-radio-group\";\n\nimport { cx } from \"./classnames\";\nimport { isRadioCardItem } from \"./is-radio-card-item\";\nimport type { RadioCardGroupOrientation, RadioPosition } from \"./radio-card-group.constants\";\nimport { RadioCardItem, type RadioCardItemProps } from \"./radio-card-item\";\n\nexport type RadioCardGroupItem = RadioCardItemProps & { ref?: Ref<HTMLDivElement> };\n\ntype StylingProps = Pick<React.HTMLAttributes<HTMLElement>, \"className\" | \"style\">;\n\nexport type RadioCardGroupProps = StylingProps & {\n  /**\n   * To use when no heading is given.\n   * */\n  [\"aria-label\"]?: string;\n  /**\n   * To use with custom label.\n   * */\n  [\"aria-labelledby\"]?: string;\n  [\"data-testid\"]?: string;\n  /**\n   * The value of the radio card item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.\n   * */\n  defaultValue?: string;\n  /**\n   * When true, prevents the user from interacting with radio card items.\n   * */\n  disabled?: boolean;\n  /**\n   * ID of the radio card group container.\n   * */\n  id: string;\n  /**\n   * The radio card items.\n   * */\n  items?: RadioCardGroupItem[];\n  /**\n   * Renders above the radio card group as a heading\n   * */\n  heading?: string;\n  /**\n   * Changes heading level for heading.\n   */\n  headingTag?: HeadingTagType;\n  /**\n   * When true, keyboard navigation will loop from last item to first, and vice versa.\n   * */\n  loop?: boolean;\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   * */\n  name?: string;\n  /**\n   * Event handler called when the value changes.\n   * */\n  onValueChange?: (value: string) => void;\n  /**\n   * Set to stack cards horizontally or vertically. When `horizontal`, the min card width with is 100% when container is sm, and `--purpur-breakpoint-lg` / 4 when the container is md or larger.\n   * */\n  orientation?: RadioCardGroupOrientation;\n  /**\n   * The position if the radio in the card items.\n   * */\n  radioPosition?: RadioPosition;\n  /**\n   * When true, indicates that the user must check a radio card item before the owning form can be submitted.\n   * */\n  required?: boolean;\n  /**\n   * The controlled value of the radio card item to check. Should be used in conjunction with onValueChange.\n   * */\n  value?: string;\n  /**\n   * Will only render given RadioCardItems.\n   * */\n  children?: ReactNode;\n};\n\nconst rootClassName = \"purpur-radio-card-group\";\n\nexport const RadioCardGroup = forwardRef<HTMLDivElement, RadioCardGroupProps>(\n  (\n    {\n      \"data-testid\": dataTestId,\n      \"aria-labelledby\": ariaLabelledby,\n      children,\n      className,\n      items,\n      heading,\n      headingTag = \"h2\",\n      loop = true,\n      orientation = \"vertical\",\n      radioPosition = \"right\",\n      ...props\n    },\n    ref\n  ) => {\n    const radioCardItemChildren = Children.toArray(children).filter(isRadioCardItem);\n\n    return (\n      <div className={cx(className, `${rootClassName}__container`)} ref={ref}>\n        {heading && (\n          <Heading\n            data-testid={dataTestId ? `${dataTestId}-heading` : undefined}\n            id={`${props.id}-heading`}\n            tag={headingTag}\n            variant=\"subsection-100\"\n          >\n            {props.required && <span aria-hidden>{\"* \"}</span>}\n            {heading}\n          </Heading>\n        )}\n        {(!!items?.length || radioCardItemChildren.length) && (\n          <RadixRadioGroup.Root\n            {...props}\n            aria-labelledby={ariaLabelledby || (heading ? `${props.id}-heading` : undefined)}\n            className={cx(\n              rootClassName,\n              `${rootClassName}--${orientation}`,\n              `${rootClassName}--radio-${radioPosition}`\n            )}\n            data-testid={dataTestId}\n            loop={loop}\n          >\n            {items?.map((item) => (\n              <RadioCardItem\n                key={item.id}\n                {...item}\n                disabled={item.disabled || props.disabled}\n                data-testid={dataTestId ? `${dataTestId}-item` : undefined}\n              />\n            ))}\n            {Children.map(radioCardItemChildren, (child) =>\n              cloneElement(child, { disabled: child.props.disabled || props.disabled })\n            )}\n          </RadixRadioGroup.Root>\n        )}\n      </div>\n    );\n  }\n);\n\nRadioCardGroup.displayName = \"RadioCardGroup\";\n\n// RadioCardItem must be exported after `RadioCardGroup` for the Storybook controls to be generated from RadioCardGroup props\nexport type { RadioCardItemProps } from \"./radio-card-item\";\nexport { RadioCardItem } from \"./radio-card-item\";\n"],"names":["cx","c","styles","rootClassName","isRadioCardItemImageProps","imageProps","RadioCardImage","src","altText","noPlaceholder","loading","dataTestid","isLoaded","setIsLoaded","useState","onLoad","imageClassName","placeholderClassName","jsxs","Fragment","jsx","Skeleton","renderCustomElement","element","disabled","RadioCardItem","forwardRef","title","propsx","ref","body","children","id","image","value","props","RadixRadioGroup.Item","Paragraph","RadixRadioGroup.Indicator","isRadioCardItem","child","isValidElement","RadioCardGroup","dataTestId","ariaLabelledby","className","items","heading","headingTag","loop","orientation","radioPosition","radioCardItemChildren","Children","Heading","RadixRadioGroup.Root","item","cloneElement"],"mappings":"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"}

package/dist/radio-card-group.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./radio-card-group-Ctuvg61o.js");exports.RADIO_CARD_GROUP_ORIENTATION=r.RADIO_CARD_GROUP_ORIENTATION;exports.RADIO_POSITION=r.RADIO_POSITION;exports.RadioCardGroup=r.RadioCardGroup;exports.RadioCardItem=r.RadioCardItem;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./radio-card-group-nrDi5EPK.js");exports.RadioCardGroup=r.RadioCardGroup;exports.RadioCardItem=r.RadioCardItem;
 //# sourceMappingURL=radio-card-group.cjs.js.map

package/dist/radio-card-group.es.js

@@ -1,8 +1,6 @@
-import { R as I, a as O, b as o, c as r } from "./radio-card-group-CneOprGY.mjs";
+import { R as r, a as d } from "./radio-card-group-ZBXjYcQs.mjs";
 export {
-  I as RADIO_CARD_GROUP_ORIENTATION,
-  O as RADIO_POSITION,
-  o as RadioCardGroup,
-  r as RadioCardItem
+  r as RadioCardGroup,
+  d as RadioCardItem
 };
 //# sourceMappingURL=radio-card-group.es.js.map

package/dist/search-field-2vdDbiT0.js

@@ -0,0 +1,2 @@
+"use strict";const t=require("react/jsx-runtime"),x=require("react"),v=require("./listbox-ATP4hOWF.js"),k=require("./use-autocomplete.es-BwAzMcau.js"),$=require("./bind-DeUYJ6m9.js"),A=require("./search.es-Cg2amJSR.js"),C=require("./text-field-CYJzQG3h.js"),R=require("./button-DmybVApa.js"),D={"purpur-search-field":"_purpur-search-field_1wc77_1","purpur-search-field--has-clear-button":"_purpur-search-field--has-clear-button_1wc77_4","purpur-search-field--no-gap":"_purpur-search-field--no-gap_1wc77_13","purpur-search-field__wrapper":"_purpur-search-field__wrapper_1wc77_17","purpur-search-field__wrapper--gap":"_purpur-search-field__wrapper--gap_1wc77_20","purpur-search-field__search-icon":"_purpur-search-field__search-icon_1wc77_24","purpur-search-field__close-icon":"_purpur-search-field__close-icon_1wc77_24","purpur-search-field__autocomplete-root":"_purpur-search-field__autocomplete-root_1wc77_27","purpur-search-field__listbox":"_purpur-search-field__listbox_1wc77_31"},K={"purpur-search-field-button":"_purpur-search-field-button_c16yo_1","purpur-search-field-button--icon-only":"_purpur-search-field-button--icon-only_c16yo_1"},M=$.c.bind(K),B="purpur-search-field-button",P=({["data-testid"]:r,disabled:c,iconOnly:u,label:n,type:l="submit",onClick:a})=>{const o={className:M(B,{[`${B}--icon-only`]:u}),disabled:c,"data-testid":r,onClick:a};return u?t.jsx(R.Button,{...o,"aria-label":n,iconOnly:!0,size:"sm",type:l,variant:"primary",children:t.jsx(A.s,{size:"xs"})}):t.jsx(R.Button,{...o,size:"sm",type:l,variant:"primary",children:n})},E=["button-attached","no-button"],m=$.c.bind(D),d="purpur-search-field",g=x.forwardRef(({["data-testid"]:r,className:c,clearButtonAriaLabel:u,disabled:n,submitBehavior:l="form",iconOnlySearchButton:a,onClear:o,onSearch:p,searchButtonLabel:h,variant:s,formRef:y,wrapperStyle:f,...e},w)=>{const b=i=>r?`${r}-${i}`:void 0,z=(typeof e.value=="number"?e.value!==void 0:e.value?.length)&&!n&&!e.readOnly&&!e.loading,j=l==="manual",V=m(c,d,{[`${d}--no-gap`]:s==="button-attached",[`${d}--has-clear-button`]:z}),S={ref:w,className:V,clearButtonAriaLabel:u,disabled:n,onClear:o,startAdornment:a?null:t.jsx(A.s,{size:"xs",className:m(`${d}__search-icon`)},"1"),"data-testid":b("text-field"),type:"search",...e},q=s!=="no-button"?t.jsx(P,{type:j?"button":"submit",onClick:j?i=>p?.(i):void 0,disabled:n,iconOnly:a,label:h,"data-testid":b("button")}):null;if(j){const i=_=>{e.onKeyDown?.(_),_.key==="Enter"&&!_.defaultPrevented&&(_.preventDefault(),p?.(_))};return t.jsx("div",{className:m(`${d}__wrapper`),"data-testid":r,style:f,children:t.jsx(C.TextField,{...S,onKeyDown:i,afterField:q})})}return t.jsx("form",{ref:y,className:m(`${d}__wrapper`),"data-testid":r,style:f,onSubmit:i=>{i.preventDefault(),p?.(i)},children:t.jsx(C.TextField,{...S,afterField:q})})});g.displayName="SearchFieldBase";const I=$.c.bind(D),O="purpur-search-field",F=x.forwardRef(({suggestions:r,suggestionsLabel:c,onSelectSuggestion:u,openSuggestionsOnFocus:n,suggestionsMaxHeight:l,...a},o)=>{const p=x.useId(),h=a.id??p,s=k.te({id:h,options:r,listboxLabel:c,disabled:a.disabled,readOnly:a.readOnly,openOnFocus:n,listboxMaxHeight:l,onSelect:u,"data-testid":a["data-testid"]}),y=e=>{s.inputRef.current=e,typeof o=="function"?o(e):o&&(o.current=e)},f=e=>{a.onChange?.(e),s.isOpen||s.openListbox()};return t.jsxs("div",{ref:s.rootRef,className:I(`${O}__autocomplete-root`),children:[t.jsx(g,{ref:y,...a,onChange:f,id:h,wrapperStyle:s.anchorStyle,...s.inputProps}),s.isOpen&&t.jsx(v.Listbox,{...s.listboxProps,className:I(`${O}__listbox`),children:r.map((e,w)=>{const{key:b,...N}=s.getListboxItemProps(e,w);return t.jsx(v.Listbox.Item,{...N,children:e.label},b)})})]})});F.displayName="SearchFieldAutocomplete";const L=x.forwardRef((r,c)=>r.suggestions?t.jsx(F,{ref:c,...r}):t.jsx(g,{ref:c,...r}));L.displayName="SearchField";exports.SearchField=L;exports.SearchFieldAutocomplete=F;exports.searchFieldVariants=E;
+//# sourceMappingURL=search-field-2vdDbiT0.js.map

package/dist/search-field-2vdDbiT0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field-2vdDbiT0.js","sources":["../../../components/search-field/src/search-field-button.tsx","../../../components/search-field/src/search-field-base.tsx","../../../components/search-field/src/search-field-autocomplete.tsx","../../../components/search-field/src/search-field.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@purpur/button\";\nimport { IconSearch } from \"@purpur/icon/search\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field-button.module.scss\";\n\ntype Props = {\n  [\"data-testid\"]?: string;\n  disabled?: boolean;\n  iconOnly?: boolean;\n  label: string;\n  type?: \"submit\" | \"button\";\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n};\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field-button\";\n\nexport const SearchFieldButton = ({\n  [\"data-testid\"]: dataTestid,\n  disabled,\n  iconOnly,\n  label,\n  type = \"submit\",\n  onClick,\n}: Props) => {\n  const buttonProps = {\n    className: cx(rootClassName, {\n      [`${rootClassName}--icon-only`]: iconOnly,\n    }),\n    disabled,\n    [\"data-testid\"]: dataTestid,\n    onClick,\n  };\n\n  if (iconOnly) {\n    return (\n      <Button {...buttonProps} aria-label={label} iconOnly size=\"sm\" type={type} variant=\"primary\">\n        <IconSearch size=\"xs\" />\n      </Button>\n    );\n  }\n\n  return (\n    <Button {...buttonProps} size=\"sm\" type={type} variant=\"primary\">\n      {label}\n    </Button>\n  );\n};\n","import React, {\n  type ChangeEvent,\n  type CSSProperties,\n  type FormEvent,\n  forwardRef,\n  type RefObject,\n} from \"react\";\nimport { IconSearch } from \"@purpur/icon/search\";\nimport { TextField, type TextFieldProps } from \"@purpur/text-field\";\nimport { type AutocompleteOption } from \"@purpur/use-autocomplete\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field.module.scss\";\nimport { SearchFieldButton } from \"./search-field-button\";\n\nexport const searchFieldVariants = [\"button-attached\", \"no-button\"] as const;\n\ntype Variant = (typeof searchFieldVariants)[number];\n\ntype DefaultProps = {\n  [\"data-testid\"]?: string;\n  /**\n   * An accessible label for the clear button.\n   * */\n  clearButtonAriaLabel: string;\n  /**\n   * Disables both the input field and submit button if `true`.\n   * */\n  disabled?: boolean;\n  /**\n   * Will display only a search icon in the search button if `true`.\n   * */\n  iconOnlySearchButton?: boolean;\n  /**\n   * Event handler called when the value of the search field changes.\n   * */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * Event handler called when the clear button is clicked.\n   * */\n  onClear: () => void;\n  /**\n   * Event handler called when the search is triggered.\n   * */\n  onSearch?: (event?: React.SyntheticEvent) => void;\n  /**\n   * Controls how the search field handles submission.\n   * - `\"form\"` (default): Renders a `<form>` element and submits via form submission.\n   * - `\"manual\"`: Renders a `<div>` instead of a `<form>` element.\n   *   Use this when the component is nested inside another form.\n   * */\n  submitBehavior?: \"form\" | \"manual\";\n  /**\n   * The label text (or `aria-label` if `iconOnlySearchButton` is `true`) of the search button.\n   * */\n  searchButtonLabel?: string;\n  variant: Variant;\n  formRef?: RefObject<HTMLFormElement>;\n};\n\ntype TextSearchButton = {\n  iconOnlySearchButton?: false;\n  searchButtonLabel: string;\n  variant: \"button-attached\";\n};\n\ntype IconOnlySearchButton = {\n  iconOnlySearchButton: true;\n  searchButtonLabel: string;\n  variant: \"button-attached\";\n};\n\ntype NoButton = {\n  searchButtonLabel?: never;\n  variant: \"no-button\";\n};\n\nexport type SearchFieldBaseProps = DefaultProps &\n  (TextSearchButton | IconOnlySearchButton | NoButton) &\n  Omit<TextFieldProps, \"startAdornment\" | \"endAdornment\" | \"afterField\" | \"onChange\" | \"variant\">;\n\ntype SearchFieldBaseInternalProps = SearchFieldBaseProps & {\n  wrapperStyle?: CSSProperties;\n};\n\ntype SearchFieldAutocompleteSharedProps = {\n  /**\n   * Called when the user selects a suggestion.\n   */\n  onSelectSuggestion?: (option: AutocompleteOption) => void;\n  /**\n   * Open the suggestions listbox when the input receives focus.\n   */\n  openSuggestionsOnFocus?: boolean;\n  /**\n   * Maximum height of the suggestions listbox. A number is interpreted as px.\n   */\n  suggestionsMaxHeight?: string | number;\n};\n\ntype SearchFieldWithoutAutocomplete = SearchFieldAutocompleteSharedProps & {\n  suggestions?: never;\n  suggestionsLabel?: never;\n};\n\ntype SearchFieldWithAutocomplete = SearchFieldAutocompleteSharedProps & {\n  /**\n   * The list of suggestions to display in a listbox below the field.\n   * No filtering is applied — pass the already-correct (pre-filtered) list.\n   * If autocomplete should stay enabled while there are temporarily no matches,\n   * pass an empty array instead of `undefined` or `null`. Changing this prop\n   * from an absent value to an array switches between the regular and\n   * autocomplete variants, which causes a re-render, drops input focus, and\n   * hides the listbox.\n   */\n  suggestions: AutocompleteOption[];\n  /**\n   * Accessible label for the suggestions listbox.\n   */\n  suggestionsLabel: string;\n};\n\nexport type SearchFieldAutocompleteEnhancements =\n  | SearchFieldWithoutAutocomplete\n  | SearchFieldWithAutocomplete;\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field\";\n\nexport const SearchFieldBase = forwardRef<HTMLInputElement, SearchFieldBaseInternalProps>(\n  (\n    {\n      [\"data-testid\"]: dataTestId,\n      className,\n      clearButtonAriaLabel,\n      disabled,\n      submitBehavior = \"form\",\n      iconOnlySearchButton,\n      onClear,\n      onSearch,\n      searchButtonLabel,\n      variant,\n      formRef,\n      wrapperStyle,\n      ...props\n    },\n    ref\n  ) => {\n    const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);\n    const hasValue =\n      typeof props.value === \"number\" ? props.value !== undefined : props.value?.length;\n    const hasClearButton = hasValue && !disabled && !props.readOnly && !props.loading;\n    const isManualSubmit = submitBehavior === \"manual\";\n\n    const classes = cx(className, rootClassName, {\n      [`${rootClassName}--no-gap`]: variant === \"button-attached\",\n      [`${rootClassName}--has-clear-button`]: hasClearButton,\n    });\n\n    const textFieldProps: TextFieldProps = {\n      ref,\n      className: classes,\n      clearButtonAriaLabel,\n      disabled,\n      onClear,\n      startAdornment: !iconOnlySearchButton ? (\n        <IconSearch size=\"xs\" className={cx(`${rootClassName}__search-icon`)} key=\"1\" />\n      ) : null,\n      \"data-testid\": getTestId(\"text-field\"),\n      type: \"search\" as const,\n      ...props,\n    };\n\n    const searchButton =\n      variant !== \"no-button\" ? (\n        <SearchFieldButton\n          type={isManualSubmit ? \"button\" : \"submit\"}\n          onClick={isManualSubmit ? (event) => onSearch?.(event) : undefined}\n          disabled={disabled}\n          iconOnly={iconOnlySearchButton}\n          label={searchButtonLabel}\n          data-testid={getTestId(\"button\")}\n        />\n      ) : null;\n\n    if (isManualSubmit) {\n      const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (event.key === \"Enter\" && !event.defaultPrevented) {\n          event.preventDefault();\n          onSearch?.(event);\n        }\n      };\n\n      return (\n        <div\n          className={cx(`${rootClassName}__wrapper`)}\n          data-testid={dataTestId}\n          style={wrapperStyle}\n        >\n          <TextField {...textFieldProps} onKeyDown={handleKeyDown} afterField={searchButton} />\n        </div>\n      );\n    }\n\n    return (\n      <form\n        ref={formRef}\n        className={cx(`${rootClassName}__wrapper`)}\n        data-testid={dataTestId}\n        style={wrapperStyle}\n        onSubmit={(e: FormEvent<HTMLFormElement>) => {\n          e.preventDefault();\n          onSearch?.(e);\n        }}\n      >\n        <TextField {...textFieldProps} afterField={searchButton} />\n      </form>\n    );\n  }\n);\n\nSearchFieldBase.displayName = \"SearchFieldBase\";\n","import React, { forwardRef, useId } from \"react\";\nimport { Listbox } from \"@purpur/listbox\";\nimport { type AutocompleteOption, useAutocomplete } from \"@purpur/use-autocomplete\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field.module.scss\";\nimport {\n  type SearchFieldAutocompleteEnhancements,\n  SearchFieldBase,\n  type SearchFieldBaseProps,\n} from \"./search-field-base\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field\";\n\nexport type SearchFieldAutocompleteProps = SearchFieldBaseProps &\n  Extract<SearchFieldAutocompleteEnhancements, { suggestions: AutocompleteOption[] }>;\n\nexport const SearchFieldAutocomplete = forwardRef<HTMLInputElement, SearchFieldAutocompleteProps>(\n  (\n    {\n      suggestions,\n      suggestionsLabel,\n      onSelectSuggestion,\n      openSuggestionsOnFocus,\n      suggestionsMaxHeight,\n      ...searchFieldProps\n    },\n    ref\n  ) => {\n    const randomId = useId();\n    const inputId = (searchFieldProps.id as string | undefined) ?? randomId;\n\n    const autocomplete = useAutocomplete({\n      id: inputId,\n      options: suggestions,\n      listboxLabel: suggestionsLabel,\n      disabled: searchFieldProps.disabled,\n      readOnly: searchFieldProps.readOnly,\n      openOnFocus: openSuggestionsOnFocus,\n      listboxMaxHeight: suggestionsMaxHeight,\n      onSelect: onSelectSuggestion,\n      [\"data-testid\"]: searchFieldProps[\"data-testid\"],\n    });\n\n    const setInputRef = (node: HTMLInputElement | null) => {\n      (autocomplete.inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node;\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n    };\n\n    const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n      searchFieldProps.onChange?.(event);\n      if (!autocomplete.isOpen) {\n        autocomplete.openListbox();\n      }\n    };\n\n    return (\n      <div\n        ref={autocomplete.rootRef as React.RefObject<HTMLDivElement>}\n        className={cx(`${rootClassName}__autocomplete-root`)}\n      >\n        <SearchFieldBase\n          ref={setInputRef}\n          {...searchFieldProps}\n          onChange={handleInputChange}\n          id={inputId}\n          wrapperStyle={autocomplete.anchorStyle}\n          {...autocomplete.inputProps}\n        />\n        {autocomplete.isOpen && (\n          <Listbox {...autocomplete.listboxProps} className={cx(`${rootClassName}__listbox`)}>\n            {suggestions.map((option, index) => {\n              const { key, ...listboxItemProps } = autocomplete.getListboxItemProps(option, index);\n\n              return (\n                <Listbox.Item key={key} {...listboxItemProps}>\n                  {option.label}\n                </Listbox.Item>\n              );\n            })}\n          </Listbox>\n        )}\n      </div>\n    );\n  }\n);\n\nSearchFieldAutocomplete.displayName = \"SearchFieldAutocomplete\";\n","import React, { forwardRef } from \"react\";\n\nimport { SearchFieldAutocomplete } from \"./search-field-autocomplete\";\nimport {\n  type SearchFieldAutocompleteEnhancements,\n  SearchFieldBase,\n  type SearchFieldBaseProps,\n  searchFieldVariants,\n} from \"./search-field-base\";\n\nexport { searchFieldVariants };\n\nexport type SearchFieldProps = SearchFieldBaseProps & SearchFieldAutocompleteEnhancements;\n\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>((props, ref) => {\n  if (props.suggestions) {\n    return <SearchFieldAutocomplete ref={ref} {...props} />;\n  }\n\n  return <SearchFieldBase ref={ref} {...props} />;\n});\n\nSearchField.displayName = \"SearchField\";\n\nexport {\n  SearchFieldAutocomplete,\n  type SearchFieldAutocompleteProps,\n} from \"./search-field-autocomplete\";\n"],"names":["cx","c","styles","rootClassName","SearchFieldButton","dataTestid","disabled","iconOnly","label","type","onClick","buttonProps","Button","IconSearch","jsx","searchFieldVariants","SearchFieldBase","forwardRef","dataTestId","className","clearButtonAriaLabel","submitBehavior","iconOnlySearchButton","onClear","onSearch","searchButtonLabel","variant","formRef","wrapperStyle","props","ref","getTestId","name","hasClearButton","isManualSubmit","classes","textFieldProps","searchButton","event","handleKeyDown","TextField","e","SearchFieldAutocomplete","suggestions","suggestionsLabel","onSelectSuggestion","openSuggestionsOnFocus","suggestionsMaxHeight","searchFieldProps","randomId","useId","inputId","autocomplete","useAutocomplete","setInputRef","node","handleInputChange","jsxs","Listbox","option","index","key","listboxItemProps","SearchField"],"mappings":"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"}

package/dist/search-field-DKyNh7pE.mjs

@@ -0,0 +1,167 @@
+import { jsx as t, jsxs as V } from "react/jsx-runtime";
+import { forwardRef as $, useId as j } from "react";
+import { L as F } from "./listbox-i6BQQ-NZ.mjs";
+import { t as M } from "./use-autocomplete.es-CKb0RHKG.mjs";
+import { c as g } from "./bind-CU-R61T-.mjs";
+import { s as z } from "./search.es-DoFKg2Hr.mjs";
+import { T as I } from "./text-field-BQfxJobW.mjs";
+import { b as O } from "./button-4-yWOgtD.mjs";
+const R = {
+  "purpur-search-field": "_purpur-search-field_1wc77_1",
+  "purpur-search-field--has-clear-button": "_purpur-search-field--has-clear-button_1wc77_4",
+  "purpur-search-field--no-gap": "_purpur-search-field--no-gap_1wc77_13",
+  "purpur-search-field__wrapper": "_purpur-search-field__wrapper_1wc77_17",
+  "purpur-search-field__wrapper--gap": "_purpur-search-field__wrapper--gap_1wc77_20",
+  "purpur-search-field__search-icon": "_purpur-search-field__search-icon_1wc77_24",
+  "purpur-search-field__close-icon": "_purpur-search-field__close-icon_1wc77_24",
+  "purpur-search-field__autocomplete-root": "_purpur-search-field__autocomplete-root_1wc77_27",
+  "purpur-search-field__listbox": "_purpur-search-field__listbox_1wc77_31"
+}, P = {
+  "purpur-search-field-button": "_purpur-search-field-button_c16yo_1",
+  "purpur-search-field-button--icon-only": "_purpur-search-field-button--icon-only_c16yo_1"
+}, E = g.bind(P), B = "purpur-search-field-button", H = ({
+  ["data-testid"]: r,
+  disabled: n,
+  iconOnly: l,
+  label: i,
+  type: u = "submit",
+  onClick: s
+}) => {
+  const o = {
+    className: E(B, {
+      [`${B}--icon-only`]: l
+    }),
+    disabled: n,
+    "data-testid": r,
+    onClick: s
+  };
+  return l ? /* @__PURE__ */ t(O, { ...o, "aria-label": i, iconOnly: !0, size: "sm", type: u, variant: "primary", children: /* @__PURE__ */ t(z, { size: "xs" }) }) : /* @__PURE__ */ t(O, { ...o, size: "sm", type: u, variant: "primary", children: i });
+}, Z = ["button-attached", "no-button"], b = g.bind(R), p = "purpur-search-field", N = $(
+  ({
+    ["data-testid"]: r,
+    className: n,
+    clearButtonAriaLabel: l,
+    disabled: i,
+    submitBehavior: u = "form",
+    iconOnlySearchButton: s,
+    onClear: o,
+    onSearch: d,
+    searchButtonLabel: f,
+    variant: a,
+    formRef: y,
+    wrapperStyle: h,
+    ...e
+  }, x) => {
+    const m = (c) => r ? `${r}-${c}` : void 0, A = (typeof e.value == "number" ? e.value !== void 0 : e.value?.length) && !i && !e.readOnly && !e.loading, w = u === "manual", K = b(n, p, {
+      [`${p}--no-gap`]: a === "button-attached",
+      [`${p}--has-clear-button`]: A
+    }), v = {
+      ref: x,
+      className: K,
+      clearButtonAriaLabel: l,
+      disabled: i,
+      onClear: o,
+      startAdornment: s ? null : /* @__PURE__ */ t(z, { size: "xs", className: b(`${p}__search-icon`) }, "1"),
+      "data-testid": m("text-field"),
+      type: "search",
+      ...e
+    }, C = a !== "no-button" ? /* @__PURE__ */ t(
+      H,
+      {
+        type: w ? "button" : "submit",
+        onClick: w ? (c) => d?.(c) : void 0,
+        disabled: i,
+        iconOnly: s,
+        label: f,
+        "data-testid": m("button")
+      }
+    ) : null;
+    if (w) {
+      const c = (_) => {
+        e.onKeyDown?.(_), _.key === "Enter" && !_.defaultPrevented && (_.preventDefault(), d?.(_));
+      };
+      return /* @__PURE__ */ t(
+        "div",
+        {
+          className: b(`${p}__wrapper`),
+          "data-testid": r,
+          style: h,
+          children: /* @__PURE__ */ t(I, { ...v, onKeyDown: c, afterField: C })
+        }
+      );
+    }
+    return /* @__PURE__ */ t(
+      "form",
+      {
+        ref: y,
+        className: b(`${p}__wrapper`),
+        "data-testid": r,
+        style: h,
+        onSubmit: (c) => {
+          c.preventDefault(), d?.(c);
+        },
+        children: /* @__PURE__ */ t(I, { ...v, afterField: C })
+      }
+    );
+  }
+);
+N.displayName = "SearchFieldBase";
+const D = g.bind(R), L = "purpur-search-field", k = $(
+  ({
+    suggestions: r,
+    suggestionsLabel: n,
+    onSelectSuggestion: l,
+    openSuggestionsOnFocus: i,
+    suggestionsMaxHeight: u,
+    ...s
+  }, o) => {
+    const d = j(), f = s.id ?? d, a = M({
+      id: f,
+      options: r,
+      listboxLabel: n,
+      disabled: s.disabled,
+      readOnly: s.readOnly,
+      openOnFocus: i,
+      listboxMaxHeight: u,
+      onSelect: l,
+      "data-testid": s["data-testid"]
+    }), y = (e) => {
+      a.inputRef.current = e, typeof o == "function" ? o(e) : o && (o.current = e);
+    }, h = (e) => {
+      s.onChange?.(e), a.isOpen || a.openListbox();
+    };
+    return /* @__PURE__ */ V(
+      "div",
+      {
+        ref: a.rootRef,
+        className: D(`${L}__autocomplete-root`),
+        children: [
+          /* @__PURE__ */ t(
+            N,
+            {
+              ref: y,
+              ...s,
+              onChange: h,
+              id: f,
+              wrapperStyle: a.anchorStyle,
+              ...a.inputProps
+            }
+          ),
+          a.isOpen && /* @__PURE__ */ t(F, { ...a.listboxProps, className: D(`${L}__listbox`), children: r.map((e, x) => {
+            const { key: m, ...S } = a.getListboxItemProps(e, x);
+            return /* @__PURE__ */ t(F.Item, { ...S, children: e.label }, m);
+          }) })
+        ]
+      }
+    );
+  }
+);
+k.displayName = "SearchFieldAutocomplete";
+const q = $((r, n) => r.suggestions ? /* @__PURE__ */ t(k, { ref: n, ...r }) : /* @__PURE__ */ t(N, { ref: n, ...r }));
+q.displayName = "SearchField";
+export {
+  q as S,
+  k as a,
+  Z as s
+};
+//# sourceMappingURL=search-field-DKyNh7pE.mjs.map

package/dist/search-field-DKyNh7pE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field-DKyNh7pE.mjs","sources":["../../../components/search-field/src/search-field-button.tsx","../../../components/search-field/src/search-field-base.tsx","../../../components/search-field/src/search-field-autocomplete.tsx","../../../components/search-field/src/search-field.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@purpur/button\";\nimport { IconSearch } from \"@purpur/icon/search\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field-button.module.scss\";\n\ntype Props = {\n  [\"data-testid\"]?: string;\n  disabled?: boolean;\n  iconOnly?: boolean;\n  label: string;\n  type?: \"submit\" | \"button\";\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n};\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field-button\";\n\nexport const SearchFieldButton = ({\n  [\"data-testid\"]: dataTestid,\n  disabled,\n  iconOnly,\n  label,\n  type = \"submit\",\n  onClick,\n}: Props) => {\n  const buttonProps = {\n    className: cx(rootClassName, {\n      [`${rootClassName}--icon-only`]: iconOnly,\n    }),\n    disabled,\n    [\"data-testid\"]: dataTestid,\n    onClick,\n  };\n\n  if (iconOnly) {\n    return (\n      <Button {...buttonProps} aria-label={label} iconOnly size=\"sm\" type={type} variant=\"primary\">\n        <IconSearch size=\"xs\" />\n      </Button>\n    );\n  }\n\n  return (\n    <Button {...buttonProps} size=\"sm\" type={type} variant=\"primary\">\n      {label}\n    </Button>\n  );\n};\n","import React, {\n  type ChangeEvent,\n  type CSSProperties,\n  type FormEvent,\n  forwardRef,\n  type RefObject,\n} from \"react\";\nimport { IconSearch } from \"@purpur/icon/search\";\nimport { TextField, type TextFieldProps } from \"@purpur/text-field\";\nimport { type AutocompleteOption } from \"@purpur/use-autocomplete\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field.module.scss\";\nimport { SearchFieldButton } from \"./search-field-button\";\n\nexport const searchFieldVariants = [\"button-attached\", \"no-button\"] as const;\n\ntype Variant = (typeof searchFieldVariants)[number];\n\ntype DefaultProps = {\n  [\"data-testid\"]?: string;\n  /**\n   * An accessible label for the clear button.\n   * */\n  clearButtonAriaLabel: string;\n  /**\n   * Disables both the input field and submit button if `true`.\n   * */\n  disabled?: boolean;\n  /**\n   * Will display only a search icon in the search button if `true`.\n   * */\n  iconOnlySearchButton?: boolean;\n  /**\n   * Event handler called when the value of the search field changes.\n   * */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * Event handler called when the clear button is clicked.\n   * */\n  onClear: () => void;\n  /**\n   * Event handler called when the search is triggered.\n   * */\n  onSearch?: (event?: React.SyntheticEvent) => void;\n  /**\n   * Controls how the search field handles submission.\n   * - `\"form\"` (default): Renders a `<form>` element and submits via form submission.\n   * - `\"manual\"`: Renders a `<div>` instead of a `<form>` element.\n   *   Use this when the component is nested inside another form.\n   * */\n  submitBehavior?: \"form\" | \"manual\";\n  /**\n   * The label text (or `aria-label` if `iconOnlySearchButton` is `true`) of the search button.\n   * */\n  searchButtonLabel?: string;\n  variant: Variant;\n  formRef?: RefObject<HTMLFormElement>;\n};\n\ntype TextSearchButton = {\n  iconOnlySearchButton?: false;\n  searchButtonLabel: string;\n  variant: \"button-attached\";\n};\n\ntype IconOnlySearchButton = {\n  iconOnlySearchButton: true;\n  searchButtonLabel: string;\n  variant: \"button-attached\";\n};\n\ntype NoButton = {\n  searchButtonLabel?: never;\n  variant: \"no-button\";\n};\n\nexport type SearchFieldBaseProps = DefaultProps &\n  (TextSearchButton | IconOnlySearchButton | NoButton) &\n  Omit<TextFieldProps, \"startAdornment\" | \"endAdornment\" | \"afterField\" | \"onChange\" | \"variant\">;\n\ntype SearchFieldBaseInternalProps = SearchFieldBaseProps & {\n  wrapperStyle?: CSSProperties;\n};\n\ntype SearchFieldAutocompleteSharedProps = {\n  /**\n   * Called when the user selects a suggestion.\n   */\n  onSelectSuggestion?: (option: AutocompleteOption) => void;\n  /**\n   * Open the suggestions listbox when the input receives focus.\n   */\n  openSuggestionsOnFocus?: boolean;\n  /**\n   * Maximum height of the suggestions listbox. A number is interpreted as px.\n   */\n  suggestionsMaxHeight?: string | number;\n};\n\ntype SearchFieldWithoutAutocomplete = SearchFieldAutocompleteSharedProps & {\n  suggestions?: never;\n  suggestionsLabel?: never;\n};\n\ntype SearchFieldWithAutocomplete = SearchFieldAutocompleteSharedProps & {\n  /**\n   * The list of suggestions to display in a listbox below the field.\n   * No filtering is applied — pass the already-correct (pre-filtered) list.\n   * If autocomplete should stay enabled while there are temporarily no matches,\n   * pass an empty array instead of `undefined` or `null`. Changing this prop\n   * from an absent value to an array switches between the regular and\n   * autocomplete variants, which causes a re-render, drops input focus, and\n   * hides the listbox.\n   */\n  suggestions: AutocompleteOption[];\n  /**\n   * Accessible label for the suggestions listbox.\n   */\n  suggestionsLabel: string;\n};\n\nexport type SearchFieldAutocompleteEnhancements =\n  | SearchFieldWithoutAutocomplete\n  | SearchFieldWithAutocomplete;\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field\";\n\nexport const SearchFieldBase = forwardRef<HTMLInputElement, SearchFieldBaseInternalProps>(\n  (\n    {\n      [\"data-testid\"]: dataTestId,\n      className,\n      clearButtonAriaLabel,\n      disabled,\n      submitBehavior = \"form\",\n      iconOnlySearchButton,\n      onClear,\n      onSearch,\n      searchButtonLabel,\n      variant,\n      formRef,\n      wrapperStyle,\n      ...props\n    },\n    ref\n  ) => {\n    const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);\n    const hasValue =\n      typeof props.value === \"number\" ? props.value !== undefined : props.value?.length;\n    const hasClearButton = hasValue && !disabled && !props.readOnly && !props.loading;\n    const isManualSubmit = submitBehavior === \"manual\";\n\n    const classes = cx(className, rootClassName, {\n      [`${rootClassName}--no-gap`]: variant === \"button-attached\",\n      [`${rootClassName}--has-clear-button`]: hasClearButton,\n    });\n\n    const textFieldProps: TextFieldProps = {\n      ref,\n      className: classes,\n      clearButtonAriaLabel,\n      disabled,\n      onClear,\n      startAdornment: !iconOnlySearchButton ? (\n        <IconSearch size=\"xs\" className={cx(`${rootClassName}__search-icon`)} key=\"1\" />\n      ) : null,\n      \"data-testid\": getTestId(\"text-field\"),\n      type: \"search\" as const,\n      ...props,\n    };\n\n    const searchButton =\n      variant !== \"no-button\" ? (\n        <SearchFieldButton\n          type={isManualSubmit ? \"button\" : \"submit\"}\n          onClick={isManualSubmit ? (event) => onSearch?.(event) : undefined}\n          disabled={disabled}\n          iconOnly={iconOnlySearchButton}\n          label={searchButtonLabel}\n          data-testid={getTestId(\"button\")}\n        />\n      ) : null;\n\n    if (isManualSubmit) {\n      const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (event.key === \"Enter\" && !event.defaultPrevented) {\n          event.preventDefault();\n          onSearch?.(event);\n        }\n      };\n\n      return (\n        <div\n          className={cx(`${rootClassName}__wrapper`)}\n          data-testid={dataTestId}\n          style={wrapperStyle}\n        >\n          <TextField {...textFieldProps} onKeyDown={handleKeyDown} afterField={searchButton} />\n        </div>\n      );\n    }\n\n    return (\n      <form\n        ref={formRef}\n        className={cx(`${rootClassName}__wrapper`)}\n        data-testid={dataTestId}\n        style={wrapperStyle}\n        onSubmit={(e: FormEvent<HTMLFormElement>) => {\n          e.preventDefault();\n          onSearch?.(e);\n        }}\n      >\n        <TextField {...textFieldProps} afterField={searchButton} />\n      </form>\n    );\n  }\n);\n\nSearchFieldBase.displayName = \"SearchFieldBase\";\n","import React, { forwardRef, useId } from \"react\";\nimport { Listbox } from \"@purpur/listbox\";\nimport { type AutocompleteOption, useAutocomplete } from \"@purpur/use-autocomplete\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field.module.scss\";\nimport {\n  type SearchFieldAutocompleteEnhancements,\n  SearchFieldBase,\n  type SearchFieldBaseProps,\n} from \"./search-field-base\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field\";\n\nexport type SearchFieldAutocompleteProps = SearchFieldBaseProps &\n  Extract<SearchFieldAutocompleteEnhancements, { suggestions: AutocompleteOption[] }>;\n\nexport const SearchFieldAutocomplete = forwardRef<HTMLInputElement, SearchFieldAutocompleteProps>(\n  (\n    {\n      suggestions,\n      suggestionsLabel,\n      onSelectSuggestion,\n      openSuggestionsOnFocus,\n      suggestionsMaxHeight,\n      ...searchFieldProps\n    },\n    ref\n  ) => {\n    const randomId = useId();\n    const inputId = (searchFieldProps.id as string | undefined) ?? randomId;\n\n    const autocomplete = useAutocomplete({\n      id: inputId,\n      options: suggestions,\n      listboxLabel: suggestionsLabel,\n      disabled: searchFieldProps.disabled,\n      readOnly: searchFieldProps.readOnly,\n      openOnFocus: openSuggestionsOnFocus,\n      listboxMaxHeight: suggestionsMaxHeight,\n      onSelect: onSelectSuggestion,\n      [\"data-testid\"]: searchFieldProps[\"data-testid\"],\n    });\n\n    const setInputRef = (node: HTMLInputElement | null) => {\n      (autocomplete.inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node;\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n    };\n\n    const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n      searchFieldProps.onChange?.(event);\n      if (!autocomplete.isOpen) {\n        autocomplete.openListbox();\n      }\n    };\n\n    return (\n      <div\n        ref={autocomplete.rootRef as React.RefObject<HTMLDivElement>}\n        className={cx(`${rootClassName}__autocomplete-root`)}\n      >\n        <SearchFieldBase\n          ref={setInputRef}\n          {...searchFieldProps}\n          onChange={handleInputChange}\n          id={inputId}\n          wrapperStyle={autocomplete.anchorStyle}\n          {...autocomplete.inputProps}\n        />\n        {autocomplete.isOpen && (\n          <Listbox {...autocomplete.listboxProps} className={cx(`${rootClassName}__listbox`)}>\n            {suggestions.map((option, index) => {\n              const { key, ...listboxItemProps } = autocomplete.getListboxItemProps(option, index);\n\n              return (\n                <Listbox.Item key={key} {...listboxItemProps}>\n                  {option.label}\n                </Listbox.Item>\n              );\n            })}\n          </Listbox>\n        )}\n      </div>\n    );\n  }\n);\n\nSearchFieldAutocomplete.displayName = \"SearchFieldAutocomplete\";\n","import React, { forwardRef } from \"react\";\n\nimport { SearchFieldAutocomplete } from \"./search-field-autocomplete\";\nimport {\n  type SearchFieldAutocompleteEnhancements,\n  SearchFieldBase,\n  type SearchFieldBaseProps,\n  searchFieldVariants,\n} from \"./search-field-base\";\n\nexport { searchFieldVariants };\n\nexport type SearchFieldProps = SearchFieldBaseProps & SearchFieldAutocompleteEnhancements;\n\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>((props, ref) => {\n  if (props.suggestions) {\n    return <SearchFieldAutocomplete ref={ref} {...props} />;\n  }\n\n  return <SearchFieldBase ref={ref} {...props} />;\n});\n\nSearchField.displayName = \"SearchField\";\n\nexport {\n  SearchFieldAutocomplete,\n  type SearchFieldAutocompleteProps,\n} from \"./search-field-autocomplete\";\n"],"names":["cx","c","styles","rootClassName","SearchFieldButton","dataTestid","disabled","iconOnly","label","type","onClick","buttonProps","Button","IconSearch","jsx","searchFieldVariants","SearchFieldBase","forwardRef","dataTestId","className","clearButtonAriaLabel","submitBehavior","iconOnlySearchButton","onClear","onSearch","searchButtonLabel","variant","formRef","wrapperStyle","props","ref","getTestId","name","hasClearButton","isManualSubmit","classes","textFieldProps","searchButton","event","handleKeyDown","TextField","e","SearchFieldAutocomplete","suggestions","suggestionsLabel","onSelectSuggestion","openSuggestionsOnFocus","suggestionsMaxHeight","searchFieldProps","randomId","useId","inputId","autocomplete","useAutocomplete","setInputRef","node","handleInputChange","jsxs","Listbox","option","index","key","listboxItemProps","SearchField"],"mappings":"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"}

package/dist/search-field.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./search-field-Z0PqDARl.js");exports.SearchField=e.SearchField;exports.SearchFieldAutocomplete=e.SearchFieldAutocomplete;exports.searchFieldVariants=e.searchFieldVariants;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./search-field-2vdDbiT0.js");exports.SearchField=e.SearchField;exports.SearchFieldAutocomplete=e.SearchFieldAutocomplete;exports.searchFieldVariants=e.searchFieldVariants;
 //# sourceMappingURL=search-field.cjs.js.map

package/dist/search-field.es.js

@@ -1,4 +1,4 @@
-import { S as r, a as s, s as c } from "./search-field-CpkHGIYi.mjs";
+import { S as r, a as s, s as c } from "./search-field-DKyNh7pE.mjs";
 export {
   r as SearchField,
   s as SearchFieldAutocomplete,

package/dist/{stepper-CWR2vGPj.mjs → stepper-BDsSa6yr.mjs}

@@ -6,7 +6,7 @@ import { n as tr } from "./chevron-right.es-D7aVK4ER.mjs";
 import { I as er, R as H } from "./index-IpWiejWQ.mjs";
 import { R as sr, V as pr, S as nr, T as or } from "./index-B8Mazo6u.mjs";
 import { c as L } from "./bind-CU-R61T-.mjs";
-import { b as ir } from "./tooltip-LU2Cy-QC.mjs";
+import { b as ir } from "./tooltip-RA-03bKs.mjs";
 import { a as lr } from "./checkmark.es-DdgIZN2R.mjs";
 const ur = {
   PRIMARY: "primary"
@@ -446,4 +446,4 @@ D.displayName = "Stepper";
 export {
   D as S
 };
-//# sourceMappingURL=stepper-CWR2vGPj.mjs.map
+//# sourceMappingURL=stepper-BDsSa6yr.mjs.map