untitledui 0.1.1

package/templates/default/src/components/shared/inputs/file-upload-trigger.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import type { DetailedReactHTMLElement, ReactNode } from "react";
+import React, { cloneElement, useRef } from "react";
+import { filterDOMProps } from "@react-aria/utils";
+
+interface FileTriggerProps {
+    /**
+     * Specifies what mime type of files are allowed.
+     */
+    acceptedFileTypes?: Array<string>;
+    /**
+     * Whether multiple files can be selected.
+     */
+    allowsMultiple?: boolean;
+    /**
+     * Specifies the use of a media capture mechanism to capture the media on the spot.
+     */
+    defaultCamera?: "user" | "environment";
+    /**
+     * Handler when a user selects a file.
+     */
+    onSelect?: (files: FileList | null) => void;
+    /**
+     * The children of the component.
+     */
+    children: ReactNode;
+    /**
+     * Enables the selection of directories instead of individual files.
+     */
+    acceptDirectory?: boolean;
+}
+
+// TODO: Make it possible to pass down a ref to the input element.
+/**
+ * A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.
+ */
+export const FileTrigger = (props: FileTriggerProps) => {
+    const { children, onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, acceptDirectory, ...rest } = props;
+
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const domProps = filterDOMProps(rest);
+
+    // Make sure that only one child is passed to the component.
+    const clonableElement = React.Children.only(children);
+
+    // Clone the child element and add an `onClick` handler to open the file dialog.
+    const mainElement = cloneElement(clonableElement as DetailedReactHTMLElement<any, any>, {
+        onClick: () => {
+            if (inputRef.current?.value) {
+                inputRef.current.value = "";
+            }
+            inputRef.current?.click();
+        },
+    });
+
+    return (
+        <>
+            {mainElement}
+            <input
+                {...domProps}
+                type="file"
+                ref={inputRef}
+                style={{ display: "none" }}
+                accept={acceptedFileTypes?.toString()}
+                onChange={(e) => onSelect?.(e.target.files)}
+                capture={defaultCamera}
+                multiple={allowsMultiple}
+                // @ts-expect-error
+                webkitdirectory={acceptDirectory ? "" : undefined}
+            />
+        </>
+    );
+};

package/templates/default/src/components/shared/inputs/form/form.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import type { ComponentPropsWithRef } from "react";
+import { Form as AriaForm } from "react-aria-components";
+
+export const Form = (props: ComponentPropsWithRef<typeof AriaForm>) => {
+    return <AriaForm {...props} />;
+};
+
+Form.displayName = "Form";

package/templates/default/src/components/shared/inputs/hint-text.tsx

@@ -0,0 +1,34 @@
+"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 "@/components/utils";
+
+interface HintTextProps extends AriaTextProps {
+    children: ReactNode;
+    isInvalid?: boolean;
+    ref?: Ref<HTMLElement>;
+}
+
+const HintText = ({ isInvalid, className, ...props }: HintTextProps) => {
+    return (
+        <AriaText
+            {...props}
+            slot={isInvalid ? "errorMessage" : "description"}
+            className={cx(
+                "tt-sm text-tertiary",
+
+                // Invalid state
+                isInvalid && "text-error-primary",
+                "group-invalid:text-error-primary",
+
+                className,
+            )}
+        />
+    );
+};
+
+HintText.displayName = "HintText";
+
+export default HintText;

package/templates/default/src/components/shared/inputs/input/index.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import type { ComponentType, HTMLAttributes, ReactNode, Ref } from "react";
+import { HelpCircle, InfoCircle } from "@untitledui/icons";
+import type { TextFieldProps as AriaTextFieldProps } from "react-aria-components";
+import { Input as AriaInput, TextField as AriaTextField, Group } from "react-aria-components";
+import HintText from "@/components/shared/inputs/hint-text";
+import Label from "@/components/shared/inputs/label";
+import { Tooltip, TooltipTrigger } from "@/components/shared/tooltips/tooltips";
+import { cx, sortCx } from "@/components/utils";
+
+export interface InputBaseProps extends TextFieldProps {
+    label?: string;
+    hint?: ReactNode;
+    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>>;
+}
+
+export const InputBase = ({ size = "sm", placeholder, icon: Icon, isDisabled, isInvalid, tooltip, shortcut, ref, groupRef, ...props }: InputBaseProps) => {
+    // Check if the input has a leading icon or tooltip
+    const hasTrailingIcon = tooltip || isInvalid;
+    const hasLeadingIcon = Icon;
+
+    const sizes = sortCx({
+        sm: {
+            root: cx("px-3 py-2", hasTrailingIcon && "pr-9", hasLeadingIcon && "pl-10"),
+            iconLeading: "left-3",
+            iconTrailing: "right-3",
+            shortcut: "pr-2.5",
+        },
+        md: {
+            root: cx("px-3.5 py-2.5", hasTrailingIcon && "pr-9.5", hasLeadingIcon && "pl-10.5"),
+            iconLeading: "left-3.5",
+            iconTrailing: "right-3.5",
+            shortcut: "pr-3",
+        },
+    });
+
+    return (
+        <Group
+            {...{ isDisabled, isInvalid }}
+            ref={groupRef}
+            className={({ isFocusWithin, isDisabled, isInvalid }) =>
+                cx(
+                    "relative flex w-full flex-row place-content-center place-items-center rounded-lg bg-primary shadow-xs ring-1 ring-border-primary transition-shadow duration-100 ease-linear ring-inset",
+
+                    isFocusWithin && !isDisabled && "ring-2 ring-border-brand",
+
+                    // Disabled state styles
+                    isDisabled && "cursor-not-allowed bg-disabled_subtle ring-border-disabled",
+                    "group-disabled:cursor-not-allowed group-disabled:bg-disabled_subtle group-disabled:ring-border-disabled",
+
+                    // Invalid state styles
+                    isInvalid && "ring-border-error_subtle",
+                    "group-invalid:ring-border-error_subtle",
+
+                    // Invalid state with focus-within styles
+                    isInvalid && isFocusWithin && "ring-2 ring-border-error",
+                    isFocusWithin && "group-invalid:ring-2 group-invalid:ring-border-error",
+
+                    props.wrapperClassName,
+                )
+            }
+        >
+            {/* Leading icon and Payment icon */}
+            {Icon && (
+                <Icon
+                    className={cx(
+                        "pointer-events-none absolute size-5 text-fg-quaternary",
+                        isDisabled && "text-fg-disabled",
+                        sizes[size].iconLeading,
+                        props.iconClassName,
+                    )}
+                />
+            )}
+
+            {/* Input field */}
+            <AriaInput
+                ref={ref}
+                placeholder={placeholder}
+                className={cx(
+                    "m-0 w-full bg-transparent tt-md text-primary ring-0 outline-hidden placeholder:text-placeholder autofill:rounded-lg autofill:text-primary",
+                    isDisabled && "cursor-not-allowed text-disabled",
+                    sizes[size].root,
+                    props.inputClassName,
+                )}
+            />
+
+            {/* Tooltip and help icon */}
+            {tooltip && !isInvalid && (
+                <Tooltip title={tooltip} placement="top">
+                    <TooltipTrigger
+                        className={cx(
+                            "absolute cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+                            sizes[size].iconTrailing,
+                            props.tooltipClassName,
+                        )}
+                    >
+                        <HelpCircle className="size-4" />
+                    </TooltipTrigger>
+                </Tooltip>
+            )}
+
+            {/* Invalid icon */}
+            {isInvalid && (
+                <InfoCircle className={cx("pointer-events-none absolute size-4 text-fg-error-secondary", sizes[size].iconTrailing, props.tooltipClassName)} />
+            )}
+
+            {/* Shortcut */}
+            {shortcut && (
+                <div
+                    className={cx(
+                        "absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8",
+                        sizes[size].shortcut,
+                    )}
+                >
+                    <span
+                        className={cx(
+                            "pointer-events-none rounded px-1 py-px tt-xs-md text-quaternary ring-1 ring-border-secondary select-none ring-inset",
+                            isDisabled && "bg-transparent text-disabled",
+                        )}
+                        aria-hidden="true"
+                    >
+                        {shortcut || "⌘K"}
+                    </span>
+                </div>
+            )}
+        </Group>
+    );
+};
+
+InputBase.displayName = "InputBase";
+
+interface TextFieldProps extends AriaTextFieldProps {
+    ref?: Ref<HTMLDivElement>;
+}
+
+export const TextField = ({ className, ...props }: TextFieldProps) => {
+    return (
+        <AriaTextField
+            {...props}
+            className={(state) =>
+                cx("group flex h-max w-full flex-col items-start justify-start gap-1.5", typeof className === "function" ? className(state) : className)
+            }
+        >
+            {props.children}
+        </AriaTextField>
+    );
+};
+
+TextField.displayName = "TextField";
+
+interface InputProps extends InputBaseProps {
+    hideRequiredIndicator?: boolean;
+}
+
+export const Input = ({
+    size = "sm",
+    placeholder = "olivia@untitledui.com",
+    icon: Icon,
+    label,
+    hint,
+    hideRequiredIndicator,
+    className,
+    ref,
+    groupRef,
+    ...props
+}: InputProps) => {
+    return (
+        <TextField aria-label={!label ? placeholder : undefined} {...props} className={className}>
+            {label && <Label isRequired={hideRequiredIndicator ? !hideRequiredIndicator : undefined}>{label}</Label>}
+
+            <InputBase {...props} {...{ ref, groupRef, size, placeholder, icon: Icon }} />
+
+            {hint && <HintText>{hint}</HintText>}
+        </TextField>
+    );
+};
+
+Input.displayName = "Input";

package/templates/default/src/components/shared/inputs/input/input-payment.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import React, { useState } from "react";
+import { TextField } from "react-aria-components";
+import { AmexIcon, DiscoverIcon, MastercardIcon, UnionPayIcon, VisaIcon } from "@/components/foundations/payment-icons";
+import HintText from "@/components/shared/inputs/hint-text";
+import type { InputBaseProps } from "@/components/shared/inputs/input";
+import { InputBase } from "@/components/shared/inputs/input";
+import Label from "@/components/shared/inputs/label";
+import { cx } from "@/components/utils";
+
+const cardTypes = [
+    {
+        name: "Visa",
+        pattern: /^4[0-9]{3,}$/, // Visa card numbers start with 4 and are 13 or 16 digits long
+        card: "visa",
+        icon: VisaIcon,
+    },
+    {
+        name: "MasterCard",
+        pattern: /^5[1-5][0-9]{2,}$/, // MasterCard numbers start with 51-55 and are 16 digits long
+        card: "mastercard",
+        icon: MastercardIcon,
+    },
+    {
+        name: "American Express",
+        pattern: /^3[47][0-9]{2,}$/, // American Express numbers start with 34 or 37 and are 15 digits long
+        card: "amex",
+        icon: AmexIcon,
+    },
+    {
+        name: "Discover",
+        pattern: /^6(?:011|5[0-9]{2}|4[4-9][0-9])[0-9]{12}$/, // Discover card numbers start with 6011 or 65 and are 16 digits long
+        card: "discover",
+        icon: DiscoverIcon,
+    },
+    {
+        name: "UnionPay",
+        pattern: /^(62|88)[0-9]{14,17}$/, // UnionPay card numbers start with 62 or 88 and are between 15-19 digits long
+        card: "unionpay",
+        icon: UnionPayIcon,
+    },
+    {
+        name: "Unknown",
+        pattern: /.*/, // Fallback pattern for unknown cards
+        card: "unknown",
+        icon: MastercardIcon,
+    },
+];
+
+/**
+ * Detect the card type based on the card number.
+ * @param number The card number to detect the type for.
+ * @returns The matching card type object.
+ */
+const detectCardType = (number: string) => {
+    // Remove all spaces
+    const sanitizedNumber = number.replace(/\D/g, "");
+
+    // Find the matching card type
+    const card = cardTypes.find((cardType) => cardType.pattern.test(sanitizedNumber));
+
+    return card || cardTypes[cardTypes.length - 1];
+};
+
+/**
+ * Format the card number in groups of 4 digits (i.e. 1234 5678 9012 3456).
+ */
+export const formatCardNumber = (number: string) => {
+    // Remove non-numeric characters
+    const cleaned = number.replace(/\D/g, "");
+
+    // Format the card number in groups of 4 digits
+    const match = cleaned.match(/\d{1,4}/g);
+
+    if (match) {
+        return match.join(" ");
+    }
+
+    return cleaned;
+};
+
+interface PaymentInputProps extends Omit<InputBaseProps, "icon"> {}
+
+export const PaymentInput = ({ onChange, className, maxLength = 19, label, hint, ...props }: PaymentInputProps) => {
+    const [cardNumber, setCardNumber] = useState(formatCardNumber(props.value || props.defaultValue || ""));
+
+    const handleCardNumberChange = (value: string) => {
+        // Remove all non-numeric characters
+        value = value.replace(/\D/g, "");
+
+        // Return if the value is empty
+        if (!value) {
+            setCardNumber("");
+            onChange?.("");
+            return "";
+        }
+
+        // Format the card number in groups of 4 digits
+        const formatted = formatCardNumber(value);
+
+        setCardNumber(formatted);
+        onChange?.(value);
+        return value;
+    };
+
+    const card = detectCardType(cardNumber);
+
+    return (
+        <TextField
+            aria-label={!label ? props?.placeholder : undefined}
+            {...props}
+            value={cardNumber}
+            inputMode="numeric"
+            maxLength={maxLength}
+            onChange={handleCardNumberChange}
+            className={(state) =>
+                cx("flex h-max w-full flex-col items-start justify-start gap-1.5", typeof className === "function" ? className(state) : className)
+            }
+        >
+            {({ isDisabled, isInvalid, isRequired }) => (
+                <>
+                    {label && <Label {...{ isRequired }}>{label}</Label>}
+
+                    <InputBase {...props} {...{ isDisabled, isInvalid }} icon={card.icon} inputClassName="pl-13" iconClassName="left-2.5 size-max" />
+
+                    {hint && <HintText {...{ isInvalid }}>{hint}</HintText>}
+                </>
+            )}
+        </TextField>
+    );
+};
+
+PaymentInput.displayName = "PaymentInput";

package/templates/default/src/components/shared/inputs/input/input-with-button.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import type { ReactNode } from "react";
+import React from "react";
+import { Copy01 } from "@untitledui/icons";
+import { TextField } from "react-aria-components";
+import type { CommonProps } from "@/components/shared/buttons/button";
+import Button from "@/components/shared/buttons/button";
+import HintText from "@/components/shared/inputs/hint-text";
+import type { InputBaseProps } from "@/components/shared/inputs/input";
+import { InputBase } from "@/components/shared/inputs/input";
+import Label from "@/components/shared/inputs/label";
+import { cx } from "@/components/utils";
+
+interface InputWithButtonProps extends Omit<InputBaseProps, "icon"> {
+    buttonText: string;
+    onClick?: () => void;
+    buttonColor?: CommonProps["color"];
+    iconLeading?: CommonProps["iconLeading"];
+    iconTrailing?: CommonProps["iconTrailing"];
+    hint?: ReactNode;
+}
+
+export const InputWithButton = ({
+    size = "sm",
+    buttonColor = "secondary",
+    iconLeading = Copy01,
+    onClick,
+    className,
+    buttonText,
+    label,
+    hint,
+    ...props
+}: InputWithButtonProps) => {
+    return (
+        <TextField
+            aria-label={!label ? props?.placeholder : undefined}
+            {...props}
+            className={(state) =>
+                cx("flex h-max w-full flex-col items-start justify-start gap-1.5", typeof className === "function" ? className(state) : className)
+            }
+        >
+            {({ isDisabled, isInvalid, isRequired }) => (
+                <>
+                    {label && <Label {...{ isRequired }}>{label}</Label>}
+
+                    <div className="flex h-max w-full flex-row justify-center">
+                        <InputBase {...props} {...{ isDisabled, isInvalid }} wrapperClassName="rounded-r-none z-10" />
+
+                        {/* TODO: Take this button out of here and move it to be a prop so the user can fully control the button. */}
+                        <Button
+                            onClick={onClick}
+                            color={buttonColor}
+                            iconLeading={iconLeading}
+                            size={size === "sm" ? "md" : "lg"}
+                            className="-ml-px rounded-l-none shadow-xs! ring-1 ring-border-primary ring-inset focus:z-10"
+                        >
+                            {buttonText}
+                        </Button>
+                    </div>
+
+                    {hint && <HintText {...{ isInvalid }}>{hint}</HintText>}
+                </>
+            )}
+        </TextField>
+    );
+};
+
+InputWithButton.displayName = "InputWithButton";

package/templates/default/src/components/shared/inputs/input/input-with-dropdown.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import React from "react";
+import { ChevronDown } from "@untitledui/icons";
+import type { Key } from "react-aria-components";
+import { TextField } from "react-aria-components";
+import HintText from "@/components/shared/inputs/hint-text";
+import type { InputBaseProps } from "@/components/shared/inputs/input";
+import { InputBase } from "@/components/shared/inputs/input";
+import Label from "@/components/shared/inputs/label";
+import { cx, sortCx } from "@/components/utils";
+
+interface SelectorComponentProps {
+    size: "sm" | "md";
+    options: Option[];
+    selectedKey?: Key;
+    className?: string;
+    isInvalid?: boolean;
+    selectName?: string;
+    isDisabled?: boolean;
+    iconClassName?: string;
+    onSelectionChange?: (value: Key) => void;
+}
+
+const SelectorComponent = (props: SelectorComponentProps) => {
+    return (
+        <div className="relative inline-flex h-full items-center">
+            <select
+                name={props.selectName}
+                value={props.selectedKey}
+                disabled={props.isDisabled}
+                autoComplete="input-dropdown"
+                onChange={(e) => props.onSelectionChange?.(e.target.value)}
+                className={cx(
+                    "flex h-full w-min appearance-none items-center gap-1 bg-inherit px-3 py-2 tt-md text-tertiary outline-hidden ring-inset focus:ring-2 focus:ring-border-brand disabled:cursor-not-allowed",
+                    props.isInvalid && "focus:ring-2 focus:ring-border-error",
+                    props.isDisabled && "text-disabled",
+                    props.className,
+                )}
+            >
+                {props.options.map((option) => (
+                    <option key={option.value} value={option.value}>
+                        {option.label}
+                    </option>
+                ))}
+            </select>
+            <ChevronDown className={cx("pointer-events-none absolute right-0 size-4 stroke-[2.625px] text-fg-quaternary", props.iconClassName)} />
+        </div>
+    );
+};
+
+type Option = {
+    label: string;
+    value: string | number;
+};
+
+interface InputWithDropdownProps extends Omit<InputBaseProps, "icon"> {
+    selectedKey?: Key;
+    selectName?: string;
+    leadingText?: string;
+    leadingOptions?: Option[];
+    trailingOptions?: Option[];
+    onSelectionChange?: (value: Key) => void;
+}
+
+export const InputWithDropdown = ({
+    size = "sm",
+    leadingOptions,
+    trailingOptions,
+    leadingText,
+    className,
+    selectedKey,
+    label,
+    hint,
+    onChange,
+    onSelectionChange,
+    ...props
+}: InputWithDropdownProps) => {
+    const hasLeadingDropdown = !!leadingOptions?.length;
+    const hasTrailingDropdown = !!trailingOptions?.length;
+
+    const paddings = sortCx({
+        sm: {
+            input: cx(hasLeadingDropdown && "px-2.5 pl-2.5", hasTrailingDropdown && (leadingText ? "pr-6! pl-0" : "pr-6! pl-3")),
+            leadingText: "pl-3",
+            dropdownLeading: "rounded-l-lg py-2 pr-4.5 pl-3",
+            dropdownTrailing: "rounded-r-lg py-2 pr-9 pl-3",
+            dropdownTrailingIcon: "right-3",
+        },
+        md: {
+            input: cx(hasLeadingDropdown && "px-3 pl-3", hasTrailingDropdown && (leadingText ? "pr-6! pl-0!" : "pr-6! pl-3!")),
+            leadingText: "pl-3.5",
+            dropdownLeading: "rounded-l-lg py-2.5 pr-4.5 pl-3.5",
+            dropdownTrailing: "rounded-r-lg py-2.5 pr-9.5 pl-3.5",
+            dropdownTrailingIcon: "right-3.5",
+        },
+    });
+
+    return (
+        <TextField
+            aria-label={!label ? props?.placeholder : undefined}
+            {...props}
+            className={(state) =>
+                cx("flex h-max w-full flex-col items-start justify-start gap-1.5", typeof className === "function" ? className(state) : className)
+            }
+        >
+            {({ isDisabled, isInvalid, isRequired }) => (
+                <>
+                    {label && <Label {...{ isRequired }}>{label}</Label>}
+
+                    <div
+                        className={cx(
+                            "relative flex h-max w-full flex-row justify-start rounded-lg bg-primary shadow-xs ring-1 ring-border-primary transition-all duration-100 ease-linear ring-inset",
+
+                            // Only apply focus ring when child input is focused
+                            "has-[input:focus]:ring-2 has-[input:focus]:ring-border-brand",
+
+                            isDisabled && "cursor-not-allowed bg-disabled_subtle ring-border-disabled",
+                            isInvalid && "ring-border-error_subtle has-[input:focus]:ring-border-error",
+                        )}
+                    >
+                        {/* leading dropdown with padding style */}
+                        {hasLeadingDropdown && (
+                            <SelectorComponent
+                                {...{
+                                    size,
+                                    isInvalid,
+                                    isDisabled,
+                                    selectedKey,
+                                    onSelectionChange,
+                                    options: leadingOptions,
+                                    className: paddings[size].dropdownLeading,
+                                    name: props.selectName,
+                                }}
+                            />
+                        )}
+
+                        {/* leading text if trailing dropdown is applied */}
+                        {leadingText && (
+                            <span className={cx("my-auto grow pr-2", paddings[size].leadingText)}>
+                                <p className={cx("tt-md text-tertiary", isDisabled && "text-disabled")}>{leadingText}</p>
+                            </span>
+                        )}
+
+                        <InputBase
+                            {...props}
+                            {...{ isDisabled, isInvalid }}
+                            wrapperClassName={cx("bg-transparent shadow-none! ring-0 focus-within:ring-0")}
+                            inputClassName={cx(paddings[size].input)}
+                            tooltipClassName={cx(hasTrailingDropdown && "right-0")}
+                        />
+
+                        {/* trailing dropdown with padding style */}
+                        {hasTrailingDropdown && (
+                            <SelectorComponent
+                                {...{
+                                    size,
+                                    isInvalid,
+                                    isDisabled,
+                                    selectedKey,
+                                    onSelectionChange,
+                                    options: trailingOptions,
+                                    iconClassName: paddings[size].dropdownTrailingIcon,
+                                    className: paddings[size].dropdownTrailing,
+                                    name: props.selectName,
+                                }}
+                            />
+                        )}
+                    </div>
+
+                    {hint && <HintText {...{ isInvalid }}>{hint}</HintText>}
+                </>
+            )}
+        </TextField>
+    );
+};
+
+InputWithDropdown.displayName = "InputWithDropdown";