@chassis-ui/react 0.5.0 → 0.6.0

package/dist/chunks/{text-input-CR73x-8D.js.map → text-input-D3jBYiLn.js.map}

@@ -1 +1 @@
-{"version":3,"file":"text-input-CR73x-8D.js","names":["useForkedRef","useHeldBack","renderFormField","validationClassName","mergeUnhandledProps","TEXT_FIELD_PROPS","React","classNames","TextInput","forwardRef","invalidProp","validProp","rest","inputRef","useRef","forkedRef","ref","useFormField","useTextField","describedBy","labelledBy","inputId","disabled","invalid","readOnly","hasAdorn","adornStart","adornEnd","inputClassName","plainText","size","valid","className","input","inputProps","style","children","feedbackId","helpId","labelId"],"sources":["../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import React, { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react'\nimport classNames from 'classnames'\nimport { AriaTextFieldProps, useTextField } from 'react-aria'\n\nimport { useForkedRef, useFormField, useHeldBack } from '../../hooks'\nimport { mergeUnhandledProps, TEXT_FIELD_PROPS } from '../../utils/unhandledProps'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { renderFormField } from '../form-field/renderFormField'\n\nexport interface TextInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> {\n  /**\n   * Content rendered at the input's trailing edge, e.g. a `InputAdorn` icon, text, or button.\n   * Setting either `adornStart` or `adornEnd` renders a `.form-input` wrapper around a\n   * `.ghost-input`, matching chassis-css's [input help](https://chassis-ui.com/css/docs/forms/input-adorn) pattern.\n   */\n  adornEnd?: ReactNode\n  /**\n   * Content rendered at the input's leading edge, e.g. a `InputAdorn` icon, text, or button.\n   * Setting either `adornStart` or `adornEnd` renders a `.form-input` wrapper around a\n   * `.ghost-input`, matching chassis-css's [input help](https://chassis-ui.com/css/docs/forms/input-adorn) pattern.\n   */\n  adornStart?: ReactNode\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * The value of the input, uncontrolled.\n   */\n  defaultValue?: string\n  /**\n   * Toggle the disabled state for the component.\n   */\n  disabled?: boolean\n  /**\n   * A description for the field, rendered below the input.\n   */\n  help?: ReactNode\n  /**\n   * Set component validation state to invalid. Left unset, the component shows as invalid by itself\n   * from a submit it held back (an empty `required` one, say) until it no longer would, or its\n   * form is reset. Set it, to `false` too, and it alone decides.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the input when `invalid` is set, and after a\n   * submit the field held back, until it no longer would.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with this input.\n   */\n  label?: ReactNode\n  /**\n   * Handler that is called when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly` [docs]\n   */\n  plainText?: boolean\n  /**\n   * Toggle the readonly state for the component.\n   */\n  readOnly?: boolean\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Specifies the type of component. For `color` or `file` inputs, use the dedicated `ColorInput` or `FileInput` components instead.\n   */\n  type?:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'month'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'\n    | 'week'\n    | (string & {})\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the input when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The value of the input, controlled.\n   */\n  value?: string\n}\n\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  (\n    {\n      adornEnd,\n      adornStart,\n      className,\n      disabled,\n      help,\n      id,\n      invalid: invalidProp,\n      invalidFeedback,\n      label,\n      plainText,\n      readOnly,\n      size,\n      style,\n      type = 'text',\n      valid: validProp,\n      validFeedback,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null)\n    const forkedRef = useForkedRef(ref, inputRef)\n    // Shown as invalid from a submit it held back until it no longer would (`useHeldBack`):\n    // react-aria cancels the browser's own message, and the form stayed with nothing to say why.\n    const { invalid, valid } = useHeldBack(inputRef, { invalid: invalidProp, valid: validProp })\n\n    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    const { inputProps } = useTextField(\n      {\n        ...rest,\n        'aria-describedby': describedBy,\n        'aria-labelledby': labelledBy,\n        id: inputId,\n        isDisabled: disabled,\n        isInvalid: invalid,\n        isReadOnly: readOnly,\n        type\n      } as AriaTextFieldProps,\n      inputRef\n    )\n\n    const hasAdorn = adornStart != null || adornEnd != null\n\n    // chassis-css's `.form-input:has(.ghost-input.is-valid)` selector reads validation state off\n    // the inner input, not the wrapper, once adorns turn `.form-input` into a flex container - see\n    // https://chassis-ui.com/css/docs/forms/input-adorn.\n    const inputClassName = classNames(\n      hasAdorn ? 'ghost-input' : 'form-input',\n      !hasAdorn && plainText && 'plaintext',\n      !hasAdorn && size,\n      validationClassName(invalid, valid),\n      !hasAdorn && className\n    )\n\n    // `aria-describedby` after the spread: react-aria's own adds ids it never renders (FORMS.md,\n    // gotcha 6). `style` goes where `className` does, on the outermost element.\n    const input = (\n      <input\n        {...mergeUnhandledProps(inputProps, rest, TEXT_FIELD_PROPS)}\n        aria-describedby={describedBy}\n        className={inputClassName}\n        ref={forkedRef}\n        style={hasAdorn ? undefined : style}\n      />\n    )\n\n    const children = hasAdorn ? (\n      <div\n        className={classNames('form-input', plainText && 'plaintext', size, className)}\n        style={style}\n      >\n        {adornStart}\n        {input}\n        {adornEnd}\n      </div>\n    ) : (\n      input\n    )\n\n    return renderFormField({\n      children,\n      help,\n      ids: { feedback: feedbackId, help: helpId, input: inputId, label: labelId },\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n  }\n)\n\nTextInput.displayName = 'TextInput'\n"],"mappings":"A,8bAsGA,MAAaQ,EAAYC,GAErB,CACE,WACA,aACA,YACA,WACA,OACA,KACA,QAASC,EACT,kBACA,QACA,YACA,WACA,OACA,QACA,OAAO,OACP,MAAOC,EACP,gBACA,GAAGC,GAEL,IACG,CACH,IAAMC,EAAWC,EAAyB,IAAI,EACxCC,EAAYf,EAAagB,EAAKH,CAAQ,EAGtC,CAAE,UAAS,SAAUZ,EAAYY,EAAU,CAAE,QAASH,EAAa,MAAOC,CAAU,CAAC,EAErF,CAAE,cAAa,aAAY,SAAQ,UAAS,UAAS,cAAeM,EAAa,CACrF,gBAAiBL,EAAK,oBACtB,eAAgBA,EAAK,mBACrB,OACA,KACA,UACA,kBACA,QACA,QACA,eACF,CAAC,EAEK,CAAE,cAAeM,EACrB,CACE,GAAGN,EACH,mBAAoBO,EACpB,kBAAmBC,EACnB,GAAIC,EACJ,WAAYC,EACZ,UAAWC,EACX,WAAYC,EACZ,MACF,EACAX,CACF,EAEMY,EAAWC,GAAc,MAAQC,GAAY,KAK7CC,EAAiBrB,EACrBkB,EAAW,cAAgB,aAC3B,CAACA,GAAYI,GAAa,YAC1B,CAACJ,GAAYK,EACb3B,EAAoBoB,EAASQ,CAAK,EAClC,CAACN,GAAYO,CACf,EAIMC,EACJ,kBAAA,cAAC,QAAD,CACE,GAAI7B,EAAoB8B,EAAYtB,EAAMP,CAAgB,EAC1D,mBAAkBc,EAClB,UAAWS,EACX,IAAKb,EACL,MAAOU,EAAW,IAAA,GAAYU,CAC/B,CAAA,EAGGC,EAAWX,EACf,kBAAA,cAAC,MAAD,CACE,UAAWlB,EAAW,aAAcsB,GAAa,YAAaC,EAAME,CAAS,EACtE,OAKJ,EAHFN,EACAO,EACAN,CACE,EAELM,EAGF,OAAO/B,EAAgB,CACrB,WACA,OACA,IAAK,CAAE,SAAUmC,EAAY,KAAMC,EAAQ,MAAOjB,EAAS,MAAOkB,CAAQ,EAC1E,UACA,kBACA,QACA,QACA,eACF,CAAC,CACH,CACF,EAEA,EAAU,YAAc,Y"}
+{"version":3,"file":"text-input-D3jBYiLn.js","names":["useForkedRef","useHeldBack","renderFormField","validationClassName","mergeUnhandledProps","TEXT_FIELD_PROPS","React","classNames","TextInput","forwardRef","invalidProp","validProp","rest","inputRef","useRef","forkedRef","ref","useFormField","useTextField","describedBy","labelledBy","inputId","disabled","invalid","readOnly","hasAdorn","adornStart","adornEnd","inputClassName","plainText","size","valid","className","input","inputProps","style","children","feedbackId","helpId","labelId"],"sources":["../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import React, { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react'\nimport classNames from 'classnames'\nimport { AriaTextFieldProps, useTextField } from 'react-aria'\n\nimport { useForkedRef, useFormField, useHeldBack } from '../../hooks'\nimport { mergeUnhandledProps, TEXT_FIELD_PROPS } from '../../utils/unhandledProps'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { renderFormField } from '../form-field/renderFormField'\n\nexport interface TextInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> {\n  /**\n   * Content rendered at the input's trailing edge, e.g. a `InputAdorn` icon, text, or button.\n   * Setting either `adornStart` or `adornEnd` renders a `.form-input` wrapper around a\n   * `.ghost-input`, matching chassis-css's [input help](https://chassis-ui.com/css/docs/forms/input-adorn) pattern.\n   */\n  adornEnd?: ReactNode\n  /**\n   * Content rendered at the input's leading edge, e.g. a `InputAdorn` icon, text, or button.\n   * Setting either `adornStart` or `adornEnd` renders a `.form-input` wrapper around a\n   * `.ghost-input`, matching chassis-css's [input help](https://chassis-ui.com/css/docs/forms/input-adorn) pattern.\n   */\n  adornStart?: ReactNode\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * The value of the input, uncontrolled.\n   */\n  defaultValue?: string\n  /**\n   * Toggle the disabled state for the component.\n   */\n  disabled?: boolean\n  /**\n   * A description for the field, rendered below the input.\n   */\n  help?: ReactNode\n  /**\n   * Set component validation state to invalid. Left unset, the component shows as invalid by itself\n   * from a submit it held back (an empty `required` one, say) until it no longer would, or its\n   * form is reset. Set it, to `false` too, and it alone decides.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the input when `invalid` is set, and after a\n   * submit the field held back, until it no longer would.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with this input.\n   */\n  label?: ReactNode\n  /**\n   * Handler that is called when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly` [docs]\n   */\n  plainText?: boolean\n  /**\n   * Toggle the readonly state for the component.\n   */\n  readOnly?: boolean\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Specifies the type of component. For `color` or `file` inputs, use the dedicated `ColorInput` or `FileInput` components instead.\n   */\n  type?:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'month'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'\n    | 'week'\n    | (string & {})\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the input when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The value of the input, controlled.\n   */\n  value?: string\n}\n\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  (\n    {\n      adornEnd,\n      adornStart,\n      className,\n      disabled,\n      help,\n      id,\n      invalid: invalidProp,\n      invalidFeedback,\n      label,\n      plainText,\n      readOnly,\n      size,\n      style,\n      type = 'text',\n      valid: validProp,\n      validFeedback,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null)\n    const forkedRef = useForkedRef(ref, inputRef)\n    // Shown as invalid from a submit it held back until it no longer would (`useHeldBack`):\n    // react-aria cancels the browser's own message, and the form stayed with nothing to say why.\n    const { invalid, valid } = useHeldBack(inputRef, { invalid: invalidProp, valid: validProp })\n\n    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    const { inputProps } = useTextField(\n      {\n        ...rest,\n        'aria-describedby': describedBy,\n        'aria-labelledby': labelledBy,\n        id: inputId,\n        isDisabled: disabled,\n        isInvalid: invalid,\n        isReadOnly: readOnly,\n        type\n      } as AriaTextFieldProps,\n      inputRef\n    )\n\n    const hasAdorn = adornStart != null || adornEnd != null\n\n    // chassis-css's `.form-input:has(.ghost-input.is-valid)` selector reads validation state off\n    // the inner input, not the wrapper, once adorns turn `.form-input` into a flex container - see\n    // https://chassis-ui.com/css/docs/forms/input-adorn.\n    const inputClassName = classNames(\n      hasAdorn ? 'ghost-input' : 'form-input',\n      !hasAdorn && plainText && 'plaintext',\n      !hasAdorn && size,\n      validationClassName(invalid, valid),\n      !hasAdorn && className\n    )\n\n    // `aria-describedby` after the spread: react-aria's own adds ids it never renders (FORMS.md,\n    // gotcha 6). `style` goes where `className` does, on the outermost element.\n    const input = (\n      <input\n        {...mergeUnhandledProps(inputProps, rest, TEXT_FIELD_PROPS)}\n        aria-describedby={describedBy}\n        className={inputClassName}\n        ref={forkedRef}\n        style={hasAdorn ? undefined : style}\n      />\n    )\n\n    const children = hasAdorn ? (\n      <div\n        className={classNames('form-input', plainText && 'plaintext', size, className)}\n        style={style}\n      >\n        {adornStart}\n        {input}\n        {adornEnd}\n      </div>\n    ) : (\n      input\n    )\n\n    return renderFormField({\n      children,\n      help,\n      ids: { feedback: feedbackId, help: helpId, input: inputId, label: labelId },\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n  }\n)\n\nTextInput.displayName = 'TextInput'\n"],"mappings":"A,8bAsGA,MAAaQ,EAAYC,GAErB,CACE,WACA,aACA,YACA,WACA,OACA,KACA,QAASC,EACT,kBACA,QACA,YACA,WACA,OACA,QACA,OAAO,OACP,MAAOC,EACP,gBACA,GAAGC,GAEL,IACG,CACH,IAAMC,EAAWC,EAAyB,IAAI,EACxCC,EAAYf,EAAagB,EAAKH,CAAQ,EAGtC,CAAE,UAAS,SAAUZ,EAAYY,EAAU,CAAE,QAASH,EAAa,MAAOC,CAAU,CAAC,EAErF,CAAE,cAAa,aAAY,SAAQ,UAAS,UAAS,cAAeM,EAAa,CACrF,gBAAiBL,EAAK,oBACtB,eAAgBA,EAAK,mBACrB,OACA,KACA,UACA,kBACA,QACA,QACA,eACF,CAAC,EAEK,CAAE,cAAeM,EACrB,CACE,GAAGN,EACH,mBAAoBO,EACpB,kBAAmBC,EACnB,GAAIC,EACJ,WAAYC,EACZ,UAAWC,EACX,WAAYC,EACZ,MACF,EACAX,CACF,EAEMY,EAAWC,GAAc,MAAQC,GAAY,KAK7CC,EAAiBrB,EACrBkB,EAAW,cAAgB,aAC3B,CAACA,GAAYI,GAAa,YAC1B,CAACJ,GAAYK,EACb3B,EAAoBoB,EAASQ,CAAK,EAClC,CAACN,GAAYO,CACf,EAIMC,EACJ,kBAAA,cAAC,QAAD,CACE,GAAI7B,EAAoB8B,EAAYtB,EAAMP,CAAgB,EAC1D,mBAAkBc,EAClB,UAAWS,EACX,IAAKb,EACL,MAAOU,EAAW,IAAA,GAAYU,CAC/B,CAAA,EAGGC,EAAWX,EACf,kBAAA,cAAC,MAAD,CACE,UAAWlB,EAAW,aAAcsB,GAAa,YAAaC,EAAME,CAAS,EACtE,OAKJ,EAHFN,EACAO,EACAN,CACE,EAELM,EAGF,OAAO/B,EAAgB,CACrB,WACA,OACA,IAAK,CAAE,SAAUmC,EAAY,KAAMC,EAAQ,MAAOjB,EAAS,MAAOkB,CAAQ,EAC1E,UACA,kBACA,QACA,QACA,eACF,CAAC,CACH,CACF,EAEA,EAAU,YAAc,Y"}

package/dist/chunks/{textarea-C-1cMyH4.js → textarea-2BJCzT97.js}

@@ -1,2 +1,2 @@
-import"./focus-ring-Bs80iIBN.js";import{t as e}from"./useForkedRef-WoqMqsWE.js";import{t}from"./useFormField-DH2tlc3e.js";import{t as n}from"./useHeldBack-eeTfpa_t.js";import{t as r}from"./renderFormField-_6WswnEX.js";import{t as i}from"./validationClassName-gRGs4KBm.js";import{r as a,t as o}from"./unhandledProps-9Kdj7WVf.js";import s,{forwardRef as c,useRef as l}from"react";import u from"classnames";import{useTextField as d}from"react-aria";const f=c(({className:c,disabled:f,help:p,id:m,invalid:h,invalidFeedback:g,label:_,plainText:v,readOnly:y,rows:b,size:x,valid:S,validFeedback:C,...w},T)=>{let E=l(null),D=e(T,E),{invalid:O,valid:k}=n(E,{invalid:h,valid:S}),{describedBy:A,feedbackId:j,helpId:M,inputId:N,labelId:P,labelledBy:F}=t({ariaDescribedBy:w[`aria-describedby`],ariaLabelledBy:w[`aria-labelledby`],help:p,id:m,invalid:O,invalidFeedback:g,label:_,valid:k,validFeedback:C}),{inputProps:I}=d({...w,"aria-describedby":A,"aria-labelledby":F,id:N,inputElementType:`textarea`,isDisabled:f,isInvalid:O,isReadOnly:y},E),L=u(`form-input`,v&&`plaintext`,x,i(O,k),c);return r({children:/* @__PURE__ */ s.createElement(`textarea`,{...a(I,w,o),"aria-describedby":A,rows:b,className:L,ref:D}),help:p,ids:{feedback:j,help:M,input:N,label:P},invalid:O,invalidFeedback:g,label:_,valid:k,validFeedback:C})});f.displayName=`Textarea`;export{f as t};
-//# sourceMappingURL=textarea-C-1cMyH4.js.map
+import"./focus-ring-Bs80iIBN.js";import{t as e}from"./useForkedRef-WoqMqsWE.js";import{t}from"./useFormField-q21MOgh8.js";import{t as n}from"./useHeldBack-o-CsPcSe.js";import{t as r}from"./renderFormField-CaZ8-xrn.js";import{t as i}from"./validationClassName-gRGs4KBm.js";import{r as a,t as o}from"./unhandledProps-9Kdj7WVf.js";import s,{forwardRef as c,useRef as l}from"react";import u from"classnames";import{useTextField as d}from"react-aria";const f=c(({className:c,disabled:f,help:p,id:m,invalid:h,invalidFeedback:g,label:_,plainText:v,readOnly:y,rows:b,size:x,valid:S,validFeedback:C,...w},T)=>{let E=l(null),D=e(T,E),{invalid:O,valid:k}=n(E,{invalid:h,valid:S}),{describedBy:A,feedbackId:j,helpId:M,inputId:N,labelId:P,labelledBy:F}=t({ariaDescribedBy:w[`aria-describedby`],ariaLabelledBy:w[`aria-labelledby`],help:p,id:m,invalid:O,invalidFeedback:g,label:_,valid:k,validFeedback:C}),{inputProps:I}=d({...w,"aria-describedby":A,"aria-labelledby":F,id:N,inputElementType:`textarea`,isDisabled:f,isInvalid:O,isReadOnly:y},E),L=u(`form-input`,v&&`plaintext`,x,i(O,k),c);return r({children:/* @__PURE__ */ s.createElement(`textarea`,{...a(I,w,o),"aria-describedby":A,rows:b,className:L,ref:D}),help:p,ids:{feedback:j,help:M,input:N,label:P},invalid:O,invalidFeedback:g,label:_,valid:k,validFeedback:C})});f.displayName=`Textarea`;export{f as t};
+//# sourceMappingURL=textarea-2BJCzT97.js.map

package/dist/chunks/{textarea-C-1cMyH4.js.map → textarea-2BJCzT97.js.map}

@@ -1 +1 @@
-{"version":3,"file":"textarea-C-1cMyH4.js","names":["useForkedRef","useHeldBack","renderFormField","validationClassName","mergeUnhandledProps","TEXT_FIELD_PROPS","React","classNames","Textarea","forwardRef","invalidProp","validProp","rest","textareaRef","useRef","forkedRef","ref","useFormField","useTextField","describedBy","labelledBy","inputId","disabled","invalid","readOnly","_className","plainText","size","valid","className","inputProps","feedbackId","helpId","labelId"],"sources":["../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, TextareaHTMLAttributes, useRef } from 'react'\nimport classNames from 'classnames'\nimport { AriaTextFieldOptions, useTextField } from 'react-aria'\n\nimport { useForkedRef, useFormField, useHeldBack } from '../../hooks'\nimport { mergeUnhandledProps, TEXT_FIELD_PROPS } from '../../utils/unhandledProps'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { renderFormField } from '../form-field/renderFormField'\n\nexport interface TextareaProps extends Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  'defaultValue' | 'onChange' | 'value'\n> {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * The value of the textarea, uncontrolled.\n   */\n  defaultValue?: string\n  /**\n   * Toggle the disabled state for the component.\n   */\n  disabled?: boolean\n  /**\n   * A description for the field, rendered below the textarea.\n   */\n  help?: ReactNode\n  /**\n   * Set component validation state to invalid. Left unset, the component shows as invalid by itself\n   * from a submit it held back (an empty `required` one, say) until it no longer would, or its\n   * form is reset. Set it, to `false` too, and it alone decides.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the textarea when `invalid` is set, and after a\n   * submit the field held back, until it no longer would.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with this textarea.\n   */\n  label?: ReactNode\n  /**\n   * Handler that is called when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.\n   */\n  plainText?: boolean\n  /**\n   * Toggle the readonly state for the component.\n   */\n  readOnly?: boolean\n  /**\n   * The number of visible text lines for the control.\n   */\n  rows?: number\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the textarea when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The value of the textarea, controlled.\n   */\n  value?: string\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (\n    {\n      className,\n      disabled,\n      help,\n      id,\n      invalid: invalidProp,\n      invalidFeedback,\n      label,\n      plainText,\n      readOnly,\n      rows,\n      size,\n      valid: validProp,\n      validFeedback,\n      ...rest\n    },\n    ref\n  ) => {\n    const textareaRef = useRef<HTMLTextAreaElement>(null)\n    const forkedRef = useForkedRef(ref, textareaRef)\n    // Shown as invalid from a submit it held back until it no longer would (`useHeldBack`):\n    // react-aria cancels the browser's own message, and the form stayed with nothing to say why.\n    const { invalid, valid } = useHeldBack(textareaRef, { invalid: invalidProp, valid: validProp })\n\n    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    const { inputProps } = useTextField<'textarea'>(\n      {\n        ...rest,\n        'aria-describedby': describedBy,\n        'aria-labelledby': labelledBy,\n        id: inputId,\n        inputElementType: 'textarea',\n        isDisabled: disabled,\n        isInvalid: invalid,\n        isReadOnly: readOnly\n      } as AriaTextFieldOptions<'textarea'>,\n      textareaRef\n    )\n\n    const _className = classNames(\n      'form-input',\n      plainText && 'plaintext',\n      size,\n      validationClassName(invalid, valid),\n      className\n    )\n\n    return renderFormField({\n      // `aria-describedby` after the spread: see `TextInput`.\n      children: (\n        <textarea\n          {...mergeUnhandledProps(inputProps, rest, TEXT_FIELD_PROPS)}\n          aria-describedby={describedBy}\n          rows={rows}\n          className={_className}\n          ref={forkedRef}\n        />\n      ),\n      help,\n      ids: { feedback: feedbackId, help: helpId, input: inputId, label: labelId },\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n  }\n)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":"A,8bA8EA,MAAaQ,EAAWC,GAEpB,CACE,YACA,WACA,OACA,KACA,QAASC,EACT,kBACA,QACA,YACA,WACA,OACA,OACA,MAAOC,EACP,gBACA,GAAGC,GAEL,IACG,CACH,IAAMC,EAAcC,EAA4B,IAAI,EAC9CC,EAAYf,EAAagB,EAAKH,CAAW,EAGzC,CAAE,UAAS,SAAUZ,EAAYY,EAAa,CAAE,QAASH,EAAa,MAAOC,CAAU,CAAC,EAExF,CAAE,cAAa,aAAY,SAAQ,UAAS,UAAS,cAAeM,EAAa,CACrF,gBAAiBL,EAAK,oBACtB,eAAgBA,EAAK,mBACrB,OACA,KACA,UACA,kBACA,QACA,QACA,eACF,CAAC,EAEK,CAAE,cAAeM,EACrB,CACE,GAAGN,EACH,mBAAoBO,EACpB,kBAAmBC,EACnB,GAAIC,EACJ,iBAAkB,WAClB,WAAYC,EACZ,UAAWC,EACX,WAAYC,CACd,EACAX,CACF,EAEMY,EAAalB,EACjB,aACAmB,GAAa,YACbC,EACAxB,EAAoBoB,EAASK,CAAK,EAClCC,CACF,EAEA,OAAO3B,EAAgB,CAErB,SACE,kBAAA,cAAC,WAAD,CACE,GAAIE,EAAoB0B,EAAYlB,EAAMP,CAAgB,EAC1D,mBAAkBc,EACZ,OACN,UAAWM,EACX,IAAKV,CACN,CAAA,EAEH,OACA,IAAK,CAAE,SAAUgB,EAAY,KAAMC,EAAQ,MAAOX,EAAS,MAAOY,CAAQ,EAC1E,UACA,kBACA,QACA,QACA,eACF,CAAC,CACH,CACF,EAEA,EAAS,YAAc,W"}
+{"version":3,"file":"textarea-2BJCzT97.js","names":["useForkedRef","useHeldBack","renderFormField","validationClassName","mergeUnhandledProps","TEXT_FIELD_PROPS","React","classNames","Textarea","forwardRef","invalidProp","validProp","rest","textareaRef","useRef","forkedRef","ref","useFormField","useTextField","describedBy","labelledBy","inputId","disabled","invalid","readOnly","_className","plainText","size","valid","className","inputProps","feedbackId","helpId","labelId"],"sources":["../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, TextareaHTMLAttributes, useRef } from 'react'\nimport classNames from 'classnames'\nimport { AriaTextFieldOptions, useTextField } from 'react-aria'\n\nimport { useForkedRef, useFormField, useHeldBack } from '../../hooks'\nimport { mergeUnhandledProps, TEXT_FIELD_PROPS } from '../../utils/unhandledProps'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { renderFormField } from '../form-field/renderFormField'\n\nexport interface TextareaProps extends Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  'defaultValue' | 'onChange' | 'value'\n> {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * The value of the textarea, uncontrolled.\n   */\n  defaultValue?: string\n  /**\n   * Toggle the disabled state for the component.\n   */\n  disabled?: boolean\n  /**\n   * A description for the field, rendered below the textarea.\n   */\n  help?: ReactNode\n  /**\n   * Set component validation state to invalid. Left unset, the component shows as invalid by itself\n   * from a submit it held back (an empty `required` one, say) until it no longer would, or its\n   * form is reset. Set it, to `false` too, and it alone decides.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the textarea when `invalid` is set, and after a\n   * submit the field held back, until it no longer would.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with this textarea.\n   */\n  label?: ReactNode\n  /**\n   * Handler that is called when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.\n   */\n  plainText?: boolean\n  /**\n   * Toggle the readonly state for the component.\n   */\n  readOnly?: boolean\n  /**\n   * The number of visible text lines for the control.\n   */\n  rows?: number\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the textarea when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The value of the textarea, controlled.\n   */\n  value?: string\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (\n    {\n      className,\n      disabled,\n      help,\n      id,\n      invalid: invalidProp,\n      invalidFeedback,\n      label,\n      plainText,\n      readOnly,\n      rows,\n      size,\n      valid: validProp,\n      validFeedback,\n      ...rest\n    },\n    ref\n  ) => {\n    const textareaRef = useRef<HTMLTextAreaElement>(null)\n    const forkedRef = useForkedRef(ref, textareaRef)\n    // Shown as invalid from a submit it held back until it no longer would (`useHeldBack`):\n    // react-aria cancels the browser's own message, and the form stayed with nothing to say why.\n    const { invalid, valid } = useHeldBack(textareaRef, { invalid: invalidProp, valid: validProp })\n\n    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    const { inputProps } = useTextField<'textarea'>(\n      {\n        ...rest,\n        'aria-describedby': describedBy,\n        'aria-labelledby': labelledBy,\n        id: inputId,\n        inputElementType: 'textarea',\n        isDisabled: disabled,\n        isInvalid: invalid,\n        isReadOnly: readOnly\n      } as AriaTextFieldOptions<'textarea'>,\n      textareaRef\n    )\n\n    const _className = classNames(\n      'form-input',\n      plainText && 'plaintext',\n      size,\n      validationClassName(invalid, valid),\n      className\n    )\n\n    return renderFormField({\n      // `aria-describedby` after the spread: see `TextInput`.\n      children: (\n        <textarea\n          {...mergeUnhandledProps(inputProps, rest, TEXT_FIELD_PROPS)}\n          aria-describedby={describedBy}\n          rows={rows}\n          className={_className}\n          ref={forkedRef}\n        />\n      ),\n      help,\n      ids: { feedback: feedbackId, help: helpId, input: inputId, label: labelId },\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n  }\n)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":"A,8bA8EA,MAAaQ,EAAWC,GAEpB,CACE,YACA,WACA,OACA,KACA,QAASC,EACT,kBACA,QACA,YACA,WACA,OACA,OACA,MAAOC,EACP,gBACA,GAAGC,GAEL,IACG,CACH,IAAMC,EAAcC,EAA4B,IAAI,EAC9CC,EAAYf,EAAagB,EAAKH,CAAW,EAGzC,CAAE,UAAS,SAAUZ,EAAYY,EAAa,CAAE,QAASH,EAAa,MAAOC,CAAU,CAAC,EAExF,CAAE,cAAa,aAAY,SAAQ,UAAS,UAAS,cAAeM,EAAa,CACrF,gBAAiBL,EAAK,oBACtB,eAAgBA,EAAK,mBACrB,OACA,KACA,UACA,kBACA,QACA,QACA,eACF,CAAC,EAEK,CAAE,cAAeM,EACrB,CACE,GAAGN,EACH,mBAAoBO,EACpB,kBAAmBC,EACnB,GAAIC,EACJ,iBAAkB,WAClB,WAAYC,EACZ,UAAWC,EACX,WAAYC,CACd,EACAX,CACF,EAEMY,EAAalB,EACjB,aACAmB,GAAa,YACbC,EACAxB,EAAoBoB,EAASK,CAAK,EAClCC,CACF,EAEA,OAAO3B,EAAgB,CAErB,SACE,kBAAA,cAAC,WAAD,CACE,GAAIE,EAAoB0B,EAAYlB,EAAMP,CAAgB,EAC1D,mBAAkBc,EACZ,OACN,UAAWM,EACX,IAAKV,CACN,CAAA,EAEH,OACA,IAAK,CAAE,SAAUgB,EAAY,KAAMC,EAAQ,MAAOX,EAAS,MAAOY,CAAQ,EAC1E,UACA,kBACA,QACA,QACA,eACF,CAAC,CACH,CACF,EAEA,EAAS,YAAc,W"}

package/dist/chunks/{time-field-CbCfOQZz.js → time-field-ClPbatW3.js}

@@ -1,2 +1,2 @@
-import"./focus-ring-Bs80iIBN.js";import{u as e}from"./slot-BQVx1Eew.js";import{t}from"./useForkedRef-WoqMqsWE.js";import{t as ee}from"./useFormField-DH2tlc3e.js";import{t as n}from"./useRequiredValueInput-gYN8I-LY.js";import{t as r}from"./renderFormField-_6WswnEX.js";import{t as te}from"./validationClassName-gRGs4KBm.js";import{n as i,r as ne}from"./DateField-4cdcwt0v.js";import a,{forwardRef as o,useRef as s}from"react";import c from"classnames";import{mergeProps as l,useLocale as u,useTimeField as d}from"react-aria";import{useTimeFieldState as f}from"react-stately";const p=o(({autoFocus:o,className:p,defaultValue:m,disabled:h,form:g,granularity:re,help:_,hideTimeZone:ie,hourCycle:ae,id:oe,invalid:v,invalidFeedback:y,label:b,maxValue:x,minValue:S,name:C,onBlur:w,onChange:T,onFocus:E,onKeyDown:D,onKeyUp:O,placeholderValue:k,readOnly:A,required:j,shouldForceLeadingZeros:M,size:N,valid:P,validFeedback:F,value:I,...L},R)=>{let z=s(null),B=t(R,z),V=s(null),{locale:H}=u(),{inputProps:U,missing:W,valid:G}=n(V,{focus:()=>i(z.current),invalid:v,required:j&&!A,valid:P}),K={"aria-label":L[`aria-label`],autoFocus:o,defaultValue:m,form:g,granularity:re,hideTimeZone:ie,hourCycle:ae,inputRef:V,isDisabled:h,isInvalid:v||W||void 0,isReadOnly:A,isRequired:j,maxValue:x,minValue:S,name:C,onBlur:w,onChange:T,onFocus:E,onKeyDown:D,onKeyUp:O,placeholderValue:k,shouldForceLeadingZeros:M,value:I},q=f({...K,locale:H}),J=v||q.displayValidation.isInvalid,Y=G&&!J,{describedBy:se,feedbackId:ce,helpId:le,inputId:ue,labelId:de,labelledBy:X}=ee({ariaDescribedBy:L[`aria-describedby`],ariaLabelledBy:L[`aria-labelledby`],help:_,id:oe,invalid:J,invalidFeedback:y,label:b,valid:Y,validFeedback:F}),{descriptionProps:Z,errorMessageProps:Q,fieldProps:fe,inputProps:pe}=d({...K,"aria-describedby":se,"aria-labelledby":X,id:ue},q,z),$=e(fe,Z,Q);return r({children:/* @__PURE__ */ a.createElement(a.Fragment,null,/* @__PURE__ */ a.createElement(`div`,{...l($,L),"aria-describedby":$[`aria-describedby`],"aria-labelledby":X,className:c(`form-input`,`time-field`,N,{disabled:h},te(J,Y),p),ref:B,style:{...$.style,...L.style}},/* @__PURE__ */ a.createElement(`div`,{className:`datepicker-field`},q.segments.map((e,t)=>/* @__PURE__ */ a.createElement(ne,{fieldLabelledBy:X,key:t,segment:e,slots:[Z,Q],state:q})))),/* @__PURE__ */ a.createElement(`input`,{...pe,...U,ref:V})),help:_,ids:{feedback:ce,help:le,label:de},invalid:J,invalidFeedback:y,label:b,valid:Y,validFeedback:F})});p.displayName=`TimeField`;export{p as t};
-//# sourceMappingURL=time-field-CbCfOQZz.js.map
+import"./focus-ring-Bs80iIBN.js";import{u as e}from"./slot-DagH0Gxq.js";import{t}from"./useForkedRef-WoqMqsWE.js";import{t as ee}from"./useFormField-q21MOgh8.js";import{t as n}from"./useRequiredValueInput-CL7AIgqz.js";import{t as r}from"./renderFormField-CaZ8-xrn.js";import{t as te}from"./validationClassName-gRGs4KBm.js";import{n as i,r as ne}from"./DateField-G1TP9ayt.js";import a,{forwardRef as o,useRef as s}from"react";import c from"classnames";import{mergeProps as l,useLocale as u,useTimeField as d}from"react-aria";import{useTimeFieldState as f}from"react-stately";const p=o(({autoFocus:o,className:p,defaultValue:m,disabled:h,form:g,granularity:re,help:_,hideTimeZone:ie,hourCycle:ae,id:oe,invalid:v,invalidFeedback:y,label:b,maxValue:x,minValue:S,name:C,onBlur:w,onChange:T,onFocus:E,onKeyDown:D,onKeyUp:O,placeholderValue:k,readOnly:A,required:j,shouldForceLeadingZeros:M,size:N,valid:P,validFeedback:F,value:I,...L},R)=>{let z=s(null),B=t(R,z),V=s(null),{locale:H}=u(),{inputProps:U,missing:W,valid:G}=n(V,{focus:()=>i(z.current),invalid:v,required:j&&!A,valid:P}),K={"aria-label":L[`aria-label`],autoFocus:o,defaultValue:m,form:g,granularity:re,hideTimeZone:ie,hourCycle:ae,inputRef:V,isDisabled:h,isInvalid:v||W||void 0,isReadOnly:A,isRequired:j,maxValue:x,minValue:S,name:C,onBlur:w,onChange:T,onFocus:E,onKeyDown:D,onKeyUp:O,placeholderValue:k,shouldForceLeadingZeros:M,value:I},q=f({...K,locale:H}),J=v||q.displayValidation.isInvalid,Y=G&&!J,{describedBy:se,feedbackId:ce,helpId:le,inputId:ue,labelId:de,labelledBy:X}=ee({ariaDescribedBy:L[`aria-describedby`],ariaLabelledBy:L[`aria-labelledby`],help:_,id:oe,invalid:J,invalidFeedback:y,label:b,valid:Y,validFeedback:F}),{descriptionProps:Z,errorMessageProps:Q,fieldProps:fe,inputProps:pe}=d({...K,"aria-describedby":se,"aria-labelledby":X,id:ue},q,z),$=e(fe,Z,Q);return r({children:/* @__PURE__ */ a.createElement(a.Fragment,null,/* @__PURE__ */ a.createElement(`div`,{...l($,L),"aria-describedby":$[`aria-describedby`],"aria-labelledby":X,className:c(`form-input`,`time-field`,N,{disabled:h},te(J,Y),p),ref:B,style:{...$.style,...L.style}},/* @__PURE__ */ a.createElement(`div`,{className:`datepicker-field`},q.segments.map((e,t)=>/* @__PURE__ */ a.createElement(ne,{fieldLabelledBy:X,key:t,segment:e,slots:[Z,Q],state:q})))),/* @__PURE__ */ a.createElement(`input`,{...pe,...U,ref:V})),help:_,ids:{feedback:ce,help:le,label:de},invalid:J,invalidFeedback:y,label:b,valid:Y,validFeedback:F})});p.displayName=`TimeField`;export{p as t};
+//# sourceMappingURL=time-field-ClPbatW3.js.map

package/dist/chunks/{time-field-CbCfOQZz.js.map → time-field-ClPbatW3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"time-field-CbCfOQZz.js","names":["withoutSlotIds","useFormField","useRequiredValueInput","renderFormField","validationClassName","focusFirstSegment","DateSegment","React","classNames","TimeField","forwardRef","validProp","rest","fieldRef","useRef","forkedRef","useForkedRef","ref","inputRef","useLocale","requiredInputProps","required","readOnly","baseProps","disabled","invalid","missing","state","useTimeFieldState","showInvalid","showValid","valid","groupProps","useTimeField","describedBy","labelledBy","inputId","group","descriptionProps","errorMessageProps","mergeProps","size","className","index","inputProps","feedbackId","helpId","labelId"],"sources":["../../src/components/time-field/TimeField.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactNode, useRef } from 'react'\nimport classNames from 'classnames'\nimport { AriaTimeFieldProps, mergeProps, TimeValue, useLocale, useTimeField } from 'react-aria'\nimport { useTimeFieldState } from 'react-stately'\n\nimport { useForkedRef, useFormField, useRequiredValueInput } from '../../hooks'\nimport { withoutSlotIds } from '../../utils/idRefs'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { focusFirstSegment } from '../datepicker/DateField'\nimport { DateSegment } from '../datepicker/DateSegment'\nimport { renderFormField } from '../form-field/renderFormField'\n\nexport interface TimeFieldProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'defaultValue' | 'onChange'\n> {\n  /**\n   * An accessible label for the field, used when there's no visible `label`.\n   */\n  'aria-label'?: string\n  /**\n   * Identifies a visible element that labels the field.\n   */\n  'aria-labelledby'?: string\n  /**\n   * Focus the first segment when the field mounts.\n   */\n  autoFocus?: boolean\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * The value of the field, uncontrolled.\n   */\n  defaultValue?: TimeValue | null\n  /**\n   * Toggle the disabled state for the component.\n   */\n  disabled?: boolean\n  /**\n   * The id of a form elsewhere on the page that the field belongs to.\n   */\n  form?: string\n  /**\n   * The smallest unit shown and edited.\n   *\n   * @default 'minute'\n   */\n  granularity?: 'hour' | 'minute' | 'second'\n  /**\n   * A description for the field, rendered below it.\n   */\n  help?: ReactNode\n  /**\n   * Hide the time zone of a `ZonedDateTime` value.\n   */\n  hideTimeZone?: boolean\n  /**\n   * Show 12 or 24 hours. Defaults to the locale's.\n   */\n  hourCycle?: 12 | 24\n  /**\n   * Set component validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below it when `invalid` is set, and after a submit\n   * that an empty `required` field held back.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` that names the field.\n   */\n  label?: ReactNode\n  /**\n   * The latest time. A later one entered marks the field invalid.\n   */\n  maxValue?: TimeValue | null\n  /**\n   * The earliest time. An earlier one entered marks the field invalid.\n   */\n  minValue?: TimeValue | null\n  /**\n   * The name the value is submitted under with a form, as an ISO 8601 time (`09:30:00`).\n   */\n  name?: string\n  /**\n   * Handler that is called when the value changes: once every segment has a value, and with\n   * `null` once every segment is empty. A partly emptied field keeps its last value.\n   */\n  onChange?: (value: TimeValue | null) => void\n  /**\n   * The time the segments start from when the field is empty, such as `new Time(9)`. It also\n   * sets the type of value `onChange` receives.\n   */\n  placeholderValue?: TimeValue\n  /**\n   * Toggle the readonly state for the component.\n   */\n  readOnly?: boolean\n  /**\n   * Toggle the required state for the component. An empty required field holds its form back\n   * from submitting, takes focus and shows as invalid, with `invalidFeedback`, until it has a\n   * value or the form is reset. `invalid`, once set, and `valid` decide how it looks instead.\n   */\n  required?: boolean\n  /**\n   * Show a leading zero on the hour, as `09:30` rather than `9:30`, whatever the locale does.\n   */\n  shouldForceLeadingZeros?: boolean\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below it when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The value of the field, controlled: a `Time`, or a `CalendarDateTime` or `ZonedDateTime`\n   * whose date is kept. `null` for an empty field.\n   */\n  value?: TimeValue | null\n}\n\ntype FieldProps = AriaTimeFieldProps<TimeValue>\n\n// A time as `DateField` renders a date for the date pickers: a `.form-input` holding one editable\n// segment per unit, with the segments' styles shared (`DateSegment`). The `.form-input` is the\n// field's group, named by the label; each segment is a spin button named by its unit and the\n// label.\nexport const TimeField = forwardRef<HTMLDivElement, TimeFieldProps>(\n  (\n    {\n      autoFocus,\n      className,\n      defaultValue,\n      disabled,\n      form,\n      granularity,\n      help,\n      hideTimeZone,\n      hourCycle,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      maxValue,\n      minValue,\n      name,\n      onBlur,\n      onChange,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n      placeholderValue,\n      readOnly,\n      required,\n      shouldForceLeadingZeros,\n      size,\n      valid: validProp,\n      validFeedback,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const fieldRef = useRef<HTMLDivElement>(null)\n    const forkedRef = useForkedRef(ref, fieldRef)\n    const inputRef = useRef<HTMLInputElement>(null)\n    const { locale } = useLocale()\n\n    // `required` has to reach an input a form validates (FORMS.md, gotcha 9), and react-aria\n    // writes `aria-required` on the segments alone: an empty required field was submitted. The\n    // segments aren't form controls, and the input that carries the value is `type=\"hidden\"`,\n    // which is barred from constraint validation. So a required field's input is a text input\n    // that isn't displayed (`useRequiredValueInput`), the one react-aria itself renders under\n    // `validationBehavior: 'native'`. That behavior isn't turned on: it also holds a form back\n    // for `invalid` and for a time outside `minValue`/`maxValue`, and shows the latter on blur\n    // where it shows as typed now. The browser has no bubble to show on an input that isn't\n    // displayed: the first segment takes focus in its place, and `missing` marks the field\n    // invalid, as `invalid` does, until it has a value. react-aria's listener on `inputRef` focuses\n    // it too, but only the input it was first given: one that `renderFormField` mounts anew, once\n    // a `label` or `help` comes, is never heard by it. A disabled input isn't validated, and a\n    // read-only field can't be filled in, so it keeps the hidden one.\n    const {\n      inputProps: requiredInputProps,\n      missing,\n      valid\n    } = useRequiredValueInput(inputRef, {\n      focus: () => focusFirstSegment(fieldRef.current),\n      invalid,\n      required: required && !readOnly,\n      valid: validProp\n    })\n\n    // `label` stays out, as the other fields keep it: react-aria would name the field by a label\n    // element of its own, which this component doesn't render.\n    // `inputRef` is the hidden input's: react-aria resets the field with that input's form and\n    // reports validity through it, as react-aria-components passes it, outside the public type.\n    const baseProps: FieldProps & { inputRef: typeof inputRef } = {\n      'aria-label': rest['aria-label'],\n      autoFocus,\n      defaultValue,\n      form,\n      granularity,\n      hideTimeZone,\n      hourCycle,\n      inputRef,\n      isDisabled: disabled,\n      // `false` would override react-aria's own range check: react-stately takes a defined\n      // `isInvalid` as the whole validation state.\n      isInvalid: invalid || missing || undefined,\n      isReadOnly: readOnly,\n      isRequired: required,\n      maxValue,\n      minValue,\n      name,\n      onBlur: onBlur as FieldProps['onBlur'],\n      onChange,\n      onFocus: onFocus as FieldProps['onFocus'],\n      onKeyDown: onKeyDown as FieldProps['onKeyDown'],\n      onKeyUp: onKeyUp as FieldProps['onKeyUp'],\n      placeholderValue,\n      shouldForceLeadingZeros,\n      value\n    }\n    const state = useTimeFieldState({ ...baseProps, locale })\n    // A time outside `minValue`/`maxValue` is invalid too, shown as `invalid` is, and so is a\n    // `missing` one, which the state was given: it knows before the ids are built, so the feedback\n    // describes the field either way.\n    const showInvalid = invalid || state.displayValidation.isInvalid\n    // A time outside the range isn't valid, whatever `valid` says.\n    const showValid = valid && !showInvalid\n\n    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid: showInvalid,\n      invalidFeedback,\n      label,\n      valid: showValid,\n      validFeedback\n    })\n\n    const {\n      descriptionProps,\n      errorMessageProps,\n      fieldProps: groupProps,\n      inputProps\n    } = useTimeField(\n      { ...baseProps, 'aria-describedby': describedBy, 'aria-labelledby': labelledBy, id: inputId },\n      state,\n      fieldRef\n    )\n\n    // The field's `aria-describedby` from react-aria holds its description of the value, added\n    // once mounted, and the help and feedback given to it; the slot ids come out (FORMS.md, gotcha\n    // 6). It's set again after the spread, where the caller's own value would replace it (gotcha\n    // 4).\n    const group = withoutSlotIds(groupProps, descriptionProps, errorMessageProps)\n\n    return renderFormField({\n      children: (\n        <>\n          <div\n            {...mergeProps(group, rest)}\n            aria-describedby={group['aria-describedby']}\n            aria-labelledby={labelledBy}\n            className={classNames(\n              'form-input',\n              'time-field',\n              size,\n              { disabled },\n              validationClassName(showInvalid, showValid),\n              className\n            )}\n            ref={forkedRef}\n            style={{ ...group.style, ...rest.style }}\n          >\n            <div className=\"datepicker-field\">\n              {state.segments.map((segment, index) => (\n                <DateSegment\n                  fieldLabelledBy={labelledBy}\n                  // eslint-disable-next-line react/no-array-index-key\n                  key={index}\n                  segment={segment}\n                  slots={[descriptionProps, errorMessageProps]}\n                  state={state}\n                />\n              ))}\n            </div>\n          </div>\n          <input {...inputProps} {...requiredInputProps} ref={inputRef} />\n        </>\n      ),\n      help,\n      ids: { feedback: feedbackId, help: helpId, label: labelId },\n      invalid: showInvalid,\n      invalidFeedback,\n      label,\n      valid: showValid,\n      validFeedback\n    })\n  }\n)\n\nTimeField.displayName = 'TimeField'\n"],"mappings":"A,8jBAwIA,MAAaS,EAAYC,GAErB,CACE,YACA,YACA,eACA,WACA,OACA,eACA,OACA,gBACA,aACA,MACA,UACA,kBACA,QACA,WACA,WACA,OACA,SACA,WACA,UACA,YACA,UACA,mBACA,WACA,WACA,0BACA,OACA,MAAOC,EACP,gBACA,QACA,GAAGC,GAEL,IACG,CACH,IAAMC,EAAWC,EAAuB,IAAI,EACtCC,EAAYC,EAAaC,EAAKJ,CAAQ,EACtCK,EAAWJ,EAAyB,IAAI,EACxC,CAAE,UAAWK,EAAU,EAevB,CACJ,WAAYC,EACZ,UACA,SACElB,EAAsBgB,EAAU,CAClC,UAAab,EAAkBQ,EAAS,OAAO,EAC/C,UACA,SAAUQ,GAAY,CAACC,EACvB,MAAOX,CACT,CAAC,EAMKY,EAAwD,CAC5D,aAAcX,EAAK,cACnB,YACA,eACA,OACA,eACA,gBACA,aACA,WACA,WAAYY,EAGZ,UAAWC,GAAWC,GAAW,IAAA,GACjC,WAAYJ,EACZ,WAAYD,EACZ,WACA,WACA,OACQ,SACR,WACS,UACE,YACF,UACT,mBACA,0BACA,OACF,EACMM,EAAQC,EAAkB,CAAE,GAAGL,EAAW,QAAO,CAAC,EAIlDM,EAAcJ,GAAWE,EAAM,kBAAkB,UAEjDG,EAAYC,GAAS,CAACF,EAEtB,CAAE,eAAa,cAAY,UAAQ,WAAS,WAAS,cAAe5B,GAAa,CACrF,gBAAiBW,EAAK,oBACtB,eAAgBA,EAAK,mBACrB,OACA,MACA,QAASiB,EACT,kBACA,QACA,MAAOC,EACP,eACF,CAAC,EAEK,CACJ,mBACA,oBACA,WAAYE,GACZ,eACEC,EACF,CAAE,GAAGV,EAAW,mBAAoBW,GAAa,kBAAmBC,EAAY,GAAIC,EAAQ,EAC5FT,EACAd,CACF,EAMMwB,EAAQrC,EAAegC,GAAYM,EAAkBC,CAAiB,EAE5E,OAAOpC,EAAgB,CACrB,SACE,kBAAA,cAAAI,EAAA,SAAA,KACE,kBAAA,cAAC,MAAD,CACE,GAAIiC,EAAWH,EAAOzB,CAAI,EAC1B,mBAAkByB,EAAM,oBACxB,kBAAiBF,EACjB,UAAW3B,EACT,aACA,aACAiC,EACA,CAAE,UAAS,EACXrC,GAAoByB,EAAaC,CAAS,EAC1CY,CACF,EACA,IAAK3B,EACL,MAAO,CAAE,GAAGsB,EAAM,MAAO,GAAGzB,EAAK,KAAM,CAcpC,EAZH,kBAAA,cAAC,MAAD,CAAK,UAAU,kBAWV,EAVFe,EAAM,SAAS,KAAK,EAAS,IAC5B,kBAAA,cAACrB,GAAD,CACE,gBAAiB6B,EAEjB,IAAKQ,EACI,UACT,MAAO,CAACL,EAAkBC,CAAiB,EACpC,OACR,CAAA,CACF,CACE,CACF,EACL,kBAAA,cAAC,QAAD,CAAO,GAAIK,GAAY,GAAIxB,EAAoB,IAAKF,CAAW,CAAA,CAC/D,EAEJ,OACA,IAAK,CAAE,SAAU2B,GAAY,KAAMC,GAAQ,MAAOC,EAAQ,EAC1D,QAASlB,EACT,kBACA,QACA,MAAOC,EACP,eACF,CAAC,CACH,CACF,EAEA,EAAU,YAAc,Y"}
+{"version":3,"file":"time-field-ClPbatW3.js","names":["withoutSlotIds","useFormField","useRequiredValueInput","renderFormField","validationClassName","focusFirstSegment","DateSegment","React","classNames","TimeField","forwardRef","validProp","rest","fieldRef","useRef","forkedRef","useForkedRef","ref","inputRef","useLocale","requiredInputProps","required","readOnly","baseProps","disabled","invalid","missing","state","useTimeFieldState","showInvalid","showValid","valid","groupProps","useTimeField","describedBy","labelledBy","inputId","group","descriptionProps","errorMessageProps","mergeProps","size","className","index","inputProps","feedbackId","helpId","labelId"],"sources":["../../src/components/time-field/TimeField.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactNode, useRef } from 'react'\nimport classNames from 'classnames'\nimport { AriaTimeFieldProps, mergeProps, TimeValue, useLocale, useTimeField } from 'react-aria'\nimport { useTimeFieldState } from 'react-stately'\n\nimport { useForkedRef, useFormField, useRequiredValueInput } from '../../hooks'\nimport { withoutSlotIds } from '../../utils/idRefs'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { focusFirstSegment } from '../datepicker/DateField'\nimport { DateSegment } from '../datepicker/DateSegment'\nimport { renderFormField } from '../form-field/renderFormField'\n\nexport interface TimeFieldProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'defaultValue' | 'onChange'\n> {\n  /**\n   * An accessible label for the field, used when there's no visible `label`.\n   */\n  'aria-label'?: string\n  /**\n   * Identifies a visible element that labels the field.\n   */\n  'aria-labelledby'?: string\n  /**\n   * Focus the first segment when the field mounts.\n   */\n  autoFocus?: boolean\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * The value of the field, uncontrolled.\n   */\n  defaultValue?: TimeValue | null\n  /**\n   * Toggle the disabled state for the component.\n   */\n  disabled?: boolean\n  /**\n   * The id of a form elsewhere on the page that the field belongs to.\n   */\n  form?: string\n  /**\n   * The smallest unit shown and edited.\n   *\n   * @default 'minute'\n   */\n  granularity?: 'hour' | 'minute' | 'second'\n  /**\n   * A description for the field, rendered below it.\n   */\n  help?: ReactNode\n  /**\n   * Hide the time zone of a `ZonedDateTime` value.\n   */\n  hideTimeZone?: boolean\n  /**\n   * Show 12 or 24 hours. Defaults to the locale's.\n   */\n  hourCycle?: 12 | 24\n  /**\n   * Set component validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below it when `invalid` is set, and after a submit\n   * that an empty `required` field held back.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` that names the field.\n   */\n  label?: ReactNode\n  /**\n   * The latest time. A later one entered marks the field invalid.\n   */\n  maxValue?: TimeValue | null\n  /**\n   * The earliest time. An earlier one entered marks the field invalid.\n   */\n  minValue?: TimeValue | null\n  /**\n   * The name the value is submitted under with a form, as an ISO 8601 time (`09:30:00`).\n   */\n  name?: string\n  /**\n   * Handler that is called when the value changes: once every segment has a value, and with\n   * `null` once every segment is empty. A partly emptied field keeps its last value.\n   */\n  onChange?: (value: TimeValue | null) => void\n  /**\n   * The time the segments start from when the field is empty, such as `new Time(9)`. It also\n   * sets the type of value `onChange` receives.\n   */\n  placeholderValue?: TimeValue\n  /**\n   * Toggle the readonly state for the component.\n   */\n  readOnly?: boolean\n  /**\n   * Toggle the required state for the component. An empty required field holds its form back\n   * from submitting, takes focus and shows as invalid, with `invalidFeedback`, until it has a\n   * value or the form is reset. `invalid`, once set, and `valid` decide how it looks instead.\n   */\n  required?: boolean\n  /**\n   * Show a leading zero on the hour, as `09:30` rather than `9:30`, whatever the locale does.\n   */\n  shouldForceLeadingZeros?: boolean\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below it when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The value of the field, controlled: a `Time`, or a `CalendarDateTime` or `ZonedDateTime`\n   * whose date is kept. `null` for an empty field.\n   */\n  value?: TimeValue | null\n}\n\ntype FieldProps = AriaTimeFieldProps<TimeValue>\n\n// A time as `DateField` renders a date for the date pickers: a `.form-input` holding one editable\n// segment per unit, with the segments' styles shared (`DateSegment`). The `.form-input` is the\n// field's group, named by the label; each segment is a spin button named by its unit and the\n// label.\nexport const TimeField = forwardRef<HTMLDivElement, TimeFieldProps>(\n  (\n    {\n      autoFocus,\n      className,\n      defaultValue,\n      disabled,\n      form,\n      granularity,\n      help,\n      hideTimeZone,\n      hourCycle,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      maxValue,\n      minValue,\n      name,\n      onBlur,\n      onChange,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n      placeholderValue,\n      readOnly,\n      required,\n      shouldForceLeadingZeros,\n      size,\n      valid: validProp,\n      validFeedback,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const fieldRef = useRef<HTMLDivElement>(null)\n    const forkedRef = useForkedRef(ref, fieldRef)\n    const inputRef = useRef<HTMLInputElement>(null)\n    const { locale } = useLocale()\n\n    // `required` has to reach an input a form validates (FORMS.md, gotcha 9), and react-aria\n    // writes `aria-required` on the segments alone: an empty required field was submitted. The\n    // segments aren't form controls, and the input that carries the value is `type=\"hidden\"`,\n    // which is barred from constraint validation. So a required field's input is a text input\n    // that isn't displayed (`useRequiredValueInput`), the one react-aria itself renders under\n    // `validationBehavior: 'native'`. That behavior isn't turned on: it also holds a form back\n    // for `invalid` and for a time outside `minValue`/`maxValue`, and shows the latter on blur\n    // where it shows as typed now. The browser has no bubble to show on an input that isn't\n    // displayed: the first segment takes focus in its place, and `missing` marks the field\n    // invalid, as `invalid` does, until it has a value. react-aria's listener on `inputRef` focuses\n    // it too, but only the input it was first given: one that `renderFormField` mounts anew, once\n    // a `label` or `help` comes, is never heard by it. A disabled input isn't validated, and a\n    // read-only field can't be filled in, so it keeps the hidden one.\n    const {\n      inputProps: requiredInputProps,\n      missing,\n      valid\n    } = useRequiredValueInput(inputRef, {\n      focus: () => focusFirstSegment(fieldRef.current),\n      invalid,\n      required: required && !readOnly,\n      valid: validProp\n    })\n\n    // `label` stays out, as the other fields keep it: react-aria would name the field by a label\n    // element of its own, which this component doesn't render.\n    // `inputRef` is the hidden input's: react-aria resets the field with that input's form and\n    // reports validity through it, as react-aria-components passes it, outside the public type.\n    const baseProps: FieldProps & { inputRef: typeof inputRef } = {\n      'aria-label': rest['aria-label'],\n      autoFocus,\n      defaultValue,\n      form,\n      granularity,\n      hideTimeZone,\n      hourCycle,\n      inputRef,\n      isDisabled: disabled,\n      // `false` would override react-aria's own range check: react-stately takes a defined\n      // `isInvalid` as the whole validation state.\n      isInvalid: invalid || missing || undefined,\n      isReadOnly: readOnly,\n      isRequired: required,\n      maxValue,\n      minValue,\n      name,\n      onBlur: onBlur as FieldProps['onBlur'],\n      onChange,\n      onFocus: onFocus as FieldProps['onFocus'],\n      onKeyDown: onKeyDown as FieldProps['onKeyDown'],\n      onKeyUp: onKeyUp as FieldProps['onKeyUp'],\n      placeholderValue,\n      shouldForceLeadingZeros,\n      value\n    }\n    const state = useTimeFieldState({ ...baseProps, locale })\n    // A time outside `minValue`/`maxValue` is invalid too, shown as `invalid` is, and so is a\n    // `missing` one, which the state was given: it knows before the ids are built, so the feedback\n    // describes the field either way.\n    const showInvalid = invalid || state.displayValidation.isInvalid\n    // A time outside the range isn't valid, whatever `valid` says.\n    const showValid = valid && !showInvalid\n\n    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid: showInvalid,\n      invalidFeedback,\n      label,\n      valid: showValid,\n      validFeedback\n    })\n\n    const {\n      descriptionProps,\n      errorMessageProps,\n      fieldProps: groupProps,\n      inputProps\n    } = useTimeField(\n      { ...baseProps, 'aria-describedby': describedBy, 'aria-labelledby': labelledBy, id: inputId },\n      state,\n      fieldRef\n    )\n\n    // The field's `aria-describedby` from react-aria holds its description of the value, added\n    // once mounted, and the help and feedback given to it; the slot ids come out (FORMS.md, gotcha\n    // 6). It's set again after the spread, where the caller's own value would replace it (gotcha\n    // 4).\n    const group = withoutSlotIds(groupProps, descriptionProps, errorMessageProps)\n\n    return renderFormField({\n      children: (\n        <>\n          <div\n            {...mergeProps(group, rest)}\n            aria-describedby={group['aria-describedby']}\n            aria-labelledby={labelledBy}\n            className={classNames(\n              'form-input',\n              'time-field',\n              size,\n              { disabled },\n              validationClassName(showInvalid, showValid),\n              className\n            )}\n            ref={forkedRef}\n            style={{ ...group.style, ...rest.style }}\n          >\n            <div className=\"datepicker-field\">\n              {state.segments.map((segment, index) => (\n                <DateSegment\n                  fieldLabelledBy={labelledBy}\n                  // eslint-disable-next-line react/no-array-index-key\n                  key={index}\n                  segment={segment}\n                  slots={[descriptionProps, errorMessageProps]}\n                  state={state}\n                />\n              ))}\n            </div>\n          </div>\n          <input {...inputProps} {...requiredInputProps} ref={inputRef} />\n        </>\n      ),\n      help,\n      ids: { feedback: feedbackId, help: helpId, label: labelId },\n      invalid: showInvalid,\n      invalidFeedback,\n      label,\n      valid: showValid,\n      validFeedback\n    })\n  }\n)\n\nTimeField.displayName = 'TimeField'\n"],"mappings":"A,8jBAwIA,MAAaS,EAAYC,GAErB,CACE,YACA,YACA,eACA,WACA,OACA,eACA,OACA,gBACA,aACA,MACA,UACA,kBACA,QACA,WACA,WACA,OACA,SACA,WACA,UACA,YACA,UACA,mBACA,WACA,WACA,0BACA,OACA,MAAOC,EACP,gBACA,QACA,GAAGC,GAEL,IACG,CACH,IAAMC,EAAWC,EAAuB,IAAI,EACtCC,EAAYC,EAAaC,EAAKJ,CAAQ,EACtCK,EAAWJ,EAAyB,IAAI,EACxC,CAAE,UAAWK,EAAU,EAevB,CACJ,WAAYC,EACZ,UACA,SACElB,EAAsBgB,EAAU,CAClC,UAAab,EAAkBQ,EAAS,OAAO,EAC/C,UACA,SAAUQ,GAAY,CAACC,EACvB,MAAOX,CACT,CAAC,EAMKY,EAAwD,CAC5D,aAAcX,EAAK,cACnB,YACA,eACA,OACA,eACA,gBACA,aACA,WACA,WAAYY,EAGZ,UAAWC,GAAWC,GAAW,IAAA,GACjC,WAAYJ,EACZ,WAAYD,EACZ,WACA,WACA,OACQ,SACR,WACS,UACE,YACF,UACT,mBACA,0BACA,OACF,EACMM,EAAQC,EAAkB,CAAE,GAAGL,EAAW,QAAO,CAAC,EAIlDM,EAAcJ,GAAWE,EAAM,kBAAkB,UAEjDG,EAAYC,GAAS,CAACF,EAEtB,CAAE,eAAa,cAAY,UAAQ,WAAS,WAAS,cAAe5B,GAAa,CACrF,gBAAiBW,EAAK,oBACtB,eAAgBA,EAAK,mBACrB,OACA,MACA,QAASiB,EACT,kBACA,QACA,MAAOC,EACP,eACF,CAAC,EAEK,CACJ,mBACA,oBACA,WAAYE,GACZ,eACEC,EACF,CAAE,GAAGV,EAAW,mBAAoBW,GAAa,kBAAmBC,EAAY,GAAIC,EAAQ,EAC5FT,EACAd,CACF,EAMMwB,EAAQrC,EAAegC,GAAYM,EAAkBC,CAAiB,EAE5E,OAAOpC,EAAgB,CACrB,SACE,kBAAA,cAAAI,EAAA,SAAA,KACE,kBAAA,cAAC,MAAD,CACE,GAAIiC,EAAWH,EAAOzB,CAAI,EAC1B,mBAAkByB,EAAM,oBACxB,kBAAiBF,EACjB,UAAW3B,EACT,aACA,aACAiC,EACA,CAAE,UAAS,EACXrC,GAAoByB,EAAaC,CAAS,EAC1CY,CACF,EACA,IAAK3B,EACL,MAAO,CAAE,GAAGsB,EAAM,MAAO,GAAGzB,EAAK,KAAM,CAcpC,EAZH,kBAAA,cAAC,MAAD,CAAK,UAAU,kBAWV,EAVFe,EAAM,SAAS,KAAK,EAAS,IAC5B,kBAAA,cAACrB,GAAD,CACE,gBAAiB6B,EAEjB,IAAKQ,EACI,UACT,MAAO,CAACL,EAAkBC,CAAiB,EACpC,OACR,CAAA,CACF,CACE,CACF,EACL,kBAAA,cAAC,QAAD,CAAO,GAAIK,GAAY,GAAIxB,EAAoB,IAAKF,CAAW,CAAA,CAC/D,EAEJ,OACA,IAAK,CAAE,SAAU2B,GAAY,KAAMC,GAAQ,MAAOC,EAAQ,EAC1D,QAASlB,EACT,kBACA,QACA,MAAOC,EACP,eACF,CAAC,CACH,CACF,EAEA,EAAU,YAAc,Y"}

package/dist/chunks/toast-D5-58Ch1.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{t as e}from"./polymorphic-mAKwlLiW.js";import{n as t,r as n,t as r}from"./useToastRegionQueue-QHa4v7k6.js";import{t as i}from"./Icon-Dk5_q79o.js";import{n as a}from"./iconSlot-DU_WcSL_.js";import{t as o}from"./Portal-BTDylxAi.js";import{t as s}from"./CloseButton-CAQ--0sB.js";import c,{createContext as l,forwardRef as u,useContext as d}from"react";import f from"classnames";import{mergeProps as p}from"react-aria";import{ToastQueue as m}from"react-stately";const h=l({close:()=>{}}),g=()=>d(h);function _({children:e,className:t,closeButton:n,closeLabel:r,component:i,...a},o){let{close:l}=g(),u=i??`div`,d=f(`toast-body`,{"d-flex align-items-start justify-content-between gap-sm":n},t);return/* @__PURE__ */ c.createElement(u,{className:d,...a,ref:o},n?/* @__PURE__ */ c.createElement(`div`,null,e):e,n&&/* @__PURE__ */ c.createElement(s,{label:r,onClick:l}))}const v=e(_,`ToastBody`);function y({children:e,className:t,component:n,...r},i){let a=n??`div`,o=f(`toast-footer`,t);return/* @__PURE__ */ c.createElement(a,{className:o,...r,ref:i},e)}const b=e(y,`ToastFooter`);function x({children:e,className:t,closeButton:n,closeLabel:r,component:i,icon:o,time:l,titleId:u,...d},p){let{close:m}=g(),h=i??`div`,_=f(`toast-header`,t);return/* @__PURE__ */ c.createElement(h,{className:_,...d,ref:p},o!=null&&(typeof o==`string`?/* @__PURE__ */ c.createElement(`span`,{"aria-hidden":`true`,className:`me-sm`},/* @__PURE__ */ c.createElement(a,{value:o,className:`toast-icon`})):/* @__PURE__ */ c.createElement(`span`,{className:`me-sm`},o)),e!=null&&/* @__PURE__ */ c.createElement(`strong`,{id:u,className:`me-auto`},e),l!=null&&/* @__PURE__ */ c.createElement(`small`,null,l),n&&/* @__PURE__ */ c.createElement(s,{label:r,onClick:m}))}const S=e(x,`ToastHeader`),C=u(({children:e,animation:r=!0,autohide:i=!0,className:a,closeButton:o,closeLabel:s,color:l,defaultVisible:u=!1,delay:d=5e3,footer:m,icon:g,message:_,role:y=`status`,solid:x,time:C,title:w,translucent:T,visible:E,onClose:D,onShow:O,onVisibleChange:k,...A},j)=>{let{close:M,entered:N,forkedRef:P,isMounted:F,textId:I,titleId:L,transitionClass:R,visible:z}=t({animated:r,defaultVisible:u,displayName:`Toast`,onClose:D,onShow:O,onVisibleChange:k,ref:j,visible:E}),B=n({enabled:i,delay:d,visible:z&&N,onHide:M}),V={visible:z,close:M},H=f(`toast`,{fade:r,context:!!l,solid:!!(x&&l),translucent:T},l,a),U=g!=null||w!=null||C!=null,W=o&&(U||_==null),G=o&&!U&&_!=null,K=U||W;return F?/* @__PURE__ */ c.createElement(h.Provider,{value:V},/* @__PURE__ */ c.createElement(`div`,{className:f(H,R),role:y,"aria-labelledby":w==null?void 0:L,"aria-describedby":w!=null&&_!=null?I:void 0,...p(A,B),ref:P},K&&/* @__PURE__ */ c.createElement(S,{icon:g,time:C,titleId:w==null?void 0:L,closeButton:W,closeLabel:s},w),_!=null&&/* @__PURE__ */ c.createElement(v,{id:w!=null&&_!=null?I:void 0,closeButton:G,closeLabel:s},_),e,m!=null&&/* @__PURE__ */ c.createElement(b,null,typeof m==`function`?m(M):m))):null});C.displayName=`Toast`;const w=u(({className:e,...t},n)=>{let r=f(`toast-icon`,e);return/* @__PURE__ */ c.createElement(i,{className:r,...t,ref:n})});w.displayName=`ToastIcon`;const T=new m;function E(e,t={}){return T.add({children:e,...t})}function D(e){T.close(e)}const O=u(({children:e,className:t,placement:n,...i},a)=>{let{forkedRef:s,regionProps:l,state:u}=r(T,a),d=f(`toaster toast-container p-md`,{"position-fixed":n,"position-static":!n,"top-0":n&&n.includes(`top`),"top-50 translate-middle-y":n&&n.includes(`middle`),"bottom-0":n&&n.includes(`bottom`),"start-0":n&&n.includes(`start`),"start-50 translate-middle-x":n&&n.includes(`center`),"end-0":n&&n.includes(`end`)},t),m=t=>u.visibleToasts.length>0||e?/* @__PURE__ */ c.createElement(`div`,{className:d,...p(l,i),ref:t},e,u.visibleToasts.map(e=>{let{children:t,...n}=e.content;return/* @__PURE__ */ c.createElement(C,{key:e.key,defaultVisible:!0,...n,onClose:()=>u.close(e.key)},t)})):null;return n?/* @__PURE__ */ c.createElement(o,null,m(s)):m(s)});O.displayName=`Toaster`;export{w as a,b as c,T as i,v as l,E as n,C as o,D as r,S as s,O as t,g as u};
+//# sourceMappingURL=toast-D5-58Ch1.js.map

package/dist/chunks/toast-D5-58Ch1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-D5-58Ch1.js","names":["createPolymorphicComponent","useDismissibleTransition","useAutoDismiss","useToastRegionQueue","Icon","ResolvedIcon","Portal","CloseButton","React","classNames","ToastContext","createContext","useToast","useContext","ToastBodyRender","rest","Component","component","_className","closeButton","className","children","closeLabel","close","ToastBody","ToastFooterRender","ToastFooter","ToastHeaderRender","icon","titleId","time","ToastHeader","Toast","forwardRef","_visible","animation","autoDismissProps","autohide","entered","contextValues","color","solid","hasHeaderShorthand","title","headerGetsCloseButton","message","bodyGetsCloseButton","hasHeaderContent","isMounted","transitionClass","textId","mergeProps","forkedRef","footer","ToastIcon","toastQueue","ToastQueue","addToast","options","closeToast","key","Toaster","ref","placement","toaster","state","regionProps","toasterRef","toastChildren","toastProps","queued"],"sources":["../../src/components/toast/context.ts","../../src/components/toast/useToast.ts","../../src/components/toast/ToastBody.tsx","../../src/components/toast/ToastFooter.tsx","../../src/components/toast/ToastHeader.tsx","../../src/components/toast/Toast.tsx","../../src/components/toast/ToastIcon.tsx","../../src/components/toast/toastQueue.ts","../../src/components/toast/Toaster.tsx"],"sourcesContent":["import { createContext } from 'react'\n\nexport interface ToastContextProps {\n  /**\n   * Whether the toast is currently visible.\n   */\n  visible?: boolean\n  /**\n   * Dismisses the toast. Wire this to any element's `onClick` — see `useToast`.\n   */\n  close: () => void\n}\n\nexport const ToastContext = createContext<ToastContextProps>({ close: () => {} })\n","import { useContext } from 'react'\nimport { ToastContext, ToastContextProps } from './context'\n\nexport type UseToastResult = ToastContextProps\n\n// Reach the enclosing `Toast`'s dismiss handler from anywhere in its composed markup — e.g. to\n// close it from a plain `Button` placed in a `ToastFooter`, instead of a dedicated close\n// component. Only meaningful inside a `Toast`; outside one it returns a no-op `close`.\nexport const useToast = (): UseToastResult => useContext(ToastContext)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { CloseButton } from '../close-button/CloseButton'\nimport { useToast } from './useToast'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype ToastBodyOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Adds a close button alongside the body content, so a toast composed without a\n   * `ToastHeader` still gets a dismiss control without any manual layout markup.\n   */\n  closeButton?: boolean\n  /**\n   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for\n   * non-English UIs.\n   */\n  closeLabel?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type ToastBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ToastBodyOwnProps<C>\n>\n\ntype ToastBodyComponent = (<C extends ElementType = 'div'>(\n  props: ToastBodyProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ToastBodyRender<C extends ElementType = 'div'>(\n  { children, className, closeButton, closeLabel, component, ...rest }: ToastBodyProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const { close } = useToast()\n  const Component = component ?? 'div'\n  const _className = classNames(\n    'toast-body',\n    { 'd-flex align-items-start justify-content-between gap-sm': closeButton },\n    className\n  )\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {closeButton ? <div>{children}</div> : children}\n      {closeButton && <CloseButton label={closeLabel} onClick={close} />}\n    </Component>\n  )\n}\n\nexport const ToastBody = createPolymorphicComponent<ToastBodyComponent>(\n  ToastBodyRender as ForwardRefRenderFunction<Element, ToastBodyProps<ElementType>>,\n  'ToastBody'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype ToastFooterOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type ToastFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ToastFooterOwnProps<C>\n>\n\ntype ToastFooterComponent = (<C extends ElementType = 'div'>(\n  props: ToastFooterProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ToastFooterRender<C extends ElementType = 'div'>(\n  { children, className, component, ...rest }: ToastFooterProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('toast-footer', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const ToastFooter = createPolymorphicComponent<ToastFooterComponent>(\n  ToastFooterRender as ForwardRefRenderFunction<Element, ToastFooterProps<ElementType>>,\n  'ToastFooter'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement, ReactNode } from 'react'\nimport classNames from 'classnames'\n\nimport { CloseButton } from '../close-button/CloseButton'\nimport { useToast } from './useToast'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { ResolvedIcon } from '../icon/iconSlot'\n\ntype ToastHeaderOwnProps<C extends ElementType> = {\n  /**\n   * Heading, rendered before `time` as a `<strong>`.\n   */\n  children?: ReactNode\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Automatically add a close button to the header.\n   */\n  closeButton?: boolean\n  /**\n   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for\n   * non-English UIs.\n   */\n  closeLabel?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Leading icon. A string is an icon name, rendered like `<ToastIcon name={icon} />` (or by\n   * `IconProvider`'s `component`) and hidden from\n   * assistive technology by default, since it duplicates the heading visually. Pass any other\n   * node for a fully custom icon (typically a logo or avatar) — a custom node is left as-is,\n   * since it may carry its own meaningful accessible name (e.g. an avatar's `alt` text).\n   */\n  icon?: string | ReactNode\n  /**\n   * Trailing timestamp, rendered after the heading.\n   */\n  time?: ReactNode\n  /**\n   * Sets the `id` on the rendered heading element, for `aria-labelledby` wiring. Set\n   * automatically by `Toast` when both `title` and `message` are used together; only needed\n   * here for manual wiring in a fully custom composition.\n   */\n  titleId?: string\n}\n\nexport type ToastHeaderProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ToastHeaderOwnProps<C>\n>\n\ntype ToastHeaderComponent = (<C extends ElementType = 'div'>(\n  props: ToastHeaderProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ToastHeaderRender<C extends ElementType = 'div'>(\n  {\n    children,\n    className,\n    closeButton,\n    closeLabel,\n    component,\n    icon,\n    time,\n    titleId,\n    ...rest\n  }: ToastHeaderProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const { close } = useToast()\n  const Component = component ?? 'div'\n  const _className = classNames('toast-header', className)\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {icon != null &&\n        (typeof icon === 'string' ? (\n          <span aria-hidden=\"true\" className=\"me-sm\">\n            <ResolvedIcon value={icon} className=\"toast-icon\" />\n          </span>\n        ) : (\n          <span className=\"me-sm\">{icon}</span>\n        ))}\n      {children != null && (\n        <strong id={titleId} className=\"me-auto\">\n          {children}\n        </strong>\n      )}\n      {time != null && <small>{time}</small>}\n      {closeButton && <CloseButton label={closeLabel} onClick={close} />}\n    </Component>\n  )\n}\n\nexport const ToastHeader = createPolymorphicComponent<ToastHeaderComponent>(\n  ToastHeaderRender as ForwardRefRenderFunction<Element, ToastHeaderProps<ElementType>>,\n  'ToastHeader'\n)\n","import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'\nimport { mergeProps } from 'react-aria'\nimport classNames from 'classnames'\n\nimport { ContextColor } from '../../types'\nimport { useAutoDismiss, useDismissibleTransition } from '../../hooks'\nimport { ToastContext } from './context'\nimport { ToastBody } from './ToastBody'\nimport { ToastFooter } from './ToastFooter'\nimport { ToastHeader } from './ToastHeader'\n\nexport interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /**\n   * Apply a CSS fade transition to the toast. Off, the toast appears and disappears at once.\n   */\n  animation?: boolean\n  /**\n   * Auto hide the toast. The timer starts once the show transition completes and pauses\n   * while the pointer is over the toast or focus is within it.\n   */\n  autohide?: boolean\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Adds a close button — shorthand for `ToastHeader`'s/`ToastBody`'s `closeButton` prop.\n   * Placed in the header when `icon`/`title`/`time` is set; otherwise placed in the body\n   * alongside `message`, or in a header containing only the close button if `message` is\n   * also unset.\n   */\n  closeButton?: boolean\n  /**\n   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for\n   * non-English UIs. Shorthand for `ToastHeader`'s `closeLabel` prop.\n   */\n  closeLabel?: string\n  /**\n   * Sets the color of the component to one of Chassis context colors.\n   */\n  color?: ContextColor\n  /**\n   * Whether the toast is shown when it first renders. Such a toast is uncontrolled: its close\n   * button and the `autohide` timer hide it. Use `visible` to show and hide it from outside.\n   */\n  defaultVisible?: boolean\n  /**\n   * Delay hiding the toast (ms).\n   */\n  delay?: number\n  /**\n   * Trailing content — typically a row of `Button`s — rendered via a single `ToastFooter`,\n   * after `message`/`children`. Pass a function to receive `close` directly, instead of\n   * calling `useToast()` from a child component to wire up a \"Close\" action.\n   */\n  footer?: ReactNode | ((close: () => void) => ReactNode)\n  /**\n   * Leading icon for the header. A string is an icon name, rendered like\n   * `<ToastIcon name={icon} />` (or by `IconProvider`'s `component`); pass\n   * any other node for a fully custom icon (typically a logo or avatar). Shorthand for\n   * `ToastHeader`'s `icon` prop; hidden from assistive technology by default, since it\n   * duplicates `title` visually.\n   */\n  icon?: string | ReactNode\n  /**\n   * Message body, rendered via a single `ToastBody`. For multi-block content, compose\n   * `children` manually instead — `message` wraps everything in one element.\n   */\n  message?: ReactNode\n  /**\n   * Header timestamp, rendered after `title`. Shorthand for `ToastHeader`'s `time` prop.\n   */\n  time?: ReactNode\n  /**\n   * Header heading, rendered before `time`. Shorthand for `ToastHeader`'s children. When set\n   * alongside `message`, wires the toast's `aria-labelledby`/`aria-describedby` to them\n   * automatically.\n   */\n  title?: ReactNode\n  /**\n   * Callback fired once the toast has hidden: after its exit transition.\n   */\n  onClose?: () => void\n  /**\n   * Callback fired when the toast starts to show.\n   */\n  onShow?: () => void\n  /**\n   * Callback fired with `false` when the toast asks to hide: its close button, `close` from\n   * `useToast` or `footer`, or the `autohide` timer. With `visible` set, the toast hides only\n   * when `visible` becomes `false`.\n   */\n  onVisibleChange?: (visible: boolean) => void\n  /**\n   * ARIA live-region role. Use `status` (the default) for confirmation, progress, and\n   * informational messages, which announce politely. Use `alert` for messages that need\n   * immediate attention — validation errors, failed operations — which interrupt speech.\n   */\n  role?: 'status' | 'alert'\n  /**\n   * Apply a full-color background with inverted text. Only meaningful alongside `color`.\n   */\n  solid?: boolean\n  /**\n   * Apply a semi-transparent background.\n   */\n  translucent?: boolean\n  /**\n   * Whether the toast is shown. Setting it makes the toast controlled: it hides only when this\n   * becomes `false`, so pair it with `onVisibleChange`. Without either `visible` or\n   * `defaultVisible` a toast renders nothing.\n   */\n  visible?: boolean\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n  (\n    {\n      children,\n      animation = true,\n      autohide = true,\n      className,\n      closeButton,\n      closeLabel,\n      color,\n      defaultVisible = false,\n      delay = 5000,\n      footer,\n      icon,\n      message,\n      role = 'status',\n      solid,\n      time,\n      title,\n      translucent,\n      visible,\n      onClose,\n      onShow,\n      onVisibleChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const {\n      close,\n      entered,\n      forkedRef,\n      isMounted,\n      textId,\n      titleId,\n      transitionClass,\n      visible: _visible\n    } = useDismissibleTransition({\n      animated: animation,\n      defaultVisible,\n      displayName: 'Toast',\n      onClose,\n      onShow,\n      onVisibleChange,\n      ref,\n      visible\n    })\n\n    // The autohide timer is only meaningful once the show transition has actually finished (see\n    // `autohide`'s JSDoc) — gating on `_visible` alone would start it the instant the toast is\n    // asked to show, while it is still fading/sliding in.\n    const autoDismissProps = useAutoDismiss({\n      enabled: autohide,\n      delay,\n      visible: _visible && entered,\n      onHide: close\n    })\n\n    const contextValues = {\n      visible: _visible,\n      close\n    }\n\n    const _className = classNames(\n      'toast',\n      {\n        fade: animation,\n        context: !!color,\n        solid: Boolean(solid && color),\n        translucent\n      },\n      color,\n      className\n    )\n\n    const hasHeaderShorthand = icon != null || title != null || time != null\n    const headerGetsCloseButton = closeButton && (hasHeaderShorthand || message == null)\n    const bodyGetsCloseButton = closeButton && !hasHeaderShorthand && message != null\n    const hasHeaderContent = hasHeaderShorthand || headerGetsCloseButton\n\n    if (!isMounted) return null\n\n    return (\n      <ToastContext.Provider value={contextValues}>\n        <div\n          className={classNames(_className, transitionClass)}\n          role={role}\n          aria-labelledby={title != null ? titleId : undefined}\n          aria-describedby={title != null && message != null ? textId : undefined}\n          {...mergeProps(rest, autoDismissProps)}\n          ref={forkedRef}\n        >\n          {hasHeaderContent && (\n            <ToastHeader\n              icon={icon}\n              time={time}\n              titleId={title != null ? titleId : undefined}\n              closeButton={headerGetsCloseButton}\n              closeLabel={closeLabel}\n            >\n              {title}\n            </ToastHeader>\n          )}\n          {message != null && (\n            <ToastBody\n              id={title != null && message != null ? textId : undefined}\n              closeButton={bodyGetsCloseButton}\n              closeLabel={closeLabel}\n            >\n              {message}\n            </ToastBody>\n          )}\n          {children}\n          {footer != null && (\n            <ToastFooter>{typeof footer === 'function' ? footer(close) : footer}</ToastFooter>\n          )}\n        </div>\n      </ToastContext.Provider>\n    )\n  }\n)\n\nToast.displayName = 'Toast'\n","import React, { forwardRef } from 'react'\nimport classNames from 'classnames'\n\nimport { Icon, IconProps } from '../icon/Icon'\n\nexport type ToastIconProps = IconProps & {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n}\n\nexport const ToastIcon = forwardRef<HTMLSpanElement | SVGSVGElement, ToastIconProps>(\n  ({ className, ...rest }, ref) => {\n    const _className = classNames('toast-icon', className)\n\n    return <Icon className={_className} {...rest} ref={ref} />\n  }\n)\n\nToastIcon.displayName = 'ToastIcon'\n","import { ReactNode } from 'react'\nimport { ToastQueue } from 'react-stately'\n\nimport { ToastProps } from './Toast'\n\n// What `Toaster` spreads onto the `<Toast>` it renders for a queued toast: every `Toast` prop\n// that describes the toast itself. The queue owns whether it is shown.\nexport interface ToastContent extends Pick<\n  ToastProps,\n  | 'animation'\n  | 'autohide'\n  | 'closeButton'\n  | 'closeLabel'\n  | 'color'\n  | 'delay'\n  | 'footer'\n  | 'icon'\n  | 'message'\n  | 'role'\n  | 'solid'\n  | 'time'\n  | 'title'\n  | 'translucent'\n> {\n  /**\n   * Content of the toast. Compose manually (typically a `ToastHeader`/`ToastBody`/\n   * `ToastFooter`), or leave empty and use the `title`/`message`/`footer` shorthand options\n   * instead.\n   */\n  children?: ReactNode\n}\n\n// The queue backing `Toaster` — a module-level singleton so `addToast()` is callable from\n// anywhere (an event handler, an async callback) without threading a `push` prop through\n// render. `Toaster` subscribes to it via `useToastQueue`; nothing renders until a\n// `<Toaster />` is actually mounted somewhere to display the queue's contents.\nexport const toastQueue = new ToastQueue<ToastContent>()\n\n// Adds a toast to the queue. Returns the toast's key, which can be passed to `closeToast` to\n// dismiss it programmatically. `children` is optional — omit it for a toast composed entirely\n// from the `title`/`message`/`footer` shorthand options.\nexport function addToast(\n  children?: ReactNode,\n  options: Omit<ToastContent, 'children'> = {}\n): string {\n  return toastQueue.add({ children, ...options })\n}\n\n// Removes a queued toast immediately, bypassing its own exit animation.\nexport function closeToast(key: string): void {\n  toastQueue.close(key)\n}\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport classNames from 'classnames'\nimport { mergeProps } from 'react-aria'\n\nimport { useToastRegionQueue } from '../../hooks'\nimport { Portal } from '../portal/Portal'\nimport { Toast } from './Toast'\nimport { toastQueue } from './toastQueue'\n\nexport interface ToasterProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Overrides the toast region's accessible name (defaults to `'Notifications'`, per\n   * react-aria). Set this for non-English UIs, or to distinguish multiple toasters on the\n   * same page.\n   */\n  'aria-label'?: string\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Describes the placement of your component.\n   *\n   * @type 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | string\n   */\n  placement?:\n    | 'top-start'\n    | 'top-center'\n    | 'top-end'\n    | 'middle-start'\n    | 'middle-center'\n    | 'middle-end'\n    | 'bottom-start'\n    | 'bottom-center'\n    | 'bottom-end'\n    | string\n}\n\n// Renders the shared `toastQueue` (see `toastQueue.ts` — `addToast()` is how toasts get added\n// to it from anywhere in the app) plus any statically-passed `children`, e.g. a permanently\n// pinned toast alongside dynamic ones.\nexport const Toaster = forwardRef<HTMLDivElement, ToasterProps>(\n  ({ children, className, placement, ...rest }, ref) => {\n    const { forkedRef, regionProps, state } = useToastRegionQueue(toastQueue, ref)\n\n    const _className = classNames(\n      'toaster toast-container p-md',\n      {\n        'position-fixed': placement,\n        'position-static': !placement,\n        'top-0': placement && placement.includes('top'),\n        'top-50 translate-middle-y': placement && placement.includes('middle'),\n        'bottom-0': placement && placement.includes('bottom'),\n        'start-0': placement && placement.includes('start'),\n        'start-50 translate-middle-x': placement && placement.includes('center'),\n        'end-0': placement && placement.includes('end')\n      },\n      className\n    )\n\n    const toaster = (toasterRef?: React.Ref<HTMLDivElement>) => {\n      return state.visibleToasts.length > 0 || children ? (\n        // Merged, so a caller's `onFocus`, `onBlur` or `onKeyDown` chains with the region's own,\n        // which hand focus on when a toast closes, rather than replacing them.\n        <div className={_className} {...mergeProps(regionProps, rest)} ref={toasterRef}>\n          {children}\n          {state.visibleToasts.map((queued) => {\n            const { children: toastChildren, ...toastProps } = queued.content\n            return (\n              <Toast\n                key={queued.key}\n                defaultVisible\n                {...toastProps}\n                onClose={() => state.close(queued.key)}\n              >\n                {toastChildren}\n              </Toast>\n            )\n          })}\n        </div>\n      ) : null\n    }\n\n    // A placed region is portaled to `document.body`, on the server as on the client: it renders\n    // nothing until hydration has finished, instead of rendering inline on the server and moving\n    // on the client, which discarded the server's markup.\n    return placement ? <Portal>{toaster(forkedRef)}</Portal> : toaster(forkedRef)\n  }\n)\n\nToaster.displayName = 'Toaster'\n"],"mappings":"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"}

package/dist/chunks/tooltip-TGFFlOJL.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{i as e,o as t}from"./slot-DagH0Gxq.js";import{t as ee}from"./useForkedRef-WoqMqsWE.js";import{t as n}from"./useHydrated-Dud4JEwp.js";import{t as r}from"./useTransitionState-WEw9C0yn.js";import{a as i,i as a,n as o,o as s,s as c}from"./overlayPlacement-D2vfhhg3.js";import{t as l}from"./useOpenStateProps-CdSO1nmI.js";import{t as u}from"./useOverlayMaxHeight-5UnurH0W.js";import{t as d}from"./Portal-BTDylxAi.js";import f,{forwardRef as p,useEffect as m,useRef as h}from"react";import g from"classnames";import{mergeProps as _,useOverlayPosition as v,useTooltip as y,useTooltipTrigger as b}from"react-aria";import{useTooltipTriggerState as te}from"react-stately";const x=p(function({children:p,className:x,content:S,defaultVisible:C,placement:w=`top`,offset:T=[0,6],onHide:E,onShow:D,onVisibleChange:O,style:k,trigger:A,visible:j,...M},N){let P=h(null),F=h(null),I=h(null),L=ee(N,I),R=e(p,`Tooltip`),z=te({...l({defaultVisible:C,onVisibleChange:O,visible:j},`Tooltip`),trigger:A,delay:0,closeDelay:0}),B=j!==void 0&&!O,{triggerProps:V,tooltipProps:H}=b({trigger:A},B?{...z,isOpen:!1}:z,F),{tooltipProps:U}=y({},z),W=z.open;m(()=>{z.isOpen&&W(!0)},[z.isOpen]);let G=c({close:()=>z.close(!0),isOpen:z.isOpen,onHide:E,onShow:D,triggerRef:F}),{overlayProps:K,arrowProps:q,placement:J}=v({targetRef:F,overlayRef:I,placement:a(w),offset:T[1],crossOffset:T[0],arrowSize:8,arrowRef:P,isOpen:z.isOpen});u(I,z.isOpen,`release`);let Y={...k,position:K.style?.position,top:K.style?.top,left:K.style?.left},X=o(w,J),{isMounted:Z,phase:Q}=r({in:z.isOpen&&G!==null,mountOnEnter:!0,nodeRef:I,unmountOnExit:!0}),$=n();return/* @__PURE__ */ f.createElement(f.Fragment,null,R?t(R,_($?V:{...V,"aria-describedby":void 0},$&&B&&z.isOpen?{"aria-describedby":H.id}:{}),F):p,/* @__PURE__ */ f.createElement(d,{container:G},Z&&/* @__PURE__ */ f.createElement(`div`,{..._(H,U,M),className:g(`tooltip cx-tooltip-auto`,s(Q),x),"data-cx-placement":X,ref:L,style:Y},/* @__PURE__ */ f.createElement(`div`,{className:`tooltip-arrow`,...q,style:i(q)}),/* @__PURE__ */ f.createElement(`div`,{className:`tooltip-inner`},S))))});x.displayName=`Tooltip`;export{x as t};
+//# sourceMappingURL=tooltip-TGFFlOJL.js.map

package/dist/chunks/tooltip-TGFFlOJL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-TGFFlOJL.js","names":["getTriggerChild","renderSlotted","useForkedRef","useHydrated","useTransitionState","getOverlayArrowStyle","toAriaPlacement","resolveDataPlacement","getOverlayTransitionClass","useFloatingOverlay","useOpenStateProps","useOverlayMaxHeight","Portal","React","classNames","Tooltip","forwardRef","offsetProp","rest","arrowRef","useRef","triggerRef","floatingRef","forkedFloatingRef","ref","triggerElement","children","state","useTooltipTriggerState","isHeld","visible","onVisibleChange","tooltipTriggerProps","useTooltipTrigger","useTooltip","registerOpen","useEffect","portalContainer","resolvedPlacement","useOverlayPosition","placement","floatingStyle","style","overlayProps","placementAttr","hydrated","mergeProps","triggerProps","isMounted","tooltipProps","phase","className","arrowProps","content"],"sources":["../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  useEffect,\n  useRef\n} from 'react'\nimport classNames from 'classnames'\nimport { mergeProps, useOverlayPosition, useTooltip, useTooltipTrigger } from 'react-aria'\nimport { useTooltipTriggerState } from 'react-stately'\n\nimport {\n  getOverlayArrowStyle,\n  getOverlayTransitionClass,\n  useFloatingOverlay,\n  useForkedRef,\n  useOpenStateProps,\n  useOverlayMaxHeight,\n  useTransitionState\n} from '../../hooks'\nimport { Placement, resolveDataPlacement, toAriaPlacement } from '../../utils/overlayPlacement'\nimport { useHydrated } from '../../hooks/useHydrated'\nimport { Portal } from '../portal/Portal'\nimport { getTriggerChild, renderSlotted } from '../../utils/slot'\n\nexport type { Placement }\n\n// Every attribute besides the component's own props goes to the panel, the `.tooltip` element:\n// `className`, `style`, `id`, `data-*`, ARIA attributes and event handlers. So does the ref.\nexport interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'content'> {\n  /**\n   * The trigger: a single element, which shows the tooltip on hover and focus.\n   */\n  children: ReactElement\n  /**\n   * Content node for your component.\n   */\n  content: ReactNode | string\n  /**\n   * Whether the tooltip is shown when it first renders. Use it instead of `visible` when nothing\n   * outside needs to control the tooltip.\n   */\n  defaultVisible?: boolean\n  /**\n   * Offset of the tooltip relative to its target, as `[crossAxis, mainAxis]`.\n   */\n  offset?: [number, number]\n  /**\n   * Callback fired when the tooltip hides.\n   */\n  onHide?: () => void\n  /**\n   * Callback fired when the tooltip shows.\n   */\n  onShow?: () => void\n  /**\n   * Callback fired when the tooltip asks to show or hide: hover, focus, blur, the Escape key, or\n   * the closing of the dialog it is in. Receives the state it asks for. With `visible` set, the\n   * tooltip changes only when `visible` does.\n   */\n  onVisibleChange?: (visible: boolean) => void\n  /**\n   * Describes the preferred placement of your component. Chassis will flip it to keep it in\n   * view.\n   */\n  placement?: Placement\n  /**\n   * Tooltips always show on focus, since keyboard/screen-reader users need them too. Set to\n   * `'focus'` to disable the hover trigger and show on focus only.\n   */\n  trigger?: 'hover' | 'focus'\n  /**\n   * Whether the tooltip is shown. Setting it makes the tooltip controlled: it shows and hides\n   * only when this changes, so pair it with `onVisibleChange`. Leave it unset, or use\n   * `defaultVisible`, for a tooltip that shows and hides itself.\n   */\n  visible?: boolean\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  {\n    children,\n    className,\n    content,\n    defaultVisible,\n    placement = 'top',\n    offset: offsetProp = [0, 6],\n    onHide,\n    onShow,\n    onVisibleChange,\n    style,\n    trigger,\n    visible,\n    ...rest\n  },\n  ref\n) {\n  const arrowRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLElement | null>(null)\n  const floatingRef = useRef<HTMLDivElement>(null)\n  const forkedFloatingRef = useForkedRef(ref, floatingRef)\n\n  // The trigger is rendered as `asChild` renders a child (`renderSlotted`): `triggerProps` merge\n  // into the child's own props, so its handlers chain and its `aria-describedby` adds up, and\n  // `triggerRef` is forked with the ref the caller put on the child.\n  const triggerElement = getTriggerChild(children, 'Tooltip')\n\n  // react-stately defaults to a 1500ms warmup delay (and 500ms cooldown) before a first tooltip\n  // shows, spectrum-style — chassis-css's own JS plugin defaults to instant (`delay: 0`), so\n  // match that here rather than leaving new adopters to wonder why the first hover lags.\n  const state = useTooltipTriggerState({\n    ...useOpenStateProps({ defaultVisible, onVisibleChange, visible }, 'Tooltip'),\n    trigger,\n    delay: 0,\n    closeDelay: 0\n  })\n  // While a tooltip is open, react-aria stops every Escape at the document and closes the\n  // tooltip with it. One held open by `visible` with no `onVisibleChange` never closes, so it\n  // would swallow Escape for the whole page: a popover, a menu or a dialog beside it could no\n  // longer be closed by it. Such a tooltip is passed as closed, which is all the hook reads the\n  // state for besides `aria-describedby`, set below.\n  const isHeld = visible !== undefined && !onVisibleChange\n  const { triggerProps, tooltipProps: tooltipTriggerProps } = useTooltipTrigger(\n    { trigger },\n    isHeld ? { ...state, isOpen: false } : state,\n    triggerRef\n  )\n  const { tooltipProps } = useTooltip({}, state)\n\n  // react-stately shows one tooltip at a time, but counts only a tooltip it opened through\n  // `open()`. One shown by `visible` or `defaultVisible` joins here, so the next tooltip to open\n  // asks it to hide, and it closes the ones already open.\n  const registerOpen = state.open\n  useEffect(() => {\n    if (state.isOpen) registerOpen(true)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.isOpen])\n\n  // Bypasses the hook's hover-warmup delay (`close`'s `immediate` argument): a containing dialog\n  // closing applies right away.\n  const portalContainer = useFloatingOverlay({\n    close: () => state.close(true),\n    isOpen: state.isOpen,\n    onHide,\n    onShow,\n    triggerRef\n  })\n\n  const {\n    overlayProps,\n    arrowProps,\n    placement: resolvedPlacement\n  } = useOverlayPosition({\n    targetRef: triggerRef,\n    overlayRef: floatingRef,\n    placement: toAriaPlacement(placement),\n    offset: offsetProp[1],\n    crossOffset: offsetProp[0],\n    arrowSize: 8,\n    arrowRef,\n    isOpen: state.isOpen\n  })\n\n  // The hook writes the room it finds as an inline `max-height` on the panel itself; the panel is\n  // as tall as its content (`useOverlayMaxHeight`).\n  useOverlayMaxHeight(floatingRef, state.isOpen, 'release')\n\n  // The caller's `style` first: the position is the component's to set.\n  const floatingStyle: React.CSSProperties = {\n    ...style,\n    position: overlayProps.style?.position as React.CSSProperties['position'],\n    top: overlayProps.style?.top,\n    left: overlayProps.style?.left\n  }\n  const placementAttr = resolveDataPlacement(placement, resolvedPlacement)\n\n  // The panel mounts once its container is known (`useFloatingOverlay`), and only there.\n  const { isMounted, phase } = useTransitionState({\n    in: state.isOpen && portalContainer !== null,\n    mountOnEnter: true,\n    nodeRef: floatingRef,\n    unmountOnExit: true\n  })\n\n  // The tooltip is portaled, so it exists only once hydration has finished: until then the\n  // trigger isn't described by it, or its HTML would refer to an id no element has.\n  const hydrated = useHydrated()\n\n  return (\n    <>\n      {triggerElement\n        ? renderSlotted(\n            triggerElement,\n            mergeProps(\n              hydrated ? triggerProps : { ...triggerProps, 'aria-describedby': undefined },\n              hydrated && isHeld && state.isOpen\n                ? { 'aria-describedby': tooltipTriggerProps.id }\n                : {}\n            ),\n            triggerRef\n          )\n        : children}\n      <Portal container={portalContainer}>\n        {isMounted && (\n          <div\n            {...mergeProps(tooltipTriggerProps, tooltipProps, rest)}\n            className={classNames(\n              'tooltip cx-tooltip-auto',\n              getOverlayTransitionClass(phase),\n              className\n            )}\n            data-cx-placement={placementAttr}\n            ref={forkedFloatingRef}\n            style={floatingStyle}\n          >\n            <div\n              className=\"tooltip-arrow\"\n              {...arrowProps}\n              style={getOverlayArrowStyle(arrowProps)}\n            ></div>\n            <div className=\"tooltip-inner\">{content}</div>\n          </div>\n        )}\n      </Portal>\n    </>\n  )\n})\n\nTooltip.displayName = 'Tooltip'\n"],"mappings":"A,8rBAgFA,MAAae,EAAUC,EAAyC,SAC9D,CACE,WACA,YACA,UACA,iBACA,YAAY,MACZ,OAAQC,EAAa,CAAC,EAAG,CAAC,EAC1B,SACA,SACA,kBACA,QACA,UACA,UACA,GAAGC,GAEL,EACA,CACA,IAAMC,EAAWC,EAAuB,IAAI,EACtCC,EAAaD,EAA2B,IAAI,EAC5CE,EAAcF,EAAuB,IAAI,EACzCG,EAAoBrB,GAAasB,EAAKF,CAAW,EAKjDG,EAAiBzB,EAAgB0B,EAAU,SAAS,EAKpDC,EAAQC,GAAuB,CACnC,GAAGlB,EAAkB,CAAE,iBAAgB,kBAAiB,SAAQ,EAAG,SAAS,EAC5E,UACA,MAAO,EACP,WAAY,CACd,CAAC,EAMKmB,EAASC,IAAY,IAAA,IAAa,CAACC,EACnC,CAAE,eAAc,aAAcC,GAAwBC,EAC1D,CAAE,SAAQ,EACVJ,EAAS,CAAE,GAAGF,EAAO,OAAQ,EAAM,EAAIA,EACvCN,CACF,EACM,CAAE,gBAAiBa,EAAW,CAAC,EAAGP,CAAK,EAKvCQ,EAAeR,EAAM,KAC3BS,MAAgB,CACVT,EAAM,QAAQQ,EAAa,EAAI,CAErC,EAAG,CAACR,EAAM,MAAM,CAAC,EAIjB,IAAMU,EAAkB5B,EAAmB,CACzC,UAAakB,EAAM,MAAM,EAAI,EAC7B,OAAQA,EAAM,OACd,SACA,SACA,YACF,CAAC,EAEK,CACJ,eACA,aACA,UAAWW,GACTC,EAAmB,CACrB,UAAWlB,EACX,WAAYC,EACZ,UAAWhB,EAAgBkC,CAAS,EACpC,OAAQvB,EAAW,GACnB,YAAaA,EAAW,GACxB,UAAW,EACX,WACA,OAAQU,EAAM,MAChB,CAAC,EAIDhB,EAAoBW,EAAaK,EAAM,OAAQ,SAAS,EAGxD,IAAMc,EAAqC,CACzC,GAAGC,EACH,SAAUC,EAAa,OAAO,SAC9B,IAAKA,EAAa,OAAO,IACzB,KAAMA,EAAa,OAAO,IAC5B,EACMC,EAAgBrC,EAAqBiC,EAAWF,CAAiB,EAGjE,CAAE,YAAW,SAAUlC,EAAmB,CAC9C,GAAIuB,EAAM,QAAUU,IAAoB,KACxC,aAAc,GACd,QAASf,EACT,cAAe,EACjB,CAAC,EAIKuB,EAAW1C,EAAY,EAE7B,MACE,kBAAA,cAAAU,EAAA,SAAA,KACGY,EACGxB,EACEwB,EACAqB,EACED,EAAWE,EAAe,CAAE,GAAGA,EAAc,mBAAoB,IAAA,EAAU,EAC3EF,GAAYhB,GAAUF,EAAM,OACxB,CAAE,mBAAoBK,EAAoB,EAAG,EAC7C,CAAC,CACP,EACAX,CACF,EACAK,EACJ,kBAAA,cAACd,EAAD,CAAQ,UAAWyB,CAqBX,EApBLW,GACC,kBAAA,cAAC,MAAD,CACE,GAAIF,EAAWd,EAAqBiB,EAAc/B,CAAI,EACtD,UAAWJ,EACT,0BACAN,EAA0B0C,CAAK,EAC/BC,CACF,EACA,oBAAmBP,EACnB,IAAKrB,EACL,MAAOkB,CAQJ,EANH,kBAAA,cAAC,MAAD,CACE,UAAU,gBACV,GAAIW,EACJ,MAAO/C,EAAqB+C,CAAU,CAClC,CAAA,EACN,kBAAA,cAAC,MAAD,CAAK,UAAU,eAA8B,EAAbC,CAAa,CAC1C,CAED,CACR,CAEN,CAAC,EAED,EAAQ,YAAc,U"}

package/dist/chunks/tree-BO0WSxQa.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{t as e}from"./iconSlot-DU_WcSL_.js";import{t}from"./useSelectionForMode-B_oTWvEy.js";import n,{createContext as r,forwardRef as i,useContext as a,useEffect as o,useMemo as s,useRef as c}from"react";import l from"classnames";import{useButton as u,useCheckbox as d}from"react-aria";import{useToggleState as f}from"react-stately";import{ButtonContext as p,CheckboxContext as m,Collection as h,Tree as g,TreeItem as _,TreeItemContent as v,useContextProps as y,useSlottedContext as b}from"react-aria-components";const x=r({checkboxes:!1}),S=i(({autoFocus:e,checkboxes:r,children:i,className:a,defaultSelectedKeys:o,expandIcon:c,onSelectionChange:u,renderEmptyState:d,selectionBehavior:f=`toggle`,selectedKeys:p,selectionMode:m=`none`,...h},_)=>{let v=t({defaultSelectedKeys:o,onSelectionChange:u,selectedKeys:p,selectionMode:m}),y=s(()=>({checkboxes:r??(m===`multiple`&&f===`toggle`),expandIcon:c}),[r,c,f,m]);return/* @__PURE__ */ n.createElement(x.Provider,{value:y},/* @__PURE__ */ n.createElement(g,{...h,autoFocus:e===!0?`first`:e,className:l(`tree`,a),ref:_,renderEmptyState:d&&(()=>d()),onSelectionChange:v.onSelectionChange,selectedKeys:v.selectedKeys,selectionBehavior:f,selectionMode:m},i))});S.displayName=`Tree`;const C=({disabled:t})=>{let{expandIcon:r}=a(x),[i,o]=y({slot:`chevron`},null,p),{buttonProps:s}=u({...i,isDisabled:t},o);return/* @__PURE__ */ n.createElement(`button`,{...s,className:`tree-item-toggle`,ref:o},/* @__PURE__ */ n.createElement(e,{className:`tree-item-toggle-icon`,icon:`expand`,override:r}))},w=()=>{let e=b(m,`selection`),t=f(e),r=c(null),{inputProps:i}=d(e,t,r);return/* @__PURE__ */ n.createElement(`input`,{...i,"aria-describedby":void 0,className:`check-input tree-item-check`,ref:r})},T=e=>/* @__PURE__ */ n.createElement(`div`,{...e,"aria-labelledby":void 0}),E=(e,t,n)=>{for(let r=e.getItem(t);r?.parentKey!=null;){if(r.parentKey===n)return!0;r=e.getItem(r.parentKey)}return!1},D=({hasChildItems:e,icon:t,id:r,isDisabled:i,isExpanded:s,label:c,selectionMode:l,state:u})=>{let{checkboxes:d}=a(x),{selectionManager:f}=u,p=f.focusedKey;return o(()=>{e&&!s&&p!=null&&E(u.collection,p,r)&&f.setFocusedKey(r)},[e,s,p]),/* @__PURE__ */ n.createElement(n.Fragment,null,e?/* @__PURE__ */ n.createElement(C,{disabled:i}):/* @__PURE__ */ n.createElement(`span`,{className:`tree-item-spacer`}),d&&l!==`none`&&/* @__PURE__ */ n.createElement(w,null),t!=null&&/* @__PURE__ */ n.createElement(`span`,{"aria-hidden":`true`,className:`tree-item-icon`},t),/* @__PURE__ */ n.createElement(`span`,{className:`tree-item-label`},c))},O=i(({children:e,className:t,dependencies:r,disabled:i,icon:a,id:o,items:s,label:c,onAction:u,style:d,textValue:f},p)=>{let m=f??(typeof c==`string`||typeof c==`number`?String(c):``);return/* @__PURE__ */ n.createElement(_,{className:({isDisabled:e,isExpanded:n,isSelected:r})=>l(`tree-item`,{active:r,disabled:e,expanded:n},t),id:o,isDisabled:i,onAction:u,ref:p,render:T,style:({level:e})=>({...d,"--cx-tree-level":e}),textValue:m},/* @__PURE__ */ n.createElement(v,null,({hasChildItems:e,id:t,isDisabled:r,isExpanded:i,selectionMode:o,state:s})=>/* @__PURE__ */ n.createElement(D,{hasChildItems:e,icon:a,id:t,isDisabled:r,isExpanded:i,label:c,selectionMode:o,state:s})),s?/* @__PURE__ */ n.createElement(h,{dependencies:r,items:s},e):typeof e==`function`?null:e)});O.displayName=`TreeItem`;export{S as n,O as t};
+//# sourceMappingURL=tree-BO0WSxQa.js.map

package/dist/chunks/tree-BO0WSxQa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-BO0WSxQa.js","names":["AriaTree","Tree","AriaTreeItem","TreeItem","IconSlot","React","classNames","TreeConfigContext","createContext","Tree$1","forwardRef","rest","selection","useSelectionForMode","config","useMemo","checkboxes","selectionMode","selectionBehavior","expandIcon","Tree","autoFocus","className","renderEmptyState","children","TreeItemToggle","useContext","props","ref","useContextProps","ButtonContext","useButton","disabled","buttonProps","TreeItemCheckbox","useSlottedContext","CheckboxContext","state","useToggleState","useRef","useCheckbox","inputProps","renderRow","isUnder","node","collection","key","ancestorKey","TreeItemBody","focusedKey","selectionManager","useEffect","hasChildItems","id","isExpanded","isDisabled","icon","label","TreeItem$1","text","textValue","TreeItem","isSelected","style","level","TreeItemContent","items","Collection"],"sources":["../../src/components/tree/context.ts","../../src/components/tree/Tree.tsx","../../src/components/tree/TreeItem.tsx"],"sourcesContent":["import { createContext } from 'react'\n\nimport { IconValue } from '../../utils/iconConfig'\n\n// What a `Tree` tells its items: whether a selectable item draws a checkbox, and the chevron to\n// draw. Private to this folder: an item reads it, nothing outside the tree does.\nexport interface TreeConfig {\n  checkboxes: boolean\n  expandIcon?: IconValue\n}\n\nexport const TreeConfigContext = createContext<TreeConfig>({ checkboxes: false })\n","import React, { CSSProperties, forwardRef, ReactElement, ReactNode, Ref, useMemo } from 'react'\nimport classNames from 'classnames'\nimport { Key, Selection, Tree as AriaTree } from 'react-aria-components'\n\nimport { useSelectionForMode } from '../../hooks/useSelectionForMode'\nimport { IconValue } from '../../utils/iconConfig'\nimport { TreeConfigContext } from './context'\nimport './Tree.scss'\n\nexport interface TreeProps<T extends object> {\n  /**\n   * An accessible name for the tree, when no visible heading names it.\n   */\n  'aria-label'?: string\n  /**\n   * The id of the visible heading that names the tree.\n   */\n  'aria-labelledby'?: string\n  /**\n   * Focus the tree when it mounts: `true` or `'first'` focuses its first item, `'last'` its last.\n   */\n  autoFocus?: boolean | 'first' | 'last'\n  /**\n   * Draw a checkbox in every item, which selects the item. On by default with\n   * `selectionMode=\"multiple\"` and the `'toggle'` selection behavior, off otherwise.\n   */\n  checkboxes?: boolean\n  /**\n   * `TreeItem` elements, or a render function called once per entry of `items`, returning that\n   * entry's `TreeItem`.\n   */\n  children: ReactNode | ((item: T) => ReactElement)\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * The keys of the items expanded at first (uncontrolled).\n   */\n  defaultExpandedKeys?: Iterable<Key>\n  /**\n   * The keys of the items selected at first (uncontrolled): `'all'`, or an iterable of keys.\n   */\n  defaultSelectedKeys?: 'all' | Iterable<Key>\n  /**\n   * Values that should rebuild the items when using the `items`/render-function form of\n   * `children` — e.g. a value from outside `items` that the render function reads. Without this,\n   * changing that value won't re-render the items, which are only rebuilt when `items` or\n   * `dependencies` change by reference.\n   */\n  dependencies?: ReadonlyArray<unknown>\n  /**\n   * Whether `disabledKeys` disables every interaction with an item, or only its selection.\n   *\n   * @default 'all'\n   */\n  disabledBehavior?: 'all' | 'selection'\n  /**\n   * The keys of the items that are disabled.\n   */\n  disabledKeys?: Iterable<Key>\n  /**\n   * Keep at least one item selected: the last selected item can't be deselected.\n   */\n  disallowEmptySelection?: boolean\n  /**\n   * The keys of the expanded items (controlled).\n   */\n  expandedKeys?: Iterable<Key>\n  /**\n   * The chevron of an item with child items, in place of `IconProvider`'s `expand` icon: an icon\n   * name, or an element.\n   */\n  expandIcon?: IconValue\n  /**\n   * The id of the tree element.\n   */\n  id?: string\n  /**\n   * The data to render as items, through the function form of `children`.\n   */\n  items?: Iterable<T>\n  /**\n   * Called with an item's key when the item is activated: with Enter, or with a click when the\n   * tree has no selection. An item's own `onAction` is called too.\n   */\n  onAction?: (key: Key) => void\n  /**\n   * Called with the keys of the expanded items when an item expands or collapses.\n   */\n  onExpandedChange?: (keys: Set<Key>) => void\n  /**\n   * Called with the keys of the selected items (`'all'`, or a `Set`) when the selection changes.\n   */\n  onSelectionChange?: (keys: Selection) => void\n  /**\n   * What to render in place of the items when there are none.\n   */\n  renderEmptyState?: () => ReactNode\n  /**\n   * The keys of the selected items (controlled): `'all'`, or an iterable of keys.\n   */\n  selectedKeys?: 'all' | Iterable<Key>\n  /**\n   * How a click changes a multiple selection: `'toggle'` adds or removes the clicked item,\n   * `'replace'` selects it alone, with Ctrl, Cmd and Shift for more, as a file manager does.\n   *\n   * @default 'toggle'\n   */\n  selectionBehavior?: 'toggle' | 'replace'\n  /**\n   * Whether items can be selected, and how many at a time.\n   *\n   * @default 'none'\n   */\n  selectionMode?: 'none' | 'single' | 'multiple'\n  /**\n   * Inline styles for the tree element.\n   */\n  style?: CSSProperties\n}\n\nconst TreeInner = <T extends object>(\n  {\n    autoFocus,\n    checkboxes,\n    children,\n    className,\n    defaultSelectedKeys,\n    expandIcon,\n    onSelectionChange,\n    renderEmptyState,\n    selectionBehavior = 'toggle',\n    selectedKeys,\n    selectionMode = 'none',\n    ...rest\n  }: TreeProps<T>,\n  ref: Ref<HTMLDivElement>\n) => {\n  const selection = useSelectionForMode({\n    defaultSelectedKeys,\n    onSelectionChange,\n    selectedKeys,\n    selectionMode\n  })\n  // A checkbox per item is the toggle behavior's way of selecting several; the replace behavior\n  // selects by click, as a file manager does.\n  const config = useMemo(\n    () => ({\n      checkboxes: checkboxes ?? (selectionMode === 'multiple' && selectionBehavior === 'toggle'),\n      expandIcon\n    }),\n    [checkboxes, expandIcon, selectionBehavior, selectionMode]\n  )\n\n  // react-aria-components builds the collection from `children`, flattens it by `expandedKeys`\n  // and renders every visible item as a row of a `treegrid`, on the server too, so the server's\n  // HTML holds the expanded items.\n  return (\n    <TreeConfigContext.Provider value={config}>\n      <AriaTree\n        {...rest}\n        // react-aria focuses the tree element itself for `true`; the first item is what a\n        // keyboard user expects.\n        autoFocus={autoFocus === true ? 'first' : autoFocus}\n        className={classNames('tree', className)}\n        ref={ref}\n        renderEmptyState={renderEmptyState && (() => renderEmptyState())}\n        onSelectionChange={selection.onSelectionChange}\n        selectedKeys={selection.selectedKeys}\n        selectionBehavior={selectionBehavior}\n        selectionMode={selectionMode}\n      >\n        {children}\n      </AriaTree>\n    </TreeConfigContext.Provider>\n  )\n}\n\n// `forwardRef` erases type parameters, so the generic component is cast back to a generic\n// signature for callers — the pattern `DataGrid` uses.\nexport const Tree = forwardRef(TreeInner) as <T extends object>(\n  props: TreeProps<T> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement\n\n;(Tree as { displayName?: string }).displayName = 'Tree'\n","import React, {\n  CSSProperties,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useContext,\n  useEffect,\n  useRef\n} from 'react'\nimport classNames from 'classnames'\nimport { AriaButtonProps, AriaCheckboxProps, useButton, useCheckbox } from 'react-aria'\nimport { useToggleState } from 'react-stately'\nimport {\n  ButtonContext,\n  ButtonProps,\n  CheckboxContext,\n  CheckboxProps,\n  Collection,\n  Key,\n  TreeItem as AriaTreeItem,\n  TreeItemContent,\n  TreeItemContentRenderProps,\n  useContextProps,\n  useSlottedContext\n} from 'react-aria-components'\n\nimport { IconSlot } from '../icon/iconSlot'\nimport { TreeConfigContext } from './context'\n\nexport interface TreeItemProps<T extends object = object> {\n  /**\n   * The item's child items: `TreeItem` elements, or a render function called once per entry of\n   * `items`, returning that entry's `TreeItem`.\n   */\n  children?: ReactNode | ((item: T) => ReactElement)\n  /**\n   * A string of all className you want applied to the item.\n   */\n  className?: string\n  /**\n   * Values that should rebuild the child items when using the `items`/render-function form of\n   * `children`, as `Tree`'s `dependencies`.\n   */\n  dependencies?: ReadonlyArray<unknown>\n  /**\n   * Toggle the disabled state for the item, as a key in the tree's `disabledKeys` does.\n   */\n  disabled?: boolean\n  /**\n   * An icon drawn before the label.\n   */\n  icon?: ReactNode\n  /**\n   * The item's key, named by `expandedKeys`, `selectedKeys` and `disabledKeys`. Defaults to the\n   * key of the data entry the item renders, or to the item's position.\n   */\n  id?: Key\n  /**\n   * The data to render as child items, through the function form of `children`.\n   */\n  items?: Iterable<T>\n  /**\n   * The item's content.\n   */\n  label: ReactNode\n  /**\n   * Called when the item is activated: with Enter, or with a click when the tree has no\n   * selection.\n   */\n  onAction?: () => void\n  /**\n   * Inline styles for the item's row.\n   */\n  style?: CSSProperties\n  /**\n   * The item's text, which typing a letter in the tree searches. Defaults to `label` when it is a\n   * string.\n   */\n  textValue?: string\n}\n\n// The chevron: a button react-aria-components hands its props (the toggle, \"Expand\"/\"Collapse\"\n// named after the row, out of the tab order) through `ButtonContext`'s `chevron` slot, and whose\n// ref it checks for, so it is read from that slot rather than rendered as its own `Button`. The\n// icon goes through `IconSlot`, so `IconProvider` and the tree's `expandIcon` can replace it.\nconst TreeItemToggle = ({ disabled }: { disabled: boolean }) => {\n  const { expandIcon } = useContext(TreeConfigContext)\n  const [props, ref] = useContextProps({ slot: 'chevron' } as ButtonProps, null, ButtonContext)\n  // The slot's `onPress` does nothing on a disabled row, but says nothing of it: the button is\n  // disabled too.\n  const { buttonProps } = useButton({ ...(props as AriaButtonProps), isDisabled: disabled }, ref)\n  return (\n    <button {...buttonProps} className=\"tree-item-toggle\" ref={ref}>\n      <IconSlot className=\"tree-item-toggle-icon\" icon=\"expand\" override={expandIcon} />\n    </button>\n  )\n}\n\n// The selection checkbox: react-aria-components publishes its props (selected, disabled, named\n// \"Select\" after the row) on `CheckboxContext`'s `selection` slot, as `DataGridSelectionCell`\n// reads them. A native `<input class=\"check-input\">` takes chassis-css's checkbox styles as is.\nconst TreeItemCheckbox = () => {\n  const props = useSlottedContext(CheckboxContext, 'selection') as CheckboxProps\n  const state = useToggleState(props as AriaCheckboxProps)\n  const ref = useRef<HTMLInputElement>(null)\n  const { inputProps } = useCheckbox(props as AriaCheckboxProps, state, ref)\n  // `aria-describedby` after the spread: react-aria's own adds ids it never renders (FORMS.md,\n  // gotcha 6), on the server only.\n  return (\n    <input\n      {...inputProps}\n      aria-describedby={undefined}\n      className=\"check-input tree-item-check\"\n      ref={ref}\n    />\n  )\n}\n\n// The row's element. react-aria's `useGridListItem` names the row by itself and a description\n// slot (`aria-labelledby=\"<row> <description>\"`) that nothing renders: the slot id is written on\n// the server and dropped once the browser finds no element with it (FORMS.md, gotcha 6), so the\n// settled row has `aria-label` alone. react-aria-components' `TreeItem` doesn't declare the\n// `render` prop its elements take, hence the cast where it is passed.\nconst renderRow = (props: React.JSX.IntrinsicElements['div']) => (\n  <div {...props} aria-labelledby={undefined} />\n)\n\n// Whether the item `key` is under the item `ancestorKey`.\nconst isUnder = (\n  collection: TreeItemContentRenderProps['state']['collection'],\n  key: Key,\n  ancestorKey: Key\n) => {\n  for (let node = collection.getItem(key); node?.parentKey != null;) {\n    if (node.parentKey === ancestorKey) return true\n    node = collection.getItem(node.parentKey)\n  }\n  return false\n}\n\nconst TreeItemBody = ({\n  hasChildItems,\n  icon,\n  id,\n  isDisabled,\n  isExpanded,\n  label,\n  selectionMode,\n  state\n}: Pick<\n  TreeItemContentRenderProps,\n  'hasChildItems' | 'id' | 'isDisabled' | 'isExpanded' | 'selectionMode' | 'state'\n> & {\n  icon?: ReactNode\n  label: ReactNode\n}) => {\n  const { checkboxes } = useContext(TreeConfigContext)\n\n  // A row collapsed by `expandedKeys` (a \"Collapse all\" button) hides the focused row under it,\n  // which react-aria-components keeps as the tree's focused key: no rendered row was then the\n  // tree's tab stop, and Tab could no longer enter it. The collapsed row takes the focused key,\n  // as it does when its own chevron collapses it, and the focus too when the hidden row had it.\n  // A leaf, never expanded, has nothing under it: it doesn't walk the tree at each move of the\n  // focus.\n  const { selectionManager } = state\n  const focusedKey = selectionManager.focusedKey\n  useEffect(() => {\n    if (!hasChildItems || isExpanded || focusedKey == null) return\n    if (!isUnder(state.collection, focusedKey, id)) return\n    selectionManager.setFocusedKey(id)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [hasChildItems, isExpanded, focusedKey])\n\n  return (\n    <>\n      {hasChildItems ? (\n        <TreeItemToggle disabled={isDisabled} />\n      ) : (\n        <span className=\"tree-item-spacer\" />\n      )}\n      {checkboxes && selectionMode !== 'none' && <TreeItemCheckbox />}\n      {icon != null && (\n        <span aria-hidden=\"true\" className=\"tree-item-icon\">\n          {icon}\n        </span>\n      )}\n      <span className=\"tree-item-label\">{label}</span>\n    </>\n  )\n}\n\nconst TreeItemInner = <T extends object>(\n  {\n    children,\n    className,\n    dependencies,\n    disabled,\n    icon,\n    id,\n    items,\n    label,\n    onAction,\n    style,\n    textValue\n  }: TreeItemProps<T>,\n  ref: Ref<HTMLDivElement>\n) => {\n  const text =\n    textValue ?? (typeof label === 'string' || typeof label === 'number' ? String(label) : '')\n\n  // The row is a `div` with `role=\"row\"`, holding one `gridcell` with the content; child items\n  // render as the rows after it, not inside it. `--cx-tree-level` carries the level to the\n  // stylesheet, which indents by it; written prefixed here because the build prefixes the\n  // stylesheet's custom properties, not this inline one.\n  return (\n    <AriaTreeItem\n      className={({ isDisabled, isExpanded, isSelected }) =>\n        classNames(\n          'tree-item',\n          { active: isSelected, disabled: isDisabled, expanded: isExpanded },\n          className\n        )\n      }\n      id={id}\n      isDisabled={disabled}\n      onAction={onAction}\n      ref={ref}\n      {...({ render: renderRow } as object)}\n      style={({ level }) => ({ ...style, '--cx-tree-level': level }) as CSSProperties}\n      textValue={text}\n    >\n      <TreeItemContent>\n        {({ hasChildItems, id: key, isDisabled, isExpanded, selectionMode, state }) => (\n          <TreeItemBody\n            hasChildItems={hasChildItems}\n            icon={icon}\n            id={key}\n            isDisabled={isDisabled}\n            isExpanded={isExpanded}\n            label={label}\n            selectionMode={selectionMode}\n            state={state}\n          />\n        )}\n      </TreeItemContent>\n      {items ? (\n        <Collection dependencies={dependencies} items={items}>\n          {children as (item: T) => ReactElement}\n        </Collection>\n      ) : typeof children === 'function' ? null : (\n        // A render function with no `items` has nothing to render: the leaf of a tree whose\n        // one function renders every level.\n        children\n      )}\n    </AriaTreeItem>\n  )\n}\n\n/**\n * An item of a `Tree`: a row with a label, an optional icon, and child items among its children.\n */\nexport const TreeItem = forwardRef(TreeItemInner) as <T extends object = object>(\n  props: TreeItemProps<T> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement\n\n;(TreeItem as { displayName?: string }).displayName = 'TreeItem'\n"],"mappings":"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"}

package/dist/chunks/useButtonSemantics-DN3OIXtG.js

@@ -0,0 +1,2 @@
+import{t as e}from"./useForkedRef-WoqMqsWE.js";import{useRef as t}from"react";import{useButton as n}from"react-aria";const r=e=>{let{role:t,tabIndex:n}=e;return{role:t,tabIndex:n}},i=(r,{disabled:i,onClick:a,role:o,tabIndex:s})=>{let c=t(null),l=e(r,c),{buttonProps:u}=n({elementType:`div`,isDisabled:i,onClick:a},c);return{buttonProps:{...u,...o!==void 0&&{role:o},...s!==void 0&&{tabIndex:i?-1:s}},forkedRef:l}};export{i as n,r as t};
+//# sourceMappingURL=useButtonSemantics-DN3OIXtG.js.map

package/dist/chunks/useButtonSemantics-DN3OIXtG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useButtonSemantics-DN3OIXtG.js","names":["useForkedRef","pickButtonSemantics","props","useButtonSemantics","buttonRef","useRef","forkedRef","ref","useButton","disabled","buttonProps","role","tabIndex"],"sources":["../../src/hooks/useButtonSemantics.ts"],"sourcesContent":["import { MouseEventHandler, Ref, RefObject, useRef } from 'react'\nimport { AriaButtonProps, useButton } from 'react-aria'\n\nimport { useForkedRef } from './useForkedRef'\n\ninterface UseButtonSemanticsOptions<T extends HTMLElement> {\n  disabled?: boolean\n  onClick?: MouseEventHandler<T>\n  // The caller's own, which win over the synthesized `role=\"button\"` and `tabIndex={0}`, as they\n  // do on a native `<button>`: a roving tabindex in a toolbar sets `-1`. A disabled one takes\n  // `-1` for any value given, as a `<button disabled>` stays out of the tab order: react-aria's\n  // `undefined` loses a `mergeProps` to the caller's own, which the component spreads too.\n  role?: string\n  tabIndex?: number\n}\n\n// The caller's `role` and `tabIndex`, taken from the props a component spreads on the element.\nexport const pickButtonSemantics = (props: object) => {\n  const { role, tabIndex } = props as Pick<\n    UseButtonSemanticsOptions<HTMLElement>,\n    'role' | 'tabIndex'\n  >\n  return { role, tabIndex }\n}\n\n// Synthesizes native button semantics (role, tabIndex, Enter/Space activation) for a\n// non-native `component` — a `<button>`/`<a>`/`<input>` gets all of this for free from the\n// browser, but an arbitrary `component` (e.g. `'div'`, `'span'`) doesn't. Shared by\n// `Link`/`Button`/`CloseButton`, which otherwise duplicated this ref/hook wiring near-verbatim.\n// `elementType: 'div'` and the `HTMLDivElement` cast below are fixed regardless of the actual\n// rendered tag — `useButton` only uses `elementType` to pick which ARIA attributes apply\n// (a `div`-shaped set is the right one for an arbitrary non-native element either way), not to\n// constrain the ref's real type.\nexport const useButtonSemantics = <T extends HTMLElement>(\n  ref: Ref<T>,\n  { disabled, onClick, role, tabIndex }: UseButtonSemanticsOptions<T>\n) => {\n  const buttonRef = useRef<T | null>(null)\n  const forkedRef = useForkedRef(ref, buttonRef)\n  const buttonAriaProps: AriaButtonProps<'div'> = {\n    elementType: 'div',\n    isDisabled: disabled,\n    onClick: onClick as unknown as AriaButtonProps<'div'>['onClick']\n  }\n  const { buttonProps } = useButton(buttonAriaProps, buttonRef as RefObject<HTMLDivElement | null>)\n\n  return {\n    buttonProps: {\n      ...buttonProps,\n      ...(role !== undefined && { role }),\n      ...(tabIndex !== undefined && { tabIndex: disabled ? -1 : tabIndex })\n    },\n    forkedRef\n  }\n}\n"],"mappings":"A,qHAiBA,MAAaC,EAAuB,GAAkB,CACpD,GAAM,CAAE,OAAM,YAAaC,EAI3B,MAAO,CAAE,OAAM,UAAS,CAC1B,EAUaC,GACX,EACA,CAAE,WAAU,UAAS,OAAM,cACxB,CACH,IAAMC,EAAYC,EAAiB,IAAI,EACjCC,EAAYN,EAAaO,EAAKH,CAAS,EAMvC,CAAE,eAAgBI,EAAU,CAJhC,YAAa,MACb,WAAYC,EACH,SAEqC,EAAGL,CAA6C,EAEhG,MAAO,CACL,YAAa,CACX,GAAGM,EACH,GAAIC,IAAS,IAAA,IAAa,CAAE,MAAK,EACjC,GAAIC,IAAa,IAAA,IAAa,CAAE,SAAUH,EAAW,GAAKG,CAAS,CACrE,EACA,WACF,CACF,E"}

package/dist/chunks/{useDialogElement-BfygWBPZ.js → useDialogElement-yEgUSejP.js}

@@ -1,2 +1,2 @@
-import{t as e}from"./useForkedRef-WoqMqsWE.js";import{t}from"./useControllableState-CPUJxfKW.js";import{t as n}from"./useIsomorphicLayoutEffect-BbqRwuqn.js";import{t as r}from"./dialogTransition-C8fYTsSa.js";import{n as i,t as a}from"./overlayStack-BXtTGCRm.js";import{useEffect as o,useRef as s,useState as c}from"react";import{usePreventScroll as l}from"react-aria";const u=/* @__PURE__ */ new WeakMap;function d(e){let t=/* @__PURE__ */ new Set,n=e,r=n?.closest(`dialog`)??null;for(;n&&r&&!r.open;){if(t.has(r))return null;t.add(r),n=u.get(r)??null,r=n?.closest(`dialog`)??null}return n}const f=({backdrop:f,defaultVisible:p,instant:m,isModal:h,keyboard:g=!0,lockScroll:_=h,onBeforeShow:v,onClick:y,onClose:b,onClosePrevented:x,onHidden:S,onKeyDown:C,onShow:w,onShown:T,onVisibleChange:E,open:D,ref:O,visible:k})=>{let A=s(null),j=e(O,A),[M,N]=t(k,p??D??!1,E),[P,F]=c(D?`open`:`closed`),I=s(P),L=e=>{I.current=e,F(e)},[R,z]=c(!1),[B,V]=c(!1),H=s(!1),U=s(!1),W=s(null);l({isDisabled:!B});let G=()=>{M&&(b?.(),N(!1))},K=()=>{x?.();let e=A.current;e&&(z(!0),r(e,()=>z(!1),!m))},q={onBeforeShow:v,onHidden:S,onShow:w,onShown:T},J=s(q);J.current=q;let Y=e=>{let t=document.activeElement,n=!t||t===document.body||e.contains(t);L(`closed`),e.open&&e.close(),U.current&&(U.current=!1,V(!1)),J.current.onHidden?.();let r=n?d(W.current):null;r&&document.contains(r)&&r.focus()};n(()=>{let e=A.current;if(!e)return;let t=I.current;if(M!==(t===`opening`||t===`open`)){if(M){if(J.current.onBeforeShow?.(e),!e.open){W.current=document.activeElement instanceof HTMLElement?document.activeElement:null,u.set(e,W.current),H.current=h,U.current=h&&_,h?e.showModal():e.show(),U.current&&V(!0);let t=[...e.querySelectorAll(`[autofocus], [data-autofocus]:not([data-autofocus="false"])`)].find(t=>t.closest(`dialog`)===e);t?t.focus():(e.setAttribute(`tabindex`,`-1`),e.focus())}J.current.onShow?.(),L(`opening`)}else e.open?L(`closing`):Y(e)}},[M]),o(()=>{let e=A.current;if(e){if(P===`opening`)return r(e,()=>{L(`open`),J.current.onShown?.()},!m);if(P===`closing`)return r(e,()=>Y(e),!m)}},[P]);let X=s(!1);n(()=>(X.current=!0,()=>{X.current=!1;let e=A.current,t=document.activeElement;if(!e||I.current===`closed`||!t||!e.contains(t))return;let n=W.current;queueMicrotask(()=>{if(X.current)return;let e=document.activeElement;if(e&&e!==document.body)return;let t=d(n);t&&document.contains(t)&&t.focus()})}),[]);let Z=P!==`closed`;return o(()=>{if(Z&&H.current)return i({nodes:()=>[A.current]})},[Z]),{close:G,dialogRef:A,forkedRef:j,handleBackdropClick:e=>{y?.(e),e.target===A.current&&H.current&&(f===`static`?K():G())},handleCancel:e=>{e.preventDefault(),g?G():K()},handleKeyDown:e=>{if(C?.(e),e.key!==`Escape`||e.defaultPrevented||H.current)return;let t=A.current;t&&a(t)||(e.preventDefault(),g?G():K())},handleNativeClose:()=>{let e=A.current;e&&I.current!==`closed`&&(G(),Y(e))},hiding:P===`closing`,staticBounce:R}};export{f as t};
-//# sourceMappingURL=useDialogElement-BfygWBPZ.js.map
+import{t as e}from"./useForkedRef-WoqMqsWE.js";import{t}from"./useControllableState-CPUJxfKW.js";import{t as n}from"./useIsomorphicLayoutEffect-BbqRwuqn.js";import{t as r}from"./dialogTransition-C8fYTsSa.js";import{n as i,t as a}from"./overlayStack-BXtTGCRm.js";import{useEffect as o,useRef as s,useState as c}from"react";import{usePreventScroll as l}from"react-aria";const u=/* @__PURE__ */ new WeakMap;function d(e){let t=/* @__PURE__ */ new Set,n=e,r=n?.closest(`dialog`)??null;for(;n&&r&&!r.open;){if(t.has(r))return null;t.add(r),n=u.get(r)??null,r=n?.closest(`dialog`)??null}return n}const f=({backdrop:f,defaultVisible:p,instant:m,isModal:h,keyboard:g=!0,lockScroll:_=h,onBeforeShow:v,onClick:y,onClose:b,onClosePrevented:x,onHidden:S,onKeyDown:C,onShow:w,onShown:T,onVisibleChange:E,open:D,ref:O,visible:k})=>{let A=s(null),j=e(O,A),[M,N]=t(k,p??D??!1,E),[P,F]=c(D?`open`:`closed`),I=s(P),L=e=>{I.current=e,F(e)},[R,z]=c(!1),[B,V]=c(!1),H=s(!1),U=s(!1),W=s(null);l({isDisabled:!B});let G=()=>{M&&(b?.(),N(!1))},K=()=>{x?.();let e=A.current;e&&(z(!0),r(e,()=>z(!1),!m))},q={onBeforeShow:v,onHidden:S,onShow:w,onShown:T},J=s(q);J.current=q;let Y=e=>{let t=document.activeElement,n=!t||t===document.body||e.contains(t);L(`closed`),e.open&&e.close(),U.current&&(U.current=!1,V(!1)),J.current.onHidden?.();let r=n?d(W.current):null;r&&document.contains(r)&&r.focus()};n(()=>{let e=A.current;if(!e)return;let t=I.current;if(M!==(t===`opening`||t===`open`)){if(M){if(J.current.onBeforeShow?.(e),!e.open){W.current=document.activeElement instanceof HTMLElement?document.activeElement:null,u.set(e,W.current),H.current=h,U.current=h&&_,h?e.showModal():e.show(),U.current&&V(!0);let t=[...e.querySelectorAll(`[autofocus], [data-autofocus]:not([data-autofocus="false"])`)].find(t=>t.closest(`dialog`)===e);t?t.focus():e.focus()}J.current.onShow?.(),L(`opening`)}else e.open?L(`closing`):Y(e)}},[M]),o(()=>{let e=A.current;if(e){if(P===`opening`)return r(e,()=>{L(`open`),J.current.onShown?.()},!m);if(P===`closing`)return r(e,()=>Y(e),!m)}},[P]);let X=s(!1);n(()=>(X.current=!0,()=>{X.current=!1;let e=A.current,t=document.activeElement;if(!e||I.current===`closed`||!t||!e.contains(t))return;let n=W.current;queueMicrotask(()=>{if(X.current)return;let e=document.activeElement;if(e&&e!==document.body)return;let t=d(n);t&&document.contains(t)&&t.focus()})}),[]);let Z=P!==`closed`;o(()=>{if(Z&&H.current)return i({nodes:()=>[A.current]})},[Z]);let Q=s(null);o(()=>{let e=Z?A.current:null;if(!e)return;let t=e=>{Q.current=e.target};return e.addEventListener(`pointerdown`,t,!0),e.addEventListener(`mousedown`,t,!0),()=>{Q.current=null,e.removeEventListener(`pointerdown`,t,!0),e.removeEventListener(`mousedown`,t,!0)}},[Z]);let ee=()=>{let e=A.current;e&&!e.open&&I.current!==`closed`&&(G(),Y(e))},$=s(()=>{});return $.current=()=>{let e=A.current;e&&I.current!==`closed`&&(G(),Y(e))},o(()=>{let e=Z?A.current?.parentElement?.closest(`dialog`):null;if(!e)return;let t=()=>{e.open||$.current()};return e.addEventListener(`close`,t),()=>e.removeEventListener(`close`,t)},[Z]),{close:G,dialogRef:A,forkedRef:j,handleBackdropClick:e=>{y?.(e);let t=Q.current;Q.current=null;let n=A.current;e.target===n&&H.current&&(t===null||t===n)&&(f===`static`?K():G())},handleCancel:e=>{e.preventDefault(),g?G():K()},handleKeyDown:e=>{if(C?.(e),e.key!==`Escape`||e.defaultPrevented||H.current&&g)return;let t=A.current;t&&a(t)||(e.preventDefault(),g?G():K())},handleNativeClose:ee,hiding:P===`closing`,staticBounce:R}};export{f as t};
+//# sourceMappingURL=useDialogElement-yEgUSejP.js.map

package/dist/chunks/useDialogElement-yEgUSejP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialogElement-yEgUSejP.js","names":["useForkedRef","useIsomorphicLayoutEffect","executeAfterTransition","pushOverlay","hasOverlayWithin","restoreTargets","resolveRestoreTarget","seen","target","trigger","owner","useDialogElement","isModal","dialogRef","useRef","forkedRef","ref","_visible","setVisible","useControllableState","visible","defaultVisible","open","onVisibleChange","phase","setPhaseState","useState","phaseRef","setPhase","next","staticBounce","setStaticBounce","scrollLocked","setScrollLocked","openedAsModalRef","lockedScrollRef","triggerRef","usePreventScroll","close","onClose","triggerStaticBounce","onClosePrevented","dialog","instant","callbacks","callbacksRef","finishHide","active","ownsFocus","current","lockScroll","autofocusEl","element","useEffect","mountedRef","isOpen","pressTargetRef","handlePress","event","handleNativeClose","closeWithAncestorRef","ancestor","handleAncestorClose","onClick","pressTarget","backdrop","keyboard","onKeyDown"],"sources":["../../src/hooks/useDialogElement.ts"],"sourcesContent":["import {\n  ForwardedRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  KeyboardEventHandler,\n  MouseEvent as ReactMouseEvent,\n  MouseEventHandler,\n  SyntheticEvent,\n  useEffect,\n  useRef,\n  useState\n} from 'react'\nimport { usePreventScroll } from 'react-aria'\n\nimport { useControllableState } from './useControllableState'\nimport { useForkedRef } from './useForkedRef'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport { executeAfterTransition } from '../utils/dialogTransition'\nimport { hasOverlayWithin, pushOverlay } from '../utils/overlayStack'\n\nexport interface UseDialogElementOptions {\n  /**\n   * Same-named prop from the caller (`Modal`/`Drawer`) — only ever consulted here to\n   * distinguish `'static'` from everything else for the backdrop-click/Escape bounce.\n   */\n  backdrop?: boolean | 'static'\n  /**\n   * Initial open state of an uncontrolled dialog.\n   */\n  defaultVisible?: boolean\n  /**\n   * Disables the open/close transition entirely.\n   */\n  instant?: boolean\n  /**\n   * Whether this open should use `showModal()` (top-layer, native backdrop, scroll-locked) or\n   * `show()` — `Modal` passes its own `modal` prop straight through; `Drawer` derives it from\n   * `backdrop`/`scroll` instead, since its vanilla chassis-css counterpart does the same.\n   */\n  isModal: boolean\n  /**\n   * Whether a modal open locks the page's scroll, for as long as the dialog is open. Defaults to\n   * `isModal`. `Drawer` passes `!scroll`: its `scroll` lets the page scroll behind a drawer that is\n   * still modal for its backdrop.\n   */\n  lockScroll?: boolean\n  /**\n   * Closes on the escape key / native `cancel` event.\n   */\n  keyboard?: boolean\n  /**\n   * Fires synchronously right before a closed dialog actually opens (after the \"already open\"\n   * bail-out, before capturing the pre-open trigger element) — `Drawer`'s only hook into the\n   * show effect, used to auto-close every other open drawer first.\n   */\n  onBeforeShow?: (dialog: HTMLDialogElement) => void\n  /**\n   * The caller's own `onClick`, chained ahead of the backdrop-click handling below rather than\n   * left in the props spread — a `<dialog>` needs `onClick` for its own backdrop detection, so\n   * spreading the caller's alongside it silently dropped one of the two. Fires for every click\n   * on the dialog, not just backdrop ones.\n   */\n  onClick?: MouseEventHandler<HTMLDialogElement>\n  onClose?: () => void\n  onClosePrevented?: () => void\n  onHidden?: () => void\n  /**\n   * The caller's own `onKeyDown`, chained ahead of the Escape handling of a non-modal dialog, for\n   * the reason `onClick` is.\n   */\n  onKeyDown?: KeyboardEventHandler<HTMLDialogElement>\n  onShow?: () => void\n  onShown?: () => void\n  /**\n   * Fired with `false` for each close request, beside `onClose`.\n   */\n  onVisibleChange?: (visible: boolean) => void\n  /**\n   * The native `open` attribute the caller renders. Without `visible` or `defaultVisible`, it is\n   * the initial state: the dialog is rendered open (non-modal) from the first paint, server HTML\n   * included, and stays open until a close request, instead of being closed on mount.\n   */\n  open?: boolean\n  ref: ForwardedRef<HTMLDialogElement>\n  /**\n   * Controlled open state; `undefined` means uncontrolled.\n   */\n  visible?: boolean\n}\n\n// Where a dialog is in its show/hide cycle. The native dialog is open in every phase but\n// `closed`: it stays in the top layer for as long as its exit lasts.\ntype DialogPhase = 'closed' | 'opening' | 'open' | 'closing'\n\n// The element each open dialog returns focus to when it closes.\nconst restoreTargets = new WeakMap<HTMLDialogElement, HTMLElement | null>()\n\n// The element a closing dialog returns focus to. A dialog opened from another dialog that has\n// closed since (the second alert of a chain) can't return focus to its trigger, which is hidden,\n// so it follows that dialog's own target, and so on. A loop (going back and forth between two\n// dialogs) gives up.\nfunction resolveRestoreTarget(trigger: HTMLElement | null): HTMLElement | null {\n  const seen = new Set<HTMLDialogElement>()\n  let target = trigger\n  let owner = target?.closest('dialog') ?? null\n  while (target && owner && !owner.open) {\n    if (seen.has(owner)) return null\n    seen.add(owner)\n    target = restoreTargets.get(owner) ?? null\n    owner = target?.closest('dialog') ?? null\n  }\n  return target\n}\n\n// Shared open/close machinery for a native `<dialog>`-based component — `Modal`, `Alert` and\n// `Drawer` otherwise duplicated this near-verbatim: forked ref, the show/begin-hide effect\n// (showModal() vs. show(), initial focus, scroll lock), the effect that waits out the enter and\n// exit transitions, the non-modal Escape-key handler (the native `cancel` event only fires for\n// dialogs opened with `showModal()`), the native `close` event, and the static-backdrop \"bounce\"\n// used by both the backdrop-click handler and the Escape/`cancel` handler. What's left in each\n// caller is only what's genuinely component-specific: `Modal`/`Drawer`'s own `_className`\n// building, and `Drawer`'s cross-instance \"auto-close every other open drawer\" registry (wired in\n// via `onBeforeShow`, since it needs to run at one precise point inside the show effect).\n//\n// A dialog has no trigger of its own, so the only change it asks for is a close: Escape, a\n// backdrop click, a close button. That request fires `onClose` and `onVisibleChange(false)`.\n// Controlled by `visible`, the dialog stays open until the caller sets it to `false`; with\n// `defaultVisible` it closes itself.\nexport const useDialogElement = ({\n  backdrop,\n  defaultVisible,\n  instant,\n  isModal,\n  keyboard = true,\n  lockScroll = isModal,\n  onBeforeShow,\n  onClick,\n  onClose,\n  onClosePrevented,\n  onHidden,\n  onKeyDown,\n  onShow,\n  onShown,\n  onVisibleChange,\n  open,\n  ref,\n  visible\n}: UseDialogElementOptions) => {\n  const dialogRef = useRef<HTMLDialogElement>(null)\n  const forkedRef = useForkedRef(ref, dialogRef)\n\n  const [_visible, setVisible] = useControllableState(\n    visible,\n    defaultVisible ?? open ?? false,\n    onVisibleChange\n  )\n  // A dialog rendered with the native `open` attribute is open before any effect has run.\n  const [phase, setPhaseState] = useState<DialogPhase>(open ? 'open' : 'closed')\n  // Mirrors `phase` at the moment it is set, not at the next render, as `useTransitionState`\n  // does: StrictMode runs the show effect twice on mount, and the second run has to see that the\n  // first has shown the dialog. It is also what tells a reopening during the exit from a first\n  // opening, and the browser's `close` event from the one that follows our own `close()` when\n  // nothing has reopened the dialog since (`handleNativeClose`).\n  const phaseRef = useRef(phase)\n  const setPhase = (next: DialogPhase) => {\n    phaseRef.current = next\n    setPhaseState(next)\n  }\n  const [staticBounce, setStaticBounce] = useState(false)\n  const [scrollLocked, setScrollLocked] = useState(false)\n  const openedAsModalRef = useRef(false)\n  const lockedScrollRef = useRef(false)\n  const triggerRef = useRef<HTMLElement | null>(null)\n\n  // Locked from showModal() until the exit transition finishes (see the show/hide effect\n  // below) — usePreventScroll releases it automatically on unmount too, even mid-transition.\n  usePreventScroll({ isDisabled: !scrollLocked })\n\n  // Several things can ask an open dialog to close while it is closing; only the first is a\n  // request, for `onClose` as for `onVisibleChange`.\n  const close = () => {\n    if (!_visible) return\n    onClose?.()\n    setVisible(false)\n  }\n\n  const triggerStaticBounce = () => {\n    onClosePrevented?.()\n    const dialog = dialogRef.current\n    if (!dialog) return\n    setStaticBounce(true)\n    executeAfterTransition(dialog, () => setStaticBounce(false), !instant)\n  }\n\n  // Read through a ref, kept current every render, so a transition that ends renders later\n  // calls the callbacks of that moment, and a caller can pass them inline.\n  const callbacks = { onBeforeShow, onHidden, onShow, onShown }\n  const callbacksRef = useRef(callbacks)\n  callbacksRef.current = callbacks\n\n  const finishHide = (dialog: HTMLDialogElement) => {\n    // Focus goes back only if this dialog still has it, or nothing does: another dialog\n    // opened from this one (the next alert of a chain) keeps its own. Mirrors `Popover`.\n    const active = document.activeElement\n    const ownsFocus = !active || active === document.body || dialog.contains(active)\n    // Settled before `close()`, so the native `close` event it fires isn't taken for the\n    // browser's (`handleNativeClose`).\n    setPhase('closed')\n    if (dialog.open) {\n      dialog.close()\n    }\n    if (lockedScrollRef.current) {\n      lockedScrollRef.current = false\n      setScrollLocked(false)\n    }\n    callbacksRef.current.onHidden?.()\n    const trigger = ownsFocus ? resolveRestoreTarget(triggerRef.current) : null\n    if (trigger && document.contains(trigger)) {\n      trigger.focus()\n    }\n  }\n\n  // Show / begin-hide\n  useIsomorphicLayoutEffect(() => {\n    const dialog = dialogRef.current\n    if (!dialog) return\n\n    const current = phaseRef.current\n    const isShown = current === 'opening' || current === 'open'\n    if (_visible === isShown) return\n\n    if (_visible) {\n      callbacksRef.current.onBeforeShow?.(dialog)\n\n      // Reopened while its exit runs, the dialog is still open: it stays as it is, with the\n      // trigger and the scroll lock of its first opening, and leaving the `closing` phase drops\n      // the wait that would have closed it.\n      if (!dialog.open) {\n        triggerRef.current =\n          document.activeElement instanceof HTMLElement ? document.activeElement : null\n\n        restoreTargets.set(dialog, triggerRef.current)\n\n        openedAsModalRef.current = isModal\n        lockedScrollRef.current = isModal && lockScroll\n        if (isModal) {\n          dialog.showModal()\n        } else {\n          dialog.show()\n        }\n        if (lockedScrollRef.current) setScrollLocked(true)\n\n        // `data-autofocus` too: React doesn't write the `autofocus` attribute in a client render\n        // (it calls `focus()` on mount, which a closed dialog ignores), so `autoFocus` alone only\n        // works in server-rendered HTML.\n        // Only this dialog's own: one inside a nested dialog (an `Alert` in a `Modal`) is hidden\n        // while that dialog is closed, and focusing it would fail silently.\n        const autofocusEl = [\n          ...dialog.querySelectorAll<HTMLElement>(\n            '[autofocus], [data-autofocus]:not([data-autofocus=\"false\"])'\n          )\n        ].find((element) => element.closest('dialog') === dialog)\n        if (autofocusEl) {\n          autofocusEl.focus()\n        } else {\n          // Focusable through the `tabIndex={-1}` each dialog renders.\n          dialog.focus()\n        }\n      }\n\n      callbacksRef.current.onShow?.()\n      setPhase('opening')\n      return\n    }\n\n    // Closed by the browser already, with its `close` event still to come.\n    if (!dialog.open) {\n      finishHide(dialog)\n      return\n    }\n    setPhase('closing')\n  }, [_visible])\n\n  // Finish the show or the hide once the transition (or lack thereof) completes. A phase that is\n  // left before that drops its wait: a dialog closed while it opens never reports `onShown`, and\n  // one reopened while it closes is never closed.\n  useEffect(() => {\n    const dialog = dialogRef.current\n    if (!dialog) return undefined\n\n    if (phase === 'opening') {\n      return executeAfterTransition(\n        dialog,\n        () => {\n          setPhase('open')\n          callbacksRef.current.onShown?.()\n        },\n        !instant\n      )\n    }\n    if (phase === 'closing') {\n      return executeAfterTransition(dialog, () => finishHide(dialog), !instant)\n    }\n    return undefined\n  }, [phase])\n\n  // Unmounted while open (`{open && <Modal visible>}`), the dialog never reaches `finishHide`, so\n  // focus it held fell to `<body>` with it. Focus goes back to the trigger here instead, under the\n  // same condition. Whether the dialog held focus is read in the layout cleanup, before React\n  // takes the element out; the focus waits for a microtask, by which time the dialog has left the\n  // top layer and the trigger is no longer inert. StrictMode's simulated unmount runs this cleanup\n  // too, and mounts again within the same task: `mountedRef` tells the two apart.\n  const mountedRef = useRef(false)\n  useIsomorphicLayoutEffect(() => {\n    mountedRef.current = true\n    return () => {\n      mountedRef.current = false\n      const dialog = dialogRef.current\n      const active = document.activeElement\n      if (!dialog || phaseRef.current === 'closed' || !active || !dialog.contains(active)) return\n      const trigger = triggerRef.current\n      queueMicrotask(() => {\n        if (mountedRef.current) return\n        const current = document.activeElement\n        if (current && current !== document.body) return\n        const target = resolveRestoreTarget(trigger)\n        if (target && document.contains(target)) target.focus()\n      })\n    }\n  }, [])\n\n  // A modal dialog holds a place among the open overlays for as long as it is open, so Escape\n  // doesn't reach a popover or a menu left open under it (`overlayStack`).\n  const isOpen = phase !== 'closed'\n  useEffect(() => {\n    if (!isOpen || !openedAsModalRef.current) return undefined\n    return pushOverlay({ nodes: () => [dialogRef.current] })\n  }, [isOpen])\n\n  // Where the last press on the open dialog started, for `handleBackdropClick`. A press that goes\n  // down on the content and comes up on the backdrop (a drag out of a text field, a crop handle\n  // pulled past the edge) gets its `click` on the nearest common ancestor of the two, the\n  // `<dialog>` itself, which is not a click on the backdrop. `pointerdown` as well as `mousedown`:\n  // a pointer press whose `pointerdown` is prevented sends no `mousedown`. Native and in the\n  // capture phase, so nothing inside the dialog can stop it, and no caller's handler of the same\n  // name is replaced.\n  const pressTargetRef = useRef<EventTarget | null>(null)\n  useEffect(() => {\n    const dialog = isOpen ? dialogRef.current : null\n    if (!dialog) return undefined\n    const handlePress = (event: Event) => {\n      pressTargetRef.current = event.target\n    }\n    dialog.addEventListener('pointerdown', handlePress, true)\n    dialog.addEventListener('mousedown', handlePress, true)\n    return () => {\n      pressTargetRef.current = null\n      dialog.removeEventListener('pointerdown', handlePress, true)\n      dialog.removeEventListener('mousedown', handlePress, true)\n    }\n  }, [isOpen])\n\n  // The native `close` event. After our own `close()` the phase is settled and there is nothing\n  // left to do. Otherwise the browser closed the dialog by itself: a `<form method=\"dialog\">`, a\n  // caller's own `close()`, or a close request it doesn't let a page cancel. The state follows: a\n  // close request, the scroll lock released, `onHidden`. A caller that holds `visible` through\n  // that request has a closed dialog until `visible` changes.\n  //\n  // A browser fires `close` from a task it queues, not inside `close()`. A dialog shown again\n  // before that task runs (the next step of a wizard opened from `onHidden`, `visible` set to\n  // `false` and back in one event) is open when the event arrives, and in a phase other than\n  // `closed`: the close it reports is one the reopening has undone, and it is left alone.\n  const handleNativeClose = () => {\n    const dialog = dialogRef.current\n    if (!dialog || dialog.open || phaseRef.current === 'closed') return\n    close()\n    finishHide(dialog)\n  }\n\n  // A dialog open inside another (an `Alert` in a `Modal`'s body, a `Modal` in a `Drawer`) closes\n  // with it, as a popover or a tooltip in it does (`useFloatingOverlay`). Left open, it stayed in\n  // the top layer under an ancestor no longer displayed: invisible, with the scroll lock it holds,\n  // and, opened with `showModal()`, the rest of the page inert. Its close is the browser closing\n  // it: a close request, then the hide at once, since the ancestor it shows in is gone. The\n  // ancestor's `close` event is ignored, as this dialog's own is, when the ancestor is open\n  // again by the time it arrives.\n  const closeWithAncestorRef = useRef(() => {})\n  closeWithAncestorRef.current = () => {\n    const dialog = dialogRef.current\n    if (!dialog || phaseRef.current === 'closed') return\n    close()\n    finishHide(dialog)\n  }\n  useEffect(() => {\n    const ancestor = isOpen ? dialogRef.current?.parentElement?.closest('dialog') : null\n    if (!ancestor) return undefined\n    const handleAncestorClose = () => {\n      if (!ancestor.open) closeWithAncestorRef.current()\n    }\n    ancestor.addEventListener('close', handleAncestorClose)\n    return () => ancestor.removeEventListener('close', handleAncestorClose)\n  }, [isOpen])\n\n  // Escape key for non-modal (show()) dialogs — the native `cancel` event below only fires for\n  // dialogs opened with showModal(). A React handler, so an Escape that something inside the\n  // dialog has handled and stopped never arrives, wherever that thing is portaled. One it has\n  // only prevented, or that an overlay open inside this dialog is about to take on `window`\n  // (`overlayStack`), is left alone too: Escape closes the innermost overlay only.\n  // A modal dialog that keeps Escape out (`keyboard={false}`) prevents the key too: Chromium\n  // honours `cancel`'s `preventDefault()` once per user activation, and a second Escape in a row\n  // closed the dialog anyway. A prevented keydown sends no `cancel` at all, so the bounce is\n  // started here.\n  const handleKeyDown = (event: ReactKeyboardEvent<HTMLDialogElement>) => {\n    onKeyDown?.(event)\n    if (event.key !== 'Escape' || event.defaultPrevented) return\n    if (openedAsModalRef.current && keyboard) return\n    const dialog = dialogRef.current\n    if (dialog && hasOverlayWithin(dialog)) return\n    event.preventDefault()\n    if (!keyboard) {\n      triggerStaticBounce()\n      return\n    }\n    close()\n  }\n\n  const handleCancel = (event: SyntheticEvent<HTMLDialogElement>) => {\n    event.preventDefault()\n    if (!keyboard) {\n      triggerStaticBounce()\n      return\n    }\n    close()\n  }\n\n  // A click on the `<dialog>` is one on the backdrop only when its press started there too. A\n  // click with no press before it (`element.click()`, an assistive technology) still counts.\n  const handleBackdropClick = (event: ReactMouseEvent<HTMLDialogElement>) => {\n    onClick?.(event)\n    const pressTarget = pressTargetRef.current\n    pressTargetRef.current = null\n    const dialog = dialogRef.current\n    if (event.target !== dialog || !openedAsModalRef.current) return\n    if (pressTarget !== null && pressTarget !== dialog) return\n    if (backdrop === 'static') {\n      triggerStaticBounce()\n      return\n    }\n    close()\n  }\n\n  return {\n    close,\n    dialogRef,\n    forkedRef,\n    handleBackdropClick,\n    handleCancel,\n    handleKeyDown,\n    handleNativeClose,\n    hiding: phase === 'closing',\n    staticBounce\n  }\n}\n"],"mappings":"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"}

package/dist/chunks/{useFormField-DH2tlc3e.js → useFormField-q21MOgh8.js}

@@ -1,2 +1,2 @@
-import{l as e}from"./slot-BQVx1Eew.js";import{t}from"./context-HDVxTNPi.js";import{useContext as n,useId as r}from"react";const i=({ariaDescribedBy:i,ariaLabelledBy:a,help:o,id:s,invalid:c,invalidFeedback:l,label:u,valid:d,validFeedback:f})=>{let p=n(t),m=r(),h=s??p?.inputId??m,g=`${m}-label`,_=`${m}-help`,v=`${m}-feedback`;return{describedBy:e(!!o&&_,!!(c&&l||d&&f)&&v,p?.describedBy,i),feedbackId:v,helpId:_,inputId:h,labelId:g,labelledBy:e(!!u&&g,p?.labelId,a)}};export{i as t};
-//# sourceMappingURL=useFormField-DH2tlc3e.js.map
+import{l as e}from"./slot-DagH0Gxq.js";import{t}from"./context-HDVxTNPi.js";import{useContext as n,useId as r}from"react";const i=({ariaDescribedBy:i,ariaLabelledBy:a,help:o,id:s,invalid:c,invalidFeedback:l,label:u,valid:d,validFeedback:f})=>{let p=n(t),m=r(),h=s??p?.inputId??m,g=`${m}-label`,_=`${m}-help`,v=`${m}-feedback`;return{describedBy:e(!!o&&_,!!(c&&l||d&&f)&&v,p?.describedBy,i),feedbackId:v,helpId:_,inputId:h,labelId:g,labelledBy:e(!!u&&g,p?.labelId,a)}};export{i as t};
+//# sourceMappingURL=useFormField-q21MOgh8.js.map

package/dist/chunks/{useFormField-DH2tlc3e.js.map → useFormField-q21MOgh8.js.map}

@@ -1 +1 @@
-{"version":3,"file":"useFormField-DH2tlc3e.js","names":["joinUniqueIds","useFormField","field","useContext","FormFieldContext","generatedId","useId","inputId","id","labelId","helpId","feedbackId","help","invalid","invalidFeedback","valid","validFeedback","ariaDescribedBy","label","ariaLabelledBy"],"sources":["../../src/hooks/useFormField.ts"],"sourcesContent":["import { ReactNode, useContext, useId } from 'react'\n\nimport { FormFieldContext } from '../components/form-field/context'\nimport { joinUniqueIds } from '../utils/idRefs'\n\nexport interface UseFormFieldOptions {\n  /**\n   * A caller-supplied `aria-describedby` to merge in alongside the generated help/feedback ids\n   * (e.g. `rest['aria-describedby']`).\n   */\n  ariaDescribedBy?: string\n  /**\n   * A caller-supplied `aria-labelledby` to merge in alongside `labelId` (e.g.\n   * `rest['aria-labelledby']`). Relevant for the `role=\"group\"` shape and for any single-input\n   * component backed by a react-aria hook — see `labelledBy`.\n   */\n  ariaLabelledBy?: string\n  help?: ReactNode\n  id?: string\n  invalid?: boolean\n  invalidFeedback?: ReactNode\n  label?: ReactNode\n  valid?: boolean\n  validFeedback?: ReactNode\n}\n\nexport interface UseFormFieldResult {\n  /**\n   * Merged `aria-describedby` value (help id + feedback id, if shown + the ids a wrapping\n   * `FloatingInput` renders + `ariaDescribedBy`), or `undefined` when none apply. Safe to spread\n   * straight onto the real control: `aria-describedby={describedBy}`.\n   */\n  describedBy?: string\n  feedbackId: string\n  helpId: string\n  /**\n   * Id for the one real focusable control — pair with `<FormLabel htmlFor={inputId}>` (via\n   * `ids.input`). The caller's `id`, else the id a wrapping `FloatingInput` points its label at,\n   * else a generated one. Ignore this and use `labelId`/`labelledBy` instead for a `role=\"group\"` wrapper\n   * with no single input to target — see FORMS.md's \"`htmlFor` vs `aria-labelledby`\" section.\n   */\n  inputId: string\n  /**\n   * This field's own label id, for a control to reference via its own `aria-labelledby` (via\n   * `ids.label`) instead of `htmlFor`.\n   */\n  labelId: string\n  /**\n   * Merged `aria-labelledby` value (`labelId`, only when `label` is set + the label of a wrapping\n   * `FloatingInput` + `ariaLabelledBy`), or `undefined` when none applies. Feed this into the underlying react-aria hook's own\n   * `aria-labelledby` (in addition to any `htmlFor`-based association) so its own dev-mode\n   * \"no accessible label\" warning knows about a visible `label` it can't otherwise see.\n   */\n  labelledBy?: string\n}\n\n// Shared id-generation and aria-describedby/aria-labelledby merge logic behind every\n// renderFormField-based component (see FORMS.md's \"The two engines\" section). Every id is\n// generated with React's own useId(), not react-aria's — see FORMS.md for why that's deliberate.\n//\n// If you spread the result of a react-aria hook via mergeProps(hookProps, rest) instead of\n// directly onto the control, re-apply `describedBy`/`labelledBy` as explicit props *after* that\n// spread — mergeProps lets the later argument win, so rest's raw (un-merged) aria-describedby/\n// aria-labelledby can silently overwrite these otherwise. See FORMS.md gotcha #4.\n//\n// Inside a `FloatingInput` the field also takes what `FormFieldContext` hands down: the id the\n// floating label points at, that label as a name and the wrapper's help and feedback as a\n// description. An id the consumer repeats by hand is written once.\nexport const useFormField = ({\n  ariaDescribedBy,\n  ariaLabelledBy,\n  help,\n  id,\n  invalid,\n  invalidFeedback,\n  label,\n  valid,\n  validFeedback\n}: UseFormFieldOptions): UseFormFieldResult => {\n  const field = useContext(FormFieldContext)\n  const generatedId = useId()\n  const inputId = id ?? field?.inputId ?? generatedId\n  const labelId = `${generatedId}-label`\n  const helpId = `${generatedId}-help`\n  const feedbackId = `${generatedId}-feedback`\n\n  const showInvalidFeedback = invalid && invalidFeedback\n  const showValidFeedback = valid && validFeedback\n\n  const describedBy = joinUniqueIds(\n    Boolean(help) && helpId,\n    Boolean(showInvalidFeedback || showValidFeedback) && feedbackId,\n    field?.describedBy,\n    ariaDescribedBy\n  )\n\n  const labelledBy = joinUniqueIds(Boolean(label) && labelId, field?.labelId, ariaLabelledBy)\n\n  return { describedBy, feedbackId, helpId, inputId, labelId, labelledBy }\n}\n"],"mappings":"A,0HAoEA,MAAaC,GAAgB,CAC3B,kBACA,iBACA,OACA,KACA,UACA,kBACA,QACA,QACA,mBAC6C,CAC7C,IAAMC,EAAQC,EAAWC,CAAgB,EACnCC,EAAcC,EAAM,EACpBC,EAAUC,GAAMN,GAAO,SAAWG,EAClCI,EAAU,GAAGJ,EAAY,QACzBK,EAAS,GAAGL,EAAY,OACxBM,EAAa,GAAGN,EAAY,WAclC,MAAO,CAAE,YATWL,EAClB,EAAQY,GAASF,EACjB,GAL0BG,GAAWC,GACbC,GAASC,IAIoBL,EACrDT,GAAO,YACPe,CAKiB,EAAG,aAAY,SAAQ,UAAS,UAAS,WAFzCjB,EAAc,EAAQkB,GAAUT,EAASP,GAAO,QAASiB,CAEP,CAAE,CACzE,E"}
+{"version":3,"file":"useFormField-q21MOgh8.js","names":["joinUniqueIds","useFormField","field","useContext","FormFieldContext","generatedId","useId","inputId","id","labelId","helpId","feedbackId","help","invalid","invalidFeedback","valid","validFeedback","ariaDescribedBy","label","ariaLabelledBy"],"sources":["../../src/hooks/useFormField.ts"],"sourcesContent":["import { ReactNode, useContext, useId } from 'react'\n\nimport { FormFieldContext } from '../components/form-field/context'\nimport { joinUniqueIds } from '../utils/idRefs'\n\nexport interface UseFormFieldOptions {\n  /**\n   * A caller-supplied `aria-describedby` to merge in alongside the generated help/feedback ids\n   * (e.g. `rest['aria-describedby']`).\n   */\n  ariaDescribedBy?: string\n  /**\n   * A caller-supplied `aria-labelledby` to merge in alongside `labelId` (e.g.\n   * `rest['aria-labelledby']`). Relevant for the `role=\"group\"` shape and for any single-input\n   * component backed by a react-aria hook — see `labelledBy`.\n   */\n  ariaLabelledBy?: string\n  help?: ReactNode\n  id?: string\n  invalid?: boolean\n  invalidFeedback?: ReactNode\n  label?: ReactNode\n  valid?: boolean\n  validFeedback?: ReactNode\n}\n\nexport interface UseFormFieldResult {\n  /**\n   * Merged `aria-describedby` value (help id + feedback id, if shown + the ids a wrapping\n   * `FloatingInput` renders + `ariaDescribedBy`), or `undefined` when none apply. Safe to spread\n   * straight onto the real control: `aria-describedby={describedBy}`.\n   */\n  describedBy?: string\n  feedbackId: string\n  helpId: string\n  /**\n   * Id for the one real focusable control — pair with `<FormLabel htmlFor={inputId}>` (via\n   * `ids.input`). The caller's `id`, else the id a wrapping `FloatingInput` points its label at,\n   * else a generated one. Ignore this and use `labelId`/`labelledBy` instead for a `role=\"group\"` wrapper\n   * with no single input to target — see FORMS.md's \"`htmlFor` vs `aria-labelledby`\" section.\n   */\n  inputId: string\n  /**\n   * This field's own label id, for a control to reference via its own `aria-labelledby` (via\n   * `ids.label`) instead of `htmlFor`.\n   */\n  labelId: string\n  /**\n   * Merged `aria-labelledby` value (`labelId`, only when `label` is set + the label of a wrapping\n   * `FloatingInput` + `ariaLabelledBy`), or `undefined` when none applies. Feed this into the underlying react-aria hook's own\n   * `aria-labelledby` (in addition to any `htmlFor`-based association) so its own dev-mode\n   * \"no accessible label\" warning knows about a visible `label` it can't otherwise see.\n   */\n  labelledBy?: string\n}\n\n// Shared id-generation and aria-describedby/aria-labelledby merge logic behind every\n// renderFormField-based component (see FORMS.md's \"The two engines\" section). Every id is\n// generated with React's own useId(), not react-aria's — see FORMS.md for why that's deliberate.\n//\n// If you spread the result of a react-aria hook via mergeProps(hookProps, rest) instead of\n// directly onto the control, re-apply `describedBy`/`labelledBy` as explicit props *after* that\n// spread — mergeProps lets the later argument win, so rest's raw (un-merged) aria-describedby/\n// aria-labelledby can silently overwrite these otherwise. See FORMS.md gotcha #4.\n//\n// Inside a `FloatingInput` the field also takes what `FormFieldContext` hands down: the id the\n// floating label points at, that label as a name and the wrapper's help and feedback as a\n// description. An id the consumer repeats by hand is written once.\nexport const useFormField = ({\n  ariaDescribedBy,\n  ariaLabelledBy,\n  help,\n  id,\n  invalid,\n  invalidFeedback,\n  label,\n  valid,\n  validFeedback\n}: UseFormFieldOptions): UseFormFieldResult => {\n  const field = useContext(FormFieldContext)\n  const generatedId = useId()\n  const inputId = id ?? field?.inputId ?? generatedId\n  const labelId = `${generatedId}-label`\n  const helpId = `${generatedId}-help`\n  const feedbackId = `${generatedId}-feedback`\n\n  const showInvalidFeedback = invalid && invalidFeedback\n  const showValidFeedback = valid && validFeedback\n\n  const describedBy = joinUniqueIds(\n    Boolean(help) && helpId,\n    Boolean(showInvalidFeedback || showValidFeedback) && feedbackId,\n    field?.describedBy,\n    ariaDescribedBy\n  )\n\n  const labelledBy = joinUniqueIds(Boolean(label) && labelId, field?.labelId, ariaLabelledBy)\n\n  return { describedBy, feedbackId, helpId, inputId, labelId, labelledBy }\n}\n"],"mappings":"A,0HAoEA,MAAaC,GAAgB,CAC3B,kBACA,iBACA,OACA,KACA,UACA,kBACA,QACA,QACA,mBAC6C,CAC7C,IAAMC,EAAQC,EAAWC,CAAgB,EACnCC,EAAcC,EAAM,EACpBC,EAAUC,GAAMN,GAAO,SAAWG,EAClCI,EAAU,GAAGJ,EAAY,QACzBK,EAAS,GAAGL,EAAY,OACxBM,EAAa,GAAGN,EAAY,WAclC,MAAO,CAAE,YATWL,EAClB,EAAQY,GAASF,EACjB,GAL0BG,GAAWC,GACbC,GAASC,IAIoBL,EACrDT,GAAO,YACPe,CAKiB,EAAG,aAAY,SAAQ,UAAS,UAAS,WAFzCjB,EAAc,EAAQkB,GAAUT,EAASP,GAAO,QAASiB,CAEP,CAAE,CACzE,E"}

package/dist/chunks/useFormReset-BK5Yb24_.js

@@ -0,0 +1,2 @@
+import{useEffect as e,useRef as t}from"react";function n(n,r,i,a){let o=t(r),s=t(i);s.current=i,e(()=>{let e=n.current;if(!e)return;let t=e.form??e.closest(`form`);if(!t)return;let r=()=>s.current(o.current);return t.addEventListener(`reset`,r),()=>t.removeEventListener(`reset`,r)},[n,a])}export{n as t};
+//# sourceMappingURL=useFormReset-BK5Yb24_.js.map

package/dist/chunks/useFormReset-BK5Yb24_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormReset-BK5Yb24_.js","names":["useFormReset","initial","useRef","initialValue","onResetRef","onReset","useEffect","node","ref","owner","listener","form"],"sources":["../../src/hooks/useFormReset.ts"],"sourcesContent":["import { RefObject, useEffect, useRef } from 'react'\n\n/**\n * Puts a field back to its first value on a reset of its form, controlled or not, as react-aria's\n * text fields do (its own `useFormReset`, which `react-aria` doesn't export): `onReset` is called\n * with the value of the first render in the form's `reset` event, and the field reports it\n * through its own change path. The form is the one around the element given, or the one its\n * `form` attribute names when it is a form control; pass the attribute as `form`, so a change of\n * it listens to the new form.\n */\nexport function useFormReset<T>(\n  ref: RefObject<Element | null>,\n  initialValue: T,\n  onReset: (initialValue: T) => void,\n  form?: string\n): void {\n  const initial = useRef(initialValue)\n  const onResetRef = useRef(onReset)\n  onResetRef.current = onReset\n\n  useEffect(() => {\n    const node = ref.current\n    if (!node) return undefined\n    const owner = (node as HTMLInputElement).form ?? node.closest('form')\n    if (!owner) return undefined\n    const listener = () => onResetRef.current(initial.current)\n    owner.addEventListener('reset', listener)\n    return () => owner.removeEventListener('reset', listener)\n  }, [ref, form])\n}\n"],"mappings":"A,8CAUA,SAAgBA,EACd,EACA,EACA,EACA,EACM,CACN,IAAMC,EAAUC,EAAOC,CAAY,EAC7BC,EAAaF,EAAOG,CAAO,EACjC,EAAW,QAAUA,EAErBC,MAAgB,CACd,IAAMC,EAAOC,EAAI,QACjB,GAAI,CAACD,EAAM,OACX,IAAME,EAASF,EAA0B,MAAQA,EAAK,QAAQ,MAAM,EACpE,GAAI,CAACE,EAAO,OACZ,IAAMC,MAAiBN,EAAW,QAAQH,EAAQ,OAAO,EAEzD,OADAQ,EAAM,iBAAiB,QAASC,CAAQ,MAC3BD,EAAM,oBAAoB,QAASC,CAAQ,CAC1D,EAAG,CAACF,EAAKG,CAAI,CAAC,CAChB,C"}

package/dist/chunks/useHeldBack-o-CsPcSe.js

@@ -0,0 +1,2 @@
+import{t as e}from"./useIsomorphicLayoutEffect-BbqRwuqn.js";import{t}from"./context-HDVxTNPi.js";import{t as n}from"./context-DCg95BgR.js";import{useContext as r,useEffect as i,useRef as a,useState as o}from"react";const s=`input, select, textarea`,c=e=>e.matches(s),l=e=>c(e)?[e]:Array.from(e.querySelectorAll(s)),u=e=>e.willValidate&&!e.validity.valid,d=e=>{let t=e?l(e).filter(e=>e.willValidate):[];return t.length===0?`none`:t.some(u)?`invalid`:`valid`},f=e=>Array.from(e.elements).find(e=>e.validity?.valid===!1),p=(s,{enabled:u=!0,focus:p,invalid:m,valid:h})=>{let g=r(n),_=a(g);_.current=g;let[v,y]=o(!1),[b,x]=o(`none`),S=a(p);S.current=p;let C=a(null);i(()=>{let e=u?s.current:null,t=e?(c(e)?e:l(e)[0])?.form??e.closest(`form`):null,n=C.current;if(n?.target===e&&n?.form===t||(n?.stop(),C.current=null,!e))return;let r=e=>{y(!0),S.current&&(!e.defaultPrevented&&t&&f(t)===e.target&&S.current(),e.preventDefault())},i=()=>y(!1),a=e.ownerDocument.defaultView,o=t=>{if(!(t.target instanceof Node)||!e.contains(t.target))return;let n=d(e);n!==`invalid`&&y(!1),_.current&&x(n)},p=!c(e);e.addEventListener(`invalid`,r,p),a?.addEventListener(`input`,o),a?.addEventListener(`change`,o),t?.addEventListener(`reset`,i),C.current={form:t,stop:()=>{e.removeEventListener(`invalid`,r,p),a?.removeEventListener(`input`,o),a?.removeEventListener(`change`,o),t?.removeEventListener(`reset`,i)},target:e}}),i(()=>()=>{C.current?.stop(),C.current=null},[]),e(()=>{if(!v&&!g)return;let e=d(u?s.current:null);e!==`invalid`&&y(!1),g&&x(e)});let w=m!==void 0||!!h,T=v&&!w,E=g&&!w?b:`none`,D={heldBack:T,invalid:m??(T||E===`invalid`||void 0),valid:h||E===`valid`||void 0},O=r(t)?.reportValidation,k=w?void 0:D.invalid,A=w?void 0:D.valid;return e(()=>{O?.(k,A)},[O,k,A]),e(()=>()=>O?.(void 0,void 0),[O]),D};export{p as t};
+//# sourceMappingURL=useHeldBack-o-CsPcSe.js.map

package/dist/chunks/useHeldBack-o-CsPcSe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHeldBack-o-CsPcSe.js","names":["useIsomorphicLayoutEffect","FormValidatedContext","CONTROLS","isControl","element","controlsOf","target","holdsBack","control","validityOf","controls","firstInvalidControl","form","useHeldBack","validated","useContext","validatedRef","useRef","blocked","setBlocked","useState","validity","setValidity","focusRef","focus","listening","useEffect","enabled","ref","current","onInvalid","event","onReset","view","onEdit","next","capture","decided","invalid","valid","heldBack","shown","result","report","FormFieldContext","reportedInvalid","reportedValid"],"sources":["../../src/hooks/useHeldBack.ts"],"sourcesContent":["import { RefObject, useContext, useEffect, useRef, useState } from 'react'\n\nimport { FormValidatedContext } from '../components/form/context'\nimport { FormFieldContext } from '../components/form-field/context'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\n\ntype Control = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n\nexport interface UseHeldBackOptions {\n  /**\n   * Whether to listen at all. `false` for a field with nothing a form would validate: a value\n   * input that is `type=\"hidden\"` until the field is required.\n   */\n  enabled?: boolean\n  /**\n   * Moves focus into the field once a form is held back and this control is its first invalid\n   * one, and cancels the event: for a control that isn't displayed, which a browser can neither\n   * focus nor show a message on. Omit it where react-aria's own listener does both already,\n   * which is every control one of its hooks was given.\n   */\n  focus?: () => void\n  /**\n   * The caller's `invalid`. Once it is set, to `false` too, the caller decides how the field\n   * looks: it is never shown as held back, nor by its form's `validated`.\n   */\n  invalid?: boolean\n  /**\n   * The caller's `valid`. While it is `true`, the caller decides how the field looks, as it does\n   * once `invalid` is set.\n   */\n  valid?: boolean\n}\n\nexport interface UseHeldBackResult {\n  /**\n   * `true` from a submit the field held back until it would no longer hold one back, or its form\n   * is reset.\n   */\n  heldBack: boolean\n  /**\n   * What the field shows as invalid: the caller's `invalid` where it is set, `true` while\n   * `heldBack` or while its form is `validated` and it would hold the form back.\n   */\n  invalid: boolean | undefined\n  /**\n   * What the field shows as valid: the caller's `valid`, or `true` while its form is `validated`\n   * and it would let the form submit. Unless the caller decides how the field looks.\n   */\n  valid: boolean | undefined\n}\n\ninterface Listening {\n  form: HTMLFormElement | null\n  stop: () => void\n  target: HTMLElement\n}\n\n// By its tag and not by a `validity` property: a `<fieldset>` has one too, and validates nothing.\nconst CONTROLS = 'input, select, textarea'\nconst isControl = (element: HTMLElement): element is Control => element.matches(CONTROLS)\n\n// The controls a form validates under `target`: itself, or the inputs inside a group.\nconst controlsOf = (target: HTMLElement): Control[] =>\n  isControl(target) ? [target] : Array.from(target.querySelectorAll<Control>(CONTROLS))\n\nconst holdsBack = (control: Control) => control.willValidate && !control.validity.valid\n\ntype Validity = 'invalid' | 'none' | 'valid'\n\n// What a form would make of the controls under `target`. `none` when it validates none of them:\n// a disabled control, a `type=\"hidden\"` one, or a group with no control.\nconst validityOf = (target: HTMLElement | null): Validity => {\n  const controls = target ? controlsOf(target).filter((control) => control.willValidate) : []\n  if (controls.length === 0) return 'none'\n  return controls.some(holdsBack) ? 'invalid' : 'valid'\n}\n\nconst firstInvalidControl = (form: HTMLFormElement) =>\n  Array.from(form.elements).find(\n    (control) => (control as HTMLInputElement).validity?.valid === false\n  )\n\n// A field that held its form back from submitting shows as invalid until it no longer would.\n//\n// A form with an invalid control isn't submitted, and the browser says why in a message beside\n// the first such control. react-aria cancels that message for every control its hooks are given\n// (`useFormValidation` calls `preventDefault()` on the `invalid` event, whatever\n// `validationBehavior` is) and focuses the control instead, and a control that isn't displayed\n// has no message to begin with. Either way the form stayed and nothing said why. A native control\n// no hook is given keeps the browser's message, on the first invalid one alone: the others, and\n// it once the message has gone, looked as they did before the submit. So the field\n// reads the `invalid` event itself and shows it as it shows the `invalid` prop: the class, the\n// ARIA state and the caller's `invalidFeedback`. react-stately's `displayValidation` doesn't\n// have it: it stays empty unless the whole field is under `validationBehavior: 'native'`, which\n// also moves every other validation to blur.\n//\n// A `Form` with `validated` shows each of its fields by the same test from then on, with no\n// submit, and as valid once it would let the form submit (FORMS.md, gotcha 10).\n// chassis-css's own gate, `[data-cx-validate]` with `:user-valid`/`:user-invalid`, styles the\n// control alone, never the feedback the field renders, and wins over the class the caller's\n// `invalid` or `valid` sets.\n//\n// `ref` is the control, or the element around several: the fieldset of a group, the boxes of a\n// code. The event doesn't bubble, so a group hears its controls in the capture phase.\nexport const useHeldBack = (\n  ref: RefObject<HTMLElement | null>,\n  { enabled = true, focus, invalid, valid }: UseHeldBackOptions\n): UseHeldBackResult => {\n  const validated = useContext(FormValidatedContext)\n  const validatedRef = useRef(validated)\n  validatedRef.current = validated\n  const [blocked, setBlocked] = useState(false)\n  // Read only while the form is `validated`.\n  const [validity, setValidity] = useState<Validity>('none')\n  const focusRef = useRef(focus)\n  focusRef.current = focus\n  const listening = useRef<Listening | null>(null)\n\n  // Runs after every render and listens again only when the target is another element (an\n  // `Autocomplete` that turns `multiple`) or belongs to another form (`form`). The listeners\n  // stay the same ones otherwise: a browser runs the render a listener asked for before it calls\n  // the next listener of the same event, and one removed and added again by that render is not\n  // called at all. A `reset` after react-aria's own listener, or after the other input's of a\n  // `DateRangePicker`, was lost that way.\n  useEffect(() => {\n    const target = enabled ? ref.current : null\n    const form = target\n      ? ((isControl(target) ? target : controlsOf(target)[0])?.form ?? target.closest('form'))\n      : null\n    const current = listening.current\n    if (current?.target === target && current?.form === form) return\n    current?.stop()\n    listening.current = null\n    if (!target) return\n\n    // `checkValidity()` and `reportValidity()` fire it too, as a submit does.\n    const onInvalid = (event: Event) => {\n      setBlocked(true)\n      if (!focusRef.current) return\n      if (!event.defaultPrevented && form && firstInvalidControl(form) === event.target) {\n        focusRef.current()\n      }\n      // Cancelled, as react-aria cancels it: the browser has nothing to show for a control that\n      // isn't displayed, and Chromium logs an error for an invalid control it can't focus.\n      event.preventDefault()\n    }\n    const onReset = () => setBlocked(false)\n    // A native control that keeps its own value (a `Select` with no `value`, a `FileInput`)\n    // changes with no render to follow, and the effect below would never look again.\n    //\n    // Heard on the window, after React's own listener on its root. For a real keystroke the\n    // browser runs the render a listener asks for before the next listener: a render asked for\n    // on the control itself ran before React had read the edit, wrote the old value back, and an\n    // empty field lost the first character typed into it.\n    const view = target.ownerDocument.defaultView\n    const onEdit = (event: Event) => {\n      if (!(event.target instanceof Node) || !target.contains(event.target)) return\n      const next = validityOf(target)\n      if (next !== 'invalid') setBlocked(false)\n      if (validatedRef.current) setValidity(next)\n    }\n    const capture = !isControl(target)\n\n    target.addEventListener('invalid', onInvalid, capture)\n    view?.addEventListener('input', onEdit)\n    view?.addEventListener('change', onEdit)\n    form?.addEventListener('reset', onReset)\n    listening.current = {\n      form,\n      stop: () => {\n        target.removeEventListener('invalid', onInvalid, capture)\n        view?.removeEventListener('input', onEdit)\n        view?.removeEventListener('change', onEdit)\n        form?.removeEventListener('reset', onReset)\n      },\n      target\n    }\n  })\n  useEffect(\n    () => () => {\n      listening.current?.stop()\n      listening.current = null\n    },\n    []\n  )\n\n  // The mark lasts while the field would still hold the form back. Read after each render, where\n  // its controls have the values just rendered, and before the paint: the field never shows a\n  // value and the mark together. A control that has gone, is disabled or is no longer invalid\n  // doesn't hold anything back either.\n  // A `validated` form's field is read at the same point, for the same reason.\n  useIsomorphicLayoutEffect(() => {\n    if (!blocked && !validated) return\n    const next = validityOf(enabled ? ref.current : null)\n    if (next !== 'invalid') setBlocked(false)\n    if (validated) setValidity(next)\n  })\n\n  const decided = invalid !== undefined || Boolean(valid)\n  const heldBack = blocked && !decided\n  const shown = validated && !decided ? validity : 'none'\n  const result = {\n    heldBack,\n    invalid: invalid ?? (heldBack || shown === 'invalid' || undefined),\n    valid: valid || shown === 'valid' || undefined\n  }\n\n  // A wrapper that renders the field's feedback (`FloatingInput`) shows it with the mark. Only\n  // what the field decided itself: the caller's `invalid` and `valid` on the field are theirs\n  // to repeat on the wrapper, as FORMS.md says.\n  const report = useContext(FormFieldContext)?.reportValidation\n  const reportedInvalid = decided ? undefined : result.invalid\n  const reportedValid = decided ? undefined : result.valid\n  useIsomorphicLayoutEffect(() => {\n    report?.(reportedInvalid, reportedValid)\n  }, [report, reportedInvalid, reportedValid])\n  useIsomorphicLayoutEffect(() => () => report?.(undefined, undefined), [report])\n\n  return result\n}\n"],"mappings":"A,uNA0DA,MAAME,EAAW,0BACXC,EAAa,GAA6CC,EAAQ,QAAQF,CAAQ,EAGlFG,EAAc,GAClBF,EAAUG,CAAM,EAAI,CAACA,CAAM,EAAI,MAAM,KAAKA,EAAO,iBAA0BJ,CAAQ,CAAC,EAEhFK,EAAa,GAAqBC,EAAQ,cAAgB,CAACA,EAAQ,SAAS,MAM5EC,EAAc,GAAyC,CAC3D,IAAMC,EAAWJ,EAASD,EAAWC,CAAM,CAAC,CAAC,OAAQ,GAAYE,EAAQ,YAAY,EAAI,CAAC,EAE1F,OADIE,EAAS,SAAW,EAAU,OAC3BA,EAAS,KAAKH,CAAS,EAAI,UAAY,OAChD,EAEMI,EAAuB,GAC3B,MAAM,KAAKC,EAAK,QAAQ,CAAC,CAAC,KACvB,GAAaJ,EAA6B,UAAU,QAAU,EACjE,EAwBWK,GACX,EACA,CAAE,UAAU,GAAM,QAAO,UAAS,WACZ,CACtB,IAAMC,EAAYC,EAAWd,CAAoB,EAC3Ce,EAAeC,EAAOH,CAAS,EACrC,EAAa,QAAUA,EACvB,GAAM,CAACI,EAASC,GAAcC,EAAS,EAAK,EAEtC,CAACC,EAAUC,GAAeF,EAAmB,MAAM,EACnDG,EAAWN,EAAOO,CAAK,EAC7B,EAAS,QAAUA,EACnB,IAAMC,EAAYR,EAAyB,IAAI,EAQ/CS,MAAgB,CACd,IAAMpB,EAASqB,EAAUC,EAAI,QAAU,KACjChB,EAAON,GACPH,EAAUG,CAAM,EAAIA,EAASD,EAAWC,CAAM,CAAC,CAAC,GAAA,EAAK,MAAQA,EAAO,QAAQ,MAAM,EACpF,KACEuB,EAAUJ,EAAU,QAI1B,GAHII,GAAS,SAAWvB,GAAUuB,GAAS,OAASjB,IACpDiB,GAAS,KAAK,EACd,EAAU,QAAU,KAChB,CAACvB,GAAQ,OAGb,IAAMwB,EAAa,GAAiB,CAClCX,EAAW,EAAI,EACVI,EAAS,UACV,CAACQ,EAAM,kBAAoBnB,GAAQD,EAAoBC,CAAI,IAAMmB,EAAM,QACzER,EAAS,QAAQ,EAInBQ,EAAM,eAAe,EACvB,EACMC,MAAgBb,EAAW,EAAK,EAQhCc,EAAO3B,EAAO,cAAc,YAC5B4B,EAAU,GAAiB,CAC/B,GAAI,EAAEH,EAAM,kBAAkB,OAAS,CAACzB,EAAO,SAASyB,EAAM,MAAM,EAAG,OACvE,IAAMI,EAAO1B,EAAWH,CAAM,EAC1B6B,IAAS,WAAWhB,EAAW,EAAK,EACpCH,EAAa,SAASM,EAAYa,CAAI,CAC5C,EACMC,EAAU,CAACjC,EAAUG,CAAM,EAEjCA,EAAO,iBAAiB,UAAWwB,EAAWM,CAAO,EACrDH,GAAM,iBAAiB,QAASC,CAAM,EACtCD,GAAM,iBAAiB,SAAUC,CAAM,EACvCtB,GAAM,iBAAiB,QAASoB,CAAO,EACvC,EAAU,QAAU,CAClB,OACA,SAAY,CACV1B,EAAO,oBAAoB,UAAWwB,EAAWM,CAAO,EACxDH,GAAM,oBAAoB,QAASC,CAAM,EACzCD,GAAM,oBAAoB,SAAUC,CAAM,EAC1CtB,GAAM,oBAAoB,QAASoB,CAAO,CAC5C,EACA,QACF,CACF,CAAC,EACDN,UACc,CACVD,EAAU,SAAS,KAAK,EACxB,EAAU,QAAU,IACtB,EACA,CAAC,CACH,EAOAzB,MAAgC,CAC9B,GAAI,CAACkB,GAAW,CAACJ,EAAW,OAC5B,IAAMqB,EAAO1B,EAAWkB,EAAUC,EAAI,QAAU,IAAI,EAChDO,IAAS,WAAWhB,EAAW,EAAK,EACpCL,GAAWQ,EAAYa,CAAI,CACjC,CAAC,EAED,IAAME,EAAUC,IAAY,IAAA,IAAa,EAAQC,EAC3CC,EAAWtB,GAAW,CAACmB,EACvBI,EAAQ3B,GAAa,CAACuB,EAAUhB,EAAW,OAC3CqB,EAAS,CACb,WACA,QAASJ,IAAYE,GAAYC,IAAU,WAAa,IAAA,IACxD,MAAOF,GAASE,IAAU,SAAW,IAAA,EACvC,EAKME,EAAS5B,EAAW6B,CAAgB,CAAC,EAAE,iBACvCC,EAAkBR,EAAU,IAAA,GAAYK,EAAO,QAC/CI,EAAgBT,EAAU,IAAA,GAAYK,EAAO,MAMnD,OALA1C,MAAgC,CAC9B2C,IAASE,EAAiBC,CAAa,CACzC,EAAG,CAACH,EAAQE,EAAiBC,CAAa,CAAC,EAC3C9C,UAAsC2C,IAAS,IAAA,GAAW,IAAA,EAAS,EAAG,CAACA,CAAM,CAAC,EAEvED,CACT,E"}