@a2v2ai/uikit 0.0.2 → 0.0.3

package/Switch/Switch.stories.tsx

@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Label } from "../Label/Label"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { Switch } from "./Switch"
+
+const meta: Meta<typeof Switch> = {
+  title: "Components/Switch",
+  component: Switch,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["small", "regular"],
+      description: "The size of the switch",
+    },
+    checked: {
+      control: "boolean",
+      description: "The checked state",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the switch is disabled",
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => <Switch />,
+}
+
+export const Checked: Story = {
+  render: () => <Switch defaultChecked />,
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <Flex align="center" gap={2}>
+      <Switch id="airplane-mode" />
+      <Label htmlFor="airplane-mode">Airplane Mode</Label>
+    </Flex>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <Flex direction="column" gap={3}>
+      <Flex align="center" gap={2}>
+        <Switch id="disabled" disabled />
+        <Label htmlFor="disabled" className="opacity-50">Disabled</Label>
+      </Flex>
+      <Flex align="center" gap={2}>
+        <Switch id="disabled-checked" disabled defaultChecked />
+        <Label htmlFor="disabled-checked" className="opacity-50">Disabled checked</Label>
+      </Flex>
+    </Flex>
+  ),
+}
+
+export const Small: Story = {
+  render: () => (
+    <Flex align="center" gap={2}>
+      <Switch id="small" size="small" />
+      <Label htmlFor="small" className="text-sm">Small switch</Label>
+    </Flex>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex direction="column" gap={6}>
+      <Typography variant="h4" className="text-white">Switch States</Typography>
+
+      <Flex direction="column" gap={4}>
+        <Flex align="center" gap={2}>
+          <Switch id="off" />
+          <Label htmlFor="off">Off</Label>
+        </Flex>
+
+        <Flex align="center" gap={2}>
+          <Switch id="on" defaultChecked />
+          <Label htmlFor="on">On</Label>
+        </Flex>
+
+        <Flex align="center" gap={2}>
+          <Switch id="disabled-off" disabled />
+          <Label htmlFor="disabled-off" className="opacity-50">Disabled Off</Label>
+        </Flex>
+
+        <Flex align="center" gap={2}>
+          <Switch id="disabled-on" disabled defaultChecked />
+          <Label htmlFor="disabled-on" className="opacity-50">Disabled On</Label>
+        </Flex>
+      </Flex>
+
+      <Typography variant="h4" className="text-white mt-4">Sizes</Typography>
+
+      <Flex direction="column" gap={4}>
+        <Flex align="center" gap={2}>
+          <Switch id="small-size" size="small" defaultChecked />
+          <Label htmlFor="small-size" className="text-sm">Small</Label>
+        </Flex>
+
+        <Flex align="center" gap={2}>
+          <Switch id="regular-size" size="regular" defaultChecked />
+          <Label htmlFor="regular-size">Regular</Label>
+        </Flex>
+      </Flex>
+
+      <Typography variant="h4" className="text-white mt-4">Settings Example</Typography>
+
+      <div className="w-[300px] bg-white rounded-lg p-4 space-y-4">
+        <Flex justify="between" align="center">
+          <Flex direction="column" gap={1}>
+            <Typography variant="body2">Dark Mode</Typography>
+            <Typography variant="caption" color="grey-500">Enable dark theme</Typography>
+          </Flex>
+          <Switch defaultChecked />
+        </Flex>
+
+        <Flex justify="between" align="center">
+          <Flex direction="column" gap={1}>
+            <Typography variant="body2">Notifications</Typography>
+            <Typography variant="caption" color="grey-500">Receive push notifications</Typography>
+          </Flex>
+          <Switch />
+        </Flex>
+
+        <Flex justify="between" align="center">
+          <Flex direction="column" gap={1}>
+            <Typography variant="body2">Auto-save</Typography>
+            <Typography variant="caption" color="grey-500">Save changes automatically</Typography>
+          </Flex>
+          <Switch defaultChecked />
+        </Flex>
+      </div>
+    </Flex>
+  ),
+}

package/Switch/Switch.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+type SwitchSize = "small" | "regular"
+
+const switchVariants = cva(
+  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-main-950 data-[state=unchecked]:bg-grey-200",
+  {
+    variants: {
+      size: {
+        small: "h-5 w-9",
+        regular: "h-6 w-11",
+      },
+    },
+    defaultVariants: {
+      size: "regular",
+    },
+  }
+)
+
+const switchThumbVariants = cva(
+  "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0",
+  {
+    variants: {
+      size: {
+        small: "size-4 data-[state=checked]:translate-x-4",
+        regular: "size-5 data-[state=checked]:translate-x-5",
+      },
+    },
+    defaultVariants: {
+      size: "regular",
+    },
+  }
+)
+
+export interface SwitchProps
+  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
+  size?: SwitchSize
+}
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  SwitchProps
+>(({ className, size, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    className={cn(switchVariants({ size }), className)}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitive.Thumb className={cn(switchThumbVariants({ size }))} />
+  </SwitchPrimitive.Root>
+))
+Switch.displayName = SwitchPrimitive.Root.displayName
+
+export { Switch, switchVariants }
+export type { SwitchSize }

package/Tabs/Tabs.stories.tsx

@@ -0,0 +1,197 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../Card/Card"
+import { Button } from "../Button/Button"
+import { Input } from "../Input/Input"
+import { Label } from "../Label/Label"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./Tabs"
+
+const meta: Meta<typeof Tabs> = {
+  title: "Components/Tabs",
+  component: Tabs,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+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>
+  ),
+}
+
+export const Simple: Story = {
+  render: () => (
+    <Tabs defaultValue="tab1" className="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab1" className="p-4 bg-white rounded-lg mt-2">
+        <p>Content for Tab 1</p>
+      </TabsContent>
+      <TabsContent value="tab2" className="p-4 bg-white rounded-lg mt-2">
+        <p>Content for Tab 2</p>
+      </TabsContent>
+      <TabsContent value="tab3" className="p-4 bg-white rounded-lg mt-2">
+        <p>Content for Tab 3</p>
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const Outline: Story = {
+  render: () => (
+    <Tabs defaultValue="overview" className="w-[400px]">
+      <TabsList variant="outline">
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        <TabsTrigger value="reports">Reports</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview" className="p-4 bg-white rounded-lg mt-2">
+        <p>Overview content</p>
+      </TabsContent>
+      <TabsContent value="analytics" className="p-4 bg-white rounded-lg mt-2">
+        <p>Analytics content</p>
+      </TabsContent>
+      <TabsContent value="reports" className="p-4 bg-white rounded-lg mt-2">
+        <p>Reports content</p>
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <Tabs defaultValue="active" className="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="active">Active</TabsTrigger>
+        <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
+        <TabsTrigger value="another">Another</TabsTrigger>
+      </TabsList>
+      <TabsContent value="active" className="p-4 bg-white rounded-lg mt-2">
+        <p>Active tab content</p>
+      </TabsContent>
+      <TabsContent value="another" className="p-4 bg-white rounded-lg mt-2">
+        <p>Another tab content</p>
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex direction="column" gap={8}>
+      <Typography variant="h4" className="text-white">Tab Variants</Typography>
+
+      <Flex direction="column" gap={4}>
+        <Typography variant="body2" className="text-grey-400">Default</Typography>
+        <Tabs defaultValue="tab1" className="w-[350px]">
+          <TabsList>
+            <TabsTrigger value="tab1">First</TabsTrigger>
+            <TabsTrigger value="tab2">Second</TabsTrigger>
+            <TabsTrigger value="tab3">Third</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1" className="p-4 bg-white rounded-lg mt-2">
+            First tab content
+          </TabsContent>
+          <TabsContent value="tab2" className="p-4 bg-white rounded-lg mt-2">
+            Second tab content
+          </TabsContent>
+          <TabsContent value="tab3" className="p-4 bg-white rounded-lg mt-2">
+            Third tab content
+          </TabsContent>
+        </Tabs>
+      </Flex>
+
+      <Flex direction="column" gap={4}>
+        <Typography variant="body2" className="text-grey-400">Outline</Typography>
+        <Tabs defaultValue="tab1" className="w-[350px]">
+          <TabsList variant="outline">
+            <TabsTrigger value="tab1">First</TabsTrigger>
+            <TabsTrigger value="tab2">Second</TabsTrigger>
+            <TabsTrigger value="tab3">Third</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1" className="p-4 bg-white rounded-lg mt-2">
+            First tab content
+          </TabsContent>
+          <TabsContent value="tab2" className="p-4 bg-white rounded-lg mt-2">
+            Second tab content
+          </TabsContent>
+          <TabsContent value="tab3" className="p-4 bg-white rounded-lg mt-2">
+            Third tab content
+          </TabsContent>
+        </Tabs>
+      </Flex>
+
+      <Flex direction="column" gap={4}>
+        <Typography variant="body2" className="text-grey-400">With Disabled Tab</Typography>
+        <Tabs defaultValue="enabled1" className="w-[350px]">
+          <TabsList>
+            <TabsTrigger value="enabled1">Enabled</TabsTrigger>
+            <TabsTrigger value="disabled1" disabled>Disabled</TabsTrigger>
+            <TabsTrigger value="enabled2">Enabled</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </Flex>
+    </Flex>
+  ),
+}

package/Tabs/Tabs.tsx

@@ -0,0 +1,74 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+type TabsListVariant = "default" | "outline"
+
+const Tabs = TabsPrimitive.Root
+
+const tabsListVariants = cva(
+  "inline-flex items-center justify-center rounded-lg bg-grey-100 p-1 text-grey-500",
+  {
+    variants: {
+      variant: {
+        default: "bg-grey-100",
+        outline: "bg-transparent border border-grey-200",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface TabsListProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
+  variant?: TabsListVariant
+}
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  TabsListProps
+>(({ className, variant, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(tabsListVariants({ variant }), 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-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-main-950 data-[state=active]:shadow-sm",
+      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-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-950 focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
+export type { TabsListVariant }

package/Textarea/Textarea.stories.tsx

@@ -0,0 +1,170 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Label } from "../Label/Label"
+import { Button } from "../Button/Button"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { Textarea } from "./Textarea"
+
+const meta: Meta<typeof Textarea> = {
+  title: "Components/Textarea",
+  component: Textarea,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "error"],
+      description: "The visual variant",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the textarea is disabled",
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => <Textarea placeholder="Type your message here." className="w-[300px]" />,
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <Flex direction="column" gap={2} className="w-[300px]">
+      <Label htmlFor="message">Your message</Label>
+      <Textarea placeholder="Type your message here." id="message" />
+    </Flex>
+  ),
+}
+
+export const WithText: Story = {
+  render: () => (
+    <Flex direction="column" gap={2} className="w-[300px]">
+      <Label htmlFor="bio">Bio</Label>
+      <Textarea placeholder="Tell us a little bit about yourself" id="bio" />
+      <Typography variant="caption" color="grey-500">
+        You can @mention other users and organizations.
+      </Typography>
+    </Flex>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <Textarea placeholder="This textarea is disabled" disabled className="w-[300px]" />
+  ),
+}
+
+export const Error: Story = {
+  render: () => (
+    <Flex direction="column" gap={2} className="w-[300px]">
+      <Label htmlFor="message-error" variant="error">Message</Label>
+      <Textarea
+        placeholder="Type your message here."
+        id="message-error"
+        variant="error"
+      />
+      <Typography variant="caption" color="error-500">
+        Message is required.
+      </Typography>
+    </Flex>
+  ),
+}
+
+export const WithButton: Story = {
+  render: () => (
+    <Flex direction="column" gap={4} className="w-[300px]">
+      <Flex direction="column" gap={2}>
+        <Label htmlFor="feedback">Send us your feedback</Label>
+        <Textarea
+          placeholder="What can we improve?"
+          id="feedback"
+        />
+      </Flex>
+      <Button>Submit</Button>
+    </Flex>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex direction="column" gap={6}>
+      <Typography variant="h4" className="text-white">Textarea Variants</Typography>
+
+      <Flex gap={6}>
+        <Flex direction="column" gap={2} className="w-[250px]">
+          <Label htmlFor="default">Default</Label>
+          <Textarea
+            id="default"
+            placeholder="Enter text..."
+          />
+        </Flex>
+
+        <Flex direction="column" gap={2} className="w-[250px]">
+          <Label htmlFor="error-state" variant="error">Error</Label>
+          <Textarea
+            id="error-state"
+            placeholder="Enter text..."
+            variant="error"
+          />
+          <Typography variant="caption" color="error-500">
+            This field is required.
+          </Typography>
+        </Flex>
+      </Flex>
+
+      <Typography variant="h4" className="text-white mt-4">States</Typography>
+
+      <Flex gap={6}>
+        <Flex direction="column" gap={2} className="w-[250px]">
+          <Label>Enabled</Label>
+          <Textarea placeholder="Type here..." />
+        </Flex>
+
+        <Flex direction="column" gap={2} className="w-[250px]">
+          <Label className="opacity-50">Disabled</Label>
+          <Textarea placeholder="Disabled textarea" disabled />
+        </Flex>
+      </Flex>
+
+      <Typography variant="h4" className="text-white mt-4">With Character Count</Typography>
+
+      <Flex direction="column" gap={2} className="w-[300px]">
+        <Flex justify="between">
+          <Label htmlFor="with-count">Description</Label>
+          <Typography variant="caption" color="grey-500">0/200</Typography>
+        </Flex>
+        <Textarea
+          id="with-count"
+          placeholder="Describe your project..."
+          rows={4}
+        />
+      </Flex>
+
+      <Typography variant="h4" className="text-white mt-4">Comment Form Example</Typography>
+
+      <div className="w-[350px] bg-white rounded-lg p-4 space-y-4">
+        <Flex direction="column" gap={2}>
+          <Label htmlFor="comment">Leave a comment</Label>
+          <Textarea
+            id="comment"
+            placeholder="Write your comment here..."
+            rows={3}
+          />
+        </Flex>
+        <Flex justify="end">
+          <Button size="small">Post Comment</Button>
+        </Flex>
+      </div>
+    </Flex>
+  ),
+}