@langchain/macaw-components 1.0.0-beta.0

package/dist/components/Switch/Switch.js

@@ -0,0 +1,65 @@
+import { cn } from "../../utils/cn.js";
+import { SELECTION_CONTROL_HIT_AREA_STYLES, SELECTION_CONTROL_SIZES } from "../../utils/componentSizes.js";
+import { Text } from "../Text/Text.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+//#region packages/components/src/components/Switch/Switch.tsx
+var ROOT_SIZE_CLASSES = {
+	sm: `${SELECTION_CONTROL_SIZES.sm.heightClassName} w-8`,
+	md: `${SELECTION_CONTROL_SIZES.md.heightClassName} w-10`
+};
+var THUMB_SIZE_CLASSES = {
+	sm: "size-3 data-[state=checked]:translate-x-[18px]",
+	md: "size-4 data-[state=checked]:translate-x-[22px]"
+};
+/**
+* `flex` collapses the label's inherited line box to the text it wraps, so the
+* row's `items-center` aligns the label against the switch instead of against a
+* taller, invisible line box.
+*/
+var SwitchLabel = ({ htmlFor, size, labelClassName, children }) => /* @__PURE__ */ jsx("label", {
+	htmlFor,
+	className: "flex items-center",
+	children: /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		variant: size ?? "sm",
+		className: labelClassName,
+		children
+	})
+});
+var Switch = ({ checked, onChange, id, className, size, disabled, onClick, label, labelClassName, labelPosition = "right", ...rest }) => {
+	const generatedId = useId();
+	const switchId = id ?? generatedId;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-space-2", className),
+		children: [
+			labelPosition === "left" && label && /* @__PURE__ */ jsx(SwitchLabel, {
+				htmlFor: switchId,
+				size,
+				labelClassName,
+				children: label
+			}),
+			/* @__PURE__ */ jsx(SwitchPrimitive.Root, {
+				className: cn("inline-flex items-center rounded-full bg-surface-level-4 transition", "focus-visible:shadow-[0_0_0_4px_var(--bg-brand-subtle)] focus-visible:outline-none", SELECTION_CONTROL_HIT_AREA_STYLES, disabled ? "cursor-not-allowed data-[state=checked]:bg-brand-subtle" : "data-[state=checked]:bg-control-active hover:data-[state=checked]:bg-control-active-hover", ROOT_SIZE_CLASSES[size ?? "sm"]),
+				id: switchId,
+				checked,
+				onCheckedChange: onChange,
+				disabled,
+				onClick,
+				...rest,
+				children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: cn("translate-x-[2px] rounded-full bg-control-thumb transition", THUMB_SIZE_CLASSES[size ?? "sm"], disabled && "bg-disabled data-[state=checked]:bg-control-thumb dark:data-[state=checked]:bg-disabled") })
+			}),
+			labelPosition === "right" && label && /* @__PURE__ */ jsx(SwitchLabel, {
+				htmlFor: switchId,
+				size,
+				labelClassName,
+				children: label
+			})
+		]
+	});
+};
+//#endregion
+export { Switch };
+
+//# sourceMappingURL=Switch.js.map

package/dist/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","names":[],"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useId } from 'react';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\n\nimport { cn } from '../../utils/cn';\nimport {\n  SELECTION_CONTROL_HIT_AREA_STYLES,\n  SELECTION_CONTROL_SIZES,\n  type SelectionControlSize,\n} from '../../utils/componentSizes';\nimport { Text } from '../Text';\n\ninterface SwitchBaseProps {\n  checked: boolean;\n  onChange: (checked: boolean) => void;\n  id?: string;\n  className?: string;\n  /** Track height. The pointer target remains at least 24px. */\n  size?: SelectionControlSize;\n  disabled?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n}\n\ninterface SwitchWithLabelProps extends SwitchBaseProps {\n  label: string;\n  labelClassName?: string;\n  labelPosition?: 'left' | 'right';\n  'aria-label'?: never;\n  'aria-labelledby'?: never;\n}\n\ninterface SwitchWithAriaLabelProps extends SwitchBaseProps {\n  'aria-label': string;\n  label?: never;\n  labelClassName?: never;\n  labelPosition?: never;\n  'aria-labelledby'?: never;\n}\n\ninterface SwitchWithAriaLabelledByProps extends SwitchBaseProps {\n  'aria-labelledby': string;\n  label?: never;\n  labelClassName?: never;\n  labelPosition?: never;\n  'aria-label'?: never;\n}\n\nexport type SwitchProps =\n  | SwitchWithLabelProps\n  | SwitchWithAriaLabelProps\n  | SwitchWithAriaLabelledByProps;\n\nconst ROOT_SIZE_CLASSES: Record<\n  NonNullable<SwitchBaseProps['size']>,\n  string\n> = {\n  sm: `${SELECTION_CONTROL_SIZES.sm.heightClassName} w-8`,\n  md: `${SELECTION_CONTROL_SIZES.md.heightClassName} w-10`,\n};\n\nconst THUMB_SIZE_CLASSES: Record<\n  NonNullable<SwitchBaseProps['size']>,\n  string\n> = {\n  sm: 'size-3 data-[state=checked]:translate-x-[18px]',\n  md: 'size-4 data-[state=checked]:translate-x-[22px]',\n};\n\n/**\n * `flex` collapses the label's inherited line box to the text it wraps, so the\n * row's `items-center` aligns the label against the switch instead of against a\n * taller, invisible line box.\n */\nconst SwitchLabel = ({\n  htmlFor,\n  size,\n  labelClassName,\n  children,\n}: {\n  htmlFor: string;\n  size: SwitchProps['size'];\n  labelClassName?: string;\n  children: ReactNode;\n}) => (\n  <label htmlFor={htmlFor} className=\"flex items-center\">\n    <Text as=\"span\" variant={size ?? 'sm'} className={labelClassName}>\n      {children}\n    </Text>\n  </label>\n);\n\nexport const Switch = ({\n  checked,\n  onChange,\n  id,\n  className,\n  size,\n  disabled,\n  onClick,\n  label,\n  labelClassName,\n  labelPosition = 'right',\n  ...rest\n}: SwitchProps) => {\n  const generatedId = useId();\n  const switchId = id ?? generatedId;\n\n  return (\n    <div className={cn('flex items-center gap-space-2', className)}>\n      {labelPosition === 'left' && label && (\n        <SwitchLabel\n          htmlFor={switchId}\n          size={size}\n          labelClassName={labelClassName}\n        >\n          {label}\n        </SwitchLabel>\n      )}\n\n      <SwitchPrimitive.Root\n        className={cn(\n          'inline-flex items-center rounded-full bg-surface-level-4 transition',\n          'focus-visible:shadow-[0_0_0_4px_var(--bg-brand-subtle)] focus-visible:outline-none',\n          SELECTION_CONTROL_HIT_AREA_STYLES,\n          disabled\n            ? 'cursor-not-allowed data-[state=checked]:bg-brand-subtle'\n            : 'data-[state=checked]:bg-control-active hover:data-[state=checked]:bg-control-active-hover',\n          ROOT_SIZE_CLASSES[size ?? 'sm']\n        )}\n        id={switchId}\n        checked={checked}\n        onCheckedChange={onChange}\n        disabled={disabled}\n        onClick={onClick}\n        {...rest}\n      >\n        <SwitchPrimitive.Thumb\n          className={cn(\n            'translate-x-[2px] rounded-full bg-control-thumb transition',\n            THUMB_SIZE_CLASSES[size ?? 'sm'],\n            disabled &&\n              'bg-disabled data-[state=checked]:bg-control-thumb dark:data-[state=checked]:bg-disabled'\n          )}\n        />\n      </SwitchPrimitive.Root>\n\n      {labelPosition === 'right' && label && (\n        <SwitchLabel\n          htmlFor={switchId}\n          size={size}\n          labelClassName={labelClassName}\n        >\n          {label}\n        </SwitchLabel>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAqDA,IAAM,oBAGF;CACF,IAAI,GAAG,wBAAwB,GAAG,gBAAgB;CAClD,IAAI,GAAG,wBAAwB,GAAG,gBAAgB;AACpD;AAEA,IAAM,qBAGF;CACF,IAAI;CACJ,IAAI;AACN;;;;;;AAOA,IAAM,eAAe,EACnB,SACA,MACA,gBACA,eAOA,oBAAC,SAAD;CAAgB;CAAS,WAAU;CACjC,UAAA,oBAAC,MAAD;EAAM,IAAG;EAAO,SAAS,QAAQ;EAAM,WAAW;EAC/C;CACG,CAAA;AACD,CAAA;AAGT,IAAa,UAAU,EACrB,SACA,UACA,IACA,WACA,MACA,UACA,SACA,OACA,gBACA,gBAAgB,SAChB,GAAG,WACc;CACjB,MAAM,cAAc,MAAM;CAC1B,MAAM,WAAW,MAAM;CAEvB,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,iCAAiC,SAAS;EAA7D,UAAA;GACG,kBAAkB,UAAU,SAC3B,oBAAC,aAAD;IACE,SAAS;IACH;IACU;IAEf,UAAA;GACU,CAAA;GAGf,oBAAC,gBAAgB,MAAjB;IACE,WAAW,GACT,uEACA,sFACA,mCACA,WACI,4DACA,6FACJ,kBAAkB,QAAQ,KAC5B;IACA,IAAI;IACK;IACT,iBAAiB;IACP;IACD;IACT,GAAI;IAEJ,UAAA,oBAAC,gBAAgB,OAAjB,EACE,WAAW,GACT,8DACA,mBAAmB,QAAQ,OAC3B,YACE,yFACJ,EACD,CAAA;GACmB,CAAA;GAErB,kBAAkB,WAAW,SAC5B,oBAAC,aAAD;IACE,SAAS;IACH;IACU;IAEf,UAAA;GACU,CAAA;EAEZ;;AAET"}

package/dist/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export { Switch } from './Switch.js';
+export type { SwitchProps } from './Switch.js';

package/dist/components/Switch/index.js

@@ -0,0 +1,2 @@
+import { Switch } from "./Switch.js";
+export { Switch };

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentType } from 'react';
+import type { BadgeProps } from '../Badge/index.js';
+export declare function TabList({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function TabLabel({ label, icon: Icon, badgeProps, className, disabled, dataTestId, onClick, onBlur, }: {
+    label: React.ReactNode;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    badgeProps?: BadgeProps;
+    className?: string;
+    disabled?: boolean;
+    dataTestId?: string;
+    onClick?: () => void;
+    onBlur?: () => void;
+}): import("react").JSX.Element;
+export declare const TabPanels: import("@headlessui/react")._internal_ComponentTabPanels;
+export declare const TabGroup: import("@headlessui/react")._internal_ComponentTabGroup;
+export declare function TabPanel({ children, className, panelRef, onScroll, unmount, }: {
+    children: React.ReactNode;
+    className?: string;
+    panelRef?: React.RefObject<HTMLDivElement | null>;
+    onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+    unmount?: boolean;
+}): import("react").JSX.Element;

package/dist/components/Tabs/index.js

@@ -0,0 +1,45 @@
+import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/Text.js";
+import { Badge } from "../Badge/Badge.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tab, TabGroup as TabGroup$1, TabList as TabList$1, TabPanel as TabPanel$1, TabPanels as TabPanels$1 } from "@headlessui/react";
+//#region packages/components/src/components/Tabs/index.tsx
+function TabList({ children, className }) {
+	return /* @__PURE__ */ jsx(TabList$1, {
+		className: cn("flex gap-space-5 border-b border-secondary text-ls-black", className),
+		children
+	});
+}
+function TabLabel({ label, icon: Icon, badgeProps, className, disabled, dataTestId, onClick, onBlur }) {
+	return /* @__PURE__ */ jsxs(Tab, {
+		onClick,
+		onBlur,
+		className: cn("group relative flex items-center gap-space-2 border-b-2 border-b-transparent pb-5 text-primary outline-none transition-[color] duration-normal", "after:pointer-events-none after:invisible after:absolute after:inset-x-0 after:-bottom-0.5 after:mx-auto after:h-0.5 after:w-full after:rounded-full after:border-b-2 after:border-current", "data-[selected]:after:visible data-[selected]:after:animate-tab-indicator-expand motion-reduce:after:animate-none", "hover:text-brand-secondary data-[selected]:hover:after:border-b-brand-strong", "disabled:cursor-default disabled:text-disabled", className),
+		disabled,
+		"data-testid": dataTestId,
+		children: [
+			Icon && /* @__PURE__ */ jsx(Icon, { className: "size-3.5" }),
+			typeof label === "string" ? /* @__PURE__ */ jsx(Text, {
+				variant: "md",
+				className: "font-normal group-data-[selected]:font-medium",
+				children: label
+			}) : label != null ? label : null,
+			badgeProps && /* @__PURE__ */ jsx(Badge, { ...badgeProps })
+		]
+	});
+}
+var TabPanels = TabPanels$1;
+var TabGroup = TabGroup$1;
+function TabPanel({ children, className, panelRef, onScroll, unmount }) {
+	return /* @__PURE__ */ jsx(TabPanel$1, {
+		className: cn("outline-none", className),
+		onScroll,
+		ref: panelRef,
+		unmount,
+		children
+	});
+}
+//#endregion
+export { TabGroup, TabLabel, TabList, TabPanel, TabPanels };
+
+//# sourceMappingURL=index.js.map

package/dist/components/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\n\n// NOTE: Tabs are intentionally NOT re-exported from the design-system barrel\n// (components/index.ts). Importing @headlessui/react through the barrel pulls\n// ~297KB into every chunk that touches the barrel, bloating the initial load.\n// Import directly from '.' instead.\nimport {\n  TabGroup as HeadlessTabGroup,\n  TabList as HeadlessTabList,\n  TabPanel as HeadlessTabPanel,\n  TabPanels as HeadlessTabPanels,\n  Tab,\n} from '@headlessui/react';\n\nimport { cn } from '../../utils/cn';\nimport type { BadgeProps } from '../Badge';\nimport { Badge } from '../Badge';\nimport { Text } from '../Text';\n\nexport function TabList({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <HeadlessTabList\n      className={cn(\n        'flex gap-space-5 border-b border-secondary text-ls-black',\n        className\n      )}\n    >\n      {children}\n    </HeadlessTabList>\n  );\n}\n\nexport function TabLabel({\n  label,\n  icon: Icon,\n  badgeProps,\n  className,\n  disabled,\n  dataTestId,\n  onClick,\n  onBlur,\n}: {\n  label: React.ReactNode;\n  icon?: ComponentType<{ className?: string }>;\n  badgeProps?: BadgeProps;\n  className?: string;\n  disabled?: boolean;\n  dataTestId?: string;\n  onClick?: () => void;\n  onBlur?: () => void;\n}) {\n  // Absolute positioning uses the padding box; -2px places the indicator inside\n  // the reserved bottom border, keeping it visible in scrollable tab lists.\n  return (\n    <Tab\n      onClick={onClick}\n      onBlur={onBlur}\n      className={cn(\n        'group relative flex items-center gap-space-2 border-b-2 border-b-transparent pb-5 text-primary outline-none transition-[color] duration-normal',\n        'after:pointer-events-none after:invisible after:absolute after:inset-x-0 after:-bottom-0.5 after:mx-auto after:h-0.5 after:w-full after:rounded-full after:border-b-2 after:border-current',\n        'data-[selected]:after:visible data-[selected]:after:animate-tab-indicator-expand motion-reduce:after:animate-none',\n        'hover:text-brand-secondary data-[selected]:hover:after:border-b-brand-strong',\n        'disabled:cursor-default disabled:text-disabled',\n        className\n      )}\n      disabled={disabled}\n      data-testid={dataTestId}\n    >\n      {Icon && <Icon className=\"size-3.5\" />}\n      {typeof label === 'string' ? (\n        <Text\n          variant=\"md\"\n          className=\"font-normal group-data-[selected]:font-medium\"\n        >\n          {label}\n        </Text>\n      ) : label != null ? (\n        label\n      ) : null}\n      {badgeProps && <Badge {...badgeProps} />}\n    </Tab>\n  );\n}\n\nexport const TabPanels = HeadlessTabPanels;\n\nexport const TabGroup = HeadlessTabGroup;\n\nexport function TabPanel({\n  children,\n  className,\n  panelRef,\n  onScroll,\n  unmount,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  panelRef?: React.RefObject<HTMLDivElement | null>;\n  onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;\n  unmount?: boolean;\n}) {\n  return (\n    <HeadlessTabPanel\n      className={cn('outline-none', className)}\n      onScroll={onScroll}\n      ref={panelRef}\n      unmount={unmount}\n    >\n      {children}\n    </HeadlessTabPanel>\n  );\n}\n"],"mappings":";;;;;;AAmBA,SAAgB,QAAQ,EACtB,UACA,aAIC;CACD,OACE,oBAAC,WAAD;EACE,WAAW,GACT,4DACA,SACF;EAEC;CACc,CAAA;AAErB;AAEA,SAAgB,SAAS,EACvB,OACA,MAAM,MACN,YACA,WACA,UACA,YACA,SACA,UAUC;CAGD,OACE,qBAAC,KAAD;EACW;EACD;EACR,WAAW,GACT,kJACA,8LACA,qHACA,gFACA,kDACA,SACF;EACU;EACV,eAAa;EAZf,UAAA;GAcG,QAAQ,oBAAC,MAAD,EAAM,WAAU,WAAY,CAAA;GACpC,OAAO,UAAU,WAChB,oBAAC,MAAD;IACE,SAAQ;IACR,WAAU;IAET,UAAA;GACG,CAAA,IACJ,SAAS,OACX,QACE;GACH,cAAc,oBAAC,OAAD,EAAO,GAAI,WAAa,CAAA;EACpC;;AAET;AAEA,IAAa,YAAY;AAEzB,IAAa,WAAW;AAExB,SAAgB,SAAS,EACvB,UACA,WACA,UACA,UACA,WAOC;CACD,OACE,oBAAC,YAAD;EACE,WAAW,GAAG,gBAAgB,SAAS;EAC7B;EACV,KAAK;EACI;EAER;CACe,CAAA;AAEtB"}

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,13 @@
+interface TextProps extends React.HTMLAttributes<HTMLElement> {
+    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'md' | 'sm' | 'xs' | 'body';
+    weight?: 'semibold' | 'medium' | 'normal';
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'label';
+    color?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'placeholder' | 'error' | 'success';
+    children: React.ReactNode;
+    /** Only if using as="label" to attach the label to the input */
+    htmlFor?: string;
+}
+declare const textVariantClasses: Record<NonNullable<TextProps['variant']>, string>;
+declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLElement>>;
+export { Text, textVariantClasses };
+export type { TextProps };

package/dist/components/Text/Text.js

@@ -0,0 +1,58 @@
+import { cn } from "../../utils/cn.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/src/components/Text/Text.tsx
+var textVariantClasses = {
+	h1: "text-2xl font-medium leading-tight tracking-tighter",
+	h2: "text-lg font-medium leading-tight tracking-tighter",
+	h3: "text-base font-semibold leading-tight tracking-tight",
+	h4: "text-sm font-normal leading-tight tracking-wide uppercase",
+	h5: "text-sm font-normal leading-tight tracking-tight",
+	h6: "text-sm font-normal leading-tight tracking-wide",
+	md: "text-sm leading-[1.15] tracking-tighter",
+	sm: "text-xs leading-tight tracking-snug",
+	xs: "text-xxs leading-[1.15] tracking-normal",
+	body: "text-sm leading-normal tracking-normal"
+};
+var Text = forwardRef(({ variant = "body", weight, as, className, children, color, ...props }, ref) => {
+	const defaultElement = {
+		h1: "h1",
+		h2: "h2",
+		h3: "h3",
+		h4: "h4",
+		h5: "h5",
+		h6: "h6",
+		md: "span",
+		sm: "span",
+		xs: "span",
+		body: "p"
+	}[variant];
+	const Component = as || defaultElement;
+	const variants = textVariantClasses;
+	const weights = {
+		semibold: "font-semibold",
+		medium: "font-medium",
+		normal: "font-normal"
+	};
+	const colors = {
+		primary: "text-primary",
+		secondary: "text-secondary",
+		tertiary: "text-tertiary",
+		quaternary: "text-quaternary",
+		placeholder: "text-placeholder",
+		error: "text-error-secondary",
+		success: "text-success-secondary"
+	};
+	const weightClass = weight ? weights[weight] : "";
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		className: cn(variants[variant], weightClass, color ? colors[color] : "", className),
+		...props,
+		children
+	});
+});
+Text.displayName = "Text";
+//#endregion
+export { Text, textVariantClasses };
+
+//# sourceMappingURL=Text.js.map

package/dist/components/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","names":[],"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import { forwardRef, type JSX } from 'react';\n\nimport { cn } from '../../utils/cn';\n\ninterface TextProps extends React.HTMLAttributes<HTMLElement> {\n  variant?:\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'h6'\n    | 'md'\n    | 'sm'\n    | 'xs'\n    | 'body';\n  weight?: 'semibold' | 'medium' | 'normal';\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'label';\n  color?:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'quaternary'\n    | 'placeholder'\n    | 'error'\n    | 'success';\n  children: React.ReactNode;\n  /** Only if using as=\"label\" to attach the label to the input */\n  htmlFor?: string;\n}\n\nconst textVariantClasses: Record<NonNullable<TextProps['variant']>, string> = {\n  h1: 'text-2xl font-medium leading-tight tracking-tighter', // 24px, 500, 100%, -4%\n  h2: 'text-lg font-medium leading-tight tracking-tighter', // 18px, 500, 120%, -4%\n  h3: 'text-base font-semibold leading-tight tracking-tight', // 16px, 600 120%, -3%\n  h4: 'text-sm font-normal leading-tight tracking-wide uppercase', // 14px, 400, 120%, 3%\n  h5: 'text-sm font-normal leading-tight tracking-tight', // 14px, 400, 120%, -3%\n  h6: 'text-sm font-normal leading-tight tracking-wide', // 14px, 400, 120%, 3%\n  md: 'text-sm leading-[1.15] tracking-tighter', // 14px, 115%, -4%\n  sm: 'text-xs leading-tight tracking-snug', // 13px, 120%, -2%\n  xs: 'text-xxs leading-[1.15] tracking-normal', // 12px, 115%, 0%\n  body: 'text-sm leading-normal tracking-normal', // 14px, 150%, 0%\n};\n\nconst Text = forwardRef<HTMLElement, TextProps>(\n  (\n    { variant = 'body', weight, as, className, children, color, ...props },\n    ref\n  ) => {\n    // Default semantic mapping\n    const defaultElement = {\n      h1: 'h1',\n      h2: 'h2',\n      h3: 'h3',\n      h4: 'h4',\n      h5: 'h5',\n      h6: 'h6',\n      md: 'span',\n      sm: 'span',\n      xs: 'span',\n      body: 'p',\n    }[variant] as keyof JSX.IntrinsicElements;\n\n    const Component = (as || defaultElement) as React.ElementType;\n\n    const variants = textVariantClasses;\n\n    const weights = {\n      semibold: 'font-semibold',\n      medium: 'font-medium',\n      normal: 'font-normal',\n    };\n\n    const colors = {\n      primary: 'text-primary',\n      secondary: 'text-secondary',\n      tertiary: 'text-tertiary',\n      quaternary: 'text-quaternary',\n      placeholder: 'text-placeholder',\n      error: 'text-error-secondary',\n      success: 'text-success-secondary',\n    };\n\n    const weightClass = weight ? weights[weight] : '';\n\n    return (\n      <Component\n        ref={ref}\n        className={cn(\n          variants[variant],\n          weightClass,\n          color ? colors[color] : '',\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = 'Text';\n\nexport { Text, textVariantClasses };\nexport type { TextProps };\n"],"mappings":";;;;AA+BA,IAAM,qBAAwE;CAC5E,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAEA,IAAM,OAAO,YAET,EAAE,UAAU,QAAQ,QAAQ,IAAI,WAAW,UAAU,OAAO,GAAG,SAC/D,QACG;CAEH,MAAM,iBAAiB;EACrB,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,MAAM;CACR,EAAE;CAEF,MAAM,YAAa,MAAM;CAEzB,MAAM,WAAW;CAEjB,MAAM,UAAU;EACd,UAAU;EACV,QAAQ;EACR,QAAQ;CACV;CAEA,MAAM,SAAS;EACb,SAAS;EACT,WAAW;EACX,UAAU;EACV,YAAY;EACZ,aAAa;EACb,OAAO;EACP,SAAS;CACX;CAEA,MAAM,cAAc,SAAS,QAAQ,UAAU;CAE/C,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GACT,SAAS,UACT,aACA,QAAQ,OAAO,SAAS,IACxB,SACF;EACA,GAAI;EAEH;CACQ,CAAA;AAEf,CACF;AAEA,KAAK,cAAc"}

package/dist/components/Text/index.d.ts

@@ -0,0 +1,2 @@
+export { Text, textVariantClasses } from './Text.js';
+export type { TextProps } from './Text.js';

package/dist/components/Text/index.js

@@ -0,0 +1,2 @@
+import { Text, textVariantClasses } from "./Text.js";
+export { Text, textVariantClasses };

package/dist/components/TextVirtualizer.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from 'react';
+export declare const TextVirtualizer: ({ text, containerHeight, chunkSize, style, renderChunk, }: {
+    text: string;
+    containerHeight: string;
+    chunkSize?: number;
+    style?: CSSProperties;
+    renderChunk?: (chunk: string, index: number) => React.ReactNode;
+}) => import("react").JSX.Element;

package/dist/components/TextVirtualizer.js

@@ -0,0 +1,53 @@
+import { Text } from "./Text/Text.js";
+import { forwardRef, useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Virtuoso } from "react-virtuoso";
+//#region packages/components/src/components/TextVirtualizer.tsx
+var VIRTUOSO_COMPONENTS = { Item: forwardRef((props, ref) => {
+	const { color: _color, as: _as, children, ...rest } = props;
+	return /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		...rest,
+		ref,
+		children
+	});
+}) };
+var TextVirtualizer = ({ text, containerHeight, chunkSize = 5e3, style = {}, renderChunk }) => {
+	const chunks = useMemo(() => {
+		if (!text) return [];
+		const result = [];
+		let currentPosition = 0;
+		while (currentPosition < text.length) {
+			let endPosition = Math.min(currentPosition + chunkSize, text.length);
+			if (endPosition < text.length) {
+				const nextNewline = text.indexOf("\n", endPosition);
+				if (nextNewline !== -1 && nextNewline - currentPosition < chunkSize * 2) endPosition = nextNewline + 1;
+			}
+			result.push(text.substring(currentPosition, endPosition));
+			currentPosition = endPosition;
+		}
+		return result;
+	}, [text, chunkSize]);
+	const itemContent = useCallback((index) => {
+		const chunk = chunks[index] ?? "";
+		return renderChunk ? renderChunk(chunk, index) : chunk;
+	}, [chunks, renderChunk]);
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			height: containerHeight,
+			width: "100%",
+			display: "inline-block",
+			...style
+		},
+		children: /* @__PURE__ */ jsx(Virtuoso, {
+			totalCount: chunks.length,
+			components: VIRTUOSO_COMPONENTS,
+			itemContent,
+			increaseViewportBy: 500
+		})
+	});
+};
+//#endregion
+export { TextVirtualizer };
+
+//# sourceMappingURL=TextVirtualizer.js.map

package/dist/components/TextVirtualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextVirtualizer.js","names":[],"sources":["../../src/components/TextVirtualizer.tsx"],"sourcesContent":["import type { CSSProperties, HTMLProps } from 'react';\nimport { forwardRef, useCallback, useMemo } from 'react';\n\nimport { Virtuoso } from 'react-virtuoso';\n\nimport { Text } from './Text';\n\ntype ItemProps = HTMLProps<HTMLDivElement>;\n\nconst Item = forwardRef<HTMLDivElement, ItemProps>((props, ref) => {\n  const { color: _color, as: _as, children, ...rest } = props;\n  return (\n    <Text as=\"span\" {...rest} ref={ref}>\n      {children}\n    </Text>\n  );\n});\n\n// Memoize components object to prevent unnecessary re-renders\nconst VIRTUOSO_COMPONENTS = { Item };\n\nexport const TextVirtualizer = ({\n  text,\n  containerHeight,\n  chunkSize = 5000,\n  style = {},\n  renderChunk,\n}: {\n  text: string;\n  containerHeight: string;\n  chunkSize?: number;\n  style?: CSSProperties;\n  renderChunk?: (chunk: string, index: number) => React.ReactNode;\n}) => {\n  // Create text chunks for virtualization\n  const chunks = useMemo(() => {\n    if (!text) return [];\n\n    const result: string[] = [];\n    let currentPosition = 0;\n\n    while (currentPosition < text.length) {\n      let endPosition = Math.min(currentPosition + chunkSize, text.length);\n\n      if (endPosition < text.length) {\n        const nextNewline = text.indexOf('\\n', endPosition);\n\n        // If a newline is reasonably close, use it as the break point\n        if (\n          nextNewline !== -1 &&\n          nextNewline - currentPosition < chunkSize * 2\n        ) {\n          endPosition = nextNewline + 1;\n        }\n      }\n\n      result.push(text.substring(currentPosition, endPosition));\n      currentPosition = endPosition;\n    }\n\n    return result;\n  }, [text, chunkSize]);\n\n  // Memoize the render function to reduce closure retention\n  const itemContent = useCallback(\n    (index: number) => {\n      const chunk = chunks[index] ?? '';\n      return renderChunk ? renderChunk(chunk, index) : chunk;\n    },\n    [chunks, renderChunk]\n  );\n\n  return (\n    <div\n      style={{\n        height: containerHeight,\n        width: '100%',\n        display: 'inline-block',\n        ...style,\n      }}\n    >\n      <Virtuoso\n        totalCount={chunks.length}\n        components={VIRTUOSO_COMPONENTS}\n        itemContent={itemContent}\n        increaseViewportBy={500}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;AAmBA,IAAM,sBAAsB,EAAE,MAVjB,YAAuC,OAAO,QAAQ;CACjE,MAAM,EAAE,OAAO,QAAQ,IAAI,KAAK,UAAU,GAAG,SAAS;CACtD,OACE,oBAAC,MAAD;EAAM,IAAG;EAAO,GAAI;EAAW;EAC5B;CACG,CAAA;AAEV,CAG8B,EAAK;AAEnC,IAAa,mBAAmB,EAC9B,MACA,iBACA,YAAY,KACZ,QAAQ,CAAC,GACT,kBAOI;CAEJ,MAAM,SAAS,cAAc;EAC3B,IAAI,CAAC,MAAM,OAAO,CAAC;EAEnB,MAAM,SAAmB,CAAC;EAC1B,IAAI,kBAAkB;EAEtB,OAAO,kBAAkB,KAAK,QAAQ;GACpC,IAAI,cAAc,KAAK,IAAI,kBAAkB,WAAW,KAAK,MAAM;GAEnE,IAAI,cAAc,KAAK,QAAQ;IAC7B,MAAM,cAAc,KAAK,QAAQ,MAAM,WAAW;IAGlD,IACE,gBAAgB,MAChB,cAAc,kBAAkB,YAAY,GAE5C,cAAc,cAAc;GAEhC;GAEA,OAAO,KAAK,KAAK,UAAU,iBAAiB,WAAW,CAAC;GACxD,kBAAkB;EACpB;EAEA,OAAO;CACT,GAAG,CAAC,MAAM,SAAS,CAAC;CAGpB,MAAM,cAAc,aACjB,UAAkB;EACjB,MAAM,QAAQ,OAAO,UAAU;EAC/B,OAAO,cAAc,YAAY,OAAO,KAAK,IAAI;CACnD,GACA,CAAC,QAAQ,WAAW,CACtB;CAEA,OACE,oBAAC,OAAD;EACE,OAAO;GACL,QAAQ;GACR,OAAO;GACP,SAAS;GACT,GAAG;EACL;EAEA,UAAA,oBAAC,UAAD;GACE,YAAY,OAAO;GACnB,YAAY;GACC;GACb,oBAAoB;EACrB,CAAA;CACE,CAAA;AAET"}

package/dist/components/TextWithLinks.d.ts

@@ -0,0 +1,6 @@
+export declare const TextWithLinks: (props: {
+    text: string;
+    containerHeight?: string;
+    fullLength?: boolean;
+    useRawSpan?: boolean;
+}) => import("react").JSX.Element;

package/dist/components/TextWithLinks.js

@@ -0,0 +1,61 @@
+import { Text } from "./Text/Text.js";
+import { Button } from "./Button/Button.js";
+import { MAX_TEXT_LENGTH } from "./Code/constants.js";
+import { getScrollParent } from "../utils/get-closest-scroll-parent.js";
+import { parseTextWithLinks } from "../utils/parseTextLinks.js";
+import { TextVirtualizer } from "./TextVirtualizer.js";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/src/components/TextWithLinks.tsx
+var TextWithLinksInner = ({ text, useRawSpan }) => {
+	const textParts = useMemo(() => parseTextWithLinks(text ?? ""), [text]);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: textParts.map((part, index) => {
+		if (part.type === "link") {
+			const href = part.url?.startsWith("http") ? part.url : `https://${part.url}`;
+			return /* @__PURE__ */ jsx("a", {
+				href,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				className: "pointer-events-auto text-link underline",
+				onClick: (e) => e.stopPropagation(),
+				children: part.content
+			}, index);
+		}
+		return useRawSpan ? /* @__PURE__ */ jsx("span", { children: part.content }, index) : /* @__PURE__ */ jsx(Text, {
+			variant: "body",
+			as: "span",
+			children: part.content
+		}, index);
+	}) });
+};
+var TextWithLinks = (props) => {
+	const [isTruncated, setIsTruncated] = useState(true);
+	const isTextLong = props.fullLength ? false : props.text.length > MAX_TEXT_LENGTH;
+	const textToRender = isTextLong && isTruncated ? `${props.text.slice(0, MAX_TEXT_LENGTH)}...` : props.text;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [props.containerHeight && isTextLong ? /* @__PURE__ */ jsx(TextVirtualizer, {
+		containerHeight: `calc(${props.containerHeight} - 35px)`,
+		text: textToRender
+	}) : /* @__PURE__ */ jsx(TextWithLinksInner, {
+		text: textToRender,
+		useRawSpan: props.useRawSpan ?? false
+	}), isTextLong && /* @__PURE__ */ jsx(Button, {
+		variant: "underlined",
+		color: "secondary",
+		size: "sm",
+		onClick: (e) => {
+			if (isTruncated) {
+				const scrollParent = getScrollParent(e.currentTarget);
+				scrollParent?.scrollTo({
+					top: scrollParent.scrollTop - 1,
+					behavior: "instant"
+				});
+			}
+			setIsTruncated(!isTruncated);
+		},
+		children: isTruncated ? "Show more" : "Show less"
+	})] });
+};
+//#endregion
+export { TextWithLinks };
+
+//# sourceMappingURL=TextWithLinks.js.map

package/dist/components/TextWithLinks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextWithLinks.js","names":[],"sources":["../../src/components/TextWithLinks.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\n\nimport { getScrollParent } from '../utils/get-closest-scroll-parent';\nimport { parseTextWithLinks } from '../utils/parseTextLinks';\nimport { Button } from './Button';\nimport { MAX_TEXT_LENGTH } from './Code/constants';\nimport { Text } from './Text';\nimport { TextVirtualizer } from './TextVirtualizer';\n\nconst TextWithLinksInner = ({\n  text,\n  useRawSpan,\n}: {\n  text: string;\n  useRawSpan: boolean;\n}) => {\n  const textParts = useMemo(() => parseTextWithLinks(text ?? ''), [text]);\n  return (\n    <>\n      {textParts.map((part, index) => {\n        if (part.type === 'link') {\n          const href = part.url?.startsWith('http')\n            ? part.url\n            : `https://${part.url}`;\n\n          return (\n            // oxlint-disable-next-line forbid-elements\n            <a\n              key={index}\n              href={href}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"pointer-events-auto text-link underline\"\n              onClick={(e) => e.stopPropagation()}\n            >\n              {part.content}\n            </a>\n          );\n        }\n        return useRawSpan ? (\n          <span key={index}>{part.content}</span>\n        ) : (\n          <Text key={index} variant=\"body\" as=\"span\">\n            {part.content}\n          </Text>\n        );\n      })}\n    </>\n  );\n};\n\n// Truncated version\nexport const TextWithLinks = (props: {\n  text: string;\n  containerHeight?: string;\n  fullLength?: boolean;\n  useRawSpan?: boolean;\n}) => {\n  const [isTruncated, setIsTruncated] = useState(true);\n  const isTextLong = props.fullLength\n    ? false\n    : props.text.length > MAX_TEXT_LENGTH;\n  const textToRender =\n    isTextLong && isTruncated\n      ? `${props.text.slice(0, MAX_TEXT_LENGTH)}...`\n      : props.text;\n\n  return (\n    <>\n      {props.containerHeight && isTextLong ? (\n        <TextVirtualizer\n          containerHeight={`calc(${props.containerHeight} - 35px)`}\n          text={textToRender}\n        />\n      ) : (\n        <TextWithLinksInner\n          text={textToRender}\n          useRawSpan={props.useRawSpan ?? false}\n        />\n      )}\n      {isTextLong && (\n        <Button\n          variant=\"underlined\"\n          color=\"secondary\"\n          size=\"sm\"\n          onClick={(e) => {\n            if (isTruncated) {\n              // Shift the scroll container up by a tiny bit so\n              // when showing rest of the text, the scroll is not at the end of\n              // the container and user loses their place.\n              const scrollParent = getScrollParent(e.currentTarget);\n              scrollParent?.scrollTo({\n                top: scrollParent.scrollTop - 1,\n                behavior: 'instant',\n              });\n            }\n            setIsTruncated(!isTruncated);\n          }}\n        >\n          {isTruncated ? 'Show more' : 'Show less'}\n        </Button>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;AASA,IAAM,sBAAsB,EAC1B,MACA,iBAII;CACJ,MAAM,YAAY,cAAc,mBAAmB,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC;CACtE,OACE,oBAAA,YAAA,EAAA,UACG,UAAU,KAAK,MAAM,UAAU;EAC9B,IAAI,KAAK,SAAS,QAAQ;GACxB,MAAM,OAAO,KAAK,KAAK,WAAW,MAAM,IACpC,KAAK,MACL,WAAW,KAAK;GAEpB,OAEE,oBAAC,KAAD;IAEQ;IACN,QAAO;IACP,KAAI;IACJ,WAAU;IACV,UAAU,MAAM,EAAE,gBAAgB;IAEjC,UAAA,KAAK;GACL,GARI,KAQJ;EAEP;EACA,OAAO,aACL,oBAAC,QAAD,EAAA,UAAmB,KAAK,QAAc,GAA3B,KAA2B,IAEtC,oBAAC,MAAD;GAAkB,SAAQ;GAAO,IAAG;GACjC,UAAA,KAAK;EACF,GAFK,KAEL;CAEV,CAAC,EACD,CAAA;AAEN;AAGA,IAAa,iBAAiB,UAKxB;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,IAAI;CACnD,MAAM,aAAa,MAAM,aACrB,QACA,MAAM,KAAK,SAAS;CACxB,MAAM,eACJ,cAAc,cACV,GAAG,MAAM,KAAK,MAAM,GAAG,eAAe,EAAE,OACxC,MAAM;CAEZ,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,MAAM,mBAAmB,aACxB,oBAAC,iBAAD;EACE,iBAAiB,QAAQ,MAAM,gBAAgB;EAC/C,MAAM;CACP,CAAA,IAED,oBAAC,oBAAD;EACE,MAAM;EACN,YAAY,MAAM,cAAc;CACjC,CAAA,GAEF,cACC,oBAAC,QAAD;EACE,SAAQ;EACR,OAAM;EACN,MAAK;EACL,UAAU,MAAM;GACd,IAAI,aAAa;IAIf,MAAM,eAAe,gBAAgB,EAAE,aAAa;IACpD,cAAc,SAAS;KACrB,KAAK,aAAa,YAAY;KAC9B,UAAU;IACZ,CAAC;GACH;GACA,eAAe,CAAC,WAAW;EAC7B;EAEC,UAAA,cAAc,cAAc;CACvB,CAAA,CAEV,EAAA,CAAA;AAEN"}

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import type { InputSize } from '../Input/inputStyles.js';
+export interface TextareaProps {
+    /** First-row metrics. Total height remains intrinsic to rows and content. */
+    size?: InputSize;
+    /** Left side decorator/icon */
+    leftDecorator?: ReactNode;
+    /** Right side decorator/icon */
+    rightDecorator?: ReactNode;
+    /** Whether the textarea is disabled */
+    disabled?: boolean;
+    /** Whether the textarea has an error state */
+    isError?: boolean;
+    /** Label text displayed above the textarea */
+    label?: string | ReactNode;
+    /** Hint text displayed below the textarea */
+    hintText?: string;
+    /** Current textarea value */
+    value?: string;
+    /** Change handler that will be debounced */
+    onChange: (value: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Debounce delay in milliseconds (default: 300) */
+    debounceMs?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Additional CSS classes applied to the inner <textarea> element */
+    inputClassName?: string;
+    /** Textarea ID for accessibility */
+    id?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Auto focus on mount */
+    autoFocus?: boolean;
+    /** Number of visible rows */
+    rows?: number;
+    /** Whether the textarea can be resized */
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    /** When true, textarea height grows with content up to maxHeight (resize is forced to none) */
+    autoResize?: boolean;
+    /** Max height in px when autoResize is true (default: 200) */
+    maxHeight?: number;
+    /** Visual variant: default (bordered container) or plain (borderless, for embedding) */
+    variant?: 'default' | 'plain';
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, keyof TextareaProps> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,150 @@
+import { cn } from "../../utils/cn.js";
+import { CONTROL_SIZES } from "../../utils/componentSizes.js";
+import { Text } from "../Text/Text.js";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { INPUT_HORIZONTAL_PADDING_CLASSES, INPUT_RADIUS_CLASSES, INPUT_TEXT_CLASSES } from "../Input/inputStyles.js";
+import { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDebouncedCallback } from "use-debounce";
+//#region packages/components/src/components/Textarea/Textarea.tsx
+var DEFAULT_AUTO_RESIZE_MAX_HEIGHT_PX = 200;
+var Textarea = forwardRef(({ size = "lg", leftDecorator, rightDecorator, disabled = false, isError = false, label, hintText, value, onChange, placeholder, debounceMs = 0, className, inputClassName, id, required = false, autoFocus = false, rows = 3, resize = "vertical", autoResize = false, maxHeight = DEFAULT_AUTO_RESIZE_MAX_HEIGHT_PX, variant = "default", "aria-describedby": ariaDescribedBy, ...rest }, ref) => {
+	const generatedId = useId();
+	const textareaId = id ?? generatedId;
+	const hintTextId = `${textareaId}-hint`;
+	const describedBy = [hintText ? hintTextId : void 0, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+	const shouldDebounce = debounceMs > 0;
+	const [internalValue, setInternalValue] = useState(value);
+	const debouncedOnChange = useDebouncedCallback(onChange, debounceMs);
+	const textareaRef = useRef(null);
+	useEffect(() => {
+		setInternalValue(value);
+	}, [value]);
+	useEffect(() => {
+		if (!shouldDebounce) return;
+		return () => {
+			debouncedOnChange.flush();
+		};
+	}, [shouldDebounce, debouncedOnChange]);
+	const runAutoResize = useCallback(() => {
+		const el = textareaRef.current;
+		if (!el || !autoResize) return;
+		el.style.height = "auto";
+		const contentHeight = Math.min(el.scrollHeight, maxHeight);
+		el.style.height = `${contentHeight}px`;
+		el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
+	}, [autoResize, maxHeight]);
+	useLayoutEffect(() => {
+		const el = textareaRef.current;
+		if (!el) return;
+		if (!autoResize) {
+			el.style.height = "";
+			el.style.overflowY = "";
+			return;
+		}
+		runAutoResize();
+		const ro = new ResizeObserver(runAutoResize);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [
+		autoResize,
+		internalValue,
+		runAutoResize
+	]);
+	const handleTextareaChange = (e) => {
+		const newValue = e.target.value;
+		setInternalValue(newValue);
+		if (shouldDebounce) debouncedOnChange(newValue);
+		else onChange(newValue);
+	};
+	const textareaContainerClasses = cn("flex w-full gap-space-2", variant === "default" && [
+		"border bg-transparent transition-[border-color,box-shadow,background-color]",
+		CONTROL_SIZES[size].minHeightClassName,
+		INPUT_HORIZONTAL_PADDING_CLASSES[size],
+		INPUT_RADIUS_CLASSES[size],
+		{
+			"py-px": size === "xs",
+			"py-0.5": size === "sm",
+			"py-space-1": size === "md",
+			"py-space-2": size === "lg"
+		},
+		"focus-within:outline-none",
+		"border-subtle",
+		!disabled && !isError && "[&:hover:not(:focus-within)]:border-default",
+		!isError && "focus-within:border-focus focus-within:shadow-[0_0_0_2px_var(--border-focus)]",
+		isError && "border-error-strong focus-within:border-error-strong focus-within:shadow-[0_0_0_2px_var(--border-error-strong)]",
+		disabled && "cursor-not-allowed bg-disabled opacity-50"
+	], leftDecorator || rightDecorator ? "items-start" : "items-center");
+	const effectiveResize = autoResize ? "none" : resize;
+	const textareaClasses = cn("max-w-full flex-1 border-none bg-transparent p-0 outline-none", INPUT_TEXT_CLASSES[size], "placeholder:text-placeholder", disabled && "cursor-not-allowed", {
+		"resize-none": effectiveResize === "none",
+		"resize-y": effectiveResize === "vertical",
+		"resize-x": effectiveResize === "horizontal",
+		resize: effectiveResize === "both"
+	}, inputClassName);
+	const decoratorClasses = cn("flex items-center text-tertiary", {
+		"mt-0": size === "xs" || size === "sm",
+		"mt-0.5": size === "md",
+		"mt-space-1": size === "lg"
+	});
+	const leftDecoratorClasses = cn(decoratorClasses);
+	const rightDecoratorClasses = cn(decoratorClasses);
+	const labelClasses = cn("mb-space-1 block font-medium text-primary", disabled && "text-disabled");
+	const hintTextClasses = cn("mt-space-1 text-xs", isError ? "text-error-secondary" : "text-tertiary");
+	const containerClasses = cn("w-full", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: containerClasses,
+		children: [
+			label && /* @__PURE__ */ jsxs(Text, {
+				as: "label",
+				htmlFor: textareaId,
+				className: labelClasses,
+				variant: "sm",
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					className: "ml-space-1 text-error-secondary",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: textareaContainerClasses,
+				children: [
+					leftDecorator && /* @__PURE__ */ jsx("div", {
+						className: leftDecoratorClasses,
+						children: leftDecorator
+					}),
+					/* @__PURE__ */ jsx("textarea", {
+						ref: mergeRefs([textareaRef, ref]),
+						id: textareaId,
+						value: internalValue ?? "",
+						onChange: handleTextareaChange,
+						placeholder,
+						disabled,
+						required,
+						autoFocus,
+						rows,
+						"aria-describedby": describedBy,
+						"aria-invalid": isError || void 0,
+						className: textareaClasses,
+						...rest
+					}),
+					rightDecorator && /* @__PURE__ */ jsx("div", {
+						className: rightDecoratorClasses,
+						children: rightDecorator
+					})
+				]
+			}),
+			hintText && /* @__PURE__ */ jsx(Text, {
+				id: hintTextId,
+				className: hintTextClasses,
+				variant: "xs",
+				weight: "normal",
+				children: hintText
+			})
+		]
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+export { Textarea };
+
+//# sourceMappingURL=Textarea.js.map