untitledui 0.1.1

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

@@ -0,0 +1,162 @@
+"use client";
+
+import { type PropsWithChildren, type RefAttributes, createContext, useContext } from "react";
+import {
+    Tag as AriaTag,
+    TagGroup as AriaTagGroup,
+    type TagGroupProps as AriaTagGroupProps,
+    TagList as AriaTagList,
+    type TagProps as AriaTagProps,
+} from "react-aria-components";
+import Dot from "@/components/foundations/dot-icon";
+import { cx } from "@/components/utils";
+import Avatar from "../avatar/avatar";
+import TagCheckbox from "./base-components/tag-checkbox";
+import { TagCloseX } from "./base-components/tag-close-x";
+
+export interface TagItem {
+    id: string;
+    label: string;
+    count?: number;
+    avatarSrc?: string;
+    avatarContrastBorder?: boolean;
+    dot?: boolean;
+    dotClassName?: string;
+    isDisabled?: boolean;
+    onClose?: (id: string) => void;
+}
+
+const TagGroupContext = createContext<{
+    selectionMode: "none" | "single" | "multiple";
+    size: "sm" | "md" | "lg";
+}>({
+    selectionMode: "none",
+    size: "sm",
+});
+
+interface TagGroupProps extends AriaTagGroupProps, RefAttributes<HTMLDivElement> {
+    label: string;
+    size?: "sm" | "md" | "lg";
+}
+
+export const TagGroup = ({ label, selectionMode = "none", size = "sm", children, ...otherProps }: TagGroupProps) => {
+    return (
+        <TagGroupContext.Provider value={{ selectionMode, size }}>
+            <AriaTagGroup aria-label={label} selectionMode={selectionMode} disallowEmptySelection={selectionMode === "single"} {...otherProps}>
+                {children}
+            </AriaTagGroup>
+        </TagGroupContext.Provider>
+    );
+};
+
+export const TagList = AriaTagList;
+
+const styles = {
+    sm: {
+        root: {
+            base: "px-2 py-[3px] tt-xs-md",
+            withCheckbox: "pl-[5px]",
+            withAvatar: "pl-1",
+            withDot: "pl-1.5",
+            withCount: "pr-1",
+            withClose: "pr-1",
+        },
+        content: "gap-1",
+        count: "px-1 tt-xs-md",
+    },
+    md: {
+        root: {
+            base: "px-[9px] py-[2px] tt-sm-md",
+            withCheckbox: "pl-1",
+            withAvatar: "pl-[5px]",
+            withDot: "pl-[7px]",
+            withCount: "pr-[3px]",
+            withClose: "pr-1",
+        },
+        content: "gap-[5px]",
+        count: "px-[5px] tt-xs-md",
+    },
+    lg: {
+        root: {
+            base: "px-2.5 py-[4px] tt-sm-md",
+            withCheckbox: "pl-[5px]",
+            withAvatar: "pl-[7px]",
+            withDot: "pl-[9px]",
+            withCount: "pr-1",
+            withClose: "pr-1",
+        },
+        content: "gap-1.5",
+        count: "px-1.5 tt-sm-md",
+    },
+};
+
+interface TagProps extends AriaTagProps, RefAttributes<object>, Omit<TagItem, "label" | "id"> {}
+
+export const Tag = ({
+    id,
+    avatarSrc,
+    avatarContrastBorder,
+    dot,
+    dotClassName,
+    isDisabled,
+    count,
+    className,
+    children,
+    onClose,
+}: PropsWithChildren<TagProps>) => {
+    const context = useContext(TagGroupContext);
+
+    const leadingContent = avatarSrc ? (
+        <Avatar size="xxs" src={avatarSrc} alt="Avatar" contrastBorder={avatarContrastBorder} />
+    ) : dot ? (
+        <Dot className={cx("text-fg-success-secondary", dotClassName)} size="sm" />
+    ) : null;
+
+    return (
+        <AriaTag
+            id={id}
+            isDisabled={isDisabled}
+            className={(state) =>
+                cx(
+                    "flex cursor-default items-center gap-[3px] rounded-md bg-primary text-secondary ring-1 ring-border-primary ring-inset focus:outline-hidden focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
+                    styles[context.size].root.base,
+
+                    // With avatar
+                    avatarSrc && styles[context.size].root.withAvatar,
+                    // With X button
+                    (onClose || state.allowsRemoving) && styles[context.size].root.withClose,
+                    // With dot
+                    dot && styles[context.size].root.withDot,
+                    // With count
+                    typeof count === "number" && styles[context.size].root.withCount,
+                    // With checkbox
+                    context.selectionMode !== "none" && styles[context.size].root.withCheckbox,
+                    // Disabled
+                    isDisabled && "cursor-not-allowed",
+
+                    typeof className === "function" ? className(state) : className,
+                )
+            }
+        >
+            {({ isSelected, isDisabled, allowsRemoving }) => (
+                <>
+                    <div className={cx("flex items-center gap-1", styles[context.size].content)}>
+                        {context.selectionMode !== "none" && <TagCheckbox size={context.size} isSelected={isSelected} isDisabled={isDisabled} />}
+
+                        {leadingContent}
+
+                        {children}
+
+                        {typeof count === "number" && (
+                            <span className={cx("flex items-center justify-center rounded-[3px] bg-tertiary text-center", styles[context.size].count)}>
+                                {count}
+                            </span>
+                        )}
+                    </div>
+
+                    {(onClose || allowsRemoving) && <TagCloseX size={context.size} onPress={() => id && onClose?.(id.toString())} />}
+                </>
+            )}
+        </AriaTag>
+    );
+};

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

@@ -0,0 +1,140 @@
+"use client";
+
+import type { ReactNode } from "react";
+import type { SwitchProps } from "react-aria-components";
+import { Switch } from "react-aria-components";
+import { cx } from "@/components/utils";
+
+interface ToggleBaseProps {
+    size?: "sm" | "md";
+    slim?: boolean;
+    className?: string;
+    isHovered?: boolean;
+    isFocused?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+}
+
+export const ToggleBase = ({ className, isHovered, isDisabled, isFocused, isSelected, slim, size = "sm" }: ToggleBaseProps) => {
+    const styles = {
+        default: {
+            sm: {
+                root: "h-5 w-9 p-0.5",
+                switch: cx("size-4", isSelected && "translate-x-4"),
+            },
+            md: {
+                root: "h-6 w-11 p-0.5",
+                switch: cx("size-5", isSelected && "translate-x-5"),
+            },
+        },
+        slim: {
+            sm: {
+                root: "h-4 w-8",
+                switch: cx("size-4", isSelected && "translate-x-4"),
+            },
+            md: {
+                root: "h-5 w-10",
+                switch: cx("size-5", isSelected && "translate-x-5"),
+            },
+        },
+    };
+
+    const classes = slim ? styles.slim[size] : styles.default[size];
+
+    return (
+        <div
+            className={cx(
+                "cursor-pointer rounded-full bg-tertiary outline-focus-ring transition duration-150 ease-linear",
+                isSelected && "bg-brand-solid",
+                isSelected && isHovered && "bg-brand-solid_hover",
+                isDisabled && "cursor-not-allowed bg-disabled",
+                isFocused && "outline-2 outline-offset-2",
+
+                slim && "ring-1 ring-border-secondary ring-inset",
+                slim && isSelected && "ring-transparent",
+                classes.root,
+                className,
+            )}
+        >
+            <div
+                style={{
+                    transition: "transform 0.15s ease-in-out, translate 0.15s ease-in-out, border-color 0.1s linear, background-color 0.1s linear",
+                }}
+                className={cx(
+                    "rounded-full bg-fg-white shadow-sm",
+                    isDisabled && "bg-toggle-button-fg_disabled",
+
+                    slim && "shadow-xs",
+                    slim && "border border-toggle-border",
+                    slim && isSelected && "border-toggle-slim-border_pressed",
+                    slim && isSelected && isHovered && "border-toggle-slim-border_pressed-hover",
+
+                    classes.switch,
+                )}
+            />
+        </div>
+    );
+};
+
+interface ToggleProps extends SwitchProps {
+    size?: "sm" | "md";
+    label?: string;
+    hint?: ReactNode;
+    slim?: boolean;
+}
+
+export const Toggle = ({ label, hint, className, size = "sm", slim, ...ariaSwitchProps }: ToggleProps) => {
+    const sizes = {
+        sm: {
+            root: "gap-2",
+            textWrapper: "",
+            label: "tt-sm-md",
+            hint: "tt-sm",
+        },
+        md: {
+            root: "gap-3",
+            textWrapper: "gap-0.5",
+            label: "tt-md-md",
+            hint: "tt-md",
+        },
+    };
+
+    return (
+        <Switch
+            {...ariaSwitchProps}
+            className={(renderProps) =>
+                cx(
+                    "flex w-max items-start",
+                    renderProps.isDisabled && "cursor-not-allowed",
+                    sizes[size].root,
+                    typeof className === "function" ? className(renderProps) : className,
+                )
+            }
+        >
+            {({ isSelected, isDisabled, isFocused, isHovered }) => (
+                <>
+                    <ToggleBase
+                        slim={slim}
+                        size={size}
+                        isHovered={isHovered}
+                        isDisabled={isDisabled}
+                        isFocused={isFocused}
+                        isSelected={isSelected}
+                        className={slim ? "mt-0.5" : ""}
+                    />
+
+                    {(label || hint) && (
+                        <div className={cx("flex flex-col", sizes[size].textWrapper)}>
+                            {label && <p className={cx("text-secondary select-none", sizes[size].label)}>{label}</p>}
+                            {hint && (
+                                <span className={cx("text-tertiary", sizes[size].hint)} onClick={(event) => event.stopPropagation()}>
+                                    {hint}
+                                </span>
+                            )}
+                        </div>
+                    )}
+                </>
+            )}
+        </Switch>
+    );
+};

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

@@ -0,0 +1,140 @@
+"use client";
+
+import type { DetailedReactHTMLElement, ReactNode, RefAttributes } from "react";
+import { cloneElement, useRef } from "react";
+import type { Placement } from "@react-types/overlays";
+import type { FocusableElement } from "@react-types/shared";
+import { mergeProps, useFocusable } from "react-aria";
+import { Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger, Button, OverlayArrow } from "react-aria-components";
+import type { TooltipProps as AriaTooltipProps, ButtonProps, TooltipTriggerComponentProps } from "react-aria-components";
+import { cx } from "@/components/utils";
+
+const padding: Partial<Record<Placement, string>> = {
+    "top left": "px-2.5",
+    "top right": "px-2.5",
+    "bottom left": "px-2.5",
+    "bottom right": "px-2.5",
+    left: "-ml-px",
+    "left top": "-ml-px",
+    "left bottom": "-ml-px",
+    start: "-ml-px",
+    "start top": "-ml-px",
+    "start bottom": "-ml-px",
+    right: "-mr-px",
+    "right top": "-mr-px",
+    "right bottom": "-mr-px",
+    end: "-mr-px",
+    "end top": "-mr-px",
+    "end bottom": "-mr-px",
+};
+
+interface TooltipProps extends TooltipTriggerComponentProps, Omit<AriaTooltipProps, "children"> {
+    title: ReactNode;
+    description?: ReactNode;
+    /**
+     * Whether to show the arrow on the tooltip.
+     *
+     * @default false
+     */
+    arrow?: boolean;
+    /**
+     * Delay in milliseconds before the tooltip is shown.
+     *
+     * @default 300
+     */
+    delay?: number;
+}
+
+export const Tooltip = ({
+    title,
+    description,
+    children,
+    arrow = false,
+    delay = 300,
+    closeDelay,
+    trigger,
+    isDisabled,
+    isOpen,
+    defaultOpen,
+    onOpenChange,
+    ...tooltipProps
+}: TooltipProps) => {
+    return (
+        <AriaTooltipTrigger {...{ trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }}>
+            {children}
+
+            <AriaTooltip
+                offset={6}
+                {...tooltipProps}
+                className={({ isEntering, isExiting }) =>
+                    cx(
+                        isEntering &&
+                            "ease-out animate-in fade-in zoom-in-95 placement-top:origin-bottom placement-top:slide-in-from-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-in-from-top-0.5",
+                        isExiting &&
+                            "ease-in animate-out fade-out zoom-out-95 placement-top:origin-bottom placement-top:slide-out-to-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-out-to-top-0.5",
+                    )
+                }
+            >
+                {arrow && (
+                    <OverlayArrow className={cx(tooltipProps.placement && padding[tooltipProps.placement as keyof typeof padding], "group")}>
+                        <svg
+                            width={8}
+                            height={8}
+                            viewBox="0 0 8 8"
+                            className="fill-bg-primary-solid group-data-[placement=bottom]:rotate-180 group-data-[placement=left]:-rotate-90 group-data-[placement=right]:rotate-90 group-data-[placement=top]:rotate-0"
+                        >
+                            <path d="M0 0 L4 4 L8 0" />
+                        </svg>
+                    </OverlayArrow>
+                )}
+                <div className={cx("z-50 flex max-w-xs flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg", description ? "py-3" : "py-2")}>
+                    <span className="tt-xs-semi text-white">{title}</span>
+
+                    {description && <span className="tt-xs-md text-tooltip-supporting-text">{description}</span>}
+                </div>
+            </AriaTooltip>
+        </AriaTooltipTrigger>
+    );
+};
+
+type TooltipTriggerProps =
+    | (ButtonProps &
+          RefAttributes<HTMLButtonElement> & {
+              /**
+               * If true, the tooltip trigger props will be passed down to the child element
+               * instead of wrapping the child element in a button.
+               */
+              asChild?: never;
+          })
+    | {
+          /**
+           * If true, the tooltip trigger props will be passed down to the child element
+           * instead of wrapping the child element in a button.
+           */
+          asChild: true;
+          isDisabled?: boolean;
+          children: Omit<DetailedReactHTMLElement<any, any>, "ref">;
+      };
+
+export const TooltipTrigger = (props: TooltipTriggerProps) => {
+    if (props.asChild) {
+        const triggerRef = useRef<FocusableElement>(null);
+
+        const { focusableProps } = useFocusable(
+            {
+                isDisabled: props.isDisabled,
+            },
+            triggerRef,
+        );
+
+        return cloneElement(props.children, mergeProps(focusableProps, props.children.props, { ref: triggerRef }));
+    }
+
+    const { asChild: _, className, ...buttonProps } = props;
+
+    return (
+        <Button {...buttonProps} className={(values) => cx("h-max w-max outline-hidden", typeof className === "function" ? className(values) : className)}>
+            {props.children}
+        </Button>
+    );
+};

package/templates/default/src/components/utils/index.ts

@@ -0,0 +1,48 @@
+import { extendTailwindMerge } from "tailwind-merge";
+
+const twMerge = extendTailwindMerge<"spacing">({
+    extend: {
+        classGroups: {
+            "font-size": [
+                "tt-xs",
+                "tt-sm",
+                "tt-md",
+                "tt-lg",
+                "tt-xl",
+                "td-xs",
+                "td-sm",
+                "td-md",
+                "td-lg",
+                "td-xl",
+
+                "tt-xs-md",
+                "tt-sm-md",
+                "tt-md-md",
+                "tt-lg-md",
+                "tt-xl-md",
+                "td-xs-md",
+                "td-sm-md",
+                "td-md-md",
+                "td-lg-md",
+                "td-xl-md",
+
+                "tt-xs-semi",
+                "tt-sm-semi",
+                "tt-md-semi",
+                "tt-lg-semi",
+                "tt-xl-semi",
+                "td-xs-semi",
+                "td-sm-semi",
+                "td-md-semi",
+                "td-lg-semi",
+                "td-xl-semi",
+            ],
+        },
+    },
+});
+
+export const cx = twMerge;
+
+export function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {
+    return classes;
+}

package/templates/default/src/components/utils/isDeepEqual.ts

@@ -0,0 +1,31 @@
+/**
+ * Compares two values to determine if they are deeply equal.
+ *
+ * @param obj1 - The first value to compare.
+ * @param obj2 - The second value to compare.
+ *
+ * @returns True if the values are deeply equal, otherwise false.
+ */
+export const isDeepEqual = (obj1: any, obj2: any): boolean => {
+    // Check if both are the same reference
+    if (obj1 === obj2) return true;
+
+    // Check if both are objects and not null
+    if (typeof obj1 !== "object" || obj1 === null || typeof obj2 !== "object" || obj2 === null) {
+        return false;
+    }
+
+    // Check if they have the same number of keys
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) return false;
+
+    // Recursively check each key
+    for (const key of keys1) {
+        if (!keys2.includes(key) || !isDeepEqual(obj1[key], obj2[key])) {
+            return false;
+        }
+    }
+
+    return true;
+};

package/templates/default/src/components/utils/isReactComponent.ts

@@ -0,0 +1,22 @@
+import type React from "react";
+
+type ReactComponent = React.FC<any> | React.ComponentClass<any, any>;
+
+export const isFunctionComponent = (component: any): component is React.FC<any> => {
+    return typeof component === "function";
+};
+
+export const isClassComponent = (component: any): component is React.ComponentClass<any, any> => {
+    return typeof component === "function" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);
+};
+
+export const isForwardRefComponent = (component: any): component is React.ForwardRefExoticComponent<any> => {
+    return typeof component === "object" && component !== null && component.$$typeof.toString() === "Symbol(react.forward_ref)";
+};
+
+/**
+ * Checks if a given value is a valid React component.
+ */
+export const isReactComponent = (component: any): component is ReactComponent => {
+    return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
+};

package/templates/default/src/components/utils/mergeRefs.ts

@@ -0,0 +1,19 @@
+/**
+ * Merges multiple React refs into a single ref callback.
+ *
+ * @param refs - An array of refs which can be mutable ref objects, legacy refs, or undefined/null.
+ * @returns A ref callback function that assigns the given value to all provided refs.
+ *
+ * @typeParam T - The type of the ref value.
+ */
+export function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null>): React.RefCallback<T> {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (typeof ref === "function") {
+                ref(value);
+            } else if (ref != null) {
+                (ref as React.MutableRefObject<T | null>).current = value;
+            }
+        });
+    };
+}

package/templates/default/src/components/utils/useBreakpoint.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+
+const screens = {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px",
+};
+
+/**
+ * Checks whether a particular Tailwind viewport size applies.
+ *
+ * @param size The size to check, which must either be included in Tailwind's
+ * list of default screen sizes, or added to the Tailwind config file.
+ *
+ * @returns A boolean indicating whether the viewport size applies.
+ */
+const useBreakpoint = (size: "sm" | "md" | "lg" | "xl" | "2xl") => {
+    const [matches, setMatches] = useState(typeof window !== "undefined" ? window.matchMedia(`(min-width: ${screens[size]})`).matches : true);
+
+    useEffect(() => {
+        const breakpoint = window.matchMedia(`(min-width: ${screens[size]})`);
+
+        setMatches(breakpoint.matches);
+
+        const handleChange = (value: MediaQueryListEvent) => setMatches(value.matches);
+
+        breakpoint.addEventListener("change", handleChange);
+        return () => breakpoint.removeEventListener("change", handleChange);
+    }, []);
+
+    return matches;
+};
+
+export default useBreakpoint;

package/templates/default/src/components/utils/uuid.ts

@@ -0,0 +1,9 @@
+/**
+ * Generates a short UUID string consisting of 4 hexadecimal characters.
+ */
+export const getShortUUID = () => {
+    return "xxxx".replace(/[x]/g, (c) => {
+        const r = (Math.random() * 16) | 0;
+        return r.toString(16);
+    });
+};

package/templates/default/src/hooks/use-resize-observer.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { useEffect } from "react";
+import type { RefObject } from "@react-types/shared";
+
+function hasResizeObserver() {
+    return typeof window.ResizeObserver !== "undefined";
+}
+
+type useResizeObserverOptionsType<T> = {
+    ref: RefObject<T | undefined | null> | undefined;
+    box?: ResizeObserverBoxOptions;
+    onResize: () => void;
+};
+
+export function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>) {
+    const { ref, box, onResize } = options;
+
+    useEffect(() => {
+        let element = ref?.current;
+        if (!element) {
+            return;
+        }
+
+        if (!hasResizeObserver()) {
+            window.addEventListener("resize", onResize, false);
+            return () => {
+                window.removeEventListener("resize", onResize, false);
+            };
+        } else {
+            const resizeObserverInstance = new window.ResizeObserver((entries) => {
+                if (!entries.length) {
+                    return;
+                }
+
+                onResize();
+            });
+            resizeObserverInstance.observe(element, { box });
+            return () => {
+                if (element) {
+                    resizeObserverInstance.unobserve(element);
+                }
+            };
+        }
+    }, [onResize, ref, box]);
+}

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

@@ -0,0 +1,11 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+
+export function Theme({ children }: { children: React.ReactNode }) {
+    return (
+        <ThemeProvider attribute="data-theme" enableColorScheme enableSystem>
+            {children}
+        </ThemeProvider>
+    );
+}