@trackany-device/components 1.0.0

package/src/components/ui/accordion-menu.tsx

@@ -0,0 +1,322 @@
+'use client';
+
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+interface AccordionMenuContextValue {
+    matchPath: (href: string) => boolean;
+    selectedValue: string | undefined;
+    setSelectedValue: React.Dispatch<React.SetStateAction<string | undefined>>;
+    classNames?: AccordionMenuClassNames;
+    nestedStates: Record<string, string | string[]>;
+    setNestedStates: React.Dispatch<React.SetStateAction<Record<string, string | string[]>>>;
+    onItemClick?: (value: string, event: React.MouseEvent) => void;
+}
+
+export interface AccordionMenuClassNames {
+    root?: string;
+    group?: string;
+    label?: string;
+    separator?: string;
+    item?: string;
+    sub?: string;
+    subTrigger?: string;
+    subContent?: string;
+    subWrapper?: string;
+    indicator?: string;
+}
+
+interface AccordionMenuProps {
+    selectedValue?: string;
+    matchPath?: (href: string) => boolean;
+    classNames?: AccordionMenuClassNames;
+    onItemClick?: (value: string, event: React.MouseEvent) => void;
+}
+
+const AccordionMenuContext = React.createContext<AccordionMenuContextValue>({
+    matchPath: () => false,
+    selectedValue: '',
+    setSelectedValue: () => {},
+    nestedStates: {},
+    setNestedStates: () => {},
+});
+
+function AccordionMenu({
+    className,
+    matchPath = () => false,
+    classNames,
+    children,
+    selectedValue,
+    onItemClick,
+    ...props
+}: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & AccordionMenuProps) {
+    const [internalSelectedValue, setInternalSelectedValue] = React.useState<string | undefined>(selectedValue);
+
+    React.useEffect(() => {
+        setInternalSelectedValue(selectedValue);
+    }, [selectedValue]);
+
+    const initialNestedStates = React.useMemo(() => {
+        const getActiveChain = (nodes: React.ReactNode, chain: string[] = []): string[] => {
+            let result: string[] = [];
+            React.Children.forEach(nodes, (node) => {
+                if (React.isValidElement(node)) {
+                    const { value, children: nodeChildren } = node.props as {
+                        value?: string;
+                        children?: React.ReactNode;
+                    };
+                    const newChain = value ? [...chain, value] : chain;
+                    if (value && (value === selectedValue || matchPath(value))) {
+                        result = newChain;
+                    } else if (nodeChildren) {
+                        const childChain = getActiveChain(nodeChildren, newChain);
+                        if (childChain.length > 0) result = childChain;
+                    }
+                }
+            });
+            return result;
+        };
+
+        const chain = getActiveChain(children);
+        const trimmedChain = chain.length > 1 ? chain.slice(0, chain.length - 1) : chain;
+        const mapping: Record<string, string | string[]> = {};
+        if (trimmedChain.length > 0) {
+            if (props.type === 'multiple') {
+                mapping['root'] = trimmedChain;
+            } else {
+                mapping['root'] = trimmedChain[0];
+                for (let i = 0; i < trimmedChain.length - 1; i++) {
+                    mapping[trimmedChain[i]] = trimmedChain[i + 1];
+                }
+            }
+        }
+        return mapping;
+    }, [children, matchPath, selectedValue, props.type]);
+
+    const [nestedStates, setNestedStates] = React.useState<Record<string, string | string[]>>(initialNestedStates);
+    const multipleValue = (
+        Array.isArray(nestedStates['root'])
+            ? nestedStates['root']
+            : typeof nestedStates['root'] === 'string'
+              ? [nestedStates['root']]
+              : []
+    ) as string[];
+    const singleValue = (nestedStates['root'] ?? '') as string;
+
+    return (
+        <AccordionMenuContext.Provider
+            value={{ matchPath, selectedValue: internalSelectedValue, setSelectedValue: setInternalSelectedValue, classNames, onItemClick, nestedStates, setNestedStates }}
+        >
+            {props.type === 'single' ? (
+                <AccordionPrimitive.Root
+                    data-slot="accordion-menu"
+                    value={singleValue}
+                    className={cn('w-full', classNames?.root, className)}
+                    onValueChange={(value: string) => setNestedStates((prev) => ({ ...prev, root: value }))}
+                    {...props}
+                    role="menu"
+                >
+                    {children}
+                </AccordionPrimitive.Root>
+            ) : (
+                <AccordionPrimitive.Root
+                    data-slot="accordion-menu"
+                    value={multipleValue}
+                    className={cn('w-full', classNames?.root, className)}
+                    onValueChange={(value: string[]) => setNestedStates((prev) => ({ ...prev, root: value }))}
+                    {...(props as React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & { type: 'multiple' })}
+                    role="menu"
+                >
+                    {children}
+                </AccordionPrimitive.Root>
+            )}
+        </AccordionMenuContext.Provider>
+    );
+}
+
+function AccordionMenuGroup({ children, className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+    const { classNames } = React.useContext(AccordionMenuContext);
+    return (
+        <div data-slot="accordion-menu-group" role="group" className={cn('space-y-0.5', classNames?.group, className)} {...props}>
+            {children}
+        </div>
+    );
+}
+
+function AccordionMenuLabel({ children, className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+    const { classNames } = React.useContext(AccordionMenuContext);
+    return (
+        <div data-slot="accordion-menu-label" role="presentation" className={cn('px-2 py-1.5 text-xs font-medium text-muted-foreground', classNames?.label, className)} {...props}>
+            {children}
+        </div>
+    );
+}
+
+function AccordionMenuSeparator({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+    const { classNames } = React.useContext(AccordionMenuContext);
+    return (
+        <div data-slot="accordion-menu-separator" role="separator" className={cn('my-1 h-px bg-border', classNames?.separator, className)} {...props} />
+    );
+}
+
+const itemVariants = cva(
+    'relative cursor-pointer select-none flex w-full text-start items-center text-foreground rounded-lg gap-2 px-2 py-1.5 text-sm outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground disabled:opacity-50 disabled:bg-transparent focus-visible:bg-accent focus-visible:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:opacity-60 [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0 [&_a]:flex [&>a]:w-full [&>a]:items-center [&>a]:gap-2',
+    {
+        variants: {
+            variant: {
+                default: '',
+                destructive: 'text-destructive hover:text-destructive focus:text-destructive hover:bg-destructive/5 focus:bg-destructive/5 data-[active=true]:bg-destructive/5',
+            },
+        },
+        defaultVariants: { variant: 'default' },
+    },
+);
+
+function AccordionMenuItem({
+    className,
+    children,
+    variant,
+    asChild,
+    onClick,
+    ...props
+}: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> &
+    VariantProps<typeof itemVariants> & {
+        onClick?: React.MouseEventHandler<HTMLElement>;
+    }) {
+    const { classNames, selectedValue, matchPath, onItemClick } = React.useContext(AccordionMenuContext);
+    return (
+        <AccordionPrimitive.Item className="flex" {...props}>
+            <AccordionPrimitive.Header className="flex w-full">
+                <AccordionPrimitive.Trigger
+                    asChild={asChild}
+                    data-slot="accordion-menu-item"
+                    className={cn(itemVariants({ variant }), classNames?.item, className)}
+                    onClick={(e) => {
+                        onItemClick?.(props.value, e);
+                        onClick?.(e);
+                        e.preventDefault();
+                    }}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            (e.currentTarget.firstElementChild as HTMLElement | null)?.click();
+                        }
+                    }}
+                    data-selected={matchPath(props.value as string) || selectedValue === props.value ? 'true' : undefined}
+                >
+                    {children}
+                </AccordionPrimitive.Trigger>
+            </AccordionPrimitive.Header>
+        </AccordionPrimitive.Item>
+    );
+}
+
+function AccordionMenuSub({ className, children, ...props }: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>) {
+    const { classNames } = React.useContext(AccordionMenuContext);
+    return (
+        <AccordionPrimitive.Item data-slot="accordion-menu-sub" className={cn(classNames?.sub, className)} {...props}>
+            {children}
+        </AccordionPrimitive.Item>
+    );
+}
+
+function AccordionMenuSubTrigger({ className, children }: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>) {
+    const { classNames } = React.useContext(AccordionMenuContext);
+    return (
+        <AccordionPrimitive.Header className="flex">
+            <AccordionPrimitive.Trigger
+                data-slot="accordion-menu-sub-trigger"
+                className={cn(
+                    'w-full relative flex items-center cursor-pointer select-none text-start rounded-lg gap-2 px-2 py-1.5 text-sm outline-hidden text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([role=img]):not([class*=text-])]:opacity-60 [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0',
+                    classNames?.subTrigger,
+                    className,
+                )}
+            >
+                {children}
+                <ChevronDown
+                    data-slot="accordion-menu-sub-indicator"
+                    className="ms-auto size-3.5! shrink-0 text-muted-foreground transition-transform duration-200 [[data-state=open]>&]:-rotate-180"
+                />
+            </AccordionPrimitive.Trigger>
+        </AccordionPrimitive.Header>
+    );
+}
+
+type AccordionMenuSubContentProps = (
+    | (React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> & {
+          type: 'single';
+          collapsible: boolean;
+          defaultValue?: string;
+      })
+    | (React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> & {
+          type: 'multiple';
+          collapsible?: boolean;
+          defaultValue?: string | string[];
+      })
+) & { parentValue: string };
+
+function AccordionMenuSubContent({ className, children, type, collapsible, defaultValue, parentValue, ...props }: AccordionMenuSubContentProps) {
+    const { nestedStates, setNestedStates, classNames } = React.useContext(AccordionMenuContext);
+    let currentValue: string | string[];
+    if (type === 'multiple') {
+        const sv = nestedStates[parentValue];
+        currentValue = Array.isArray(sv) ? sv : typeof sv === 'string' ? [sv] : defaultValue ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]) : [];
+    } else {
+        currentValue = (nestedStates[parentValue] ?? defaultValue ?? '') as string;
+    }
+
+    return (
+        <AccordionPrimitive.Content
+            data-slot="accordion-menu-sub-content"
+            className={cn('ps-5 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down', classNames?.subContent, className)}
+            {...props}
+        >
+            {type === 'multiple' ? (
+                <AccordionPrimitive.Root
+                    className={cn('w-full py-0.5', classNames?.subWrapper)}
+                    type="multiple"
+                    value={currentValue as string[]}
+                    role="menu"
+                    data-slot="accordion-menu-sub-wrapper"
+                    onValueChange={(value: string[]) => setNestedStates((prev) => ({ ...prev, [parentValue]: value }))}
+                >
+                    {children}
+                </AccordionPrimitive.Root>
+            ) : (
+                <AccordionPrimitive.Root
+                    className={cn('w-full py-0.5', classNames?.subWrapper)}
+                    type="single"
+                    collapsible={collapsible}
+                    value={currentValue as string}
+                    role="menu"
+                    data-slot="accordion-menu-sub-wrapper"
+                    onValueChange={(value: string) => setNestedStates((prev) => ({ ...prev, [parentValue]: value }))}
+                >
+                    {children}
+                </AccordionPrimitive.Root>
+            )}
+        </AccordionPrimitive.Content>
+    );
+}
+
+function AccordionMenuIndicator({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) {
+    const { classNames } = React.useContext(AccordionMenuContext);
+    return (
+        <span aria-hidden="true" data-slot="accordion-menu-indicator" className={cn('ms-auto flex items-center font-medium', classNames?.indicator, className)} {...props} />
+    );
+}
+
+export {
+    AccordionMenu,
+    AccordionMenuGroup,
+    AccordionMenuIndicator,
+    AccordionMenuItem,
+    AccordionMenuLabel,
+    AccordionMenuSeparator,
+    AccordionMenuSub,
+    AccordionMenuSubContent,
+    AccordionMenuSubTrigger,
+};

package/src/components/ui/accordion.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown, Plus } from 'lucide-react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const accordionRootVariants = cva('', {
+    variants: {
+        variant: {
+            default: '',
+            outline: 'space-y-2',
+            solid: 'space-y-2',
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+
+const accordionItemVariants = cva('', {
+    variants: {
+        variant: {
+            default: 'border-b border-border',
+            outline: 'border border-border rounded-lg px-4',
+            solid: 'rounded-lg bg-accent/70 px-4',
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+
+const accordionTriggerVariants = cva(
+    'flex flex-1 items-center justify-between py-4 gap-2.5 text-foreground font-medium transition-all [&[data-state=open]>svg]:rotate-180 cursor-pointer',
+    {
+        variants: {
+            variant: { default: '', outline: '', solid: '' },
+            indicator: {
+                arrow: '',
+                plus: '[&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180',
+                none: '',
+            },
+        },
+        defaultVariants: { variant: 'default', indicator: 'arrow' },
+    },
+);
+
+const accordionContentVariants = cva(
+    'overflow-hidden text-sm text-accent-foreground transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+    {
+        variants: { variant: { default: '', outline: '', solid: '' } },
+        defaultVariants: { variant: 'default' },
+    },
+);
+
+type AccordionContextType = {
+    variant?: 'default' | 'outline' | 'solid';
+    indicator?: 'arrow' | 'plus' | 'none';
+};
+const AccordionContext = React.createContext<AccordionContextType>({
+    variant: 'default',
+    indicator: 'arrow',
+});
+
+function Accordion(
+    props: React.ComponentProps<typeof AccordionPrimitive.Root> &
+        VariantProps<typeof accordionRootVariants> & {
+            indicator?: 'arrow' | 'plus';
+        },
+) {
+    const { className, variant = 'default', indicator = 'arrow', children, ...rest } = props;
+    return (
+        <AccordionContext.Provider value={{ variant: variant || 'default', indicator }}>
+            <AccordionPrimitive.Root
+                data-slot="accordion"
+                className={cn(accordionRootVariants({ variant }), className)}
+                {...rest}
+            >
+                {children}
+            </AccordionPrimitive.Root>
+        </AccordionContext.Provider>
+    );
+}
+
+function AccordionItem(props: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+    const { className, children, ...rest } = props;
+    const { variant } = React.useContext(AccordionContext);
+    return (
+        <AccordionPrimitive.Item
+            data-slot="accordion-item"
+            className={cn(accordionItemVariants({ variant }), className)}
+            {...rest}
+        >
+            {children}
+        </AccordionPrimitive.Item>
+    );
+}
+
+function AccordionTrigger(props: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+    const { className, children, ...rest } = props;
+    const { variant, indicator } = React.useContext(AccordionContext);
+    return (
+        <AccordionPrimitive.Header className="flex">
+            <AccordionPrimitive.Trigger
+                data-slot="accordion-trigger"
+                className={cn(accordionTriggerVariants({ variant, indicator }), className)}
+                {...rest}
+            >
+                {children}
+                {indicator === 'plus' && (
+                    <Plus className="size-4 shrink-0 transition-transform duration-200" strokeWidth={1} />
+                )}
+                {indicator === 'arrow' && (
+                    <ChevronDown className="size-4 shrink-0 transition-transform duration-200" strokeWidth={1} />
+                )}
+            </AccordionPrimitive.Trigger>
+        </AccordionPrimitive.Header>
+    );
+}
+
+function AccordionContent(props: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+    const { className, children, ...rest } = props;
+    const { variant } = React.useContext(AccordionContext);
+    return (
+        <AccordionPrimitive.Content
+            data-slot="accordion-content"
+            className={cn(accordionContentVariants({ variant }), className)}
+            {...rest}
+        >
+            <div className={cn('pb-5 pt-0', className)}>{children}</div>
+        </AccordionPrimitive.Content>
+    );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+import { buttonVariants } from '../../controls/Button';
+
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+    return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+    return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+    return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+    return (
+        <AlertDialogPrimitive.Overlay
+            data-slot="alert-dialog-overlay"
+            className={cn(
+                'fixed inset-0 z-50 bg-black/30 [backdrop-filter:blur(4px)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+    return (
+        <AlertDialogPortal>
+            <AlertDialogOverlay />
+            <AlertDialogPrimitive.Content
+                data-slot="alert-dialog-content"
+                className={cn(
+                    'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg shadow-black/5 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg',
+                    className,
+                )}
+                {...props}
+            />
+        </AlertDialogPortal>
+    );
+}
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div data-slot="alert-dialog-header" className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div data-slot="alert-dialog-footer" className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2.5', className)} {...props} />
+);
+
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+    return <AlertDialogPrimitive.Title data-slot="alert-dialog-title" className={cn('text-lg font-semibold', className)} {...props} />;
+}
+
+function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+    return <AlertDialogPrimitive.Description data-slot="alert-dialog-description" className={cn('text-sm text-muted-foreground', className)} {...props} />;
+}
+
+function AlertDialogAction({
+    className,
+    variant,
+    ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> & VariantProps<typeof buttonVariants>) {
+    return <AlertDialogPrimitive.Action data-slot="alert-dialog-action" className={cn(buttonVariants({ variant }), className)} {...props} />;
+}
+
+function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+    return <AlertDialogPrimitive.Cancel data-slot="alert-dialog-cancel" className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)} {...props} />;
+}
+
+export {
+    AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+    AlertDialogDescription, AlertDialogFooter, AlertDialogHeader,
+    AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger,
+};

package/src/components/ui/alert.tsx

@@ -0,0 +1,63 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const alertVariants = cva(
+    'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+    {
+        variants: {
+            variant: {
+                default: 'bg-background text-foreground',
+                destructive:
+                    'text-destructive-foreground [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-foreground/80',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    },
+);
+
+function Alert({
+    className,
+    variant,
+    ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+    return (
+        <div
+            data-slot="alert"
+            role="alert"
+            className={cn(alertVariants({ variant }), className)}
+            {...props}
+        />
+    );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="alert-title"
+            className={cn(
+                'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="alert-description"
+            className={cn(
+                'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Alert, AlertTitle, AlertDescription };