create-auto-app 1.34.0 → 1.36.0

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

@@ -1,108 +0,0 @@
-import * as React from 'react';
-import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-import { buttonVariants, type Button } from '@/components/ui/Button';
-
-/**
- * A navigation component for paginated content, rendered as a semantic nav element.
- * Compose with PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, and PaginationEllipsis.
- */
-function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
-  return (
-    <nav
-      role="navigation"
-      aria-label="pagination"
-      data-slot="pagination"
-      className={cn('mx-auto flex w-full justify-center', className)}
-      {...props}
-    />
-  );
-}
-
-function PaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {
-  return <ul data-slot="pagination-content" className={cn('flex flex-row items-center gap-1', className)} {...props} />;
-}
-
-function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
-  return <li data-slot="pagination-item" {...props} />;
-}
-
-type PaginationLinkProps = {
-  isActive?: boolean;
-} & Pick<React.ComponentProps<typeof Button>, 'size'> &
-  React.ComponentProps<'a'>;
-
-/** A page number link that renders as outlined when active and ghost when inactive. */
-function PaginationLink({ className, isActive, size = 'icon', ...props }: PaginationLinkProps) {
-  return (
-    <a
-      aria-current={isActive ? 'page' : undefined}
-      data-slot="pagination-link"
-      data-active={isActive}
-      className={cn(
-        buttonVariants({
-          variant: isActive ? 'outline' : 'ghost',
-          size,
-        }),
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** A "Previous" link with a left chevron icon for navigating to the prior page. */
-function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to previous page"
-      size="default"
-      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
-      {...props}
-    >
-      <ChevronLeftIcon />
-      <span className="hidden sm:block">Previous</span>
-    </PaginationLink>
-  );
-}
-
-/** A "Next" link with a right chevron icon for navigating to the following page. */
-function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to next page"
-      size="default"
-      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
-      {...props}
-    >
-      <span className="hidden sm:block">Next</span>
-      <ChevronRightIcon />
-    </PaginationLink>
-  );
-}
-
-/** A visual ellipsis indicator representing skipped page numbers. */
-function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      aria-hidden
-      data-slot="pagination-ellipsis"
-      className={cn('flex size-9 items-center justify-center', className)}
-      {...props}
-    >
-      <MoreHorizontalIcon className="size-4" />
-      <span className="sr-only">More pages</span>
-    </span>
-  );
-}
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
-};

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

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/Popover';
-import { Button } from '@/components/ui/Button';
-
-const meta: Meta<typeof Popover> = {
-  title: 'UI Components/Popover',
-  component: Popover,
-};
-export default meta;
-type Story = StoryObj<typeof Popover>;
-
-/** Shows a popover with form inputs for setting dimensions. */
-export const Default: Story = {
-  render: () => (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <div className="grid gap-4">
-          <div className="space-y-2">
-            <h4 className="font-medium leading-none">Dimensions</h4>
-            <p className="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
-          </div>
-          <div className="grid gap-2">
-            <div className="grid grid-cols-3 items-center gap-4">
-              <span className="text-sm">Width</span>
-              <input className="border-input col-span-2 h-8 rounded-md border px-3 text-sm" defaultValue="100%" />
-            </div>
-            <div className="grid grid-cols-3 items-center gap-4">
-              <span className="text-sm">Height</span>
-              <input className="border-input col-span-2 h-8 rounded-md border px-3 text-sm" defaultValue="25px" />
-            </div>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  ),
-};
-
-/** Shows a popover with simple informational text content. */
-export const SimpleText: Story = {
-  render: () => (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Info</Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-60">
-        <p className="text-sm">This is a simple popover with some informational text content.</p>
-      </PopoverContent>
-    </Popover>
-  ),
-};

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

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import { Popover as PopoverPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-
-/** A floating panel anchored to a trigger for rich content on click. */
-function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
-}
-
-/** The element that toggles the popover open and closed when clicked. */
-function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
-}
-
-/** The floating content panel rendered via a portal with animated enter/exit transitions. */
-function PopoverContent({
-  className,
-  align = 'center',
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
-          className,
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  );
-}
-
-/** An optional custom anchor element to position the popover relative to instead of the trigger. */
-function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
-}
-
-/** A layout wrapper for the popover's title and description. */
-function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="popover-header" className={cn('flex flex-col gap-1 text-sm', className)} {...props} />;
-}
-
-function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>) {
-  return <div data-slot="popover-title" className={cn('font-medium', className)} {...props} />;
-}
-
-function PopoverDescription({ className, ...props }: React.ComponentProps<'p'>) {
-  return <p data-slot="popover-description" className={cn('text-muted-foreground', className)} {...props} />;
-}
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverHeader, PopoverTitle, PopoverDescription };

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

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Progress } from '@/components/ui/Progress';
-
-const meta: Meta<typeof Progress> = {
-  title: 'UI Components/Progress',
-  component: Progress,
-};
-export default meta;
-type Story = StoryObj<typeof Progress>;
-
-/** Shows the progress bar at 50% with an adjustable value control. */
-export const Default: Story = {
-  args: {
-    value: 50,
-  },
-  render: (args) => <Progress {...args} className="w-[60%]" />,
-};
-
-/** Shows the progress bar at 0% (empty state). */
-export const Empty: Story = {
-  render: () => <Progress value={0} className="w-[60%]" />,
-};
-
-/** Shows the progress bar at 50%. */
-export const Half: Story = {
-  render: () => <Progress value={50} className="w-[60%]" />,
-};
-
-/** Shows the progress bar at 100% (complete state). */
-export const Full: Story = {
-  render: () => <Progress value={100} className="w-[60%]" />,
-};

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

@@ -1,25 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Progress as ProgressPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-
-/** A horizontal progress bar. Set `value` (0-100) to control fill level. */
-function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
-  return (
-    <ProgressPrimitive.Root
-      data-slot="progress"
-      className={cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className)}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
-        className="bg-primary h-full w-full flex-1 transition-all"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  );
-}
-
-export { Progress };

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

@@ -1,50 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/RadioGroup';
-import { Label } from '@/components/ui/Label';
-
-const meta: Meta<typeof RadioGroup> = {
-  title: 'UI Components/RadioGroup',
-  component: RadioGroup,
-};
-export default meta;
-type Story = StoryObj<typeof RadioGroup>;
-
-/** Shows a vertical radio group with three options and a pre-selected value. */
-export const Default: Story = {
-  render: () => (
-    <RadioGroup defaultValue="comfortable">
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="default" id="r1" />
-        <Label htmlFor="r1">Default</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="comfortable" id="r2" />
-        <Label htmlFor="r2">Comfortable</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="compact" id="r3" />
-        <Label htmlFor="r3">Compact</Label>
-      </div>
-    </RadioGroup>
-  ),
-};
-
-/** Shows a horizontally laid out radio group. */
-export const Horizontal: Story = {
-  render: () => (
-    <RadioGroup defaultValue="medium" className="flex flex-row gap-4">
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="small" id="h1" />
-        <Label htmlFor="h1">Small</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="medium" id="h2" />
-        <Label htmlFor="h2">Medium</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="large" id="h3" />
-        <Label htmlFor="h3">Large</Label>
-      </div>
-    </RadioGroup>
-  ),
-};

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

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { CircleIcon } from 'lucide-react';
-import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-
-/**
- * A set of mutually exclusive radio options built on Radix UI RadioGroup primitive.
- * Compose with RadioGroupItem and Label to create accessible radio button groups.
- */
-function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
-  return <RadioGroupPrimitive.Root data-slot="radio-group" className={cn('grid gap-3', className)} {...props} />;
-}
-
-/** An individual radio button that displays a filled dot when selected. */
-function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
-  return (
-    <RadioGroupPrimitive.Item
-      data-slot="radio-group-item"
-      className={cn(
-        'border-input text-primary 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 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator
-        data-slot="radio-group-indicator"
-        className="relative flex items-center justify-center"
-      >
-        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
-}
-
-export { RadioGroup, RadioGroupItem };

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

@@ -1,72 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/Resizable';
-
-const meta: Meta<typeof ResizablePanelGroup> = {
-  title: 'UI Components/Resizable',
-  component: ResizablePanelGroup,
-};
-export default meta;
-type Story = StoryObj<typeof ResizablePanelGroup>;
-
-/** Shows two resizable panels split equally with a minimal divider. */
-export const Default: Story = {
-  render: () => (
-    <ResizablePanelGroup orientation="horizontal" className="min-h-[200px] max-w-md rounded-lg border">
-      <ResizablePanel defaultSize={50}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold">Panel One</span>
-        </div>
-      </ResizablePanel>
-      <ResizableHandle />
-      <ResizablePanel defaultSize={50}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold">Panel Two</span>
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  ),
-};
-
-/** Shows two panels with a visible grip handle on the divider. */
-export const WithHandle: Story = {
-  render: () => (
-    <ResizablePanelGroup orientation="horizontal" className="min-h-[200px] max-w-md rounded-lg border">
-      <ResizablePanel defaultSize={30}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold">Sidebar</span>
-        </div>
-      </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={70}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold">Content</span>
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  ),
-};
-
-/** Shows three resizable panels with grip handles between them. */
-export const ThreePanels: Story = {
-  render: () => (
-    <ResizablePanelGroup orientation="horizontal" className="min-h-[200px] max-w-lg rounded-lg border">
-      <ResizablePanel defaultSize={25}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold">Left</span>
-        </div>
-      </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={50}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold">Center</span>
-        </div>
-      </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={25}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold">Right</span>
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  ),
-};

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

@@ -1,54 +0,0 @@
-'use client';
-
-import { GripVerticalIcon } from 'lucide-react';
-import * as ResizablePrimitive from 'react-resizable-panels';
-
-import { cn } from '@/lib/utils';
-
-/**
- * A container for resizable panels that can be dragged to adjust their sizes.
- * Built on react-resizable-panels. Compose with ResizablePanel and ResizableHandle.
- */
-function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps) {
-  return (
-    <ResizablePrimitive.Group
-      data-slot="resizable-panel-group"
-      className={cn('flex h-full w-full aria-[orientation=vertical]:flex-col', className)}
-      {...props}
-    />
-  );
-}
-
-/** A panel within a ResizablePanelGroup whose size can be adjusted by dragging adjacent handles. */
-function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
-}
-
-/** A draggable divider between resizable panels. Set withHandle to show a visible grip icon. */
-function ResizableHandle({
-  /** When true, renders a visible grip icon on the handle for better discoverability. */
-  withHandle,
-  className,
-  ...props
-}: ResizablePrimitive.SeparatorProps & {
-  withHandle?: boolean;
-}) {
-  return (
-    <ResizablePrimitive.Separator
-      data-slot="resizable-handle"
-      className={cn(
-        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90',
-        className,
-      )}
-      {...props}
-    >
-      {withHandle && (
-        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
-          <GripVerticalIcon className="size-2.5" />
-        </div>
-      )}
-    </ResizablePrimitive.Separator>
-  );
-}
-
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

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

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ScrollArea, ScrollBar } from '@/components/ui/ScrollArea';
-import { Separator } from '@/components/ui/Separator';
-
-const meta: Meta<typeof ScrollArea> = {
-  title: 'UI Components/ScrollArea',
-  component: ScrollArea,
-};
-export default meta;
-type Story = StoryObj<typeof ScrollArea>;
-
-const tags = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);
-
-/** Shows a vertical scroll area with a long list of items. */
-export const Default: Story = {
-  render: () => (
-    <ScrollArea className="h-72 w-48 rounded-md border">
-      <div className="p-4">
-        <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
-        {tags.map((tag) => (
-          <div key={tag}>
-            <div className="text-sm">{tag}</div>
-            <Separator className="my-2" />
-          </div>
-        ))}
-      </div>
-    </ScrollArea>
-  ),
-};
-
-/** Shows a horizontal scroll area with a row of cards. */
-export const Horizontal: Story = {
-  render: () => (
-    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
-      <div className="flex w-max space-x-4 p-4">
-        {Array.from({ length: 20 }, (_, i) => (
-          <div key={i} className="bg-muted flex h-24 w-36 shrink-0 items-center justify-center rounded-md">
-            <span className="text-sm font-medium">Card {i + 1}</span>
-          </div>
-        ))}
-      </div>
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  ),
-};

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

@@ -1,51 +0,0 @@
-import * as React from 'react';
-import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-
-/**
- * A custom scrollable container with styled scrollbars, built on Radix UI ScrollArea primitive.
- * Replaces native browser scrollbars with consistent cross-platform styled scrollbars.
- */
-function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  return (
-    <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn('relative', className)} {...props}>
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  );
-}
-
-/** A styled scrollbar track and thumb. Defaults to vertical; set orientation="horizontal" for horizontal scrolling. */
-function ScrollBar({
-  className,
-  orientation = 'vertical',
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
-      orientation={orientation}
-      className={cn(
-        'flex touch-none p-px transition-colors select-none',
-        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
-        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
-        className,
-      )}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
-      />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  );
-}
-
-export { ScrollArea, ScrollBar };

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

@@ -1,59 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-  SelectGroup,
-  SelectLabel,
-} from '@/components/ui/Select';
-
-const meta: Meta<typeof Select> = {
-  title: 'UI Components/Select',
-  component: Select,
-};
-export default meta;
-type Story = StoryObj<typeof Select>;
-
-/** Shows a basic select with a list of fruit options. */
-export const Default: Story = {
-  render: () => (
-    <Select>
-      <SelectTrigger className="w-[180px]">
-        <SelectValue placeholder="Select a fruit" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="apple">Apple</SelectItem>
-        <SelectItem value="banana">Banana</SelectItem>
-        <SelectItem value="cherry">Cherry</SelectItem>
-        <SelectItem value="grape">Grape</SelectItem>
-        <SelectItem value="orange">Orange</SelectItem>
-      </SelectContent>
-    </Select>
-  ),
-};
-
-/** Shows options organized into labeled groups for categorized selection. */
-export const Grouped: Story = {
-  render: () => (
-    <Select>
-      <SelectTrigger className="w-[220px]">
-        <SelectValue placeholder="Select a timezone" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectGroup>
-          <SelectLabel>North America</SelectLabel>
-          <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
-          <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
-          <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
-        </SelectGroup>
-        <SelectGroup>
-          <SelectLabel>Europe</SelectLabel>
-          <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
-          <SelectItem value="cet">Central European Time (CET)</SelectItem>
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-  ),
-};