@avenue-ticketing/ui 0.12.0-beta.2 → 0.12.0-beta.4

package/dist/react/textarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../utils/cx.ts","../../../../components/base/input/hint-text.tsx","../../../../components/base/tooltip/tooltip.tsx","../../../../components/base/input/label.tsx","../../../../components/base/input/input.tsx","../../../../components/base/textarea/textarea.tsx"],"names":["AriaText","AriaTooltipTrigger","jsx","AriaTooltip","AriaOverlayArrow","AriaButton","jsxs","AriaLabel","HelpCircle","AriaTextArea","AriaTextField","Fragment"],"mappings":"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","file":"textarea.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","\"use client\";\n\nimport type { ReactNode, Ref } from \"react\";\nimport type { TextProps as AriaTextProps } from \"react-aria-components\";\nimport { Text as AriaText } from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\ninterface HintTextProps extends AriaTextProps {\n    /** Indicates that the hint text is an error message. */\n    isInvalid?: boolean;\n    ref?: Ref<HTMLElement>;\n    size?: \"sm\" | \"md\";\n    children: ReactNode;\n}\n\nexport const HintText = ({ isInvalid, className, size = \"md\", ...props }: HintTextProps) => {\n    return (\n        <AriaText\n            {...props}\n            slot={isInvalid ? \"errorMessage\" : \"description\"}\n            className={cx(\n                \"text-sm text-tertiary\",\n\n                // Size\n                size === \"sm\" && \"text-xs\",\n                \"in-data-[input-size=sm]:text-xs\",\n\n                // Invalid state\n                isInvalid && \"text-error-primary\",\n                \"group-invalid:text-error-primary\",\n\n                className,\n            )}\n        />\n    );\n};\n\nHintText.displayName = \"HintText\";\n","\"use client\";\n\n/** Figma: Tooltip (1052:485) */\n\nimport type { ReactNode } from \"react\";\nimport type {\n    ButtonProps as AriaButtonProps,\n    TooltipProps as AriaTooltipProps,\n    TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps,\n} from \"react-aria-components\";\nimport { Button as AriaButton, OverlayArrow as AriaOverlayArrow, Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger } from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\ninterface TooltipProps extends AriaTooltipTriggerComponentProps, Omit<AriaTooltipProps, \"children\"> {\n    /**\n     * The title of the tooltip.\n     */\n    title: ReactNode;\n    /**\n     * The description of the tooltip.\n     */\n    description?: ReactNode;\n    /**\n     * Whether to show the arrow on the tooltip.\n     *\n     * @default false\n     */\n    arrow?: boolean;\n    /**\n     * Delay in milliseconds before the tooltip is shown on first hover.\n     *\n     * @default 100\n     */\n    delay?: number;\n}\n\nexport const Tooltip = ({\n    title,\n    description,\n    children,\n    arrow = false,\n    delay = 100,\n    closeDelay = 0,\n    trigger,\n    isDisabled,\n    isOpen,\n    defaultOpen,\n    offset = 6,\n    crossOffset,\n    placement = \"top\",\n    onOpenChange,\n    ...tooltipProps\n}: TooltipProps) => {\n    const isTopOrBottomLeft = [\"top left\", \"top end\", \"bottom left\", \"bottom end\"].includes(placement);\n    const isTopOrBottomRight = [\"top right\", \"top start\", \"bottom right\", \"bottom start\"].includes(placement);\n    // Set negative cross offset for left and right placement to visually balance the tooltip.\n    const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;\n\n    return (\n        <AriaTooltipTrigger {...{ trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }}>\n            {children}\n\n            <AriaTooltip\n                {...tooltipProps}\n                offset={offset}\n                placement={placement}\n                crossOffset={crossOffset ?? calculatedCrossOffset}\n                className={({ isEntering, isExiting }) => cx(isEntering && \"ease-out animate-in\", isExiting && \"ease-in animate-out\")}\n            >\n                {({ isEntering, isExiting }) => (\n                    <div\n                        className={cx(\n                            \"z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform\",\n                            description ? \"py-3\" : \"py-2\",\n\n                            isEntering &&\n                                \"ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5\",\n                            isExiting &&\n                                \"ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5\",\n                        )}\n                    >\n                        <span className=\"text-xs font-semibold text-white\">{title}</span>\n\n                        {description && <span className=\"text-xs font-medium text-tooltip-supporting-text\">{description}</span>}\n\n                        {arrow && (\n                            <AriaOverlayArrow>\n                                <svg\n                                    viewBox=\"0 0 100 100\"\n                                    className=\"size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180\"\n                                >\n                                    <path d=\"M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z\" />\n                                </svg>\n                            </AriaOverlayArrow>\n                        )}\n                    </div>\n                )}\n            </AriaTooltip>\n        </AriaTooltipTrigger>\n    );\n};\n\ninterface TooltipTriggerProps extends AriaButtonProps {}\n\nexport const TooltipTrigger = ({ children, className, ...buttonProps }: TooltipTriggerProps) => {\n    return (\n        <AriaButton {...buttonProps} className={(values) => cx(\"h-max w-max outline-hidden\", typeof className === \"function\" ? className(values) : className)}>\n            {children}\n        </AriaButton>\n    );\n};\n","\"use client\";\n\nimport type { ReactNode, Ref } from \"react\";\nimport { QuestionIcon as HelpCircle } from \"@phosphor-icons/react/dist/csr/Question\";\nimport type { LabelProps as AriaLabelProps } from \"react-aria-components\";\nimport { Label as AriaLabel } from \"react-aria-components\";\nimport { Tooltip, TooltipTrigger } from \"@/components/base/tooltip/tooltip\";\nimport { cx } from \"@/utils/cx\";\n\ninterface LabelProps extends AriaLabelProps {\n    children: ReactNode;\n    isInvalid?: boolean;\n    isRequired?: boolean;\n    tooltip?: string;\n    tooltipDescription?: string;\n    ref?: Ref<HTMLLabelElement>;\n}\n\nexport const Label = ({ isInvalid, isRequired, tooltip, tooltipDescription, className, ...props }: LabelProps) => {\n    return (\n        <AriaLabel\n            // Used for conditionally hiding/showing the label element via CSS:\n            // <Input label=\"Visible only on mobile\" className=\"lg:**:data-label:hidden\" />\n            // or\n            // <Input label=\"Visible only on mobile\" className=\"lg:label:hidden\" />\n            data-label=\"true\"\n            {...props}\n            className={cx(\"flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary\", className)}\n        >\n            {props.children}\n\n            <span\n                className={cx(\n                    \"hidden text-brand-tertiary\",\n                    isRequired && \"block\",\n                    typeof isRequired === \"undefined\" && \"group-required:block\",\n\n                    isInvalid && \"text-error-primary\",\n                    typeof isInvalid === \"undefined\" && \"group-invalid:text-error-primary\",\n                )}\n            >\n                *\n            </span>\n\n            {tooltip && (\n                <Tooltip title={tooltip} description={tooltipDescription} placement=\"top\">\n                    <TooltipTrigger\n                        // `TooltipTrigger` inherits the disabled state from the parent form field\n                        // but we don't that. We want the tooltip be enabled even if the parent\n                        // field is disabled.\n                        isDisabled={false}\n                        className=\"cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover\"\n                    >\n                        <HelpCircle className=\"size-4\" />\n                    </TooltipTrigger>\n                </Tooltip>\n            )}\n        </AriaLabel>\n    );\n};\n\nLabel.displayName = \"Label\";\n","\"use client\";\n\nimport { type ComponentType, type HTMLAttributes, type ReactNode, type Ref, createContext, useContext, useState } from \"react\";\nimport { EyeIcon as Eye } from \"@phosphor-icons/react/dist/csr/Eye\";\nimport { EyeSlashIcon as EyeOff } from \"@phosphor-icons/react/dist/csr/EyeSlash\";\nimport { QuestionIcon as HelpCircle } from \"@phosphor-icons/react/dist/csr/Question\";\nimport { InfoIcon as InfoCircle } from \"@phosphor-icons/react/dist/csr/Info\";\nimport type { InputProps as AriaInputProps, TextFieldProps as AriaTextFieldProps } from \"react-aria-components\";\nimport { Button as AriaButton, Group as AriaGroup, Input as AriaInput, TextField as AriaTextField } from \"react-aria-components\";\nimport { HintText } from \"@/components/base/input/hint-text\";\nimport { Label } from \"@/components/base/input/label\";\nimport { Tooltip, TooltipTrigger } from \"@/components/base/tooltip/tooltip\";\nimport { cx, sortCx } from \"@/utils/cx\";\n\n/**\n * Figma: Inputs (85:1269)\n *\n * Default: border (1px) border-primary + shadow-xs.\n * Focus: 1px border-brand + inset ring-brand (2px visual, no layout shift from border-2).\n * Error default: border-error_subtle; error focus: border-error + inset ring-error.\n */\nexport const inputFocusRingShadow = \"border-brand ring-1 ring-inset ring-brand\";\nexport const inputErrorFocusRingShadow = \"border-error ring-1 ring-inset ring-error\";\n/** Shell focus overlay — border + inset ring on one ::after above children (no host border-brand; avoids double-ring gap). */\nexport const inputFocusRingShellOverlay =\n    \"after:pointer-events-none after:absolute after:-inset-px after:z-10 after:rounded-lg after:border after:border-solid after:border-brand after:ring-1 after:ring-inset after:ring-brand after:content-['']\";\nexport const inputErrorFocusRingShellOverlay =\n    \"after:pointer-events-none after:absolute after:-inset-px after:z-10 after:rounded-lg after:border after:border-solid after:border-error after:ring-1 after:ring-inset after:ring-error after:content-['']\";\nexport const inputErrorFocusRingGroupInvalidShellOverlay =\n    \"group-invalid:focus-within:after:pointer-events-none group-invalid:focus-within:after:absolute group-invalid:focus-within:after:-inset-px group-invalid:focus-within:after:z-10 group-invalid:focus-within:after:rounded-lg group-invalid:focus-within:after:border group-invalid:focus-within:after:border-solid group-invalid:focus-within:after:border-error group-invalid:focus-within:after:ring-1 group-invalid:focus-within:after:ring-inset group-invalid:focus-within:after:ring-error group-invalid:focus-within:after:content-['']\";\nexport const inputFocusVisibleRingShadow =\n    \"focus-visible:outline-none focus-visible:border-brand focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-brand\";\nexport const inputErrorFocusVisibleRingShadow =\n    \"focus-visible:outline-none focus-visible:border-error focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-error\";\n\nexport interface InputBaseProps extends Omit<AriaInputProps, \"size\"> {\n    /** Tooltip message on hover. */\n    tooltip?: string;\n    /** Whether the input is invalid. */\n    isInvalid?: boolean;\n    /** Whether the input is disabled. */\n    isDisabled?: boolean;\n    /** Whether the input is required. */\n    isRequired?: boolean;\n    /**\n     * Input size.\n     * @default \"sm\"\n     */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Placeholder text. */\n    placeholder?: string;\n    /** Class name for the icon. */\n    iconClassName?: string;\n    /** Class name for the input. */\n    inputClassName?: string;\n    /** Class name for the input wrapper. */\n    wrapperClassName?: string;\n    /** Class name for the tooltip. */\n    tooltipClassName?: string;\n    /** Keyboard shortcut to display. */\n    shortcut?: string | boolean;\n    ref?: Ref<HTMLInputElement>;\n    groupRef?: Ref<HTMLDivElement>;\n    /** Icon component to display on the left side of the input. */\n    icon?: ComponentType<HTMLAttributes<HTMLOrSVGElement>>;\n}\n\nexport const InputBase = ({\n    ref,\n    tooltip,\n    shortcut,\n    groupRef,\n    size = \"md\",\n    isInvalid,\n    isDisabled,\n    isRequired,\n    icon: Icon,\n    placeholder,\n    wrapperClassName,\n    tooltipClassName,\n    inputClassName,\n    iconClassName,\n    type = \"text\",\n    ...inputProps\n}: InputBaseProps) => {\n    const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n\n    // Check if the input has a leading icon or tooltip\n    const hasTrailingIcon = tooltip || isInvalid;\n    const hasLeadingIcon = Icon;\n\n    // If the input is inside a `TextFieldContext`, use its context to simplify applying styles\n    const context = useContext(TextFieldContext);\n\n    const inputSize = context?.size || size;\n\n    const sizes = sortCx({\n        sm: {\n            root: cx(\"px-3 py-2 text-sm\", hasLeadingIcon && \"pl-9\", hasTrailingIcon && \"pr-9\"),\n            iconLeading: \"left-3 size-4 stroke-[2.25px]\",\n            iconTrailing: \"right-3\",\n            shortcut: \"pr-1.5\",\n        },\n        md: {\n            root: cx(\"px-3 py-2 text-md\", hasLeadingIcon && \"pl-10\", hasTrailingIcon && \"pr-9\"),\n            iconLeading: \"left-3 size-5\",\n            iconTrailing: \"right-3\",\n            shortcut: \"pr-2\",\n        },\n        lg: {\n            root: cx(\"px-3.5 py-2.5 text-md\", hasLeadingIcon && \"pl-10.5\", hasTrailingIcon && \"pr-9.5\"),\n            iconLeading: \"left-3.5 size-5\",\n            iconTrailing: \"right-3.5\",\n            shortcut: \"pr-2.5\",\n        },\n    });\n\n    return (\n        <AriaGroup\n            {...{ isDisabled, isInvalid }}\n            ref={groupRef}\n            className={({ isFocusWithin, isDisabled, isInvalid }) =>\n                cx(\n                    \"group/input relative flex w-full flex-row place-content-center place-items-center rounded-lg border border-solid border-primary bg-primary shadow-xs transition-[border-color,box-shadow] duration-100 ease-linear\",\n\n                    isFocusWithin && !isDisabled && !isInvalid && inputFocusRingShadow,\n\n                    // Disabled state styles\n                    isDisabled && \"cursor-not-allowed opacity-50\",\n                    \"group-disabled:cursor-not-allowed group-disabled:opacity-50\",\n\n                    // Invalid state styles\n                    isInvalid && !isFocusWithin && \"border-error_subtle\",\n                    \"group-invalid:border-error_subtle\",\n                    \"group-invalid:focus-within:border-error group-invalid:focus-within:ring-1 group-invalid:focus-within:ring-inset group-invalid:focus-within:ring-error\",\n\n                    // Invalid + focus — darker error stroke (not brand)\n                    isInvalid && isFocusWithin && inputErrorFocusRingShadow,\n\n                    context?.wrapperClassName,\n                    wrapperClassName,\n                )\n            }\n        >\n            {/* Leading icon and Payment icon */}\n            {Icon && (\n                <Icon className={cx(\"pointer-events-none absolute text-fg-quaternary\", sizes[inputSize].iconLeading, context?.iconClassName, iconClassName)} />\n            )}\n\n            {/* Input field */}\n            <AriaInput\n                {...(inputProps as AriaInputProps)}\n                ref={ref}\n                required={isRequired}\n                type={type === \"password\" && isPasswordVisible ? \"text\" : type}\n                placeholder={placeholder}\n                className={cx(\n                    \"m-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder autofill:rounded-lg autofill:text-primary disabled:cursor-not-allowed\",\n                    sizes[inputSize].root,\n                    context?.inputClassName,\n                    inputClassName,\n                )}\n            />\n\n            {/* Tooltip and help icon */}\n            {tooltip && type !== \"password\" && (\n                <Tooltip title={tooltip} placement=\"top\">\n                    <TooltipTrigger\n                        className={cx(\n                            \"absolute cursor-pointer text-fg-quaternary transition duration-100 ease-linear group-invalid/input:hidden hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover\",\n                            sizes[inputSize].iconTrailing,\n                            context?.tooltipClassName,\n                            tooltipClassName,\n                        )}\n                    >\n                        <HelpCircle className=\"size-4 stroke-[2.25px]\" />\n                    </TooltipTrigger>\n                </Tooltip>\n            )}\n\n            {/* Invalid icon */}\n            {type !== \"password\" && (\n                <InfoCircle\n                    className={cx(\n                        \"pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block\",\n                        sizes[inputSize].iconTrailing,\n                        context?.tooltipClassName,\n                        tooltipClassName,\n                    )}\n                />\n            )}\n\n            {/* Password visibility toggle */}\n            {type === \"password\" && (\n                <AriaButton\n                    aria-label=\"Toggle password visibility\"\n                    onClick={() => setIsPasswordVisible(!isPasswordVisible)}\n                    className={cx(\n                        \"absolute flex cursor-pointer items-center justify-center text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover focus:outline-hidden\",\n                        sizes[inputSize].iconTrailing,\n                    )}\n                >\n                    {isPasswordVisible ? <EyeOff className=\"size-4 stroke-[2.25px]\" /> : <Eye className=\"size-4 stroke-[2.25px]\" />}\n                </AriaButton>\n            )}\n\n            {/* Shortcut */}\n            {shortcut && (\n                <div\n                    className={cx(\n                        \"pointer-events-none absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex\",\n                        sizes[inputSize].shortcut,\n                    )}\n                >\n                    <span\n                        aria-hidden=\"true\"\n                        className=\"pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset\"\n                    >\n                        {typeof shortcut === \"string\" ? shortcut : \"⌘K\"}\n                    </span>\n                </div>\n            )}\n        </AriaGroup>\n    );\n};\n\nInputBase.displayName = \"InputBase\";\n\ninterface TextFieldContextProps extends Partial<Pick<InputBaseProps, \"size\" | \"wrapperClassName\" | \"inputClassName\" | \"iconClassName\" | \"tooltipClassName\">> {}\n\nconst TextFieldContext = createContext<TextFieldContextProps>({});\n\nexport interface TextFieldProps extends AriaTextFieldProps, TextFieldContextProps {}\n\nexport const TextField = ({ className, size = \"md\", inputClassName, wrapperClassName, iconClassName, tooltipClassName, ...props }: TextFieldProps) => {\n    return (\n        <TextFieldContext.Provider value={{ inputClassName, wrapperClassName, iconClassName, tooltipClassName, size }}>\n            <AriaTextField\n                {...props}\n                data-input-wrapper\n                data-input-size={size}\n                className={(state) =>\n                    cx(\"group flex h-max w-full flex-col items-start justify-start gap-1.5\", typeof className === \"function\" ? className(state) : className)\n                }\n            />\n        </TextFieldContext.Provider>\n    );\n};\n\nTextField.displayName = \"TextField\";\n\nexport interface InputProps\n    extends\n        AriaTextFieldProps,\n        Pick<\n            InputBaseProps,\n            | \"ref\"\n            | \"placeholder\"\n            | \"icon\"\n            | \"shortcut\"\n            | \"tooltip\"\n            | \"groupRef\"\n            | \"size\"\n            | \"wrapperClassName\"\n            | \"inputClassName\"\n            | \"iconClassName\"\n            | \"tooltipClassName\"\n        > {\n    /** Label text for the input */\n    label?: string;\n    /** Helper text displayed below the input */\n    hint?: ReactNode;\n    /** Whether to hide required indicator from label */\n    hideRequiredIndicator?: boolean;\n}\n\nexport const Input = ({\n    size = \"md\",\n    placeholder,\n    icon: Icon,\n    label,\n    hint,\n    shortcut,\n    hideRequiredIndicator,\n    className,\n    ref,\n    groupRef,\n    tooltip,\n    iconClassName,\n    inputClassName,\n    wrapperClassName,\n    tooltipClassName,\n    type = \"text\",\n    ...props\n}: InputProps) => {\n    return (\n        <TextField aria-label={!label ? placeholder : undefined} {...props} size={size} className={className}>\n            {({ isRequired, isInvalid }) => (\n                <>\n                    {label && (\n                        <Label isRequired={hideRequiredIndicator ? !hideRequiredIndicator : isRequired} isInvalid={isInvalid}>\n                            {label}\n                        </Label>\n                    )}\n\n                    <InputBase\n                        {...{\n                            ref,\n                            groupRef,\n                            size,\n                            placeholder,\n                            icon: Icon,\n                            shortcut,\n                            iconClassName,\n                            inputClassName,\n                            wrapperClassName,\n                            tooltipClassName,\n                            tooltip,\n                            type,\n                            isInvalid,\n                        }}\n                    />\n\n                    {hint && <HintText isInvalid={isInvalid}>{hint}</HintText>}\n                </>\n            )}\n        </TextField>\n    );\n};\n\nInput.displayName = \"Input\";\n","\"use client\";\n\nimport type { ReactNode, Ref } from \"react\";\nimport React from \"react\";\nimport type { TextAreaProps as AriaTextAreaProps, TextFieldProps as AriaTextFieldProps } from \"react-aria-components\";\nimport { TextArea as AriaTextArea, TextField as AriaTextField } from \"react-aria-components\";\nimport { HintText } from \"@/components/base/input/hint-text\";\nimport { inputErrorFocusRingShadow, inputFocusRingShadow } from \"@/components/base/input/input\";\nimport { Label } from \"@/components/base/input/label\";\nimport { cx } from \"@/utils/cx\";\n\n/** Resize handle stroke — maps to fg-quaternary light (neutral-400) / dark (neutral-600). */\nconst RESIZE_HANDLE_LIGHT = \"#a3a3a3\";\nconst RESIZE_HANDLE_DARK = \"#525252\";\n\nconst getResizeHandleBg = (color: string) => {\n    return `url(data:image/svg+xml;base64,${btoa(`<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 2L2 10\" stroke=\"${color}\" stroke-linecap=\"round\"/><path d=\"M11 7L7 11\" stroke=\"${color}\" stroke-linecap=\"round\"/></svg>`)})`;\n};\n\ninterface TextAreaBaseProps extends AriaTextAreaProps {\n    ref?: Ref<HTMLTextAreaElement>;\n    size?: \"sm\" | \"md\";\n}\n\n/** Figma: Textarea (85:1269) — inset ring focus; error focus uses border-error. */\nexport const TextAreaBase = ({ className, size = \"md\", ...props }: TextAreaBaseProps) => {\n    return (\n        <AriaTextArea\n            {...props}\n            style={\n                {\n                    \"--resize-handle-bg\": getResizeHandleBg(RESIZE_HANDLE_LIGHT),\n                    \"--resize-handle-bg-dark\": getResizeHandleBg(RESIZE_HANDLE_DARK),\n                } as React.CSSProperties\n            }\n            className={(state) =>\n                cx(\n                    \"w-full scroll-py-3 rounded-lg border border-solid border-primary bg-primary text-primary shadow-xs transition-[border-color,box-shadow] duration-100 ease-linear placeholder:text-placeholder autofill:rounded-lg autofill:text-primary focus:outline-hidden\",\n\n                    size === \"sm\" && \"p-3 text-sm\",\n                    size === \"md\" && \"px-3.5 py-3 text-md\",\n\n                    // Resize handle\n                    \"[&::-webkit-resizer]:bg-(image:--resize-handle-bg) [&::-webkit-resizer]:bg-contain dark:[&::-webkit-resizer]:bg-(image:--resize-handle-bg-dark)\",\n\n                    state.isFocused && !state.isDisabled && !state.isInvalid && inputFocusRingShadow,\n                    state.isDisabled && \"cursor-not-allowed opacity-50\",\n                    state.isInvalid && !state.isFocused && \"border-error_subtle\",\n                    state.isInvalid && state.isFocused && inputErrorFocusRingShadow,\n\n                    typeof className === \"function\" ? className(state) : className,\n                )\n            }\n        />\n    );\n};\n\nTextAreaBase.displayName = \"TextAreaBase\";\n\ninterface TextFieldProps extends AriaTextFieldProps {\n    /** Label text for the textarea */\n    label?: string;\n    /** Helper text displayed below the textarea */\n    hint?: ReactNode;\n    /** Tooltip message displayed after the label. */\n    tooltip?: string;\n    /** Textarea size. */\n    size?: TextAreaBaseProps[\"size\"];\n    /** Class name for the textarea wrapper */\n    textAreaClassName?: TextAreaBaseProps[\"className\"];\n    /** Ref for the textarea wrapper */\n    ref?: Ref<HTMLDivElement>;\n    /** Ref for the textarea */\n    textAreaRef?: TextAreaBaseProps[\"ref\"];\n    /** Whether to hide required indicator from label. */\n    hideRequiredIndicator?: boolean;\n    /** Placeholder text. */\n    placeholder?: string;\n    /** Visible height of textarea in rows . */\n    rows?: number;\n    /** Visible width of textarea in columns. */\n    cols?: number;\n}\n\nexport const TextArea = ({\n    ref,\n    textAreaRef,\n    label,\n    hint,\n    tooltip,\n    size = \"md\",\n    textAreaClassName,\n    hideRequiredIndicator,\n    placeholder,\n    rows,\n    cols,\n    className,\n    ...props\n}: TextFieldProps) => {\n    return (\n        <AriaTextField\n            ref={ref}\n            {...props}\n            className={(state) => cx(\"flex flex-col gap-1.5\", typeof className === \"function\" ? className(state) : className)}\n        >\n            {({ isRequired, isInvalid }) => (\n                <>\n                    {label && (\n                        <Label isRequired={hideRequiredIndicator ? !hideRequiredIndicator : isRequired} isInvalid={isInvalid} tooltip={tooltip}>\n                            {label}\n                        </Label>\n                    )}\n\n                    <TextAreaBase ref={textAreaRef} size={size} placeholder={placeholder} rows={rows} cols={cols} className={textAreaClassName} />\n\n                    {hint && <HintText isInvalid={isInvalid}>{hint}</HintText>}\n                </>\n            )}\n        </AriaTextField>\n    );\n};\n\nTextArea.displayName = \"TextArea\";\n"]}
+{"version":3,"sources":["../../../../utils/cx.ts","../../../../components/base/input/hint-text.tsx","../../../../components/base/tooltip/tooltip.tsx","../../../../components/base/input/label.tsx","../../../../components/base/input/input.tsx","../../../../components/base/textarea/textarea.tsx"],"names":["AriaText","AriaTooltipTrigger","jsx","AriaTooltip","AriaOverlayArrow","AriaButton","jsxs","AriaLabel","HelpCircle","AriaTextArea","AriaTextField","Fragment"],"mappings":"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","file":"textarea.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","\"use client\";\n\nimport type { ReactNode, Ref } from \"react\";\nimport type { TextProps as AriaTextProps } from \"react-aria-components\";\nimport { Text as AriaText } from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\ninterface HintTextProps extends AriaTextProps {\n    /** Indicates that the hint text is an error message. */\n    isInvalid?: boolean;\n    ref?: Ref<HTMLElement>;\n    size?: \"sm\" | \"md\";\n    children: ReactNode;\n}\n\nexport const HintText = ({ isInvalid, className, size = \"md\", ...props }: HintTextProps) => {\n    return (\n        <AriaText\n            {...props}\n            slot={isInvalid ? \"errorMessage\" : \"description\"}\n            className={cx(\n                \"text-sm text-tertiary\",\n\n                // Size\n                size === \"sm\" && \"text-xs\",\n                \"in-data-[input-size=sm]:text-xs\",\n\n                // Invalid state\n                isInvalid && \"text-error-primary\",\n                \"group-invalid:text-error-primary\",\n\n                className,\n            )}\n        />\n    );\n};\n\nHintText.displayName = \"HintText\";\n","\"use client\";\n\n/** Figma: Tooltip (1052:485) */\n\nimport type { ReactNode } from \"react\";\nimport type {\n    ButtonProps as AriaButtonProps,\n    TooltipProps as AriaTooltipProps,\n    TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps,\n} from \"react-aria-components\";\nimport { Button as AriaButton, OverlayArrow as AriaOverlayArrow, Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger } from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\ninterface TooltipProps extends AriaTooltipTriggerComponentProps, Omit<AriaTooltipProps, \"children\"> {\n    /**\n     * The title of the tooltip.\n     */\n    title: ReactNode;\n    /**\n     * The description of the tooltip.\n     */\n    description?: ReactNode;\n    /**\n     * Whether to show the arrow on the tooltip.\n     *\n     * @default false\n     */\n    arrow?: boolean;\n    /**\n     * Delay in milliseconds before the tooltip is shown on first hover.\n     *\n     * @default 100\n     */\n    delay?: number;\n}\n\nexport const Tooltip = ({\n    title,\n    description,\n    children,\n    arrow = false,\n    delay = 100,\n    closeDelay = 0,\n    trigger,\n    isDisabled,\n    isOpen,\n    defaultOpen,\n    offset = 6,\n    crossOffset,\n    placement = \"top\",\n    onOpenChange,\n    ...tooltipProps\n}: TooltipProps) => {\n    const isTopOrBottomLeft = [\"top left\", \"top end\", \"bottom left\", \"bottom end\"].includes(placement);\n    const isTopOrBottomRight = [\"top right\", \"top start\", \"bottom right\", \"bottom start\"].includes(placement);\n    // Set negative cross offset for left and right placement to visually balance the tooltip.\n    const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;\n\n    return (\n        <AriaTooltipTrigger {...{ trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }}>\n            {children}\n\n            <AriaTooltip\n                {...tooltipProps}\n                offset={offset}\n                placement={placement}\n                crossOffset={crossOffset ?? calculatedCrossOffset}\n                className={({ isEntering, isExiting }) => cx(isEntering && \"ease-out animate-in\", isExiting && \"ease-in animate-out\")}\n            >\n                {({ isEntering, isExiting }) => (\n                    <div\n                        className={cx(\n                            \"z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform\",\n                            description ? \"py-3\" : \"py-2\",\n\n                            isEntering &&\n                                \"ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5\",\n                            isExiting &&\n                                \"ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5\",\n                        )}\n                    >\n                        <span className=\"text-xs font-semibold text-white\">{title}</span>\n\n                        {description && <span className=\"text-xs font-medium text-tooltip-supporting-text\">{description}</span>}\n\n                        {arrow && (\n                            <AriaOverlayArrow>\n                                <svg\n                                    viewBox=\"0 0 100 100\"\n                                    className=\"size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180\"\n                                >\n                                    <path d=\"M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z\" />\n                                </svg>\n                            </AriaOverlayArrow>\n                        )}\n                    </div>\n                )}\n            </AriaTooltip>\n        </AriaTooltipTrigger>\n    );\n};\n\ninterface TooltipTriggerProps extends AriaButtonProps {}\n\nexport const TooltipTrigger = ({ children, className, ...buttonProps }: TooltipTriggerProps) => {\n    return (\n        <AriaButton {...buttonProps} className={(values) => cx(\"h-max w-max outline-hidden\", typeof className === \"function\" ? className(values) : className)}>\n            {children}\n        </AriaButton>\n    );\n};\n","\"use client\";\n\nimport type { ReactNode, Ref } from \"react\";\nimport { QuestionIcon as HelpCircle } from \"@phosphor-icons/react/dist/csr/Question\";\nimport type { LabelProps as AriaLabelProps } from \"react-aria-components\";\nimport { Label as AriaLabel } from \"react-aria-components\";\nimport { Tooltip, TooltipTrigger } from \"@/components/base/tooltip/tooltip\";\nimport { cx } from \"@/utils/cx\";\n\ninterface LabelProps extends AriaLabelProps {\n    children: ReactNode;\n    isInvalid?: boolean;\n    isRequired?: boolean;\n    tooltip?: string;\n    tooltipDescription?: string;\n    ref?: Ref<HTMLLabelElement>;\n}\n\nexport const Label = ({ isInvalid, isRequired, tooltip, tooltipDescription, className, ...props }: LabelProps) => {\n    return (\n        <AriaLabel\n            // Used for conditionally hiding/showing the label element via CSS:\n            // <Input label=\"Visible only on mobile\" className=\"lg:**:data-label:hidden\" />\n            // or\n            // <Input label=\"Visible only on mobile\" className=\"lg:label:hidden\" />\n            data-label=\"true\"\n            {...props}\n            className={cx(\"flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary\", className)}\n        >\n            {props.children}\n\n            <span\n                className={cx(\n                    \"hidden text-brand-tertiary\",\n                    isRequired && \"block\",\n                    typeof isRequired === \"undefined\" && \"group-required:block\",\n\n                    isInvalid && \"text-error-primary\",\n                    typeof isInvalid === \"undefined\" && \"group-invalid:text-error-primary\",\n                )}\n            >\n                *\n            </span>\n\n            {tooltip && (\n                <Tooltip title={tooltip} description={tooltipDescription} placement=\"top\">\n                    <TooltipTrigger\n                        // `TooltipTrigger` inherits the disabled state from the parent form field\n                        // but we don't that. We want the tooltip be enabled even if the parent\n                        // field is disabled.\n                        isDisabled={false}\n                        className=\"cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover\"\n                    >\n                        <HelpCircle className=\"size-4\" />\n                    </TooltipTrigger>\n                </Tooltip>\n            )}\n        </AriaLabel>\n    );\n};\n\nLabel.displayName = \"Label\";\n","\"use client\";\n\nimport { type ComponentType, type HTMLAttributes, type ReactNode, type Ref, createContext, useContext, useState } from \"react\";\nimport { EyeIcon as Eye } from \"@phosphor-icons/react/dist/csr/Eye\";\nimport { EyeSlashIcon as EyeOff } from \"@phosphor-icons/react/dist/csr/EyeSlash\";\nimport { QuestionIcon as HelpCircle } from \"@phosphor-icons/react/dist/csr/Question\";\nimport { InfoIcon as InfoCircle } from \"@phosphor-icons/react/dist/csr/Info\";\nimport type { InputProps as AriaInputProps, TextFieldProps as AriaTextFieldProps } from \"react-aria-components\";\nimport { Button as AriaButton, Group as AriaGroup, Input as AriaInput, TextField as AriaTextField } from \"react-aria-components\";\nimport { HintText } from \"@/components/base/input/hint-text\";\nimport { Label } from \"@/components/base/input/label\";\nimport { Tooltip, TooltipTrigger } from \"@/components/base/tooltip/tooltip\";\nimport { cx, sortCx } from \"@/utils/cx\";\n\n/**\n * Figma: Inputs (85:1269)\n *\n * Default: border (1px) border-primary + shadow-xs.\n * Focus: 1px border-brand + inset ring-brand (2px visual, no layout shift from border-2).\n * Error default: border-error_subtle; error focus: border-error + inset ring-error.\n */\nexport const inputFocusRingShadow = \"border-brand ring-1 ring-inset ring-brand\";\nexport const inputErrorFocusRingShadow = \"border-error ring-1 ring-inset ring-error\";\n/** Shell focus overlay — border + inset ring on one ::after above children (no host border-brand; avoids double-ring gap). */\nexport const inputFocusRingShellOverlay =\n    \"after:pointer-events-none after:absolute after:-inset-px after:z-10 after:rounded-lg after:border after:border-solid after:border-brand after:ring-1 after:ring-inset after:ring-brand after:content-['']\";\nexport const inputErrorFocusRingShellOverlay =\n    \"after:pointer-events-none after:absolute after:-inset-px after:z-10 after:rounded-lg after:border after:border-solid after:border-error after:ring-1 after:ring-inset after:ring-error after:content-['']\";\nexport const inputErrorFocusRingGroupInvalidShellOverlay =\n    \"group-invalid:focus-within:after:pointer-events-none group-invalid:focus-within:after:absolute group-invalid:focus-within:after:-inset-px group-invalid:focus-within:after:z-10 group-invalid:focus-within:after:rounded-lg group-invalid:focus-within:after:border group-invalid:focus-within:after:border-solid group-invalid:focus-within:after:border-error group-invalid:focus-within:after:ring-1 group-invalid:focus-within:after:ring-inset group-invalid:focus-within:after:ring-error group-invalid:focus-within:after:content-['']\";\nexport const inputFocusVisibleRingShadow =\n    \"focus-visible:outline-none focus-visible:border-brand focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-brand\";\nexport const inputErrorFocusVisibleRingShadow =\n    \"focus-visible:outline-none focus-visible:border-error focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-error\";\n\nexport interface InputBaseProps extends Omit<AriaInputProps, \"size\"> {\n    /** Tooltip message on hover. */\n    tooltip?: string;\n    /** Whether the input is invalid. */\n    isInvalid?: boolean;\n    /** Whether the input is disabled. */\n    isDisabled?: boolean;\n    /** Whether the input is required. */\n    isRequired?: boolean;\n    /**\n     * Input size.\n     * @default \"sm\"\n     */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Placeholder text. */\n    placeholder?: string;\n    /** Class name for the icon. */\n    iconClassName?: string;\n    /** Class name for the input. */\n    inputClassName?: string;\n    /** Class name for the input wrapper. */\n    wrapperClassName?: string;\n    /** Class name for the tooltip. */\n    tooltipClassName?: string;\n    /** Keyboard shortcut to display. */\n    shortcut?: string | boolean;\n    ref?: Ref<HTMLInputElement>;\n    groupRef?: Ref<HTMLDivElement>;\n    /** Icon component to display on the left side of the input. */\n    icon?: ComponentType<HTMLAttributes<HTMLOrSVGElement>>;\n}\n\nexport const InputBase = ({\n    ref,\n    tooltip,\n    shortcut,\n    groupRef,\n    size = \"md\",\n    isInvalid,\n    isDisabled,\n    isRequired,\n    icon: Icon,\n    placeholder,\n    wrapperClassName,\n    tooltipClassName,\n    inputClassName,\n    iconClassName,\n    type = \"text\",\n    ...inputProps\n}: InputBaseProps) => {\n    const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n\n    // Check if the input has a leading icon or tooltip\n    const hasTrailingIcon = tooltip || isInvalid || type === \"password\";\n    const hasLeadingIcon = Icon;\n\n    // If the input is inside a `TextFieldContext`, use its context to simplify applying styles\n    const context = useContext(TextFieldContext);\n\n    const inputSize = context?.size || size;\n\n    const sizes = sortCx({\n        sm: {\n            root: cx(\"px-3 py-2 text-sm\", hasLeadingIcon && \"pl-9\", hasTrailingIcon && \"pr-9\"),\n            iconLeading: \"left-3 size-4 stroke-[2.25px]\",\n            iconTrailing: \"right-3\",\n            shortcut: \"pr-1.5\",\n        },\n        md: {\n            root: cx(\"px-3 py-2 text-md\", hasLeadingIcon && \"pl-10\", hasTrailingIcon && \"pr-9\"),\n            iconLeading: \"left-3 size-5\",\n            iconTrailing: \"right-3\",\n            shortcut: \"pr-2\",\n        },\n        lg: {\n            root: cx(\"px-3.5 py-2.5 text-md\", hasLeadingIcon && \"pl-10.5\", hasTrailingIcon && \"pr-9.5\"),\n            iconLeading: \"left-3.5 size-5\",\n            iconTrailing: \"right-3.5\",\n            shortcut: \"pr-2.5\",\n        },\n    });\n\n    return (\n        <AriaGroup\n            {...{ isDisabled, isInvalid }}\n            ref={groupRef}\n            className={({ isFocusWithin, isDisabled, isInvalid }) =>\n                cx(\n                    \"group/input relative flex w-full flex-row place-content-center place-items-center rounded-lg border border-solid border-primary bg-primary shadow-xs transition-[border-color,box-shadow] duration-100 ease-linear\",\n\n                    isFocusWithin && !isDisabled && !isInvalid && inputFocusRingShadow,\n\n                    // Disabled state styles\n                    isDisabled && \"cursor-not-allowed opacity-50\",\n                    \"group-disabled:cursor-not-allowed group-disabled:opacity-50\",\n\n                    // Invalid state styles\n                    isInvalid && !isFocusWithin && \"border-error_subtle\",\n                    \"group-invalid:border-error_subtle\",\n                    \"group-invalid:focus-within:border-error group-invalid:focus-within:ring-1 group-invalid:focus-within:ring-inset group-invalid:focus-within:ring-error\",\n\n                    // Invalid + focus — darker error stroke (not brand)\n                    isInvalid && isFocusWithin && inputErrorFocusRingShadow,\n\n                    context?.wrapperClassName,\n                    wrapperClassName,\n                )\n            }\n        >\n            {/* Leading icon and Payment icon */}\n            {Icon && (\n                <Icon className={cx(\"pointer-events-none absolute text-fg-quaternary\", sizes[inputSize].iconLeading, context?.iconClassName, iconClassName)} />\n            )}\n\n            {/* Input field */}\n            <AriaInput\n                {...(inputProps as AriaInputProps)}\n                ref={ref}\n                required={isRequired}\n                type={type === \"password\" && isPasswordVisible ? \"text\" : type}\n                placeholder={placeholder}\n                className={cx(\n                    \"m-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder autofill:rounded-lg autofill:text-primary disabled:cursor-not-allowed\",\n                    sizes[inputSize].root,\n                    context?.inputClassName,\n                    inputClassName,\n                )}\n            />\n\n            {/* Tooltip and help icon */}\n            {tooltip && type !== \"password\" && (\n                <Tooltip title={tooltip} placement=\"top\">\n                    <TooltipTrigger\n                        className={cx(\n                            \"absolute cursor-pointer text-fg-quaternary transition duration-100 ease-linear group-invalid/input:hidden hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover\",\n                            sizes[inputSize].iconTrailing,\n                            context?.tooltipClassName,\n                            tooltipClassName,\n                        )}\n                    >\n                        <HelpCircle className=\"size-4 stroke-[2.25px]\" />\n                    </TooltipTrigger>\n                </Tooltip>\n            )}\n\n            {/* Invalid icon */}\n            {type !== \"password\" && (\n                <InfoCircle\n                    className={cx(\n                        \"pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block\",\n                        sizes[inputSize].iconTrailing,\n                        context?.tooltipClassName,\n                        tooltipClassName,\n                    )}\n                />\n            )}\n\n            {/* Password visibility toggle */}\n            {type === \"password\" && (\n                <AriaButton\n                    aria-label=\"Toggle password visibility\"\n                    onClick={() => setIsPasswordVisible(!isPasswordVisible)}\n                    className={cx(\n                        \"absolute flex cursor-pointer items-center justify-center text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover focus:outline-hidden\",\n                        sizes[inputSize].iconTrailing,\n                    )}\n                >\n                    {isPasswordVisible ? <EyeOff className=\"size-4 stroke-[2.25px]\" /> : <Eye className=\"size-4 stroke-[2.25px]\" />}\n                </AriaButton>\n            )}\n\n            {/* Shortcut */}\n            {shortcut && (\n                <div\n                    className={cx(\n                        \"pointer-events-none absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex\",\n                        sizes[inputSize].shortcut,\n                    )}\n                >\n                    <span\n                        aria-hidden=\"true\"\n                        className=\"pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset\"\n                    >\n                        {typeof shortcut === \"string\" ? shortcut : \"⌘K\"}\n                    </span>\n                </div>\n            )}\n        </AriaGroup>\n    );\n};\n\nInputBase.displayName = \"InputBase\";\n\ninterface TextFieldContextProps extends Partial<Pick<InputBaseProps, \"size\" | \"wrapperClassName\" | \"inputClassName\" | \"iconClassName\" | \"tooltipClassName\">> {}\n\nconst TextFieldContext = createContext<TextFieldContextProps>({});\n\nexport interface TextFieldProps extends AriaTextFieldProps, TextFieldContextProps {}\n\nexport const TextField = ({ className, size = \"md\", inputClassName, wrapperClassName, iconClassName, tooltipClassName, ...props }: TextFieldProps) => {\n    return (\n        <TextFieldContext.Provider value={{ inputClassName, wrapperClassName, iconClassName, tooltipClassName, size }}>\n            <AriaTextField\n                {...props}\n                data-input-wrapper\n                data-input-size={size}\n                className={(state) =>\n                    cx(\"group flex h-max w-full flex-col items-start justify-start gap-1.5\", typeof className === \"function\" ? className(state) : className)\n                }\n            />\n        </TextFieldContext.Provider>\n    );\n};\n\nTextField.displayName = \"TextField\";\n\nexport interface InputProps\n    extends\n        AriaTextFieldProps,\n        Pick<\n            InputBaseProps,\n            | \"ref\"\n            | \"placeholder\"\n            | \"icon\"\n            | \"shortcut\"\n            | \"tooltip\"\n            | \"groupRef\"\n            | \"size\"\n            | \"wrapperClassName\"\n            | \"inputClassName\"\n            | \"iconClassName\"\n            | \"tooltipClassName\"\n        > {\n    /** Label text for the input */\n    label?: string;\n    /** Helper text displayed below the input */\n    hint?: ReactNode;\n    /** Whether to hide required indicator from label */\n    hideRequiredIndicator?: boolean;\n}\n\nexport const Input = ({\n    size = \"md\",\n    placeholder,\n    icon: Icon,\n    label,\n    hint,\n    shortcut,\n    hideRequiredIndicator,\n    className,\n    ref,\n    groupRef,\n    tooltip,\n    iconClassName,\n    inputClassName,\n    wrapperClassName,\n    tooltipClassName,\n    type = \"text\",\n    ...props\n}: InputProps) => {\n    return (\n        <TextField aria-label={!label ? placeholder : undefined} {...props} size={size} className={className}>\n            {({ isRequired, isInvalid }) => (\n                <>\n                    {label && (\n                        <Label isRequired={hideRequiredIndicator ? !hideRequiredIndicator : isRequired} isInvalid={isInvalid}>\n                            {label}\n                        </Label>\n                    )}\n\n                    <InputBase\n                        {...{\n                            ref,\n                            groupRef,\n                            size,\n                            placeholder,\n                            icon: Icon,\n                            shortcut,\n                            iconClassName,\n                            inputClassName,\n                            wrapperClassName,\n                            tooltipClassName,\n                            tooltip,\n                            type,\n                            isInvalid,\n                        }}\n                    />\n\n                    {hint && <HintText isInvalid={isInvalid}>{hint}</HintText>}\n                </>\n            )}\n        </TextField>\n    );\n};\n\nInput.displayName = \"Input\";\n","\"use client\";\n\nimport type { ReactNode, Ref } from \"react\";\nimport React from \"react\";\nimport type { TextAreaProps as AriaTextAreaProps, TextFieldProps as AriaTextFieldProps } from \"react-aria-components\";\nimport { TextArea as AriaTextArea, TextField as AriaTextField } from \"react-aria-components\";\nimport { HintText } from \"@/components/base/input/hint-text\";\nimport { inputErrorFocusRingShadow, inputFocusRingShadow } from \"@/components/base/input/input\";\nimport { Label } from \"@/components/base/input/label\";\nimport { cx } from \"@/utils/cx\";\n\n/** Resize handle stroke — maps to fg-quaternary light (neutral-400) / dark (neutral-600). */\nconst RESIZE_HANDLE_LIGHT = \"#a3a3a3\";\nconst RESIZE_HANDLE_DARK = \"#525252\";\n\nconst getResizeHandleBg = (color: string) => {\n    return `url(data:image/svg+xml;base64,${btoa(`<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 2L2 10\" stroke=\"${color}\" stroke-linecap=\"round\"/><path d=\"M11 7L7 11\" stroke=\"${color}\" stroke-linecap=\"round\"/></svg>`)})`;\n};\n\ninterface TextAreaBaseProps extends AriaTextAreaProps {\n    ref?: Ref<HTMLTextAreaElement>;\n    size?: \"sm\" | \"md\";\n}\n\n/** Figma: Textarea (85:1269) — inset ring focus; error focus uses border-error. */\nexport const TextAreaBase = ({ className, size = \"md\", ...props }: TextAreaBaseProps) => {\n    return (\n        <AriaTextArea\n            {...props}\n            style={\n                {\n                    \"--resize-handle-bg\": getResizeHandleBg(RESIZE_HANDLE_LIGHT),\n                    \"--resize-handle-bg-dark\": getResizeHandleBg(RESIZE_HANDLE_DARK),\n                } as React.CSSProperties\n            }\n            className={(state) =>\n                cx(\n                    \"w-full scroll-py-3 rounded-lg border border-solid border-primary bg-primary text-primary shadow-xs transition-[border-color,box-shadow] duration-100 ease-linear placeholder:text-placeholder autofill:rounded-lg autofill:text-primary focus:outline-hidden\",\n\n                    size === \"sm\" && \"p-3 text-sm\",\n                    size === \"md\" && \"px-3.5 py-3 text-md\",\n\n                    // Resize handle\n                    \"[&::-webkit-resizer]:bg-(image:--resize-handle-bg) [&::-webkit-resizer]:bg-contain dark:[&::-webkit-resizer]:bg-(image:--resize-handle-bg-dark)\",\n\n                    state.isFocused && !state.isDisabled && !state.isInvalid && inputFocusRingShadow,\n                    state.isDisabled && \"cursor-not-allowed opacity-50\",\n                    state.isInvalid && !state.isFocused && \"border-error_subtle\",\n                    state.isInvalid && state.isFocused && inputErrorFocusRingShadow,\n\n                    typeof className === \"function\" ? className(state) : className,\n                )\n            }\n        />\n    );\n};\n\nTextAreaBase.displayName = \"TextAreaBase\";\n\ninterface TextFieldProps extends AriaTextFieldProps {\n    /** Label text for the textarea */\n    label?: string;\n    /** Helper text displayed below the textarea */\n    hint?: ReactNode;\n    /** Tooltip message displayed after the label. */\n    tooltip?: string;\n    /** Textarea size. */\n    size?: TextAreaBaseProps[\"size\"];\n    /** Class name for the textarea wrapper */\n    textAreaClassName?: TextAreaBaseProps[\"className\"];\n    /** Ref for the textarea wrapper */\n    ref?: Ref<HTMLDivElement>;\n    /** Ref for the textarea */\n    textAreaRef?: TextAreaBaseProps[\"ref\"];\n    /** Whether to hide required indicator from label. */\n    hideRequiredIndicator?: boolean;\n    /** Placeholder text. */\n    placeholder?: string;\n    /** Visible height of textarea in rows . */\n    rows?: number;\n    /** Visible width of textarea in columns. */\n    cols?: number;\n}\n\nexport const TextArea = ({\n    ref,\n    textAreaRef,\n    label,\n    hint,\n    tooltip,\n    size = \"md\",\n    textAreaClassName,\n    hideRequiredIndicator,\n    placeholder,\n    rows,\n    cols,\n    className,\n    ...props\n}: TextFieldProps) => {\n    return (\n        <AriaTextField\n            ref={ref}\n            {...props}\n            className={(state) => cx(\"flex flex-col gap-1.5\", typeof className === \"function\" ? className(state) : className)}\n        >\n            {({ isRequired, isInvalid }) => (\n                <>\n                    {label && (\n                        <Label isRequired={hideRequiredIndicator ? !hideRequiredIndicator : isRequired} isInvalid={isInvalid} tooltip={tooltip}>\n                            {label}\n                        </Label>\n                    )}\n\n                    <TextAreaBase ref={textAreaRef} size={size} placeholder={placeholder} rows={rows} cols={cols} className={textAreaClassName} />\n\n                    {hint && <HintText isInvalid={isInvalid}>{hint}</HintText>}\n                </>\n            )}\n        </AriaTextField>\n    );\n};\n\nTextArea.displayName = \"TextArea\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avenue-ticketing/ui",
-  "version": "0.12.0-beta.2",
+  "version": "0.12.0-beta.4",
   "description": "Avenue UI components for React (Untitled UI beta)",
   "license": "MIT",
   "repository": {

package/theme.css

@@ -6,6 +6,27 @@
 
 @source "./dist/**/*.js";
 
+/**
+ * Pointer-hover + touch-press parity: hover utilities also apply on RAC press
+ * (data-pressed) and native :active, so mobile tap matches desktop hover.
+ */
+@custom-variant hover {
+    @media (hover: hover) {
+        &:hover {
+            @slot;
+        }
+    }
+    &:where([data-rac])[data-hovered] {
+        @slot;
+    }
+    &:where([data-rac])[data-pressed] {
+        @slot;
+    }
+    &:active {
+        @slot;
+    }
+}
+
 @custom-variant dark (&:where(.dark, .dark *));
 @custom-variant label (& [data-label]);
 @custom-variant focus-input-within (&:has(input:focus));
@@ -90,6 +111,8 @@
     /* ANIMATIONS */
     --animate-marquee: marquee 60s linear infinite;
     --animate-caret-blink: caret-blink 1s infinite;
+    --animate-toast-enter: toast-enter 750ms ease-out both;
+    --animate-toast-exit: toast-exit 300ms ease-out forwards;
 
     @keyframes marquee {
         0% {
@@ -111,6 +134,32 @@
         }
     }
 
+    @keyframes toast-enter {
+        0% {
+            transform: translate3d(0, calc(-100% - 12px), 0);
+            animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+        }
+
+        80% {
+            transform: translate3d(0, 4px, 0);
+            animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        100% {
+            transform: translate3d(0, 0, 0);
+        }
+    }
+
+    @keyframes toast-exit {
+        from {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+
     /* BASE COLOR */
     --color-transparent: rgb(0 0 0 / 0);
 
@@ -403,6 +452,7 @@
     --color-slider-handle-bg: var(--color-white);
     --color-slider-handle-border: var(--color-brand-600);
     --color-toggle-border: var(--color-neutral-300);
+    --color-toggle-track_hover: var(--color-neutral-300);
     --color-toggle-slim-border_pressed-hover: var(--color-bg-brand-solid_hover);
     --color-toggle-slim-border_pressed: var(--color-bg-brand-solid);
     --color-tooltip-supporting-text: var(--color-neutral-300);
@@ -758,6 +808,7 @@
         --color-slider-handle-bg: var(--color-fg-brand-primary);
         --color-slider-handle-border: var(--color-bg-primary);
         --color-toggle-border: var(--color-transparent);
+        --color-toggle-track_hover: var(--color-neutral-600);
         --color-toggle-slim-border_pressed-hover: var(--color-transparent);
         --color-toggle-slim-border_pressed: var(--color-transparent);
         --color-tooltip-supporting-text: var(--color-neutral-300);