untitledui 0.1.1

package/templates/default/src/components/marketing/header-navigation/components/header.tsx

@@ -0,0 +1,245 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { ChevronDown } from "@untitledui/icons";
+import { Button as AriaButton, Dialog, DialogTrigger, Popover } from "react-aria-components";
+import UntitledLogo from "@/components/foundations/logo/UntitledLogo";
+import UntitledLogoMinimal from "@/components/foundations/logo/UntitledLogoMinimal";
+import Button from "@/components/shared/buttons/button";
+import { cx } from "@/components/utils";
+import { DropdownMenuSimple } from "../dropdown-header-navigation";
+
+type HeaderNavItem = {
+    label: string;
+    href?: string;
+    menu?: ReactNode;
+};
+
+const headerNavItems: HeaderNavItem[] = [
+    { label: "Products", href: "/products", menu: <DropdownMenuSimple /> },
+    { label: "Services", href: "/Services", menu: <DropdownMenuSimple /> },
+    { label: "Pricing", href: "/pricing" },
+    { label: "Resources", href: "/resources", menu: <DropdownMenuSimple /> },
+    { label: "About", href: "/about" },
+];
+
+const footerNavItems = [
+    { label: "About us", href: "/" },
+    { label: "Press", href: "/products" },
+    { label: "Careers", href: "/resources" },
+    { label: "Legal", href: "/pricing" },
+    { label: "Support", href: "/pricing" },
+    { label: "Contact", href: "/pricing" },
+    { label: "Sitemap", href: "/pricing" },
+    { label: "Cookie settings", href: "/pricing" },
+];
+
+const MobileNavItem = (props: { className?: string; label: string; href?: string; children?: ReactNode }) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    if (props.href) {
+        return (
+            <li>
+                <a href={props.href} className="flex items-center justify-between px-4 py-3 tt-md-semi text-primary hover:bg-primary_hover">
+                    {props.label}
+                </a>
+            </li>
+        );
+    }
+
+    return (
+        <li className="flex flex-col gap-0.5">
+            <button
+                aria-expanded={isOpen}
+                onClick={() => setIsOpen(!isOpen)}
+                className="flex w-full items-center justify-between px-4 py-3 tt-md-semi text-primary hover:bg-primary_hover"
+            >
+                {props.label} <ChevronDown className={cx(isOpen ? "-rotate-180" : "rotate-0", "size-5 text-quaternary transition duration-200 ease-out")} />
+            </button>
+            {isOpen && <div>{props.children}</div>}
+        </li>
+    );
+};
+
+const MobileFooter = () => {
+    return (
+        <div className="flex flex-col gap-8 border-t border-secondary px-4 py-6">
+            <div>
+                <ul className="grid grid-flow-col grid-cols-2 grid-rows-4 gap-x-6 gap-y-3">
+                    {footerNavItems.map((navItem) => (
+                        <li key={navItem.label}>
+                            <Button color="link-gray" size="lg" href={navItem.href}>
+                                {navItem.label}
+                            </Button>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+            <div className="flex flex-col gap-3">
+                <Button href="/sign-up" size="lg">
+                    Sign up
+                </Button>
+                <Button href="/login" color="secondary" size="lg">
+                    Log in
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+interface HeaderProps {
+    items?: HeaderNavItem[];
+    isFullWidth?: boolean;
+    isFloating?: boolean;
+    className?: string;
+    // Used only for easily testing menus in Storybook.
+    autoOpenMenu?: boolean;
+}
+
+export const Header = ({ items = headerNavItems, isFullWidth, isFloating, className, autoOpenMenu }: HeaderProps) => {
+    const headerRef = useRef<HTMLElement>(null);
+
+    return (
+        <header
+            ref={headerRef}
+            className={cx(
+                "relative flex h-[72px] w-full items-center justify-center md:h-20",
+                isFloating && "h-16 md:h-[76px] md:pt-3",
+                isFullWidth && !isFloating ? "has-aria-expanded:bg-primary" : "max-md:has-aria-expanded:bg-primary",
+                className,
+            )}
+        >
+            <div className="flex size-full max-w-container flex-1 items-center pr-3 pl-4 md:px-8">
+                <div
+                    className={cx(
+                        "flex w-full justify-between",
+                        isFloating && "ring-border-secondary ring-inset md:rounded-2xl md:bg-primary md:py-3 md:pr-3 md:pl-4 md:shadow-xs md:ring-1",
+                    )}
+                >
+                    <div className="flex flex-1 items-center gap-8">
+                        <UntitledLogo className="md:hidden lg:inline-block" />
+                        <UntitledLogoMinimal className="hidden md:inline-block lg:hidden" />
+
+                        {/* Desktop navigation */}
+                        <nav className="hidden md:block">
+                            <ul className="flex items-center gap-5">
+                                {items.map((navItem) => (
+                                    <li key={navItem.label}>
+                                        {navItem.menu ? (
+                                            <DialogTrigger defaultOpen={autoOpenMenu && navItem.label === "Resources"}>
+                                                <Button
+                                                    size="lg"
+                                                    color="link-gray"
+                                                    className="group gap-1"
+                                                    iconTrailing={
+                                                        <ChevronDown className="size-5 rotate-0 transition duration-200 ease-out group-aria-expanded:-rotate-180" />
+                                                    }
+                                                >
+                                                    {navItem.label}
+                                                </Button>
+                                                <Popover
+                                                    className={({ isEntering, isExiting }) =>
+                                                        cx(
+                                                            "hidden will-change-transform md:block",
+                                                            isFullWidth && "w-full",
+                                                            isEntering && "duration-300 ease-out animate-in fade-in slide-in-from-top-2",
+                                                            isExiting && "duration-200 ease-in animate-out fade-out slide-out-to-top-2",
+                                                        )
+                                                    }
+                                                    offset={isFloating || isFullWidth ? 0 : 12}
+                                                    containerPadding={0}
+                                                    triggerRef={(isFloating && isFullWidth) || isFullWidth ? headerRef : undefined}
+                                                >
+                                                    <Dialog className={cx("mx-auto outline-hidden", isFloating && "max-w-7xl px-8 pt-3")}>
+                                                        {navItem.menu}
+                                                    </Dialog>
+                                                </Popover>
+                                            </DialogTrigger>
+                                        ) : (
+                                            <Button
+                                                href={navItem.href}
+                                                size="lg"
+                                                color="link-gray"
+                                                className="rounded-md outline-focus-ring focus:outline-2 focus:outline-offset-2"
+                                            >
+                                                {navItem.label}
+                                            </Button>
+                                        )}
+                                    </li>
+                                ))}
+                            </ul>
+                        </nav>
+                    </div>
+
+                    <div className="hidden items-center gap-3 md:flex">
+                        <Button href="/login" color="secondary" size={isFloating ? "md" : "lg"}>
+                            Log in
+                        </Button>
+                        <Button href="/sign-up" color="primary" size={isFloating ? "md" : "lg"}>
+                            Sign up
+                        </Button>
+                    </div>
+
+                    {/* Mobile Menu and Menu Trigger */}
+                    <DialogTrigger>
+                        <AriaButton
+                            className={({ isFocused, isHovered }) =>
+                                cx(
+                                    "group ml-auto rounded-lg p-2 md:hidden",
+                                    isHovered && "bg-primary_hover",
+                                    isFocused && "outline-2 outline-offset-2 outline-focus-ring",
+                                )
+                            }
+                        >
+                            <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                                <path
+                                    className="hidden text-secondary group-aria-expanded:block"
+                                    d="M18 6L6 18M6 6L18 18"
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                />
+                                <path
+                                    className="text-secondary group-aria-expanded:hidden"
+                                    d="M3 12H21M3 6H21M3 18H21"
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                />
+                            </svg>
+                        </AriaButton>
+                        <Popover
+                            triggerRef={headerRef}
+                            className="h-calc(100%-72px) scrollbar-hide w-full overflow-y-auto shadow-lg md:hidden"
+                            offset={0}
+                            crossOffset={20}
+                            containerPadding={0}
+                            placement="bottom left"
+                        >
+                            <Dialog className="outline-hidden">
+                                <nav className="w-full bg-primary shadow-lg">
+                                    <ul className="flex flex-col gap-0.5 py-5">
+                                        {items.map((navItem) =>
+                                            navItem.menu ? (
+                                                <MobileNavItem key={navItem.label} label={navItem.label}>
+                                                    {navItem.menu}
+                                                </MobileNavItem>
+                                            ) : (
+                                                <MobileNavItem key={navItem.label} label={navItem.label} href={navItem.href} />
+                                            ),
+                                        )}
+                                    </ul>
+
+                                    <MobileFooter />
+                                </nav>
+                            </Dialog>
+                        </Popover>
+                    </DialogTrigger>
+                </div>
+            </div>
+        </header>
+    );
+};

package/templates/default/src/components/marketing/header-navigation/dropdown-header-navigation.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { BookClosed, FileCode01, LifeBuoy01, PlayCircle, Stars02 } from "@untitledui/icons";
+import { NavMenuItemLink } from "./base-components/nav-menu-item";
+
+export const DropdownMenuSimple = () => {
+    const items = [
+        {
+            title: "Blog",
+            subtitle: "The latest industry new and guides curated by our expert team.",
+            href: "/blog",
+            Icon: BookClosed,
+        },
+        {
+            title: "Customer stories",
+            subtitle: "Learn how our customers are using Untitled UI to 10x their growth.",
+            href: "/customer-stories",
+            Icon: Stars02,
+        },
+        {
+            title: "Video tutorials",
+            subtitle: "Get up and running on our newest features and in-depth guides.",
+            href: "/tutorials",
+            Icon: PlayCircle,
+        },
+        {
+            title: "Documentation",
+            subtitle: "In-depth articles on our tools and technologies to empower teams.",
+            href: "/docs",
+            Icon: FileCode01,
+        },
+        {
+            title: "Help and support",
+            subtitle: "Need help with something? Our expert team is here to help 24/7.",
+            href: "/help",
+            Icon: LifeBuoy01,
+        },
+    ];
+
+    return (
+        <div className="px-3 pb-2 md:max-w-[336px] md:p-0">
+            <nav className="overflow-hidden rounded-2xl bg-primary py-2 shadow-xs ring-1 ring-border-secondary md:p-2 md:shadow-lg">
+                <ul className="flex flex-col gap-0.5">
+                    {items.map(({ title, subtitle, href, Icon }) => (
+                        <li>
+                            <NavMenuItemLink icon={Icon} title={title} subtitle={subtitle} href={href} />
+                        </li>
+                    ))}
+                </ul>
+            </nav>
+        </div>
+    );
+};

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

@@ -0,0 +1,32 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { cx } from "@/components/utils";
+import Avatar, { type AvatarProps } from "./avatar";
+
+const styles = {
+    sm: { root: "gap-2", title: "tt-sm-semi", subtitle: "tt-xs" },
+    md: { root: "gap-2", title: "tt-sm-semi", subtitle: "tt-sm" },
+    lg: { root: "gap-3", title: "tt-md-semi", subtitle: "tt-md" },
+    xl: { root: "gap-4", title: "tt-lg-semi", subtitle: "tt-md" },
+};
+
+interface AvatarLabelGroupProps extends AvatarProps {
+    size: "sm" | "md" | "lg" | "xl";
+    title: string | ReactNode;
+    subtitle: string | ReactNode;
+}
+
+const AvatarLabelGroup = ({ title, subtitle, className, ...props }: AvatarLabelGroupProps) => {
+    return (
+        <div className={cx("group flex min-w-0 flex-1 items-center", styles[props.size].root, className)}>
+            <Avatar {...props} />
+            <div className="min-w-0 flex-1">
+                <p className={cx("text-primary", styles[props.size].title)}>{title}</p>
+                <p className={cx("truncate text-tertiary", styles[props.size].subtitle)}>{subtitle}</p>
+            </div>
+        </div>
+    );
+};
+
+export default AvatarLabelGroup;

package/templates/default/src/components/shared/avatar/avatar-profile-photo.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useState } from "react";
+import { User01 } from "@untitledui/icons";
+import { cx } from "@/components/utils";
+import { type AvatarProps } from "./avatar";
+import { AvatarOnlineIndicator, VerifiedTick } from "./base-components";
+
+const styles = {
+    sm: { root: "size-18", icon: "size-9", initials: "td-sm-semi", ring: "ring-3 shadow-md", status: "bottom-0.5 right-0.5", tick: "bottom-0 right-0" },
+    md: { root: "size-24", icon: "size-12", initials: "td-md-semi", ring: "ring-4 shadow-lg", status: "bottom-1 right-1", tick: "bottom-0.5 right-0.5" },
+    lg: { root: "size-40", icon: "size-20", initials: "td-xl-semi", ring: "ring-4 shadow-lg", status: "bottom-3 right-3", tick: "bottom-1 right-1" },
+};
+
+const tickSizeMap = {
+    sm: "2xl",
+    md: "3xl",
+    lg: "4xl",
+} as const;
+
+interface AvatarProfilePhotoProps extends AvatarProps {
+    size: "sm" | "md" | "lg";
+}
+
+const AvatarProfilePhoto = ({
+    contrastBorder = true,
+    size = "md",
+    src,
+    alt,
+    initials,
+    placeholder,
+    placeholderIcon: PlaceholderIcon,
+    verified,
+    badge,
+    status,
+    className,
+}: AvatarProfilePhotoProps) => {
+    const [isFailed, setIsFailed] = useState(false);
+
+    const renderMainContent = () => {
+        if (src && !isFailed) {
+            return <img className="size-full rounded-full object-cover" src={src} alt={alt} onError={() => setIsFailed(true)} />;
+        }
+
+        if (initials) {
+            return <span className={cx("text-tertiary", styles[size].initials)}>{initials}</span>;
+        }
+
+        if (PlaceholderIcon) {
+            return <PlaceholderIcon className={cx("text-utility-gray-500", styles[size].icon)} />;
+        }
+
+        return placeholder || <User01 className={cx("text-utility-gray-500", styles[size].icon)} />;
+    };
+
+    const renderBadgeContent = () => {
+        if (status) {
+            return <AvatarOnlineIndicator status={status} size={tickSizeMap[size]} className={styles[size].status} />;
+        }
+
+        if (verified) {
+            return <VerifiedTick size={tickSizeMap[size]} className={cx("absolute", styles[size].tick)} />;
+        }
+
+        return badge;
+    };
+
+    return (
+        <div
+            className={cx(
+                "relative inline-flex shrink-0 items-center justify-center rounded-full bg-avatar-bg",
+                contrastBorder && "outline-1 -outline-offset-1 outline-avatar-contrast-border",
+                styles[size].root,
+                className,
+            )}
+        >
+            {renderMainContent()}
+            {renderBadgeContent()}
+            <div className={cx("absolute inset-0 rounded-full ring-avatar-profile-photo-border", styles[size].ring)}></div>
+        </div>
+    );
+};
+
+export default AvatarProfilePhoto;

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

@@ -0,0 +1,131 @@
+"use client";
+
+import { type FC, type ReactNode, useState } from "react";
+import { User01 } from "@untitledui/icons";
+import { cx } from "@/components/utils";
+import { AvatarOnlineIndicator, VerifiedTick } from "./base-components";
+
+type AvatarSize = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+
+export interface AvatarProps {
+    size?: AvatarSize;
+    className?: string;
+    src?: string | null;
+    alt?: string;
+    /**
+     * Display a contrast border around the avatar.
+     */
+    contrastBorder?: boolean;
+    /**
+     * Display a badge (i.e. company logo).
+     */
+    badge?: ReactNode;
+    /**
+     * Display a status indicator.
+     */
+    status?: "online" | "offline";
+    /**
+     * Display a verified tick icon.
+     *
+     * @default false
+     */
+    verified?: boolean;
+
+    /**
+     * The initials of the user to display if no image is available.
+     */
+    initials?: string;
+    /**
+     * An icon to display if no image is available.
+     */
+    placeholderIcon?: FC<{ className?: string }>;
+    /**
+     * A placeholder to display if no image is available.
+     */
+    placeholder?: ReactNode;
+
+    /**
+     * Whether the avatar should show a focus ring when the parent group is in focus.
+     * For example, when the avatar is wrapped inside a link.
+     *
+     * @default false
+     */
+    focusable?: boolean;
+}
+
+const styles = {
+    xxs: { root: "size-4 outline-[0.5px] -outline-offset-[0.5px]", initials: "tt-xs-semi", icon: "size-3" },
+    xs: { root: "size-6 outline-[0.5px] -outline-offset-[0.5px]", initials: "tt-xs-semi", icon: "size-4" },
+    sm: { root: "size-8 outline-[0.5px] -outline-offset-[0.5px]", initials: "tt-sm-semi", icon: "size-5" },
+    md: { root: "size-10 outline-[0.75px] -outline-offset-[0.75px]", initials: "tt-md-semi", icon: "size-6" },
+    lg: { root: "size-12 outline-[0.75px] -outline-offset-[0.75px]", initials: "tt-lg-semi", icon: "size-7" },
+    xl: { root: "size-14 outline-[0.75px] -outline-offset-[0.75px]", initials: "tt-xl-semi", icon: "size-8" },
+    "2xl": { root: "size-16 outline-[0.75px] -outline-offset-[0.75px]", initials: "td-xs-semi", icon: "size-8" },
+};
+
+const Avatar = ({
+    contrastBorder = true,
+    size = "md",
+    src,
+    alt,
+    initials,
+    placeholder,
+    placeholderIcon: PlaceholderIcon,
+    badge,
+    status,
+    verified,
+    focusable = false,
+    className,
+}: AvatarProps) => {
+    const [isFailed, setIsFailed] = useState(false);
+
+    const renderMainContent = () => {
+        if (src && !isFailed) {
+            return <img className="size-full rounded-full object-cover" src={src} alt={alt} onError={() => setIsFailed(true)} />;
+        }
+
+        if (initials) {
+            return <span className={cx("text-tertiary", styles[size].initials)}>{initials}</span>;
+        }
+
+        if (PlaceholderIcon) {
+            return <PlaceholderIcon className={cx("text-utility-gray-500", styles[size].icon)} />;
+        }
+
+        return placeholder || <User01 className={cx("text-utility-gray-500", styles[size].icon)} />;
+    };
+    const renderBadgeContent = () => {
+        if (status) {
+            return <AvatarOnlineIndicator status={status} size={size === "xxs" ? "xs" : size} />;
+        }
+
+        if (verified) {
+            return (
+                <VerifiedTick
+                    size={size === "xxs" ? "xs" : size}
+                    className={cx("absolute right-0 bottom-0", (size === "xxs" || size === "xs") && "-right-px -bottom-px")}
+                />
+            );
+        }
+
+        return badge;
+    };
+
+    return (
+        <div
+            className={cx(
+                "relative inline-flex shrink-0 items-center justify-center rounded-full bg-avatar-bg outline-transparent",
+                // Focus styles
+                focusable && "group-outline-focus-ring group-focus:outline-2 group-focus:outline-offset-2",
+                contrastBorder && "outline outline-avatar-contrast-border",
+                styles[size].root,
+                className,
+            )}
+        >
+            {renderMainContent()}
+            {renderBadgeContent()}
+        </div>
+    );
+};
+
+export default Avatar;

package/templates/default/src/components/shared/avatar/base-components/avatar-add-button.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { Plus } from "@untitledui/icons";
+import type { ButtonProps } from "react-aria-components";
+import { cx } from "@/components/utils";
+import { Tooltip, TooltipTrigger } from "../../tooltips/tooltips";
+
+const sizes = {
+    xs: "size-6",
+    sm: "size-8",
+    md: "size-10",
+};
+
+interface AvatarAddButtonProps extends ButtonProps {
+    size: "xs" | "sm" | "md";
+    title?: string;
+    className?: string;
+}
+
+export const AvatarAddButton = ({ size, className, title = "Add user", ...props }: AvatarAddButtonProps) => (
+    <Tooltip title={title}>
+        <TooltipTrigger
+            {...props}
+            className={cx(
+                "flex cursor-pointer items-center justify-center rounded-full border border-dashed border-primary bg-primary 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:border-gray-200 disabled:bg-secondary disabled:text-gray-200",
+                sizes[size],
+                className,
+            )}
+        >
+            <Plus className="size-4 text-current transition-inherit-all" />
+        </TooltipTrigger>
+    </Tooltip>
+);

package/templates/default/src/components/shared/avatar/base-components/avatar-company-icon.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { cx } from "@/components/utils";
+
+const sizes = {
+    xs: "size-2",
+    sm: "size-3",
+    md: "size-3.5",
+    lg: "size-4",
+    xl: "size-4.5",
+    "2xl": "size-5 ring-[1.67px]",
+};
+
+interface AvatarCompanyIconProps {
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    src: string;
+    alt?: string;
+}
+
+export const AvatarCompanyIcon = ({ size, src, alt }: AvatarCompanyIconProps) => (
+    <img
+        src={src}
+        alt={alt}
+        className={cx("bg-primary-25 absolute -right-0.5 -bottom-0.5 rounded-full object-cover ring-[1.5px] ring-bg-primary", sizes[size])}
+    />
+);

package/templates/default/src/components/shared/avatar/base-components/avatar-online-indicator.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { cx } from "@/components/utils";
+
+const sizes = {
+    xs: "size-1.5",
+    sm: "size-2",
+    md: "size-2.5",
+    lg: "size-3",
+    xl: "size-3.5",
+    "2xl": "size-4",
+    "3xl": "size-4.5",
+    "4xl": "size-5",
+};
+
+interface AvatarOnlineIndicatorProps {
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    status: "online" | "offline";
+    className?: string;
+}
+
+export const AvatarOnlineIndicator = ({ size, status, className }: AvatarOnlineIndicatorProps) => (
+    <span
+        className={cx(
+            "absolute right-0 bottom-0 z-10 rounded-full ring-[1.5px] ring-bg-primary",
+            status === "online" ? "bg-fg-success-secondary" : "bg-fg-disabled_subtle",
+            sizes[size],
+            className,
+        )}
+    />
+);

package/templates/default/src/components/shared/avatar/base-components/index.ts

@@ -0,0 +1,4 @@
+export * from "./avatar-add-button";
+export * from "./avatar-company-icon";
+export * from "./avatar-online-indicator";
+export * from "./verified-tick";