@a2v2ai/uikit 0.0.37 → 0.0.38

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  gap={8}>
+      <Typography variant="h4" className="text-white">Tab Variants</Typography>
+
+      <Flex  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  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  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 cursor-pointer 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,187 @@
+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",
+    },
+    error: {
+      control: "text",
+      description: "Error message to display",
+    },
+  },
+  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 WithBuiltInLabel: Story = {
+  render: () => (
+    <Flex gap={4} className="w-[300px]">
+      <Textarea
+        id="message"
+        label="Your Message"
+        labelVariant="body2"
+        labelColor="main-800"
+        placeholder="Type your message here."
+      />
+      <Textarea
+        id="feedback"
+        label="Feedback"
+        labelVariant="body2"
+        labelColor="main-800"
+        placeholder="Share your feedback..."
+      />
+    </Flex>
+  ),
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <Flex  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  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: () => (
+    <Textarea
+      label="Message"
+      placeholder="Type your message here."
+      error="Message is required."
+      className="w-[300px]"
+    />
+  ),
+}
+
+export const WithButton: Story = {
+  render: () => (
+    <Flex  gap={4} className="w-[300px]">
+      <Flex  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  gap={6}>
+      <Typography variant="h4" className="text-white">Textarea Variants</Typography>
+
+      <Flex direction="row" gap={6}>
+        <Flex  gap={2} className="w-[250px]">
+          <Label htmlFor="default">Default</Label>
+          <Textarea
+            id="default"
+            placeholder="Enter text..."
+          />
+        </Flex>
+
+        <Flex gap={2} className="w-[250px]">
+          <Textarea
+            id="error-state"
+            label="Error"
+            placeholder="Enter text..."
+            error="This field is required."
+          />
+        </Flex>
+      </Flex>
+
+      <Typography variant="h4" className="text-white mt-4">States</Typography>
+
+      <Flex direction="row" gap={6}>
+        <Flex  gap={2} className="w-[250px]">
+          <Label>Enabled</Label>
+          <Textarea placeholder="Type here..." />
+        </Flex>
+
+        <Flex  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  gap={2} className="w-[300px]">
+        <Flex direction="row" 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  gap={2}>
+          <Label htmlFor="comment">Leave a comment</Label>
+          <Textarea
+            id="comment"
+            placeholder="Write your comment here..."
+            rows={3}
+          />
+        </Flex>
+        <Flex direction="row" justify="end">
+          <Button size="small">Post Comment</Button>
+        </Flex>
+      </div>
+    </Flex>
+  ),
+}

package/Textarea/Textarea.tsx

@@ -0,0 +1,73 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { Label } from "../Label/Label"
+import { Typography } from "../Typography/Typography"
+import { type TextVariant, type TextColor } from "../lib/typography-types"
+
+type TextareaVariant = "default" | "error"
+type TextareaResize = "none" | "vertical" | "horizontal" | "both"
+
+const textareaVariants = cva(
+  "flex min-h-[80px] w-full rounded-lg border bg-white px-3 py-2 text-sm font-normal font-sans transition-colors placeholder:text-grey-400 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-grey-50",
+  {
+    variants: {
+      variant: {
+        default: "border-grey-300 focus-visible:border-grey-300 focus-visible:ring-[3px] focus-visible:ring-grey-300/50",
+        error: "border-error-500 focus-visible:border-error-500 focus-visible:ring-[3px] focus-visible:ring-error-200",
+      },
+      resize: {
+        none: "resize-none",
+        vertical: "resize-y",
+        horizontal: "resize-x",
+        both: "resize",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      resize: "vertical",
+    },
+  }
+)
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  variant?: TextareaVariant
+  resize?: TextareaResize
+  label?: string
+  labelVariant?: TextVariant
+  labelColor?: TextColor
+  error?: string
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, variant, resize, label, labelVariant="body2", labelColor="main-800", error, id, ...props }, ref) => {
+    const computedVariant = error ? "error" : variant
+
+    return (
+      <div className="flex flex-col gap-2 w-full">
+        {label && (
+          <Label htmlFor={id} variant={labelVariant} color={labelColor}>
+            {label}
+          </Label>
+        )}
+        <textarea
+          id={id}
+          className={cn(textareaVariants({ variant: computedVariant, resize }), className)}
+          ref={ref}
+          {...props}
+        />
+        {error && (
+          <Typography variant="caption" color="error-600" className="mt-1">
+            {error}
+          </Typography>
+        )}
+      </div>
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea, textareaVariants }
+export type { TextareaVariant, TextareaResize }