untitledui 0.1.5 → 0.1.8

package/templates/default/src/components/shared/select/select-item.tsx

@@ -1,70 +0,0 @@
-"use client";
-
-import { useContext } from "react";
-import { Check } from "@untitledui/icons";
-import type { ListBoxItemProps as AriaListBoxItemProps } from "react-aria-components";
-import { ListBoxItem as AriaListBoxItem, Text } from "react-aria-components";
-import Avatar from "@/components/shared/avatar/avatar";
-import { cx } from "@/components/utils/cx";
-import type { SelectItemType } from "./select";
-import { SelectContext } from "./select";
-
-const sizes = {
-    sm: "p-2 pr-2.5",
-    md: "p-2.5 pl-2",
-};
-
-interface SelectItemProps extends Omit<AriaListBoxItemProps<SelectItemType>, "id">, SelectItemType {}
-
-export const SelectItem = ({ label, id, value, avatarUrl, supportingText, isDisabled, icon: Icon, className, children, ...props }: SelectItemProps) => {
-    const { size } = useContext(SelectContext);
-
-    const textValue = supportingText ? label + " " + supportingText : label;
-
-    return (
-        <AriaListBoxItem
-            id={id}
-            value={value as unknown as object}
-            textValue={textValue}
-            isDisabled={isDisabled}
-            {...props}
-            className={(state) => cx("w-full px-1.5 py-px outline-hidden", typeof className === "function" ? className(state) : className)}
-        >
-            {(state) => (
-                <div
-                    className={cx(
-                        "flex cursor-pointer items-center gap-2 rounded-md outline-hidden select-none",
-                        state.isSelected && "bg-active",
-                        state.isDisabled && "cursor-not-allowed",
-                        state.isFocused && "bg-primary_hover",
-                        state.isFocusVisible && "ring-2 ring-focus-ring ring-inset",
-                        sizes[size],
-                    )}
-                >
-                    {avatarUrl ? (
-                        <Avatar aria-hidden="true" size="xs" src={avatarUrl} alt={label} />
-                    ) : Icon ? (
-                        <Icon aria-hidden="true" className={cx("size-5 shrink-0 text-fg-quaternary", state.isDisabled && "text-fg-disabled")} />
-                    ) : null}
-
-                    <section className="flex w-full min-w-0 flex-1 flex-wrap gap-x-2">
-                        <Text slot="label" className={cx("truncate tt-md-md whitespace-nowrap text-primary", state.isDisabled && "text-disabled")}>
-                            {label || (typeof children === "function" ? children(state) : children)}
-                        </Text>
-
-                        {supportingText && (
-                            <Text slot="description" className={cx("tt-md whitespace-nowrap text-tertiary", state.isDisabled && "text-disabled")}>
-                                {supportingText}
-                            </Text>
-                        )}
-                    </section>
-                    {state.isSelected && (
-                        <Check className={cx("ml-auto size-5 text-fg-brand-primary", state.isDisabled && "text-fg-disabled")} aria-hidden="true" />
-                    )}
-                </div>
-            )}
-        </AriaListBoxItem>
-    );
-};
-
-export default SelectItem;

package/templates/default/src/components/shared/select/select-native.tsx

@@ -1,63 +0,0 @@
-"use client";
-
-import { type ChangeEventHandler, useId } from "react";
-import { ChevronDown } from "@untitledui/icons";
-import HintText from "../input/hint-text";
-import Label from "../input/label";
-
-export const NativeSelect = (props: {
-    label?: string;
-    hint?: string;
-    value?: string;
-    options: { label: string; value: string; disabled?: boolean }[];
-    onChange?: ChangeEventHandler<HTMLSelectElement>;
-}) => {
-    const id = useId();
-    const selectId = `select-native-${id}`;
-    const hintId = `select-native-hint-${id}`;
-
-    return (
-        <div className="w-full">
-            {props.label && (
-                <Label htmlFor={selectId} id={selectId} className="mb-1.5">
-                    {props.label}
-                </Label>
-            )}
-
-            <div className="relative grid w-full items-center">
-                <select
-                    id={selectId}
-                    value={props.value}
-                    defaultValue="default"
-                    onChange={props.onChange}
-                    aria-describedby={hintId}
-                    aria-labelledby={selectId}
-                    className="appearance-none rounded-lg bg-primary px-3.5 py-2.5 tt-md-md text-primary shadow-xs ring-1 ring-border-primary outline-hidden transition duration-200 ease-in-out ring-inset placeholder:text-fg-quaternary focus:ring-2 focus:ring-border-brand disabled:cursor-not-allowed disabled:bg-disabled_subtle disabled:text-disabled"
-                >
-                    <option value="default" disabled defaultChecked>
-                        Select team member
-                    </option>
-                    {props.options.map((opt) => (
-                        <option key={opt.value} value={opt.value}>
-                            {opt.label}
-                        </option>
-                    ))}
-                </select>
-                <span className="absolute right-3.5">
-                    <ChevronDown aria-hidden="true" size={20} className="text-fg-quaternary" />
-                </span>
-            </div>
-
-            {props.hint && (
-                <HintText className="mt-2" id={hintId}>
-                    {props.hint}
-                </HintText>
-            )}
-        </div>
-    );
-};
-
-NativeSelect.args = {
-    label: "Team member",
-    hint: "This is a hint text to help user.",
-};

package/templates/default/src/components/shared/select/select.tsx

@@ -1,143 +0,0 @@
-"use client";
-
-import type { ReactNode, Ref, RefAttributes } from "react";
-import { createContext } from "react";
-import { ChevronDown, User01 } from "@untitledui/icons";
-import type { SelectProps as AriaSelectProps } from "react-aria-components";
-import { Button as AriaButton, ListBox as AriaListBox, Select as AriaSelect, SelectValue as AriaSelectValue } from "react-aria-components";
-import Avatar from "@/components/shared/avatar/avatar";
-import type { IconComponentType } from "@/components/shared/badges/badge-types";
-import HintText from "@/components/shared/input/hint-text";
-import Label from "@/components/shared/input/label";
-import { cx } from "@/components/utils/cx";
-import { ComboBox } from "./combobox";
-import { Popover } from "./popover";
-import Item from "./select-item";
-
-export type SelectItemType = {
-    id: string;
-    label?: string;
-    avatarUrl?: string;
-    isDisabled?: boolean;
-    supportingText?: string;
-    icon?: IconComponentType;
-};
-
-type Types = "default" | "iconLeading" | "avatarLeading" | "search" | "tags";
-type SelectTypes = "default" | "iconLeading" | "avatarLeading";
-
-export interface CommonProps {
-    hint?: string;
-    label?: string;
-    tooltip?: string;
-    size?: "sm" | "md";
-    placeholder?: string;
-}
-
-interface SelectProps extends Omit<AriaSelectProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
-    type?: SelectTypes;
-    items?: SelectItemType[];
-    popoverClassName?: string;
-    placeholderIcon?: IconComponentType;
-    children: ReactNode | ((item: SelectItemType) => ReactNode);
-}
-
-interface SelectValueProps {
-    isOpen: boolean;
-    size: "sm" | "md";
-    type: SelectTypes;
-    isFocused: boolean;
-    isDisabled: boolean;
-    placeholder?: string;
-    ref?: Ref<HTMLButtonElement>;
-    placeholderIcon?: IconComponentType;
-}
-
-export const sizes = {
-    sm: { root: "py-2 px-3", shortcut: "pr-2.5" },
-    md: { root: "py-2.5 px-3.5", shortcut: "pr-3" },
-};
-
-const SelectValue = (props: SelectValueProps) => {
-    return (
-        <AriaButton
-            className={cx(
-                "relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-border-primary outline-hidden transition duration-100 ease-linear ring-inset",
-                (props.isFocused || props.isOpen) && "ring-2 ring-border-brand",
-                props.isDisabled && "cursor-not-allowed bg-disabled_subtle text-disabled",
-            )}
-        >
-            <AriaSelectValue<SelectItemType>
-                className={cx("flex h-max w-full items-center justify-start gap-2 truncate text-left align-middle", sizes[props.size].root)}
-            >
-                {(state) => {
-                    const Icon = state?.selectedItem?.icon || props.placeholderIcon;
-
-                    return (
-                        <>
-                            {state?.selectedItem?.avatarUrl ? (
-                                <Avatar size="xs" src={state.selectedItem.avatarUrl} alt={state.selectedItem.label} />
-                            ) : Icon ? (
-                                <Icon aria-hidden="true" className={cx("size-5 shrink-0 text-fg-quaternary", props.isDisabled && "text-fg-disabled")} />
-                            ) : null}
-
-                            {state.selectedItem ? (
-                                <section className="flex w-full gap-2 truncate">
-                                    <p className="truncate tt-md-md text-primary">{state.selectedItem?.label}</p>
-                                    {state.selectedItem?.supportingText && <p className="tt-md text-tertiary">{state.selectedItem?.supportingText}</p>}
-                                </section>
-                            ) : (
-                                <p className={cx("tt-md text-placeholder", props.isDisabled && "text-disabled")}>{props.placeholder}</p>
-                            )}
-
-                            <ChevronDown size={20} aria-hidden="true" className="ml-auto shrink-0 text-fg-quaternary" />
-                        </>
-                    );
-                }}
-            </AriaSelectValue>
-        </AriaButton>
-    );
-};
-
-export const SelectContext = createContext<{ type: Types; size: "sm" | "md" }>({ type: "default", size: "sm" });
-
-const Select = ({ type = "default", placeholder = "Select", placeholderIcon, size = "sm", children, items, label, hint, tooltip, ...rest }: SelectProps) => {
-    return (
-        <SelectContext.Provider value={{ type, size }}>
-            <AriaSelect {...rest}>
-                {(state) => (
-                    <div className="flex flex-col gap-1.5">
-                        {label && (
-                            <Label isRequired={state.isRequired} tooltip={tooltip}>
-                                {label}
-                            </Label>
-                        )}
-
-                        <SelectValue
-                            {...state}
-                            {...{ type, size, placeholder }}
-                            placeholderIcon={type === "avatarLeading" || type === "iconLeading" ? placeholderIcon || User01 : undefined}
-                        />
-
-                        <Popover size={size} className={rest.popoverClassName}>
-                            <AriaListBox items={items} className="size-full outline-hidden">
-                                {children}
-                            </AriaListBox>
-                        </Popover>
-
-                        {hint && <HintText isInvalid={state.isInvalid}>{hint}</HintText>}
-                    </div>
-                )}
-            </AriaSelect>
-        </SelectContext.Provider>
-    );
-};
-
-const _Select = Select as typeof Select & {
-    ComboBox: typeof ComboBox;
-    Item: typeof Item;
-};
-_Select.ComboBox = ComboBox;
-_Select.Item = Item;
-
-export { _Select as Select };

package/templates/default/src/components/shared/slider/slider.tsx

@@ -1,76 +0,0 @@
-"use client";
-
-import type { SliderProps as AriaSliderProps } from "react-aria-components";
-import { Slider as AriaSlider, Label, SliderOutput, SliderThumb, SliderTrack } from "react-aria-components";
-import { cx, sortCx } from "@/components/utils/cx";
-
-const styles = sortCx({
-    default: "hidden",
-    bottom: "absolute top-2 left-1/2 -translate-x-1/2 translate-y-full text-md leading-md font-medium text-primary",
-    "top-floating":
-        "absolute -top-2 left-1/2 -translate-x-1/2 -translate-y-full rounded-lg bg-primary px-3 py-2 text-xs leading-xs font-semibold text-secondary shadow-lg ring-1 ring-border-secondary_alt",
-});
-
-interface SliderProps extends AriaSliderProps {
-    labelPosition?: keyof typeof styles;
-    labelFormatter?: (value: number) => string;
-}
-
-export const Slider = ({
-    labelPosition = "default",
-    minValue = 0,
-    maxValue = 100,
-    defaultValue = [minValue, maxValue],
-    labelFormatter,
-    formatOptions,
-    ...rest
-}: SliderProps) => {
-    // Format thumb value as percentage by default.
-    const defaultFormatOptions: Intl.NumberFormatOptions = {
-        style: "percent",
-        maximumFractionDigits: 0,
-    };
-
-    return (
-        <AriaSlider {...rest} {...{ minValue, maxValue, defaultValue }} formatOptions={formatOptions ?? defaultFormatOptions}>
-            <Label />
-            <SliderTrack className="relative h-2 w-full rounded-full bg-quaternary">
-                {({ state: { values, getThumbValue, getThumbPercent, getFormattedValue, getThumbValueLabel } }) => {
-                    const left = getThumbPercent(0);
-                    const width = getThumbPercent(1) - left;
-
-                    return (
-                        <>
-                            <span
-                                className="absolute z-10 h-2 w-full rounded-full bg-brand-solid"
-                                style={{
-                                    left: `${left * 100}%`,
-                                    width: `${width * 100}%`,
-                                }}
-                            />
-                            {values.map((_, index) => {
-                                return (
-                                    <SliderThumb
-                                        key={index}
-                                        index={index}
-                                        className={({ isFocusVisible, isDragging }) =>
-                                            cx(
-                                                "absolute top-1/2 z-50 box-border size-6 cursor-grab rounded-full bg-slider-handle-bg shadow-md ring-2 ring-slider-handle-border ring-inset",
-                                                isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
-                                                isDragging && "cursor-grabbing",
-                                            )
-                                        }
-                                    >
-                                        <SliderOutput className={cx("whitespace-nowrap", styles[labelPosition])}>
-                                            {labelFormatter ? labelFormatter(getThumbValue(index)) : getFormattedValue(getThumbValue(index) / 100)}
-                                        </SliderOutput>
-                                    </SliderThumb>
-                                );
-                            })}
-                        </>
-                    );
-                }}
-            </SliderTrack>
-        </AriaSlider>
-    );
-};

package/templates/default/src/components/shared/tags/base-components/tag-checkbox.tsx

@@ -1,47 +0,0 @@
-"use client";
-
-import { cx } from "@/components/utils/cx";
-
-interface TagCheckboxProps {
-    size?: "sm" | "md" | "lg";
-    className?: string;
-    isFocused?: boolean;
-    isSelected?: boolean;
-    isDisabled?: boolean;
-}
-
-const TagCheckbox = ({ className, isFocused, isSelected, isDisabled, size = "sm" }: TagCheckboxProps) => {
-    return (
-        <div
-            className={cx(
-                "flex cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-border-primary ring-inset",
-                size === "sm" && "size-3.5",
-                size === "md" && "size-4",
-                size === "lg" && "size-4.5",
-                isSelected && "bg-brand-solid ring-bg-brand-solid",
-                isDisabled && "cursor-not-allowed bg-disabled_subtle ring-border-disabled",
-                isFocused && "outline-2 outline-offset-2 outline-focus-ring",
-                className,
-            )}
-        >
-            <svg
-                aria-hidden="true"
-                viewBox="0 0 14 14"
-                fill="none"
-                className={cx(
-                    "pointer-events-none absolute text-fg-white opacity-0 transition-inherit-all",
-                    size === "sm" && "size-2.5",
-                    size === "md" && "size-3",
-                    size === "lg" && "size-3.5",
-                    isSelected && "opacity-100",
-                    isDisabled && "text-fg-disabled_subtle",
-                )}
-            >
-                <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-        </div>
-    );
-};
-TagCheckbox.displayName = "TagCheckbox";
-
-export default TagCheckbox;

package/templates/default/src/components/shared/tags/base-components/tag-close-x.tsx

@@ -1,34 +0,0 @@
-"use client";
-
-import type { RefAttributes } from "react";
-import { XClose } from "@untitledui/icons";
-import { Button as AriaButton, type ButtonProps } from "react-aria-components";
-import { cx } from "@/components/utils/cx";
-
-interface TagCloseXProps extends ButtonProps, RefAttributes<HTMLButtonElement> {
-    size?: "sm" | "md" | "lg";
-    className?: string;
-}
-
-const styles = {
-    sm: { root: "p-0.5", icon: "size-2.5" },
-    md: { root: "p-0.5", icon: "size-3" },
-    lg: { root: "p-[3px]", icon: "size-3.5" },
-};
-
-export const TagCloseX = ({ size = "md", className, isDisabled, ...otherProps }: TagCloseXProps) => {
-    return (
-        <AriaButton
-            slot="remove"
-            aria-label="Remove this tag"
-            className={cx(
-                "flex cursor-pointer rounded-[3px] text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus:outline-2 focus:outline-offset-2 disabled:cursor-not-allowed",
-                styles[size].root,
-                className,
-            )}
-            {...otherProps}
-        >
-            <XClose className={cx("transition-inherit-all", styles[size].icon)} strokeWidth="3" />
-        </AriaButton>
-    );
-};

package/templates/default/src/components/shared/tags/tags.tsx

@@ -1,162 +0,0 @@
-"use client";
-
-import { type PropsWithChildren, type RefAttributes, createContext, useContext } from "react";
-import {
-    Tag as AriaTag,
-    TagGroup as AriaTagGroup,
-    type TagGroupProps as AriaTagGroupProps,
-    TagList as AriaTagList,
-    type TagProps as AriaTagProps,
-} from "react-aria-components";
-import Dot from "@/components/foundations/dot-icon";
-import { cx } from "@/components/utils/cx";
-import Avatar from "../avatar/avatar";
-import TagCheckbox from "./base-components/tag-checkbox";
-import { TagCloseX } from "./base-components/tag-close-x";
-
-export interface TagItem {
-    id: string;
-    label: string;
-    count?: number;
-    avatarSrc?: string;
-    avatarContrastBorder?: boolean;
-    dot?: boolean;
-    dotClassName?: string;
-    isDisabled?: boolean;
-    onClose?: (id: string) => void;
-}
-
-const TagGroupContext = createContext<{
-    selectionMode: "none" | "single" | "multiple";
-    size: "sm" | "md" | "lg";
-}>({
-    selectionMode: "none",
-    size: "sm",
-});
-
-interface TagGroupProps extends AriaTagGroupProps, RefAttributes<HTMLDivElement> {
-    label: string;
-    size?: "sm" | "md" | "lg";
-}
-
-export const TagGroup = ({ label, selectionMode = "none", size = "sm", children, ...otherProps }: TagGroupProps) => {
-    return (
-        <TagGroupContext.Provider value={{ selectionMode, size }}>
-            <AriaTagGroup aria-label={label} selectionMode={selectionMode} disallowEmptySelection={selectionMode === "single"} {...otherProps}>
-                {children}
-            </AriaTagGroup>
-        </TagGroupContext.Provider>
-    );
-};
-
-export const TagList = AriaTagList;
-
-const styles = {
-    sm: {
-        root: {
-            base: "px-2 py-[3px] tt-xs-md",
-            withCheckbox: "pl-[5px]",
-            withAvatar: "pl-1",
-            withDot: "pl-1.5",
-            withCount: "pr-1",
-            withClose: "pr-1",
-        },
-        content: "gap-1",
-        count: "px-1 tt-xs-md",
-    },
-    md: {
-        root: {
-            base: "px-[9px] py-[2px] tt-sm-md",
-            withCheckbox: "pl-1",
-            withAvatar: "pl-[5px]",
-            withDot: "pl-[7px]",
-            withCount: "pr-[3px]",
-            withClose: "pr-1",
-        },
-        content: "gap-[5px]",
-        count: "px-[5px] tt-xs-md",
-    },
-    lg: {
-        root: {
-            base: "px-2.5 py-[4px] tt-sm-md",
-            withCheckbox: "pl-[5px]",
-            withAvatar: "pl-[7px]",
-            withDot: "pl-[9px]",
-            withCount: "pr-1",
-            withClose: "pr-1",
-        },
-        content: "gap-1.5",
-        count: "px-1.5 tt-sm-md",
-    },
-};
-
-interface TagProps extends AriaTagProps, RefAttributes<object>, Omit<TagItem, "label" | "id"> {}
-
-export const Tag = ({
-    id,
-    avatarSrc,
-    avatarContrastBorder,
-    dot,
-    dotClassName,
-    isDisabled,
-    count,
-    className,
-    children,
-    onClose,
-}: PropsWithChildren<TagProps>) => {
-    const context = useContext(TagGroupContext);
-
-    const leadingContent = avatarSrc ? (
-        <Avatar size="xxs" src={avatarSrc} alt="Avatar" contrastBorder={avatarContrastBorder} />
-    ) : dot ? (
-        <Dot className={cx("text-fg-success-secondary", dotClassName)} size="sm" />
-    ) : null;
-
-    return (
-        <AriaTag
-            id={id}
-            isDisabled={isDisabled}
-            className={(state) =>
-                cx(
-                    "flex cursor-default items-center gap-[3px] rounded-md bg-primary text-secondary ring-1 ring-border-primary ring-inset focus:outline-hidden focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
-                    styles[context.size].root.base,
-
-                    // With avatar
-                    avatarSrc && styles[context.size].root.withAvatar,
-                    // With X button
-                    (onClose || state.allowsRemoving) && styles[context.size].root.withClose,
-                    // With dot
-                    dot && styles[context.size].root.withDot,
-                    // With count
-                    typeof count === "number" && styles[context.size].root.withCount,
-                    // With checkbox
-                    context.selectionMode !== "none" && styles[context.size].root.withCheckbox,
-                    // Disabled
-                    isDisabled && "cursor-not-allowed",
-
-                    typeof className === "function" ? className(state) : className,
-                )
-            }
-        >
-            {({ isSelected, isDisabled, allowsRemoving }) => (
-                <>
-                    <div className={cx("flex items-center gap-1", styles[context.size].content)}>
-                        {context.selectionMode !== "none" && <TagCheckbox size={context.size} isSelected={isSelected} isDisabled={isDisabled} />}
-
-                        {leadingContent}
-
-                        {children}
-
-                        {typeof count === "number" && (
-                            <span className={cx("flex items-center justify-center rounded-[3px] bg-tertiary text-center", styles[context.size].count)}>
-                                {count}
-                            </span>
-                        )}
-                    </div>
-
-                    {(onClose || allowsRemoving) && <TagCloseX size={context.size} onPress={() => id && onClose?.(id.toString())} />}
-                </>
-            )}
-        </AriaTag>
-    );
-};

package/templates/default/src/components/shared/textarea/textarea.tsx

@@ -1,82 +0,0 @@
-"use client";
-
-import type { ReactNode, Ref } from "react";
-import React from "react";
-import type { TextAreaProps as AriaTextAreaProps, TextFieldProps as AriaTextFieldProps } from "react-aria-components";
-import { TextArea as AriaTextArea } from "react-aria-components";
-import HintText from "@/components/shared/input/hint-text";
-import Label from "@/components/shared/input/label";
-import { cx } from "@/components/utils/cx";
-import { TextField } from "../input";
-
-interface TextAreaBaseProps extends AriaTextAreaProps {
-    ref?: Ref<HTMLTextAreaElement>;
-}
-
-export const TextAreaBase = ({ className, ...props }: TextAreaBaseProps) => {
-    return (
-        <AriaTextArea
-            {...props}
-            className={(state) =>
-                cx(
-                    "w-full scroll-py-3 rounded-lg bg-primary px-3.5 py-3 tt-md text-primary shadow-xs ring-1 ring-border-primary transition duration-100 ease-linear ring-inset placeholder:text-placeholder autofill:rounded-lg autofill:text-primary focus:outline-hidden",
-
-                    // Resize handle
-                    "[&::-webkit-resizer]:bg-[url(/shared/textarea-resize-handle-light-mode.svg)] [&::-webkit-resizer]:bg-contain dark:[&::-webkit-resizer]:bg-[url(/shared/textarea-resize-handle-dark-mode.svg)]",
-
-                    state.isFocused && !state.isDisabled && "ring-2 ring-border-brand",
-                    state.isDisabled && "cursor-not-allowed bg-disabled_subtle text-disabled ring-border-disabled",
-                    state.isInvalid && "ring-border-error_subtle",
-                    state.isInvalid && state.isFocused && "ring-2 ring-border-error",
-
-                    typeof className === "function" ? className(state) : className,
-                )
-            }
-        />
-    );
-};
-
-TextAreaBase.displayName = "TextAreaBase";
-
-interface TextFieldProps extends AriaTextAreaProps {
-    label?: string;
-    hint?: ReactNode;
-    tooltip?: string;
-    ref?: Ref<HTMLDivElement>;
-    isInvalid?: AriaTextFieldProps["isInvalid"];
-    isDisabled?: AriaTextFieldProps["isDisabled"];
-    isRequired?: AriaTextFieldProps["isRequired"];
-    isReadOnly?: AriaTextFieldProps["isReadOnly"];
-    wrapperClassName?: AriaTextFieldProps["className"];
-}
-
-export const TextArea = ({
-    label,
-    hint,
-    wrapperClassName,
-    isDisabled,
-    isInvalid,
-    isRequired,
-    isReadOnly,
-    tooltip,
-    value,
-    defaultValue,
-    ref,
-    ...textAreaProps
-}: TextFieldProps) => {
-    return (
-        <TextField
-            {...{ ref, isDisabled, isInvalid, isReadOnly, isRequired, className: wrapperClassName }}
-            value={value as string}
-            defaultValue={defaultValue as string}
-        >
-            {label && <Label tooltip={tooltip}>{label}</Label>}
-
-            <TextAreaBase {...textAreaProps} />
-
-            {hint && <HintText>{hint}</HintText>}
-        </TextField>
-    );
-};
-
-TextArea.displayName = "TextArea";