untitledui 0.1.1

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

@@ -0,0 +1,62 @@
+"use client";
+
+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";
+
+interface AvatarItemType {
+    id: string;
+    name: string;
+    username: string;
+    title: string;
+    avatarUrl: string;
+    disabled?: boolean;
+}
+
+interface RadioGroupAvatarProps extends RadioGroupProps {
+    size?: "sm" | "md";
+    items: AvatarItemType[];
+}
+
+export const RadioGroupAvatar = ({ items, size = "sm", className, ...props }: RadioGroupAvatarProps) => {
+    return (
+        <RadioGroup {...props} className={(states) => cx("flex flex-col gap-3", typeof className === "function" ? className(states) : className)}>
+            {items.map((person) => (
+                <Radio
+                    isDisabled={person.disabled}
+                    key={person.id}
+                    value={person.id}
+                    className={({ isDisabled, isSelected, isFocusVisible }) =>
+                        cx(
+                            "relative flex cursor-pointer items-start gap-1 rounded-xl bg-primary p-4 transition duration-100 ring-inset",
+                            isSelected ? "ring-2 ring-border-brand" : "ring-1 ring-border-secondary",
+                            isDisabled && "cursor-not-allowed bg-disabled_subtle ring-border-disabled_subtle",
+                            isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
+                        )
+                    }
+                >
+                    {({ isDisabled, isSelected, isFocusVisible }) => (
+                        <>
+                            <div className={cx("flex flex-1", size === "md" ? "gap-3 md:gap-4" : "gap-3")}>
+                                <AvatarComponent alt={person.name} src={person.avatarUrl} size={size === "md" ? "md" : "sm"} />
+
+                                <div className={cx("flex flex-col", size === "md" ? "gap-0.5" : "")}>
+                                    <Label className={cx("pointer-events-none flex", size === "md" ? "gap-1.5" : "gap-1")}>
+                                        <span className={cx("text-secondary", size === "md" ? "tt-md-md" : "tt-sm-md")}>{person.name}</span>
+                                        <span className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>{person.username}</span>
+                                    </Label>
+                                    <Text slot="description" className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>
+                                        {person.title}
+                                    </Text>
+                                </div>
+                            </div>
+                            <CheckboxBase size={size === "md" ? "md" : "sm"} isDisabled={isDisabled} isSelected={isSelected} isFocused={isFocusVisible} />
+                        </>
+                    )}
+                </Radio>
+            ))}
+        </RadioGroup>
+    );
+};

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

@@ -0,0 +1,72 @@
+"use client";
+
+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";
+
+type RadioGroupItemType = {
+    value: string;
+    title: string;
+    disabled?: boolean;
+    description: string;
+    secondaryTitle: string;
+    icon: FC<{ className?: string }>;
+};
+
+interface RadioGroupCheckboxProps extends RadioGroupProps {
+    size?: "sm" | "md";
+    items: RadioGroupItemType[];
+}
+
+export const RadioGroupCheckbox = ({ items, size = "sm", className, ...props }: RadioGroupCheckboxProps) => {
+    return (
+        <RadioGroup {...props} className={(states) => cx("flex flex-col gap-3", typeof className === "function" ? className(states) : className)}>
+            {items.map((plan) => (
+                <Radio
+                    isDisabled={plan.disabled}
+                    key={plan.value}
+                    value={plan.value}
+                    className={({ isDisabled, isFocusVisible, isSelected }) =>
+                        cx(
+                            "relative flex cursor-pointer items-start gap-1 rounded-xl bg-primary p-4 transition duration-100 ring-inset",
+                            size === "md" ? "gap-3" : "gap-2",
+                            isSelected ? "ring-2 ring-border-brand" : "ring-1 ring-border-secondary",
+                            isDisabled && "cursor-not-allowed bg-disabled_subtle ring-border-disabled_subtle",
+                            isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
+                        )
+                    }
+                >
+                    {({ isDisabled, isSelected, isFocusVisible }) => (
+                        <>
+                            <CheckboxBase
+                                size={size === "md" ? "md" : "sm"}
+                                isDisabled={isDisabled}
+                                isSelected={isSelected}
+                                isFocused={isFocusVisible}
+                                className="mt-0.5"
+                            />
+
+                            <div
+                                className={cx(
+                                    "flex flex-col",
+
+                                    size === "md" ? "gap-0.5" : "",
+                                )}
+                            >
+                                <Label className={cx("pointer-events-none flex", size === "md" ? "gap-1.5" : "gap-1")}>
+                                    <span className={cx("text-secondary", size === "md" ? "tt-md-md" : "tt-sm-md")}>{plan.title}</span>
+                                    <span className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>{plan.secondaryTitle}</span>
+                                </Label>
+                                <Text slot="description" className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>
+                                    {plan.description}
+                                </Text>
+                            </div>
+                        </>
+                    )}
+                </Radio>
+            ))}
+        </RadioGroup>
+    );
+};

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

@@ -0,0 +1,95 @@
+"use client";
+
+import type { FC, ReactNode } from "react";
+import type { RadioGroupProps } from "react-aria-components";
+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";
+
+type IconCardItemType = {
+    value: string;
+    title: string;
+    description: string;
+    secondaryTitle?: string;
+    disabled?: boolean;
+    price?: string;
+    badge?: ReactNode;
+    icon: FC<{ className?: string }>;
+};
+
+interface RadioGroupIconCardProps extends RadioGroupProps {
+    size?: "sm" | "md";
+    items: IconCardItemType[];
+}
+
+export const RadioGroupIconCard = ({ items, size = "sm", className, ...props }: RadioGroupIconCardProps) => {
+    return (
+        <RadioGroup {...props} className={(states) => cx("flex flex-col gap-3", typeof className === "function" ? className(states) : className)}>
+            {items.map((plan) => (
+                <Radio
+                    isDisabled={plan.disabled}
+                    key={plan.value}
+                    value={plan.value}
+                    className={({ isDisabled, isSelected, isFocusVisible }) =>
+                        cx(
+                            "relative block cursor-pointer rounded-xl bg-primary transition duration-100 ring-inset",
+                            isSelected ? "ring-2 ring-border-brand" : "ring-1 ring-border-secondary",
+                            isDisabled && "cursor-not-allowed bg-disabled_subtle ring-border-disabled",
+                            isSelected && isDisabled && "ring-border-disabled_subtle",
+                            isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
+                        )
+                    }
+                >
+                    {({ isDisabled, isSelected, isFocusVisible }) => (
+                        <>
+                            <div
+                                className={cx(
+                                    "flex items-center gap-3 rounded-t-xl p-3 pr-5 transition-inherit-all ring-inset",
+                                    isSelected ? "ring-2 ring-border-brand" : "ring-1 ring-border-secondary",
+                                    isDisabled && "ring-border-disabled",
+                                    isSelected && isDisabled && "ring-border-disabled_subtle",
+                                    isFocusVisible && "outline-hidden",
+                                )}
+                            >
+                                <FeaturedIcon
+                                    size={size === "md" ? "md" : "sm"}
+                                    icon={plan.icon}
+                                    color="gray"
+                                    theme="modern"
+                                    className={cx(isDisabled && "bg-disabled text-fg-disabled")}
+                                />
+
+                                <span className={cx("mr-1 text-secondary", size === "md" ? "tt-lg-semi" : "tt-md-semi")}>{plan.title}</span>
+
+                                <CheckboxBase
+                                    size={size === "md" ? "md" : "sm"}
+                                    className="ml-auto"
+                                    isDisabled={isDisabled}
+                                    isSelected={isSelected}
+                                    isFocused={isFocusVisible}
+                                />
+                            </div>
+
+                            <div className="flex flex-col-reverse items-start justify-between gap-4 rounded-b-lg p-4 sm:flex-row sm:gap-1">
+                                <div className={cx("flex flex-col", size === "md" ? "gap-2" : "gap-1")}>
+                                    <p className="flex items-baseline gap-1">
+                                        <span className={cx("text-secondary", size === "md" ? "td-md-semi" : "td-sm-semi")}>{plan.price}</span>
+                                        <span className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>{plan.secondaryTitle}</span>
+                                    </p>
+                                    <p className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>{plan.description}</p>
+                                </div>
+                                {plan.badge && (
+                                    <BadgeWithDot size="sm" type="modern" color="success">
+                                        {plan.badge}
+                                    </BadgeWithDot>
+                                )}
+                            </div>
+                        </>
+                    )}
+                </Radio>
+            ))}
+        </RadioGroup>
+    );
+};

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

@@ -0,0 +1,70 @@
+"use client";
+
+import type { FC } from "react";
+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";
+
+type RadioGroupItemType = {
+    value: string;
+    title: string;
+    disabled?: boolean;
+    description: string;
+    secondaryTitle: string;
+    icon: FC<{ className?: string }>;
+};
+
+interface RadioGroupIconSimpleProps extends RadioGroupProps {
+    size?: "sm" | "md";
+    items: RadioGroupItemType[];
+}
+
+export const RadioGroupIconSimple = ({ items, size = "sm", className, ...props }: RadioGroupIconSimpleProps) => {
+    return (
+        <RadioGroup {...props} className={(states) => cx("flex flex-col gap-3", typeof className === "function" ? className(states) : className)}>
+            {items.map((plan) => (
+                <Radio
+                    isDisabled={plan.disabled}
+                    key={plan.value}
+                    value={plan.value}
+                    className={({ isDisabled, isSelected, isFocusVisible }) =>
+                        cx(
+                            "relative flex cursor-pointer items-start gap-1 rounded-xl bg-primary p-4 transition duration-100 ring-inset",
+                            isSelected ? "ring-2 ring-border-brand" : "ring-1 ring-border-secondary",
+                            isDisabled && "cursor-not-allowed bg-disabled_subtle ring-border-disabled",
+                            isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
+                        )
+                    }
+                >
+                    {({ isDisabled, isSelected, isFocusVisible }) => (
+                        <>
+                            <div className="flex flex-1 gap-3">
+                                <FeaturedIcon
+                                    icon={plan.icon}
+                                    size={size === "md" ? "md" : "sm"}
+                                    color="gray"
+                                    theme="modern"
+                                    className={cx(isDisabled && "bg-disabled text-fg-disabled")}
+                                />
+
+                                <div className={cx("flex flex-col", size === "md" ? "gap-0.5" : "")}>
+                                    <Label className={cx("pointer-events-none flex", size === "md" ? "gap-1.5" : "gap-1")}>
+                                        <span className={cx("text-secondary", size === "md" ? "tt-md-md" : "tt-sm-md")}>{plan.title}</span>
+                                        <span className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>{plan.secondaryTitle}</span>
+                                    </Label>
+                                    <Text slot="description" className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>
+                                        {plan.description}
+                                    </Text>
+                                </div>
+                            </div>
+
+                            <CheckboxBase size={size === "md" ? "md" : "sm"} isDisabled={isDisabled} isSelected={isSelected} isFocused={isFocusVisible} />
+                        </>
+                    )}
+                </Radio>
+            ))}
+        </RadioGroup>
+    );
+};

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

@@ -0,0 +1,71 @@
+"use client";
+
+import type { ReactNode } from "react";
+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";
+
+interface PaymentCardItemType {
+    value: string;
+    title: string;
+    description: string;
+    logo: ReactNode;
+    disabled?: boolean;
+}
+
+interface RadioGroupPaymentIconProps extends RadioGroupProps {
+    size?: "sm" | "md";
+    items: PaymentCardItemType[];
+}
+
+export const RadioGroupPaymentIcon = ({ items, size = "sm", className, ...props }: RadioGroupPaymentIconProps) => {
+    return (
+        <RadioGroup {...props} className={(states) => cx("flex flex-col gap-3", typeof className === "function" ? className(states) : className)}>
+            {items.map((card) => (
+                <Radio
+                    isDisabled={card.disabled}
+                    key={card.value}
+                    value={card.value}
+                    className={({ isDisabled, isSelected, isFocusVisible }) =>
+                        cx(
+                            "relative flex cursor-pointer items-start gap-1 rounded-xl bg-primary p-4 transition duration-100 ring-inset",
+                            isSelected ? "ring-2 ring-border-brand" : "ring-1 ring-border-secondary",
+                            isDisabled && "cursor-not-allowed bg-disabled_subtle ring-border-disabled_subtle",
+                            isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
+                        )
+                    }
+                >
+                    {({ isDisabled, isSelected, isFocusVisible }) => (
+                        <>
+                            <div className={cx("flex flex-1", size === "md" ? "gap-3 md:gap-4" : "gap-3")}>
+                                <span className="shrink-0">{card.logo}</span>
+                                <div>
+                                    <div className={cx("flex flex-col", size === "md" ? "gap-0.5" : "")}>
+                                        <Label className={cx("pointer-events-none text-secondary", size === "md" ? "tt-md-md" : "tt-sm-md")}>
+                                            {card.title}
+                                        </Label>
+                                        <Text slot="description" className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>
+                                            {card.description}
+                                        </Text>
+                                    </div>
+                                    <div className={cx("flex gap-3", size === "md" ? "mt-3" : "mt-2")}>
+                                        <Button color="link-gray" size={size === "md" ? "md" : "sm"} isDisabled={isDisabled}>
+                                            Set as default
+                                        </Button>
+                                        <Button color="link-color" size={size === "md" ? "md" : "sm"} isDisabled={isDisabled}>
+                                            Edit
+                                        </Button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <CheckboxBase size={size === "md" ? "md" : "sm"} isDisabled={isDisabled} isSelected={isSelected} isFocused={isFocusVisible} />
+                        </>
+                    )}
+                </Radio>
+            ))}
+        </RadioGroup>
+    );
+};

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

@@ -0,0 +1,76 @@
+"use client";
+
+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";
+
+type RadioGroupItemType = {
+    value: string;
+    title: string;
+    disabled?: boolean;
+    description: string;
+    secondaryTitle: string;
+    icon: FC<{ className?: string }>;
+};
+
+interface RadioGroupRadioButtonProps extends RadioGroupProps {
+    size?: "sm" | "md";
+    items: RadioGroupItemType[];
+}
+
+export const RadioGroupRadioButton = ({ items, size = "sm", className, ...props }: RadioGroupRadioButtonProps) => {
+    return (
+        <RadioGroup {...props} className={(states) => cx("flex flex-col gap-3", typeof className === "function" ? className(states) : className)}>
+            {items.map((plan) => (
+                <Radio
+                    isDisabled={plan.disabled}
+                    key={plan.value}
+                    value={plan.value}
+                    className={({ isDisabled, isSelected, isFocusVisible }) =>
+                        cx(
+                            "relative flex cursor-pointer rounded-xl bg-primary p-4 transition duration-100 ring-inset",
+                            size === "md" ? "gap-3" : "gap-2",
+                            isSelected ? "ring-2 ring-border-brand" : "ring-1 ring-border-secondary",
+                            isDisabled && "cursor-not-allowed bg-disabled_subtle ring-border-disabled_subtle",
+                            isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
+                        )
+                    }
+                >
+                    {({ isSelected, isDisabled, isFocusVisible }) => (
+                        <>
+                            <div
+                                className={cx(
+                                    "relative mt-0.5 inline-flex shrink-0 items-center justify-center rounded-full transition-inherit-all ring-inset",
+                                    size === "md" ? "size-5" : "size-4",
+                                    isSelected ? "bg-brand-solid" : "ring-1 ring-border-primary",
+                                    isDisabled && "bg-disabled_subtle ring-1 ring-border-disabled",
+                                    isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
+                                )}
+                            >
+                                <div
+                                    className={cx(
+                                        "absolute rounded-full bg-fg-white opacity-0 transition-inherit-all",
+                                        size === "md" ? "size-2" : "size-1.5",
+                                        isSelected ? "opacity-100" : "opacity-0",
+                                        isDisabled && "bg-fg-disabled_subtle",
+                                    )}
+                                />
+                            </div>
+
+                            <div className={cx("flex flex-col", size === "md" ? "gap-0.5" : "")}>
+                                <Label className={cx("pointer-events-none flex", size === "md" ? "gap-1.5" : "gap-1")}>
+                                    <span className={cx("tt-sm-md text-secondary", size === "md" ? "tt-md-md" : "tt-sm-md")}>{plan.title}</span>
+                                    <span className={cx("text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>{plan.secondaryTitle}</span>
+                                </Label>
+                                <Text slot="description" className={cx("tt-sm text-tertiary", size === "md" ? "tt-md" : "tt-sm")}>
+                                    {plan.description}
+                                </Text>
+                            </div>
+                        </>
+                    )}
+                </Radio>
+            ))}
+        </RadioGroup>
+    );
+};

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

@@ -0,0 +1,8 @@
+"use client";
+
+export { RadioGroupIconSimple as IconSimple } from "./radio-group-icon-simple";
+export { RadioGroupIconCard as IconCard } from "./radio-group-icon-card";
+export { RadioGroupAvatar as Avatar } from "./radio-group-avatar";
+export { RadioGroupPaymentIcon as PaymentIcon } from "./radio-group-payment-icon";
+export { RadioGroupRadioButton as RadioButton } from "./radio-group-radio-button";
+export { RadioGroupCheckbox as Checkbox } from "./radio-group-checkbox";

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

@@ -0,0 +1,76 @@
+"use client";
+
+import type { SliderProps as AriaSliderProps } from "react-aria-components";
+import { Slider as AriaSlider, Label, SliderOutput, SliderThumb, SliderTrack } from "react-aria-components";
+import { cx, sortCx } from "@/components/utils";
+
+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",
+});
+
+interface SliderProps extends AriaSliderProps {
+    labelPosition?: keyof typeof styles;
+    labelFormatter?: (value: number) => string;
+}
+
+export const Slider = ({
+    labelPosition = "default",
+    minValue = 0,
+    maxValue = 100,
+    defaultValue = [minValue, maxValue],
+    labelFormatter,
+    formatOptions,
+    ...rest
+}: SliderProps) => {
+    // Format thumb value as percentage by default.
+    const defaultFormatOptions: Intl.NumberFormatOptions = {
+        style: "percent",
+        maximumFractionDigits: 0,
+    };
+
+    return (
+        <AriaSlider {...rest} {...{ minValue, maxValue, defaultValue }} formatOptions={formatOptions ?? defaultFormatOptions}>
+            <Label />
+            <SliderTrack className="relative h-2 w-full rounded-full bg-quaternary">
+                {({ state: { values, getThumbValue, getThumbPercent, getFormattedValue, getThumbValueLabel } }) => {
+                    const left = getThumbPercent(0);
+                    const width = getThumbPercent(1) - left;
+
+                    return (
+                        <>
+                            <span
+                                className="absolute z-10 h-2 w-full rounded-full bg-brand-solid"
+                                style={{
+                                    left: `${left * 100}%`,
+                                    width: `${width * 100}%`,
+                                }}
+                            />
+                            {values.map((_, index) => {
+                                return (
+                                    <SliderThumb
+                                        key={index}
+                                        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",
+                                                isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
+                                                isDragging && "cursor-grabbing",
+                                            )
+                                        }
+                                    >
+                                        <SliderOutput className={cx("whitespace-nowrap", styles[labelPosition])}>
+                                            {labelFormatter ? labelFormatter(getThumbValue(index)) : getFormattedValue(getThumbValue(index) / 100)}
+                                        </SliderOutput>
+                                    </SliderThumb>
+                                );
+                            })}
+                        </>
+                    );
+                }}
+            </SliderTrack>
+        </AriaSlider>
+    );
+};

package/templates/default/src/components/shared/tags/base-components/tag-checkbox.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { cx } from "@/components/utils";
+
+interface TagCheckboxProps {
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    isFocused?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+}
+
+const TagCheckbox = ({ className, isFocused, isSelected, isDisabled, size = "sm" }: TagCheckboxProps) => {
+    return (
+        <div
+            className={cx(
+                "flex cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-border-primary ring-inset",
+                size === "sm" && "size-3.5",
+                size === "md" && "size-4",
+                size === "lg" && "size-4.5",
+                isSelected && "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 text-fg-white opacity-0 transition-inherit-all",
+                    size === "sm" && "size-2.5",
+                    size === "md" && "size-3",
+                    size === "lg" && "size-3.5",
+                    isSelected && "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>
+    );
+};
+TagCheckbox.displayName = "TagCheckbox";
+
+export default TagCheckbox;

package/templates/default/src/components/shared/tags/base-components/tag-close-x.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import type { RefAttributes } from "react";
+import { XClose } from "@untitledui/icons";
+import { Button as AriaButton, type ButtonProps } from "react-aria-components";
+import { cx } from "@/components/utils";
+
+interface TagCloseXProps extends ButtonProps, RefAttributes<HTMLButtonElement> {
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+
+const styles = {
+    sm: { root: "p-0.5", icon: "size-2.5" },
+    md: { root: "p-0.5", icon: "size-3" },
+    lg: { root: "p-[3px]", icon: "size-3.5" },
+};
+
+export const TagCloseX = ({ size = "md", className, isDisabled, ...otherProps }: TagCloseXProps) => {
+    return (
+        <AriaButton
+            slot="remove"
+            aria-label="Remove this tag"
+            className={cx(
+                "flex cursor-pointer rounded-[3px] text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus:outline-2 focus:outline-offset-2 disabled:cursor-not-allowed",
+                styles[size].root,
+                className,
+            )}
+            {...otherProps}
+        >
+            <XClose className={cx("transition-inherit-all", styles[size].icon)} strokeWidth="3" />
+        </AriaButton>
+    );
+};