@hashicorp/mds-react 0.9.13 → 0.9.15

package/dist/components/form/select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/select/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAiDjD,UAAU,gBAAgB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAA;IACnC,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,WAAW;gIAcd,gBAAgB;;CA2BlB,CAAA;AAID,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/form/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/select/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { HTMLProps, ReactNode } from 'react'\nimport { useId } from 'react'\nimport { Field } from '../field'\nimport s from './form-select.module.css'\n\ninterface SelectBaseProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\trequired?: boolean\n\tclassName?: string\n\tid: string\n\tfield: HTMLProps<HTMLSelectElement>\n\tchildren: ReactNode\n\tsize: 'medium' | 'large'\n\terror?: ReactNode\n\tdisabled?: boolean\n}\n\nconst SelectBase = ({\n\tisInvalid,\n\tisLoading,\n\tclassName,\n\tid,\n\tfield,\n\tchildren,\n\tsize,\n\terror,\n\t...rest\n}: SelectBaseProps) => {\n\treturn (\n\t\t<select\n\t\t\tid={id}\n\t\t\tclassName={classNames(\n\t\t\t\ts.select,\n\t\t\t\ts[size],\n\t\t\t\t{\n\t\t\t\t\t[s.invalid]: isInvalid,\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\taria-describedby={`${error ? 'error' : 'helper-text'}-${id}`}\n\t\t\t{...field}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</select>\n\t)\n}\n\ninterface SelectFieldProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tid?: string\n\tlabel?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tfield: HTMLProps<HTMLSelectElement>\n\tchildren: ReactNode\n\tclassName?: string\n\tsize?: 'medium' | 'large'\n\tdisabled?: boolean\n\tmultiple?: boolean\n}\n\nconst SelectField = ({\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tchildren,\n\tclassName,\n\tsize = 'medium',\n\t...rest\n}: SelectFieldProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\tisRequired={isRequired}\n\t\t\tisOptional={isOptional}\n\t\t\tid={inputId}\n\t\t\tlayout=\"vertical\"\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<SelectBase\n\t\t\t\tid={inputId}\n\t\t\t\tisInvalid={isInvalid}\n\t\t\t\trequired={isRequired}\n\t\t\t\tfield={field}\n\t\t\t\tsize={size}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</SelectBase>\n\t\t</Field>\n\t)\n}\n\nSelectField.displayName = 'SelectField'\n\nexport { SelectField }\n"],"names":["SelectBase","isInvalid","isLoading","className","id","field","children","size","error","rest","jsx","classNames","s","SelectField","isRequired","isOptional","label","helperText","generatedId","useId","inputId","Field"],"mappings":";;;;;AAmBA,MAAMA,IAAa,CAAC;AAAA,EACnB,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,IAAAN;AAAA,IACA,WAAWO;AAAA,MACVC,EAAE;AAAA,MACFA,EAAEL,CAAI;AAAA,MACN;AAAA,QACC,CAACK,EAAE,OAAO,GAAGX;AAAA,MAAA;AAAA,MAEdE;AAAA,IAAA;AAAA,IAED,oBAAkB,GAAGK,IAAQ,UAAU,aAAa,IAAIJ,CAAE;AAAA,IACzD,GAAGC;AAAA,IACH,GAAGI;AAAA,IAEH,UAAAH;AAAA,EAAA;AAAA,GAsBEO,IAAc,CAAC;AAAA,EACpB,WAAAZ;AAAA,EACA,WAAAC;AAAA,EACA,YAAAY;AAAA,EACA,YAAAC;AAAA,EACA,IAAAX;AAAA,EACA,OAAAY;AAAA,EACA,YAAAC;AAAA,EACA,OAAAT;AAAA,EACA,OAAAH;AAAA,EACA,UAAAC;AAAA,EACA,WAAAH;AAAA,EACA,MAAAI,IAAO;AAAA,EACP,GAAGE;AACJ,MAAwB;AACvB,QAAMS,IAAcC,EAAA,GACdC,IAAUhB,KAAMc;AAEtB,SACC,gBAAAR;AAAA,IAACW;AAAA,IAAA;AAAA,MACA,OAAAL;AAAA,MACA,YAAAC;AAAA,MACA,OAAAT;AAAA,MACA,YAAAM;AAAA,MACA,YAAAC;AAAA,MACA,IAAIK;AAAA,MACJ,QAAO;AAAA,MACP,WAAAjB;AAAA,MAEA,UAAA,gBAAAO;AAAA,QAACV;AAAA,QAAA;AAAA,UACA,IAAIoB;AAAA,UACJ,WAAAnB;AAAA,UACA,UAAUa;AAAA,UACV,OAAAT;AAAA,UACA,MAAAE;AAAA,UACC,GAAGE;AAAA,UAEH,UAAAH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGH;AAEAO,EAAY,cAAc;"}

package/dist/components/form/super-select/form-super-select.module.css

@@ -0,0 +1,149 @@
+.root {
+	position: relative;
+	width: 100%;
+}
+
+.trigger {
+	width: 100%;
+	cursor: pointer;
+
+	/* Select large styles */
+	max-width: 100%;
+
+	--mds-padding: calc(var(--mds-form-control-padding) + 4px);
+
+	min-height: 3rem;
+	background-position: right 11px top 16px; /* we have to take into account the border */
+	padding: var(--mds-padding);
+	padding-right: calc(var(--mds-padding) + 24px); /* extra space for the icon */
+
+	color: var(--mds-form-control-base-foreground-value-color);
+	background-color: var(--mds-form-control-base-surface-color-default);
+	background-image: var(--mds-form-select-background-image-data-url);
+	background-repeat: no-repeat;
+	background-size: var(--mds-form-select-background-image-size) var(--mds-form-select-background-image-size);
+	border: var(--mds-form-control-border-width) solid var(--mds-form-control-base-border-color-default);
+	border-radius: var(--mds-form-control-border-radius);
+	box-shadow: var(--mds-elevation-low-box-shadow);
+	appearance: none;
+
+	/* STATUS */
+
+	&:hover {
+		border-color: var(--mds-form-control-base-border-color-hover);
+	}
+
+	/* focus (same for all the states) */
+
+	&:focus {
+		border-color: var(--mds-color-focus-action-internal);
+
+		/* Notice: Safari doesn't apply a rounded border */
+		outline: 3px solid var(--mds-color-focus-action-external);
+		outline-offset: 0;
+	}
+
+	/* DISABLED */
+
+	&:disabled {
+		color: var(--mds-form-control-disabled-foreground-color);
+		background-color: var(--mds-form-control-disabled-surface-color);
+		background-image: var(--mds-form-select-background-image-data-url-disabled);
+		border-color: var(--mds-form-control-disabled-border-color);
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+
+	composes: mds-typography-font-weight-regular from global;
+}
+
+.search-input-wrapper {
+	width: 100%;
+	padding: 11px 11px 1px 11px;
+	& input {
+		padding: 7px;
+	}
+}
+
+.popover {
+	overflow: hidden;
+	position: absolute;
+	top: calc(100% + 4px);
+	left: 0;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	background-color: var(--mds-color-surface-primary);
+	border-radius: 6px;
+	box-shadow: var(--mds-surface-high-box-shadow);
+	z-index: 2;
+}
+
+.list {
+	list-style: none;
+	margin: 0;
+	padding: 3px 0;
+	overflow-y: auto;
+}
+
+.option {
+	min-height: 36px;
+	padding: 7px 7px 7px 40px;
+	isolation: isolate; /* used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container) */
+	cursor: pointer;
+	position: relative; /* needed to have the pseudo element below text/icon but not the parent container */
+	line-height: var(--mds-typography-legacy-body-100-line-height);
+
+	&:hover,
+	&[data-vfocused='true'] {
+		& .option-text {
+			color: var(--mds-color-foreground-action-hover);
+
+			&::after {
+				display: block;
+			}
+		}
+	}
+}
+
+.option-text {
+	composes: mds-typography-font-weight-regular from global;
+	composes: mds-typography-legacy-body-200 from global;
+
+	/* the bar that appears when hovering or "focusing" on an option */
+	&::after {
+		position: absolute;
+		z-index: -1;
+		left: 4px;
+		width: 2px;
+		top: 6px;
+		bottom: 6px;
+		border-radius: 1px;
+		content: '';
+		background-color: var(--mds-color-foreground-action-hover);
+		display: none;
+	}
+}
+
+.interactive-icon {
+	display: block;
+	margin-top: 2px;
+}
+
+.interactive-icon-leading {
+	margin-right: 8px;
+}
+
+.interactive-icon-trailing {
+	margin-left: 8px;
+}
+
+.interactive-loading-wrapper {
+	display: flex;
+	align-items: center;
+	padding: 8px 10px 8px 16px;
+
+	& .interactive-icon {
+		color: var(--mds-color-foreground-primary);
+	}
+}

package/dist/components/form/super-select/index.d.ts

@@ -0,0 +1,56 @@
+import type { TComboBoxItem, ComboBoxSearchInputProps } from '../../combo-box-primitive';
+import type { FieldProps } from '../field';
+type SuperSelectSearchInputProps = ComboBoxSearchInputProps;
+interface SuperSelectOptionProps extends TComboBoxItem {
+    isLoading?: boolean;
+    /**
+     * Leading icon. Acceptable value: any [icon](https://helios.hashicorp.design/icons/library) name.
+     */
+    icon?: string;
+    /**
+     * Trailing icon. Acceptable value: any [icon](https://helios.hashicorp.design/icons/library) name.
+     */
+    trailingIcon?: string;
+    className?: string;
+}
+type TSuperSelectOption = TComboBoxItem;
+interface SuperSelectFieldProps extends Omit<FieldProps, 'children' | 'id' | 'layout'> {
+    id?: string;
+    options: SuperSelectOptionProps[];
+    /**
+     * @default false
+     */
+    searchProps?: SuperSelectSearchInputProps;
+    /**
+     * Used for assistive technologies,
+     * indicate the category of options you are presenting
+     * eg. Schools | Languages | Countries
+     */
+    listLabel: string;
+    /**
+     * Is actually a `max-height` for the list.
+     * Pass this when you have a lot of options and want to limit the height of the list.
+     * @default `240px`
+     */
+    listHeight?: `${number}em` | `${number}px` | `${number}%`;
+    /**
+     * Callback for when the list is scrolled.
+     * This is useful for implementing pagination, recommended for large lists.
+     */
+    onScroll?: (e: React.UIEvent<HTMLUListElement>) => void;
+    onChangeSelectedOption?: (option: SuperSelectOptionProps) => void;
+    onChangeVFocusedOption?: (option: SuperSelectOptionProps) => void;
+    onSearchBlur?: () => void;
+}
+/**
+ * Convenience component for using {@link SuperSelect}
+ * with a {@link Field} component. This should cover most use cases
+ * unless you need advanced patterns like pagination, async options, etc. outside of a form context.
+ */
+declare const SuperSelectField: {
+    ({ label, helperText, error, id, searchProps, options, listLabel, listHeight, onScroll, onChangeSelectedOption, onChangeVFocusedOption, onSearchBlur, ...rest }: SuperSelectFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { TSuperSelectOption, SuperSelectOptionProps, SuperSelectSearchInputProps, };
+export { SuperSelectField };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/super-select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/super-select/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACX,aAAa,EACb,wBAAwB,EAExB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AA4C1C,KAAK,2BAA2B,GAAG,wBAAwB,CAAA;AAyC3D,UAAU,sBAAuB,SAAQ,aAAa;IACrD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAyDD,KAAK,kBAAkB,GAAG,aAAa,CAAA;AAgBvC,UAAU,qBAAsB,SAAQ,IAAI,CAC3C,UAAU,EACV,UAAU,GAAG,IAAI,GAAG,QAAQ,CAC5B;IACA,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,2BAA2B,CAAA;IACzC;;;;OAIG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,GAAG,MAAM,IAAI,GAAG,GAAG,MAAM,IAAI,GAAG,GAAG,MAAM,GAAG,CAAA;IACzD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACvD,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAA;IACjE,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAA;IACjE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB;AAED;;;;GAIG;AACH,QAAA,MAAM,gBAAgB;qKAcnB,qBAAqB;;CAwCvB,CAAA;AAID,YAAY,EACX,kBAAkB,EAClB,sBAAsB,EACtB,2BAA2B,GAC3B,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/form/super-select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/super-select/index.tsx"],"sourcesContent":["import { useId } from 'react'\nimport classNames from 'classnames'\nimport { Field } from '../field'\nimport { FlightIcon } from '../../flight-icon'\nimport { ComboBox } from '../../combo-box-primitive'\nimport type {\n\tTComboBoxItem,\n\tComboBoxSearchInputProps,\n\tComboBoxListProps,\n} from '../../combo-box-primitive'\nimport type { FieldProps } from '../field'\nimport s from './form-super-select.module.css'\n\ntype SuperSelectRootProps = {\n\tchildren: React.ReactNode\n\tonChangeSelectedOption?: (option: TComboBoxItem) => void\n\tonChangeVFocusedOption?: (option: TComboBoxItem) => void\n}\n\nconst SuperSelectRoot = ({\n\tchildren,\n\tonChangeSelectedOption,\n\tonChangeVFocusedOption,\n}: SuperSelectRootProps) => {\n\treturn (\n\t\t<ComboBox.Root\n\t\t\tonChangeSelectedOption={onChangeSelectedOption}\n\t\t\tonChangeVFocusedOption={onChangeVFocusedOption}\n\t\t>\n\t\t\t<div className={s.root}>{children}</div>\n\t\t</ComboBox.Root>\n\t)\n}\n\ninterface SuperSelectTriggerProps {\n\tclassName?: string\n}\n\nconst SuperSelectTrigger = ({ className }: SuperSelectTriggerProps) => {\n\treturn (\n\t\t<ComboBox.Trigger className={classNames(s.trigger, className)}>\n\t\t\t<ComboBox.Value />\n\t\t</ComboBox.Trigger>\n\t)\n}\n\ntype SuperSelectPopoverProps = {\n\tchildren: React.ReactNode\n}\n\nconst SuperSelectPopover = ({ children }: SuperSelectPopoverProps) => {\n\treturn <ComboBox.Popover className={s.popover}>{children}</ComboBox.Popover>\n}\n\ntype SuperSelectSearchInputProps = ComboBoxSearchInputProps\n\nconst SuperSelectSearchInput = ({\n\tplaceholder = 'Search',\n\tvalue,\n\tonChange,\n\tonBlur,\n}: SuperSelectSearchInputProps) => {\n\treturn (\n\t\t<div className={s['search-input-wrapper']}>\n\t\t\t<ComboBox.SearchInput\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={onChange}\n\t\t\t\tonBlur={onBlur}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n\ntype SuperSelectListProps = ComboBoxListProps\n\nconst SuperSelectList = ({\n\tlabel,\n\tchildren,\n\tclassName,\n\tmaxHeight,\n\tonScroll,\n}: SuperSelectListProps) => {\n\treturn (\n\t\t<ComboBox.List\n\t\t\tlabel={label}\n\t\t\tclassName={classNames(s.list, className)}\n\t\t\tmaxHeight={maxHeight}\n\t\t\tonScroll={onScroll}\n\t\t>\n\t\t\t{children}\n\t\t</ComboBox.List>\n\t)\n}\n\ninterface SuperSelectOptionProps extends TComboBoxItem {\n\tisLoading?: boolean\n\t/**\n\t * Leading icon. Acceptable value: any [icon](https://helios.hashicorp.design/icons/library) name.\n\t */\n\ticon?: string\n\t/**\n\t * Trailing icon. Acceptable value: any [icon](https://helios.hashicorp.design/icons/library) name.\n\t */\n\ttrailingIcon?: string\n\tclassName?: string\n}\n\nconst SuperSelectOption = ({\n\tvalue,\n\tlabel,\n\tisLoading,\n\ticon,\n\tclassName,\n\ttrailingIcon,\n}: SuperSelectOptionProps) => {\n\treturn (\n\t\t<ComboBox.Item\n\t\t\tvalue={value}\n\t\t\tlabel={label}\n\t\t\tclassName={classNames(s.option, className)}\n\t\t>\n\t\t\t{isLoading ? (\n\t\t\t\t<div className={s['interactive-loading-wrapper']}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\ts['interactive-icon'],\n\t\t\t\t\t\t\ts['interactive-icon-leading'],\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlightIcon name=\"loading\" isInlineBlock={false} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<span className={s['option-text']}>{label}</span>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{icon && (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\ts['interactive-icon'],\n\t\t\t\t\t\t\t\ts['interactive-icon-leading'],\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlightIcon name={icon} isInlineBlock={false} />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t\t<span className={s['option-text']}>{label}</span>\n\t\t\t\t\t{trailingIcon && (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\ts['interactive-icon'],\n\t\t\t\t\t\t\t\ts['interactive-icon-trailing'],\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlightIcon name={trailingIcon} isInlineBlock={false} />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</ComboBox.Item>\n\t)\n}\n\ntype TSuperSelectOption = TComboBoxItem\n\nconst SuperSelect = Object.freeze({\n\tRoot: SuperSelectRoot,\n\tTrigger: SuperSelectTrigger,\n\tPopover: SuperSelectPopover,\n\t/**\n\t * Note that this only acts as a view layer,\n\t * it does not participate in the search logic.\n\t * This is left for the consumer to implement.\n\t */\n\tSearchInput: SuperSelectSearchInput,\n\tList: SuperSelectList,\n\tOption: SuperSelectOption,\n})\n\ninterface SuperSelectFieldProps extends Omit<\n\tFieldProps,\n\t'children' | 'id' | 'layout'\n> {\n\tid?: string\n\toptions: SuperSelectOptionProps[]\n\t/**\n\t * @default false\n\t */\n\tsearchProps?: SuperSelectSearchInputProps\n\t/**\n\t * Used for assistive technologies,\n\t * indicate the category of options you are presenting\n\t * eg. Schools | Languages | Countries\n\t */\n\tlistLabel: string\n\t/**\n\t * Is actually a `max-height` for the list.\n\t * Pass this when you have a lot of options and want to limit the height of the list.\n\t * @default `240px`\n\t */\n\tlistHeight?: `${number}em` | `${number}px` | `${number}%`\n\t/**\n\t * Callback for when the list is scrolled.\n\t * This is useful for implementing pagination, recommended for large lists.\n\t */\n\tonScroll?: (e: React.UIEvent<HTMLUListElement>) => void\n\tonChangeSelectedOption?: (option: SuperSelectOptionProps) => void\n\tonChangeVFocusedOption?: (option: SuperSelectOptionProps) => void\n\tonSearchBlur?: () => void\n}\n\n/**\n * Convenience component for using {@link SuperSelect}\n * with a {@link Field} component. This should cover most use cases\n * unless you need advanced patterns like pagination, async options, etc. outside of a form context.\n */\nconst SuperSelectField = ({\n\tlabel,\n\thelperText,\n\terror,\n\tid,\n\tsearchProps,\n\toptions,\n\tlistLabel,\n\tlistHeight = '240px',\n\tonScroll,\n\tonChangeSelectedOption,\n\tonChangeVFocusedOption,\n\tonSearchBlur,\n\t...rest\n}: SuperSelectFieldProps) => {\n\tconst genID = useId()\n\tconst fieldId = id ?? genID\n\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\tid={fieldId}\n\t\t\tlayout={'vertical'}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<SuperSelect.Root\n\t\t\t\tonChangeSelectedOption={onChangeSelectedOption}\n\t\t\t\tonChangeVFocusedOption={onChangeVFocusedOption}\n\t\t\t>\n\t\t\t\t<SuperSelect.Trigger />\n\t\t\t\t<SuperSelect.Popover>\n\t\t\t\t\t{searchProps && (\n\t\t\t\t\t\t<SuperSelect.SearchInput\n\t\t\t\t\t\t\tplaceholder={searchProps.placeholder}\n\t\t\t\t\t\t\tvalue={searchProps.value}\n\t\t\t\t\t\t\tonChange={searchProps.onChange}\n\t\t\t\t\t\t\tonBlur={onSearchBlur}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<SuperSelect.List\n\t\t\t\t\t\tlabel={listLabel}\n\t\t\t\t\t\tmaxHeight={listHeight}\n\t\t\t\t\t\tonScroll={onScroll}\n\t\t\t\t\t>\n\t\t\t\t\t\t{options.map((option) => (\n\t\t\t\t\t\t\t<SuperSelect.Option key={option.value} {...option} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</SuperSelect.List>\n\t\t\t\t</SuperSelect.Popover>\n\t\t\t</SuperSelect.Root>\n\t\t</Field>\n\t)\n}\n\nSuperSelectField.displayName = 'SuperSelectField'\n\nexport type {\n\tTSuperSelectOption,\n\tSuperSelectOptionProps,\n\tSuperSelectSearchInputProps,\n}\n\nexport { SuperSelectField }\n"],"names":["SuperSelectRoot","children","onChangeSelectedOption","onChangeVFocusedOption","jsx","ComboBox","s","SuperSelectTrigger","className","classNames","SuperSelectPopover","SuperSelectSearchInput","placeholder","value","onChange","onBlur","SuperSelectList","label","maxHeight","onScroll","SuperSelectOption","isLoading","icon","trailingIcon","jsxs","FlightIcon","Fragment","SuperSelect","SuperSelectField","helperText","error","id","searchProps","options","listLabel","listHeight","onSearchBlur","rest","genID","useId","Field","option"],"mappings":"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"}

package/dist/components/form/text-input/index.d.ts

@@ -0,0 +1,99 @@
+import type { HTMLInputTypeAttribute, HTMLProps, ReactNode } from 'react';
+interface TextInputBaseProps {
+    /**
+     * Sets the native HTML `type` of the `<input>`.
+     */
+    type?: HTMLInputTypeAttribute;
+    /**
+     * Applies an “invalid” appearance to the control but doesn’t modify its logical validity.
+     */
+    isInvalid?: boolean;
+    /**
+     * When true, it shows a loading indicator instead of a magnifying glass; only applicable when `type="search"`.
+     */
+    isLoading?: boolean;
+    isRequired?: boolean;
+    className?: string;
+    id?: string;
+    /**
+     * Can be used to supply any props that the native `<input>` element supports (such as `value`, `placeholder`, in addition to events like `onChange` and `onBlur`)
+     */
+    field: HTMLProps<HTMLInputElement>;
+    /**
+     * Sets the size of the input to match either medium Buttons or large Buttons.
+     */
+    size?: 'medium' | 'large';
+    error?: ReactNode;
+    disabled?: boolean;
+}
+declare const TextInputBase: {
+    ({ type, isInvalid, isLoading, isRequired, className, id, field, size, error, ...rest }: TextInputBaseProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface TextInputProps {
+    /**
+     * When provided, appends a badge next to the label text.
+     */
+    badgeText?: string;
+    /**
+     * Sets the native HTML `type` of the `<input>`.
+     */
+    type?: HTMLInputTypeAttribute;
+    /**
+     * Applies an “invalid” appearance to the control but doesn’t modify its logical validity.
+     */
+    isInvalid?: boolean;
+    /**
+     * When true, it shows a loading indicator instead of a magnifying glass; only applicable when `type="search"`.
+     */
+    isLoading?: boolean;
+    /**
+     * Appends a `Required` indicator next to the label text and sets the `required` attribute on the control when user input is required.
+     */
+    isRequired?: boolean;
+    /**
+     * Appends an `Optional` indicator next to the label text when user input is optional.
+     */
+    isOptional?: boolean;
+    /**
+     * Input control’s ID attribute.
+     *
+     * By default, the ID is automatically generated by the component. Use this argument to pass a custom ID.
+     */
+    id?: string;
+    /**
+     * Container that renders its content inside the `<label>` element. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.
+     *
+     * The `for` attribute of the label is automatically generated using the `controlId` value of the control.
+     */
+    label?: ReactNode;
+    /**
+     * Container that renders its content inside the "helper text" block. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.
+     *
+     * The `id` attribute of the message is automatically generated using the `controlId` value of the control.
+     */
+    helperText?: ReactNode;
+    /**
+     * Container that renders its content inside the "error" block. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.
+     *
+     * The `id` attribute of the error message is automatically generated using the `controlId` value of the control.
+     */
+    error?: ReactNode;
+    /**
+     * Can be used to supply any props that the native `<input>` element supports (such as `value`, `placeholder`, in addition to events like `onChange` and `onBlur`)
+     */
+    field: HTMLProps<HTMLInputElement>;
+    className?: string;
+    /**
+     * Sets the size of the input to match either medium Buttons or large Buttons.
+     */
+    size?: 'medium' | 'large';
+    disabled?: boolean;
+}
+declare const TextInput: {
+    ({ badgeText, type, isInvalid, isLoading, isRequired, isOptional, id, label, helperText, error, field, className, size, ...rest }: TextInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { TextInputBaseProps, TextInputProps };
+export { TextInputBase, TextInput };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/text-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/text-input/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKzE,UAAU,kBAAkB;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,sBAAsB,CAAA;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAElC;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,aAAa;6FAWhB,kBAAkB;;CAuBpB,CAAA;AAID,UAAU,cAAc;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,sBAAsB,CAAA;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAA;IAEtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,SAAS;uIAeZ,cAAc;;CA4BhB,CAAA;AAID,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/form/text-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/text-input/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { HTMLInputTypeAttribute, HTMLProps, ReactNode } from 'react'\nimport { useId } from 'react'\nimport { Field } from '../field'\nimport s from './styles.module.css'\n\ninterface TextInputBaseProps {\n\t/**\n\t * Sets the native HTML `type` of the `<input>`.\n\t */\n\ttype?: HTMLInputTypeAttribute\n\n\t/**\n\t * Applies an “invalid” appearance to the control but doesn’t modify its logical validity.\n\t */\n\tisInvalid?: boolean\n\n\t/**\n\t * When true, it shows a loading indicator instead of a magnifying glass; only applicable when `type=\"search\"`.\n\t */\n\tisLoading?: boolean\n\tisRequired?: boolean\n\tclassName?: string\n\tid?: string\n\n\t/**\n\t * Can be used to supply any props that the native `<input>` element supports (such as `value`, `placeholder`, in addition to events like `onChange` and `onBlur`)\n\t */\n\tfield: HTMLProps<HTMLInputElement>\n\n\t/**\n\t * Sets the size of the input to match either medium Buttons or large Buttons.\n\t */\n\tsize?: 'medium' | 'large'\n\terror?: ReactNode\n\tdisabled?: boolean\n}\n\nconst TextInputBase = ({\n\ttype,\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tclassName,\n\tid,\n\tfield,\n\tsize = 'medium',\n\terror,\n\t...rest\n}: TextInputBaseProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<input\n\t\t\tid={inputId}\n\t\t\ttype={type}\n\t\t\tclassName={classNames(\n\t\t\t\ts['text-input'],\n\t\t\t\ts[`size-${size}`],\n\t\t\t\t{\n\t\t\t\t\t[s['invalid']]: isInvalid,\n\t\t\t\t\t[s['loading']]: isLoading,\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\trequired={isRequired}\n\t\t\taria-describedby={`${error ? 'error' : 'helper-text'}-${id}`}\n\t\t\t{...field}\n\t\t\t{...rest}\n\t\t/>\n\t)\n}\n\nTextInputBase.displayName = 'TextInputBase'\n\ninterface TextInputProps {\n\t/**\n\t * When provided, appends a badge next to the label text.\n\t */\n\tbadgeText?: string\n\n\t/**\n\t * Sets the native HTML `type` of the `<input>`.\n\t */\n\ttype?: HTMLInputTypeAttribute\n\n\t/**\n\t * Applies an “invalid” appearance to the control but doesn’t modify its logical validity.\n\t */\n\tisInvalid?: boolean\n\n\t/**\n\t * When true, it shows a loading indicator instead of a magnifying glass; only applicable when `type=\"search\"`.\n\t */\n\tisLoading?: boolean\n\n\t/**\n\t * Appends a `Required` indicator next to the label text and sets the `required` attribute on the control when user input is required.\n\t */\n\tisRequired?: boolean\n\n\t/**\n\t * Appends an `Optional` indicator next to the label text when user input is optional.\n\t */\n\tisOptional?: boolean\n\n\t/**\n\t * Input control’s ID attribute.\n\t *\n\t * By default, the ID is automatically generated by the component. Use this argument to pass a custom ID.\n\t */\n\tid?: string\n\n\t/**\n\t * Container that renders its content inside the `<label>` element. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.\n\t *\n\t * The `for` attribute of the label is automatically generated using the `controlId` value of the control.\n\t */\n\tlabel?: ReactNode\n\n\t/**\n\t * Container that renders its content inside the \"helper text\" block. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.\n\t *\n\t * The `id` attribute of the message is automatically generated using the `controlId` value of the control.\n\t */\n\thelperText?: ReactNode\n\n\t/**\n\t * Container that renders its content inside the \"error\" block. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.\n\t *\n\t * The `id` attribute of the error message is automatically generated using the `controlId` value of the control.\n\t */\n\terror?: ReactNode\n\n\t/**\n\t * Can be used to supply any props that the native `<input>` element supports (such as `value`, `placeholder`, in addition to events like `onChange` and `onBlur`)\n\t */\n\tfield: HTMLProps<HTMLInputElement>\n\tclassName?: string\n\n\t/**\n\t * Sets the size of the input to match either medium Buttons or large Buttons.\n\t */\n\tsize?: 'medium' | 'large'\n\tdisabled?: boolean\n}\n\nconst TextInput = ({\n\tbadgeText,\n\ttype = 'text',\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tclassName,\n\tsize = 'medium',\n\t...rest\n}: TextInputProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\tbadgeText={badgeText}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\tisRequired={isRequired}\n\t\t\tisOptional={isOptional}\n\t\t\tid={inputId}\n\t\t\tlayout=\"vertical\"\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<TextInputBase\n\t\t\t\tid={inputId}\n\t\t\t\ttype={type}\n\t\t\t\tisInvalid={isInvalid}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tisRequired={isRequired}\n\t\t\t\tfield={field}\n\t\t\t\tsize={size}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</Field>\n\t)\n}\n\nTextInput.displayName = 'TextInput'\n\nexport type { TextInputBaseProps, TextInputProps }\nexport { TextInputBase, TextInput }\n"],"names":["TextInputBase","type","isInvalid","isLoading","isRequired","className","id","field","size","error","rest","generatedId","useId","jsx","classNames","s","TextInput","badgeText","isOptional","label","helperText","inputId","Field"],"mappings":";;;;;AAsCA,MAAMA,IAAgB,CAAC;AAAA,EACtB,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,GAAGC;AACJ,MAA0B;AACzB,QAAMC,IAAcC,EAAA;AAGpB,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,IAJcP,KAAMK;AAAA,MAKpB,MAAAV;AAAA,MACA,WAAWa;AAAA,QACVC,EAAE,YAAY;AAAA,QACdA,EAAE,QAAQP,CAAI,EAAE;AAAA,QAChB;AAAA,UACC,CAACO,EAAE,OAAU,GAAGb;AAAA,UAChB,CAACa,EAAE,OAAU,GAAGZ;AAAA,QAAA;AAAA,QAEjBE;AAAA,MAAA;AAAA,MAED,UAAUD;AAAA,MACV,oBAAkB,GAAGK,IAAQ,UAAU,aAAa,IAAIH,CAAE;AAAA,MACzD,GAAGC;AAAA,MACH,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAV,EAAc,cAAc;AA0E5B,MAAMgB,IAAY,CAAC;AAAA,EAClB,WAAAC;AAAA,EACA,MAAAhB,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAc;AAAA,EACA,IAAAZ;AAAA,EACA,OAAAa;AAAA,EACA,YAAAC;AAAA,EACA,OAAAX;AAAA,EACA,OAAAF;AAAA,EACA,WAAAF;AAAA,EACA,MAAAG,IAAO;AAAA,EACP,GAAGE;AACJ,MAAsB;AACrB,QAAMC,IAAcC,EAAA,GACdS,IAAUf,KAAMK;AAEtB,SACC,gBAAAE;AAAA,IAACS;AAAA,IAAA;AAAA,MACA,OAAAH;AAAA,MACA,WAAAF;AAAA,MACA,YAAAG;AAAA,MACA,OAAAX;AAAA,MACA,YAAAL;AAAA,MACA,YAAAc;AAAA,MACA,IAAIG;AAAA,MACJ,QAAO;AAAA,MACP,WAAAhB;AAAA,MAEA,UAAA,gBAAAQ;AAAA,QAACb;AAAA,QAAA;AAAA,UACA,IAAIqB;AAAA,UACJ,MAAApB;AAAA,UACA,WAAAC;AAAA,UACA,WAAAC;AAAA,UACA,YAAAC;AAAA,UACA,OAAAG;AAAA,UACA,MAAAC;AAAA,UACC,GAAGE;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;AAEAM,EAAU,cAAc;"}

package/dist/components/form/text-input/styles.module.css

@@ -0,0 +1,144 @@
+.text-input {
+	composes: mds-typography-font-weight-regular from global;
+	width: 100%;
+	max-width: 100%;
+	padding: var(--mds-form-control-padding);
+	color: var(--mds-form-control-base-foreground-value-color);
+	background-color: var(--mds-form-control-base-surface-color-default);
+	border: var(--mds-form-control-border-width) solid var(--mds-form-control-base-border-color-default);
+	border-radius: var(--mds-form-control-border-radius);
+	box-shadow: var(--mds-elevation-inset-box-shadow);
+
+	/* PLACEHOLDER */
+
+	&::placeholder {
+		color: var(--mds-form-control-base-foreground-placeholder-color);
+	}
+
+	/* STATUS */
+
+	&:hover,
+	&.mock-hover {
+		border-color: var(--mds-form-control-base-border-color-hover);
+	}
+
+	/* focus (same for all the states) */
+
+	&:focus,
+	&.mock-focus {
+		border-color: var(--mds-color-focus-action-internal);
+		outline: 3px solid var(--mds-color-focus-action-external);
+		outline-offset: 0;
+	}
+
+	/* READONLY */
+
+	&:read-only {
+		color: var(--mds-form-control-readonly-foreground-color);
+		background-color: var(--mds-form-control-readonly-surface-color);
+		border-color: var(--mds-form-control-readonly-border-color);
+		box-shadow: none;
+	}
+
+	/* DISABLED */
+
+	&:disabled {
+		color: var(--mds-form-control-disabled-foreground-color);
+		background-color: var(--mds-form-control-disabled-surface-color);
+		border-color: var(--mds-form-control-disabled-border-color);
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+
+	/* INVALID */
+
+	&.invalid {
+		border-color: var(--mds-form-control-invalid-border-color-default);
+
+		&:hover,
+		&.mock-hover {
+			border-color: var(--mds-form-control-invalid-border-color-hover);
+		}
+
+		&:focus,
+		&.mock-focus {
+			border-color: var(--mds-color-focus-critical-internal);
+			outline-color: var(--mds-color-focus-critical-external);
+		}
+	}
+
+	/* DATE/TIME */
+	&[type='month'],
+	&[type='date'],
+	&[type='time'],
+	&[type='datetime-local'] {
+		/* browsers set a specific width for these controls, we want to keep it */
+		width: initial;
+
+		/* show the native icon dimmed if disabled (hidden in Chrome) */
+		&:disabled::-webkit-calendar-picker-indicator {
+			visibility: visible;
+			opacity: 0.5;
+		}
+
+		/* show the icon if readonly
+    notice: don't change the "[readonly]" selector to ":readonly" because it's needed to overwrite the specificity in Chrome */
+		&[readonly]::-webkit-calendar-picker-indicator {
+			visibility: visible;
+		}
+	}
+
+	/* we override the default icon with the Flight corresponding one
+  notice: the original in Chrome has two assets, one for light and one for dark mode, and uses a special syntax, but apparently it doesn't work if used in a stylesheet */
+	&[type='month'],
+	&[type='date'],
+	&[type='datetime-local'] {
+		&::-webkit-calendar-picker-indicator {
+			background-image: var(--mds-form-text-input-background-image-data-url-date);
+			background-position: center center;
+			background-size: var(--mds-form-text-input-background-image-size);
+		}
+	}
+
+	&[type='time'] {
+		&::-webkit-calendar-picker-indicator {
+			background-image: var(--mds-form-text-input-background-image-data-url-time);
+			background-position: center center;
+			background-size: var(--mds-form-text-input-background-image-size);
+		}
+	}
+
+	/* SEARCH */
+	&[type='search'] {
+		padding-left: calc(var(--mds-form-control-padding) + 24px);
+		background-image: var(--mds-form-text-input-background-image-data-url-search);
+		background-repeat: no-repeat;
+		background-position: var(--mds-form-text-input-background-image-position-x) 50%;
+		background-size: var(--mds-form-text-input-background-image-size);
+
+		&::-webkit-search-cancel-button {
+			width: var(--mds-form-text-input-background-image-size);
+			height: var(--mds-form-text-input-background-image-size);
+			background-image: var(--mds-form-text-input-background-image-data-url-search-cancel);
+			background-position: center center;
+			background-size: var(--mds-form-text-input-background-image-size);
+			-webkit-appearance: none;
+		}
+
+		&.loading {
+			background-image: var(--mds-form-text-input-background-image-data-url-search-loading);
+		}
+	}
+}
+
+/* this is essentially a no-op since the base styles are already medium-sized */
+.size-medium {
+	composes: mds-typography-legacy-body-200 from global;
+	padding: var(--mds-form-control-padding);
+}
+
+.size-large {
+	composes: mds-typography-legacy-body-300 from global;
+	padding: 11px;
+	min-height: 3rem;
+}

package/dist/components/form/textarea/form-textarea.module.css

@@ -0,0 +1,87 @@
+/*
+* FORM > TEXTAREA
+*/
+
+/* "BASE" CONTROL */
+
+.textarea {
+	composes: mds-typography-font-weight-regular from global;
+	width: 100%;
+	max-width: 100%;
+	min-height: 36px;
+	padding: var(--mds-form-control-padding);
+	color: var(--mds-form-control-base-foreground-value-color);
+	background-color: var(--mds-form-control-base-surface-color-default);
+	border: var(--mds-form-control-border-width) solid var(--mds-form-control-base-border-color-default);
+	border-radius: var(--mds-form-control-border-radius);
+	box-shadow: var(--mds-elevation-inset-box-shadow);
+	resize: vertical;
+
+	/* PLACEHOLDER */
+
+	&::placeholder {
+		color: var(--mds-form-control-base-foreground-placeholder-color);
+	}
+
+	/* STATUS */
+
+	&:hover {
+		border-color: var(--mds-form-control-base-border-color-hover);
+	}
+
+	/* focus (same for all the states) */
+
+	&:focus {
+		border-color: var(--mds-color-focus-action-internal);
+
+		/* Notice: Safari doesn't apply a rounded border */
+		outline: 3px solid var(--mds-color-focus-action-external);
+		outline-offset: 0;
+	}
+
+	/* READONLY */
+
+	&:read-only {
+		color: var(--mds-form-control-readonly-foreground-color);
+		background-color: var(--mds-form-control-readonly-surface-color);
+		border-color: var(--mds-form-control-readonly-border-color);
+		box-shadow: none;
+	}
+
+	/* DISABLED */
+
+	&:disabled {
+		color: var(--mds-form-control-disabled-foreground-color);
+		background-color: var(--mds-form-control-disabled-surface-color);
+		border-color: var(--mds-form-control-disabled-border-color);
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+
+	/* INVALID */
+
+	&.invalid {
+		border-color: var(--mds-form-control-invalid-border-color-default);
+
+		&:hover {
+			border-color: var(--mds-form-control-invalid-border-color-hover);
+		}
+
+		&:focus {
+			border-color: var(--mds-color-focus-critical-internal);
+			outline-color: var(--mds-color-focus-critical-external);
+		}
+	}
+}
+
+/* this is essentially a no-op since the base styles are already medium-sized */
+.medium {
+	composes: mds-typography-legacy-body-200 from global;
+	padding: var(--mds-form-control-padding);
+}
+
+.large {
+	composes: mds-typography-legacy-body-300 from global;
+	padding: 11px;
+	min-height: 5rem;
+}

package/dist/components/form/textarea/index.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLProps, ReactNode } from 'react';
+interface TextAreaFieldProps {
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    isRequired?: boolean;
+    isOptional?: boolean;
+    id?: string;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    field: HTMLProps<HTMLTextAreaElement>;
+    size?: 'medium' | 'large';
+    disabled?: boolean;
+}
+declare const TextAreaField: {
+    ({ isInvalid, isLoading, isRequired, isOptional, id, label, helperText, error, field, size, ...rest }: TextAreaFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { TextAreaField };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/textarea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/textarea/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AA2CjD,UAAU,kBAAkB;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAA;IACrC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,aAAa;2GAYhB,kBAAkB;;CAyBpB,CAAA;AAID,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/form/textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/textarea/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { useId } from 'react'\nimport { Field } from '../field'\nimport type { HTMLProps, ReactNode } from 'react'\nimport s from './form-textarea.module.css'\n\ninterface TextAreaBaseProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\trequired?: boolean\n\tclassName?: string\n\tid: string\n\tfield: HTMLProps<HTMLTextAreaElement>\n\tsize: 'medium' | 'large'\n\terror?: ReactNode\n\tdisabled?: boolean\n}\n\nconst TextAreaBase = ({\n\tisInvalid,\n\tisLoading,\n\tclassName,\n\tid,\n\tfield,\n\tsize,\n\terror,\n\t...rest\n}: TextAreaBaseProps) => {\n\treturn (\n\t\t<textarea\n\t\t\tid={id}\n\t\t\tclassName={classNames(\n\t\t\t\ts.textarea,\n\t\t\t\ts[size],\n\t\t\t\t{\n\t\t\t\t\t[s.invalid]: isInvalid,\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\taria-describedby={`${error ? 'error' : 'helper-text'}-${id}`}\n\t\t\t{...field}\n\t\t\t{...rest}\n\t\t/>\n\t)\n}\n\ninterface TextAreaFieldProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tid?: string\n\tlabel?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tfield: HTMLProps<HTMLTextAreaElement>\n\tsize?: 'medium' | 'large'\n\tdisabled?: boolean\n}\n\nconst TextAreaField = ({\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tsize = 'medium',\n\t...rest\n}: TextAreaFieldProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\tisRequired={isRequired}\n\t\t\tisOptional={isOptional}\n\t\t\tid={inputId}\n\t\t\tlayout=\"vertical\"\n\t\t>\n\t\t\t<TextAreaBase\n\t\t\t\tid={inputId}\n\t\t\t\tisInvalid={isInvalid}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\trequired={isRequired}\n\t\t\t\tfield={field}\n\t\t\t\tsize={size}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</Field>\n\t)\n}\n\nTextAreaField.displayName = 'TextAreaField'\n\nexport { TextAreaField }\n"],"names":["TextAreaBase","isInvalid","isLoading","className","id","field","size","error","rest","jsx","classNames","s","TextAreaField","isRequired","isOptional","label","helperText","generatedId","useId","inputId","Field"],"mappings":";;;;;AAkBA,MAAMA,IAAe,CAAC;AAAA,EACrB,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,IAAAL;AAAA,IACA,WAAWM;AAAA,MACVC,EAAE;AAAA,MACFA,EAAEL,CAAI;AAAA,MACN;AAAA,QACC,CAACK,EAAE,OAAO,GAAGV;AAAA,MAAA;AAAA,MAEdE;AAAA,IAAA;AAAA,IAED,oBAAkB,GAAGI,IAAQ,UAAU,aAAa,IAAIH,CAAE;AAAA,IACzD,GAAGC;AAAA,IACH,GAAGG;AAAA,EAAA;AAAA,GAmBDI,IAAgB,CAAC;AAAA,EACtB,WAAAX;AAAA,EACA,WAAAC;AAAA,EACA,YAAAW;AAAA,EACA,YAAAC;AAAA,EACA,IAAAV;AAAA,EACA,OAAAW;AAAA,EACA,YAAAC;AAAA,EACA,OAAAT;AAAA,EACA,OAAAF;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGE;AACJ,MAA0B;AACzB,QAAMS,IAAcC,EAAA,GACdC,IAAUf,KAAMa;AAEtB,SACC,gBAAAR;AAAA,IAACW;AAAA,IAAA;AAAA,MACA,OAAAL;AAAA,MACA,YAAAC;AAAA,MACA,OAAAT;AAAA,MACA,YAAAM;AAAA,MACA,YAAAC;AAAA,MACA,IAAIK;AAAA,MACJ,QAAO;AAAA,MAEP,UAAA,gBAAAV;AAAA,QAACT;AAAA,QAAA;AAAA,UACA,IAAImB;AAAA,UACJ,WAAAlB;AAAA,UACA,WAAAC;AAAA,UACA,UAAUW;AAAA,UACV,OAAAR;AAAA,UACA,MAAAC;AAAA,UACC,GAAGE;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;AAEAI,EAAc,cAAc;"}