@a2v2ai/uikit 0.0.38 → 0.0.39

package/Tabs/Tabs.stories.tsx

@@ -1,197 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,187 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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 }