keystone-design-bootstrap 1.0.3

package/src/design_system/elements/slideout-menus/slideout-menu.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { type ComponentPropsWithRef, type ReactNode, type RefAttributes } from "react";
+import type {
+    DialogProps as AriaDialogProps,
+    ModalOverlayProps as AriaModalOverlayProps,
+    ModalRenderProps as AriaModalRenderProps,
+} from "react-aria-components";
+import { Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Modal as AriaModal, ModalOverlay as AriaModalOverlay } from "react-aria-components";
+import { CloseButton } from '../buttons/close-button';
+import { cx } from '../../../utils/cx';
+
+interface ModalOverlayProps extends AriaModalOverlayProps, RefAttributes<HTMLDivElement> {}
+
+export const ModalOverlay = (props: ModalOverlayProps) => {
+    return (
+        <AriaModalOverlay
+            {...props}
+            className={(state) =>
+                cx(
+                    "fixed inset-0 flex min-h-dvh w-full items-center justify-end bg-overlay/70 pl-6 outline-hidden ease-linear md:pl-10",
+                    state.isEntering && "duration-300 animate-in fade-in",
+                    state.isExiting && "duration-500 animate-out fade-out",
+                    typeof props.className === "function" ? props.className(state) : props.className,
+                )
+            }
+        />
+    );
+};
+ModalOverlay.displayName = "ModalOverlay";
+
+interface ModalProps extends AriaModalOverlayProps, RefAttributes<HTMLDivElement> {}
+
+export const Modal = (props: ModalProps) => (
+    <AriaModal
+        {...props}
+        className={(state) =>
+            cx(
+                "inset-y-0 right-0 h-full w-full max-w-100 shadow-xl transition",
+                state.isEntering && "duration-300 animate-in slide-in-from-right",
+                state.isExiting && "duration-500 animate-out slide-out-to-right",
+                typeof props.className === "function" ? props.className(state) : props.className,
+            )
+        }
+    />
+);
+Modal.displayName = "Modal";
+
+interface DialogProps extends AriaDialogProps, RefAttributes<HTMLElement> {}
+
+export const Dialog = (props: DialogProps) => (
+    <AriaDialog
+        role="dialog"
+        {...props}
+        className={cx(
+            "relative flex size-full flex-col items-start gap-6 overflow-y-auto bg-primary ring-1 ring-secondary_alt outline-hidden",
+            props.className,
+        )}
+    />
+);
+Dialog.displayName = "Dialog";
+
+interface SlideoutMenuProps extends Omit<AriaModalOverlayProps, "children">, RefAttributes<HTMLDivElement> {
+    children: ReactNode | ((children: AriaModalRenderProps & { close: () => void }) => ReactNode);
+    dialogClassName?: string;
+}
+
+const Menu = ({ children, dialogClassName, ...props }: SlideoutMenuProps) => {
+    return (
+        <ModalOverlay {...props}>
+            <Modal className={(state) => cx(typeof props.className === "function" ? props.className(state) : props.className)}>
+                {(state) => (
+                    <Dialog className={dialogClassName}>
+                        {({ close }) => {
+                            return typeof children === "function" ? children({ ...state, close }) : children;
+                        }}
+                    </Dialog>
+                )}
+            </Modal>
+        </ModalOverlay>
+    );
+};
+Menu.displayName = "SlideoutMenu";
+
+const Content = ({ role = "main", ...props }: ComponentPropsWithRef<"div">) => {
+    return <div role={role} {...props} className={cx("flex size-full flex-col gap-6 overflow-y-auto overscroll-auto px-4 md:px-6", props.className)} />;
+};
+Content.displayName = "SlideoutContent";
+
+interface SlideoutHeaderProps extends ComponentPropsWithRef<"header"> {
+    onClose?: () => void;
+}
+
+const Header = ({ className, children, onClose, ...props }: SlideoutHeaderProps) => {
+    return (
+        <header {...props} className={cx("relative z-1 w-full px-4 pt-6 md:px-6", className)}>
+            {children}
+            <CloseButton size="md" className="absolute top-3 right-3 shrink-0" onClick={onClose} />
+        </header>
+    );
+};
+Header.displayName = "SlideoutHeader";
+
+const Footer = (props: ComponentPropsWithRef<"footer">) => {
+    return <footer {...props} className={cx("w-full p-4 shadow-[inset_0px_1px_0px_0px] shadow-border-secondary md:px-6", props.className)} />;
+};
+Footer.displayName = "SlideoutFooter";
+
+const SlideoutMenu = Menu as typeof Menu & {
+    Trigger: typeof AriaDialogTrigger;
+    Content: typeof Content;
+    Header: typeof Header;
+    Footer: typeof Footer;
+};
+SlideoutMenu.displayName = "SlideoutMenu";
+
+SlideoutMenu.Trigger = AriaDialogTrigger;
+SlideoutMenu.Content = Content;
+SlideoutMenu.Header = Header;
+SlideoutMenu.Footer = Footer;
+
+export { SlideoutMenu };

package/src/design_system/elements/tabs/tabs.tsx

@@ -0,0 +1,225 @@
+"use client";
+
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { Fragment, createContext, useContext } from "react";
+import type { TabListProps as AriaTabListProps, TabProps as AriaTabProps, TabRenderProps as AriaTabRenderProps } from "react-aria-components";
+import { Tab as AriaTab, TabList as AriaTabList, TabPanel as AriaTabPanel, Tabs as AriaTabs, TabsContext, useSlottedContext } from "react-aria-components";
+import type { BadgeColors } from '../badges/badge-types';
+import { Badge } from '../badges/badges';
+import { cx } from '../../../utils/cx';
+
+type Orientation = "horizontal" | "vertical";
+
+// Types for different orientations
+type HorizontalTypes = "button-brand" | "button-gray" | "button-border" | "button-minimal" | "underline";
+type VerticalTypes = "button-brand" | "button-gray" | "button-border" | "button-minimal" | "line";
+type TabTypeColors<T> = T extends "horizontal" ? HorizontalTypes : VerticalTypes;
+
+// Styles for different types of tab
+const getTabStyles = ({ isFocusVisible, isSelected, isHovered }: AriaTabRenderProps) => ({
+    "button-brand": cx(
+        "outline-focus-ring",
+        isFocusVisible && "outline-2 -outline-offset-2",
+        (isSelected || isHovered) && "bg-brand-primary_alt text-brand-secondary",
+    ),
+    "button-gray": cx(
+        "outline-focus-ring",
+        isHovered && "bg-primary_hover text-secondary",
+        isFocusVisible && "outline-2 -outline-offset-2",
+        isSelected && "bg-active text-secondary",
+    ),
+    "button-border": cx(
+        "outline-focus-ring",
+        (isSelected || isHovered) && "bg-primary_alt text-secondary shadow-sm",
+        isFocusVisible && "outline-2 -outline-offset-2",
+    ),
+    "button-minimal": cx(
+        "rounded-lg outline-focus-ring",
+        isHovered && "text-secondary",
+        isFocusVisible && "outline-2 -outline-offset-2",
+        isSelected && "bg-primary_alt text-secondary shadow-xs ring-1 ring-primary ring-inset",
+    ),
+    underline: cx(
+        "rounded-none border-b-2 border-transparent outline-focus-ring",
+        (isSelected || isHovered) && "border-fg-brand-primary_alt text-brand-secondary",
+        isFocusVisible && "outline-2 -outline-offset-2",
+    ),
+    line: cx(
+        "rounded-none border-l-2 border-transparent outline-focus-ring",
+        (isSelected || isHovered) && "border-fg-brand-primary_alt text-brand-secondary",
+        isFocusVisible && "outline-2 -outline-offset-2",
+    ),
+});
+
+const sizes = {
+    sm: {
+        "button-brand": "text-sm font-semibold py-2 px-3",
+        "button-gray": "text-sm font-semibold py-2 px-3",
+        "button-border": "text-sm font-semibold py-2 px-3",
+        "button-minimal": "text-sm font-semibold py-2 px-3",
+        underline: "text-sm font-semibold px-1 pb-2.5 pt-0",
+        line: "text-sm font-semibold pl-2.5 pr-3 py-0.5",
+    },
+    md: {
+        "button-brand": "text-md font-semibold py-2.5 px-3",
+        "button-gray": "text-md font-semibold py-2.5 px-3",
+        "button-border": "text-md font-semibold py-2.5 px-3",
+        "button-minimal": "text-md font-semibold py-2.5 px-3",
+        underline: "text-md font-semibold px-1 pb-2.5 pt-0",
+        line: "text-md font-semibold pr-3.5 pl-3 py-1",
+    },
+};
+
+// Styles for different types of horizontal tabs
+const getHorizontalStyles = ({ size, fullWidth }: { size?: "sm" | "md"; fullWidth?: boolean }) => ({
+    "button-brand": "gap-1",
+    "button-gray": "gap-1",
+    "button-border": cx("gap-1 rounded-[10px] bg-secondary_alt p-1 ring-1 ring-secondary ring-inset", size === "md" && "rounded-xl p-1.5"),
+    "button-minimal": "gap-0.5 rounded-lg bg-secondary_alt ring-1 ring-inset ring-secondary",
+    underline: cx("gap-3", fullWidth && "w-full gap-4"),
+    line: "gap-2",
+});
+
+const getColorStyles = ({ isSelected, isHovered }: Partial<AriaTabRenderProps>) => ({
+    "button-brand": isSelected || isHovered ? "brand" : "gray",
+    "button-gray": "gray",
+    "button-border": "gray",
+    "button-minimal": "gray",
+    underline: isSelected || isHovered ? "brand" : "gray",
+    line: isSelected || isHovered ? "brand" : "gray",
+});
+
+interface TabListComponentProps<T extends object, K extends Orientation> extends AriaTabListProps<T> {
+    /** The size of the tab list. */
+    size?: keyof typeof sizes;
+    /** The type of the tab list. */
+    type?: TabTypeColors<K>;
+    /** The orientation of the tab list. */
+    orientation?: K;
+    /** The items of the tab list. */
+    items: T[];
+    /** Whether the tab list is full width. */
+    fullWidth?: boolean;
+}
+
+const TabListContext = createContext<Omit<TabListComponentProps<TabComponentProps, Orientation>, "items">>({
+    size: "sm",
+    type: "button-brand",
+});
+
+export const TabList = <T extends Orientation>({
+    size = "sm",
+    type = "button-brand",
+    orientation: orientationProp,
+    fullWidth,
+    className,
+    children,
+    ...otherProps
+}: TabListComponentProps<TabComponentProps, T>) => {
+    const context = useSlottedContext(TabsContext);
+
+    const orientation = orientationProp ?? context?.orientation ?? "horizontal";
+
+    return (
+        <TabListContext.Provider value={{ size, type, orientation, fullWidth }}>
+            <AriaTabList
+                {...otherProps}
+                className={(state) =>
+                    cx(
+                        "group flex",
+
+                        getHorizontalStyles({
+                            size,
+                            fullWidth,
+                        })[type as HorizontalTypes],
+
+                        orientation === "vertical" && "w-max flex-col",
+
+                        // Only horizontal tabs with underline type have bottom border
+                        orientation === "horizontal" &&
+                            type === "underline" &&
+                            "relative before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border-secondary",
+
+                        typeof className === "function" ? className(state) : className,
+                    )
+                }
+            >
+                {children ?? ((item) => <Tab {...item}>{item.children}</Tab>)}
+            </AriaTabList>
+        </TabListContext.Provider>
+    );
+};
+
+export const TabPanel = (props: ComponentPropsWithRef<typeof AriaTabPanel>) => {
+    return (
+        <AriaTabPanel
+            {...props}
+            className={(state) =>
+                cx(
+                    "outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2",
+                    typeof props.className === "function" ? props.className(state) : props.className,
+                )
+            }
+        />
+    );
+};
+
+interface TabComponentProps extends AriaTabProps {
+    /** The label of the tab. */
+    label?: ReactNode;
+    /** The children of the tab. */
+    children?: ReactNode | ((props: AriaTabRenderProps) => ReactNode);
+    /** The badge displayed next to the label. */
+    badge?: number | string;
+}
+
+export const Tab = (props: TabComponentProps) => {
+    const { label, children, badge, ...otherProps } = props;
+    const { size = "sm", type = "button-brand", fullWidth } = useContext(TabListContext);
+
+    return (
+        <AriaTab
+            {...otherProps}
+            className={(prop) =>
+                cx(
+                    "z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear",
+                    "group-orientation-vertical:justify-start",
+                    fullWidth && "w-full flex-1",
+                    sizes[size][type],
+                    getTabStyles(prop)[type],
+                    typeof props.className === "function" ? props.className(prop) : props.className,
+                )
+            }
+        >
+            {(state) => (
+                <Fragment>
+                    {typeof children === "function" ? children(state) : children || label}
+                    {badge && (
+                        <Badge
+                            size={size}
+                            type="pill-color"
+                            color={getColorStyles(state)[type] as BadgeColors}
+                            className={cx("hidden transition-inherit-all md:flex", size === "sm" && "-my-px")}
+                        >
+                            {badge}
+                        </Badge>
+                    )}
+                </Fragment>
+            )}
+        </AriaTab>
+    );
+};
+
+export const Tabs = ({ className, ...props }: ComponentPropsWithRef<typeof AriaTabs>) => {
+    return (
+        <AriaTabs
+            keyboardActivation="manual"
+            {...props}
+            className={(state) => cx("flex w-full flex-col", typeof className === "function" ? className(state) : className)}
+        />
+    );
+};
+
+Tabs.Panel = TabPanel;
+Tabs.List = TabList;
+Tabs.Item = Tab;

package/src/design_system/elements/tags/base-components/tag-checkbox.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { cx } from '../../../../utils/cx';
+
+interface TagCheckboxProps {
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    isFocused?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+}
+
+export 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-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-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";

package/src/design_system/elements/tags/base-components/tag-close-x.tsx

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

package/src/design_system/elements/tags/tags.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import { type PropsWithChildren, type RefAttributes, createContext, useContext, type HTMLAttributes } 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 { Avatar } from '../avatar/avatar';
+import { cx } from '../../../utils/cx';
+import { TagCheckbox } from "./base-components/tag-checkbox";
+import { TagCloseX } from "./base-components/tag-close-x";
+
+// Inline Dot component (previously from foundations)
+const dotSizes = {
+    sm: { wh: 8, c: 4, r: 2.5 },
+    md: { wh: 10, c: 5, r: 4 },
+};
+
+const Dot = ({ size = "md", ...props }: HTMLAttributes<HTMLOrSVGElement> & { size?: "sm" | "md" }) => {
+    return (
+        <svg width={dotSizes[size].wh} height={dotSizes[size].wh} viewBox={`0 0 ${dotSizes[size].wh} ${dotSizes[size].wh}`} fill="none" {...props}>
+            <circle cx={dotSizes[size].c} cy={dotSizes[size].c} r={dotSizes[size].r} fill="currentColor" stroke="currentColor" />
+        </svg>
+    );
+};
+
+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-0.75 text-xs font-medium",
+            withCheckbox: "pl-1.25",
+            withAvatar: "pl-1",
+            withDot: "pl-1.5",
+            withCount: "pr-1",
+            withClose: "pr-1",
+        },
+        content: "gap-1",
+        count: "px-1 text-xs font-medium",
+    },
+    md: {
+        root: {
+            base: "px-2.25 py-0.5 text-sm font-medium",
+            withCheckbox: "pl-1",
+            withAvatar: "pl-1.25",
+            withDot: "pl-1.75",
+            withCount: "pr-0.75",
+            withClose: "pr-1",
+        },
+        content: "gap-1.25",
+        count: "px-1.25 text-xs font-medium",
+    },
+    lg: {
+        root: {
+            base: "px-2.5 py-1 text-sm font-medium",
+            withCheckbox: "pl-1.25",
+            withAvatar: "pl-1.75",
+            withDot: "pl-2.25",
+            withCount: "pr-1",
+            withClose: "pr-1",
+        },
+        content: "gap-1.5",
+        count: "px-1.5 text-sm font-medium",
+    },
+};
+
+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}
+            textValue={typeof children === "string" ? children : undefined}
+            className={(state) =>
+                cx(
+                    "flex cursor-default items-center gap-0.75 rounded-md bg-primary text-secondary ring-1 ring-primary ring-inset focus:outline-hidden 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/src/design_system/elements/textarea/textarea.aman.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import type { TextAreaProps as AriaTextAreaProps, TextFieldProps as AriaTextFieldProps } from "react-aria-components";
+import { TextArea as AriaTextArea, TextField as AriaTextField } from "react-aria-components";
+import { HintText } from '../input/hint-text';
+import { Label } from '../input/label';
+import { cx } from '../../../utils/cx';
+
+export interface TextareaProps extends AriaTextFieldProps {
+    label?: string;
+    hint?: string;
+    placeholder?: string;
+    rows?: number;
+    className?: string;
+}
+
+export const TextArea = ({
+    label,
+    hint,
+    placeholder,
+    rows = 4,
+    isInvalid,
+    isDisabled,
+    isRequired,
+    className,
+    ...props
+}: TextareaProps) => {
+    return (
+        <AriaTextField
+            {...({ isInvalid, isDisabled, isRequired } as AriaTextFieldProps)}
+            className="flex flex-col gap-1.5"
+        >
+            {label && <Label>{label}</Label>}
+            <AriaTextArea
+                {...(props as AriaTextAreaProps)}
+                rows={rows}
+                placeholder={placeholder}
+                className={cx(
+                    "w-full rounded-sm bg-white px-3 py-2.5 text-base font-body text-fg-primary shadow-sm ring-1 ring-secondary ring-inset placeholder:text-secondary outline-none transition-shadow duration-100 ease-linear",
+                    "focus:ring-2 focus:ring-focus-ring",
+                    isDisabled && "cursor-not-allowed bg-primary text-secondary ring-secondary",
+                    isInvalid && "ring-error_subtle focus:ring-2 focus:ring-error",
+                    className,
+                )}
+            />
+            {hint && <HintText>{hint}</HintText>}
+        </AriaTextField>
+    );
+};
+
+import { registerThemeVariant } from '../../../lib/component-registry';
+registerThemeVariant('textarea', 'aman', TextArea);