untitledui 0.1.1

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

@@ -0,0 +1,74 @@
+"use client";
+
+import type { HTMLAttributes } from "react";
+import HintText from "@/components/shared/inputs/hint-text";
+import type { InputBaseProps } from "@/components/shared/inputs/input";
+import { InputBase, TextField } from "@/components/shared/inputs/input";
+import Label from "@/components/shared/inputs/label";
+import { cx } from "@/components/utils";
+
+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/inputs/label.tsx

@@ -0,0 +1,46 @@
+"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";
+
+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/inputs/textarea/textarea.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import type { ReactNode, Ref } from "react";
+import React from "react";
+import type { TextAreaProps as AriaTextAreaProps, TextFieldProps as AriaTextFieldProps } from "react-aria-components";
+import { TextArea as AriaTextArea } from "react-aria-components";
+import HintText from "@/components/shared/inputs/hint-text";
+import Label from "@/components/shared/inputs/label";
+import { cx } from "@/components/utils";
+import { TextField } from "../input";
+
+interface TextAreaBaseProps extends AriaTextAreaProps {
+    ref?: Ref<HTMLTextAreaElement>;
+}
+
+export const TextAreaBase = ({ className, ...props }: TextAreaBaseProps) => {
+    return (
+        <AriaTextArea
+            {...props}
+            className={(state) =>
+                cx(
+                    "w-full scroll-py-3 rounded-lg bg-primary px-3.5 py-3 tt-md text-primary shadow-xs ring-1 ring-border-primary transition duration-100 ease-linear ring-inset placeholder:text-placeholder autofill:rounded-lg autofill:text-primary focus:outline-hidden",
+
+                    // Resize handle
+                    "[&::-webkit-resizer]:bg-[url(/shared/textarea-resize-handle-light-mode.svg)] [&::-webkit-resizer]:bg-contain dark:[&::-webkit-resizer]:bg-[url(/shared/textarea-resize-handle-dark-mode.svg)]",
+
+                    state.isFocused && !state.isDisabled && "ring-2 ring-border-brand",
+                    state.isDisabled && "cursor-not-allowed bg-disabled_subtle text-disabled ring-border-disabled",
+                    state.isInvalid && "ring-border-error_subtle",
+                    state.isInvalid && state.isFocused && "ring-2 ring-border-error",
+
+                    typeof className === "function" ? className(state) : className,
+                )
+            }
+        />
+    );
+};
+
+TextAreaBase.displayName = "TextAreaBase";
+
+interface TextFieldProps extends AriaTextAreaProps {
+    label?: string;
+    hint?: ReactNode;
+    tooltip?: string;
+    ref?: Ref<HTMLDivElement>;
+    isInvalid?: AriaTextFieldProps["isInvalid"];
+    isDisabled?: AriaTextFieldProps["isDisabled"];
+    isRequired?: AriaTextFieldProps["isRequired"];
+    isReadOnly?: AriaTextFieldProps["isReadOnly"];
+    wrapperClassName?: AriaTextFieldProps["className"];
+}
+
+export const TextArea = ({
+    label,
+    hint,
+    wrapperClassName,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    isReadOnly,
+    tooltip,
+    value,
+    defaultValue,
+    ref,
+    ...textAreaProps
+}: TextFieldProps) => {
+    return (
+        <TextField
+            {...{ ref, isDisabled, isInvalid, isReadOnly, isRequired, className: wrapperClassName }}
+            value={value as string}
+            defaultValue={defaultValue as string}
+        >
+            {label && <Label tooltip={tooltip}>{label}</Label>}
+
+            <TextAreaBase {...textAreaProps} />
+
+            {hint && <HintText>{hint}</HintText>}
+        </TextField>
+    );
+};
+
+TextArea.displayName = "TextArea";

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

@@ -0,0 +1,176 @@
+"use client";
+
+import { cx as clx, sortCx } from "@/components/utils";
+
+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>
+    );
+};

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

@@ -0,0 +1,86 @@
+"use client";
+
+import { cx } from "@/components/utils";
+
+export interface ProgressBarProps {
+    value: number;
+    min?: number;
+    max?: number;
+    className?: string;
+    progressClassName?: string;
+    valueFormatter?: (value: number, valueInPercentage: number) => string | number;
+}
+
+export const ProgressBar = ({ value, min = 0, max = 100, className, progressClassName }: ProgressBarProps) => {
+    const percentage = ((value - min) * 100) / (max - min);
+
+    return (
+        <div
+            role="progressbar"
+            aria-valuenow={value}
+            aria-valuemin={min}
+            aria-valuemax={max}
+            className={cx("h-2 w-full overflow-hidden rounded-md bg-quaternary", className)}
+        >
+            <div
+                // Use transform instead of width to avoid layout thrashing (and for smoother animation)
+                style={{ transform: `translateX(-${100 - percentage}%)` }}
+                className={cx("size-full rounded-md bg-fg-brand-primary transition duration-75 ease-linear", progressClassName)}
+            />
+        </div>
+    );
+};
+
+export const ProgressBarTextRight = ({ value, min = 0, max = 100, valueFormatter }: ProgressBarProps) => {
+    const percentage = ((value - min) * 100) / (max - min);
+
+    return (
+        <div className="flex items-center gap-3">
+            <ProgressBar min={min} max={max} value={value} />
+            <span className="tt-sm-md text-secondary tabular-nums">{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</span>
+        </div>
+    );
+};
+
+export const ProgressBarTextBottom = ({ value, min = 0, max = 100, valueFormatter }: ProgressBarProps) => {
+    const percentage = ((value - min) * 100) / (max - min);
+
+    return (
+        <div className="flex flex-col items-end gap-2">
+            <ProgressBar min={min} max={max} value={value} />
+            <span className="tt-sm-md text-secondary tabular-nums">{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</span>
+        </div>
+    );
+};
+
+export const ProgressBarTextTopFloating = ({ value, min = 0, max = 100, valueFormatter }: ProgressBarProps) => {
+    const percentage = ((value - min) * 100) / (max - min);
+
+    return (
+        <div className="relative flex flex-col items-end gap-2">
+            <ProgressBar min={min} max={max} value={value} />
+            <div
+                style={{ left: `${percentage}%` }}
+                className="absolute -top-2 -translate-x-1/2 -translate-y-full rounded-lg bg-primary_alt px-3 py-2 shadow-lg ring-1 ring-border-secondary_alt"
+            >
+                <div className="tt-xs-semi text-secondary tabular-nums">{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</div>
+            </div>
+        </div>
+    );
+};
+
+export const ProgressBarTextBottomFloating = ({ value, min = 0, max = 100, valueFormatter }: ProgressBarProps) => {
+    const percentage = ((value - min) * 100) / (max - min);
+
+    return (
+        <div className="relative flex flex-col items-end gap-2">
+            <ProgressBar min={min} max={max} value={value} />
+            <div
+                style={{ left: `${percentage}%` }}
+                className="absolute -bottom-2 -translate-x-1/2 translate-y-full rounded-lg bg-primary_alt px-3 py-2 shadow-lg ring-1 ring-border-secondary_alt"
+            >
+                <div className="tt-xs-semi text-secondary">{valueFormatter ? valueFormatter(value, percentage) : `${percentage}%`}</div>
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,29 @@
+"use client";
+
+const CircleProgressBar = (props: { value: number; min?: 0; max?: 100 }) => {
+    const { value, min = 0, max = 100 } = props;
+    const percentage = ((value - min) * 100) / (max - min);
+
+    return (
+        <div role="progressbar" aria-valuenow={value} aria-valuemin={min} aria-valuemax={max} className="relative flex w-max items-center justify-center">
+            <span className="absolute tt-sm-md text-primary">{percentage}%</span>
+            <svg className="size-16 -rotate-90" viewBox="0 0 60 60">
+                <circle className="stroke-bg-quaternary" cx="30" cy="30" r="26" fill="none" strokeWidth="6" />
+                <circle
+                    className="stroke-fg-brand-primary"
+                    style={{
+                        strokeDashoffset: `calc(100 - ${percentage})`,
+                    }}
+                    cx="30"
+                    cy="30"
+                    r="26"
+                    fill="none"
+                    strokeWidth="6"
+                    strokeDasharray="100"
+                    pathLength="100"
+                    strokeLinecap="round"
+                />
+            </svg>
+        </div>
+    );
+};

package/templates/default/src/components/shared/radio-buttons/radio-buttons.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { type ReactNode, type Ref, createContext, useContext } from "react";
+import type { RadioGroupProps as AriaRadioGroupProps } from "react-aria-components";
+import { type RadioProps as AriaRadioProps, Radio, RadioGroup } from "react-aria-components";
+import { cx } from "@/components/utils";
+
+export interface RadioButtonGroupContextType {
+    size?: "sm" | "md";
+}
+
+const RadioButtonGroupContext = createContext<RadioButtonGroupContextType | null>(null);
+
+export interface RadioButtonBaseProps {
+    size?: "sm" | "md";
+    className?: string;
+    isFocused?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+}
+
+export const RadioButtonBase = ({ className, isFocused, isSelected, isDisabled, size = "sm" }: RadioButtonBaseProps) => {
+    return (
+        <div
+            className={cx(
+                "flex size-4 min-h-4 min-w-4 cursor-pointer appearance-none items-center justify-center rounded-full bg-primary ring-1 ring-border-primary ring-inset",
+                size === "md" && "size-5 min-h-5 min-w-5",
+                isSelected && !isDisabled && "bg-brand-solid ring-bg-brand-solid",
+                isDisabled && "cursor-not-allowed border-disabled bg-disabled_subtle",
+                isFocused && "outline-2 outline-offset-2 outline-focus-ring",
+                className,
+            )}
+        >
+            <div
+                className={cx(
+                    "size-1.5 rounded-full bg-fg-white opacity-0 transition-inherit-all",
+                    size === "md" && "size-2",
+                    isDisabled && "bg-fg-disabled_subtle",
+                    isSelected && "opacity-100",
+                )}
+            />
+        </div>
+    );
+};
+RadioButtonBase.displayName = "RadioButtonBase";
+
+interface RadioButtonProps extends AriaRadioProps {
+    size?: "sm" | "md";
+    label?: ReactNode;
+    hint?: ReactNode;
+    ref?: Ref<HTMLLabelElement>;
+}
+
+export const RadioButton = ({ label, hint, className, size = "sm", ...ariaRadioProps }: RadioButtonProps) => {
+    const context = useContext(RadioButtonGroupContext);
+
+    size = context?.size ?? size;
+
+    const sizes = {
+        sm: {
+            root: "gap-2",
+            textWrapper: "",
+            label: "tt-sm-md",
+            hint: "tt-sm",
+        },
+        md: {
+            root: "gap-3",
+            textWrapper: "gap-0.5",
+            label: "tt-md-md",
+            hint: "tt-md",
+        },
+    };
+
+    return (
+        <Radio
+            {...ariaRadioProps}
+            className={(renderProps) =>
+                cx(
+                    "flex items-start",
+                    renderProps.isDisabled && "cursor-not-allowed",
+                    sizes[size].root,
+                    typeof className === "function" ? className(renderProps) : className,
+                )
+            }
+        >
+            {({ isSelected, isDisabled, isFocused }) => (
+                <>
+                    <RadioButtonBase
+                        size={size}
+                        isSelected={isSelected}
+                        isDisabled={isDisabled}
+                        isFocused={isFocused}
+                        className={label || hint ? "mt-0.5" : ""}
+                    />
+                    {(label || hint) && (
+                        <div className={cx("inline-flex flex-col", sizes[size].textWrapper)}>
+                            {label && <p className={cx("text-secondary select-none", sizes[size].label)}>{label}</p>}
+                            {hint && (
+                                <span className={cx("pointer-events-none text-tertiary", sizes[size].hint)} onClick={(event) => event.stopPropagation()}>
+                                    {hint}
+                                </span>
+                            )}
+                        </div>
+                    )}
+                </>
+            )}
+        </Radio>
+    );
+};
+RadioButton.displayName = "Checkbox";
+
+interface RadioButtonGroupProps extends RadioButtonGroupContextType, AriaRadioGroupProps {
+    children: ReactNode;
+    className?: string;
+}
+
+export const RadioButtonGroup = ({ children, className, size = "sm", ...props }: RadioButtonGroupProps) => {
+    return (
+        <RadioButtonGroupContext.Provider value={{ size }}>
+            <RadioGroup {...props} className={cx("flex flex-col gap-4", className)}>
+                {children}
+            </RadioGroup>
+        </RadioButtonGroupContext.Provider>
+    );
+};