@customafk/lunas-ui 0.0.25 → 0.0.27

package/packages/stories/ui/badge.stories.tsx

@@ -1,170 +0,0 @@
-import { Badge } from '@/components/ui/badge'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-const meta = {
-  tags: ['autodocs'],
-  title: 'Components/Badge',
-  component: Badge,
-} satisfies Meta<typeof Badge>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    pill: true,
-    children: 'Badge',
-  },
-}
-
-export const Pill: Story = {
-  args: {
-    pill: true,
-    children: 'Pill Badge',
-  },
-}
-
-export const Red: Story = {
-  args: {
-    ...Default.args,
-    color: 'red',
-    children: 'Red Badge',
-  },
-}
-
-export const Orange: Story = {
-  args: {
-    ...Default.args,
-    color: 'orange',
-    children: 'Orange Badge',
-  },
-}
-
-export const Amber: Story = {
-  args: {
-    ...Default.args,
-    color: 'amber',
-    children: 'Amber Badge',
-  },
-}
-
-export const Yellow: Story = {
-  args: {
-    ...Default.args,
-    color: 'yellow',
-    children: 'Yellow Badge',
-  },
-}
-
-export const Lime: Story = {
-  args: {
-    ...Default.args,
-    color: 'lime',
-    children: 'Lime Badge',
-  },
-}
-
-export const Green: Story = {
-  args: {
-    ...Default.args,
-    color: 'green',
-    children: 'Green Badge',
-  },
-}
-
-export const Emerald: Story = {
-  args: {
-    ...Default.args,
-    color: 'emerald',
-    children: 'Emerald Badge',
-  },
-}
-
-export const Teal: Story = {
-  args: {
-    ...Default.args,
-    color: 'teal',
-    children: 'Teal Badge',
-  },
-}
-
-export const Cyan: Story = {
-  args: {
-    ...Default.args,
-    color: 'cyan',
-    children: 'Cyan Badge',
-  },
-}
-
-export const Sky: Story = {
-  args: {
-    ...Default.args,
-    color: 'sky',
-    children: 'Sky Badge',
-  },
-}
-
-export const Blue: Story = {
-  args: {
-    ...Default.args,
-    color: 'blue',
-    children: 'Blue Badge',
-  },
-}
-
-export const Indigo: Story = {
-  args: {
-    ...Default.args,
-    color: 'indigo',
-    children: 'Indigo Badge',
-  },
-}
-
-export const Violet: Story = {
-  args: {
-    ...Default.args,
-    color: 'violet',
-    children: 'Violet Badge',
-  },
-}
-
-export const Purple: Story = {
-  args: {
-    ...Default.args,
-    color: 'purple',
-    children: 'Purple Badge',
-  },
-}
-
-export const Fuchsia: Story = {
-  args: {
-    ...Default.args,
-    color: 'fuchsia',
-    children: 'Fuchsia Badge',
-  },
-}
-
-export const Pink: Story = {
-  args: {
-    ...Default.args,
-    color: 'pink',
-    children: 'Pink Badge',
-  },
-}
-
-export const Rose: Story = {
-  args: {
-    ...Default.args,
-    color: 'rose',
-    children: 'Rose Badge',
-  },
-}
-
-export const Zinc: Story = {
-  args: {
-    ...Default.args,
-    color: 'zinc',
-    children: 'Zinc Badge',
-  },
-}

package/packages/stories/ui/breadcrumb.stories.tsx

@@ -1,172 +0,0 @@
-import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { ChevronDownIcon, SlashIcon } from 'lucide-react'
-
-const meta = {
-  title: 'Components/Breadcrumb',
-  component: Breadcrumb,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Breadcrumb>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {},
-  render: () => {
-    return (
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <BreadcrumbLink asChild>
-              <a href="/">Home</a>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <DropdownMenu>
-              <DropdownMenuTrigger className="flex items-center gap-1">
-                <BreadcrumbEllipsis className="size-4" />
-                <span className="sr-only">Toggle menu</span>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start">
-                <DropdownMenuItem>Documentation</DropdownMenuItem>
-                <DropdownMenuItem>Themes</DropdownMenuItem>
-                <DropdownMenuItem>GitHub</DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <BreadcrumbLink asChild>
-              <a href="/docs/components">Components</a>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>
-    )
-  },
-}
-
-export const CustomSeparator: Story = {
-  args: {},
-  render: () => {
-    return (
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <BreadcrumbLink href="/">Home</BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator>
-            <SlashIcon />
-          </BreadcrumbSeparator>
-          <BreadcrumbItem>
-            <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>
-    )
-  },
-}
-
-export const WithDropdown: Story = {
-  args: {},
-  render: () => {
-    return (
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <BreadcrumbLink asChild>
-              <a href="/">Home</a>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator>
-            <SlashIcon />
-          </BreadcrumbSeparator>
-          <BreadcrumbItem>
-            <DropdownMenu>
-              <DropdownMenuTrigger className="flex items-center gap-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5">
-                Components
-                <ChevronDownIcon />
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start">
-                <DropdownMenuItem>Documentation</DropdownMenuItem>
-                <DropdownMenuItem>Themes</DropdownMenuItem>
-                <DropdownMenuItem>GitHub</DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator>
-            <SlashIcon />
-          </BreadcrumbSeparator>
-          <BreadcrumbItem>
-            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>
-    )
-  },
-}
-
-export const Collapsed: Story = {
-  args: {},
-  render: () => {
-    return (
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <BreadcrumbLink asChild>
-              <a href="/">Home</a>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <BreadcrumbEllipsis />
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <BreadcrumbLink asChild>
-              <a href="/docs/components">Components</a>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>
-    )
-  },
-}
-
-export const LinkComponent: Story = {
-  args: {},
-  render: () => {
-    return (
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <BreadcrumbLink asChild>
-              <a href="/">Home</a>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <BreadcrumbLink asChild>
-              <a href="/components">Components</a>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>
-    )
-  },
-}

package/packages/stories/ui/button.stories.tsx

@@ -1,181 +0,0 @@
-import { Button } from '@/components/ui/button'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-const meta = {
-  title: 'Components/Button',
-  component: Button,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Button>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    children: 'Button',
-    size: 'default',
-    className: 'w-40',
-  },
-}
-
-export const DefaultSecondary: Story = {
-  args: {
-    ...Default.args,
-    color: 'secondary',
-  },
-}
-
-export const DefaultSuccess: Story = {
-  args: {
-    ...Default.args,
-    color: 'success',
-  },
-}
-
-export const DefaultImportant: Story = {
-  args: {
-    ...Default.args,
-    color: 'important',
-  },
-}
-
-export const DefaultInfo: Story = {
-  args: {
-    ...Default.args,
-    color: 'info',
-  },
-}
-
-export const DefaultWarning: Story = {
-  args: {
-    ...Default.args,
-    color: 'warning',
-  },
-}
-
-export const DefaultDanger: Story = {
-  args: {
-    ...Default.args,
-    color: 'danger',
-  },
-}
-
-export const OutlineMuted: Story = {
-  args: {
-    ...Default.args,
-    variant: 'outline',
-    color: 'muted',
-  },
-}
-
-export const OutlinePrimary: Story = {
-  args: {
-    ...Default.args,
-    variant: 'outline',
-    color: 'primary',
-  },
-}
-
-export const OutlineSecondary: Story = {
-  args: {
-    ...Default.args,
-    variant: 'outline',
-    color: 'secondary',
-  },
-}
-
-export const OutlineSuccess: Story = {
-  args: {
-    ...Default.args,
-    variant: 'outline',
-    color: 'success',
-  },
-}
-
-export const OutlineImportant: Story = {
-  args: {
-    ...Default.args,
-    variant: 'outline',
-    color: 'important',
-  },
-}
-
-export const OutlineInfo: Story = {
-  args: {
-    ...Default.args,
-    variant: 'outline',
-    color: 'info',
-  },
-}
-
-export const OutlineWarning: Story = {
-  args: {
-    ...Default.args,
-    variant: 'outline',
-    color: 'warning',
-  },
-}
-
-export const OutlineDanger: Story = {
-  args: {
-    ...Default.args,
-    variant: 'outline',
-    color: 'danger',
-  },
-}
-
-export const GhostPrimary: Story = {
-  args: {
-    ...Default.args,
-    variant: 'ghost',
-    color: 'primary',
-  },
-}
-
-export const GhostSecondary: Story = {
-  args: {
-    ...Default.args,
-    variant: 'ghost',
-    color: 'secondary',
-  },
-}
-
-export const GhostSuccess: Story = {
-  args: {
-    ...Default.args,
-    variant: 'ghost',
-    color: 'success',
-  },
-}
-
-export const GhostImportant: Story = {
-  args: {
-    ...Default.args,
-    variant: 'ghost',
-    color: 'important',
-  },
-}
-
-export const GhostInfo: Story = {
-  args: {
-    ...Default.args,
-    variant: 'ghost',
-    color: 'info',
-  },
-}
-
-export const GhostWarning: Story = {
-  args: {
-    ...Default.args,
-    variant: 'ghost',
-    color: 'warning',
-  },
-}
-
-export const GhostDanger: Story = {
-  args: {
-    ...Default.args,
-    variant: 'ghost',
-    color: 'danger',
-  },
-}

package/packages/stories/ui/card.stories.tsx

@@ -1,58 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Label } from '@/components/ui/label'
-import { Input } from '@/components/ui/input'
-
-const meta = {
-  title: 'Components/Card',
-  component: Card,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Card>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {},
-  render: () => {
-    return (
-      <Card className="w-full max-w-sm">
-        <CardHeader>
-          <CardTitle>Login to your account</CardTitle>
-          <CardDescription>Enter your email below to login to your account</CardDescription>
-          <CardAction>
-            <Button variant="ghost">Sign Up</Button>
-          </CardAction>
-        </CardHeader>
-        <CardContent>
-          <form>
-            <div className="flex flex-col gap-6">
-              <div className="grid gap-2">
-                <Label htmlFor="email">Email</Label>
-                <Input id="email" type="email" placeholder="m@example.com" required />
-              </div>
-              <div className="grid gap-2">
-                <div className="flex items-center">
-                  <Label htmlFor="password">Password</Label>
-                  <a href="#" className="ml-auto inline-block text-sm underline-offset-4 hover:underline">
-                    Forgot your password?
-                  </a>
-                </div>
-                <Input id="password" type="password" required />
-              </div>
-            </div>
-          </form>
-        </CardContent>
-        <CardFooter className="flex-col gap-2">
-          <Button type="submit" className="w-full">
-            Login
-          </Button>
-          <Button variant="outline" color="muted" className="w-full">
-            Login with Google
-          </Button>
-        </CardFooter>
-      </Card>
-    )
-  },
-}

package/packages/stories/ui/checkbox.stories.tsx

@@ -1,48 +0,0 @@
-import { Checkbox } from '@/components/ui/checkbox'
-import { Label } from '@/components/ui/label'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-const meta = {
-  title: 'Components/Checkbox',
-  component: Checkbox,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Checkbox>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {},
-  render: () => {
-    return (
-      <div className="flex flex-col gap-6">
-        <div className="flex items-center gap-3">
-          <Checkbox id="terms" />
-          <Label htmlFor="terms">Accept terms and conditions</Label>
-        </div>
-        <div className="flex items-start gap-3">
-          <Checkbox id="terms-2" defaultChecked />
-          <div className="grid gap-2">
-            <Label htmlFor="terms-2">Accept terms and conditions</Label>
-            <p className="text-muted-foreground text-sm">By clicking this checkbox, you agree to the terms and conditions.</p>
-          </div>
-        </div>
-        <div className="flex items-start gap-3">
-          <Checkbox id="toggle" disabled />
-          <Label htmlFor="toggle">Enable notifications</Label>
-        </div>
-        <Label className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
-          <Checkbox
-            id="toggle-2"
-            defaultChecked
-            className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
-          />
-          <div className="grid gap-1.5 font-normal">
-            <p className="text-sm leading-none font-medium">Enable notifications</p>
-            <p className="text-muted-foreground text-sm">You can enable or disable notifications at any time.</p>
-          </div>
-        </Label>
-      </div>
-    )
-  },
-}

package/packages/stories/ui/command.stories.tsx

@@ -1,58 +0,0 @@
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '@/components/ui/command'
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
-
-const meta = {
-  title: 'Components/Command',
-  component: Command,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Command>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {},
-  render: () => {
-    return (
-      <Command className="rounded-lg border shadow-md md:min-w-[450px]">
-        <CommandInput placeholder="Type a command or search..." />
-        <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Suggestions">
-            <CommandItem>
-              <Calendar />
-              <span>Calendar</span>
-            </CommandItem>
-            <CommandItem>
-              <Smile />
-              <span>Search Emoji</span>
-            </CommandItem>
-            <CommandItem disabled>
-              <Calculator />
-              <span>Calculator</span>
-            </CommandItem>
-          </CommandGroup>
-          <CommandSeparator />
-          <CommandGroup heading="Settings">
-            <CommandItem>
-              <User />
-              <span>Profile</span>
-              <CommandShortcut>⌘P</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <CreditCard />
-              <span>Billing</span>
-              <CommandShortcut>⌘B</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <Settings />
-              <span>Settings</span>
-              <CommandShortcut>⌘S</CommandShortcut>
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
-      </Command>
-    )
-  },
-}