untitledui 0.1.2 → 0.1.4

package/templates/default/src/components/shared/form/hook-form.tsx

@@ -0,0 +1,75 @@
+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/{inputs → input}/hint-text.tsx

@@ -3,7 +3,7 @@
 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";
+import { cx } from "@/components/utils/cx";
 
 interface HintTextProps extends AriaTextProps {
     children: ReactNode;

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

@@ -4,10 +4,10 @@ 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/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 { Tooltip, TooltipTrigger } from "@/components/shared/tooltips/tooltips";
-import { cx, sortCx } from "@/components/utils";
+import { cx, sortCx } from "@/components/utils/cx";
 
 export interface InputBaseProps extends TextFieldProps {
     label?: string;
@@ -130,7 +130,7 @@ export const InputBase = ({ size = "sm", placeholder, icon: Icon, isDisabled, is
                         )}
                         aria-hidden="true"
                     >
-                        {shortcut || "⌘K"}
+                        {typeof shortcut === "string" ? shortcut : "⌘K"}
                     </span>
                 </div>
             )}

package/templates/default/src/components/shared/{inputs/input → input}/input-payment.tsx

@@ -3,11 +3,11 @@
 import React, { useState } from "react";
 import { TextField } from "react-aria-components";
 import { AmexIcon, DiscoverIcon, MastercardIcon, UnionPayIcon, VisaIcon } from "@/components/foundations/payment-icons";
-import HintText from "@/components/shared/inputs/hint-text";
-import type { InputBaseProps } from "@/components/shared/inputs/input";
-import { InputBase } from "@/components/shared/inputs/input";
-import Label from "@/components/shared/inputs/label";
-import { cx } from "@/components/utils";
+import type { InputBaseProps } from "@/components/shared/input";
+import { InputBase } from "@/components/shared/input";
+import HintText from "@/components/shared/input/hint-text";
+import Label from "@/components/shared/input/label";
+import { cx } from "@/components/utils/cx";
 
 const cardTypes = [
     {

package/templates/default/src/components/shared/{inputs/input → input}/input-with-button.tsx

@@ -6,11 +6,11 @@ import { Copy01 } from "@untitledui/icons";
 import { TextField } from "react-aria-components";
 import type { CommonProps } from "@/components/shared/buttons/button";
 import Button from "@/components/shared/buttons/button";
-import HintText from "@/components/shared/inputs/hint-text";
-import type { InputBaseProps } from "@/components/shared/inputs/input";
-import { InputBase } from "@/components/shared/inputs/input";
-import Label from "@/components/shared/inputs/label";
-import { cx } from "@/components/utils";
+import type { InputBaseProps } from "@/components/shared/input";
+import { InputBase } from "@/components/shared/input";
+import HintText from "@/components/shared/input/hint-text";
+import Label from "@/components/shared/input/label";
+import { cx } from "@/components/utils/cx";
 
 interface InputWithButtonProps extends Omit<InputBaseProps, "icon"> {
     buttonText: string;

package/templates/default/src/components/shared/{inputs/input → input}/input-with-dropdown.tsx

@@ -4,11 +4,11 @@ import React from "react";
 import { ChevronDown } from "@untitledui/icons";
 import type { Key } from "react-aria-components";
 import { TextField } from "react-aria-components";
-import HintText from "@/components/shared/inputs/hint-text";
-import type { InputBaseProps } from "@/components/shared/inputs/input";
-import { InputBase } from "@/components/shared/inputs/input";
-import Label from "@/components/shared/inputs/label";
-import { cx, sortCx } from "@/components/utils";
+import type { InputBaseProps } from "@/components/shared/input";
+import { InputBase } from "@/components/shared/input";
+import HintText from "@/components/shared/input/hint-text";
+import Label from "@/components/shared/input/label";
+import { cx, sortCx } from "@/components/utils/cx";
 
 interface SelectorComponentProps {
     size: "sm" | "md";

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

@@ -1,11 +1,11 @@
 "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";
+import type { InputBaseProps } from "@/components/shared/input";
+import { InputBase, TextField } from "@/components/shared/input";
+import HintText from "@/components/shared/input/hint-text";
+import Label from "@/components/shared/input/label";
+import { cx } from "@/components/utils/cx";
 
 interface InputPrefixProps extends HTMLAttributes<HTMLDivElement> {
     position?: "leading" | "trailing";

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

@@ -5,7 +5,7 @@ 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";
+import { cx } from "@/components/utils/cx";
 
 interface LabelProps extends AriaLabelProps {
     children: ReactNode;

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { cx as clx, sortCx } from "@/components/utils";
+import { cx as clx, sortCx } from "@/components/utils/cx";
 
 interface ProgressBarProps {
     value: number;

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 export interface ProgressBarProps {
     value: number;

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

@@ -3,7 +3,7 @@
 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";
+import { cx } from "@/components/utils/cx";
 
 export interface RadioButtonGroupContextType {
     size?: "sm" | "md";

package/templates/default/src/components/shared/radio-groups/radio-group-avatar.tsx

@@ -4,7 +4,7 @@ import type { RadioGroupProps } from "react-aria-components";
 import { Label, Radio, RadioGroup, Text } from "react-aria-components";
 import AvatarComponent from "@/components/shared/avatar/avatar";
 import { CheckboxBase } from "@/components/shared/checkbox/checkbox";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 interface AvatarItemType {
     id: string;

package/templates/default/src/components/shared/radio-groups/radio-group-checkbox.tsx

@@ -4,7 +4,7 @@ import type { FC } from "react";
 import type { RadioGroupProps } from "react-aria-components";
 import { Label, Radio, RadioGroup, Text } from "react-aria-components";
 import { CheckboxBase } from "@/components/shared/checkbox/checkbox";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 type RadioGroupItemType = {
     value: string;

package/templates/default/src/components/shared/radio-groups/radio-group-icon-card.tsx

@@ -6,7 +6,7 @@ import { Radio, RadioGroup } from "react-aria-components";
 import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icons";
 import { BadgeWithDot } from "@/components/shared/badges/badges";
 import { CheckboxBase } from "@/components/shared/checkbox/checkbox";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 type IconCardItemType = {
     value: string;

package/templates/default/src/components/shared/radio-groups/radio-group-icon-simple.tsx

@@ -5,7 +5,7 @@ import type { RadioGroupProps } from "react-aria-components";
 import { Label, Radio, RadioGroup, Text } from "react-aria-components";
 import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icons";
 import { CheckboxBase } from "@/components/shared/checkbox/checkbox";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 type RadioGroupItemType = {
     value: string;

package/templates/default/src/components/shared/radio-groups/radio-group-payment-icon.tsx

@@ -5,7 +5,7 @@ import type { RadioGroupProps } from "react-aria-components";
 import { Label, Radio, RadioGroup, Text } from "react-aria-components";
 import Button from "@/components/shared/buttons/button";
 import { CheckboxBase } from "@/components/shared/checkbox/checkbox";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 interface PaymentCardItemType {
     value: string;

package/templates/default/src/components/shared/radio-groups/radio-group-radio-button.tsx

@@ -3,7 +3,7 @@
 import type { FC } from "react";
 import type { RadioGroupProps } from "react-aria-components";
 import { Label, Radio, RadioGroup, Text } from "react-aria-components";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 
 type RadioGroupItemType = {
     value: string;

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

@@ -13,23 +13,23 @@ import {
     ComboBoxStateContext,
 } from "react-aria-components";
 import { useHotkeys } from "react-hotkeys-hook";
-import { cx } from "@/components/utils";
+import { cx } from "@/components/utils/cx";
 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 HintText from "../input/hint-text";
+import Label from "../input/label";
 import { ComboBoxTagsValue } from "./multi-select";
 import { Popover } from "./popover";
+import { type CommonProps, SelectContext, type SelectItemType, sizes } from "./select";
 
 type ComboBoxTypes = "search" | "tags";
 
-interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectValueType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
     shortcut?: boolean;
     type?: ComboBoxTypes;
-    items?: SelectValueType[];
+    items?: SelectItemType[];
     popoverClassName?: string;
     shortcutClassName?: string;
-    children: AriaListBoxProps<SelectValueType>["children"];
+    children: AriaListBoxProps<SelectItemType>["children"];
 }
 
 interface ComboBoxValueProps extends RefAttributes<HTMLDivElement> {
@@ -109,8 +109,6 @@ export const ComboBox = ({ type = "search", placeholder = "Select", shortcut = t
     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;
@@ -149,7 +147,9 @@ export const ComboBox = ({ type = "search", placeholder = "Select", shortcut = t
                         />
 
                         <Popover size={size} triggerRef={placeholderRef} style={{ width: popoverWidth }} className={rest.popoverClassName}>
-                            <AriaListBox {...{ items: itemsWithId, children }} className="size-full outline-hidden" />
+                            <AriaListBox items={items} className="size-full outline-hidden">
+                                {children}
+                            </AriaListBox>
                         </Popover>
 
                         {rest.hint && <HintText isInvalid={state.isInvalid}>{rest.hint}</HintText>}