@primer/react-brand 0.74.0 → 0.75.0-rc.89e3cadf

package/esm/forms/Select/Select.module.js

@@ -1,5 +1,6 @@
-import './Select.module-CRuV5AGO.css';var e = {
-	Select: "Primer_Brand__Select-module__Select___EmI6J",
+import './Select.module-CRuV5AGO.css';//#region src/forms/Select/Select.module.css
+var e = "Primer_Brand__Select-module__Select___EmI6J", t = {
+	Select: e,
 	"Select-wrapper--disabled": "Primer_Brand__Select-module__Select-wrapper--disabled___YhyYg",
 	"Select-wrapper": "Primer_Brand__Select-module__Select-wrapper___sX7AR",
 	"Select-wrapper--medium": "Primer_Brand__Select-module__Select-wrapper--medium___0yHXL",
@@ -11,6 +12,6 @@ import './Select.module-CRuV5AGO.css';var e = {
 	"Select--error": "Primer_Brand__Select-module__Select--error___FxIYn"
 };
 //#endregion
-export { e as default };
+export { e as Select, t as default };
 
 //# sourceMappingURL=Select.module.js.map

package/esm/forms/TextInput/TextInput.js

@@ -1,4 +1,4 @@
-import e from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../../hooks/useId.js";
 import { Text as n } from "../../Text/Text.js";
 import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */

package/esm/forms/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","names":[],"sources":["../../../src/forms/TextInput/TextInput.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\nimport {Text} from '../../Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './TextInput.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\ntype VisualType = React.ReactElement | React.ReactNode | Icon\n\nexport type TextInputProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Removes border\n   */\n  invisible?: boolean\n  /**\n   * Applies non-interactive text to start of input.\n   */\n  leadingText?: string\n  /**\n   * Applies non-interactive iconography to start of input.\n   */\n  leadingVisual?: VisualType\n  /**\n   * Applies monospace styling.\n   */\n  monospace?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Applies non-interactive text to end of input.\n   */\n  trailingText?: string\n  /**\n   * Applies non-interactive iconography to end of input.\n   */\n  trailingVisual?: VisualType\n  /**\n   * Constrains the input type to single line inputs.\n   */\n  type?: 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local'\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> &\n  BaseProps<HTMLInputElement>\n\nconst TextInputInternal = (\n  {\n    className,\n    disabled,\n    fullWidth = false,\n    invisible = false,\n    leadingText,\n    leadingVisual: LeadingVisual,\n    monospace,\n    placeholder,\n    size = 'medium',\n    trailingText,\n    trailingVisual: TrailingVisual,\n    validationStatus,\n    ...rest\n  }: TextInputProps,\n  ref,\n) => {\n  const uniqueId = useId()\n\n  const showLeadingText = leadingText && !LeadingVisual\n  const showLeadingVisual = LeadingVisual && !leadingText\n  const showTrailingText = trailingText && !TrailingVisual\n  const showTrailingVisual = TrailingVisual && !trailingText\n\n  const leadingTextId = `${uniqueId}-leading-text`\n  const leadingVisualId = `${uniqueId}-leading-visual`\n  const trailingVisualId = `${uniqueId}-trailing-visual`\n  const trailingTextId = `${uniqueId}-trailing-text`\n\n  const describedBy = useMemo(() => {\n    const elements = [\n      {condition: showLeadingText, id: leadingTextId},\n      {condition: showLeadingVisual, id: leadingVisualId},\n      {condition: showTrailingVisual, id: trailingVisualId},\n      {condition: showTrailingText, id: trailingTextId},\n    ]\n\n    return elements\n      .filter(({condition}) => condition)\n      .map(({id}) => id)\n      .join(' ')\n  }, [\n    showLeadingText,\n    showLeadingVisual,\n    showTrailingVisual,\n    showTrailingText,\n    leadingTextId,\n    leadingVisualId,\n    trailingVisualId,\n    trailingTextId,\n  ])\n\n  return (\n    <span\n      className={clsx(\n        styles['TextInput-wrapper'],\n        styles[`TextInput-wrapper--${size}`],\n        fullWidth && styles['TextInput-wrapper--fullWidth'],\n        invisible && styles['TextInput-wrapper--invisible'],\n        disabled && styles['TextInput-wrapper--disabled'],\n        monospace && styles['TextInput-wrapper--monospace'],\n        validationStatus && styles[`TextInput-wrapper--${validationStatus}`],\n      )}\n    >\n      {showLeadingText && (\n        <span\n          className={clsx(\n            styles['TextInput-leading-text'],\n            styles[`TextInput-leading-text--${size}`],\n            disabled && styles['TextInput-leading-text--disabled'],\n            validationStatus && styles[`TextInput-leading-text--${validationStatus}`],\n          )}\n        >\n          <Text\n            size={size === 'large' ? '200' : '100'}\n            as=\"span\"\n            className={clsx(styles['TextInput-leading-text-inner'], styles[`TextInput-leading-text-inner--${size}`])}\n            id={leadingTextId}\n          >\n            {leadingText}\n          </Text>\n        </span>\n      )}\n      {showLeadingVisual && (\n        <span className={clsx(styles['TextInput-leading-visual'], styles[`TextInput-leading-visual--${size}`])}>\n          {LeadingVisual &&\n          React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(LeadingVisual)\n            ? React.cloneElement(LeadingVisual, {\n                className: clsx(\n                  styles['TextInput-leading-visual-icon'],\n                  styles[`TextInput-leading-visual-icon--${size}`],\n                ),\n                width: size === 'large' ? 20 : 16,\n                height: size === 'large' ? 20 : 16,\n                id: leadingVisualId,\n              })\n            : null}\n        </span>\n      )}\n      <input\n        type=\"text\"\n        ref={ref}\n        className={clsx(\n          styles.TextInput,\n          'TextInput',\n          styles[`TextInput--${size}`],\n          fullWidth && styles['TextInput--fullWidth'],\n          LeadingVisual && styles[`TextInput--has-leading-visual--${size}`],\n          TrailingVisual && styles[`TextInput--has-trailing-visual--${size}`],\n          validationStatus && styles[`TextInput--${validationStatus}`],\n          leadingText && !LeadingVisual && styles['TextInput--has-leading-text'],\n          trailingText && !TrailingVisual && styles['TextInput--has-trailing-text'],\n          className,\n        )}\n        placeholder={placeholder}\n        disabled={disabled}\n        aria-invalid={validationStatus === 'error'}\n        aria-describedby={describedBy || undefined}\n        {...rest}\n      />\n      {showTrailingVisual && (\n        <span className={clsx(styles['TextInput-trailing-visual'], styles[`TextInput-trailing-visual--${size}`])}>\n          {TrailingVisual &&\n          React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(TrailingVisual)\n            ? React.cloneElement(TrailingVisual, {\n                className: clsx(\n                  styles['TextInput-trailing-visual-icon'],\n                  styles[`TextInput-trailing-visual-icon--${size}`],\n                ),\n                width: size === 'large' ? 20 : 16,\n                height: size === 'large' ? 20 : 16,\n                id: trailingVisualId,\n              })\n            : null}\n        </span>\n      )}\n      {showTrailingText && (\n        <span\n          className={clsx(\n            styles['TextInput-trailing-text'],\n            styles[`TextInput-trailing-text--${size}`],\n            disabled && styles['TextInput-trailing-text--disabled'],\n            validationStatus && styles[`TextInput-trailing-text--${validationStatus}`],\n          )}\n        >\n          <Text\n            size={size === 'large' ? '200' : '100'}\n            as=\"span\"\n            className={clsx(styles['TextInput-trailing-text-inner'], styles[`TextInput-trailing-text-inner--${size}`])}\n            id={trailingTextId}\n          >\n            {trailingText}\n          </Text>\n        </span>\n      )}\n    </span>\n  )\n}\n\nexport const TextInput = forwardRef(TextInputInternal)\n\nTextInput.displayName = 'TextInput'\n"],"mappings":"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"}
+{"version":3,"file":"TextInput.js","names":[],"sources":["../../../src/forms/TextInput/TextInput.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\nimport {Text} from '../../Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './TextInput.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\ntype VisualType = React.ReactElement | React.ReactNode | Icon\n\nexport type TextInputProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Removes border\n   */\n  invisible?: boolean\n  /**\n   * Applies non-interactive text to start of input.\n   */\n  leadingText?: string\n  /**\n   * Applies non-interactive iconography to start of input.\n   */\n  leadingVisual?: VisualType\n  /**\n   * Applies monospace styling.\n   */\n  monospace?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Applies non-interactive text to end of input.\n   */\n  trailingText?: string\n  /**\n   * Applies non-interactive iconography to end of input.\n   */\n  trailingVisual?: VisualType\n  /**\n   * Constrains the input type to single line inputs.\n   */\n  type?: 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local'\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> &\n  BaseProps<HTMLInputElement>\n\nconst TextInputInternal = (\n  {\n    className,\n    disabled,\n    fullWidth = false,\n    invisible = false,\n    leadingText,\n    leadingVisual: LeadingVisual,\n    monospace,\n    placeholder,\n    size = 'medium',\n    trailingText,\n    trailingVisual: TrailingVisual,\n    validationStatus,\n    ...rest\n  }: TextInputProps,\n  ref,\n) => {\n  const uniqueId = useId()\n\n  const showLeadingText = leadingText && !LeadingVisual\n  const showLeadingVisual = LeadingVisual && !leadingText\n  const showTrailingText = trailingText && !TrailingVisual\n  const showTrailingVisual = TrailingVisual && !trailingText\n\n  const leadingTextId = `${uniqueId}-leading-text`\n  const leadingVisualId = `${uniqueId}-leading-visual`\n  const trailingVisualId = `${uniqueId}-trailing-visual`\n  const trailingTextId = `${uniqueId}-trailing-text`\n\n  const describedBy = useMemo(() => {\n    const elements = [\n      {condition: showLeadingText, id: leadingTextId},\n      {condition: showLeadingVisual, id: leadingVisualId},\n      {condition: showTrailingVisual, id: trailingVisualId},\n      {condition: showTrailingText, id: trailingTextId},\n    ]\n\n    return elements\n      .filter(({condition}) => condition)\n      .map(({id}) => id)\n      .join(' ')\n  }, [\n    showLeadingText,\n    showLeadingVisual,\n    showTrailingVisual,\n    showTrailingText,\n    leadingTextId,\n    leadingVisualId,\n    trailingVisualId,\n    trailingTextId,\n  ])\n\n  return (\n    <span\n      className={clsx(\n        styles['TextInput-wrapper'],\n        styles[`TextInput-wrapper--${size}`],\n        fullWidth && styles['TextInput-wrapper--fullWidth'],\n        invisible && styles['TextInput-wrapper--invisible'],\n        disabled && styles['TextInput-wrapper--disabled'],\n        monospace && styles['TextInput-wrapper--monospace'],\n        validationStatus && styles[`TextInput-wrapper--${validationStatus}`],\n      )}\n    >\n      {showLeadingText && (\n        <span\n          className={clsx(\n            styles['TextInput-leading-text'],\n            styles[`TextInput-leading-text--${size}`],\n            disabled && styles['TextInput-leading-text--disabled'],\n            validationStatus && styles[`TextInput-leading-text--${validationStatus}`],\n          )}\n        >\n          <Text\n            size={size === 'large' ? '200' : '100'}\n            as=\"span\"\n            className={clsx(styles['TextInput-leading-text-inner'], styles[`TextInput-leading-text-inner--${size}`])}\n            id={leadingTextId}\n          >\n            {leadingText}\n          </Text>\n        </span>\n      )}\n      {showLeadingVisual && (\n        <span className={clsx(styles['TextInput-leading-visual'], styles[`TextInput-leading-visual--${size}`])}>\n          {LeadingVisual &&\n          React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(LeadingVisual)\n            ? React.cloneElement(LeadingVisual, {\n                className: clsx(\n                  styles['TextInput-leading-visual-icon'],\n                  styles[`TextInput-leading-visual-icon--${size}`],\n                ),\n                width: size === 'large' ? 20 : 16,\n                height: size === 'large' ? 20 : 16,\n                id: leadingVisualId,\n              })\n            : null}\n        </span>\n      )}\n      <input\n        type=\"text\"\n        ref={ref}\n        className={clsx(\n          styles.TextInput,\n          'TextInput',\n          styles[`TextInput--${size}`],\n          fullWidth && styles['TextInput--fullWidth'],\n          LeadingVisual && styles[`TextInput--has-leading-visual--${size}`],\n          TrailingVisual && styles[`TextInput--has-trailing-visual--${size}`],\n          validationStatus && styles[`TextInput--${validationStatus}`],\n          leadingText && !LeadingVisual && styles['TextInput--has-leading-text'],\n          trailingText && !TrailingVisual && styles['TextInput--has-trailing-text'],\n          className,\n        )}\n        placeholder={placeholder}\n        disabled={disabled}\n        aria-invalid={validationStatus === 'error'}\n        aria-describedby={describedBy || undefined}\n        {...rest}\n      />\n      {showTrailingVisual && (\n        <span className={clsx(styles['TextInput-trailing-visual'], styles[`TextInput-trailing-visual--${size}`])}>\n          {TrailingVisual &&\n          React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(TrailingVisual)\n            ? React.cloneElement(TrailingVisual, {\n                className: clsx(\n                  styles['TextInput-trailing-visual-icon'],\n                  styles[`TextInput-trailing-visual-icon--${size}`],\n                ),\n                width: size === 'large' ? 20 : 16,\n                height: size === 'large' ? 20 : 16,\n                id: trailingVisualId,\n              })\n            : null}\n        </span>\n      )}\n      {showTrailingText && (\n        <span\n          className={clsx(\n            styles['TextInput-trailing-text'],\n            styles[`TextInput-trailing-text--${size}`],\n            disabled && styles['TextInput-trailing-text--disabled'],\n            validationStatus && styles[`TextInput-trailing-text--${validationStatus}`],\n          )}\n        >\n          <Text\n            size={size === 'large' ? '200' : '100'}\n            as=\"span\"\n            className={clsx(styles['TextInput-trailing-text-inner'], styles[`TextInput-trailing-text-inner--${size}`])}\n            id={trailingTextId}\n          >\n            {trailingText}\n          </Text>\n        </span>\n      )}\n    </span>\n  )\n}\n\nexport const TextInput = forwardRef(TextInputInternal)\n\nTextInput.displayName = 'TextInput'\n"],"mappings":"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"}

package/esm/forms/TextInput/TextInput.module.js

@@ -1,5 +1,6 @@
-import './TextInput.module-CrmcmO_m.css';var e = {
-	TextInput: "Primer_Brand__TextInput-module__TextInput___d6r3B",
+import './TextInput.module-CrmcmO_m.css';//#region src/forms/TextInput/TextInput.module.css
+var e = "Primer_Brand__TextInput-module__TextInput___d6r3B", t = "Primer_Brand__TextInput-module__Checkbox___NeBpg", n = {
+	TextInput: e,
 	"TextInput-wrapper--medium": "Primer_Brand__TextInput-module__TextInput-wrapper--medium___MBN0V",
 	"TextInput--medium": "Primer_Brand__TextInput-module__TextInput--medium___fpyd0",
 	"TextInput--large": "Primer_Brand__TextInput-module__TextInput--large___S8mM0",
@@ -40,9 +41,9 @@ import './TextInput.module-CrmcmO_m.css';var e = {
 	"TextInput-trailing-text--success": "Primer_Brand__TextInput-module__TextInput-trailing-text--success___WCi_J",
 	"TextInput-leading-text--error": "Primer_Brand__TextInput-module__TextInput-leading-text--error___WAcZB",
 	"TextInput-trailing-text--error": "Primer_Brand__TextInput-module__TextInput-trailing-text--error____yUSw",
-	Checkbox: "Primer_Brand__TextInput-module__Checkbox___NeBpg"
+	Checkbox: t
 };
 //#endregion
-export { e as default };
+export { t as Checkbox, e as TextInput, n as default };
 
 //# sourceMappingURL=TextInput.module.js.map

package/esm/forms/Textarea/Textarea.js

@@ -1,4 +1,4 @@
-import e from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../../node_modules/clsx/dist/clsx.js";
 import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
 import t from "./Textarea.module.js";
 import { forwardRef as n } from "react";

package/esm/forms/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/forms/Textarea/Textarea.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './Textarea.module.css'\n\nexport const DEFAULT_TEXTAREA_ROWS = 7\nexport const DEFAULT_TEXTAREA_COLS = 30\nexport const DEFAULT_TEXTAREA_RESIZE = 'both'\n\nexport type TextareaProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Removes border\n   */\n  invisible?: boolean\n  /**\n   * Applies monospace styling.\n   */\n  monospace?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n  /**\n   * Allows resizing of the textarea\n   */\n  resize?: 'none' | 'both' | 'horizontal' | 'vertical'\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> &\n  BaseProps<HTMLTextAreaElement>\n\nconst testIds = {\n  root: 'Textarea',\n  get outerContainer() {\n    return `${this.root}-outer-container`\n  },\n}\n\nconst _Textarea = (\n  {\n    children,\n    className,\n    cols = DEFAULT_TEXTAREA_COLS,\n    disabled,\n    fullWidth = false,\n    invisible = false,\n    monospace,\n    placeholder,\n    size = 'medium',\n    validationStatus,\n    required,\n    resize = DEFAULT_TEXTAREA_RESIZE,\n    rows = DEFAULT_TEXTAREA_ROWS,\n    ...rest\n  }: TextareaProps,\n  ref,\n) => {\n  return (\n    <span\n      className={clsx(\n        styles['Textarea-wrapper'],\n        fullWidth && styles['Textarea-wrapper--fullWidth'],\n        invisible && styles['Textarea-wrapper--invisible'],\n        disabled && styles['Textarea-wrapper--disabled'],\n        monospace && styles['Textarea-wrapper--monospace'],\n        validationStatus && styles[`Textarea-wrapper--${validationStatus}`],\n      )}\n      data-testid={testIds.outerContainer}\n    >\n      <textarea\n        ref={ref}\n        className={clsx(\n          styles.Textarea,\n          'Textarea',\n          styles[`Textarea--${size}`],\n          styles[`Textarea-resize--${resize}`],\n          fullWidth && styles['Textarea--fullWidth'],\n          validationStatus && styles[`Textarea--${validationStatus}`],\n          className,\n        )}\n        placeholder={placeholder}\n        disabled={disabled}\n        aria-invalid={validationStatus === 'error'}\n        required={required}\n        rows={rows}\n        cols={cols}\n        {...rest}\n      >\n        {children}\n      </textarea>\n    </span>\n  )\n}\n\nexport const Textarea = forwardRef(_Textarea)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;;;;AASA,IAAa,IAAwB,GACxB,IAAwB,IACxB,IAA0B,QAkCjC,IAAU;CACd,MAAM;CACN,IAAI,iBAAiB;AACnB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EA0DY,IAAW,GAvDtB,EACE,aACA,cACA,UAAA,IACA,aACA,eAAY,IACZ,eAAY,IACZ,cACA,gBACA,UAAO,UACP,qBACA,aACA,YAAS,GACT,UAAA,GACA,GAAG,KAEL,MAGE,kBAAC,QAAD;CACE,WAAW,EACT,EAAO,qBACP,KAAa,EAAO,gCACpB,KAAa,EAAO,gCACpB,KAAY,EAAO,+BACnB,KAAa,EAAO,gCACpB,KAAoB,EAAO,qBAAqB,KACjD;CACD,eAAa,EAAQ;WAErB,kBAAC,YAAD;EACO;EACL,WAAW,EACT,EAAO,UACP,YACA,EAAO,aAAa,MACpB,EAAO,oBAAoB,MAC3B,KAAa,EAAO,wBACpB,KAAoB,EAAO,aAAa,MACxC,EACD;EACY;EACH;EACV,gBAAc,MAAqB;EACzB;EACJ;EACA;EACN,GAAI;EAEH;EACQ,CAAA;CACN,CAAA,CAIkC;AAE7C,EAAS,cAAc"}
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/forms/Textarea/Textarea.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './Textarea.module.css'\n\nexport const DEFAULT_TEXTAREA_ROWS = 7\nexport const DEFAULT_TEXTAREA_COLS = 30\nexport const DEFAULT_TEXTAREA_RESIZE = 'both'\n\nexport type TextareaProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Removes border\n   */\n  invisible?: boolean\n  /**\n   * Applies monospace styling.\n   */\n  monospace?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n  /**\n   * Allows resizing of the textarea\n   */\n  resize?: 'none' | 'both' | 'horizontal' | 'vertical'\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> &\n  BaseProps<HTMLTextAreaElement>\n\nconst testIds = {\n  root: 'Textarea',\n  get outerContainer() {\n    return `${this.root}-outer-container`\n  },\n}\n\nconst _Textarea = (\n  {\n    children,\n    className,\n    cols = DEFAULT_TEXTAREA_COLS,\n    disabled,\n    fullWidth = false,\n    invisible = false,\n    monospace,\n    placeholder,\n    size = 'medium',\n    validationStatus,\n    required,\n    resize = DEFAULT_TEXTAREA_RESIZE,\n    rows = DEFAULT_TEXTAREA_ROWS,\n    ...rest\n  }: TextareaProps,\n  ref,\n) => {\n  return (\n    <span\n      className={clsx(\n        styles['Textarea-wrapper'],\n        fullWidth && styles['Textarea-wrapper--fullWidth'],\n        invisible && styles['Textarea-wrapper--invisible'],\n        disabled && styles['Textarea-wrapper--disabled'],\n        monospace && styles['Textarea-wrapper--monospace'],\n        validationStatus && styles[`Textarea-wrapper--${validationStatus}`],\n      )}\n      data-testid={testIds.outerContainer}\n    >\n      <textarea\n        ref={ref}\n        className={clsx(\n          styles.Textarea,\n          'Textarea',\n          styles[`Textarea--${size}`],\n          styles[`Textarea-resize--${resize}`],\n          fullWidth && styles['Textarea--fullWidth'],\n          validationStatus && styles[`Textarea--${validationStatus}`],\n          className,\n        )}\n        placeholder={placeholder}\n        disabled={disabled}\n        aria-invalid={validationStatus === 'error'}\n        required={required}\n        rows={rows}\n        cols={cols}\n        {...rest}\n      >\n        {children}\n      </textarea>\n    </span>\n  )\n}\n\nexport const Textarea = forwardRef(_Textarea)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;;;;AASA,IAAa,IAAwB,GACxB,IAAwB,IACxB,IAA0B,QAkCjC,IAAU;CACd,MAAM;CACN,IAAI,iBAAiB;EACnB,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GA0Da,IAAW,GAvDtB,EACE,aACA,cACA,UAAA,IACA,aACA,eAAY,IACZ,eAAY,IACZ,cACA,gBACA,UAAO,UACP,qBACA,aACA,YAAS,GACT,UAAA,GACA,GAAG,KAEL,MAGE,kBAAC,QAAD;CACE,WAAW,EACT,EAAO,qBACP,KAAa,EAAO,gCACpB,KAAa,EAAO,gCACpB,KAAY,EAAO,+BACnB,KAAa,EAAO,gCACpB,KAAoB,EAAO,qBAAqB,IAClD;CACA,eAAa,EAAQ;WAErB,kBAAC,YAAD;EACO;EACL,WAAW,EACT,EAAO,UACP,YACA,EAAO,aAAa,MACpB,EAAO,oBAAoB,MAC3B,KAAa,EAAO,wBACpB,KAAoB,EAAO,aAAa,MACxC,CACF;EACa;EACH;EACV,gBAAc,MAAqB;EACzB;EACJ;EACA;EACN,GAAI;EAEH;CACO,CAAA;AACN,CAAA,CAIkC;AAE5C,EAAS,cAAc"}

package/esm/forms/Textarea/Textarea.module.js

@@ -1,5 +1,6 @@
-import './Textarea.module-C4pwTMjB.css';var e = {
-	Textarea: "Primer_Brand__Textarea-module__Textarea___mcWf5",
+import './Textarea.module-C4pwTMjB.css';//#region src/forms/Textarea/Textarea.module.css
+var e = "Primer_Brand__Textarea-module__Textarea___mcWf5", t = {
+	Textarea: e,
 	"Textarea-resize--vertical": "Primer_Brand__Textarea-module__Textarea-resize--vertical___Vby4g",
 	"Textarea-resize--horizontal": "Primer_Brand__Textarea-module__Textarea-resize--horizontal___s4S8w",
 	"Textarea-resize--none": "Primer_Brand__Textarea-module__Textarea-resize--none___vLfq1",
@@ -16,6 +17,6 @@ import './Textarea.module-C4pwTMjB.css';var e = {
 	"Textarea-wrapper--error": "Primer_Brand__Textarea-module__Textarea-wrapper--error___7G92h"
 };
 //#endregion
-export { e as default };
+export { e as Textarea, t as default };
 
 //# sourceMappingURL=Textarea.module.js.map

package/esm/hooks/useAnchoredPosition.js

@@ -4,10 +4,13 @@ import { getAnchoredPosition as i } from "@primer/behaviors";
 //#region src/hooks/useAnchoredPosition.ts
 function a(a, o = []) {
 	let s = a?.floatingElementRef, c = a?.anchorElementRef, [l, u] = r(void 0), d = t(() => {
-		s.current instanceof Element && c.current instanceof Element ? u(i(s.current, c.current, {
-			side: a?.side,
-			align: a?.align
-		})) : u(void 0);
+		if (s.current instanceof Element && c.current instanceof Element) {
+			let e = i(s.current, c.current, {
+				side: a?.side,
+				align: a?.align
+			});
+			u(e);
+		} else u(void 0);
 	}, [
 		s,
 		c,

package/esm/hooks/useAnchoredPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAnchoredPosition.js","names":[],"sources":["../../src/hooks/useAnchoredPosition.ts"],"sourcesContent":["import React, {RefObject, useCallback, useEffect, useState} from 'react'\nimport {getAnchoredPosition} from '@primer/behaviors'\nimport type {AnchorPosition, PositionSettings} from '@primer/behaviors'\nimport {useResizeObserver} from './useResizeObserver'\n\nexport type AnchoredPositionHookSettings = Partial<PositionSettings> & {\n  floatingElementRef?: React.RefObject<Element | null>\n  anchorElementRef?: React.RefObject<Element | null>\n}\n\n/**\n * Calculates the top and left values for an absolutely-positioned floating element\n * to be anchored to some anchor element. Returns refs for the floating element\n * and the anchor element, along with the position.\n * @param settings Settings for calculating the anchored position.\n * @param dependencies Dependencies to determine when to re-calculate the position.\n * @returns An object of {top: number, left: number} to absolutely-position the\n * floating element.\n */\nexport function useAnchoredPosition(\n  settings?: AnchoredPositionHookSettings,\n  dependencies: React.DependencyList = [],\n): {\n  floatingElementRef: RefObject<Element | null> | undefined\n  anchorElementRef: RefObject<Element | null> | undefined\n  position: AnchorPosition | undefined\n} {\n  const floatingElementRef = settings?.floatingElementRef as RefObject<Element | null>\n  const anchorElementRef = settings?.anchorElementRef as RefObject<Element | null>\n\n  const [position, setPosition] = useState<AnchorPosition | undefined>(undefined)\n\n  const updatePosition = useCallback(\n    () => {\n      if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {\n        const anchoredPosition = getAnchoredPosition(floatingElementRef.current, anchorElementRef.current, {\n          side: settings?.side,\n          align: settings?.align,\n        })\n        setPosition(anchoredPosition)\n      } else {\n        setPosition(undefined)\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [floatingElementRef, anchorElementRef, ...dependencies],\n  )\n\n  useEffect(updatePosition, [updatePosition])\n\n  useResizeObserver(updatePosition)\n\n  return {\n    floatingElementRef,\n    anchorElementRef,\n    position,\n  }\n}\n"],"mappings":";;;;AAmBA,SAAgB,EACd,GACA,IAAqC,EAAE,EAKvC;CACA,IAAM,IAAqB,GAAU,oBAC/B,IAAmB,GAAU,kBAE7B,CAAC,GAAU,KAAe,EAAqC,KAAA,EAAU,EAEzE,IAAiB,QACf;AACJ,EAAI,EAAmB,mBAAmB,WAAW,EAAiB,mBAAmB,UAKvF,EAJyB,EAAoB,EAAmB,SAAS,EAAiB,SAAS;GACjG,MAAM,GAAU;GAChB,OAAO,GAAU;GAClB,CACW,CAAiB,GAE7B,EAAY,KAAA,EAAU;IAI1B;EAAC;EAAoB;EAAkB,GAAG;EAAa,CACxD;AAMD,QAJA,EAAU,GAAgB,CAAC,EAAe,CAAC,EAE3C,EAAkB,EAAe,EAE1B;EACL;EACA;EACA;EACD"}
+{"version":3,"file":"useAnchoredPosition.js","names":[],"sources":["../../src/hooks/useAnchoredPosition.ts"],"sourcesContent":["import React, {RefObject, useCallback, useEffect, useState} from 'react'\nimport {getAnchoredPosition} from '@primer/behaviors'\nimport type {AnchorPosition, PositionSettings} from '@primer/behaviors'\nimport {useResizeObserver} from './useResizeObserver'\n\nexport type AnchoredPositionHookSettings = Partial<PositionSettings> & {\n  floatingElementRef?: React.RefObject<Element | null>\n  anchorElementRef?: React.RefObject<Element | null>\n}\n\n/**\n * Calculates the top and left values for an absolutely-positioned floating element\n * to be anchored to some anchor element. Returns refs for the floating element\n * and the anchor element, along with the position.\n * @param settings Settings for calculating the anchored position.\n * @param dependencies Dependencies to determine when to re-calculate the position.\n * @returns An object of {top: number, left: number} to absolutely-position the\n * floating element.\n */\nexport function useAnchoredPosition(\n  settings?: AnchoredPositionHookSettings,\n  dependencies: React.DependencyList = [],\n): {\n  floatingElementRef: RefObject<Element | null> | undefined\n  anchorElementRef: RefObject<Element | null> | undefined\n  position: AnchorPosition | undefined\n} {\n  const floatingElementRef = settings?.floatingElementRef as RefObject<Element | null>\n  const anchorElementRef = settings?.anchorElementRef as RefObject<Element | null>\n\n  const [position, setPosition] = useState<AnchorPosition | undefined>(undefined)\n\n  const updatePosition = useCallback(\n    () => {\n      if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {\n        const anchoredPosition = getAnchoredPosition(floatingElementRef.current, anchorElementRef.current, {\n          side: settings?.side,\n          align: settings?.align,\n        })\n        setPosition(anchoredPosition)\n      } else {\n        setPosition(undefined)\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [floatingElementRef, anchorElementRef, ...dependencies],\n  )\n\n  useEffect(updatePosition, [updatePosition])\n\n  useResizeObserver(updatePosition)\n\n  return {\n    floatingElementRef,\n    anchorElementRef,\n    position,\n  }\n}\n"],"mappings":";;;;AAmBA,SAAgB,EACd,GACA,IAAqC,CAAC,GAKtC;CACA,IAAM,IAAqB,GAAU,oBAC/B,IAAmB,GAAU,kBAE7B,CAAC,GAAU,KAAe,EAAqC,KAAA,CAAS,GAExE,IAAiB,QACf;EACJ,IAAI,EAAmB,mBAAmB,WAAW,EAAiB,mBAAmB,SAAS;GAChG,IAAM,IAAmB,EAAoB,EAAmB,SAAS,EAAiB,SAAS;IACjG,MAAM,GAAU;IAChB,OAAO,GAAU;GACnB,CAAC;GACD,EAAY,CAAgB;EAC9B,OACE,EAAY,KAAA,CAAS;CAEzB,GAEA;EAAC;EAAoB;EAAkB,GAAG;CAAY,CACxD;CAMA,OAJA,EAAU,GAAgB,CAAC,CAAc,CAAC,GAE1C,EAAkB,CAAc,GAEzB;EACL;EACA;EACA;CACF;AACF"}

package/esm/hooks/useCursorAnimation.d.ts

@@ -1,38 +1,15 @@
+export type CursorAnimationPhase = 'initial' | 'correction' | 'final' | 'complete';
+export type UseCursorAnimationResult = {
+    visibleText: string;
+    showCursor: boolean;
+    cursorPhase: CursorAnimationPhase;
+};
 export type UseCursorAnimationOptions = {
-    /**
-     * The text content to animate
-     */
     text: string;
-    /**
-     * Whether to animate the text reveal with a cursor effect
-     */
+    initialText?: string;
     animate?: boolean;
-    /**
-     * Duration of the reveal animation in milliseconds
-     */
-    duration?: number;
-    /**
-     * Delay to start the animation in milliseconds
-     */
     delay?: number;
-    /**
-     * Loads after the page has fully loaded
-     */
     waitForPageLoad?: boolean;
 };
-export type UseCursorAnimationResult = {
-    /**
-     * Whether the animation is currently running
-     */
-    isAnimating: boolean;
-    /**
-     * Whether to show the cursor
-     */
-    showCursor: boolean;
-    /**
-     * Progress of the animation (0 to 1)
-     */
-    progress: number;
-};
-export declare function useCursorAnimation({ text, animate, duration, delay, waitForPageLoad, }: UseCursorAnimationOptions): UseCursorAnimationResult;
+export declare function useCursorAnimation({ text, initialText, animate, delay, waitForPageLoad, }: UseCursorAnimationOptions): UseCursorAnimationResult;
 //# sourceMappingURL=useCursorAnimation.d.ts.map

package/esm/hooks/useCursorAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCursorAnimation.d.ts","sourceRoot":"","sources":["../../src/hooks/useCursorAnimation.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,yBAAyB,GAAG;IACtC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,WAAW,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,QAAc,EACd,KAAW,EACX,eAAsB,GACvB,EAAE,yBAAyB,GAAG,wBAAwB,CAiFtD"}
+{"version":3,"file":"useCursorAnimation.d.ts","sourceRoot":"","sources":["../../src/hooks/useCursorAnimation.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,CAAA;AAElF,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,oBAAoB,CAAA;CAClC,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,WAAW,EACX,OAAO,EACP,KAAW,EACX,eAAsB,GACvB,EAAE,yBAAyB,GAAG,wBAAwB,CA6KtD"}

package/esm/hooks/useCursorAnimation.js

@@ -1,50 +1,100 @@
-import { useReducedMotion as e } from "./useReducedMotion.js";
-import { useCallback as t, useEffect as n, useState as r } from "react";
+import e from "./useIsomorphicLayoutEffect.js";
+import { useReducedMotion as t } from "./useReducedMotion.js";
+import { useEffect as n, useState as r } from "react";
 //#region src/hooks/useCursorAnimation.ts
-function i({ text: i, animate: a, duration: o = 500, delay: s = 500, waitForPageLoad: c = !0 }) {
-	let l = e(), u = a === !0 && !l && i.length > 0, [d, f] = r(u), [p, m] = r(+!u), h = t(() => {
-		if (!u) {
-			m(1), f(!1);
-			return;
-		}
-		f(!0), m(0);
-		let e = performance.now(), t = (n) => {
-			let r = n - e, i = Math.min(r / o, 1);
-			m(i), i < 1 ? requestAnimationFrame(t) : f(!1);
+function i({ text: i, initialText: a, animate: o, delay: s = 500, waitForPageLoad: c = !0 }) {
+	let l = t(), u = o === !0 && !l && i.length > 0, d = o === !0 && i.length > 0, [f, p] = r({
+		visibleText: d ? "" : i,
+		showCursor: !d,
+		cursorPhase: d ? "initial" : "complete"
+	});
+	return e(() => {
+		u || p({
+			visibleText: i,
+			showCursor: !0,
+			cursorPhase: "complete"
+		});
+	}, [u, i]), n(() => {
+		if (!u) return;
+		let e = 1e3 / 60, t = 85 / 75 * 24, n = [
+			">",
+			"*",
+			"=",
+			"&",
+			"+",
+			"-",
+			"%",
+			"^",
+			"_"
+		];
+		p({
+			visibleText: "",
+			showCursor: !1,
+			cursorPhase: "initial"
+		});
+		let r = typeof a == "string" && a.length > 0 && a !== i ? a : void 0, o = 0;
+		if (r) for (; o < r.length && o < i.length && r[o] === i[o];) o += 1;
+		let l = r !== void 0 && o < r.length, d = l ? r : i, f = l ? d.length - o : 0, m = d.length / 34 * 1e3, h = m + (l ? 308.8235294117647 : 0), g = h + f / t * 1e3, _ = g + (l ? i.length - o : 0) / 34 * 1e3, v = h - e, y = _ - 6 * e, b = (e, t) => {
+			let r = "", i = 0;
+			for (let a = 0; a < t; a += 1) {
+				let o = e[a];
+				if (/\s/.test(o)) {
+					r = `${r}${o}`;
+					continue;
+				}
+				i += 1, r = `${r}${o}`, a === t - 1 && (r = `${r}${n[(i - 1) % n.length]}`);
+			}
+			return r;
+		}, x = (e) => {
+			let n = "";
+			if (e > 0 && e < m) {
+				let t = Math.floor(e / 1e3 * 34);
+				n = b(d, t);
+			} else if (l && e >= m && e < h) n = d;
+			else if (l && e >= h && e < g) {
+				let r = e - h, i = Math.floor(r / 1e3 * t);
+				n = d.slice(0, d.length - i);
+			} else if (l && e >= g && e < _) {
+				let t = e - g, r = Math.min(i.length, o + Math.floor(t / 1e3 * 34));
+				n = i.slice(0, r);
+			} else e >= _ && (n = i);
+			let r = "initial";
+			return l && e >= v && (r = "correction"), e >= y && (r = "final"), e >= _ && (r = "complete"), {
+				visibleText: n,
+				showCursor: n.length > 0,
+				cursorPhase: r
+			};
+		}, S, C, w = () => {
+			let e = performance.now(), t = {
+				visibleText: "",
+				showCursor: !1,
+				cursorPhase: "initial"
+			}, n = (r) => {
+				let i = r - e, a = x(i);
+				(t.visibleText !== a.visibleText || t.showCursor !== a.showCursor || t.cursorPhase !== a.cursorPhase) && (t = a, p(a)), i < _ && (S = window.requestAnimationFrame(n));
+			};
+			S = window.requestAnimationFrame(n);
+		}, T = () => {
+			C = setTimeout(w, s);
 		};
-		requestAnimationFrame(t);
-	}, [u, o]);
-	return n(() => {
-		if (!u) {
-			m(1), f(!1);
-			return;
-		}
-		let e = () => setTimeout(() => {
-			h();
-		}, s), t;
-		if (c && typeof window < "u") if (document.readyState === "complete") t = e();
+		if (c && typeof window < "u") if (document.readyState === "complete") T();
 		else {
-			let n = () => {
-				t = e();
-			};
-			return window.addEventListener("load", n), () => {
-				window.removeEventListener("load", n), t && clearTimeout(t);
+			let e = () => T();
+			return window.addEventListener("load", e), () => {
+				window.removeEventListener("load", e), C !== void 0 && clearTimeout(C), S !== void 0 && window.cancelAnimationFrame(S);
 			};
 		}
-		else t = e();
+		else T();
 		return () => {
-			t && clearTimeout(t);
+			C !== void 0 && clearTimeout(C), S !== void 0 && window.cancelAnimationFrame(S);
 		};
 	}, [
-		h,
 		s,
+		a,
 		u,
+		i,
 		c
-	]), {
-		isAnimating: d,
-		showCursor: !l && a === !0,
-		progress: p
-	};
+	]), f;
 }
 //#endregion
 export { i as useCursorAnimation };

package/esm/hooks/useCursorAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCursorAnimation.js","names":[],"sources":["../../src/hooks/useCursorAnimation.ts"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react'\nimport {useReducedMotion} from './useReducedMotion'\n\nexport type UseCursorAnimationOptions = {\n  /**\n   * The text content to animate\n   */\n  text: string\n  /**\n   * Whether to animate the text reveal with a cursor effect\n   */\n  animate?: boolean\n  /**\n   * Duration of the reveal animation in milliseconds\n   */\n  duration?: number\n  /**\n   * Delay to start the animation in milliseconds\n   */\n  delay?: number\n  /**\n   * Loads after the page has fully loaded\n   */\n  waitForPageLoad?: boolean\n}\n\nexport type UseCursorAnimationResult = {\n  /**\n   * Whether the animation is currently running\n   */\n  isAnimating: boolean\n  /**\n   * Whether to show the cursor\n   */\n  showCursor: boolean\n  /**\n   * Progress of the animation (0 to 1)\n   */\n  progress: number\n}\n\nexport function useCursorAnimation({\n  text,\n  animate,\n  duration = 500,\n  delay = 500,\n  waitForPageLoad = true,\n}: UseCursorAnimationOptions): UseCursorAnimationResult {\n  const prefersReducedMotion = useReducedMotion()\n  const shouldAnimate = animate === true && !prefersReducedMotion && text.length > 0\n\n  const [isAnimating, setIsAnimating] = useState(shouldAnimate)\n  const [progress, setProgress] = useState(shouldAnimate ? 0 : 1)\n\n  const startAnimation = useCallback(() => {\n    if (!shouldAnimate) {\n      setProgress(1)\n      setIsAnimating(false)\n      return\n    }\n\n    setIsAnimating(true)\n    setProgress(0)\n\n    const startTime = performance.now()\n\n    const tick = (currentTime: number) => {\n      const elapsed = currentTime - startTime\n      const newProgress = Math.min(elapsed / duration, 1)\n\n      setProgress(newProgress)\n\n      if (newProgress < 1) {\n        requestAnimationFrame(tick)\n      } else {\n        setIsAnimating(false)\n      }\n    }\n\n    requestAnimationFrame(tick)\n  }, [shouldAnimate, duration])\n\n  useEffect(() => {\n    if (!shouldAnimate) {\n      setProgress(1)\n      setIsAnimating(false)\n      return\n    }\n\n    const startDelayTimer = () => {\n      return setTimeout(() => {\n        startAnimation()\n      }, delay)\n    }\n\n    let delayTimer: ReturnType<typeof setTimeout> | undefined\n\n    if (waitForPageLoad && typeof window !== 'undefined') {\n      // Check if page is already loaded\n      if (document.readyState === 'complete') {\n        delayTimer = startDelayTimer()\n      } else {\n        // Wait for page load before starting the delay timer\n        const handleLoad = () => {\n          delayTimer = startDelayTimer()\n        }\n        window.addEventListener('load', handleLoad)\n        return () => {\n          window.removeEventListener('load', handleLoad)\n          if (delayTimer) clearTimeout(delayTimer)\n        }\n      }\n    } else {\n      delayTimer = startDelayTimer()\n    }\n\n    return () => {\n      if (delayTimer) clearTimeout(delayTimer)\n    }\n  }, [startAnimation, delay, shouldAnimate, waitForPageLoad])\n\n  const showCursor = !prefersReducedMotion && animate === true\n\n  return {\n    isAnimating,\n    showCursor,\n    progress,\n  }\n}\n"],"mappings":";;;AAyCA,SAAgB,EAAmB,EACjC,SACA,YACA,cAAW,KACX,WAAQ,KACR,qBAAkB,MACoC;CACtD,IAAM,IAAuB,GAAkB,EACzC,IAAgB,MAAY,MAAQ,CAAC,KAAwB,EAAK,SAAS,GAE3E,CAAC,GAAa,KAAkB,EAAS,EAAc,EACvD,CAAC,GAAU,KAAe,EAAS,IAAsB,EAEzD,IAAiB,QAAkB;AACvC,MAAI,CAAC,GAAe;AAElB,GADA,EAAY,EAAE,EACd,EAAe,GAAM;AACrB;;AAIF,EADA,EAAe,GAAK,EACpB,EAAY,EAAE;EAEd,IAAM,IAAY,YAAY,KAAK,EAE7B,KAAQ,MAAwB;GACpC,IAAM,IAAU,IAAc,GACxB,IAAc,KAAK,IAAI,IAAU,GAAU,EAAE;AAInD,GAFA,EAAY,EAAY,EAEpB,IAAc,IAChB,sBAAsB,EAAK,GAE3B,EAAe,GAAM;;AAIzB,wBAAsB,EAAK;IAC1B,CAAC,GAAe,EAAS,CAAC;AA2C7B,QAzCA,QAAgB;AACd,MAAI,CAAC,GAAe;AAElB,GADA,EAAY,EAAE,EACd,EAAe,GAAM;AACrB;;EAGF,IAAM,UACG,iBAAiB;AACtB,MAAgB;KACf,EAAM,EAGP;AAEJ,MAAI,KAAmB,OAAO,SAAW,IAEvC,KAAI,SAAS,eAAe,WAC1B,KAAa,GAAiB;OACzB;GAEL,IAAM,UAAmB;AACvB,QAAa,GAAiB;;AAGhC,UADA,OAAO,iBAAiB,QAAQ,EAAW,QAC9B;AAEX,IADA,OAAO,oBAAoB,QAAQ,EAAW,EAC1C,KAAY,aAAa,EAAW;;;MAI5C,KAAa,GAAiB;AAGhC,eAAa;AACX,GAAI,KAAY,aAAa,EAAW;;IAEzC;EAAC;EAAgB;EAAO;EAAe;EAAgB,CAAC,EAIpD;EACL;EACA,YAJiB,CAAC,KAAwB,MAAY;EAKtD;EACD"}
+{"version":3,"file":"useCursorAnimation.js","names":[],"sources":["../../src/hooks/useCursorAnimation.ts"],"sourcesContent":["import {useEffect, useState} from 'react'\nimport useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'\nimport {useReducedMotion} from './useReducedMotion'\n\nexport type CursorAnimationPhase = 'initial' | 'correction' | 'final' | 'complete'\n\nexport type UseCursorAnimationResult = {\n  visibleText: string\n  showCursor: boolean\n  cursorPhase: CursorAnimationPhase\n}\n\nexport type UseCursorAnimationOptions = {\n  text: string\n  initialText?: string\n  animate?: boolean\n  delay?: number\n  waitForPageLoad?: boolean\n}\n\nexport function useCursorAnimation({\n  text,\n  initialText,\n  animate,\n  delay = 500,\n  waitForPageLoad = true,\n}: UseCursorAnimationOptions): UseCursorAnimationResult {\n  const prefersReducedMotion = useReducedMotion()\n\n  const shouldAnimate = animate === true && !prefersReducedMotion && text.length > 0\n  const shouldStartHidden = animate === true && text.length > 0\n\n  const [frame, setFrame] = useState<UseCursorAnimationResult>({\n    visibleText: shouldStartHidden ? '' : text,\n    showCursor: !shouldStartHidden,\n    cursorPhase: shouldStartHidden ? 'initial' : 'complete',\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    if (!shouldAnimate) {\n      setFrame({visibleText: text, showCursor: true, cursorPhase: 'complete'})\n    }\n  }, [shouldAnimate, text])\n\n  useEffect(() => {\n    if (!shouldAnimate) return\n\n    const frameDuration = 1000 / 60\n    const charactersPerSecond = 30 * (85 / 75)\n    const deleteCharactersPerSecond = 24 * (85 / 75)\n    const correctionPauseDuration = 350 / (85 / 75)\n    const scrambleSymbols = ['>', '*', '=', '&', '+', '-', '%', '^', '_']\n\n    setFrame({visibleText: '', showCursor: false, cursorPhase: 'initial'})\n\n    const candidateInitialText =\n      typeof initialText === 'string' && initialText.length > 0 && initialText !== text ? initialText : undefined\n    let sharedPrefixLength = 0\n\n    if (candidateInitialText) {\n      while (\n        sharedPrefixLength < candidateInitialText.length &&\n        sharedPrefixLength < text.length &&\n        candidateInitialText[sharedPrefixLength] === text[sharedPrefixLength]\n      ) {\n        sharedPrefixLength += 1\n      }\n    }\n\n    const hasCorrection = candidateInitialText !== undefined && sharedPrefixLength < candidateInitialText.length\n    const firstText = hasCorrection ? candidateInitialText : text\n    const deletedCharacterCount = hasCorrection ? firstText.length - sharedPrefixLength : 0\n    const firstTypeDuration = (firstText.length / charactersPerSecond) * 1000\n    const correctionStart = firstTypeDuration + (hasCorrection ? correctionPauseDuration : 0)\n    const deleteDuration = (deletedCharacterCount / deleteCharactersPerSecond) * 1000\n    const secondTypeStart = correctionStart + deleteDuration\n    const secondTypeCharacterCount = hasCorrection ? text.length - sharedPrefixLength : 0\n    const secondTypeDuration = (secondTypeCharacterCount / charactersPerSecond) * 1000\n    const typingComplete = secondTypeStart + secondTypeDuration\n    const correctionCursorStart = correctionStart - frameDuration\n    const finalCursorStart = typingComplete - 6 * frameDuration\n\n    const getScrambledText = (sourceText: string, characterCount: number) => {\n      let result = ''\n      let visibleCharacterIndex = 0\n\n      for (let index = 0; index < characterCount; index += 1) {\n        const character = sourceText[index]\n\n        if (/\\s/.test(character)) {\n          result = `${result}${character}`\n          continue\n        }\n\n        visibleCharacterIndex += 1\n        result = `${result}${character}`\n\n        if (index === characterCount - 1) {\n          result = `${result}${scrambleSymbols[(visibleCharacterIndex - 1) % scrambleSymbols.length]}`\n        }\n      }\n\n      return result\n    }\n\n    const getFrame = (elapsed: number): UseCursorAnimationResult => {\n      let nextText = ''\n\n      if (elapsed > 0 && elapsed < firstTypeDuration) {\n        const typedCharacterCount = Math.floor((elapsed / 1000) * charactersPerSecond)\n        nextText = getScrambledText(firstText, typedCharacterCount)\n      } else if (hasCorrection && elapsed >= firstTypeDuration && elapsed < correctionStart) {\n        nextText = firstText\n      } else if (hasCorrection && elapsed >= correctionStart && elapsed < secondTypeStart) {\n        const deleteElapsed = elapsed - correctionStart\n        const currentDeletedCharacterCount = Math.floor((deleteElapsed / 1000) * deleteCharactersPerSecond)\n        nextText = firstText.slice(0, firstText.length - currentDeletedCharacterCount)\n      } else if (hasCorrection && elapsed >= secondTypeStart && elapsed < typingComplete) {\n        const secondTypeElapsed = elapsed - secondTypeStart\n        const typedCharacterCount = Math.min(\n          text.length,\n          sharedPrefixLength + Math.floor((secondTypeElapsed / 1000) * charactersPerSecond),\n        )\n        nextText = text.slice(0, typedCharacterCount)\n      } else if (elapsed >= typingComplete) {\n        nextText = text\n      }\n\n      let nextCursorPhase: CursorAnimationPhase = 'initial'\n      if (hasCorrection && elapsed >= correctionCursorStart) nextCursorPhase = 'correction'\n      if (elapsed >= finalCursorStart) nextCursorPhase = 'final'\n      if (elapsed >= typingComplete) nextCursorPhase = 'complete'\n\n      return {\n        visibleText: nextText,\n        showCursor: nextText.length > 0,\n        cursorPhase: nextCursorPhase,\n      }\n    }\n\n    let animationFrame: number | undefined\n    let delayTimer: ReturnType<typeof setTimeout> | undefined\n\n    const startAnimation = () => {\n      const startTime = performance.now()\n      let previousFrame: UseCursorAnimationResult = {\n        visibleText: '',\n        showCursor: false,\n        cursorPhase: 'initial',\n      }\n\n      const tick = (currentTime: number) => {\n        const elapsed = currentTime - startTime\n        const nextFrame = getFrame(elapsed)\n\n        if (\n          previousFrame.visibleText !== nextFrame.visibleText ||\n          previousFrame.showCursor !== nextFrame.showCursor ||\n          previousFrame.cursorPhase !== nextFrame.cursorPhase\n        ) {\n          previousFrame = nextFrame\n          setFrame(nextFrame)\n        }\n\n        if (elapsed < typingComplete) {\n          animationFrame = window.requestAnimationFrame(tick)\n        }\n      }\n\n      animationFrame = window.requestAnimationFrame(tick)\n    }\n\n    const startDelayTimer = () => {\n      delayTimer = setTimeout(startAnimation, delay)\n    }\n\n    if (waitForPageLoad && typeof window !== 'undefined') {\n      if (document.readyState === 'complete') {\n        startDelayTimer()\n      } else {\n        const handleLoad = () => startDelayTimer()\n        window.addEventListener('load', handleLoad)\n        return () => {\n          window.removeEventListener('load', handleLoad)\n          if (delayTimer !== undefined) clearTimeout(delayTimer)\n          if (animationFrame !== undefined) window.cancelAnimationFrame(animationFrame)\n        }\n      }\n    } else {\n      startDelayTimer()\n    }\n\n    return () => {\n      if (delayTimer !== undefined) clearTimeout(delayTimer)\n      if (animationFrame !== undefined) window.cancelAnimationFrame(animationFrame)\n    }\n  }, [delay, initialText, shouldAnimate, text, waitForPageLoad])\n\n  return frame\n}\n"],"mappings":"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"}

package/esm/hooks/useFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","names":[],"sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React from 'react'\nimport {focusTrap} from '@primer/behaviors'\nimport {useProvidedRefOrCreate} from './useRef'\n\nexport interface FocusTrapHookSettings<\n  ContainerElement extends HTMLElement = HTMLElement,\n  InitialFocusElement extends HTMLElement = HTMLElement,\n> {\n  /**\n   * Ref object that will be used for the trapping container. If not provided, one will\n   * be created by this hook and returned.\n   */\n  containerRef?: React.RefObject<ContainerElement | null>\n\n  /**\n   * Ref object for the element that should receive focus when the focus trap is first enabled.\n   * If not provided, one will be created by this hook and returned. Its use is optional.\n   */\n  initialFocusRef?: React.RefObject<InitialFocusElement | null>\n\n  /**\n   * Set to true to disable the focus trap and clean up listeners. Can be re-enabled at any time.\n   */\n  disabled?: boolean\n\n  /**\n   * If true, when this focus trap is cleaned up, restore focus to the element that had focus immediately before the focus trap was enabled. (Default: false)\n   */\n  restoreFocusOnCleanUp?: boolean\n}\n\n/**\n * Hook used to trap focus inside a container. Returns a ref that can be added to the container\n * that should trap focus.\n * @param settings {FocusTrapHookSettings}\n */\nexport function useFocusTrap<\n  ContainerElement extends HTMLElement = HTMLElement,\n  InitialFocusElement extends HTMLElement = HTMLElement,\n>(\n  settings?: FocusTrapHookSettings<ContainerElement, InitialFocusElement>,\n  dependencies: React.DependencyList = [],\n): {\n  containerRef: React.RefObject<ContainerElement | null>\n  initialFocusRef: React.RefObject<InitialFocusElement | null>\n} {\n  const containerRef = useProvidedRefOrCreate<ContainerElement | null>(settings?.containerRef)\n  const initialFocusRef = useProvidedRefOrCreate<InitialFocusElement | null>(settings?.initialFocusRef)\n  const disabled = settings?.disabled\n  const abortController = React.useRef<AbortController | null>(null)\n  const previousFocusedElement = React.useRef<Element | null>(null)\n\n  // This function removes the event listeners that enable the focus trap and restores focus\n  // to the previously-focused element (if necessary).\n  function disableTrap() {\n    abortController.current?.abort()\n    if (settings?.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {\n      previousFocusedElement.current.focus()\n    }\n    previousFocusedElement.current = null\n  }\n\n  React.useEffect(\n    () => {\n      if (containerRef.current instanceof HTMLElement) {\n        if (!disabled) {\n          if (!previousFocusedElement.current) {\n            previousFocusedElement.current = document.activeElement\n          }\n          abortController.current = focusTrap(containerRef.current, initialFocusRef.current ?? undefined) ?? null\n          return () => {\n            disableTrap()\n          }\n        } else {\n          disableTrap()\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [containerRef, initialFocusRef, disabled, ...dependencies],\n  )\n\n  return {containerRef, initialFocusRef}\n}\n"],"mappings":";;;;AAoCA,SAAgB,EAId,GACA,IAAqC,EAAE,EAIvC;CACA,IAAM,IAAe,EAAgD,GAAU,aAAa,EACtF,IAAkB,EAAmD,GAAU,gBAAgB,EAC/F,IAAW,GAAU,UACrB,IAAkB,EAAM,OAA+B,KAAK,EAC5D,IAAyB,EAAM,OAAuB,KAAK;CAIjE,SAAS,IAAc;AAKrB,EAJA,EAAgB,SAAS,OAAO,EAC5B,GAAU,yBAAyB,EAAuB,mBAAmB,eAC/E,EAAuB,QAAQ,OAAO,EAExC,EAAuB,UAAU;;AAuBnC,QApBA,EAAM,gBACE;AACJ,MAAI,EAAa,mBAAmB,YAClC,KAAK,EASH,IAAa;MAJb,QAJA,AACE,EAAuB,YAAU,SAAS,eAE5C,EAAgB,UAAU,EAAU,EAAa,SAAS,EAAgB,WAAW,KAAA,EAAU,IAAI,YACtF;AACX,MAAa;;IAQrB;EAAC;EAAc;EAAiB;EAAU,GAAG;EAAa,CAC3D,EAEM;EAAC;EAAc;EAAgB"}
+{"version":3,"file":"useFocusTrap.js","names":[],"sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React from 'react'\nimport {focusTrap} from '@primer/behaviors'\nimport {useProvidedRefOrCreate} from './useRef'\n\nexport interface FocusTrapHookSettings<\n  ContainerElement extends HTMLElement = HTMLElement,\n  InitialFocusElement extends HTMLElement = HTMLElement,\n> {\n  /**\n   * Ref object that will be used for the trapping container. If not provided, one will\n   * be created by this hook and returned.\n   */\n  containerRef?: React.RefObject<ContainerElement | null>\n\n  /**\n   * Ref object for the element that should receive focus when the focus trap is first enabled.\n   * If not provided, one will be created by this hook and returned. Its use is optional.\n   */\n  initialFocusRef?: React.RefObject<InitialFocusElement | null>\n\n  /**\n   * Set to true to disable the focus trap and clean up listeners. Can be re-enabled at any time.\n   */\n  disabled?: boolean\n\n  /**\n   * If true, when this focus trap is cleaned up, restore focus to the element that had focus immediately before the focus trap was enabled. (Default: false)\n   */\n  restoreFocusOnCleanUp?: boolean\n}\n\n/**\n * Hook used to trap focus inside a container. Returns a ref that can be added to the container\n * that should trap focus.\n * @param settings {FocusTrapHookSettings}\n */\nexport function useFocusTrap<\n  ContainerElement extends HTMLElement = HTMLElement,\n  InitialFocusElement extends HTMLElement = HTMLElement,\n>(\n  settings?: FocusTrapHookSettings<ContainerElement, InitialFocusElement>,\n  dependencies: React.DependencyList = [],\n): {\n  containerRef: React.RefObject<ContainerElement | null>\n  initialFocusRef: React.RefObject<InitialFocusElement | null>\n} {\n  const containerRef = useProvidedRefOrCreate<ContainerElement | null>(settings?.containerRef)\n  const initialFocusRef = useProvidedRefOrCreate<InitialFocusElement | null>(settings?.initialFocusRef)\n  const disabled = settings?.disabled\n  const abortController = React.useRef<AbortController | null>(null)\n  const previousFocusedElement = React.useRef<Element | null>(null)\n\n  // This function removes the event listeners that enable the focus trap and restores focus\n  // to the previously-focused element (if necessary).\n  function disableTrap() {\n    abortController.current?.abort()\n    if (settings?.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {\n      previousFocusedElement.current.focus()\n    }\n    previousFocusedElement.current = null\n  }\n\n  React.useEffect(\n    () => {\n      if (containerRef.current instanceof HTMLElement) {\n        if (!disabled) {\n          if (!previousFocusedElement.current) {\n            previousFocusedElement.current = document.activeElement\n          }\n          abortController.current = focusTrap(containerRef.current, initialFocusRef.current ?? undefined) ?? null\n          return () => {\n            disableTrap()\n          }\n        } else {\n          disableTrap()\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [containerRef, initialFocusRef, disabled, ...dependencies],\n  )\n\n  return {containerRef, initialFocusRef}\n}\n"],"mappings":";;;;AAoCA,SAAgB,EAId,GACA,IAAqC,CAAC,GAItC;CACA,IAAM,IAAe,EAAgD,GAAU,YAAY,GACrF,IAAkB,EAAmD,GAAU,eAAe,GAC9F,IAAW,GAAU,UACrB,IAAkB,EAAM,OAA+B,IAAI,GAC3D,IAAyB,EAAM,OAAuB,IAAI;CAIhE,SAAS,IAAc;EAKrB,AAJA,EAAgB,SAAS,MAAM,GAC3B,GAAU,yBAAyB,EAAuB,mBAAmB,eAC/E,EAAuB,QAAQ,MAAM,GAEvC,EAAuB,UAAU;CACnC;CAsBA,OApBA,EAAM,gBACE;EACJ,IAAI,EAAa,mBAAmB,aAClC,IAAK,GASH,EAAY;OAJZ,OAJA,AACE,EAAuB,YAAU,SAAS,eAE5C,EAAgB,UAAU,EAAU,EAAa,SAAS,EAAgB,WAAW,KAAA,CAAS,KAAK,YACtF;GACX,EAAY;EACd;CAKN,GAEA;EAAC;EAAc;EAAiB;EAAU,GAAG;CAAY,CAC3D,GAEO;EAAC;EAAc;CAAe;AACvC"}

package/esm/hooks/useId.js.map

@@ -1 +1 @@
-{"version":3,"file":"useId.js","names":[],"sources":["../../src/hooks/useId.ts"],"sourcesContent":["import {useId as useReactId} from 'react'\n\nexport type UseId = (id?: string) => string\n\nexport const useId: UseId = id => {\n  const uniqueId = useReactId()\n\n  if (id) {\n    return id\n  }\n\n  return uniqueId\n}\n"],"mappings":";;AAIA,IAAa,KAAe,MAAM;CAChC,IAAM,IAAW,GAAY;AAM7B,QAJI,KAIG"}
+{"version":3,"file":"useId.js","names":[],"sources":["../../src/hooks/useId.ts"],"sourcesContent":["import {useId as useReactId} from 'react'\n\nexport type UseId = (id?: string) => string\n\nexport const useId: UseId = id => {\n  const uniqueId = useReactId()\n\n  if (id) {\n    return id\n  }\n\n  return uniqueId\n}\n"],"mappings":";;AAIA,IAAa,KAAe,MAAM;CAChC,IAAM,IAAW,EAAW;CAM5B,OAJI,KAIG;AACT"}

package/esm/hooks/useKeyboardEscape.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardEscape.js","names":[],"sources":["../../src/hooks/useKeyboardEscape.ts"],"sourcesContent":["import {useCallback, useEffect} from 'react'\n\nexport function useKeyboardEscape(handler) {\n  const handleKeyboardEscape = useCallback(\n    event => {\n      if (event.key === 'Escape') {\n        handler()\n      }\n    },\n    [handler],\n  )\n\n  useEffect(() => {\n    document.addEventListener('keydown', handleKeyboardEscape, false)\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyboardEscape, false)\n    }\n  }, [handleKeyboardEscape])\n}\n"],"mappings":";;AAEA,SAAgB,EAAkB,GAAS;CACzC,IAAM,IAAuB,GAC3B,MAAS;AACP,EAAI,EAAM,QAAQ,YAChB,GAAS;IAGb,CAAC,EAAQ,CACV;AAED,UACE,SAAS,iBAAiB,WAAW,GAAsB,GAAM,QAEpD;AACX,WAAS,oBAAoB,WAAW,GAAsB,GAAM;KAErE,CAAC,EAAqB,CAAC"}
+{"version":3,"file":"useKeyboardEscape.js","names":[],"sources":["../../src/hooks/useKeyboardEscape.ts"],"sourcesContent":["import {useCallback, useEffect} from 'react'\n\nexport function useKeyboardEscape(handler) {\n  const handleKeyboardEscape = useCallback(\n    event => {\n      if (event.key === 'Escape') {\n        handler()\n      }\n    },\n    [handler],\n  )\n\n  useEffect(() => {\n    document.addEventListener('keydown', handleKeyboardEscape, false)\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyboardEscape, false)\n    }\n  }, [handleKeyboardEscape])\n}\n"],"mappings":";;AAEA,SAAgB,EAAkB,GAAS;CACzC,IAAM,IAAuB,GAC3B,MAAS;EACP,AAAI,EAAM,QAAQ,YAChB,EAAQ;CAEZ,GACA,CAAC,CAAO,CACV;CAEA,SACE,SAAS,iBAAiB,WAAW,GAAsB,EAAK,SAEnD;EACX,SAAS,oBAAoB,WAAW,GAAsB,EAAK;CACrE,IACC,CAAC,CAAoB,CAAC;AAC3B"}

package/esm/hooks/useOnClickOutside.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOnClickOutside.js","names":[],"sources":["../../src/hooks/useOnClickOutside.ts"],"sourcesContent":["import {RefObject, useEffect} from 'react'\n\nexport function useOnClickOutside(\n  ref: RefObject<HTMLElement | null>,\n  handler?: (event: MouseEvent | TouchEvent | FocusEvent) => void,\n  excludeRef?: RefObject<HTMLElement | null>,\n): void {\n  useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent | FocusEvent) => {\n      // Do nothing if clicking ref's element or descendent elements\n      if (\n        !ref.current ||\n        ref.current.contains(event.target as Node) ||\n        (excludeRef && excludeRef.current && excludeRef.current.contains(event.target as Node))\n      ) {\n        return\n      }\n      if (handler) {\n        handler(event)\n      }\n    }\n\n    document.addEventListener('mousedown', listener)\n    document.addEventListener('touchstart', listener, {passive: true})\n    document.addEventListener('focusin', listener)\n\n    return () => {\n      document.removeEventListener('mousedown', listener)\n      document.removeEventListener('touchstart', listener)\n      document.removeEventListener('focusin', listener)\n    }\n  }, [ref, handler, excludeRef])\n}\n"],"mappings":";;AAEA,SAAgB,EACd,GACA,GACA,GACM;AACN,SAAgB;EACd,IAAM,KAAY,MAAgD;AAG9D,IAAC,EAAI,WACL,EAAI,QAAQ,SAAS,EAAM,OAAe,IACzC,KAAc,EAAW,WAAW,EAAW,QAAQ,SAAS,EAAM,OAAe,IAIpF,KACF,EAAQ,EAAM;;AAQlB,SAJA,SAAS,iBAAiB,aAAa,EAAS,EAChD,SAAS,iBAAiB,cAAc,GAAU,EAAC,SAAS,IAAK,CAAC,EAClE,SAAS,iBAAiB,WAAW,EAAS,QAEjC;AAGX,GAFA,SAAS,oBAAoB,aAAa,EAAS,EACnD,SAAS,oBAAoB,cAAc,EAAS,EACpD,SAAS,oBAAoB,WAAW,EAAS;;IAElD;EAAC;EAAK;EAAS;EAAW,CAAC"}
+{"version":3,"file":"useOnClickOutside.js","names":[],"sources":["../../src/hooks/useOnClickOutside.ts"],"sourcesContent":["import {RefObject, useEffect} from 'react'\n\nexport function useOnClickOutside(\n  ref: RefObject<HTMLElement | null>,\n  handler?: (event: MouseEvent | TouchEvent | FocusEvent) => void,\n  excludeRef?: RefObject<HTMLElement | null>,\n): void {\n  useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent | FocusEvent) => {\n      // Do nothing if clicking ref's element or descendent elements\n      if (\n        !ref.current ||\n        ref.current.contains(event.target as Node) ||\n        (excludeRef && excludeRef.current && excludeRef.current.contains(event.target as Node))\n      ) {\n        return\n      }\n      if (handler) {\n        handler(event)\n      }\n    }\n\n    document.addEventListener('mousedown', listener)\n    document.addEventListener('touchstart', listener, {passive: true})\n    document.addEventListener('focusin', listener)\n\n    return () => {\n      document.removeEventListener('mousedown', listener)\n      document.removeEventListener('touchstart', listener)\n      document.removeEventListener('focusin', listener)\n    }\n  }, [ref, handler, excludeRef])\n}\n"],"mappings":";;AAEA,SAAgB,EACd,GACA,GACA,GACM;CACN,QAAgB;EACd,IAAM,KAAY,MAAgD;GAG9D,CAAC,EAAI,WACL,EAAI,QAAQ,SAAS,EAAM,MAAc,KACxC,KAAc,EAAW,WAAW,EAAW,QAAQ,SAAS,EAAM,MAAc,KAInF,KACF,EAAQ,CAAK;EAEjB;EAMA,OAJA,SAAS,iBAAiB,aAAa,CAAQ,GAC/C,SAAS,iBAAiB,cAAc,GAAU,EAAC,SAAS,GAAI,CAAC,GACjE,SAAS,iBAAiB,WAAW,CAAQ,SAEhC;GAGX,AAFA,SAAS,oBAAoB,aAAa,CAAQ,GAClD,SAAS,oBAAoB,cAAc,CAAQ,GACnD,SAAS,oBAAoB,WAAW,CAAQ;EAClD;CACF,GAAG;EAAC;EAAK;EAAS;CAAU,CAAC;AAC/B"}

package/esm/hooks/useReducedMotion.js

@@ -1,7 +1,7 @@
 import { useEffect as e, useState as t } from "react";
 //#region src/hooks/useReducedMotion.ts
 function n() {
-	let [n, r] = t(() => typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1);
+	let [n, r] = t(() => typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
 	return e(() => {
 		let e = window.matchMedia("(prefers-reduced-motion: reduce)");
 		r(e.matches);

package/esm/hooks/useReducedMotion.js.map

@@ -1 +1 @@
-{"version":3,"file":"useReducedMotion.js","names":[],"sources":["../../src/hooks/useReducedMotion.ts"],"sourcesContent":["import {useState, useEffect} from 'react'\n\n/**\n * Hook that returns true if the user prefers reduced motion.\n * Respects the prefers-reduced-motion media query.\n */\nexport function useReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(() =>\n    typeof window !== 'undefined' ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false,\n  )\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')\n    setPrefersReducedMotion(mediaQuery.matches)\n\n    const handleChange = (event: MediaQueryListEvent) => {\n      setPrefersReducedMotion(event.matches)\n    }\n\n    mediaQuery.addEventListener('change', handleChange)\n    return () => mediaQuery.removeEventListener('change', handleChange)\n  }, [])\n\n  return prefersReducedMotion\n}\n"],"mappings":";;AAMA,SAAgB,IAA4B;CAC1C,IAAM,CAAC,GAAsB,KAA2B,QACtD,OAAO,SAAW,MAAc,OAAO,WAAW,mCAAmC,CAAC,UAAU,GACjG;AAcD,QAZA,QAAgB;EACd,IAAM,IAAa,OAAO,WAAW,mCAAmC;AACxE,IAAwB,EAAW,QAAQ;EAE3C,IAAM,KAAgB,MAA+B;AACnD,KAAwB,EAAM,QAAQ;;AAIxC,SADA,EAAW,iBAAiB,UAAU,EAAa,QACtC,EAAW,oBAAoB,UAAU,EAAa;IAClE,EAAE,CAAC,EAEC"}
+{"version":3,"file":"useReducedMotion.js","names":[],"sources":["../../src/hooks/useReducedMotion.ts"],"sourcesContent":["import {useState, useEffect} from 'react'\n\n/**\n * Hook that returns true if the user prefers reduced motion.\n * Respects the prefers-reduced-motion media query.\n */\nexport function useReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(() =>\n    typeof window !== 'undefined' ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false,\n  )\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')\n    setPrefersReducedMotion(mediaQuery.matches)\n\n    const handleChange = (event: MediaQueryListEvent) => {\n      setPrefersReducedMotion(event.matches)\n    }\n\n    mediaQuery.addEventListener('change', handleChange)\n    return () => mediaQuery.removeEventListener('change', handleChange)\n  }, [])\n\n  return prefersReducedMotion\n}\n"],"mappings":";;AAMA,SAAgB,IAA4B;CAC1C,IAAM,CAAC,GAAsB,KAA2B,QACtD,OAAO,SAAW,OAAc,OAAO,WAAW,kCAAkC,CAAC,CAAC,OACxF;CAcA,OAZA,QAAgB;EACd,IAAM,IAAa,OAAO,WAAW,kCAAkC;EACvE,EAAwB,EAAW,OAAO;EAE1C,IAAM,KAAgB,MAA+B;GACnD,EAAwB,EAAM,OAAO;EACvC;EAGA,OADA,EAAW,iBAAiB,UAAU,CAAY,SACrC,EAAW,oBAAoB,UAAU,CAAY;CACpE,GAAG,CAAC,CAAC,GAEE;AACT"}

package/esm/hooks/useRef.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRef.js","names":[],"sources":["../../src/hooks/useRef.ts"],"sourcesContent":["import React, {useRef, useMemo} from 'react'\n\n/**\n * There are some situations where we only want to create a new ref if one is not provided to a component\n * or hook as a prop. However, due to the `rules-of-hooks`, we cannot conditionally make a call to `React.useRef`\n * only in the situations where the ref is not provided as a prop.\n * This hook aims to encapsulate that logic, so the consumer doesn't need to be concerned with violating `rules-of-hooks`.\n * @param providedRef The ref to use - can be a RefObject, RefCallback (functional ref), null or undefined.\n * @type TRef The type of the RefObject which should be created.\n * @returns A RefObject that either uses the provided ref, wraps a functional ref, or creates a new one\n */\nexport function useProvidedRefOrCreate<TRef>(\n  providedRef?: React.RefObject<TRef> | React.RefCallback<TRef> | null,\n): React.RefObject<TRef> {\n  const createdRef = useRef<TRef | null>(null)\n  const wrapperRef = useRef<React.MutableRefObject<TRef | null> | null>(null)\n\n  const finalRef = useMemo(() => {\n    // Handle function refs\n    // We wrap it in a MutableRefObject to ensure we can set the current value\n    // and also call the callback with the latest value\n    if (typeof providedRef === 'function') {\n      if (!wrapperRef.current) {\n        let currentVal: TRef | null = null\n\n        wrapperRef.current = {\n          get current() {\n            return currentVal\n          },\n          set current(value: TRef | null) {\n            currentVal = value\n\n            providedRef(value)\n          },\n        }\n      }\n      return wrapperRef.current\n    }\n\n    wrapperRef.current = null\n\n    // Return the provided ref if it's a RefObject\n    if (providedRef && typeof providedRef === 'object' && providedRef.current !== undefined) {\n      return providedRef\n    }\n\n    // Return a new ref if it's neither a function nor a RefObject\n    return createdRef\n  }, [providedRef, createdRef])\n\n  return finalRef as React.RefObject<TRef>\n}\n"],"mappings":";;AAWA,SAAgB,EACd,GACuB;CACvB,IAAM,IAAa,EAAoB,KAAK,EACtC,IAAa,EAAmD,KAAK;AAmC3E,QAjCiB,QAAc;AAI7B,MAAI,OAAO,KAAgB,YAAY;AACrC,OAAI,CAAC,EAAW,SAAS;IACvB,IAAI,IAA0B;AAE9B,MAAW,UAAU;KACnB,IAAI,UAAU;AACZ,aAAO;;KAET,IAAI,QAAQ,GAAoB;AAG9B,MAFA,IAAa,GAEb,EAAY,EAAM;;KAErB;;AAEH,UAAO,EAAW;;AAWpB,SARA,EAAW,UAAU,MAGjB,KAAe,OAAO,KAAgB,YAAY,EAAY,YAAY,KAAA,IACrE,IAIF;IACN,CAAC,GAAa,EAAW,CAErB"}
+{"version":3,"file":"useRef.js","names":[],"sources":["../../src/hooks/useRef.ts"],"sourcesContent":["import React, {useRef, useMemo} from 'react'\n\n/**\n * There are some situations where we only want to create a new ref if one is not provided to a component\n * or hook as a prop. However, due to the `rules-of-hooks`, we cannot conditionally make a call to `React.useRef`\n * only in the situations where the ref is not provided as a prop.\n * This hook aims to encapsulate that logic, so the consumer doesn't need to be concerned with violating `rules-of-hooks`.\n * @param providedRef The ref to use - can be a RefObject, RefCallback (functional ref), null or undefined.\n * @type TRef The type of the RefObject which should be created.\n * @returns A RefObject that either uses the provided ref, wraps a functional ref, or creates a new one\n */\nexport function useProvidedRefOrCreate<TRef>(\n  providedRef?: React.RefObject<TRef> | React.RefCallback<TRef> | null,\n): React.RefObject<TRef> {\n  const createdRef = useRef<TRef | null>(null)\n  const wrapperRef = useRef<React.MutableRefObject<TRef | null> | null>(null)\n\n  const finalRef = useMemo(() => {\n    // Handle function refs\n    // We wrap it in a MutableRefObject to ensure we can set the current value\n    // and also call the callback with the latest value\n    if (typeof providedRef === 'function') {\n      if (!wrapperRef.current) {\n        let currentVal: TRef | null = null\n\n        wrapperRef.current = {\n          get current() {\n            return currentVal\n          },\n          set current(value: TRef | null) {\n            currentVal = value\n\n            providedRef(value)\n          },\n        }\n      }\n      return wrapperRef.current\n    }\n\n    wrapperRef.current = null\n\n    // Return the provided ref if it's a RefObject\n    if (providedRef && typeof providedRef === 'object' && providedRef.current !== undefined) {\n      return providedRef\n    }\n\n    // Return a new ref if it's neither a function nor a RefObject\n    return createdRef\n  }, [providedRef, createdRef])\n\n  return finalRef as React.RefObject<TRef>\n}\n"],"mappings":";;AAWA,SAAgB,EACd,GACuB;CACvB,IAAM,IAAa,EAAoB,IAAI,GACrC,IAAa,EAAmD,IAAI;CAmC1E,OAjCiB,QAAc;EAI7B,IAAI,OAAO,KAAgB,YAAY;GACrC,IAAI,CAAC,EAAW,SAAS;IACvB,IAAI,IAA0B;IAE9B,EAAW,UAAU;KACnB,IAAI,UAAU;MACZ,OAAO;KACT;KACA,IAAI,QAAQ,GAAoB;MAG9B,AAFA,IAAa,GAEb,EAAY,CAAK;KACnB;IACF;GACF;GACA,OAAO,EAAW;EACpB;EAUA,OARA,EAAW,UAAU,MAGjB,KAAe,OAAO,KAAgB,YAAY,EAAY,YAAY,KAAA,IACrE,IAIF;CACT,GAAG,CAAC,GAAa,CAAU,CAEpB;AACT"}

package/esm/hooks/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","names":[],"sources":["../../src/hooks/useResizeObserver.ts"],"sourcesContent":["import {RefObject, useEffect, useRef} from 'react'\n\nexport type ResizeObserverCallback = (entries: ResizeObserverEntry[]) => void\n\nexport interface ResizeObserverEntry {\n  contentRect: DOMRectReadOnly\n}\n\nexport function useResizeObserver<T extends HTMLElement>(\n  callback: ResizeObserverCallback,\n  target?: RefObject<T | null>,\n) {\n  const savedCallback = useRef(callback)\n\n  useEffect(() => {\n    savedCallback.current = callback\n  })\n\n  useEffect(() => {\n    const targetEl = target && 'current' in target ? target.current : document.documentElement\n    if (!targetEl) {\n      return\n    }\n\n    const observer = new ResizeObserver(entries => {\n      savedCallback.current(entries)\n    })\n\n    observer.observe(targetEl)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [target])\n}\n"],"mappings":";;AAQA,SAAgB,EACd,GACA,GACA;CACA,IAAM,IAAgB,EAAO,EAAS;AAMtC,CAJA,QAAgB;AACd,IAAc,UAAU;GACxB,EAEF,QAAgB;EACd,IAAM,IAAW,KAAU,aAAa,IAAS,EAAO,UAAU,SAAS;AAC3E,MAAI,CAAC,EACH;EAGF,IAAM,IAAW,IAAI,gBAAe,MAAW;AAC7C,KAAc,QAAQ,EAAQ;IAC9B;AAIF,SAFA,EAAS,QAAQ,EAAS,QAEb;AACX,KAAS,YAAY;;IAEtB,CAAC,EAAO,CAAC"}
+{"version":3,"file":"useResizeObserver.js","names":[],"sources":["../../src/hooks/useResizeObserver.ts"],"sourcesContent":["import {RefObject, useEffect, useRef} from 'react'\n\nexport type ResizeObserverCallback = (entries: ResizeObserverEntry[]) => void\n\nexport interface ResizeObserverEntry {\n  contentRect: DOMRectReadOnly\n}\n\nexport function useResizeObserver<T extends HTMLElement>(\n  callback: ResizeObserverCallback,\n  target?: RefObject<T | null>,\n) {\n  const savedCallback = useRef(callback)\n\n  useEffect(() => {\n    savedCallback.current = callback\n  })\n\n  useEffect(() => {\n    const targetEl = target && 'current' in target ? target.current : document.documentElement\n    if (!targetEl) {\n      return\n    }\n\n    const observer = new ResizeObserver(entries => {\n      savedCallback.current(entries)\n    })\n\n    observer.observe(targetEl)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [target])\n}\n"],"mappings":";;AAQA,SAAgB,EACd,GACA,GACA;CACA,IAAM,IAAgB,EAAO,CAAQ;CAMrC,AAJA,QAAgB;EACd,EAAc,UAAU;CAC1B,CAAC,GAED,QAAgB;EACd,IAAM,IAAW,KAAU,aAAa,IAAS,EAAO,UAAU,SAAS;EAC3E,IAAI,CAAC,GACH;EAGF,IAAM,IAAW,IAAI,gBAAe,MAAW;GAC7C,EAAc,QAAQ,CAAO;EAC/B,CAAC;EAID,OAFA,EAAS,QAAQ,CAAQ,SAEZ;GACX,EAAS,WAAW;EACtB;CACF,GAAG,CAAC,CAAM,CAAC;AACb"}

package/esm/hooks/useTabs.js

@@ -14,7 +14,7 @@ var i = ({ defaultTab: i, autoActivate: a = !0, orientation: o = "horizontal", o
 	}, [s]), f = n(/* @__PURE__ */ new Map()), p = t((e) => `tabs-${c}-tab-${e}`, [c]), m = t((e) => `tabs-${c}-panel-${e}`, [c]), h = t((e, t) => {
 		f.current.has(e) || (f.current.set(e, t), d((t) => ({
 			...t,
-			tabs: new Set([...t.tabs, e]),
+			tabs: /* @__PURE__ */ new Set([...t.tabs, e]),
 			activeTab: t.activeTab || e
 		})));
 	}, [d]), g = t((e) => {

package/esm/hooks/useTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTabs.js","names":[],"sources":["../../src/hooks/useTabs.ts"],"sourcesContent":["import {useCallback, useState, useRef, type KeyboardEvent, type MutableRefObject, type Ref} from 'react'\nimport {useId} from '../hooks/useId'\n\nexport type OnTabActivate = (id: string, activeTabRef?: HTMLElement) => void\n\ntype Orientation = 'horizontal' | 'vertical'\ntype TabId = `tabs-${string}-tab-${string}`\ntype TabPanelId = `tabs-${string}-panel-${string}`\n\nexport type UseTabsOptions = {\n  defaultTab?: string\n  autoActivate?: boolean\n  onTabActivate?: OnTabActivate\n  orientation?: Orientation\n}\n\nexport type TabState = {\n  activeTab: string | null\n  focusedTab: string | null\n  tabs: Set<string>\n}\n\ntype TabListProps = {\n  role: 'tablist'\n  'aria-orientation': Orientation\n}\n\ntype TabProps = {\n  role: 'tab'\n  id: TabId\n  'aria-controls': TabPanelId\n  'aria-selected': boolean\n  tabIndex: 0 | -1\n  onClick: () => void\n  onKeyDown: (event: KeyboardEvent) => void\n  onFocus: () => void\n  ref: (element: HTMLElement | null) => void\n}\n\ntype TabPanelProps = {\n  role: 'tabpanel'\n  id: TabPanelId\n  'aria-labelledby': TabId\n  hidden: boolean\n  tabIndex: 0\n}\n\ntype LabelOrLabelledBy = {label: string; labelledBy?: never} | {labelledBy: string; label?: never}\n\nexport type UseTabs = {\n  activeTab: string | null\n  focusedTab: string | null\n  activateTab: (id: string) => void\n  focusTab: (id: string) => void\n  getTabListProps: (props: LabelOrLabelledBy) => TabListProps\n  getTabProps: <T extends HTMLElement = HTMLElement>(id: string, externalRef?: Ref<T>) => TabProps\n  getTabPanelProps: (id: string) => TabPanelProps\n}\n\nexport const useTabs = ({\n  defaultTab,\n  autoActivate = true,\n  orientation = 'horizontal',\n  onTabActivate,\n}: UseTabsOptions = {}): UseTabs => {\n  const uniqueId = useId()\n  const [tabState, _setTabState] = useState<TabState>({\n    activeTab: defaultTab || null,\n    focusedTab: null,\n    tabs: new Set(),\n  })\n\n  const setTabState = useCallback(\n    (updater: (state: TabState) => TabState) => {\n      _setTabState(prev => {\n        const nextState = updater(prev)\n\n        // Only call onTabActivate when activeTab changes from one tab to another (not on mount)\n        if (nextState.activeTab && nextState.activeTab !== prev.activeTab && prev.activeTab !== null) {\n          onTabActivate?.(nextState.activeTab, tabRefs.current.get(nextState.activeTab))\n        }\n\n        return nextState\n      })\n    },\n    [onTabActivate],\n  )\n\n  // Refs to store tab elements for focus management\n  const tabRefs = useRef<Map<string, HTMLElement>>(new Map())\n\n  const getTabId = useCallback<(id: string) => TabId>(id => `tabs-${uniqueId}-tab-${id}`, [uniqueId])\n  const getPanelId = useCallback<(id: string) => TabPanelId>(id => `tabs-${uniqueId}-panel-${id}`, [uniqueId])\n\n  const registerTab = useCallback(\n    (id: string, element: HTMLElement) => {\n      if (tabRefs.current.has(id)) {\n        return\n      }\n\n      tabRefs.current.set(id, element)\n      setTabState(prev => ({\n        ...prev,\n        tabs: new Set([...prev.tabs, id]),\n        activeTab: prev.activeTab || id, // Set as active if no active tab\n      }))\n    },\n    [setTabState],\n  )\n\n  const focusTab = useCallback((id: string) => {\n    tabRefs.current.get(id)?.focus()\n  }, [])\n\n  const activateTab = useCallback(\n    (id: string) => {\n      setTabState(prev => ({\n        ...prev,\n        activeTab: id,\n        focusedTab: id,\n      }))\n    },\n    [setTabState],\n  )\n\n  const getNextTabIndex = useCallback((index: number, tabs: string[]) => (index + 1) % tabs.length, [])\n  const getPrevTabIndex = useCallback((index: number, tabs: string[]) => (index - 1 + tabs.length) % tabs.length, [])\n\n  const onTabKeyDown = useCallback(\n    (event: KeyboardEvent, id: string) => {\n      const tabs = [...tabState.tabs]\n      const currentIndex = tabs.indexOf(id)\n\n      switch (true) {\n        case event.key === 'ArrowLeft' && orientation === 'horizontal':\n        case event.key === 'ArrowUp' && orientation === 'vertical': {\n          event.preventDefault()\n          const prevIndex = getPrevTabIndex(currentIndex, tabs)\n          const prevTab = tabs[prevIndex]\n          focusTab(prevTab)\n          if (autoActivate) activateTab(prevTab)\n          break\n        }\n\n        case event.key === 'ArrowRight' && orientation === 'horizontal':\n        case event.key === 'ArrowDown' && orientation === 'vertical': {\n          event.preventDefault()\n          const nextIndex = getNextTabIndex(currentIndex, tabs)\n          const nextTab = tabs[nextIndex]\n          focusTab(nextTab)\n          if (autoActivate) activateTab(nextTab)\n          break\n        }\n\n        case event.key === 'Home': {\n          event.preventDefault()\n          focusTab(tabs[0])\n          if (autoActivate) activateTab(tabs[0])\n          break\n        }\n\n        case event.key === 'End': {\n          event.preventDefault()\n          focusTab(tabs[tabs.length - 1])\n          if (autoActivate) activateTab(tabs[tabs.length - 1])\n          break\n        }\n\n        case event.key === ' ':\n        case event.key === 'Enter': {\n          event.preventDefault()\n          if (!autoActivate) activateTab(id)\n          break\n        }\n      }\n    },\n    [tabState.tabs, orientation, getPrevTabIndex, focusTab, autoActivate, activateTab, getNextTabIndex],\n  )\n\n  const onTabClick = useCallback(\n    (id: string) => {\n      activateTab(id)\n    },\n    [activateTab],\n  )\n\n  const onTabFocus = useCallback(\n    (id: string) => {\n      setTabState(prev => {\n        if (prev.focusedTab === id) {\n          return prev\n        }\n        return {\n          ...prev,\n          focusedTab: id,\n        }\n      })\n    },\n    [setTabState],\n  )\n\n  const getTabListProps = useCallback<UseTabs['getTabListProps']>(\n    ({label, labelledBy}) => ({\n      role: 'tablist',\n      'aria-orientation': orientation,\n      ...(label && {'aria-label': label}),\n      ...(labelledBy && {'aria-labelledby': labelledBy}),\n    }),\n    [orientation],\n  )\n\n  const getTabProps = useCallback<UseTabs['getTabProps']>(\n    <T extends HTMLElement = HTMLElement>(id: string, externalRef?: Ref<T>) => ({\n      role: 'tab',\n      id: getTabId(id),\n      'aria-controls': getPanelId(id),\n      'aria-selected': id === tabState.activeTab,\n      tabIndex: id === tabState.activeTab ? 0 : -1,\n      onClick: () => onTabClick(id),\n      onKeyDown: (event: KeyboardEvent) => onTabKeyDown(event, id),\n      onFocus: () => onTabFocus(id),\n      ref: (element: HTMLElement | null) => {\n        if (element) registerTab(id, element)\n\n        if (!externalRef) return\n        if (typeof externalRef === 'function') {\n          externalRef(element as T | null)\n          return\n        }\n        if ('current' in externalRef) {\n          ;(externalRef as MutableRefObject<T | null>).current = element as T | null\n          return\n        }\n      },\n    }),\n    [tabState.activeTab, getTabId, getPanelId, onTabClick, onTabKeyDown, onTabFocus, registerTab],\n  )\n\n  const getTabPanelProps = useCallback<UseTabs['getTabPanelProps']>(\n    (id: string) => ({\n      role: 'tabpanel',\n      id: getPanelId(id),\n      'aria-labelledby': getTabId(id),\n      hidden: id !== tabState.activeTab,\n      tabIndex: 0,\n    }),\n    [tabState.activeTab, getPanelId, getTabId],\n  )\n\n  return {\n    activeTab: tabState.activeTab,\n    focusedTab: tabState.focusedTab,\n\n    activateTab,\n    focusTab,\n\n    getTabListProps,\n    getTabProps,\n    getTabPanelProps,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"useTabs.js","names":[],"sources":["../../src/hooks/useTabs.ts"],"sourcesContent":["import {useCallback, useState, useRef, type KeyboardEvent, type MutableRefObject, type Ref} from 'react'\nimport {useId} from '../hooks/useId'\n\nexport type OnTabActivate = (id: string, activeTabRef?: HTMLElement) => void\n\ntype Orientation = 'horizontal' | 'vertical'\ntype TabId = `tabs-${string}-tab-${string}`\ntype TabPanelId = `tabs-${string}-panel-${string}`\n\nexport type UseTabsOptions = {\n  defaultTab?: string\n  autoActivate?: boolean\n  onTabActivate?: OnTabActivate\n  orientation?: Orientation\n}\n\nexport type TabState = {\n  activeTab: string | null\n  focusedTab: string | null\n  tabs: Set<string>\n}\n\ntype TabListProps = {\n  role: 'tablist'\n  'aria-orientation': Orientation\n}\n\ntype TabProps = {\n  role: 'tab'\n  id: TabId\n  'aria-controls': TabPanelId\n  'aria-selected': boolean\n  tabIndex: 0 | -1\n  onClick: () => void\n  onKeyDown: (event: KeyboardEvent) => void\n  onFocus: () => void\n  ref: (element: HTMLElement | null) => void\n}\n\ntype TabPanelProps = {\n  role: 'tabpanel'\n  id: TabPanelId\n  'aria-labelledby': TabId\n  hidden: boolean\n  tabIndex: 0\n}\n\ntype LabelOrLabelledBy = {label: string; labelledBy?: never} | {labelledBy: string; label?: never}\n\nexport type UseTabs = {\n  activeTab: string | null\n  focusedTab: string | null\n  activateTab: (id: string) => void\n  focusTab: (id: string) => void\n  getTabListProps: (props: LabelOrLabelledBy) => TabListProps\n  getTabProps: <T extends HTMLElement = HTMLElement>(id: string, externalRef?: Ref<T>) => TabProps\n  getTabPanelProps: (id: string) => TabPanelProps\n}\n\nexport const useTabs = ({\n  defaultTab,\n  autoActivate = true,\n  orientation = 'horizontal',\n  onTabActivate,\n}: UseTabsOptions = {}): UseTabs => {\n  const uniqueId = useId()\n  const [tabState, _setTabState] = useState<TabState>({\n    activeTab: defaultTab || null,\n    focusedTab: null,\n    tabs: new Set(),\n  })\n\n  const setTabState = useCallback(\n    (updater: (state: TabState) => TabState) => {\n      _setTabState(prev => {\n        const nextState = updater(prev)\n\n        // Only call onTabActivate when activeTab changes from one tab to another (not on mount)\n        if (nextState.activeTab && nextState.activeTab !== prev.activeTab && prev.activeTab !== null) {\n          onTabActivate?.(nextState.activeTab, tabRefs.current.get(nextState.activeTab))\n        }\n\n        return nextState\n      })\n    },\n    [onTabActivate],\n  )\n\n  // Refs to store tab elements for focus management\n  const tabRefs = useRef<Map<string, HTMLElement>>(new Map())\n\n  const getTabId = useCallback<(id: string) => TabId>(id => `tabs-${uniqueId}-tab-${id}`, [uniqueId])\n  const getPanelId = useCallback<(id: string) => TabPanelId>(id => `tabs-${uniqueId}-panel-${id}`, [uniqueId])\n\n  const registerTab = useCallback(\n    (id: string, element: HTMLElement) => {\n      if (tabRefs.current.has(id)) {\n        return\n      }\n\n      tabRefs.current.set(id, element)\n      setTabState(prev => ({\n        ...prev,\n        tabs: new Set([...prev.tabs, id]),\n        activeTab: prev.activeTab || id, // Set as active if no active tab\n      }))\n    },\n    [setTabState],\n  )\n\n  const focusTab = useCallback((id: string) => {\n    tabRefs.current.get(id)?.focus()\n  }, [])\n\n  const activateTab = useCallback(\n    (id: string) => {\n      setTabState(prev => ({\n        ...prev,\n        activeTab: id,\n        focusedTab: id,\n      }))\n    },\n    [setTabState],\n  )\n\n  const getNextTabIndex = useCallback((index: number, tabs: string[]) => (index + 1) % tabs.length, [])\n  const getPrevTabIndex = useCallback((index: number, tabs: string[]) => (index - 1 + tabs.length) % tabs.length, [])\n\n  const onTabKeyDown = useCallback(\n    (event: KeyboardEvent, id: string) => {\n      const tabs = [...tabState.tabs]\n      const currentIndex = tabs.indexOf(id)\n\n      switch (true) {\n        case event.key === 'ArrowLeft' && orientation === 'horizontal':\n        case event.key === 'ArrowUp' && orientation === 'vertical': {\n          event.preventDefault()\n          const prevIndex = getPrevTabIndex(currentIndex, tabs)\n          const prevTab = tabs[prevIndex]\n          focusTab(prevTab)\n          if (autoActivate) activateTab(prevTab)\n          break\n        }\n\n        case event.key === 'ArrowRight' && orientation === 'horizontal':\n        case event.key === 'ArrowDown' && orientation === 'vertical': {\n          event.preventDefault()\n          const nextIndex = getNextTabIndex(currentIndex, tabs)\n          const nextTab = tabs[nextIndex]\n          focusTab(nextTab)\n          if (autoActivate) activateTab(nextTab)\n          break\n        }\n\n        case event.key === 'Home': {\n          event.preventDefault()\n          focusTab(tabs[0])\n          if (autoActivate) activateTab(tabs[0])\n          break\n        }\n\n        case event.key === 'End': {\n          event.preventDefault()\n          focusTab(tabs[tabs.length - 1])\n          if (autoActivate) activateTab(tabs[tabs.length - 1])\n          break\n        }\n\n        case event.key === ' ':\n        case event.key === 'Enter': {\n          event.preventDefault()\n          if (!autoActivate) activateTab(id)\n          break\n        }\n      }\n    },\n    [tabState.tabs, orientation, getPrevTabIndex, focusTab, autoActivate, activateTab, getNextTabIndex],\n  )\n\n  const onTabClick = useCallback(\n    (id: string) => {\n      activateTab(id)\n    },\n    [activateTab],\n  )\n\n  const onTabFocus = useCallback(\n    (id: string) => {\n      setTabState(prev => {\n        if (prev.focusedTab === id) {\n          return prev\n        }\n        return {\n          ...prev,\n          focusedTab: id,\n        }\n      })\n    },\n    [setTabState],\n  )\n\n  const getTabListProps = useCallback<UseTabs['getTabListProps']>(\n    ({label, labelledBy}) => ({\n      role: 'tablist',\n      'aria-orientation': orientation,\n      ...(label && {'aria-label': label}),\n      ...(labelledBy && {'aria-labelledby': labelledBy}),\n    }),\n    [orientation],\n  )\n\n  const getTabProps = useCallback<UseTabs['getTabProps']>(\n    <T extends HTMLElement = HTMLElement>(id: string, externalRef?: Ref<T>) => ({\n      role: 'tab',\n      id: getTabId(id),\n      'aria-controls': getPanelId(id),\n      'aria-selected': id === tabState.activeTab,\n      tabIndex: id === tabState.activeTab ? 0 : -1,\n      onClick: () => onTabClick(id),\n      onKeyDown: (event: KeyboardEvent) => onTabKeyDown(event, id),\n      onFocus: () => onTabFocus(id),\n      ref: (element: HTMLElement | null) => {\n        if (element) registerTab(id, element)\n\n        if (!externalRef) return\n        if (typeof externalRef === 'function') {\n          externalRef(element as T | null)\n          return\n        }\n        if ('current' in externalRef) {\n          ;(externalRef as MutableRefObject<T | null>).current = element as T | null\n          return\n        }\n      },\n    }),\n    [tabState.activeTab, getTabId, getPanelId, onTabClick, onTabKeyDown, onTabFocus, registerTab],\n  )\n\n  const getTabPanelProps = useCallback<UseTabs['getTabPanelProps']>(\n    (id: string) => ({\n      role: 'tabpanel',\n      id: getPanelId(id),\n      'aria-labelledby': getTabId(id),\n      hidden: id !== tabState.activeTab,\n      tabIndex: 0,\n    }),\n    [tabState.activeTab, getPanelId, getTabId],\n  )\n\n  return {\n    activeTab: tabState.activeTab,\n    focusedTab: tabState.focusedTab,\n\n    activateTab,\n    focusTab,\n\n    getTabListProps,\n    getTabProps,\n    getTabPanelProps,\n  }\n}\n"],"mappings":"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"}