keystone-design-bootstrap 1.0.3

package/src/design_system/elements/form/hook-form.tsx

@@ -0,0 +1,75 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { createContext, useContext, useId } from "react";
+import { Form as AriaForm } from "react-aria-components";
+import type { Control, FieldPath, FieldValues, UseControllerReturn, UseFormReturn } from "react-hook-form";
+import { FormProvider, useController, useFormContext } from "react-hook-form";
+
+interface FormProps<TFieldValues extends FieldValues = FieldValues> extends ComponentPropsWithoutRef<typeof AriaForm> {
+    form: UseFormReturn<TFieldValues>;
+    children: ReactNode;
+}
+
+interface FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    name: TName;
+    control: Control<TFieldValues>;
+    children: ReactNode | ((control: UseControllerReturn<TFieldValues, TName>) => ReactNode);
+}
+
+interface FormFieldContextValues<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    id: string;
+    name: TName;
+    control?: UseControllerReturn<TFieldValues, TName>;
+}
+
+const FormFieldContext = createContext<FormFieldContextValues>({} as FormFieldContextValues);
+
+export const useFormFieldContext = () => {
+    const context = useContext(FormFieldContext);
+    const { getFieldState, formState } = useFormContext();
+    const fieldState = getFieldState(context.name, formState);
+
+    if (!context) {
+        throw new Error("The 'useFormContext' hook must be used within a '<FormField />'");
+    }
+
+    return { ...context, ...fieldState };
+};
+
+export const HookForm = <TFieldValues extends FieldValues = FieldValues>({ form, ...props }: FormProps<TFieldValues>) => {
+    return (
+        <FormProvider {...form}>
+            <AriaForm {...props} />
+        </FormProvider>
+    );
+};
+
+HookForm.displayName = "HookForm";
+
+export const FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
+    children,
+    ...props
+}: FormFieldProps<TFieldValues, TName>) => {
+    const id = "form-item-" + useId();
+    const control = useController(props);
+    const withValidationBehavior = {
+        ...control,
+        field: {
+            ...control.field,
+            validationBehavior: "aria",
+        },
+    };
+
+    return (
+        <FormFieldContext.Provider
+            value={{
+                id,
+                name: props.name,
+                control: control as UseControllerReturn<FieldValues, TName>,
+            }}
+        >
+            {children && (typeof children === "function" ? children(withValidationBehavior) : children)}
+        </FormFieldContext.Provider>
+    );
+};
+
+FormField.displayName = "FormField";

package/src/design_system/elements/hint-text/hint-text.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import type { ReactNode, Ref } from "react";
+import type { TextProps as AriaTextProps } from "react-aria-components";
+import { Text as AriaText } from "react-aria-components";
+import { cx } from '../../../utils/cx';
+
+interface HintTextProps extends AriaTextProps {
+    /** Indicates that the hint text is an error message. */
+    isInvalid?: boolean;
+    ref?: Ref<HTMLElement>;
+    children: ReactNode;
+}
+
+export const HintText = ({ isInvalid, className, ...props }: HintTextProps) => {
+    return (
+        <AriaText
+            {...props}
+            slot={isInvalid ? "errorMessage" : "description"}
+            className={cx(
+                "text-sm text-tertiary",
+
+                // Invalid state
+                isInvalid && "text-error-primary",
+                "group-invalid:text-error-primary",
+
+                className,
+            )}
+        />
+    );
+};
+
+HintText.displayName = "HintText";

package/src/design_system/elements/index.tsx

@@ -0,0 +1,158 @@
+/**
+ * Centralized Elements Exports
+ * All commonly used elements export from here with theme variant support
+ * Includes: Buttons, Form inputs, Date pickers, UI components
+ * Excludes: .demo.tsx, .story.tsx, and specialized sub-components
+ */
+
+'use client';
+
+import React from 'react';
+import { getThemedComponent } from '../../lib/component-registry';
+import { useTheme } from '../../contexts/ThemeContext';
+
+// Import all base components - Buttons
+import { Button as BaseButton } from './buttons/button';
+import { RoundButton as BaseRoundButton } from './buttons/round-button';
+import { CloseButton as BaseCloseButton } from './buttons/close-button';
+import { SocialButton as BaseSocialButton } from './buttons/social-button';
+import { AppStoreButton as BaseAppStoreButton, GooglePlayButton as BaseGooglePlayButton } from './buttons/app-store-buttons';
+import { ButtonGroup as BaseButtonGroup } from './button-group/button-group';
+
+// Form inputs
+import { Input as BaseInput } from './input/input';
+import { InputGroup as BaseInputGroup } from './input/input-group';
+import { TextArea as BaseTextarea } from './textarea/textarea';
+import { Checkbox as BaseCheckbox } from './checkbox/checkbox';
+import { Toggle as BaseToggle } from './toggle/toggle';
+import { Form as BaseForm } from './form/form';
+import { Label as BaseLabel } from './input/label';
+import { HintText as BaseHintText } from './input/hint-text';
+import { Select as BaseSelect } from './select/select';
+import { SelectItem as BaseSelectItem } from './select/select-item';
+import { MultiSelect as BaseMultiSelect } from './select/multi-select';
+import { NativeSelect as BaseNativeSelect } from './select/select-native';
+import { RadioGroup as BaseRadioGroup, RadioButton as BaseRadioButton } from './radio-buttons/radio-buttons';
+
+// Date pickers
+import { DatePicker as BaseDatePicker } from './date-picker/date-picker';
+import { DateRangePicker as BaseDateRangePicker } from './date-picker/date-range-picker';
+
+// UI components
+import PhotoWithFallbackBase from './photo-fallback/photo-fallback';
+import { LoadingIndicator as BaseLoadingIndicator } from './loading-indicator/loading-indicator';
+import { Badge as BaseBadge, BadgeWithDot as BaseBadgeWithDot } from './badges/badges';
+import { BadgeGroup as BaseBadgeGroup } from './badges/badge-groups';
+import { RatingStars as BaseRatingStars } from './rating/rating-stars';
+import { RatingBadge as BaseRatingBadge } from './rating/rating-badge';
+import { Tooltip as BaseTooltip } from './tooltip/tooltip';
+import { Avatar as BaseAvatar } from './avatar/avatar';
+import { AvatarLabelGroup as BaseAvatarLabelGroup } from './avatar/avatar-label-group';
+import { AvatarProfilePhoto as BaseAvatarProfilePhoto } from './avatar/avatar-profile-photo';
+import { VerifiedTick as BaseVerifiedTick } from './avatar/base-components';
+import { Breadcrumb as BaseBreadcrumb } from './breadcrumb/Breadcrumb';
+import { Tabs as BaseTabs } from './tabs/tabs';
+import { TagGroup as BaseTagGroup, TagList as BaseTagList, Tag as BaseTag } from './tags/tags';
+import { FeaturedIcon as BaseFeaturedIcon } from './featured-icon/featured-icon';
+import { ProgressBar as BaseProgressBar } from './progress-indicators/progress-indicators';
+import { ProgressBarCircle as BaseProgressBarCircle } from './progress-indicators/progress-circles';
+import { CircleProgressBar as BaseCircleProgressBar } from './progress-indicators/simple-circle';
+import { SlideoutMenu as BaseSlideoutMenu } from './slideout-menus/slideout-menu';
+import { Pagination as BasePagination } from './pagination/pagination-base';
+import { PaginationDot as BasePaginationDot } from './pagination/pagination-dot';
+import { PaginationLine as BasePaginationLine } from './pagination/pagination-line';
+import { PaginationPageDefault as BasePaginationPageDefault, PaginationPageMinimalCenter as BasePaginationPageMinimalCenter } from './pagination/pagination';
+import BaseGoogleMap from './map/GoogleMap';
+import BaseMarkdownRenderer from './markdown-renderer/MarkdownRenderer';
+
+// Import variant files to trigger registration (only ones that exist)
+import './buttons/button.aman';
+import './input/input.aman';
+import './textarea/textarea.aman';
+import './select/select.aman';
+
+/**
+ * Create themed component wrapper
+ */
+function createThemedExport(componentName: string, BaseComponent: React.ComponentType<any>) {
+  return function ThemedComponent(props: any) {
+    const { theme } = useTheme();
+    
+    try {
+      const Component = getThemedComponent(componentName, theme);
+      return React.createElement(Component, props);
+    } catch {
+      // No variant registered, use base component
+      return React.createElement(BaseComponent, props);
+    }
+  };
+}
+
+// All elements wrapped (falls back to base if no variant)
+// Buttons
+export const Button = createThemedExport('button', BaseButton);
+export const RoundButton = createThemedExport('round-button', BaseRoundButton);
+export const CloseButton = createThemedExport('close-button', BaseCloseButton);
+export const SocialButton = createThemedExport('social-button', BaseSocialButton);
+export const AppStoreButton = createThemedExport('app-store-button', BaseAppStoreButton);
+export const GooglePlayButton = createThemedExport('google-play-button', BaseGooglePlayButton);
+export const ButtonGroup = createThemedExport('button-group', BaseButtonGroup);
+
+// Form inputs
+export const Input = createThemedExport('input', BaseInput);
+export const Textarea = createThemedExport('textarea', BaseTextarea);
+export const Checkbox = createThemedExport('checkbox', BaseCheckbox);
+export const Toggle = createThemedExport('toggle', BaseToggle);
+export const Form = createThemedExport('form', BaseForm);
+export const InputGroup = createThemedExport('input-group', BaseInputGroup);
+export const Label = createThemedExport('label', BaseLabel);
+export const HintText = createThemedExport('hint-text', BaseHintText);
+export const Select = createThemedExport('select', BaseSelect);
+export const SelectItem = createThemedExport('select-item', BaseSelectItem);
+export const MultiSelect = createThemedExport('multi-select', BaseMultiSelect);
+export const NativeSelect = createThemedExport('native-select', BaseNativeSelect);
+export const RadioGroup = createThemedExport('radio-group', BaseRadioGroup);
+export const RadioButton = createThemedExport('radio-button', BaseRadioButton);
+
+// Date pickers
+export const DatePicker = createThemedExport('date-picker', BaseDatePicker);
+export const DateRangePicker = createThemedExport('date-range-picker', BaseDateRangePicker);
+
+// UI components
+export const PhotoWithFallback = createThemedExport('photo-fallback', PhotoWithFallbackBase);
+export const LoadingIndicator = createThemedExport('loading-indicator', BaseLoadingIndicator);
+export const Badge = createThemedExport('badge', BaseBadge);
+export const BadgeWithDot = createThemedExport('badge-with-dot', BaseBadgeWithDot);
+export const BadgeGroup = createThemedExport('badge-group', BaseBadgeGroup);
+export const RatingStars = createThemedExport('rating-stars', BaseRatingStars);
+export const RatingBadge = createThemedExport('rating-badge', BaseRatingBadge);
+export const Tooltip = createThemedExport('tooltip', BaseTooltip);
+export const Avatar = createThemedExport('avatar', BaseAvatar);
+export const AvatarLabelGroup = createThemedExport('avatar-label-group', BaseAvatarLabelGroup);
+export const AvatarProfilePhoto = createThemedExport('avatar-profile-photo', BaseAvatarProfilePhoto);
+export const VerifiedTick = createThemedExport('verified-tick', BaseVerifiedTick);
+export const Breadcrumb = createThemedExport('breadcrumb', BaseBreadcrumb);
+export const FeaturedIcon = createThemedExport('featured-icon', BaseFeaturedIcon);
+export const ProgressBar = createThemedExport('progress-bar', BaseProgressBar);
+export const ProgressBarCircle = createThemedExport('progress-bar-circle', BaseProgressBarCircle);
+export const CircleProgressBar = createThemedExport('circle-progress-bar', BaseCircleProgressBar);
+export const PaginationDot = createThemedExport('pagination-dot', BasePaginationDot);
+export const PaginationLine = createThemedExport('pagination-line', BasePaginationLine);
+export const PaginationPageDefault = createThemedExport('pagination-page-default', BasePaginationPageDefault);
+export const PaginationPageMinimalCenter = createThemedExport('pagination-page-minimal-center', BasePaginationPageMinimalCenter);
+export const GoogleMap = createThemedExport('google-map', BaseGoogleMap);
+export const MarkdownRenderer = createThemedExport('markdown-renderer', BaseMarkdownRenderer);
+
+// Re-export compound components directly (they have subcomponents like .Root, .List, .DropZone, .Group, .Slot, etc.)
+export { Tabs } from './tabs/tabs';
+export { TagGroup, TagList, Tag } from './tags/tags';
+export { Pagination } from './pagination/pagination-base';
+export { SlideoutMenu } from './slideout-menus/slideout-menu';
+
+// Re-export everything from subdirectories that doesn't need theming
+export * from './rating/rating-stars';
+export * from './rating/rating-badge';
+export * from './carousel/carousel';
+
+// Re-export combobox (still exists in select directory but not wrapped with theming)
+export { ComboBox } from './select/combobox';

package/src/design_system/elements/input/hint-text.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import type { ReactNode, Ref } from "react";
+import type { TextProps as AriaTextProps } from "react-aria-components";
+import { Text as AriaText } from "react-aria-components";
+import { cx } from '../../../utils/cx';
+
+interface HintTextProps extends AriaTextProps {
+    /** Indicates that the hint text is an error message. */
+    isInvalid?: boolean;
+    ref?: Ref<HTMLElement>;
+    children: ReactNode;
+}
+
+export const HintText = ({ isInvalid, className, ...props }: HintTextProps) => {
+    return (
+        <AriaText
+            {...props}
+            slot={isInvalid ? "errorMessage" : "description"}
+            className={cx(
+                "text-sm text-tertiary",
+
+                // Invalid state
+                isInvalid && "text-error-primary",
+                "group-invalid:text-error-primary",
+
+                className,
+            )}
+        />
+    );
+};
+
+HintText.displayName = "HintText";

package/src/design_system/elements/input/input-group.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { type HTMLAttributes, type ReactNode } from "react";
+import { HintText } from './hint-text';
+import type { InputBaseProps } from './input';
+import { TextField } from './input';
+import { Label } from './label';
+import { cx, sortCx } from '../../../utils/cx';
+
+interface InputPrefixProps extends HTMLAttributes<HTMLDivElement> {
+    /** The position of the prefix. */
+    position?: "leading" | "trailing";
+    /** The size of the prefix. */
+    size?: "sm" | "md";
+    /** Indicates that the prefix is disabled. */
+    isDisabled?: boolean;
+}
+
+export const InputPrefix = ({ isDisabled, children, ...props }: InputPrefixProps) => (
+    <span
+        {...props}
+        className={cx(
+            "flex text-md text-tertiary shadow-xs ring-1 ring-border-primary ring-inset",
+            // Styles when the prefix is within an `InputGroup`
+            "in-data-input-wrapper:in-data-leading:-mr-px in-data-input-wrapper:in-data-leading:rounded-l-lg",
+            "in-data-input-wrapper:in-data-trailing:-ml-px in-data-input-wrapper:in-data-trailing:rounded-r-lg",
+            // Size styles based on size when within an `InputGroup`
+            "in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-[input-size=md]:pr-3 in-data-input-wrapper:in-data-[input-size=md]:pl-3.5 in-data-input-wrapper:in-data-[input-size=sm]:px-3 in-data-input-wrapper:in-data-[input-size=sm]:py-2",
+            // Disabled styles
+            isDisabled && "border-disabled bg-disabled_subtle text-tertiary",
+            "in-data-input-wrapper:group-disabled:bg-disabled_subtle in-data-input-wrapper:group-disabled:text-disabled in-data-input-wrapper:group-disabled:ring-border-disabled",
+
+            props.className,
+        )}
+    >
+        {children}
+    </span>
+);
+
+// `${string}ClassName` is used to omit any className prop that ends with a `ClassName` suffix
+interface InputGroupProps extends Omit<InputBaseProps, "type" | "icon" | "placeholder" | "tooltip" | "shortcut" | `${string}ClassName`> {
+    /** A prefix text that is displayed in the same box as the input.*/
+    prefix?: string;
+    /** A leading addon that is displayed with visual separation from the input. */
+    leadingAddon?: ReactNode;
+    /** A trailing addon that is displayed with visual separation from the input. */
+    trailingAddon?: ReactNode;
+    /** The class name to apply to the input group. */
+    className?: string;
+    /** The children of the input group (i.e `<InputBase />`) */
+    children: ReactNode;
+}
+
+export const InputGroup = ({ size = "sm", prefix, leadingAddon, trailingAddon, label, hint, children, ...props }: InputGroupProps) => {
+    const hasLeading = !!leadingAddon;
+    const hasTrailing = !!trailingAddon;
+
+    const paddings = sortCx({
+        sm: {
+            input: cx(
+                // Apply padding styles when select element is passed as a child
+                hasLeading && "group-has-[&>select]:px-2.5 group-has-[&>select]:pl-2.5",
+                hasTrailing && (prefix ? "group-has-[&>select]:pr-6 group-has-[&>select]:pl-0" : "group-has-[&>select]:pr-6 group-has-[&>select]:pl-3"),
+            ),
+            leadingText: "pl-3",
+        },
+        md: {
+            input: cx(
+                // Apply padding styles when select element is passed as a child
+                hasLeading && "group-has-[&>select]:px-3 group-has-[&>select]:pl-3",
+                hasTrailing && (prefix ? "group-has-[&>select]:pr-6 group-has-[&>select]:pl-0" : "group-has-[&>select]:pr-6 group-has-[&>select]:pl-3"),
+            ),
+            leadingText: "pl-3.5",
+        },
+    });
+
+    return (
+        <TextField
+            size={size}
+            aria-label={label || undefined}
+            inputClassName={cx(paddings[size].input)}
+            tooltipClassName={cx(hasTrailing && !hasLeading && "group-has-[&>select]:right-0")}
+            wrapperClassName={cx(
+                "z-10",
+                // Apply styles based on the presence of leading or trailing elements
+                hasLeading && "rounded-l-none",
+                hasTrailing && "rounded-r-none",
+                // When select element is passed as a child
+                "group-has-[&>select]:bg-transparent group-has-[&>select]:shadow-none group-has-[&>select]:ring-0 group-has-[&>select]:focus-within:ring-0",
+                // In `Input` component, there is "group-disabled" class so here we need to use "group-disabled:group-has-[&>select]" to avoid conflict
+                "group-disabled:group-has-[&>select]:bg-transparent",
+            )}
+            {...props}
+        >
+            {({ isDisabled, isInvalid, isRequired }) => (
+                <>
+                    {label && <Label isRequired={isRequired}>{label}</Label>}
+
+                    <div
+                        data-input-size={size}
+                        className={cx(
+                            "group relative flex h-max w-full flex-row justify-center rounded-lg bg-primary transition-all duration-100 ease-linear",
+
+                            // Only apply focus ring when child is select and input is focused
+                            "has-[&>select]:shadow-xs has-[&>select]:ring-1 has-[&>select]:ring-border-primary has-[&>select]:ring-inset has-[&>select]:has-[input:focus]:ring-2 has-[&>select]:has-[input:focus]:ring-border-brand",
+
+                            isDisabled && "cursor-not-allowed has-[&>select]:bg-disabled_subtle has-[&>select]:ring-border-disabled",
+                            isInvalid && "has-[&>select]:ring-border-error_subtle has-[&>select]:has-[input:focus]:ring-border-error",
+                        )}
+                    >
+                        {leadingAddon && <section data-leading={hasLeading || undefined}>{leadingAddon}</section>}
+
+                        {prefix && (
+                            <span className={cx("my-auto grow pr-2", paddings[size].leadingText)}>
+                                <p className={cx("text-md text-tertiary", isDisabled && "text-disabled")}>{prefix}</p>
+                            </span>
+                        )}
+
+                        {children}
+
+                        {trailingAddon && <section data-trailing={hasTrailing || undefined}>{trailingAddon}</section>}
+                    </div>
+
+                    {hint && <HintText isInvalid={isInvalid}>{hint}</HintText>}
+                </>
+            )}
+        </TextField>
+    );
+};
+
+InputGroup.Prefix = InputPrefix;
+
+InputGroup.displayName = "InputGroup";

package/src/design_system/elements/input/input.aman.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { type ComponentType, type HTMLAttributes, type Ref, createContext, useContext } from "react";
+import { HelpCircle, InfoCircle } from "@untitledui/icons";
+import type { InputProps as AriaInputProps, TextFieldProps as AriaTextFieldProps } from "react-aria-components";
+import { Group as AriaGroup, Input as AriaInput, TextField as AriaTextField } from "react-aria-components";
+import { HintText } from './hint-text';
+import { Label } from './label';
+import { Tooltip, TooltipTrigger } from '../tooltip/tooltip';
+import { cx, sortCx } from '../../../utils/cx';
+
+export interface InputBaseProps extends AriaTextFieldProps {
+    tooltip?: string;
+    size?: "sm" | "md";
+    placeholder?: string;
+    iconClassName?: string;
+    inputClassName?: string;
+    wrapperClassName?: string;
+    tooltipClassName?: string;
+    shortcut?: string | boolean;
+    ref?: Ref<HTMLInputElement>;
+    groupRef?: Ref<HTMLDivElement>;
+    icon?: ComponentType<HTMLAttributes<HTMLOrSVGElement>>;
+    label?: string;
+    hint?: string;
+}
+
+const TextFieldContext = createContext<Partial<InputBaseProps>>({});
+
+export const InputBase = ({
+    ref,
+    tooltip,
+    shortcut,
+    groupRef,
+    size = "sm",
+    isInvalid,
+    isDisabled,
+    icon: Icon,
+    placeholder,
+    wrapperClassName,
+    tooltipClassName,
+    inputClassName,
+    iconClassName,
+    isRequired: _isRequired,
+    ...inputProps
+}: Omit<InputBaseProps, "label" | "hint">) => {
+    const hasTrailingIcon = tooltip || isInvalid;
+    const hasLeadingIcon = Icon;
+    const context = useContext(TextFieldContext);
+    const inputSize = context?.size || size;
+
+    const sizes = sortCx({
+        sm: {
+            root: cx("px-3 py-2.5", hasTrailingIcon && "pr-9", hasLeadingIcon && "pl-10"),
+            iconLeading: "left-3",
+            iconTrailing: "right-3",
+            shortcut: "pr-2.5",
+        },
+        md: {
+            root: cx("px-3.5 py-3", hasTrailingIcon && "pr-9.5", hasLeadingIcon && "pl-10.5"),
+            iconLeading: "left-3.5",
+            iconTrailing: "right-3.5",
+            shortcut: "pr-3",
+        },
+    });
+
+    return (
+        <AriaGroup
+            {...{ isDisabled, isInvalid }}
+            ref={groupRef}
+            className={({ isFocusWithin, isDisabled, isInvalid }) =>
+                cx(
+                    "relative flex w-full flex-row place-content-center place-items-center rounded-sm bg-white shadow-sm ring-1 ring-secondary transition-shadow duration-100 ease-linear ring-inset",
+                    isFocusWithin && !isDisabled && "ring-2 ring-focus-ring",
+                    isDisabled && "cursor-not-allowed bg-primary ring-secondary",
+                    isInvalid && "ring-error_subtle",
+                    isInvalid && isFocusWithin && "ring-2 ring-error",
+                    context?.wrapperClassName,
+                    wrapperClassName,
+                )
+            }
+        >
+            {Icon && (
+                <Icon
+                    className={cx(
+                        "pointer-events-none absolute size-5 text-secondary",
+                        isDisabled && "text-border-secondary",
+                        sizes[inputSize].iconLeading,
+                        context?.iconClassName,
+                        iconClassName,
+                    )}
+                />
+            )}
+
+            <AriaInput
+                {...(inputProps as AriaInputProps)}
+                ref={ref}
+                placeholder={placeholder}
+                className={cx(
+                    "m-0 w-full bg-transparent text-base font-body text-fg-primary ring-0 outline-hidden placeholder:text-secondary autofill:rounded-sm autofill:text-fg-primary",
+                    isDisabled && "cursor-not-allowed text-secondary",
+                    sizes[inputSize].root,
+                    context?.inputClassName,
+                    inputClassName,
+                )}
+            />
+
+            {tooltip && !isInvalid && (
+                <Tooltip title={tooltip} placement="top">
+                    <TooltipTrigger
+                        className={cx(
+                            "absolute cursor-pointer text-secondary transition duration-200 hover:text-fg-primary focus:text-fg-primary",
+                            sizes[inputSize].iconTrailing,
+                            context?.tooltipClassName,
+                            tooltipClassName,
+                        )}
+                    >
+                        <HelpCircle className="size-4" />
+                    </TooltipTrigger>
+                </Tooltip>
+            )}
+
+            {isInvalid && (
+                <InfoCircle
+                    className={cx(
+                        "pointer-events-none absolute size-4 text-error",
+                        sizes[inputSize].iconTrailing,
+                    )}
+                />
+            )}
+
+            {shortcut && (
+                <kbd
+                    className={cx(
+                        "pointer-events-none absolute flex h-5 items-center justify-center rounded bg-utility-gray-50 px-1.5 text-xs font-medium text-tertiary shadow-xs ring-1 ring-inset ring-utility-gray-200",
+                        sizes[inputSize].shortcut,
+                    )}
+                >
+                    {shortcut === true ? "⌘K" : shortcut}
+                </kbd>
+            )}
+        </AriaGroup>
+    );
+};
+
+export const Input = ({
+    label,
+    hint,
+    size,
+    isInvalid,
+    isDisabled,
+    isRequired,
+    ...props
+}: InputBaseProps) => {
+    const textFieldContext = { size, wrapperClassName: props.wrapperClassName, inputClassName: props.inputClassName, iconClassName: props.iconClassName, tooltipClassName: props.tooltipClassName };
+
+    return (
+        <TextFieldContext.Provider value={textFieldContext}>
+            <AriaTextField
+                {...({ isInvalid, isDisabled, isRequired } as AriaTextFieldProps)}
+                className="flex flex-col gap-1.5"
+            >
+                {label && <Label>{label}</Label>}
+                <InputBase {...props} size={size} isInvalid={isInvalid} isDisabled={isDisabled} />
+                {hint && <HintText>{hint}</HintText>}
+            </AriaTextField>
+        </TextFieldContext.Provider>
+    );
+};
+
+import { registerThemeVariant } from '../../../lib/component-registry';
+registerThemeVariant('input', 'aman', Input);