untitledui 0.1.1

package/templates/default/src/components/shared/avatar/base-components/verified-tick.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { cx } from "@/components/utils";
+
+const sizes = {
+    xs: { root: "size-2.5", tick: "size-[4.38px" },
+    sm: { root: "size-3", tick: "size-[5.25px]" },
+    md: { root: "size-3.5", tick: "size-[6.13px]" },
+    lg: { root: "size-4", tick: "size-[7px]" },
+    xl: { root: "size-4.5", tick: "size-[7.88px]" },
+    "2xl": { root: "size-5", tick: "size-[8.75px]" },
+    "3xl": { root: "size-6", tick: "size-[10.5px]" },
+    "4xl": { root: "size-8", tick: "size-[14px]" },
+};
+
+interface VerifiedTickProps {
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    className?: string;
+}
+
+export const VerifiedTick = ({ size, className }: VerifiedTickProps) => (
+    <svg data-verified className={cx("z-10 text-utility-blue-500", sizes[size].root, className)} viewBox="0 0 10 10" fill="none">
+        <path
+            d="M7.72237 1.77098C7.81734 2.00068 7.99965 2.18326 8.2292 2.27858L9.03413 2.61199C9.26384 2.70714 9.44635 2.88965 9.5415 3.11936C9.63665 3.34908 9.63665 3.60718 9.5415 3.83689L9.20833 4.64125C9.11313 4.87106 9.113 5.12943 9.20863 5.35913L9.54122 6.16325C9.58839 6.27702 9.61268 6.39897 9.6127 6.52214C9.61272 6.6453 9.58847 6.76726 9.54134 6.88105C9.4942 6.99484 9.42511 7.09823 9.33801 7.18531C9.2509 7.27238 9.14749 7.34144 9.03369 7.38854L8.22934 7.72171C7.99964 7.81669 7.81706 7.99899 7.72174 8.22855L7.38833 9.03348C7.29318 9.26319 7.11067 9.4457 6.88096 9.54085C6.65124 9.636 6.39314 9.636 6.16343 9.54085L5.35907 9.20767C5.12935 9.11276 4.87134 9.11295 4.64177 9.20821L3.83684 9.54115C3.60725 9.63608 3.34937 9.636 3.11984 9.54092C2.89032 9.44585 2.70791 9.26356 2.6127 9.03409L2.27918 8.22892C2.18421 7.99923 2.0019 7.81665 1.77235 7.72133L0.967421 7.38792C0.737807 7.29281 0.555355 7.11041 0.460169 6.88083C0.364983 6.65125 0.364854 6.39327 0.45981 6.16359L0.792984 5.35924C0.8879 5.12952 0.887707 4.87151 0.792445 4.64193L0.459749 3.83642C0.41258 3.72265 0.388291 3.60069 0.388272 3.47753C0.388252 3.35436 0.412501 3.2324 0.459634 3.11861C0.506767 3.00482 0.57586 2.90144 0.662965 2.81436C0.75007 2.72728 0.853479 2.65822 0.967283 2.61113L1.77164 2.27795C2.00113 2.18306 2.1836 2.00099 2.27899 1.7717L2.6124 0.966768C2.70755 0.737054 2.89006 0.554547 3.11978 0.459397C3.34949 0.364246 3.60759 0.364246 3.83731 0.459397L4.64166 0.792571C4.87138 0.887487 5.12939 0.887293 5.35897 0.792031L6.16424 0.459913C6.39392 0.364816 6.65197 0.364836 6.88164 0.459968C7.11131 0.555099 7.29379 0.737554 7.38895 0.967208L7.72247 1.77238L7.72237 1.77098Z"
+            className="fill-current"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.95829 3.68932C7.02509 3.58439 7.04747 3.45723 7.02051 3.3358C6.99356 3.21437 6.91946 3.10862 6.81454 3.04182C6.70961 2.97502 6.58245 2.95264 6.46102 2.97959C6.33959 3.00655 6.23384 3.08064 6.16704 3.18557L4.33141 6.06995L3.49141 5.01995C3.41375 4.92281 3.30069 4.8605 3.17709 4.84673C3.05349 4.83296 2.92949 4.86885 2.83235 4.94651C2.73522 5.02417 2.67291 5.13723 2.65914 5.26083C2.64536 5.38443 2.68125 5.50843 2.75891 5.60557L4.00891 7.16807C4.0555 7.22638 4.11533 7.27271 4.18344 7.30323C4.25154 7.33375 4.32595 7.34757 4.40047 7.34353C4.47499 7.3395 4.54747 7.31773 4.61188 7.28004C4.67629 7.24234 4.73077 7.18981 4.77079 7.12682L6.95829 3.68932Z"
+            fill="white"
+        />
+    </svg>
+);

package/templates/default/src/components/shared/avatar/utils.ts

@@ -0,0 +1,12 @@
+/**
+ * Extracts the initials from a full name.
+ *
+ * @param name - The full name from which to extract initials.
+ * @returns The initials of the provided name. If the name contains only one word,
+ *          it returns the first character of that word. If the name contains two words,
+ *          it returns the first character of each word.
+ */
+export const getInitials = (name: string) => {
+    const [firstName, lastName] = name.split(" ");
+    return firstName.charAt(0) + (lastName ? lastName.charAt(0) : "");
+};

package/templates/default/src/components/shared/badges/badge-groups.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import type { FC, ReactNode } from "react";
+import { isValidElement } from "react";
+import { ArrowRight } from "@untitledui/icons";
+import { cx, sortCx } from "@/components/utils";
+import { isReactComponent } from "@/components/utils/isReactComponent";
+
+type Size = "md" | "lg";
+type Color = "brand" | "warning" | "error" | "gray" | "success";
+type Theme = "light" | "modern";
+type Align = "leading" | "trailing";
+
+const baseClasses: Record<Theme, { root?: string; addon?: string; icon?: string }> = {
+    light: {
+        root: "rounded-full ring-1 ring-inset",
+        addon: "rounded-full ring-1 ring-inset",
+    },
+    modern: {
+        root: "rounded-[10px] bg-primary text-secondary shadow-xs ring-1 ring-inset ring-border-primary hover:bg-secondary",
+        addon: "flex items-center rounded-md bg-primary shadow-xs ring-1 ring-inset ring-border-primary",
+        icon: "text-utility-gray-500",
+    },
+};
+
+const getSizeClasses = (
+    theme?: Theme,
+    text?: boolean,
+    icon?: boolean,
+): Record<Align, Record<Size, { root?: string; addon?: string; icon?: string; dot?: string }>> => ({
+    leading: {
+        md: {
+            root: cx("py-1 pr-2 pl-1 tt-xs-md", !text && !icon && "pr-1"),
+            addon: cx("px-2 py-0.5", theme === "modern" && "gap-1 px-1.5", text && "mr-2"),
+            icon: "ml-1 size-4",
+        },
+        lg: {
+            root: cx("py-1 pr-2 pl-1 tt-sm-md", !text && !icon && "pr-1"),
+            addon: cx("px-2.5 py-0.5", theme === "modern" && "gap-1.5 px-2", text && "mr-2"),
+            icon: "ml-1 size-4",
+        },
+    },
+    trailing: {
+        md: {
+            root: cx("py-1 pr-1 pl-3 tt-xs-md", theme === "modern" && "pl-2.5"),
+            addon: cx("py-0.5 pr-1.5 pl-2", theme === "modern" && "pr-1.5 pl-2", text && "ml-2"),
+            icon: "ml-0.5 size-3 stroke-[3px]",
+            dot: "mr-1.5",
+        },
+        lg: {
+            root: "py-1 pr-1 pl-3 tt-sm-md",
+            addon: cx("py-0.5 pr-2 pl-2.5", theme === "modern" && "pr-1.5 pl-2", text && "ml-2"),
+            icon: "ml-1 size-3 stroke-[3px]",
+            dot: "mr-2",
+        },
+    },
+});
+
+const colorClasses: Record<Theme, Record<Color, { root?: string; addon?: string; icon?: string; dot?: string }>> = sortCx({
+    light: {
+        brand: {
+            root: "bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200 hover:bg-utility-brand-100",
+            addon: "bg-primary text-current ring-utility-brand-200",
+            icon: "text-utility-brand-500",
+        },
+        gray: {
+            root: "bg-utility-gray-50 text-utility-gray-700 ring-utility-gray-200 hover:bg-utility-gray-100",
+            addon: "bg-primary text-current ring-utility-gray-200",
+            icon: "text-utility-gray-500",
+        },
+        error: {
+            root: "bg-utility-error-50 text-utility-error-700 ring-utility-error-200 hover:bg-utility-error-100",
+            addon: "bg-primary text-current ring-utility-error-200",
+            icon: "text-utility-error-500",
+        },
+        warning: {
+            root: "bg-utility-warning-50 text-utility-warning-700 ring-utility-warning-200 hover:bg-utility-warning-100",
+            addon: "bg-primary text-current ring-utility-warning-200",
+            icon: "text-utility-warning-500",
+        },
+        success: {
+            root: "bg-utility-success-50 text-utility-success-700 ring-utility-success-200 hover:bg-utility-success-100",
+            addon: "bg-primary text-current ring-utility-success-200",
+            icon: "text-utility-success-500",
+        },
+    },
+    modern: {
+        brand: {
+            dot: "bg-utility-brand-500 outline-3 -outline-offset-1 outline-utility-brand-100",
+        },
+        gray: {
+            dot: "bg-utility-gray-500 outline-3 -outline-offset-1 outline-utility-gray-100",
+        },
+        error: {
+            dot: "bg-utility-error-500 outline-3 -outline-offset-1 outline-utility-error-100",
+        },
+        warning: {
+            dot: "bg-utility-warning-500 outline-3 -outline-offset-1 outline-utility-warning-100",
+        },
+        success: {
+            dot: "bg-utility-success-500 outline-3 -outline-offset-1 outline-utility-success-100",
+        },
+    },
+});
+
+interface BadgeGroupProps {
+    children?: string | ReactNode;
+    addonText: string;
+    size?: Size;
+    color: Color;
+    theme?: Theme;
+    /**
+     * Alignment of the badge addon element.
+     */
+    align?: Align;
+    iconTrailing?: FC<{ className?: string }> | ReactNode;
+    className?: string;
+}
+
+export const BadgeGroup = ({
+    children,
+    addonText,
+    size = "md",
+    color = "brand",
+    theme = "light",
+    align = "leading",
+    className,
+    iconTrailing: IconTrailing = ArrowRight,
+}: BadgeGroupProps) => {
+    const colors = colorClasses[theme][color];
+    const sizes = getSizeClasses(theme, !!children, !!IconTrailing)[align][size];
+
+    const rootClasses = cx(
+        "inline-flex w-max cursor-pointer items-center transition duration-100 ease-linear",
+        baseClasses[theme].root,
+        sizes.root,
+        colors.root,
+        className,
+    );
+    const addonClasses = cx("inline-flex items-center", baseClasses[theme].addon, sizes.addon, colors.addon);
+    const dotClasses = cx("inline-block size-2 shrink-0 rounded-full", sizes.dot, colors.dot);
+    const iconClasses = cx(baseClasses[theme].icon, sizes.icon, colors.icon);
+
+    if (align === "trailing") {
+        return (
+            <div className={rootClasses}>
+                {theme === "modern" && <span className={dotClasses} />}
+
+                {children}
+
+                <span className={addonClasses}>
+                    {addonText}
+
+                    {/* Trailing icon */}
+                    {isReactComponent(IconTrailing) && <IconTrailing className={iconClasses} />}
+                    {isValidElement(IconTrailing) && IconTrailing}
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div className={rootClasses}>
+            <span className={addonClasses}>
+                {theme === "modern" && <span className={dotClasses} />}
+                {addonText}
+            </span>
+
+            {children}
+
+            {/* Trailing icon */}
+            {isReactComponent(IconTrailing) && <IconTrailing className={iconClasses} />}
+            {isValidElement(IconTrailing) && IconTrailing}
+        </div>
+    );
+};

package/templates/default/src/components/shared/badges/badge-types.ts

@@ -0,0 +1,264 @@
+export type IconComponentType = React.FunctionComponent<{ className?: string; strokeWidth?: string | number }>;
+
+export type Sizes = "sm" | "md" | "lg";
+
+export type BadgeColors = "gray" | "brand" | "error" | "warning" | "success" | "gray-blue" | "blue-light" | "blue" | "indigo" | "purple" | "pink" | "orange";
+
+export type FlagTypes =
+    | "AD"
+    | "AE"
+    | "AF"
+    | "AG"
+    | "AI"
+    | "AL"
+    | "AM"
+    | "AO"
+    | "AR"
+    | "AS"
+    | "AT"
+    | "AU"
+    | "AW"
+    | "AX"
+    | "AZ"
+    | "BA"
+    | "BB"
+    | "BD"
+    | "BE"
+    | "BF"
+    | "BG"
+    | "BH"
+    | "BI"
+    | "BJ"
+    | "BL"
+    | "BM"
+    | "BN"
+    | "BO"
+    | "BQ-1"
+    | "BQ-2"
+    | "BQ"
+    | "BR"
+    | "BS"
+    | "BT"
+    | "BW"
+    | "BY"
+    | "BZ"
+    | "CA"
+    | "CC"
+    | "CD-1"
+    | "CD"
+    | "CF"
+    | "CH"
+    | "CK"
+    | "CL"
+    | "CM"
+    | "CN"
+    | "CO"
+    | "CR"
+    | "CU"
+    | "CW"
+    | "CX"
+    | "CY"
+    | "CZ"
+    | "DE"
+    | "DJ"
+    | "DK"
+    | "DM"
+    | "DO"
+    | "DS"
+    | "DZ"
+    | "earth"
+    | "EC"
+    | "EE"
+    | "EG"
+    | "EH"
+    | "ER"
+    | "ES"
+    | "ET"
+    | "FI"
+    | "FJ"
+    | "FK"
+    | "FM"
+    | "FO"
+    | "FR"
+    | "GA"
+    | "GB-2"
+    | "GB"
+    | "GD"
+    | "GE"
+    | "GG"
+    | "GH"
+    | "GI"
+    | "GL"
+    | "GM"
+    | "GN"
+    | "GQ"
+    | "GR"
+    | "GT"
+    | "GU"
+    | "GW"
+    | "GY"
+    | "HK"
+    | "HN"
+    | "HR"
+    | "HT"
+    | "HU"
+    | "ID"
+    | "IE"
+    | "IL"
+    | "IM"
+    | "IN"
+    | "IO"
+    | "IQ"
+    | "IR"
+    | "IS"
+    | "IT"
+    | "JE"
+    | "JM"
+    | "JO"
+    | "JP"
+    | "KE"
+    | "KG"
+    | "KH"
+    | "KI"
+    | "KM"
+    | "KN"
+    | "KP"
+    | "KR"
+    | "KW"
+    | "KY"
+    | "KZ"
+    | "LA"
+    | "LB"
+    | "LC"
+    | "LI"
+    | "LK"
+    | "LR"
+    | "LS"
+    | "LT"
+    | "LU"
+    | "LV"
+    | "LY"
+    | "MA"
+    | "MC"
+    | "MD"
+    | "ME"
+    | "MG"
+    | "MH"
+    | "MK"
+    | "ML"
+    | "MM"
+    | "MN"
+    | "MO"
+    | "MP"
+    | "MQ"
+    | "MR"
+    | "MS"
+    | "MT"
+    | "MU"
+    | "MV"
+    | "MW"
+    | "MX"
+    | "MY"
+    | "MZ"
+    | "NA"
+    | "NE"
+    | "NF"
+    | "NG"
+    | "NI"
+    | "NL"
+    | "NO"
+    | "NP"
+    | "NR"
+    | "NU"
+    | "NZ"
+    | "OM"
+    | "PA"
+    | "PE"
+    | "PF"
+    | "PG"
+    | "PH"
+    | "PK"
+    | "PL"
+    | "PM"
+    | "PN"
+    | "PR"
+    | "PT"
+    | "PW"
+    | "PY"
+    | "QA"
+    | "RE"
+    | "RO"
+    | "RS"
+    | "RU"
+    | "RW"
+    | "SA"
+    | "SB"
+    | "SC"
+    | "SD"
+    | "SE"
+    | "SG"
+    | "SH"
+    | "SI"
+    | "SJ"
+    | "SK"
+    | "SL"
+    | "SM"
+    | "SN"
+    | "SO"
+    | "SR"
+    | "SS"
+    | "ST"
+    | "SV"
+    | "SX"
+    | "SY"
+    | "SZ"
+    | "TC"
+    | "TD"
+    | "TF"
+    | "TG"
+    | "TH"
+    | "TJ"
+    | "TK"
+    | "TL"
+    | "TM"
+    | "TN"
+    | "TO"
+    | "TR"
+    | "TT"
+    | "TV"
+    | "TZ"
+    | "UA"
+    | "UG"
+    | "UM"
+    | "US"
+    | "UY"
+    | "UZ"
+    | "VA"
+    | "VC"
+    | "VE"
+    | "VG"
+    | "VI"
+    | "VN"
+    | "VU"
+    | "WF"
+    | "WS"
+    | "YE"
+    | "YT"
+    | "ZA"
+    | "ZM"
+    | "ZW";
+
+export type ExtractColorKeys<T> = T extends { styles: infer C } ? keyof C : never;
+export type ExtractBadgeKeys<T> = keyof T;
+export type BadgeTypeToColorMap<T> = {
+    [K in ExtractBadgeKeys<T>]: ExtractColorKeys<T[K]>;
+};
+export type BadgeTypeColors<T> = ExtractColorKeys<T[keyof T]>;
+
+export const badgeTypes = {
+    pillColor: "pill-color",
+    badgeColor: "color",
+    badgeModern: "modern",
+} as const;
+
+export type BadgeTypes = (typeof badgeTypes)[keyof typeof badgeTypes];