@geekmidas/cli 9.0.2 → 10.0.0-alpha.0

package/src/init/generators/ui.ts

@@ -1,1473 +0,0 @@
-import type { GeneratedFile, TemplateOptions } from '../templates/index.js';
-
-/**
- * Generate UI package files for fullstack template
- * Based on @geekmidas/ui with shadcn/ui, Tailwind CSS v4, and Storybook
- */
-export function generateUiPackageFiles(
-	options: TemplateOptions,
-): GeneratedFile[] {
-	if (!options.monorepo || options.template !== 'fullstack') {
-		return [];
-	}
-
-	const packageName = `@${options.name}/ui`;
-
-	// package.json for UI package
-	const packageJson = {
-		name: packageName,
-		version: '0.0.1',
-		private: true,
-		type: 'module',
-		exports: {
-			'.': './src/index.ts',
-			'./components': './src/components/index.ts',
-			'./lib/utils': './src/lib/utils.ts',
-			'./styles': './src/styles/globals.css',
-		},
-		scripts: {
-			'ts:check': 'tsc --noEmit',
-			storybook: 'storybook dev -p 6006',
-			'build:storybook': 'storybook build -o dist/storybook',
-		},
-		dependencies: {
-			'@radix-ui/react-dialog': '~1.1.4',
-			'@radix-ui/react-label': '~2.1.2',
-			'@radix-ui/react-separator': '~1.1.2',
-			'@radix-ui/react-slot': '~1.2.4',
-			'@radix-ui/react-tabs': '~1.1.2',
-			'@radix-ui/react-tooltip': '~1.1.6',
-			'class-variance-authority': '~0.7.1',
-			clsx: '^2.1.1',
-			'lucide-react': '~0.562.0',
-			'tailwind-merge': '~3.4.0',
-		},
-		devDependencies: {
-			'@storybook/addon-a11y': '^8.4.7',
-			'@storybook/addon-essentials': '^8.4.7',
-			'@storybook/addon-interactions': '^8.4.7',
-			'@storybook/react': '^8.4.7',
-			'@storybook/react-vite': '^8.4.7',
-			'@tailwindcss/vite': '^4.0.0',
-			'@types/react': '^19.0.0',
-			'@types/react-dom': '^19.0.0',
-			react: '^19.0.0',
-			'react-dom': '^19.0.0',
-			storybook: '^8.4.7',
-			tailwindcss: '^4.0.0',
-			typescript: '^5.8.2',
-			vite: '^6.0.0',
-		},
-		peerDependencies: {
-			react: '>=18.0.0',
-			'react-dom': '>=18.0.0',
-			tailwindcss: '>=4.0.0',
-		},
-	};
-
-	// tsconfig.json for UI package
-	const tsConfig = {
-		extends: '../../tsconfig.json',
-		compilerOptions: {
-			jsx: 'react-jsx',
-			lib: ['ES2023', 'DOM', 'DOM.Iterable'],
-			noEmit: true,
-			allowImportingTsExtensions: true,
-			baseUrl: '.',
-			paths: {
-				'~/*': ['./src/*'],
-			},
-		},
-		include: ['src/**/*'],
-		exclude: ['node_modules', 'dist', '**/*.stories.tsx'],
-	};
-
-	// components.json (shadcn config)
-	const componentsJson = {
-		$schema: 'https://ui.shadcn.com/schema.json',
-		style: 'new-york',
-		rsc: false,
-		tsx: true,
-		tailwind: {
-			config: '',
-			css: 'src/styles/globals.css',
-			baseColor: 'neutral',
-			cssVariables: true,
-			prefix: '',
-		},
-		aliases: {
-			components: '~/components',
-			utils: '~/lib/utils',
-			ui: '~/components/ui',
-			lib: '~/lib',
-			hooks: '~/hooks',
-		},
-		iconLibrary: 'lucide',
-	};
-
-	// .storybook/main.ts
-	const storybookMain = `import type { StorybookConfig } from '@storybook/react-vite';
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(ts|tsx)'],
-  addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-a11y',
-  ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
-  docs: {
-    autodocs: 'tag',
-  },
-  viteFinal: async (config) => {
-    // Add Tailwind CSS v4 plugin
-    const tailwindcss = await import('@tailwindcss/vite');
-    config.plugins = config.plugins || [];
-    config.plugins.push(tailwindcss.default());
-    return config;
-  },
-};
-
-export default config;
-`;
-
-	// .storybook/preview.ts
-	const storybookPreview = `import type { Preview } from '@storybook/react';
-import '../src/styles/globals.css';
-
-const preview: Preview = {
-  parameters: {
-    backgrounds: {
-      default: 'dark',
-      values: [
-        { name: 'dark', value: '#171717' },
-        { name: 'surface', value: '#1c1c1c' },
-        { name: 'light', value: '#fafafa' },
-      ],
-    },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    layout: 'centered',
-  },
-};
-
-export default preview;
-`;
-
-	// src/styles/globals.css (Tailwind v4 format)
-	const globalsCss = `@import "tailwindcss";
-
-@theme {
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 160 84% 39%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 160 84% 39%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 0 0% 9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 11%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 11%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 160 84% 52%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 15%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 15%;
-    --muted-foreground: 0 0% 64%;
-    --accent: 0 0% 15%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 50.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 18%;
-    --input: 0 0% 18%;
-    --ring: 160 84% 52%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-`;
-
-	// src/lib/utils.ts
-	const utilsTs = `import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-`;
-
-	// src/components/ui/button.tsx
-	const buttonTsx = `import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '~/lib/utils';
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };
-`;
-
-	// src/components/ui/button/button.stories.tsx
-	const buttonStories = `import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from '~/components/ui/button';
-
-const meta: Meta<typeof Button> = {
-  title: 'Components/Button',
-  component: Button,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'],
-    },
-    size: {
-      control: 'select',
-      options: ['default', 'sm', 'lg', 'icon'],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Default: Story = {
-  args: {
-    children: 'Button',
-    variant: 'default',
-    size: 'default',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    children: 'Secondary',
-    variant: 'secondary',
-  },
-};
-
-export const Destructive: Story = {
-  args: {
-    children: 'Destructive',
-    variant: 'destructive',
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    children: 'Outline',
-    variant: 'outline',
-  },
-};
-
-export const Ghost: Story = {
-  args: {
-    children: 'Ghost',
-    variant: 'ghost',
-  },
-};
-
-export const Link: Story = {
-  args: {
-    children: 'Link',
-    variant: 'link',
-  },
-};
-`;
-
-	// src/components/ui/input.tsx
-	const inputTsx = `import * as React from 'react';
-
-import { cn } from '~/lib/utils';
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = 'Input';
-
-export { Input };
-`;
-
-	// src/components/ui/card.tsx
-	const cardTsx = `import * as React from 'react';
-
-import { cn } from '~/lib/utils';
-
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      'rounded-xl border bg-card text-card-foreground shadow',
-      className,
-    )}
-    {...props}
-  />
-));
-Card.displayName = 'Card';
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('flex flex-col space-y-1.5 p-6', className)}
-    {...props}
-  />
-));
-CardHeader.displayName = 'CardHeader';
-
-const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('font-semibold leading-none tracking-tight', className)}
-    {...props}
-  />
-));
-CardTitle.displayName = 'CardTitle';
-
-const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
-    {...props}
-  />
-));
-CardDescription.displayName = 'CardDescription';
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-));
-CardContent.displayName = 'CardContent';
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('flex items-center p-6 pt-0', className)}
-    {...props}
-  />
-));
-CardFooter.displayName = 'CardFooter';
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
-`;
-
-	// src/components/ui/input/input.stories.tsx
-	const inputStories = `import type { Meta, StoryObj } from '@storybook/react';
-import { Input } from '~/components/ui/input';
-
-const meta: Meta<typeof Input> = {
-  title: 'Components/Input',
-  component: Input,
-  tags: ['autodocs'],
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url'],
-    },
-    disabled: {
-      control: 'boolean',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Input>;
-
-export const Default: Story = {
-  args: {
-    placeholder: 'Enter text...',
-  },
-};
-
-export const Email: Story = {
-  args: {
-    type: 'email',
-    placeholder: 'Enter email...',
-  },
-};
-
-export const Password: Story = {
-  args: {
-    type: 'password',
-    placeholder: 'Enter password...',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    placeholder: 'Disabled input',
-    disabled: true,
-  },
-};
-
-export const WithValue: Story = {
-  args: {
-    defaultValue: 'Hello World',
-  },
-};
-`;
-
-	// src/components/ui/card/card.stories.tsx
-	const cardStories = `import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from '~/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '~/components/ui/card';
-import { Input } from '~/components/ui/input';
-
-const meta: Meta<typeof Card> = {
-  title: 'Components/Card',
-  component: Card,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Card>;
-
-export const Default: Story = {
-  render: () => (
-    <Card className="w-[350px]">
-      <CardHeader>
-        <CardTitle>Card Title</CardTitle>
-        <CardDescription>Card description goes here.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <p>Card content goes here.</p>
-      </CardContent>
-    </Card>
-  ),
-};
-
-export const WithFooter: Story = {
-  render: () => (
-    <Card className="w-[350px]">
-      <CardHeader>
-        <CardTitle>Create Account</CardTitle>
-        <CardDescription>Enter your details below.</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <Input placeholder="Email" type="email" />
-        <Input placeholder="Password" type="password" />
-      </CardContent>
-      <CardFooter className="flex justify-between">
-        <Button variant="outline">Cancel</Button>
-        <Button>Create</Button>
-      </CardFooter>
-    </Card>
-  ),
-};
-
-export const Simple: Story = {
-  render: () => (
-    <Card className="w-[350px] p-6">
-      <p>Simple card with just content.</p>
-    </Card>
-  ),
-};
-`;
-
-	// src/components/ui/label/index.tsx
-	const labelTsx = `import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '~/lib/utils';
-
-const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-);
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };
-`;
-
-	// src/components/ui/label/label.stories.tsx
-	const labelStories = `import type { Meta, StoryObj } from '@storybook/react';
-import { Input } from '~/components/ui/input';
-import { Label } from '~/components/ui/label';
-
-const meta: Meta<typeof Label> = {
-  title: 'Components/Label',
-  component: Label,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Label>;
-
-export const Default: Story = {
-  args: {
-    children: 'Label',
-  },
-};
-
-export const WithInput: Story = {
-  render: () => (
-    <div className="grid w-full max-w-sm items-center gap-1.5">
-      <Label htmlFor="email">Email</Label>
-      <Input type="email" id="email" placeholder="Email" />
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <div className="grid w-full max-w-sm items-center gap-1.5">
-      <Label htmlFor="disabled" className="peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-        Disabled
-      </Label>
-      <Input type="text" id="disabled" placeholder="Disabled" disabled className="peer" />
-    </div>
-  ),
-};
-`;
-
-	// src/components/ui/badge/index.tsx
-	const badgeTsx = `import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '~/lib/utils';
-
-const badgeVariants = cva(
-  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
-        outline: 'text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants };
-`;
-
-	// src/components/ui/badge/badge.stories.tsx
-	const badgeStories = `import type { Meta, StoryObj } from '@storybook/react';
-import { Badge } from '~/components/ui/badge';
-
-const meta: Meta<typeof Badge> = {
-  title: 'Components/Badge',
-  component: Badge,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'secondary', 'destructive', 'outline'],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Badge>;
-
-export const Default: Story = {
-  args: {
-    children: 'Badge',
-    variant: 'default',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    children: 'Secondary',
-    variant: 'secondary',
-  },
-};
-
-export const Destructive: Story = {
-  args: {
-    children: 'Destructive',
-    variant: 'destructive',
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    children: 'Outline',
-    variant: 'outline',
-  },
-};
-`;
-
-	// src/components/ui/separator/index.tsx
-	const separatorTsx = `import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import * as React from 'react';
-
-import { cn } from '~/lib/utils';
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = 'horizontal', decorative = true, ...props },
-    ref,
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        'shrink-0 bg-border',
-        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };
-`;
-
-	// src/components/ui/separator/separator.stories.tsx
-	const separatorStories = `import type { Meta, StoryObj } from '@storybook/react';
-import { Separator } from '~/components/ui/separator';
-
-const meta: Meta<typeof Separator> = {
-  title: 'Components/Separator',
-  component: Separator,
-  tags: ['autodocs'],
-  argTypes: {
-    orientation: {
-      control: 'select',
-      options: ['horizontal', 'vertical'],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Separator>;
-
-export const Horizontal: Story = {
-  render: () => (
-    <div className="w-[300px]">
-      <div className="space-y-1">
-        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
-        <p className="text-sm text-muted-foreground">
-          An open-source UI component library.
-        </p>
-      </div>
-      <Separator className="my-4" />
-      <div className="flex h-5 items-center space-x-4 text-sm">
-        <div>Blog</div>
-        <Separator orientation="vertical" />
-        <div>Docs</div>
-        <Separator orientation="vertical" />
-        <div>Source</div>
-      </div>
-    </div>
-  ),
-};
-
-export const Vertical: Story = {
-  render: () => (
-    <div className="flex h-5 items-center space-x-4 text-sm">
-      <div>Blog</div>
-      <Separator orientation="vertical" />
-      <div>Docs</div>
-      <Separator orientation="vertical" />
-      <div>Source</div>
-    </div>
-  ),
-};
-`;
-
-	// src/components/ui/tabs/index.tsx
-	const tabsTsx = `import * as TabsPrimitive from '@radix-ui/react-tabs';
-import * as React from 'react';
-
-import { cn } from '~/lib/utils';
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
-      className,
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
-      className,
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      className,
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };
-`;
-
-	// src/components/ui/tabs/tabs.stories.tsx
-	const tabsStories = `import type { Meta, StoryObj } from '@storybook/react';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs';
-import { Button } from '~/components/ui/button';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '~/components/ui/card';
-import { Input } from '~/components/ui/input';
-import { Label } from '~/components/ui/label';
-
-const meta: Meta<typeof Tabs> = {
-  title: 'Components/Tabs',
-  component: Tabs,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-
-export const Default: Story = {
-  render: () => (
-    <Tabs defaultValue="account" className="w-[400px]">
-      <TabsList>
-        <TabsTrigger value="account">Account</TabsTrigger>
-        <TabsTrigger value="password">Password</TabsTrigger>
-      </TabsList>
-      <TabsContent value="account">
-        <Card>
-          <CardHeader>
-            <CardTitle>Account</CardTitle>
-            <CardDescription>
-              Make changes to your account here. Click save when you're done.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <div className="space-y-1">
-              <Label htmlFor="name">Name</Label>
-              <Input id="name" defaultValue="Pedro Duarte" />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="username">Username</Label>
-              <Input id="username" defaultValue="@peduarte" />
-            </div>
-          </CardContent>
-          <CardFooter>
-            <Button>Save changes</Button>
-          </CardFooter>
-        </Card>
-      </TabsContent>
-      <TabsContent value="password">
-        <Card>
-          <CardHeader>
-            <CardTitle>Password</CardTitle>
-            <CardDescription>
-              Change your password here. After saving, you'll be logged out.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <div className="space-y-1">
-              <Label htmlFor="current">Current password</Label>
-              <Input id="current" type="password" />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="new">New password</Label>
-              <Input id="new" type="password" />
-            </div>
-          </CardContent>
-          <CardFooter>
-            <Button>Save password</Button>
-          </CardFooter>
-        </Card>
-      </TabsContent>
-    </Tabs>
-  ),
-};
-`;
-
-	// src/components/ui/tooltip/index.tsx
-	const tooltipTsx = `import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as React from 'react';
-
-import { cn } from '~/lib/utils';
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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',
-        className,
-      )}
-      {...props}
-    />
-  </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
-`;
-
-	// src/components/ui/tooltip/tooltip.stories.tsx
-	const tooltipStories = `import type { Meta, StoryObj } from '@storybook/react';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '~/components/ui/tooltip';
-import { Button } from '~/components/ui/button';
-
-const meta: Meta<typeof Tooltip> = {
-  title: 'Components/Tooltip',
-  component: Tooltip,
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <TooltipProvider>
-        <Story />
-      </TooltipProvider>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof Tooltip>;
-
-export const Default: Story = {
-  render: () => (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Hover me</Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>Add to library</p>
-      </TooltipContent>
-    </Tooltip>
-  ),
-};
-
-export const Positions: Story = {
-  render: () => (
-    <div className="flex gap-4">
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="outline">Top</Button>
-        </TooltipTrigger>
-        <TooltipContent side="top">
-          <p>Top tooltip</p>
-        </TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="outline">Bottom</Button>
-        </TooltipTrigger>
-        <TooltipContent side="bottom">
-          <p>Bottom tooltip</p>
-        </TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="outline">Left</Button>
-        </TooltipTrigger>
-        <TooltipContent side="left">
-          <p>Left tooltip</p>
-        </TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="outline">Right</Button>
-        </TooltipTrigger>
-        <TooltipContent side="right">
-          <p>Right tooltip</p>
-        </TooltipContent>
-      </Tooltip>
-    </div>
-  ),
-};
-`;
-
-	// src/components/ui/dialog/index.tsx
-	const dialogTsx = `import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-import * as React from 'react';
-
-import { cn } from '~/lib/utils';
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className,
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col space-y-1.5 text-center sm:text-left',
-      className,
-    )}
-    {...props}
-  />
-);
-DialogHeader.displayName = 'DialogHeader';
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      className,
-    )}
-    {...props}
-  />
-);
-DialogFooter.displayName = 'DialogFooter';
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      'text-lg font-semibold leading-none tracking-tight',
-      className,
-    )}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};
-`;
-
-	// src/components/ui/dialog/dialog.stories.tsx
-	const dialogStories = `import type { Meta, StoryObj } from '@storybook/react';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '~/components/ui/dialog';
-import { Button } from '~/components/ui/button';
-import { Input } from '~/components/ui/input';
-import { Label } from '~/components/ui/label';
-
-const meta: Meta<typeof Dialog> = {
-  title: 'Components/Dialog',
-  component: Dialog,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Dialog>;
-
-export const Default: Story = {
-  render: () => (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">Edit Profile</Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Edit profile</DialogTitle>
-          <DialogDescription>
-            Make changes to your profile here. Click save when you're done.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="name" className="text-right">
-              Name
-            </Label>
-            <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
-          </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="username" className="text-right">
-              Username
-            </Label>
-            <Input id="username" defaultValue="@peduarte" className="col-span-3" />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button type="submit">Save changes</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  ),
-};
-
-export const Alert: Story = {
-  render: () => (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="destructive">Delete Account</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Are you absolutely sure?</DialogTitle>
-          <DialogDescription>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
-          </DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <Button variant="outline">Cancel</Button>
-          <Button variant="destructive">Delete</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  ),
-};
-`;
-
-	// src/components/ui/index.ts
-	const componentsUiIndex = `export { Button, type ButtonProps, buttonVariants } from './button.tsx';
-export { Input } from './input.tsx';
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardContent,
-} from './card.tsx';
-export { Label } from './label.tsx';
-export { Badge, type BadgeProps, badgeVariants } from './badge.tsx';
-export { Separator } from './separator.tsx';
-export { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs.tsx';
-export {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-  TooltipProvider,
-} from './tooltip.tsx';
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-} from './dialog.tsx';
-`;
-
-	// Rename component files to index.tsx (same content)
-	const buttonIndexTsx = buttonTsx;
-	const inputIndexTsx = inputTsx;
-	const cardIndexTsx = cardTsx;
-
-	// src/components/index.ts
-	const componentsIndex = `export * from './ui/index.ts';
-`;
-
-	// src/index.ts
-	const indexTs = `// @${options.name}/ui - Shared UI component library
-
-// shadcn/ui components
-export * from './components/index.ts';
-
-// Utilities
-export { cn } from './lib/utils.ts';
-`;
-
-	// .gitignore for UI package
-	const gitignore = `node_modules/
-dist/
-storybook-static/
-*.log
-`;
-
-	return [
-		{
-			path: 'packages/ui/package.json',
-			content: `${JSON.stringify(packageJson, null, 2)}\n`,
-		},
-		{
-			path: 'packages/ui/tsconfig.json',
-			content: `${JSON.stringify(tsConfig, null, 2)}\n`,
-		},
-		{
-			path: 'packages/ui/components.json',
-			content: `${JSON.stringify(componentsJson, null, 2)}\n`,
-		},
-		{
-			path: 'packages/ui/.storybook/main.ts',
-			content: storybookMain,
-		},
-		{
-			path: 'packages/ui/.storybook/preview.ts',
-			content: storybookPreview,
-		},
-		{
-			path: 'packages/ui/src/styles/globals.css',
-			content: globalsCss,
-		},
-		{
-			path: 'packages/ui/src/lib/utils.ts',
-			content: utilsTs,
-		},
-		{
-			path: 'packages/ui/src/components/ui/button/index.tsx',
-			content: buttonIndexTsx,
-		},
-		{
-			path: 'packages/ui/src/components/ui/button/button.stories.tsx',
-			content: buttonStories,
-		},
-		{
-			path: 'packages/ui/src/components/ui/input/index.tsx',
-			content: inputIndexTsx,
-		},
-		{
-			path: 'packages/ui/src/components/ui/input/input.stories.tsx',
-			content: inputStories,
-		},
-		{
-			path: 'packages/ui/src/components/ui/card/index.tsx',
-			content: cardIndexTsx,
-		},
-		{
-			path: 'packages/ui/src/components/ui/card/card.stories.tsx',
-			content: cardStories,
-		},
-		{
-			path: 'packages/ui/src/components/ui/label/index.tsx',
-			content: labelTsx,
-		},
-		{
-			path: 'packages/ui/src/components/ui/label/label.stories.tsx',
-			content: labelStories,
-		},
-		{
-			path: 'packages/ui/src/components/ui/badge/index.tsx',
-			content: badgeTsx,
-		},
-		{
-			path: 'packages/ui/src/components/ui/badge/badge.stories.tsx',
-			content: badgeStories,
-		},
-		{
-			path: 'packages/ui/src/components/ui/separator/index.tsx',
-			content: separatorTsx,
-		},
-		{
-			path: 'packages/ui/src/components/ui/separator/separator.stories.tsx',
-			content: separatorStories,
-		},
-		{
-			path: 'packages/ui/src/components/ui/tabs/index.tsx',
-			content: tabsTsx,
-		},
-		{
-			path: 'packages/ui/src/components/ui/tabs/tabs.stories.tsx',
-			content: tabsStories,
-		},
-		{
-			path: 'packages/ui/src/components/ui/tooltip/index.tsx',
-			content: tooltipTsx,
-		},
-		{
-			path: 'packages/ui/src/components/ui/tooltip/tooltip.stories.tsx',
-			content: tooltipStories,
-		},
-		{
-			path: 'packages/ui/src/components/ui/dialog/index.tsx',
-			content: dialogTsx,
-		},
-		{
-			path: 'packages/ui/src/components/ui/dialog/dialog.stories.tsx',
-			content: dialogStories,
-		},
-		{
-			path: 'packages/ui/src/components/ui/index.ts',
-			content: componentsUiIndex,
-		},
-		{
-			path: 'packages/ui/src/components/index.ts',
-			content: componentsIndex,
-		},
-		{
-			path: 'packages/ui/src/index.ts',
-			content: indexTs,
-		},
-		{
-			path: 'packages/ui/.gitignore',
-			content: gitignore,
-		},
-	];
-}