create-auto-app 1.34.0 → 1.35.0

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

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Skeleton } from '@/components/ui/Skeleton';
-
-const meta: Meta<typeof Skeleton> = {
-  title: 'UI Components/Skeleton',
-  component: Skeleton,
-};
-export default meta;
-type Story = StoryObj<typeof Skeleton>;
-
-/** Shows a skeleton mimicking a user profile layout with an avatar circle and two text lines. */
-export const Default: Story = {
-  render: () => (
-    <div className="flex items-center space-x-4">
-      <Skeleton className="h-12 w-12 rounded-full" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-      </div>
-    </div>
-  ),
-};
-
-/** Shows a skeleton mimicking a full card layout with image, text, and avatar placeholders. */
-export const CardSkeleton: Story = {
-  render: () => (
-    <div className="w-[300px] space-y-4 rounded-lg border p-4">
-      <Skeleton className="h-40 w-full rounded-md" />
-      <div className="space-y-2">
-        <Skeleton className="h-5 w-3/4" />
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-5/6" />
-      </div>
-      <div className="flex items-center gap-2 pt-2">
-        <Skeleton className="h-8 w-8 rounded-full" />
-        <Skeleton className="h-4 w-24" />
-      </div>
-    </div>
-  ),
-};

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

@@ -1,11 +0,0 @@
-import { cn } from '@/lib/utils';
-
-/**
- * A placeholder element that animates with a pulse effect to indicate content is loading.
- * Use to mirror the shape of upcoming content (e.g., text lines, avatars, cards) and reduce perceived load time.
- */
-function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="skeleton" className={cn('bg-accent animate-pulse rounded-md', className)} {...props} />;
-}
-
-export { Skeleton };

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

@@ -1,24 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Slider } from '@/components/ui/Slider';
-
-const meta: Meta<typeof Slider> = {
-  title: 'UI Components/Slider',
-  component: Slider,
-};
-export default meta;
-type Story = StoryObj<typeof Slider>;
-
-/** Shows a single-thumb slider at 50% of a 0-100 range. */
-export const Default: Story = {
-  render: () => <Slider defaultValue={[50]} max={100} step={1} className="w-[60%]" />,
-};
-
-/** Demonstrates a dual-thumb range slider for selecting a value range between 25 and 75. */
-export const Range: Story = {
-  render: () => <Slider defaultValue={[25, 75]} max={100} step={1} className="w-[60%]" />,
-};
-
-/** Shows a slider with discrete step increments of 10. */
-export const WithSteps: Story = {
-  render: () => <Slider defaultValue={[20]} max={100} step={10} className="w-[60%]" />,
-};

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

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { Slider as SliderPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-
-/** A draggable range input. Supports single or multiple thumbs (range selection), keyboard navigation, and vertical orientation. */
-function Slider({
-  className,
-  defaultValue,
-  value,
-  min = 0,
-  max = 100,
-  ...props
-}: React.ComponentProps<typeof SliderPrimitive.Root>) {
-  const _values = React.useMemo(
-    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
-    [value, defaultValue, min, max],
-  );
-
-  return (
-    <SliderPrimitive.Root
-      data-slot="slider"
-      defaultValue={defaultValue}
-      value={value}
-      min={min}
-      max={max}
-      className={cn(
-        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
-        className,
-      )}
-      {...props}
-    >
-      <SliderPrimitive.Track
-        data-slot="slider-track"
-        className={cn(
-          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
-        )}
-      >
-        <SliderPrimitive.Range
-          data-slot="slider-range"
-          className={cn('bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full')}
-        />
-      </SliderPrimitive.Track>
-      {Array.from({ length: _values.length }, (_, index) => (
-        <SliderPrimitive.Thumb
-          data-slot="slider-thumb"
-          key={index}
-          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
-        />
-      ))}
-    </SliderPrimitive.Root>
-  );
-}
-
-export { Slider };

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

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ThemeProvider } from 'next-themes';
-import { toast } from 'sonner';
-import { Toaster } from '@/components/ui/Sonner';
-import { Button } from '@/components/ui/Button';
-
-const meta: Meta<typeof Toaster> = {
-  title: 'UI Components/Sonner',
-  component: Toaster,
-  decorators: [
-    (Story) => (
-      <ThemeProvider attribute="class" defaultTheme="light">
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
-};
-export default meta;
-type Story = StoryObj<typeof Toaster>;
-
-/** Demonstrates all toast variants (default, success, error, warning, info) triggered by buttons. */
-export const Default: Story = {
-  render: () => (
-    <div>
-      <Toaster />
-      <div className="flex flex-wrap gap-2">
-        <Button variant="outline" onClick={() => toast('Event has been created.')}>
-          Show Toast
-        </Button>
-        <Button variant="outline" onClick={() => toast.success('Successfully saved!')}>
-          Success
-        </Button>
-        <Button variant="outline" onClick={() => toast.error('Something went wrong.')}>
-          Error
-        </Button>
-        <Button variant="outline" onClick={() => toast.warning('Please check your input.')}>
-          Warning
-        </Button>
-        <Button variant="outline" onClick={() => toast.info('Here is some information.')}>
-          Info
-        </Button>
-      </div>
-    </div>
-  ),
-};

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

@@ -1,38 +0,0 @@
-'use client';
-
-import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from 'lucide-react';
-import { useTheme } from 'next-themes';
-import { Toaster as Sonner, type ToasterProps } from 'sonner';
-
-/**
- * A pre-configured Sonner toast container that integrates with the app's theme system.
- * Provides styled icons for success, info, warning, error, and loading states. Place once at the app root and trigger toasts via the `toast()` function from sonner.
- */
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme();
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps['theme']}
-      className="toaster group"
-      icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
-      }}
-      style={
-        {
-          '--normal-bg': 'var(--popover)',
-          '--normal-text': 'var(--popover-foreground)',
-          '--normal-border': 'var(--border)',
-          '--border-radius': 'var(--radius)',
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  );
-};
-
-export { Toaster };

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

@@ -1,26 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Spinner } from '@/components/ui/Spinner';
-
-const meta: Meta<typeof Spinner> = {
-  title: 'UI Components/Spinner',
-  component: Spinner,
-};
-export default meta;
-type Story = StoryObj<typeof Spinner>;
-
-/** Shows the spinner at its default size (16px). */
-export const Default: Story = {};
-
-/** Shows a smaller 12px spinner for inline or compact contexts. */
-export const Small: Story = {
-  args: {
-    className: 'size-3',
-  },
-};
-
-/** Shows a larger 32px spinner for full-page or section-level loading states. */
-export const Large: Story = {
-  args: {
-    className: 'size-8',
-  },
-};

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

@@ -1,13 +0,0 @@
-import { Loader2Icon } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-/**
- * An animated spinning loader icon that indicates an in-progress operation.
- * Includes role="status" and an aria-label for accessibility. Resize via className (e.g., "size-8").
- */
-function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
-  return <Loader2Icon role="status" aria-label="Loading" className={cn('size-4 animate-spin', className)} {...props} />;
-}
-
-export { Spinner };

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

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Switch } from '@/components/ui/Switch';
-
-const meta: Meta<typeof Switch> = {
-  title: 'UI Components/Switch',
-  component: Switch,
-};
-export default meta;
-type Story = StoryObj<typeof Switch>;
-
-/** Shows the switch in its default unchecked state. */
-export const Default: Story = {};
-
-/** Shows the switch in its checked (on) state. */
-export const Checked: Story = {
-  args: {
-    defaultChecked: true,
-  },
-};
-
-/** Shows a disabled switch that cannot be interacted with. */
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
-
-/** Shows the switch paired with an associated label element for accessible labeling. */
-export const WithLabel: Story = {
-  render: () => (
-    <div className="flex items-center gap-2">
-      <Switch id="airplane-mode" />
-      <label htmlFor="airplane-mode" className="text-sm">
-        Airplane Mode
-      </label>
-    </div>
-  ),
-};

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

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { Switch as SwitchPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-
-/** A sliding on/off toggle control with WAI-ARIA switch role and keyboard support. */
-function Switch({
-  className,
-  /** Controls the physical dimensions of the switch track and thumb. */
-  size = 'default',
-  ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
-  size?: 'sm' | 'default';
-}) {
-  return (
-    <SwitchPrimitive.Root
-      data-slot="switch"
-      data-size={size}
-      className={cn(
-        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6',
-        className,
-      )}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className={cn(
-          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
-        )}
-      />
-    </SwitchPrimitive.Root>
-  );
-}
-
-export { Switch };

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

@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption } from '@/components/ui/Table';
-
-const meta: Meta<typeof Table> = {
-  title: 'UI Components/Table',
-  component: Table,
-};
-export default meta;
-type Story = StoryObj<typeof Table>;
-
-const invoices = [
-  { invoice: 'INV001', status: 'Paid', method: 'Credit Card', amount: '$250.00' },
-  { invoice: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' },
-  { invoice: 'INV003', status: 'Unpaid', method: 'Bank Transfer', amount: '$350.00' },
-  { invoice: 'INV004', status: 'Paid', method: 'Credit Card', amount: '$450.00' },
-];
-
-/** Shows a full table with header, body, and caption using invoice data. */
-export const Default: Story = {
-  render: () => (
-    <Table>
-      <TableCaption>A list of recent invoices.</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className="text-right">Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map((invoice) => (
-          <TableRow key={invoice.invoice}>
-            <TableCell className="font-medium">{invoice.invoice}</TableCell>
-            <TableCell>{invoice.status}</TableCell>
-            <TableCell>{invoice.method}</TableCell>
-            <TableCell className="text-right">{invoice.amount}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  ),
-};
-
-/** Shows a minimal two-column table without caption or footer. */
-export const Minimal: Story = {
-  render: () => (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Name</TableHead>
-          <TableHead>Role</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <TableRow>
-          <TableCell>Alice</TableCell>
-          <TableCell>Engineer</TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>Bob</TableCell>
-          <TableCell>Designer</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  ),
-};

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

@@ -1,86 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-/**
- * A responsive data table with horizontal scroll overflow.
- * Compose with TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption subcomponents.
- */
-function Table({ className, ...props }: React.ComponentProps<'table'>) {
-  return (
-    <div data-slot="table-container" className="relative w-full overflow-x-auto">
-      <table data-slot="table" className={cn('w-full caption-bottom text-sm', className)} {...props} />
-    </div>
-  );
-}
-
-/** The header section of a Table, rendering a thead with bottom-bordered rows. */
-function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
-  return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />;
-}
-
-/** The body section of a Table, rendering a tbody with no border on the last row. */
-function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
-  return <tbody data-slot="table-body" className={cn('[&_tr:last-child]:border-0', className)} {...props} />;
-}
-
-/** The footer section of a Table, rendering a tfoot with a muted background and top border. */
-function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
-      {...props}
-    />
-  );
-}
-
-/** A table row with hover highlight and selected state styling via data-state="selected". */
-function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', className)}
-      {...props}
-    />
-  );
-}
-
-/** A table header cell with bold text and left alignment. Automatically adjusts padding when containing a checkbox. */
-function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** A table data cell with standard padding and vertical alignment. */
-function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** A table caption rendered below the table body in muted text. */
-function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
-  return (
-    <caption data-slot="table-caption" className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />
-  );
-}
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

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

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/Tabs';
-
-const meta: Meta<typeof Tabs> = {
-  title: 'UI Components/Tabs',
-  component: Tabs,
-};
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-
-/** Shows the default pill-style tabs with three panels. */
-export const Default: Story = {
-  render: () => (
-    <Tabs defaultValue="account" className="w-[400px]">
-      <TabsList>
-        <TabsTrigger value="account">Account</TabsTrigger>
-        <TabsTrigger value="password">Password</TabsTrigger>
-        <TabsTrigger value="settings">Settings</TabsTrigger>
-      </TabsList>
-      <TabsContent value="account">
-        <p className="text-sm text-muted-foreground p-4">Make changes to your account here.</p>
-      </TabsContent>
-      <TabsContent value="password">
-        <p className="text-sm text-muted-foreground p-4">Change your password here.</p>
-      </TabsContent>
-      <TabsContent value="settings">
-        <p className="text-sm text-muted-foreground p-4">Adjust your settings here.</p>
-      </TabsContent>
-    </Tabs>
-  ),
-};
-
-/** Shows the line variant where the active tab is indicated by an underline rather than a background. */
-export const LineVariant: Story = {
-  render: () => (
-    <Tabs defaultValue="overview" className="w-[400px]">
-      <TabsList variant="line">
-        <TabsTrigger value="overview">Overview</TabsTrigger>
-        <TabsTrigger value="analytics">Analytics</TabsTrigger>
-        <TabsTrigger value="reports">Reports</TabsTrigger>
-      </TabsList>
-      <TabsContent value="overview">
-        <p className="text-sm text-muted-foreground p-4">Overview content goes here.</p>
-      </TabsContent>
-      <TabsContent value="analytics">
-        <p className="text-sm text-muted-foreground p-4">Analytics content goes here.</p>
-      </TabsContent>
-      <TabsContent value="reports">
-        <p className="text-sm text-muted-foreground p-4">Reports content goes here.</p>
-      </TabsContent>
-    </Tabs>
-  ),
-};

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

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Tabs as TabsPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-
-/** Layered content panels activated by tab triggers. Supports horizontal and vertical orientations with keyboard navigation. */
-function Tabs({ className, orientation = 'horizontal', ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      data-orientation={orientation}
-      orientation={orientation}
-      className={cn('group/tabs flex gap-2 data-[orientation=horizontal]:flex-col', className)}
-      {...props}
-    />
-  );
-}
-
-const tabsListVariants = cva(
-  'rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
-  {
-    variants: {
-      variant: {
-        default: 'bg-muted',
-        line: 'gap-1 bg-transparent',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-/**
- * The container for tab triggers. Supports "default" (pill background) and "line" (underline indicator) variants.
- */
-function TabsList({
-  className,
-  variant = 'default',
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      data-variant={variant}
-      className={cn(tabsListVariants({ variant }), className)}
-      {...props}
-    />
-  );
-}
-
-/** A clickable tab button that activates its associated TabsContent panel. */
-function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
-      className={cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent',
-        'data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground',
-        'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** The content panel associated with a tab trigger, shown when its corresponding trigger is active. */
-function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return <TabsPrimitive.Content data-slot="tabs-content" className={cn('flex-1 outline-none', className)} {...props} />;
-}
-
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

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

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Textarea } from '@/components/ui/Textarea';
-
-const meta: Meta<typeof Textarea> = {
-  title: 'UI Components/Textarea',
-  component: Textarea,
-};
-export default meta;
-type Story = StoryObj<typeof Textarea>;
-
-/** Shows the textarea in its default empty state. */
-export const Default: Story = {};
-
-/** Shows the textarea with placeholder text. */
-export const WithPlaceholder: Story = {
-  args: {
-    placeholder: 'Type your message here...',
-  },
-};
-
-/** Shows a disabled textarea that cannot receive input. */
-export const Disabled: Story = {
-  args: {
-    placeholder: 'This textarea is disabled',
-    disabled: true,
-  },
-};

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

@@ -1,22 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-/**
- * A multi-line text input that auto-sizes to its content via field-sizing-content.
- * Supports aria-invalid styling for form validation errors.
- */
-function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Textarea };