untitledui 0.1.1

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

@@ -0,0 +1,120 @@
+"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";
+
+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

@@ -0,0 +1,138 @@
+"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";
+
+interface DropdownItemProps extends MenuItemProps {
+    label?: string;
+    children?: ReactNode;
+    addon?: string;
+    unstyled?: boolean;
+    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}
+            id={label}
+            textValue={label}
+            className={(values) =>
+                cx(
+                    "group block cursor-pointer px-1.5 py-px outline-hidden",
+                    values.isDisabled && "cursor-not-allowed",
+                    typeof props.className === "function" ? props.className(values) : props.className,
+                )
+            }
+        >
+            {({ isDisabled, isFocused, isFocusVisible }) => (
+                <div
+                    className={cx(
+                        "relative flex items-center rounded-md px-2.5 py-2 outline-focus-ring transition duration-100 ease-linear",
+                        !isDisabled && "group-hover:bg-primary_hover",
+                        isFocused && "bg-primary_hover",
+                        isFocusVisible && "outline-2 -outline-offset-2",
+                    )}
+                >
+                    {Icon && <Icon className={cx("mr-2 size-4 shrink-0", isDisabled ? "text-fg-disabled" : "text-fg-quaternary")} aria-hidden="true" />}
+
+                    <span className={cx("grow truncate tt-sm-semi", isDisabled ? "text-disabled" : "text-secondary", isFocused && "text-secondary_hover")}>
+                        {label || 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",
+                                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
+            selectionMode="single"
+            disallowEmptySelection
+            {...props}
+            className={cx("h-min overflow-y-auto py-1 outline-hidden select-none", 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 &&
+                        "ease-out animate-in animation-duration-150 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 &&
+                        "animation-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/input-dropdown/combobox.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import type { FocusEventHandler, PointerEventHandler, RefAttributes } from "react";
+import { useCallback, useContext, useRef, useState } from "react";
+import { SearchLg as SearchIcon } from "@untitledui/icons";
+import type { ComboBoxProps as AriaComboBoxProps, ListBoxProps as AriaListBoxProps } from "react-aria-components";
+import {
+    Button as AriaButton,
+    ComboBox as AriaComboBox,
+    Group as AriaGroup,
+    Input as AriaInput,
+    ListBox as AriaListBox,
+    ComboBoxStateContext,
+} from "react-aria-components";
+import { useHotkeys } from "react-hotkeys-hook";
+import { cx } from "@/components/utils";
+import { useResizeObserver } from "@/hooks/use-resize-observer";
+import HintText from "../inputs/hint-text";
+import Label from "../inputs/label";
+import { type CommonProps, SelectContext, type SelectValueType, sizes } from "./input-dropdown";
+import { ComboBoxTagsValue } from "./multi-select";
+import { Popover } from "./popover";
+
+type ComboBoxTypes = "search" | "tags";
+
+interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectValueType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+    shortcut?: boolean;
+    type?: ComboBoxTypes;
+    items?: SelectValueType[];
+    popoverClassName?: string;
+    shortcutClassName?: string;
+    children: AriaListBoxProps<SelectValueType>["children"];
+}
+
+interface ComboBoxValueProps extends RefAttributes<HTMLDivElement> {
+    size: "sm" | "md";
+    shortcut: boolean;
+    isDisabled: boolean;
+    placeholder?: string;
+    shortcutClassName?: string;
+    onFocus?: FocusEventHandler;
+    onPointerEnter?: PointerEventHandler;
+}
+
+const ComboBoxValue = ({ size, isDisabled, shortcut, placeholder, shortcutClassName, ...otherProps }: ComboBoxValueProps) => {
+    const state = useContext(ComboBoxStateContext);
+
+    const value = state?.selectedItem?.value || null;
+    const inputValue = state?.inputValue || null;
+
+    const first = inputValue?.split(value?.supportingText)?.[0] || "";
+    const last = inputValue?.split(first)[1];
+
+    useHotkeys("meta+k", () => state?.setOpen(true), { enabled: !isDisabled && shortcut });
+
+    return (
+        <AriaGroup
+            {...otherProps}
+            className={({ isFocusWithin, isDisabled }) =>
+                cx(
+                    "relative flex w-full items-center gap-2 rounded-lg bg-primary shadow-xs ring-1 ring-border-primary outline-hidden transition-shadow duration-200 ease-in-out ring-inset",
+                    isDisabled && "cursor-not-allowed bg-disabled_subtle",
+                    isFocusWithin && "ring-2 ring-border-brand",
+                    sizes[size].root,
+                )
+            }
+        >
+            <AriaButton>
+                <SearchIcon className="size-5 text-fg-quaternary" />
+            </AriaButton>
+
+            <div className="relative flex w-full items-center gap-2">
+                {inputValue && (
+                    <span className="absolute top-1/2 z-0 inline-flex w-full -translate-y-1/2 gap-2 truncate" aria-hidden="true">
+                        <p className={cx("tt-md-md text-primary", isDisabled && "text-disabled")}>{first}</p>
+                        {last && <p className={cx("-ml-[3px] tt-md text-tertiary", isDisabled && "text-disabled")}>{last}</p>}
+                    </span>
+                )}
+                <AriaInput
+                    placeholder={placeholder}
+                    className="z-10 w-full appearance-none bg-transparent tt-md text-transparent caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed disabled:text-disabled disabled:placeholder:text-disabled"
+                />
+            </div>
+
+            {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,
+                        shortcutClassName,
+                    )}
+                >
+                    <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"
+                    >
+                        ⌘K
+                    </span>
+                </div>
+            )}
+        </AriaGroup>
+    );
+};
+
+export const ComboBox = ({ type = "search", placeholder = "Select", shortcut = true, size = "sm", children, items, ...rest }: ComboBoxProps) => {
+    const placeholderRef = useRef<HTMLDivElement>(null);
+    const [popoverWidth, setPopoverWidth] = useState("");
+
+    const itemsWithId = items?.map((item) => ({ ...item, id: item.value }));
+
+    // Resize observer for popover width
+    const onResize = useCallback(() => {
+        if (!placeholderRef.current) return;
+        let divRect = placeholderRef.current?.getBoundingClientRect();
+        setPopoverWidth(divRect.width + "px");
+    }, [placeholderRef, setPopoverWidth]);
+
+    useResizeObserver({
+        ref: placeholderRef,
+        onResize: onResize,
+        box: "border-box",
+    });
+
+    return (
+        <SelectContext.Provider value={{ type, size }}>
+            <AriaComboBox menuTrigger="focus" {...rest}>
+                {(state) => (
+                    <div className="flex flex-col gap-1.5">
+                        {rest.label && (
+                            <Label isRequired={state.isRequired} tooltip={rest.tooltip}>
+                                {rest.label}
+                            </Label>
+                        )}
+
+                        <ComboBoxValue
+                            ref={placeholderRef}
+                            placeholder={placeholder}
+                            shortcut={shortcut}
+                            size={size}
+                            // This is a workaround to correctly calculating the trigger width
+                            // while using ResizeObserver wasn't 100% reliable.
+                            onFocus={onResize}
+                            onPointerEnter={onResize}
+                            {...state}
+                            {...rest}
+                        />
+
+                        <Popover size={size} triggerRef={placeholderRef} style={{ width: popoverWidth }} className={rest.popoverClassName}>
+                            <AriaListBox {...{ items: itemsWithId, children }} className="size-full outline-hidden" />
+                        </Popover>
+
+                        {rest.hint && <HintText isInvalid={state.isInvalid}>{rest.hint}</HintText>}
+                    </div>
+                )}
+            </AriaComboBox>
+        </SelectContext.Provider>
+    );
+};

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

@@ -0,0 +1,98 @@
+"use client";
+
+import { useContext } from "react";
+import { Check, User01 } from "@untitledui/icons";
+import type { ListBoxItemProps as AriaListBoxItemProps } from "react-aria-components";
+import { ListBoxItem as AriaListBoxItem, Text } from "react-aria-components";
+import Dot from "@/components/foundations/dot-icon";
+import { cx } from "@/components/utils";
+import Avatar from "../avatar/avatar";
+import type { IconComponentType } from "../badges/badge-types";
+import type { SelectValueType } from "./input-dropdown";
+import { SelectContext } from "./input-dropdown";
+
+export interface ListBoxItemIconProps {
+    size?: "sm" | "md";
+    isDisabled?: boolean;
+    icon?: IconComponentType;
+}
+
+const icons = {
+    default: () => <></>,
+    search: () => <></>,
+    tags: ({ isDisabled }: ListBoxItemIconProps) => (
+        <User01 aria-hidden="true" className={cx("size-5 shrink-0 text-fg-quaternary", isDisabled && "text-fg-disabled")} />
+    ),
+    avatarLeading: ({ isDisabled }: ListBoxItemIconProps) => (
+        <User01 aria-hidden="true" className={cx("size-5 shrink-0 text-fg-quaternary", isDisabled && "text-fg-disabled")} />
+    ),
+    iconLeading: ({ icon: Icon = User01, isDisabled }: ListBoxItemIconProps) => (
+        <Icon aria-hidden="true" className={cx("size-5 shrink-0 text-fg-quaternary", isDisabled && "text-fg-disabled")} />
+    ),
+    dotLeading: ({ icon: Icon, isDisabled }: ListBoxItemIconProps) =>
+        Icon ? (
+            <Icon aria-hidden="true" className={cx("shrink-0 text-fg-success-secondary", isDisabled && "text-fg-disabled_subtle")} />
+        ) : (
+            <Dot size="md" className={cx("shrink-0 text-fg-success-secondary", isDisabled && "text-fg-disabled_subtle")} />
+        ),
+};
+
+interface DropdownItemProps extends AriaListBoxItemProps<SelectValueType> {
+    item: SelectValueType;
+}
+
+export const DropdownItem = ({ item, className, ...props }: DropdownItemProps) => {
+    const { type, size } = useContext(SelectContext);
+    const listItem = { ...item, icon: item?.icon };
+
+    const sizes = {
+        sm: "p-2 pr-2.5",
+        md: "p-2.5 pl-2",
+    };
+
+    const Icon = icons[type];
+
+    const textValue = listItem?.supportingText ? listItem.label + " " + listItem.supportingText : listItem.label;
+
+    return (
+        <AriaListBoxItem
+            value={listItem}
+            id={listItem.value}
+            key={listItem.value}
+            textValue={textValue}
+            isDisabled={listItem.isDisabled}
+            {...props}
+            className={(states) => cx("w-full px-1.5 py-px outline-hidden", typeof className === "function" ? className(states) : className)}
+        >
+            {({ isSelected, isFocused, isFocusVisible, isHovered, isDisabled }) => (
+                <div
+                    className={cx(
+                        "flex cursor-pointer items-center gap-2 rounded-md outline-hidden select-none",
+                        (isSelected || isHovered) && "bg-active",
+                        isDisabled && "cursor-not-allowed",
+                        isFocused && "bg-primary_hover",
+                        isFocusVisible && "ring-2 ring-focus-ring ring-inset",
+                        sizes[size],
+                    )}
+                >
+                    {"avatarUrl" in listItem ? <Avatar aria-hidden="true" size="xs" src={listItem.avatarUrl} alt={listItem.label} /> : <Icon {...listItem} />}
+
+                    <section className="flex w-full min-w-0 flex-1 flex-wrap gap-x-2">
+                        <Text slot="label" className={cx("truncate tt-md-md whitespace-nowrap text-primary", isDisabled && "text-disabled")}>
+                            {listItem.label}
+                        </Text>
+
+                        {listItem?.supportingText && (
+                            <Text slot="description" className={cx("tt-md whitespace-nowrap text-tertiary", isDisabled && "text-disabled")}>
+                                {listItem.supportingText}
+                            </Text>
+                        )}
+                    </section>
+                    {isSelected && <Check className={cx("ml-auto size-5 text-fg-brand-primary", isDisabled && "text-fg-disabled")} aria-hidden="true" />}
+                </div>
+            )}
+        </AriaListBoxItem>
+    );
+};
+
+export default DropdownItem;