untitledui 0.1.5 → 0.1.8

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

@@ -1,134 +0,0 @@
-"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 type { InputBaseProps } from "@/components/shared/input";
-import { InputBase } from "@/components/shared/input";
-import HintText from "@/components/shared/input/hint-text";
-import Label from "@/components/shared/input/label";
-import { cx } from "@/components/utils/cx";
-
-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/input/input-with-button.tsx

@@ -1,69 +0,0 @@
-"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 type { InputBaseProps } from "@/components/shared/input";
-import { InputBase } from "@/components/shared/input";
-import HintText from "@/components/shared/input/hint-text";
-import Label from "@/components/shared/input/label";
-import { cx } from "@/components/utils/cx";
-
-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/input/input-with-dropdown.tsx

@@ -1,178 +0,0 @@
-"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 type { InputBaseProps } from "@/components/shared/input";
-import { InputBase } from "@/components/shared/input";
-import HintText from "@/components/shared/input/hint-text";
-import Label from "@/components/shared/input/label";
-import { cx, sortCx } from "@/components/utils/cx";
-
-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";

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

@@ -1,74 +0,0 @@
-"use client";
-
-import type { HTMLAttributes } from "react";
-import type { InputBaseProps } from "@/components/shared/input";
-import { InputBase, TextField } from "@/components/shared/input";
-import HintText from "@/components/shared/input/hint-text";
-import Label from "@/components/shared/input/label";
-import { cx } from "@/components/utils/cx";
-
-interface InputPrefixProps extends HTMLAttributes<HTMLDivElement> {
-    position?: "leading" | "trailing";
-    size?: "sm" | "md";
-    isDisabled?: boolean;
-}
-
-export const InputPrefix = ({ position = "leading", size = "sm", isDisabled, children, ...props }: InputPrefixProps) => {
-    const styles = {
-        sm: "px-3 py-2",
-        md: "py-2.5 pl-3.5 pr-3",
-    };
-
-    return (
-        <div
-            {...props}
-            className={cx(
-                "flex tt-md text-tertiary shadow-xs ring-1 ring-border-primary ring-inset",
-                styles[size],
-                position === "leading" && "-mr-px rounded-l-lg",
-                position === "trailing" && "-ml-px rounded-r-lg",
-
-                // Disabled state
-                isDisabled && "border-disabled bg-disabled_subtle text-tertiary",
-                "group-disabled:border-disabled group-disabled:bg-disabled_subtle group-disabled:text-tertiary",
-
-                props.className,
-            )}
-        >
-            {children}
-        </div>
-    );
-};
-
-interface InputWithPrefixProps extends Omit<InputBaseProps, "icon"> {
-    leadingText?: string;
-    trailingText?: string;
-}
-
-export const InputWithPrefix = ({ size = "sm", placeholder, leadingText, trailingText, className, label, hint, ...props }: InputWithPrefixProps) => {
-    return (
-        <TextField aria-label={!label ? placeholder : undefined} {...props} className={className}>
-            {label && <Label>{label}</Label>}
-
-            <div className="flex w-full">
-                {leadingText && (
-                    <InputPrefix position="leading" size={size}>
-                        {leadingText}
-                    </InputPrefix>
-                )}
-
-                <InputBase {...props} {...{ size, placeholder }} wrapperClassName={cx(trailingText && "rounded-r-none", leadingText && "rounded-l-none")} />
-
-                {trailingText && (
-                    <InputPrefix position="trailing" size={size}>
-                        {trailingText}
-                    </InputPrefix>
-                )}
-            </div>
-
-            {hint && <HintText>{hint}</HintText>}
-        </TextField>
-    );
-};
-
-InputWithPrefix.displayName = "InputWithPrefix";

package/templates/default/src/components/shared/input/label.tsx

@@ -1,46 +0,0 @@
-"use client";
-
-import type { ReactNode, Ref } from "react";
-import { HelpCircle } from "@untitledui/icons";
-import type { LabelProps as AriaLabelProps } from "react-aria-components";
-import { Label as AriaLabel } from "react-aria-components";
-import { Tooltip, TooltipTrigger } from "@/components/shared/tooltips/tooltips";
-import { cx } from "@/components/utils/cx";
-
-interface LabelProps extends AriaLabelProps {
-    children: ReactNode;
-    isRequired?: boolean;
-    tooltip?: string;
-    tooltipDescription?: string;
-    ref?: Ref<HTMLLabelElement>;
-}
-
-const Label = ({ isRequired, tooltip, tooltipDescription, className, ...props }: LabelProps) => {
-    return (
-        <AriaLabel
-            // Used for conditionally hiding/showing the label element via CSS:
-            // <Input label="Visible only on mobile" className="lg:**:data-label:hidden" />
-            // or
-            // <Input label="Visible only on mobile" className="lg:label:hidden" />
-            data-label="true"
-            {...props}
-            className={cx("flex w-full cursor-default items-center gap-0.5 tt-sm-md text-secondary", className)}
-        >
-            {props.children}
-
-            <span className={cx("hidden text-brand-tertiary", isRequired && "block", typeof isRequired === "undefined" && "group-required:block")}>*</span>
-
-            {tooltip && (
-                <Tooltip title={tooltip} description={tooltipDescription} placement="top">
-                    <TooltipTrigger className="cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover">
-                        <HelpCircle className="size-4" />
-                    </TooltipTrigger>
-                </Tooltip>
-            )}
-        </AriaLabel>
-    );
-};
-
-Label.displayName = "Label";
-
-export default Label;

package/templates/default/src/components/shared/progress-indicators/progress-circles.tsx

@@ -1,176 +0,0 @@
-"use client";
-
-import { cx as clx, sortCx } from "@/components/utils/cx";
-
-interface ProgressBarProps {
-    value: number;
-    min?: number;
-    max?: number;
-    size: "xxs" | "xs" | "sm" | "md" | "lg";
-    label?: string;
-    valueFormatter?: (value: number, valueInPercentage: number) => string | number;
-}
-
-const sizes = sortCx({
-    xxs: {
-        strokeWidth: 6,
-        radius: 29,
-        valueClass: "tt-sm-semi text-primary",
-        labelClass: "tt-xs-md text-tertiary",
-        halfCircleTextPosition: "absolute bottom-0.5 text-center",
-    },
-    xs: {
-        strokeWidth: 16,
-        radius: 72,
-        valueClass: "td-xs-semi text-primary",
-        labelClass: "tt-xs-md text-tertiary",
-        halfCircleTextPosition: "absolute bottom-0.5 text-center",
-    },
-    sm: {
-        strokeWidth: 20,
-        radius: 90,
-        valueClass: "td-sm-semi text-primary",
-        labelClass: "tt-xs-md text-tertiary",
-        halfCircleTextPosition: "absolute bottom-1 text-center",
-    },
-    md: {
-        strokeWidth: 24,
-        radius: 108,
-        valueClass: "td-md-semi text-primary",
-        labelClass: "tt-sm-md text-tertiary",
-        halfCircleTextPosition: "absolute bottom-1 text-center",
-    },
-    lg: {
-        strokeWidth: 28,
-        radius: 126,
-        valueClass: "td-lg-semi text-primary",
-        labelClass: "tt-sm-md text-tertiary",
-        halfCircleTextPosition: "absolute bottom-0 text-center",
-    },
-});
-
-export const ProgressBarCircle = ({ value, min = 0, max = 100, size, label, valueFormatter }: ProgressBarProps) => {
-    const percentage = Math.round(((value - min) * 100) / (max - min));
-
-    const sizeConfig = sizes[size];
-
-    const { strokeWidth, radius, valueClass, labelClass } = sizeConfig;
-
-    const diameter = 2 * (radius + strokeWidth / 2);
-    const width = diameter;
-    const height = diameter;
-    const viewBox = `0 0 ${width} ${height}`;
-    const cx = diameter / 2;
-    const cy = diameter / 2;
-
-    const textPosition = label ? "absolute text-center" : "absolute text-primary";
-    const strokeDashoffset = 100 - percentage;
-
-    return (
-        <div className="flex flex-col items-center gap-0.5">
-            <div role="progressbar" aria-valuenow={value} aria-valuemin={min} aria-valuemax={max} className="relative flex w-max items-center justify-center">
-                <svg className="-rotate-90" width={width} height={height} viewBox={viewBox}>
-                    {/* Background circle */}
-                    <circle
-                        className="stroke-bg-quaternary"
-                        cx={cx}
-                        cy={cy}
-                        r={radius}
-                        fill="none"
-                        strokeWidth={strokeWidth}
-                        pathLength="100"
-                        strokeDasharray="100"
-                        strokeLinecap="round"
-                    />
-
-                    {/* Foreground circle */}
-                    <circle
-                        className="stroke-fg-brand-primary"
-                        cx={cx}
-                        cy={cy}
-                        r={radius}
-                        fill="none"
-                        strokeWidth={strokeWidth}
-                        pathLength="100"
-                        strokeDasharray="100"
-                        strokeLinecap="round"
-                        strokeDashoffset={strokeDashoffset}
-                    />
-                </svg>
-                {label && size !== "xxs" ? (
-                    <div className="absolute text-center">
-                        <div className={labelClass}>{label}</div>
-                        <div className={valueClass}>{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</div>
-                    </div>
-                ) : (
-                    <span className={clx(textPosition, valueClass)}>{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</span>
-                )}
-            </div>
-
-            {label && size === "xxs" && <div className={labelClass}>{label}</div>}
-        </div>
-    );
-};
-
-export const ProgressBarHalfCircle = ({ value, min = 0, max = 100, size, label, valueFormatter }: ProgressBarProps) => {
-    const percentage = Math.round(((value - min) * 100) / (max - min));
-
-    const sizeConfig = sizes[size];
-
-    const { strokeWidth, radius, valueClass, labelClass, halfCircleTextPosition } = sizeConfig;
-
-    const width = 2 * (radius + strokeWidth / 2);
-    const height = radius + strokeWidth;
-    const viewBox = `0 0 ${width} ${height}`;
-    const cx = "50%";
-    const cy = radius + strokeWidth / 2;
-
-    const strokeDashoffset = -50 - (100 - percentage) / 2;
-
-    return (
-        <div className="flex flex-col items-center gap-0.5">
-            <div role="progressbar" aria-valuenow={value} aria-valuemin={min} aria-valuemax={max} className="relative flex w-max items-center justify-center">
-                <svg width={width} height={height} viewBox={viewBox}>
-                    {/* Background half-circle */}
-                    <circle
-                        className="stroke-bg-quaternary"
-                        cx={cx}
-                        cy={cy}
-                        r={radius}
-                        fill="none"
-                        strokeWidth={strokeWidth}
-                        pathLength="100"
-                        strokeDasharray="100"
-                        strokeDashoffset="-50"
-                        strokeLinecap="round"
-                    />
-
-                    {/* Foreground half-circle */}
-                    <circle
-                        className="origin-center -scale-x-100 stroke-fg-brand-primary"
-                        cx={cx}
-                        cy={cy}
-                        r={radius}
-                        fill="none"
-                        strokeWidth={strokeWidth}
-                        pathLength="100"
-                        strokeDasharray="100"
-                        strokeDashoffset={strokeDashoffset}
-                        strokeLinecap="round"
-                    />
-                </svg>
-
-                {label && size !== "xxs" ? (
-                    <div className={halfCircleTextPosition}>
-                        <div className={labelClass}>{label}</div>
-                        <div className={valueClass}>{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</div>
-                    </div>
-                ) : (
-                    <span className={clx(halfCircleTextPosition, valueClass)}>{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</span>
-                )}
-            </div>
-
-            {label && size === "xxs" && <div className={labelClass}>{label}</div>}
-        </div>
-    );
-};