untitledui 0.1.5 → 0.1.8

package/templates/default/src/components/shared/checkbox/checkbox.tsx

@@ -1,120 +0,0 @@
-"use client";
-
-import type { ReactNode, Ref } from "react";
-import { Checkbox as AriaCheckbox, type CheckboxProps as AriaCheckboxProps } from "react-aria-components";
-import { cx } from "@/components/utils/cx";
-
-export interface CheckboxBaseProps {
-    size?: "sm" | "md";
-    className?: string;
-    isFocused?: boolean;
-    isSelected?: boolean;
-    isDisabled?: boolean;
-    isIndeterminate?: boolean;
-}
-
-export const CheckboxBase = ({ className, isFocused, isSelected, isDisabled, isIndeterminate, size = "sm" }: CheckboxBaseProps) => {
-    return (
-        <div
-            className={cx(
-                "flex size-4 shrink-0 cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-border-primary ring-inset",
-                size === "md" && "size-5 rounded-md",
-                (isSelected || isIndeterminate) && "bg-brand-solid ring-bg-brand-solid",
-                isDisabled && "cursor-not-allowed bg-disabled_subtle ring-border-disabled",
-                isFocused && "outline-2 outline-offset-2 outline-focus-ring",
-                className,
-            )}
-        >
-            <svg
-                aria-hidden="true"
-                viewBox="0 0 14 14"
-                fill="none"
-                className={cx(
-                    "pointer-events-none absolute h-3 w-2.5 text-fg-white opacity-0 transition-inherit-all",
-                    size === "md" && "size-3.5",
-                    isIndeterminate && "opacity-100",
-                    isDisabled && "text-fg-disabled_subtle",
-                )}
-            >
-                <path d="M2.91675 7H11.0834" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-
-            <svg
-                aria-hidden="true"
-                viewBox="0 0 14 14"
-                fill="none"
-                className={cx(
-                    "pointer-events-none absolute size-3 text-fg-white opacity-0 transition-inherit-all",
-                    size === "md" && "size-3.5",
-                    isSelected && !isIndeterminate && "opacity-100",
-                    isDisabled && "text-fg-disabled_subtle",
-                )}
-            >
-                <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-        </div>
-    );
-};
-CheckboxBase.displayName = "CheckboxBase";
-
-interface CheckboxProps extends AriaCheckboxProps {
-    ref?: Ref<HTMLLabelElement>;
-    size?: "sm" | "md";
-    label?: ReactNode;
-    hint?: ReactNode;
-}
-
-export const Checkbox = ({ label, hint, size = "sm", className, ...ariaCheckboxProps }: CheckboxProps) => {
-    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 (
-        <AriaCheckbox
-            {...ariaCheckboxProps}
-            className={(state) =>
-                cx(
-                    "flex items-start",
-                    state.isDisabled && "cursor-not-allowed",
-                    sizes[size].root,
-                    typeof className === "function" ? className(state) : className,
-                )
-            }
-        >
-            {({ isSelected, isIndeterminate, isDisabled, isFocused }) => (
-                <>
-                    <CheckboxBase
-                        size={size}
-                        isSelected={isSelected}
-                        isIndeterminate={isIndeterminate}
-                        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>
-                    )}
-                </>
-            )}
-        </AriaCheckbox>
-    );
-};
-Checkbox.displayName = "Checkbox";

package/templates/default/src/components/shared/dropdown/dropdown.tsx

@@ -1,147 +0,0 @@
-"use client";
-
-import type { FC, ReactNode, RefAttributes } from "react";
-import { DotsVertical } from "@untitledui/icons";
-import type {
-    ButtonProps as AriaButtonProps,
-    MenuProps as AriaMenuProps,
-    PopoverProps as AriaPopoverProps,
-    MenuItemProps,
-    SeparatorProps,
-} from "react-aria-components";
-import { Button as AriaButton, Header, Menu, MenuItem, MenuSection, MenuTrigger, Popover, Separator } from "react-aria-components";
-import { cx } from "@/components/utils/cx";
-
-interface DropdownItemProps extends MenuItemProps {
-    /** The label of the item to be displayed. */
-    label?: string;
-    /** An addon to be displayed on the right side of the item. */
-    addon?: string;
-    /** If true, the item will not have any styles. */
-    unstyled?: boolean;
-    /** An icon to be displayed on the left side of the item. */
-    icon?: FC<{ className?: string }>;
-}
-
-const DropdownItem = ({ label, children, addon, icon: Icon, unstyled, ...props }: DropdownItemProps) => {
-    if (unstyled) {
-        return <MenuItem id={label} textValue={label} {...props} />;
-    }
-
-    return (
-        <MenuItem
-            {...props}
-            className={(state) =>
-                cx(
-                    "group block cursor-pointer px-1.5 py-px outline-hidden",
-                    state.isDisabled && "cursor-not-allowed",
-                    typeof props.className === "function" ? props.className(state) : props.className,
-                )
-            }
-        >
-            {(state) => (
-                <div
-                    className={cx(
-                        "relative flex items-center rounded-md px-2.5 py-2 outline-focus-ring transition duration-100 ease-linear",
-                        !state.isDisabled && "group-hover:bg-primary_hover",
-                        state.isFocused && "bg-primary_hover",
-                        state.isFocusVisible && "outline-2 -outline-offset-2",
-                    )}
-                >
-                    {Icon && <Icon className={cx("mr-2 size-4 shrink-0", state.isDisabled ? "text-fg-disabled" : "text-fg-quaternary")} aria-hidden="true" />}
-
-                    <span
-                        className={cx(
-                            "grow truncate tt-sm-semi",
-                            state.isDisabled ? "text-disabled" : "text-secondary",
-                            state.isFocused && "text-secondary_hover",
-                        )}
-                    >
-                        {label || (typeof children === "function" ? children(state) : children)}
-                    </span>
-
-                    {addon && (
-                        <span
-                            className={cx(
-                                "ml-3 shrink-0 rounded px-1 py-px tt-xs-md ring-1 ring-border-secondary ring-inset",
-                                state.isDisabled ? "text-disabled" : "text-quaternary",
-                            )}
-                        >
-                            {addon}
-                        </span>
-                    )}
-                </div>
-            )}
-        </MenuItem>
-    );
-};
-
-interface DropdownMenuProps<T extends object> extends AriaMenuProps<T> {}
-
-const DropdownMenu = <T extends object>(props: DropdownMenuProps<T>) => {
-    return (
-        <Menu
-            disallowEmptySelection
-            selectionMode="single"
-            {...props}
-            className={(state) =>
-                cx("h-min overflow-y-auto py-1 outline-hidden select-none", typeof props.className === "function" ? props.className(state) : props.className)
-            }
-        />
-    );
-};
-
-interface DropdownPopoverProps extends AriaPopoverProps {}
-
-const DropdownPopover = (props: DropdownPopoverProps) => {
-    return (
-        <Popover
-            placement="bottom right"
-            {...props}
-            className={(state) =>
-                cx(
-                    "w-[248px] rounded-lg bg-primary shadow-lg ring-1 ring-border-secondary_alt will-change-transform",
-                    state.isEntering &&
-                        "duration-150 ease-out animate-in fade-in zoom-in-95 placement-right:origin-left placement-right:slide-in-from-left-0.5 placement-top:origin-bottom placement-top:slide-in-from-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-in-from-top-0.5",
-                    state.isExiting &&
-                        "duration-100 ease-in animate-out fade-out zoom-out-95 placement-right:origin-left placement-right:slide-out-to-left-0.5 placement-top:origin-bottom placement-top:slide-out-to-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-out-to-top-0.5",
-                    typeof props.className === "function" ? props.className(state) : props.className,
-                )
-            }
-        />
-    );
-};
-
-const DropdownSeparator = (props: SeparatorProps) => {
-    return <Separator {...props} className={cx("my-1 h-px w-full bg-border-secondary", props.className)} />;
-};
-
-const DropdownDotsButton = (props: AriaButtonProps & RefAttributes<HTMLButtonElement>) => {
-    return (
-        <AriaButton
-            {...props}
-            aria-label="Open menu"
-            className={(state) =>
-                cx(
-                    "cursor-pointer rounded-md text-fg-quaternary outline-focus-ring transition duration-100 ease-in-out ease-linear",
-                    (state.isPressed || state.isHovered) && "text-fg-quaternary_hover",
-                    (state.isPressed || state.isFocused) && "outline-2 outline-offset-2",
-                    typeof props.className === "function" ? props.className(state) : props.className,
-                )
-            }
-        >
-            <DotsVertical className="size-5 transition-inherit-all" />
-        </AriaButton>
-    );
-};
-
-export const Dropdown = {
-    Root: MenuTrigger,
-    Popover: DropdownPopover,
-    Menu: DropdownMenu,
-    Section: MenuSection,
-    SectionHeader: Header,
-    Item: DropdownItem,
-    Separator: DropdownSeparator,
-    DotsButton: DropdownDotsButton,
-};

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

@@ -1,74 +0,0 @@
-"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/form/form.tsx

@@ -1,10 +0,0 @@
-"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/form/hook-form.tsx

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

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

@@ -1,34 +0,0 @@
-"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/cx";
-
-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/input/index.tsx

@@ -1,189 +0,0 @@
-"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/input/hint-text";
-import Label from "@/components/shared/input/label";
-import { Tooltip, TooltipTrigger } from "@/components/shared/tooltips/tooltips";
-import { cx, sortCx } from "@/components/utils/cx";
-
-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"
-                    >
-                        {typeof shortcut === "string" ? 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";