untitledui 0.1.2 → 0.1.3

package/templates/default/src/components/shared/{input-dropdown → select}/multi-select.tsx

@@ -20,128 +20,12 @@ import { cx } from "@/components/utils";
 import { useResizeObserver } from "@/hooks/use-resize-observer";
 import Avatar from "../avatar/avatar";
 import type { IconComponentType } from "../badges/badge-types";
-import HintText from "../inputs/hint-text";
-import Label from "../inputs/label";
+import HintText from "../input/hint-text";
+import Label from "../input/label";
 import { TagCloseX } from "../tags/base-components/tag-close-x";
-import DropdownItem from "./dropdown-item";
-import { type SelectValueType, sizes } from "./input-dropdown";
 import { Popover } from "./popover";
-
-const ComboboxContext = createContext<{
-    size: "sm" | "md";
-    selectedKeys: Key[];
-    selectedItems: ListData<SelectValueType>;
-    onRemove: (keys: Set<Key>) => void;
-    onInputChange: (value: string) => void;
-}>({
-    size: "sm",
-    selectedKeys: [],
-    selectedItems: {} as ListData<SelectValueType>,
-    onRemove: () => {},
-    onInputChange: () => {},
-});
-
-const InnerComboBox = ({ isDisabled, shortcut, shortcutClassName, placeholder }: ComboBoxValueProps) => {
-    const focusManager = useFocusManager();
-    const selectContext = useContext(ComboboxContext);
-
-    const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-        const isCaretAtStart = event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0;
-
-        if (!isCaretAtStart && event.currentTarget.value !== "") {
-            return;
-        }
-
-        switch (event.key) {
-            case "Backspace":
-            case "ArrowLeft":
-                focusManager?.focusPrevious({ wrap: false, tabbable: false });
-                break;
-            case "ArrowRight":
-                focusManager?.focusNext({ wrap: false, tabbable: false });
-                break;
-        }
-    };
-
-    const handleTagKeyDown = (event: KeyboardEvent<HTMLButtonElement>, value: Key) => {
-        event.preventDefault();
-
-        const isFirstTag = selectContext?.selectedItems?.items?.[0]?.value === value;
-
-        switch (event.key) {
-            case " ":
-            case "Enter":
-            case "Backspace":
-                if (isFirstTag) {
-                    focusManager?.focusNext({ wrap: false, tabbable: false });
-                } else {
-                    focusManager?.focusPrevious({ wrap: false, tabbable: false });
-                }
-
-                selectContext.onRemove(new Set([value]));
-                break;
-
-            case "ArrowLeft":
-                focusManager?.focusPrevious({ wrap: false, tabbable: false });
-                break;
-            case "ArrowRight":
-                focusManager?.focusNext({ wrap: false, tabbable: false });
-                break;
-        }
-    };
-
-    const isSelectionEmpty = selectContext?.selectedItems?.items?.length === 0;
-
-    return (
-        <div className="relative flex w-full flex-1 flex-row flex-wrap items-center justify-start gap-1.5">
-            {!isSelectionEmpty &&
-                // TODO: Use <TagList /> here
-                selectContext?.selectedItems?.items?.map((value) => (
-                    <span key={value.value} className="flex items-center rounded-md bg-primary py-0.5 pr-1 pl-[5px] ring-1 ring-border-primary ring-inset">
-                        <Avatar size="xxs" alt={value?.label} src={value?.avatarUrl} />
-
-                        <p className="ml-[5px] truncate tt-sm-md whitespace-nowrap text-secondary select-none">{value?.label}</p>
-
-                        <TagCloseX
-                            size="md"
-                            isDisabled={isDisabled}
-                            className="ml-[3px]"
-                            // For workaround, onKeyDown is added to the button
-                            onKeyDown={(event) => handleTagKeyDown(event, value.value)}
-                            onPress={() => selectContext.onRemove(new Set([value.value]))}
-                        />
-                    </span>
-                ))}
-
-            <div className={cx("relative flex min-w-[20%] flex-1 flex-row items-center", !isSelectionEmpty && "ml-0.5", shortcut && "min-w-[30%]")}>
-                <AriaInput
-                    placeholder={placeholder}
-                    onKeyDown={handleInputKeyDown}
-                    className="w-full flex-[1_0_0] appearance-none bg-transparent tt-md text-ellipsis text-primary caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed disabled:text-disabled disabled:placeholder:text-disabled"
-                />
-
-                {shortcut && (
-                    <div
-                        aria-hidden="true"
-                        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",
-                            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",
-                            )}
-                        >
-                            ⌘K
-                        </span>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};
+import { type SelectItemType, sizes } from "./select";
+import SelectItem from "./select-item";
 
 interface ComboBoxValueProps extends RefAttributes<HTMLDivElement> {
     size: "sm" | "md";
@@ -154,43 +38,19 @@ interface ComboBoxValueProps extends RefAttributes<HTMLDivElement> {
     onPointerEnter?: PointerEventHandler;
 }
 
-export const ComboBoxTagsValue = ({
-    size,
-    isDisabled,
-    shortcut,
-    placeholder,
-    shortcutClassName,
-    placeholderIcon: Icon = SearchLg,
-    ...otherProps
-}: ComboBoxValueProps) => {
-    const state = useContext(ComboBoxStateContext);
-
-    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 duration-200 ease-in-out ring-inset",
-                    isDisabled && "cursor-not-allowed bg-disabled_subtle",
-                    isFocusWithin && "ring-2 ring-border-brand",
-                    sizes[size].root,
-                )
-            }
-        >
-            {Icon && (
-                <AriaButton>
-                    <Icon className="size-5 text-fg-quaternary" />
-                </AriaButton>
-            )}
-
-            <FocusScope contain={false} autoFocus={false} restoreFocus={false}>
-                <InnerComboBox size={size} isDisabled={isDisabled} shortcut={shortcut} shortcutClassName={shortcutClassName} placeholder={placeholder} />
-            </FocusScope>
-        </AriaGroup>
-    );
-};
+const ComboboxContext = createContext<{
+    size: "sm" | "md";
+    selectedKeys: Key[];
+    selectedItems: ListData<SelectItemType>;
+    onRemove: (keys: Set<Key>) => void;
+    onInputChange: (value: string) => void;
+}>({
+    size: "sm",
+    selectedKeys: [],
+    selectedItems: {} as ListData<SelectItemType>,
+    onRemove: () => {},
+    onInputChange: () => {},
+});
 
 interface CommonProps {
     hint?: string;
@@ -200,14 +60,14 @@ interface CommonProps {
     placeholder?: string;
 }
 
-interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectValueType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
     shortcut?: boolean;
-    items?: SelectValueType[];
+    items?: SelectItemType[];
     popoverClassName?: string;
     shortcutClassName?: string;
-    selectedItems: ListData<SelectValueType>;
+    selectedItems: ListData<SelectItemType>;
     placeholderIcon?: IconComponentType | null;
-    children: AriaListBoxProps<SelectValueType>["children"];
+    children: AriaListBoxProps<SelectItemType>["children"];
     onItemCleared?: (key: Key) => void;
     onItemInserted?: (key: Key) => void;
 }
@@ -226,11 +86,11 @@ export const ComboBox = ({
     ...props
 }: ComboBoxProps) => {
     const { contains } = useFilter({ sensitivity: "base" });
-    const selectedKeys = selectedItems.items.map((i) => i?.value);
+    const selectedKeys = selectedItems.items.map((i) => i?.id);
 
     const filter = useCallback(
-        (item: SelectValueType, filterText: string) => {
-            return !selectedKeys.includes(item.value) && contains(item.value, filterText);
+        (item: SelectItemType, filterText: string) => {
+            return !selectedKeys.includes(item.id) && contains(item.label, filterText);
         },
         [contains, selectedKeys],
     );
@@ -364,10 +224,150 @@ export const ComboBox = ({
     );
 };
 
+const InnerComboBox = ({ isDisabled, shortcut, shortcutClassName, placeholder }: ComboBoxValueProps) => {
+    const focusManager = useFocusManager();
+    const selectContext = useContext(ComboboxContext);
+
+    const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+        const isCaretAtStart = event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0;
+
+        if (!isCaretAtStart && event.currentTarget.value !== "") {
+            return;
+        }
+
+        switch (event.key) {
+            case "Backspace":
+            case "ArrowLeft":
+                focusManager?.focusPrevious({ wrap: false, tabbable: false });
+                break;
+            case "ArrowRight":
+                focusManager?.focusNext({ wrap: false, tabbable: false });
+                break;
+        }
+    };
+
+    const handleTagKeyDown = (event: KeyboardEvent<HTMLButtonElement>, value: Key) => {
+        event.preventDefault();
+
+        const isFirstTag = selectContext?.selectedItems?.items?.[0]?.id === value;
+
+        switch (event.key) {
+            case " ":
+            case "Enter":
+            case "Backspace":
+                if (isFirstTag) {
+                    focusManager?.focusNext({ wrap: false, tabbable: false });
+                } else {
+                    focusManager?.focusPrevious({ wrap: false, tabbable: false });
+                }
+
+                selectContext.onRemove(new Set([value]));
+                break;
+
+            case "ArrowLeft":
+                focusManager?.focusPrevious({ wrap: false, tabbable: false });
+                break;
+            case "ArrowRight":
+                focusManager?.focusNext({ wrap: false, tabbable: false });
+                break;
+        }
+    };
+
+    const isSelectionEmpty = selectContext?.selectedItems?.items?.length === 0;
+
+    return (
+        <div className="relative flex w-full flex-1 flex-row flex-wrap items-center justify-start gap-1.5">
+            {!isSelectionEmpty &&
+                // TODO: Use <TagList /> here
+                selectContext?.selectedItems?.items?.map((value) => (
+                    <span key={value.id} className="flex items-center rounded-md bg-primary py-0.5 pr-1 pl-[5px] ring-1 ring-border-primary ring-inset">
+                        <Avatar size="xxs" alt={value?.label} src={value?.avatarUrl} />
+
+                        <p className="ml-[5px] truncate tt-sm-md whitespace-nowrap text-secondary select-none">{value?.label}</p>
+
+                        <TagCloseX
+                            size="md"
+                            isDisabled={isDisabled}
+                            className="ml-[3px]"
+                            // For workaround, onKeyDown is added to the button
+                            onKeyDown={(event) => handleTagKeyDown(event, value.id)}
+                            onPress={() => selectContext.onRemove(new Set([value.id]))}
+                        />
+                    </span>
+                ))}
+
+            <div className={cx("relative flex min-w-[20%] flex-1 flex-row items-center", !isSelectionEmpty && "ml-0.5", shortcut && "min-w-[30%]")}>
+                <AriaInput
+                    placeholder={placeholder}
+                    onKeyDown={handleInputKeyDown}
+                    className="w-full flex-[1_0_0] appearance-none bg-transparent tt-md text-ellipsis text-primary caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed disabled:text-disabled disabled:placeholder:text-disabled"
+                />
+
+                {shortcut && (
+                    <div
+                        aria-hidden="true"
+                        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",
+                            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",
+                            )}
+                        >
+                            ⌘K
+                        </span>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export const ComboBoxTagsValue = ({
+    size,
+    isDisabled,
+    shortcut,
+    placeholder,
+    shortcutClassName,
+    placeholderIcon: Icon = SearchLg,
+    ...otherProps
+}: ComboBoxValueProps) => {
+    const state = useContext(ComboBoxStateContext);
+
+    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 duration-200 ease-in-out ring-inset",
+                    isDisabled && "cursor-not-allowed bg-disabled_subtle",
+                    isFocusWithin && "ring-2 ring-border-brand",
+                    sizes[size].root,
+                )
+            }
+        >
+            {Icon && (
+                <AriaButton>
+                    <Icon className="size-5 text-fg-quaternary" />
+                </AriaButton>
+            )}
+
+            <FocusScope contain={false} autoFocus={false} restoreFocus={false}>
+                <InnerComboBox size={size} isDisabled={isDisabled} shortcut={shortcut} shortcutClassName={shortcutClassName} placeholder={placeholder} />
+            </FocusScope>
+        </AriaGroup>
+    );
+};
+
 const MultiSelect = ComboBox as typeof ComboBox & {
-    Option: typeof DropdownItem;
+    Item: typeof SelectItem;
 };
 
-MultiSelect.Option = DropdownItem;
+MultiSelect.Item = SelectItem;
 
 export { MultiSelect as MultiSelect };

package/templates/default/src/components/shared/{input-dropdown → select}/popover.tsx

@@ -23,9 +23,9 @@ export const Popover = (props: PopoverProps) => {
                     // scrollbar styles
                     // "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-alpha-black/15 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-primary [&::-webkit-scrollbar]:w-2",
                     state.isEntering &&
-                        "ease-out animate-in animation-duration-150 fade-in 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",
+                        "duration-150 ease-out animate-in fade-in 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 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",
+                        "duration-100 ease-in animate-out fade-out 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",
                     props.size === "md" && "max-h-80!",
 
                     typeof props.className === "function" ? props.className(state) : props.className,

package/templates/default/src/components/shared/select/select-item.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useContext } from "react";
+import { Check } from "@untitledui/icons";
+import type { ListBoxItemProps as AriaListBoxItemProps } from "react-aria-components";
+import { ListBoxItem as AriaListBoxItem, Text } from "react-aria-components";
+import Avatar from "@/components/shared/avatar/avatar";
+import { cx } from "@/components/utils";
+import type { SelectItemType } from "./select";
+import { SelectContext } from "./select";
+
+const sizes = {
+    sm: "p-2 pr-2.5",
+    md: "p-2.5 pl-2",
+};
+
+interface SelectItemProps extends Omit<AriaListBoxItemProps<SelectItemType>, "id">, SelectItemType {}
+
+export const SelectItem = ({ label, id, value, avatarUrl, supportingText, isDisabled, icon: Icon, className, children, ...props }: SelectItemProps) => {
+    const { size } = useContext(SelectContext);
+
+    const textValue = supportingText ? label + " " + supportingText : label;
+
+    return (
+        <AriaListBoxItem
+            id={id}
+            value={value as unknown as object}
+            textValue={textValue}
+            isDisabled={isDisabled}
+            {...props}
+            className={(state) => cx("w-full px-1.5 py-px outline-hidden", typeof className === "function" ? className(state) : className)}
+        >
+            {(state) => (
+                <div
+                    className={cx(
+                        "flex cursor-pointer items-center gap-2 rounded-md outline-hidden select-none",
+                        state.isSelected && "bg-active",
+                        state.isDisabled && "cursor-not-allowed",
+                        state.isFocused && "bg-primary_hover",
+                        state.isFocusVisible && "ring-2 ring-focus-ring ring-inset",
+                        sizes[size],
+                    )}
+                >
+                    {avatarUrl ? (
+                        <Avatar aria-hidden="true" size="xs" src={avatarUrl} alt={label} />
+                    ) : Icon ? (
+                        <Icon aria-hidden="true" className={cx("size-5 shrink-0 text-fg-quaternary", state.isDisabled && "text-fg-disabled")} />
+                    ) : null}
+
+                    <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", state.isDisabled && "text-disabled")}>
+                            {label || (typeof children === "function" ? children(state) : children)}
+                        </Text>
+
+                        {supportingText && (
+                            <Text slot="description" className={cx("tt-md whitespace-nowrap text-tertiary", state.isDisabled && "text-disabled")}>
+                                {supportingText}
+                            </Text>
+                        )}
+                    </section>
+                    {state.isSelected && (
+                        <Check className={cx("ml-auto size-5 text-fg-brand-primary", state.isDisabled && "text-fg-disabled")} aria-hidden="true" />
+                    )}
+                </div>
+            )}
+        </AriaListBoxItem>
+    );
+};
+
+export default SelectItem;

package/templates/default/src/components/shared/{input-dropdown/select.tsx → select/select-native.tsx}

@@ -2,8 +2,8 @@
 
 import { type ChangeEventHandler, useId } from "react";
 import { ChevronDown } from "@untitledui/icons";
-import HintText from "../inputs/hint-text";
-import Label from "../inputs/label";
+import HintText from "../input/hint-text";
+import Label from "../input/label";
 
 export const NativeSelect = (props: {
     label?: string;

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

@@ -0,0 +1,143 @@
+"use client";
+
+import type { ReactNode, Ref, RefAttributes } from "react";
+import { createContext } from "react";
+import { ChevronDown, User01 } from "@untitledui/icons";
+import type { SelectProps as AriaSelectProps } from "react-aria-components";
+import { Button as AriaButton, ListBox as AriaListBox, Select as AriaSelect, SelectValue as AriaSelectValue } from "react-aria-components";
+import Avatar from "@/components/shared/avatar/avatar";
+import type { IconComponentType } from "@/components/shared/badges/badge-types";
+import HintText from "@/components/shared/input/hint-text";
+import Label from "@/components/shared/input/label";
+import { cx } from "@/components/utils";
+import { ComboBox } from "./combobox";
+import { Popover } from "./popover";
+import Item from "./select-item";
+
+export type SelectItemType = {
+    id: string;
+    label?: string;
+    avatarUrl?: string;
+    isDisabled?: boolean;
+    supportingText?: string;
+    icon?: IconComponentType;
+};
+
+type Types = "default" | "iconLeading" | "avatarLeading" | "search" | "tags";
+type SelectTypes = "default" | "iconLeading" | "avatarLeading";
+
+export interface CommonProps {
+    hint?: string;
+    label?: string;
+    tooltip?: string;
+    size?: "sm" | "md";
+    placeholder?: string;
+}
+
+interface SelectProps extends Omit<AriaSelectProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+    type?: SelectTypes;
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    placeholderIcon?: IconComponentType;
+    children: ReactNode | ((item: SelectItemType) => ReactNode);
+}
+
+interface SelectValueProps {
+    isOpen: boolean;
+    size: "sm" | "md";
+    type: SelectTypes;
+    isFocused: boolean;
+    isDisabled: boolean;
+    placeholder?: string;
+    ref?: Ref<HTMLButtonElement>;
+    placeholderIcon?: IconComponentType;
+}
+
+export const sizes = {
+    sm: { root: "py-2 px-3", shortcut: "pr-2.5" },
+    md: { root: "py-2.5 px-3.5", shortcut: "pr-3" },
+};
+
+const SelectValue = (props: SelectValueProps) => {
+    return (
+        <AriaButton
+            className={cx(
+                "relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-border-primary outline-hidden transition duration-100 ease-linear ring-inset",
+                (props.isFocused || props.isOpen) && "ring-2 ring-border-brand",
+                props.isDisabled && "cursor-not-allowed bg-disabled_subtle text-disabled",
+            )}
+        >
+            <AriaSelectValue<SelectItemType>
+                className={cx("flex h-max w-full items-center justify-start gap-2 truncate text-left align-middle", sizes[props.size].root)}
+            >
+                {(state) => {
+                    const Icon = state?.selectedItem?.icon || props.placeholderIcon;
+
+                    return (
+                        <>
+                            {state?.selectedItem?.avatarUrl ? (
+                                <Avatar size="xs" src={state.selectedItem.avatarUrl} alt={state.selectedItem.label} />
+                            ) : Icon ? (
+                                <Icon aria-hidden="true" className={cx("size-5 shrink-0 text-fg-quaternary", props.isDisabled && "text-fg-disabled")} />
+                            ) : null}
+
+                            {state.selectedItem ? (
+                                <section className="flex w-full gap-2 truncate">
+                                    <p className="truncate tt-md-md text-primary">{state.selectedItem?.label}</p>
+                                    {state.selectedItem?.supportingText && <p className="tt-md text-tertiary">{state.selectedItem?.supportingText}</p>}
+                                </section>
+                            ) : (
+                                <p className={cx("tt-md text-placeholder", props.isDisabled && "text-disabled")}>{props.placeholder}</p>
+                            )}
+
+                            <ChevronDown size={20} aria-hidden="true" className="ml-auto shrink-0 text-fg-quaternary" />
+                        </>
+                    );
+                }}
+            </AriaSelectValue>
+        </AriaButton>
+    );
+};
+
+export const SelectContext = createContext<{ type: Types; size: "sm" | "md" }>({ type: "default", size: "sm" });
+
+const Select = ({ type = "default", placeholder = "Select", placeholderIcon, size = "sm", children, items, label, hint, tooltip, ...rest }: SelectProps) => {
+    return (
+        <SelectContext.Provider value={{ type, size }}>
+            <AriaSelect {...rest}>
+                {(state) => (
+                    <div className="flex flex-col gap-1.5">
+                        {label && (
+                            <Label isRequired={state.isRequired} tooltip={tooltip}>
+                                {label}
+                            </Label>
+                        )}
+
+                        <SelectValue
+                            {...state}
+                            {...{ type, size, placeholder }}
+                            placeholderIcon={type === "avatarLeading" || type === "iconLeading" ? placeholderIcon || User01 : undefined}
+                        />
+
+                        <Popover size={size} className={rest.popoverClassName}>
+                            <AriaListBox items={items} className="size-full outline-hidden">
+                                {children}
+                            </AriaListBox>
+                        </Popover>
+
+                        {hint && <HintText isInvalid={state.isInvalid}>{hint}</HintText>}
+                    </div>
+                )}
+            </AriaSelect>
+        </SelectContext.Provider>
+    );
+};
+
+const _Select = Select as typeof Select & {
+    ComboBox: typeof ComboBox;
+    Item: typeof Item;
+};
+_Select.ComboBox = ComboBox;
+_Select.Item = Item;
+
+export { _Select as Select };

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

@@ -8,7 +8,7 @@ const styles = sortCx({
     default: "hidden",
     bottom: "absolute top-2 left-1/2 -translate-x-1/2 translate-y-full text-md leading-md font-medium text-primary",
     "top-floating":
-        "absolute -top-2 left-1/2 -translate-x-1/2 -translate-y-full rounded-lg bg-primary px-3 py-2 text-xs leading-xs font-semibold text-secondary shadow-lg ring-1 ring-border-secondary_alt",
+        "absolute -top-2 left-1/2 -translate-x-1/2 -translate-y-full rounded-lg bg-primary px-3 py-2 text-xs leading-xs font-semibold text-secondary ring-1 shadow-lg ring-border-secondary_alt",
 });
 
 interface SliderProps extends AriaSliderProps {
@@ -55,7 +55,7 @@ export const Slider = ({
                                         index={index}
                                         className={({ isFocusVisible, isDragging }) =>
                                             cx(
-                                                "absolute top-1/2 z-50 box-border size-6 cursor-grab rounded-full bg-slider-handle-bg shadow-md ring-2 ring-slider-handle-border ring-inset",
+                                                "absolute top-1/2 z-50 box-border size-6 cursor-grab rounded-full bg-slider-handle-bg ring-2 shadow-md ring-slider-handle-border ring-inset",
                                                 isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
                                                 isDragging && "cursor-grabbing",
                                             )

package/templates/default/src/components/shared/{inputs/textarea → textarea}/textarea.tsx

@@ -4,8 +4,8 @@ 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 HintText from "@/components/shared/input/hint-text";
+import Label from "@/components/shared/input/label";
 import { cx } from "@/components/utils";
 import { TextField } from "../input";
 

package/templates/default/src/providers/theme.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from "next-themes";
 
 export function Theme({ children }: { children: React.ReactNode }) {
     return (
-        <ThemeProvider attribute="data-theme" enableColorScheme enableSystem>
+        <ThemeProvider attribute="class" value={{ light: "light-mode", dark: "dark-mode" }} enableSystem>
             {children}
         </ThemeProvider>
     );