@wakastellar/ui 2.3.5 → 3.0.0

package/src/components/progress/Progress.stories.tsx

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Progress } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof Progress> = {
+  title: 'Components/Progress',
+  component: Progress,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Displays an indicator showing the completion progress of a task.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'The progress value (0-100)',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Progress>
+
+export const Default: Story = {
+  args: {
+    value: 60,
+    className: 'w-[300px]',
+  },
+}
+
+export const Values: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[300px]">
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">0%</span>
+        <Progress value={0} />
+      </div>
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">25%</span>
+        <Progress value={25} />
+      </div>
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">50%</span>
+        <Progress value={50} />
+      </div>
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">75%</span>
+        <Progress value={75} />
+      </div>
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">100%</span>
+        <Progress value={100} />
+      </div>
+    </div>
+  ),
+}
+
+export const Animated: Story = {
+  render: function AnimatedProgress() {
+    const [progress, setProgress] = React.useState(13)
+
+    React.useEffect(() => {
+      const timer = setTimeout(() => setProgress(66), 500)
+      return () => clearTimeout(timer)
+    }, [])
+
+    return <Progress value={progress} className="w-[300px]" />
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[300px]">
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">Small (h-2)</span>
+        <Progress value={60} className="h-2" />
+      </div>
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">Default (h-4)</span>
+        <Progress value={60} />
+      </div>
+      <div className="space-y-1">
+        <span className="text-sm text-muted-foreground">Large (h-6)</span>
+        <Progress value={60} className="h-6" />
+      </div>
+    </div>
+  ),
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="w-[300px] space-y-2">
+      <div className="flex justify-between text-sm">
+        <span>Uploading...</span>
+        <span className="text-muted-foreground">73%</span>
+      </div>
+      <Progress value={73} />
+    </div>
+  ),
+}

package/src/components/radio-group/RadioGroup.stories.tsx

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { RadioGroup, RadioGroupItem } from './index'
+import { Label } from '../label'
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'Components/RadioGroup',
+  component: RadioGroup,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A set of checkable buttons where only one can be checked at a time.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof RadioGroup>
+
+export const Default: Story = {
+  args: {
+    defaultValue: 'comfortable',
+  },
+  render: (args) => (
+    <RadioGroup {...args}>
+      <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>
+  ),
+}
+
+export const Horizontal: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-1" className="flex gap-4">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-1" id="h1" />
+        <Label htmlFor="h1">Option 1</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-2" id="h2" />
+        <Label htmlFor="h2">Option 2</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-3" id="h3" />
+        <Label htmlFor="h3">Option 3</Label>
+      </div>
+    </RadioGroup>
+  ),
+}
+
+export const WithDescription: Story = {
+  render: () => (
+    <RadioGroup defaultValue="card" className="gap-4">
+      <div className="flex items-start space-x-3">
+        <RadioGroupItem value="card" id="card" className="mt-1" />
+        <div className="grid gap-1.5 leading-none">
+          <Label htmlFor="card">Card payment</Label>
+          <p className="text-sm text-muted-foreground">
+            Pay with credit or debit card
+          </p>
+        </div>
+      </div>
+      <div className="flex items-start space-x-3">
+        <RadioGroupItem value="paypal" id="paypal" className="mt-1" />
+        <div className="grid gap-1.5 leading-none">
+          <Label htmlFor="paypal">PayPal</Label>
+          <p className="text-sm text-muted-foreground">
+            Pay with your PayPal account
+          </p>
+        </div>
+      </div>
+      <div className="flex items-start space-x-3">
+        <RadioGroupItem value="bank" id="bank" className="mt-1" />
+        <div className="grid gap-1.5 leading-none">
+          <Label htmlFor="bank">Bank transfer</Label>
+          <p className="text-sm text-muted-foreground">
+            Pay via bank transfer
+          </p>
+        </div>
+      </div>
+    </RadioGroup>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-1">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-1" id="d1" />
+        <Label htmlFor="d1">Available</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-2" id="d2" disabled />
+        <Label htmlFor="d2" className="text-muted-foreground">Disabled</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-3" id="d3" />
+        <Label htmlFor="d3">Available</Label>
+      </div>
+    </RadioGroup>
+  ),
+}
+
+export const FormExample: Story = {
+  render: () => (
+    <form className="w-[300px] space-y-6">
+      <div className="space-y-3">
+        <Label>Notification preferences</Label>
+        <RadioGroup defaultValue="all">
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="all" id="notify-all" />
+            <Label htmlFor="notify-all">All notifications</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="important" id="notify-important" />
+            <Label htmlFor="notify-important">Important only</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="none" id="notify-none" />
+            <Label htmlFor="notify-none">None</Label>
+          </div>
+        </RadioGroup>
+      </div>
+    </form>
+  ),
+}

package/src/components/scroll-area/ScrollArea.stories.tsx

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ScrollArea, ScrollBar } from './index'
+import { Separator } from '../separator'
+
+const meta: Meta<typeof ScrollArea> = {
+  title: 'Components/ScrollArea',
+  component: ScrollArea,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Augments native scroll functionality for custom, cross-browser styling.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof ScrollArea>
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+)
+
+export const Default: Story = {
+  args: {
+    className: 'h-72 w-48 rounded-md border',
+  },
+  render: (args) => (
+    <ScrollArea {...args}>
+      <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>
+  ),
+}
+
+const works = [
+  { artist: "Ornella Binni", art: "Artwork 1" },
+  { artist: "Tom Byrom", art: "Artwork 2" },
+  { artist: "Vladimir Malyutin", art: "Artwork 3" },
+  { artist: "Jane Doe", art: "Artwork 4" },
+  { artist: "John Smith", art: "Artwork 5" },
+  { artist: "Alice Brown", art: "Artwork 6" },
+]
+
+export const Horizontal: Story = {
+  render: () => (
+    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+      <div className="flex w-max space-x-4 p-4">
+        {works.map((work) => (
+          <figure key={work.artist} className="shrink-0">
+            <div className="h-32 w-48 rounded-md bg-muted" />
+            <figcaption className="pt-2 text-xs text-muted-foreground">
+              Photo by{" "}
+              <span className="font-semibold text-foreground">
+                {work.artist}
+              </span>
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  ),
+}
+
+const items = Array.from({ length: 20 }).map((_, i) => ({
+  id: i + 1,
+  title: `Item ${i + 1}`,
+  description: `Description for item ${i + 1}`,
+}))
+
+export const List: Story = {
+  render: () => (
+    <ScrollArea className="h-[300px] w-[350px] rounded-md border p-4">
+      <h4 className="mb-4 text-sm font-medium leading-none">Items</h4>
+      <div className="space-y-4">
+        {items.map((item) => (
+          <div key={item.id} className="flex items-center space-x-4">
+            <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center text-xs">
+              {item.id}
+            </div>
+            <div>
+              <p className="text-sm font-medium">{item.title}</p>
+              <p className="text-xs text-muted-foreground">{item.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+}
+
+export const Card: Story = {
+  render: () => (
+    <div className="rounded-lg border w-[350px]">
+      <div className="p-4 border-b">
+        <h3 className="font-medium">Notifications</h3>
+        <p className="text-sm text-muted-foreground">You have 20 unread messages.</p>
+      </div>
+      <ScrollArea className="h-[200px]">
+        <div className="p-4 space-y-4">
+          {Array.from({ length: 10 }).map((_, i) => (
+            <div key={i} className="flex items-start space-x-3">
+              <div className="h-8 w-8 rounded-full bg-primary/10" />
+              <div className="flex-1">
+                <p className="text-sm font-medium">Notification {i + 1}</p>
+                <p className="text-xs text-muted-foreground">2 minutes ago</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  ),
+}
+
+export const CodeBlock: Story = {
+  render: () => (
+    <ScrollArea className="h-[200px] w-[400px] rounded-md border bg-muted/50 p-4">
+      <pre className="text-sm">
+        <code>{`function fibonacci(n) {
+  if (n <= 1) return n;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+}
+
+// Example usage
+console.log(fibonacci(10)); // 55
+
+// More complex example
+const memoFib = (function() {
+  const cache = {};
+  return function fib(n) {
+    if (n in cache) return cache[n];
+    if (n <= 1) return n;
+    cache[n] = fib(n - 1) + fib(n - 2);
+    return cache[n];
+  };
+})();
+
+console.log(memoFib(100));`}</code>
+      </pre>
+    </ScrollArea>
+  ),
+}

package/src/components/select/Select.stories.tsx

@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+  SelectSeparator,
+} from './index'
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Displays a list of options for the user to pick from, triggered by a button.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Select>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <Select {...args}>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="orange">Orange</SelectItem>
+        <SelectItem value="grape">Grape</SelectItem>
+        <SelectItem value="mango">Mango</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+}
+
+export const WithGroups: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[200px]">
+        <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>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>Europe</SelectLabel>
+          <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
+          <SelectItem value="cet">Central European Time (CET)</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+}
+
+export const WithDefaultValue: Story = {
+  render: () => (
+    <Select defaultValue="banana">
+      <SelectTrigger className="w-[180px]">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="orange">Orange</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Select disabled>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="Disabled select" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+        </SelectContent>
+      </Select>
+      <Select>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana" disabled>Banana (out of stock)</SelectItem>
+          <SelectItem value="orange">Orange</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  ),
+}
+
+export const WithForm: Story = {
+  render: () => (
+    <form className="space-y-4 w-[300px]">
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Country</label>
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Select a country" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="us">United States</SelectItem>
+            <SelectItem value="uk">United Kingdom</SelectItem>
+            <SelectItem value="fr">France</SelectItem>
+            <SelectItem value="de">Germany</SelectItem>
+            <SelectItem value="jp">Japan</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Language</label>
+        <Select defaultValue="en">
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="en">English</SelectItem>
+            <SelectItem value="fr">French</SelectItem>
+            <SelectItem value="de">German</SelectItem>
+            <SelectItem value="ja">Japanese</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </form>
+  ),
+}

package/src/components/separator/Separator.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Separator } from './index'
+
+const meta: Meta<typeof Separator> = {
+  title: 'Components/Separator',
+  component: Separator,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Visually or semantically separates content.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'The orientation of the separator',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Separator>
+
+export const Default: Story = {
+  args: {
+    className: 'my-4',
+  },
+  render: (args) => (
+    <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 {...args} />
+      <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 Horizontal: Story = {
+  render: () => (
+    <div className="w-[300px] space-y-4">
+      <p className="text-sm">Section 1 content goes here.</p>
+      <Separator />
+      <p className="text-sm">Section 2 content goes here.</p>
+      <Separator />
+      <p className="text-sm">Section 3 content goes here.</p>
+    </div>
+  ),
+}
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex h-10 items-center space-x-4">
+      <span className="text-sm">Home</span>
+      <Separator orientation="vertical" />
+      <span className="text-sm">About</span>
+      <Separator orientation="vertical" />
+      <span className="text-sm">Contact</span>
+    </div>
+  ),
+}
+
+export const InCard: Story = {
+  render: () => (
+    <div className="w-[350px] rounded-lg border p-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="font-medium">Subscription</h3>
+          <p className="text-sm text-muted-foreground">Manage your plan</p>
+        </div>
+        <span className="text-sm font-medium text-primary">Pro Plan</span>
+      </div>
+      <Separator className="my-4" />
+      <div className="space-y-2">
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">Next billing date</span>
+          <span>January 1, 2024</span>
+        </div>
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">Amount</span>
+          <span>$29/month</span>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const WithIcons: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <div className="flex items-center space-x-1">
+        <span className="text-sm">10 likes</span>
+      </div>
+      <Separator orientation="vertical" className="h-4" />
+      <div className="flex items-center space-x-1">
+        <span className="text-sm">5 comments</span>
+      </div>
+      <Separator orientation="vertical" className="h-4" />
+      <div className="flex items-center space-x-1">
+        <span className="text-sm">3 shares</span>
+      </div>
+    </div>
+  ),
+}