create-auto-app 1.34.0 → 1.36.0

package/templates/typical/client/src/components/ui/AlertDialog.tsx

@@ -1,178 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/Button';
-
-/** A confirmation modal requiring explicit user action. Unlike Dialog, cannot be dismissed by clicking outside. */
-function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
-}
-
-/** The element that opens the AlertDialog when clicked. */
-function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
-}
-
-/** Portals the dialog content into document.body to avoid z-index and overflow issues. */
-function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
-}
-
-/** The semi-transparent backdrop rendered behind the dialog content. */
-function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/**
- * The centered modal panel containing the dialog's content. Automatically renders overlay and portal.
- * @param size - Controls the max-width: `"default"` for standard dialogs, `"sm"` for compact confirmations.
- */
-function AlertDialogContent({
-  className,
-  size = 'default',
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
-  size?: 'default' | 'sm';
-}) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        data-size={size}
-        className={cn(
-          'bg-background 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 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg',
-          className,
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  );
-}
-
-/** Layout container for the dialog's title, description, and optional media icon. */
-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-6 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}
-    />
-  );
-}
-
-/** Layout container for the dialog's action buttons, typically Cancel and a primary action. */
-function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        'flex flex-col-reverse gap-2 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}
-    />
-  );
-}
-
-/** The accessible title of the dialog, announced by screen readers when the dialog opens. */
-function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn(
-        'text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** The accessible description providing additional context about the dialog's purpose. */
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  );
-}
-
-/** An optional icon or image slot displayed alongside the title in the dialog header. */
-function AlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-dialog-media"
-      className={cn(
-        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** The primary confirmation button that closes the dialog and triggers the intended action. Renders as a Button. */
-function AlertDialogAction({
-  className,
-  variant = 'default',
-  size = 'default',
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
-  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
-  return (
-    <Button variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Action data-slot="alert-dialog-action" className={cn(className)} {...props} />
-    </Button>
-  );
-}
-
-/** The cancel button that dismisses the dialog without taking action. Renders as an outline Button by default. */
-function AlertDialogCancel({
-  className,
-  variant = 'outline',
-  size = 'default',
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
-  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
-  return (
-    <Button variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Cancel data-slot="alert-dialog-cancel" className={cn(className)} {...props} />
-    </Button>
-  );
-}
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-};

package/templates/typical/client/src/components/ui/AspectRatio.stories.tsx

@@ -1,35 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { AspectRatio } from '@/components/ui/AspectRatio';
-
-const meta: Meta<typeof AspectRatio> = {
-  title: 'UI Components/AspectRatio',
-  component: AspectRatio,
-};
-export default meta;
-type Story = StoryObj<typeof AspectRatio>;
-
-/** Shows a 16:9 widescreen aspect ratio container. */
-export const Default: Story = {
-  render: () => (
-    <div className="w-[450px]">
-      <AspectRatio ratio={16 / 9}>
-        <div className="flex h-full w-full items-center justify-center rounded-md bg-slate-200 dark:bg-slate-800">
-          <span className="text-sm text-slate-500">16:9 Aspect Ratio</span>
-        </div>
-      </AspectRatio>
-    </div>
-  ),
-};
-
-/** Shows a 1:1 square aspect ratio container. */
-export const Square: Story = {
-  render: () => (
-    <div className="w-[300px]">
-      <AspectRatio ratio={1}>
-        <div className="flex h-full w-full items-center justify-center rounded-md bg-slate-200 dark:bg-slate-800">
-          <span className="text-sm text-slate-500">1:1 Square</span>
-        </div>
-      </AspectRatio>
-    </div>
-  ),
-};

package/templates/typical/client/src/components/ui/AspectRatio.tsx

@@ -1,13 +0,0 @@
-'use client';
-
-import { AspectRatio as AspectRatioPrimitive } from 'radix-ui';
-
-/**
- * Constrains its child element to a specified width-to-height ratio (e.g., 16/9, 1/1).
- * Useful for responsive images, videos, and media containers that must maintain proportions.
- */
-function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
-}
-
-export { AspectRatio };

package/templates/typical/client/src/components/ui/Avatar.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/Avatar';
-
-const meta: Meta<typeof Avatar> = {
-  title: 'UI Components/Avatar',
-  component: Avatar,
-};
-export default meta;
-type Story = StoryObj<typeof Avatar>;
-
-/** Shows an avatar with a loaded profile image and fallback initials. */
-export const WithImage: Story = {
-  render: () => (
-    <Avatar>
-      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-      <AvatarFallback>CN</AvatarFallback>
-    </Avatar>
-  ),
-};
-
-/** Shows an avatar displaying only fallback initials without an image. */
-export const FallbackOnly: Story = {
-  render: () => (
-    <Avatar>
-      <AvatarFallback>AB</AvatarFallback>
-    </Avatar>
-  ),
-};
-
-/** Demonstrates the three available avatar sizes: sm, default, and lg. */
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Avatar size="sm">
-        <AvatarFallback>SM</AvatarFallback>
-      </Avatar>
-      <Avatar size="default">
-        <AvatarFallback>MD</AvatarFallback>
-      </Avatar>
-      <Avatar size="lg">
-        <AvatarFallback>LG</AvatarFallback>
-      </Avatar>
-    </div>
-  ),
-};

package/templates/typical/client/src/components/ui/Avatar.tsx

@@ -1,98 +0,0 @@
-import * as React from 'react';
-import { Avatar as AvatarPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-
-/**
- * Displays a user profile image with a fallback for missing photos.
- * Compose with AvatarImage, AvatarFallback, and optionally AvatarBadge.
- * Use AvatarGroup to render overlapping stacks of avatars.
- */
-function Avatar({
-  className,
-  /** Controls the avatar dimensions: `"sm"` (24px), `"default"` (32px), or `"lg"` (40px). */
-  size = 'default',
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
-  size?: 'default' | 'sm' | 'lg';
-}) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      data-size={size}
-      className={cn(
-        'group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** The profile image rendered inside an Avatar. Automatically hidden if the image fails to load. */
-function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image data-slot="avatar-image" className={cn('aspect-square size-full', className)} {...props} />
-  );
-}
-
-/** Fallback content shown when AvatarImage is loading or unavailable, typically initials or an icon. */
-function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** A small status indicator (e.g., online/offline dot) positioned at the bottom-right corner of an Avatar. */
-function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="avatar-badge"
-      className={cn(
-        'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 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}
-    />
-  );
-}
-
-/** Renders multiple Avatars in an overlapping horizontal stack with ring borders. */
-function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="avatar-group"
-      className={cn(
-        '*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** Displays a count of additional avatars not shown in the group (e.g., "+5"). */
-function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="avatar-group-count"
-      className={cn(
-        'bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 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, AvatarBadge, AvatarGroup, AvatarGroupCount };

package/templates/typical/client/src/components/ui/Badge.stories.tsx

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Badge } from '@/components/ui/Badge';
-
-const meta: Meta<typeof Badge> = {
-  title: 'UI Components/Badge',
-  component: Badge,
-};
-export default meta;
-type Story = StoryObj<typeof Badge>;
-
-/** Shows the primary filled badge variant. */
-export const Default: Story = {
-  render: () => <Badge>Default</Badge>,
-};
-
-/** Shows the secondary badge variant with muted background. */
-export const Secondary: Story = {
-  render: () => <Badge variant="secondary">Secondary</Badge>,
-};
-
-/** Shows the destructive badge variant for error or warning indicators. */
-export const Destructive: Story = {
-  render: () => <Badge variant="destructive">Destructive</Badge>,
-};
-
-/** Shows the outline badge variant with a visible border and no fill. */
-export const Outline: Story = {
-  render: () => <Badge variant="outline">Outline</Badge>,
-};
-
-/** Displays all badge variants side by side for visual comparison. */
-export const AllVariants: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-2">
-      <Badge variant="default">Default</Badge>
-      <Badge variant="secondary">Secondary</Badge>
-      <Badge variant="destructive">Destructive</Badge>
-      <Badge variant="outline">Outline</Badge>
-    </div>
-  ),
-};

package/templates/typical/client/src/components/ui/Badge.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Slot } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-
-const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-        secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
-        destructive:
-          'bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline: 'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-        ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 [a&]:hover:underline',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-/**
- * A small label used to highlight status, category, or count.
- * Supports multiple visual variants: default, secondary, destructive, outline, ghost, and link.
- */
-function Badge({
-  className,
-  variant = 'default',
-  /** Merges props onto the child element instead of rendering a span. Use with custom wrapper elements. */
-  asChild = false,
-  ...props
-}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : 'span';
-
-  return (
-    <Comp data-slot="badge" data-variant={variant} className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants };

package/templates/typical/client/src/components/ui/Breadcrumb.stories.tsx

@@ -1,54 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/Breadcrumb';
-
-const meta: Meta<typeof Breadcrumb> = {
-  title: 'UI Components/Breadcrumb',
-  component: Breadcrumb,
-};
-export default meta;
-type Story = StoryObj<typeof Breadcrumb>;
-
-/** Shows a three-level breadcrumb trail with home, category, and current page. */
-export const Default: Story = {
-  render: () => (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  ),
-};
-
-/** Shows a minimal two-level breadcrumb with just a parent link and current page. */
-export const TwoLevels: Story = {
-  render: () => (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Dashboard</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Settings</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  ),
-};

package/templates/typical/client/src/components/ui/Breadcrumb.tsx

@@ -1,104 +0,0 @@
-import * as React from 'react';
-import { ChevronRight, MoreHorizontal } from 'lucide-react';
-import { Slot } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-
-/**
- * A navigation aid that shows the user's current location within a site hierarchy.
- * Compose with BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, and BreadcrumbSeparator.
- * Renders as a `<nav>` with `aria-label="breadcrumb"` for accessibility.
- */
-function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
-}
-
-/** The ordered list container for breadcrumb items, handling wrapping and spacing. */
-function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
-  return (
-    <ol
-      data-slot="breadcrumb-list"
-      className={cn(
-        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** A single step in the breadcrumb trail, wrapping a link or the current page label. */
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
-  return <li data-slot="breadcrumb-item" className={cn('inline-flex items-center gap-1.5', className)} {...props} />;
-}
-
-/** A navigable link within a breadcrumb item. Use `asChild` to render a router Link component instead of an anchor. */
-function BreadcrumbLink({
-  /** Merges props onto the child element instead of rendering an anchor tag. */
-  asChild,
-  className,
-  ...props
-}: React.ComponentProps<'a'> & {
-  asChild?: boolean;
-}) {
-  const Comp = asChild ? Slot.Root : 'a';
-
-  return (
-    <Comp data-slot="breadcrumb-link" className={cn('hover:text-foreground transition-colors', className)} {...props} />
-  );
-}
-
-/** The current page label in the breadcrumb trail, marked with `aria-current="page"` and rendered as non-interactive text. */
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="breadcrumb-page"
-      role="link"
-      aria-disabled="true"
-      aria-current="page"
-      className={cn('text-foreground font-normal', className)}
-      {...props}
-    />
-  );
-}
-
-/** A visual divider between breadcrumb items, defaulting to a chevron-right icon. Pass children to customize the separator. */
-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 ?? <ChevronRight />}
-    </li>
-  );
-}
-
-/** A "..." indicator used to collapse intermediate breadcrumb levels when the trail is too long. */
-function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="breadcrumb-ellipsis"
-      role="presentation"
-      aria-hidden="true"
-      className={cn('flex size-9 items-center justify-center', className)}
-      {...props}
-    >
-      <MoreHorizontal className="size-4" />
-      <span className="sr-only">More</span>
-    </span>
-  );
-}
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-};