create-pixi-vn 2.0.14 → 2.1.0

package/template-nqtr-react-vite-muijoy/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,160 @@
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+    return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+    return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+    return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
+    return (
+        <AlertDialogPrimitive.Backdrop
+            data-slot="alert-dialog-overlay"
+            className={cn(
+                "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogContent({
+    className,
+    size = "default",
+    ...props
+}: AlertDialogPrimitive.Popup.Props & {
+    size?: "default" | "sm";
+}) {
+    return (
+        <AlertDialogPortal>
+            <AlertDialogOverlay />
+            <AlertDialogPrimitive.Popup
+                data-slot="alert-dialog-content"
+                data-size={size}
+                className={cn(
+                    "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+                    className,
+                )}
+                {...props}
+            />
+        </AlertDialogPortal>
+    );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="alert-dialog-header"
+            className={cn(
+                "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="alert-dialog-footer"
+            className={cn(
+                "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="alert-dialog-media"
+            className={cn(
+                "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogTitle({
+    className,
+    ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+    return (
+        <AlertDialogPrimitive.Title
+            data-slot="alert-dialog-title"
+            className={cn(
+                "font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogDescription({
+    className,
+    ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+    return (
+        <AlertDialogPrimitive.Description
+            data-slot="alert-dialog-description"
+            className={cn(
+                "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {
+    return <Button data-slot="alert-dialog-action" className={cn(className)} {...props} />;
+}
+
+function AlertDialogCancel({
+    className,
+    variant = "outline",
+    size = "default",
+    ...props
+}: AlertDialogPrimitive.Close.Props &
+    Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+    return (
+        <AlertDialogPrimitive.Close
+            data-slot="alert-dialog-cancel"
+            className={cn(className)}
+            render={<Button variant={variant} size={size} />}
+            {...props}
+        />
+    );
+}
+
+export {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogMedia,
+    AlertDialogOverlay,
+    AlertDialogPortal,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+};

package/template-nqtr-react-vite-muijoy/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@/lib/utils";
+
+function AspectRatio({
+    ratio,
+    className,
+    ...props
+}: React.ComponentProps<"div"> & { ratio: number }) {
+    return (
+        <div
+            data-slot="aspect-ratio"
+            style={
+                {
+                    "--ratio": ratio,
+                } as React.CSSProperties
+            }
+            className={cn("relative aspect-(--ratio)", className)}
+            {...props}
+        />
+    );
+}
+
+export { AspectRatio };

package/template-nqtr-react-vite-muijoy/src/components/ui/avatar.tsx

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+
+import { cn } from "@/lib/utils";
+
+function Avatar({
+    className,
+    size = "default",
+    ...props
+}: AvatarPrimitive.Root.Props & {
+    size?: "default" | "sm" | "lg";
+}) {
+    return (
+        <AvatarPrimitive.Root
+            data-slot="avatar"
+            data-size={size}
+            className={cn(
+                "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+    return (
+        <AvatarPrimitive.Image
+            data-slot="avatar-image"
+            className={cn("aspect-square size-full rounded-full object-cover", className)}
+            {...props}
+        />
+    );
+}
+
+function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {
+    return (
+        <AvatarPrimitive.Fallback
+            data-slot="avatar-fallback"
+            className={cn(
+                "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+    return (
+        <span
+            data-slot="avatar-badge"
+            className={cn(
+                "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+                "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+                "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+                "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="avatar-group"
+            className={cn(
+                "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="avatar-group-count"
+            className={cn(
+                "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };

package/template-nqtr-react-vite-muijoy/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { cn } from "@/lib/utils";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+    return (
+        <nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />
+    );
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+    return (
+        <ol
+            data-slot="breadcrumb-list"
+            className={cn(
+                "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+    return (
+        <li
+            data-slot="breadcrumb-item"
+            className={cn("inline-flex items-center gap-1", className)}
+            {...props}
+        />
+    );
+}
+
+function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">) {
+    return useRender({
+        defaultTagName: "a",
+        props: mergeProps<"a">(
+            {
+                className: cn("transition-colors hover:text-foreground", className),
+            },
+            props,
+        ),
+        render,
+        state: {
+            slot: "breadcrumb-link",
+        },
+    });
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+    return (
+        <span
+            data-slot="breadcrumb-page"
+            role="link"
+            aria-disabled="true"
+            aria-current="page"
+            className={cn("font-normal text-foreground", className)}
+            {...props}
+        />
+    );
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
+    return (
+        <li
+            data-slot="breadcrumb-separator"
+            role="presentation"
+            aria-hidden="true"
+            className={cn("[&>svg]:size-3.5", className)}
+            {...props}
+        >
+            {children ?? <ChevronRightIcon />}
+        </li>
+    );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+    return (
+        <span
+            data-slot="breadcrumb-ellipsis"
+            role="presentation"
+            aria-hidden="true"
+            className={cn("flex size-5 items-center justify-center [&>svg]:size-4", className)}
+            {...props}
+        >
+            <MoreHorizontalIcon />
+            <span className="sr-only">More</span>
+        </span>
+    );
+}
+
+export {
+    Breadcrumb,
+    BreadcrumbList,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+    BreadcrumbEllipsis,
+};

package/template-nqtr-react-vite-muijoy/src/components/ui/button-group.tsx

@@ -0,0 +1,78 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+
+const buttonGroupVariants = cva(
+    "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+    {
+        variants: {
+            orientation: {
+                horizontal:
+                    "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+                vertical:
+                    "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+            },
+        },
+        defaultVariants: {
+            orientation: "horizontal",
+        },
+    },
+);
+
+function ButtonGroup({
+    className,
+    orientation,
+    ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+    return (
+        <div
+            role="group"
+            data-slot="button-group"
+            data-orientation={orientation}
+            className={cn(buttonGroupVariants({ orientation }), className)}
+            {...props}
+        />
+    );
+}
+
+function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<"div">) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps<"div">(
+            {
+                className: cn(
+                    "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+                    className,
+                ),
+            },
+            props,
+        ),
+        render,
+        state: {
+            slot: "button-group-text",
+        },
+    });
+}
+
+function ButtonGroupSeparator({
+    className,
+    orientation = "vertical",
+    ...props
+}: React.ComponentProps<typeof Separator>) {
+    return (
+        <Separator
+            data-slot="button-group-separator"
+            orientation={orientation}
+            className={cn(
+                "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/template-nqtr-react-vite-muijoy/src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+    "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    {
+        variants: {
+            variant: {
+                default: "bg-primary text-primary-foreground hover:bg-primary/80",
+                outline:
+                    "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+                secondary:
+                    "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+                ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+                destructive:
+                    "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+                link: "text-primary underline-offset-4 hover:underline",
+            },
+            size: {
+                default:
+                    "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+                xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+                sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+                lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+                icon: "size-8",
+                "icon-xs":
+                    "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+                "icon-sm":
+                    "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+                "icon-lg": "size-9",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    },
+);
+
+function Button({
+    className,
+    variant = "default",
+    size = "default",
+    ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+    return (
+        <ButtonPrimitive
+            data-slot="button"
+            className={cn(buttonVariants({ variant, size, className }))}
+            {...props}
+        />
+    );
+}
+
+export { Button, buttonVariants };

package/template-nqtr-react-vite-muijoy/src/components/ui/card.tsx

@@ -0,0 +1,91 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({
+    className,
+    size = "default",
+    ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+    return (
+        <div
+            data-slot="card"
+            data-size={size}
+            className={cn(
+                "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-header"
+            className={cn(
+                "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-title"
+            className={cn(
+                "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-description"
+            className={cn("text-sm text-muted-foreground", className)}
+            {...props}
+        />
+    );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-action"
+            className={cn(
+                "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div data-slot="card-content" className={cn("px-(--card-spacing)", className)} {...props} />
+    );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-footer"
+            className={cn(
+                "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };