@plexui/ui 0.2.0

package/dist/es/components/TagInput/TagInput.module.css

@@ -0,0 +1,252 @@
+@layer components {.Container {
+  position: relative;
+  overflow: hidden;
+
+  /* The height is the sum of all rows plus spacing, which is N+1 to account for the top spacing for the first row */
+
+  /* prettier-ignore */
+  min-height: calc(
+        (var(--min-rows) * var(--tag-input-height)) + ((var(--min-rows) + 1) * var(--tag-input-tag-spacing))
+    );
+  padding: var(--tag-input-tag-spacing);
+  border-radius: var(--radius-md);
+  box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
+  cursor: text;
+  outline: 0;
+  transition: box-shadow 0.15s ease;
+
+  /* =============================================
+    Sizes
+    ============================================= */
+}
+
+  .Container[data-disabled] {
+    pointer-events: none;
+  }
+    @media (hover: hover) and (pointer: fine) {.Container:not([data-disabled]):hover, :where([data-theme="light"]) .Container:not([data-disabled]):hover {
+box-shadow: 0 0 0 1px var(--gray-300) inset;
+}:where([data-theme="dark"]) .Container:not([data-disabled]):hover {
+box-shadow: 0 0 0 1px var(--gray-500) inset;
+}
+}
+
+    .Container:not([data-disabled])[data-focused] {
+      box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset;
+    }
+
+  .Container[data-empty] {
+    padding: var(--tag-input-tag-spacing) 12px;
+  }
+
+  /* 20 + 6 + 6 = 32 */
+  .Container:where([data-size="md"]) {
+    --tag-input-font-size: var(--control-font-size-md);
+    --tag-input-height: 20px;
+    --tag-input-tag-spacing: 6px;
+  }
+
+  /* 24 + 6 + 6 = 36 */
+  .Container:where([data-size="lg"]) {
+    --tag-input-font-size: var(--control-font-size-md);
+    --tag-input-height: 24px;
+    --tag-input-tag-spacing: 6px;
+  }
+
+  /* 24 + 8 + 8 = 40 */
+  .Container:where([data-size="xl"]) {
+    --tag-input-font-size: var(--control-font-size-lg);
+    --tag-input-height: 24px;
+    --tag-input-tag-spacing: 8px;
+  }
+
+  /* 28 + 8 + 8 = 44 */
+  .Container:where([data-size="2xl"]) {
+    --tag-input-font-size: var(--control-font-size-lg);
+    --tag-input-height: 28px;
+    --tag-input-tag-spacing: 8px;
+  }
+
+  /* 32 + 8 + 8 = 48 */
+  .Container:where([data-size="3xl"]) {
+    --tag-input-font-size: var(--control-font-size-lg);
+    --tag-input-height: 32px;
+    --tag-input-tag-spacing: 8px;
+  }.TagInput {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--tag-input-tag-spacing);
+}.Tag {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  height: var(--tag-input-height);
+  padding: 4px 4px 4px 8px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  line-height: 1.4;
+  outline: none;
+  transition: background-color 0.15s ease;
+}.Tag, :where([data-theme="light"]) .Tag {
+background-color: var(--color-background-secondary-soft);
+color: var(--color-text-secondary-soft);
+}:where([data-theme="dark"]) .Tag {
+background-color: var(--color-background-secondary-solid);
+color: var(--color-text-secondary-solid);
+}
+
+  @media (hover: hover) and (pointer: fine) {.Tag:hover, :where([data-theme="light"]) .Tag:hover {
+background-color: var(--color-background-secondary-soft-hover);
+}:where([data-theme="dark"]) .Tag:hover {
+background-color: var(--color-background-secondary-solid-hover);
+}
+}
+
+  .Tag:focus, :where([data-theme="light"]) .Tag:focus {
+background-color: var(--color-background-secondary-soft-hover);
+}
+
+  :where([data-theme="dark"]) .Tag:focus {
+background-color: var(--color-background-secondary-solid-hover);
+}
+
+  .Container[data-disabled] .Tag {
+    color: var(--color-text-tertiary);
+  }
+
+  .Tag[data-invalid] {
+    background-color: var(--color-background-danger-soft);
+    color: var(--color-text-danger-soft);
+  }
+
+    @media (hover: hover) and (pointer: fine) {.Tag[data-invalid]:hover {
+      background-color: var(--color-background-danger-soft-hover);
+}
+}
+
+    .Tag[data-invalid]:focus {
+      background-color: var(--color-background-danger-soft-hover);
+    }
+
+  .Tag[data-duplicate] {
+    animation: shake 0.5s ease;
+  }
+
+  .Tag .TagRemove {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-left: 4px;
+    color: inherit;
+    opacity: 0.7;
+    transition: opacity 0.15s ease;
+  }
+
+    @media (hover: hover) and (pointer: fine) {.Tag .TagRemove:hover {
+      opacity: 1;
+}
+}.TagValue {
+  font-size: var(--tag-input-font-size);
+  white-space: nowrap;
+}.InputContainer {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  max-width: 100%;
+}.InputWrapper {
+  overflow: hidden;
+  width: 100%;
+}.InputMeasure {
+  position: absolute;
+  font-size: var(--tag-input-font-size);
+  visibility: hidden;
+  white-space: nowrap;
+}.Input {
+  display: block;
+  min-width: 20px;
+  height: var(--tag-input-height);
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+  color: var(--color-text);
+  font-size: var(--tag-input-font-size);
+  line-height: 1.4;
+  white-space: nowrap;
+
+  /* Prevent auto-fill coloring */
+}
+
+  .Input:focus {
+    outline: 0;
+  }
+
+  .Input::-moz-placeholder {
+    color: var(--color-text-tertiary);
+  }
+
+  .Input::placeholder {
+    color: var(--color-text-tertiary);
+  }
+
+  .Input:disabled {
+    color: var(--color-text-tertiary);
+  }
+  .Input:-webkit-autofill, .Input:-webkit-autofill:focus, .Input:-webkit-autofill:hover {
+    /*
+     * Prevent all color changes by delaying their effect for a very long time
+     * We cannot beat the specificity of user-agent stylesheet declarations, so we must delay them.
+     */
+    color: var(--color-text) !important;
+    -webkit-text-fill-color: var(--color-text) !important;
+    -webkit-transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+    transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+}
+  .Input:-webkit-autofill-and-obscured, .Input:-webkit-autofill-strong-password, .Input:-webkit-autofill-strong-password-viewable {
+    /*
+     * Prevent all color changes by delaying their effect for a very long time
+     * We cannot beat the specificity of user-agent stylesheet declarations, so we must delay them.
+     */
+    color: var(--color-text) !important;
+    -webkit-text-fill-color: var(--color-text) !important;
+    -webkit-transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+    transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+}.Limit {
+  width: 100%;
+  margin-top: 2px;
+  color: var(--color-text);
+  font-size: var(--font-text-xs-size);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+
+  20%,
+  60% {
+    transform: translateX(-5px);
+  }
+
+  40%,
+  80% {
+    transform: translateX(5px);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+}

package/dist/es/components/TagInput/index.js

@@ -0,0 +1,2 @@
+export { TagInput } from "./TagInput";
+//# sourceMappingURL=index.js.map

package/dist/es/components/TagInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TagInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAgC,MAAM,YAAY,CAAA","sourcesContent":["export { TagInput, type Tag, type TagInputProps } from \"./TagInput\"\n"]}

package/dist/es/components/TextLink/TextLink.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import {} from "react";
+import { useLinkComponent } from "../PlexUIProvider/internal";
+import s from "./TextLink.module.css";
+export const TextLink = ((props) => {
+    const { children, primary = false, underline = !primary, className, target, forceExternal, as: OverrideComponent, href, to, ...restProps } = props;
+    const isExternal = forceExternal ?? /^https?:\/\//.test(href ?? to ?? "");
+    const DefaultComponent = useLinkComponent();
+    const Component = OverrideComponent || (isExternal ? "a" : DefaultComponent);
+    const sharedProps = {
+        ...restProps,
+        "className": clsx(s.TextLink, className),
+        "data-primary": primary ? "" : undefined,
+        "data-underline": underline ? "" : undefined,
+    };
+    // Visible link, but non-anchor element. Useful if you want a visual link
+    // that cannot be naturally meta-clicked (e.g., inadvertently open a new tab)
+    if (!href && !to) {
+        return (
+        // the forwardedRef is lying here, but should be fine. :innocent:
+        _jsx("span", { ...sharedProps, role: "button", children: children }));
+    }
+    const linkProps = {
+        ...(isExternal
+            ? { target: "_blank", rel: "noopener noreferrer", href: href ?? to }
+            : { href, to }),
+        ...sharedProps,
+    };
+    return _jsx(Component, { ...linkProps, children: children });
+});
+//# sourceMappingURL=TextLink.js.map

package/dist/es/components/TextLink/TextLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextLink.js","sourceRoot":"","sources":["../../../../src/components/TextLink/TextLink.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAA2D,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,CAAC,MAAM,uBAAuB,CAAA;AAyCrC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,CACvB,KAAgF,EAChF,EAAE;IACF,MAAM,EACJ,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,CAAC,OAAO,EACpB,SAAS,EACT,MAAM,EACN,aAAa,EACb,EAAE,EAAE,iBAAiB,EACrB,IAAI,EACJ,EAAE,EACF,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IAET,MAAM,UAAU,GAAG,aAAa,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;IACzE,MAAM,gBAAgB,GAAG,gBAAgB,EAAE,CAAA;IAC3C,MAAM,SAAS,GAAG,iBAAiB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAA;IAE5E,MAAM,WAAW,GAAG;QAClB,GAAG,SAAS;QACZ,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC;QACxC,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;QACxC,gBAAgB,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;KAC7C,CAAA;IAED,yEAAyE;IACzE,6EAA6E;IAC7E,IAAI,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC;QACjB,OAAO;QACL,iEAAiE;QACjE,kBAAU,WAAW,EAAE,IAAI,EAAC,QAAQ,YACjC,QAAQ,GACJ,CACR,CAAA;IACH,CAAC;IAED,MAAM,SAAS,GAAG;QAChB,GAAG,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,qBAAqB,EAAE,IAAI,EAAE,IAAI,IAAI,EAAE,EAAE;YACpE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;QACjB,GAAG,WAAW;KACf,CAAA;IAED,OAAO,KAAC,SAAS,OAAK,SAAS,YAAG,QAAQ,GAAa,CAAA;AACzD,CAAC,CAAa,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ComponentProps, type ComponentType, type ReactNode } from \"react\"\nimport { useLinkComponent } from \"../PlexUIProvider/internal\"\nimport s from \"./TextLink.module.css\"\n\nexport type TextLinkProps = Omit<\n  React.AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"href\" | \"children\"\n> & {\n  /** Content rendered inside the Link */\n  children: React.ReactNode\n  /**\n   * Applies a primary color to the link and removes the default `underline`.\n   * @default false\n   */\n  primary?: boolean\n  /**\n   * Apply `text-decoration: underline` to the Link\n   * @default true\n   */\n  underline?: boolean\n  /** Force external link behavior, which is automatically detected based on the URL. */\n  forceExternal?: boolean\n}\n\ntype MakeOptional<P, K extends keyof P> = Omit<P, K> & Partial<Pick<P, Extract<keyof P, K>>>\n\ntype TextLink = <\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  T extends ComponentType<any> | \"a\" = PlexUI.LinkComponent,\n>(\n  props: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> &\n    TextLinkProps & {\n      /**\n       * Override the default component used for the link. This is useful for\n       * using a routing library, or SSR rendering.\n       * purposes.\n       *\n       * @default 'a'\n       */\n      as?: T\n    } & MakeOptional<ComponentProps<T>, \"href\" | \"to\">,\n) => ReactNode\n\nexport const TextLink = ((\n  props: TextLinkProps & { href?: string; to?: string; as?: PlexUI.LinkComponent },\n) => {\n  const {\n    children,\n    primary = false,\n    underline = !primary,\n    className,\n    target,\n    forceExternal,\n    as: OverrideComponent,\n    href,\n    to,\n    ...restProps\n  } = props\n\n  const isExternal = forceExternal ?? /^https?:\\/\\//.test(href ?? to ?? \"\")\n  const DefaultComponent = useLinkComponent()\n  const Component = OverrideComponent || (isExternal ? \"a\" : DefaultComponent)\n\n  const sharedProps = {\n    ...restProps,\n    \"className\": clsx(s.TextLink, className),\n    \"data-primary\": primary ? \"\" : undefined,\n    \"data-underline\": underline ? \"\" : undefined,\n  }\n\n  // Visible link, but non-anchor element. Useful if you want a visual link\n  // that cannot be naturally meta-clicked (e.g., inadvertently open a new tab)\n  if (!href && !to) {\n    return (\n      // the forwardedRef is lying here, but should be fine. :innocent:\n      <span {...sharedProps} role=\"button\">\n        {children}\n      </span>\n    )\n  }\n\n  const linkProps = {\n    ...(isExternal\n      ? { target: \"_blank\", rel: \"noopener noreferrer\", href: href ?? to }\n      : { href, to }),\n    ...sharedProps,\n  }\n\n  return <Component {...linkProps}>{children}</Component>\n}) as TextLink\n"]}

package/dist/es/components/TextLink/TextLink.module.css

@@ -0,0 +1,50 @@
+@layer components {.TextLink {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--link-gap);
+  /* Used to round the focus ring */
+  border-radius: var(--link-radius);
+  color: currentcolor;
+  cursor: pointer;
+  font-weight: var(--link-font-weight);
+  overflow-wrap: anywhere;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: opacity, color, box-shadow, text-decoration-color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  @media (hover: hover) and (pointer: fine) {.TextLink:hover {
+    color: color-mix(in oklab, currentcolor 80%, transparent);
+}
+
+    /* stylelint-disable-next-line */
+    :global(.text-secondary) .TextLink:hover {
+      color: var(--color-text);
+    }
+
+    /* stylelint-disable-next-line */
+    :global(.text-tertiary) .TextLink:hover {
+      color: var(--color-text-secondary);
+    }
+}
+
+  .TextLink:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 1px;
+  }
+
+  .TextLink[data-underline] {
+    text-decoration: underline;
+    text-decoration-color: color-mix(in oklab, currentcolor 70%, transparent);
+    text-underline-offset: var(--link-underline-decoration-offset);
+  }
+
+  .TextLink[data-primary] {
+    color: var(--link-primary-text-color);
+  }
+
+    @media (hover: hover) and (pointer: fine) {.TextLink[data-primary]:hover {
+      color: var(--link-primary-text-color-hover);
+}
+}
+}

package/dist/es/components/TextLink/index.js

@@ -0,0 +1,2 @@
+export { TextLink } from "./TextLink";
+//# sourceMappingURL=index.js.map

package/dist/es/components/TextLink/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TextLink/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA","sourcesContent":["export { TextLink } from \"./TextLink\"\n"]}

package/dist/es/components/Textarea/Textarea.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { mergeRefs } from "react-merge-refs";
+import { toCssVariables } from "../../lib/helpers";
+import {} from "../../types";
+import s from "./Textarea.module.css";
+export const Textarea = (props) => {
+    const textAreaRef = useRef(null);
+    const inputIdSuffix = useId();
+    // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching
+    // Allow user to override this for connecting to labels.
+    const onePasswordPreventionId = `search-ui-input-${inputIdSuffix}`;
+    const { id, name, variant = "outline", size = "md", gutterSize, className, autoComplete, disabled = false, readOnly = false, invalid = false, 
+    // Default to `true` when presence of `name`
+    allowAutofillExtensions = !!name, onFocus, onBlur, onAnimationStart, onAutofill, autoSelect, rows = 3, maxRows, autoResize, ref, onChange, ...restProps } = props;
+    const [focused, setFocused] = useState(false);
+    const computedMaxRows = autoResize ? Math.max(maxRows ?? 10, rows) : rows;
+    useEffect(() => {
+        if (autoSelect) {
+            textAreaRef.current?.select();
+        }
+    }, [autoSelect]);
+    const handleAnimationStart = (evt) => {
+        onAnimationStart?.(evt);
+        if (evt.animationName === "native-autofill-in") {
+            onAutofill?.();
+        }
+    };
+    const autosizeTextarea = useCallback(() => {
+        if (!autoResize || !textAreaRef.current || computedMaxRows === undefined)
+            return;
+        textAreaRef.current.style.height = "0px";
+        const scrollHeight = textAreaRef.current.scrollHeight;
+        textAreaRef.current.style.height = scrollHeight + "px";
+    }, [autoResize, computedMaxRows]);
+    // Resize if value changes outside of user input - e.g. form reset
+    useEffect(() => {
+        autosizeTextarea();
+    }, [props.value, rows, autosizeTextarea]);
+    return (_jsx("div", { className: clsx(s.Container, className), "data-variant": variant, "data-size": size, "data-gutter-size": gutterSize, "data-focused": focused, "data-disabled": disabled ? "" : undefined, "data-readonly": readOnly ? "" : undefined, "data-invalid": invalid ? "" : undefined, style: toCssVariables({
+            "textarea-min-rows": `${rows}`,
+            "textarea-max-rows": `${computedMaxRows}`,
+        }), children: _jsx("textarea", { ...restProps, onChange: (evt) => {
+                onChange?.(evt);
+                autosizeTextarea();
+            }, ref: mergeRefs([textAreaRef, ref]), id: id || (allowAutofillExtensions ? undefined : onePasswordPreventionId), className: s.Textarea, name: name, readOnly: readOnly, disabled: disabled, rows: rows, onFocus: (evt) => {
+                setFocused(true);
+                onFocus?.(evt);
+            }, onBlur: (evt) => {
+                setFocused(false);
+                onBlur?.(evt);
+            }, onAnimationStart: handleAnimationStart, "data-lpignore": allowAutofillExtensions ? undefined : true, "data-1p-ignore": allowAutofillExtensions ? undefined : true }) }));
+};
+//# sourceMappingURL=Textarea.js.map

package/dist/es/components/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\nimport { toCssVariables } from \"../../lib/helpers\"\nimport { type ControlSize, type Sizes, type Variants } from \"../../types\"\nimport s from \"./Textarea.module.css\"\n\nexport type TextareaProps = {\n  /**\n   * Visual style of the textarea\n   * @default outline\n   */\n  variant?: Variants<\"outline\" | \"soft\">\n  /**\n   * Controls the size of the textarea\n   *\n   * | 3xs     | 2xs     | xs      | sm      | md      | lg      | xl      | 2xl     | 3xl     |\n   * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |\n   * | `22px`  | `24px`  | `26px`  | `28px`  | `32px`  | `36px`  | `40px`  | `44px`  | `48px`  |\n   *\n   * @default md\n   */\n  size?: ControlSize\n  /**\n   * Controls gutter on the edges of the textarea, defaults to value from `size`.\n   *\n   * | 2xs    | xs     | sm     | md     | lg     | xl     |\n   * | ------ | ------ | ------ | ------ | ------ | ------ |\n   * | `6px`  | `8px`  | `10px` | `12px` | `14px` | `16px` |\n   */\n  gutterSize?: Sizes<\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">\n  /**\n   * Disables the textarea visually and from interactions\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Mark the textarea as invalid\n   * @default false\n   */\n  invalid?: boolean\n  /**\n   * Allow autofill extensions to appear in the textarea\n   * @default false\n   */\n  allowAutofillExtensions?: boolean\n  /**\n   * Select all contents of the textarea when mounted.\n   * @default false\n   */\n  autoSelect?: boolean\n  /** Callback invoked when the textarea is autofilled by the browser */\n  onAutofill?: () => void\n  /**\n   * Default number of rows to display\n   * @default 3\n   */\n  rows?: number\n  /**\n   * Automatically adjust the height of the textarea based on its contents.\n   * @default false\n   */\n  autoResize?: boolean\n  /**\n   * Maximum number of rows that can be displayed when autoResize is enabled.\n   * @default Math.max(rows, 10)\n   */\n  maxRows?: number\n  /** Ref for the textarea */\n  ref?: React.Ref<HTMLTextAreaElement | null>\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"disabled\" | \"size\">\n\nexport const Textarea = (props: TextareaProps) => {\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null)\n  const inputIdSuffix = useId()\n  // Prevent 1Password from appearing: 1Password won't display if it thinks this field is for searching\n  // Allow user to override this for connecting to labels.\n  const onePasswordPreventionId = `search-ui-input-${inputIdSuffix}`\n  const {\n    id,\n    name,\n    variant = \"outline\",\n    size = \"md\",\n    gutterSize,\n    className,\n    autoComplete,\n    disabled = false,\n    readOnly = false,\n    invalid = false,\n    // Default to `true` when presence of `name`\n    allowAutofillExtensions = !!name,\n    onFocus,\n    onBlur,\n    onAnimationStart,\n    onAutofill,\n    autoSelect,\n    rows = 3,\n    maxRows,\n    autoResize,\n    ref,\n    onChange,\n    ...restProps\n  } = props\n\n  const [focused, setFocused] = useState<boolean>(false)\n  const computedMaxRows = autoResize ? Math.max(maxRows ?? 10, rows) : rows\n\n  useEffect(() => {\n    if (autoSelect) {\n      textAreaRef.current?.select()\n    }\n  }, [autoSelect])\n\n  const handleAnimationStart = (evt: React.AnimationEvent<HTMLTextAreaElement>) => {\n    onAnimationStart?.(evt)\n    if (evt.animationName === \"native-autofill-in\") {\n      onAutofill?.()\n    }\n  }\n\n  const autosizeTextarea = useCallback(() => {\n    if (!autoResize || !textAreaRef.current || computedMaxRows === undefined) return\n    textAreaRef.current.style.height = \"0px\"\n    const scrollHeight = textAreaRef.current.scrollHeight\n    textAreaRef.current.style.height = scrollHeight + \"px\"\n  }, [autoResize, computedMaxRows])\n\n  // Resize if value changes outside of user input - e.g. form reset\n  useEffect(() => {\n    autosizeTextarea()\n  }, [props.value, rows, autosizeTextarea])\n\n  return (\n    <div\n      className={clsx(s.Container, className)}\n      data-variant={variant}\n      data-size={size}\n      data-gutter-size={gutterSize}\n      data-focused={focused}\n      data-disabled={disabled ? \"\" : undefined}\n      data-readonly={readOnly ? \"\" : undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      style={toCssVariables({\n        \"textarea-min-rows\": `${rows}`,\n        \"textarea-max-rows\": `${computedMaxRows}`,\n      })}\n    >\n      <textarea\n        {...restProps}\n        onChange={(evt) => {\n          onChange?.(evt)\n          autosizeTextarea()\n        }}\n        ref={mergeRefs([textAreaRef, ref])}\n        id={id || (allowAutofillExtensions ? undefined : onePasswordPreventionId)}\n        className={s.Textarea}\n        name={name}\n        readOnly={readOnly}\n        disabled={disabled}\n        rows={rows}\n        onFocus={(evt) => {\n          setFocused(true)\n          onFocus?.(evt)\n        }}\n        onBlur={(evt) => {\n          setFocused(false)\n          onBlur?.(evt)\n        }}\n        onAnimationStart={handleAnimationStart}\n        // Prevent LastPass and 1Password from appearing\n        data-lpignore={allowAutofillExtensions ? undefined : true}\n        data-1p-ignore={allowAutofillExtensions ? undefined : true}\n      />\n    </div>\n  )\n}\n"]}