@a2v2ai/uikit 0.0.36 → 0.0.38

package/Popover/Popover.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+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 { Popover, PopoverTrigger, PopoverContent } from "./Popover"
+
+const meta: Meta<typeof Popover> = {
+  title: "Components/Popover",
+  component: Popover,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <Flex  gap={2}>
+          <Typography variant="body1" className="font-medium">Dimensions</Typography>
+          <Typography variant="body2" color="grey-500">Set the dimensions for the layer.</Typography>
+        </Flex>
+        <Flex  gap={4} className="mt-4">
+          <Flex  gap={2}>
+            <Label htmlFor="width">Width</Label>
+            <Input id="width" defaultValue="100%" />
+          </Flex>
+          <Flex  gap={2}>
+            <Label htmlFor="height">Height</Label>
+            <Input id="height" defaultValue="25px" />
+          </Flex>
+        </Flex>
+      </PopoverContent>
+    </Popover>
+  ),
+}
+
+export const Simple: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Info</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <Typography variant="body2">
+          This is a simple popover with some informational text.
+        </Typography>
+      </PopoverContent>
+    </Popover>
+  ),
+}
+
+export const WithForm: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button>Update email</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <Flex  gap={4}>
+          <Flex  gap={1}>
+            <Typography variant="body1" className="font-medium">Update email</Typography>
+            <Typography variant="caption" color="grey-500">Change your account email address.</Typography>
+          </Flex>
+          <Flex  gap={2}>
+            <Label htmlFor="new-email">New email</Label>
+            <Input id="new-email" type="email" placeholder="Enter new email" />
+          </Flex>
+          <Button size="small">Save changes</Button>
+        </Flex>
+      </PopoverContent>
+    </Popover>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex  gap={6}>
+      <Typography variant="h4" className="text-white">Popover Examples</Typography>
+
+      <Flex direction="row" gap={4}>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline">Simple</Button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <Typography variant="body2">A simple popover content.</Typography>
+          </PopoverContent>
+        </Popover>
+
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline">With Title</Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-80">
+            <Flex  gap={2}>
+              <Typography variant="body1" className="font-medium">Popover Title</Typography>
+              <Typography variant="body2" color="grey-500">
+                This popover has a title and description.
+              </Typography>
+            </Flex>
+          </PopoverContent>
+        </Popover>
+
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline">With Form</Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-80">
+            <Flex  gap={3}>
+              <Typography variant="body1" className="font-medium">Settings</Typography>
+              <Flex  gap={2}>
+                <Label htmlFor="setting-name">Name</Label>
+                <Input id="setting-name" placeholder="Enter name" />
+              </Flex>
+              <Button size="small">Save</Button>
+            </Flex>
+          </PopoverContent>
+        </Popover>
+      </Flex>
+    </Flex>
+  ),
+}

package/Popover/Popover.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "../lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-lg border border-grey-200 bg-white p-4 text-main-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

package/Progress/Progress.stories.tsx

@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState, useEffect } from "react"
+
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { Progress } from "./Progress"
+
+function AnimatedProgress() {
+  const [progress, setProgress] = useState(13)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setProgress(66), 500)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return <Progress value={progress} className="w-[300px]" />
+}
+
+const meta: Meta<typeof Progress> = {
+  title: "Components/Progress",
+  component: Progress,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    value: {
+      control: { type: "range", min: 0, max: 100 },
+      description: "The progress value (0-100)",
+    },
+    size: {
+      control: "select",
+      options: ["small", "regular", "large"],
+      description: "The size of the progress bar",
+    },
+    variant: {
+      control: "select",
+      options: ["default", "success", "warning", "destructive"],
+      description: "The visual variant",
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => <Progress value={33} className="w-[300px]" />,
+}
+
+export const Complete: Story = {
+  render: () => <Progress value={100} className="w-[300px]" />,
+}
+
+export const Animated: Story = {
+  render: () => <AnimatedProgress />,
+}
+
+export const Small: Story = {
+  render: () => <Progress value={60} size="small" className="w-[300px]" />,
+}
+
+export const Large: Story = {
+  render: () => <Progress value={60} size="large" className="w-[300px]" />,
+}
+
+export const Success: Story = {
+  render: () => <Progress value={100} variant="success" className="w-[300px]" />,
+}
+
+export const Warning: Story = {
+  render: () => <Progress value={75} variant="warning" className="w-[300px]" />,
+}
+
+export const Destructive: Story = {
+  render: () => <Progress value={90} variant="destructive" className="w-[300px]" />,
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex  gap={6} className="w-[400px]">
+      <Typography variant="h4" className="text-white">Progress Sizes</Typography>
+
+      <Flex  gap={4}>
+        <Flex  gap={2}>
+          <Typography variant="caption" className="text-grey-400">Small</Typography>
+          <Progress value={40} size="small" />
+        </Flex>
+
+        <Flex  gap={2}>
+          <Typography variant="caption" className="text-grey-400">Regular</Typography>
+          <Progress value={60} size="regular" />
+        </Flex>
+
+        <Flex  gap={2}>
+          <Typography variant="caption" className="text-grey-400">Large</Typography>
+          <Progress value={80} size="large" />
+        </Flex>
+      </Flex>
+
+      <Typography variant="h4" className="text-white mt-4">Progress Variants</Typography>
+
+      <Flex  gap={4}>
+        <Flex  gap={2}>
+          <Typography variant="caption" className="text-grey-400">Default (25%)</Typography>
+          <Progress value={25} />
+        </Flex>
+
+        <Flex  gap={2}>
+          <Typography variant="caption" className="text-grey-400">Success (100%)</Typography>
+          <Progress value={100} variant="success" />
+        </Flex>
+
+        <Flex  gap={2}>
+          <Typography variant="caption" className="text-grey-400">Warning (75%)</Typography>
+          <Progress value={75} variant="warning" />
+        </Flex>
+
+        <Flex  gap={2}>
+          <Typography variant="caption" className="text-grey-400">Destructive (90%)</Typography>
+          <Progress value={90} variant="destructive" />
+        </Flex>
+      </Flex>
+
+      <Typography variant="h4" className="text-white mt-4">Use Cases</Typography>
+
+      <Flex  gap={4}>
+        <Flex  gap={2}>
+          <Flex justify="between">
+            <Typography variant="body2">Upload progress</Typography>
+            <Typography variant="body2" color="grey-500">67%</Typography>
+          </Flex>
+          <Progress value={67} />
+        </Flex>
+
+        <Flex  gap={2}>
+          <Flex justify="between">
+            <Typography variant="body2">Storage used</Typography>
+            <Typography variant="body2" color="grey-500">8.2 GB / 10 GB</Typography>
+          </Flex>
+          <Progress value={82} variant="warning" />
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+}

package/Progress/Progress.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+type ProgressSize = "small" | "regular" | "large"
+type ProgressVariant = "default" | "success" | "warning" | "destructive"
+
+const progressVariants = cva(
+  "relative w-full overflow-hidden rounded-full bg-grey-100",
+  {
+    variants: {
+      size: {
+        small: "h-1",
+        regular: "h-2",
+        large: "h-3",
+      },
+    },
+    defaultVariants: {
+      size: "regular",
+    },
+  }
+)
+
+const progressIndicatorVariants = cva(
+  "h-full w-full flex-1 transition-all",
+  {
+    variants: {
+      variant: {
+        default: "bg-accent-600",
+        success: "bg-success-600",
+        warning: "bg-warning-500",
+        destructive: "bg-error-600",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface ProgressProps
+  extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
+  size?: ProgressSize
+  variant?: ProgressVariant
+}
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  ProgressProps
+>(({ className, value, size, variant, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(progressVariants({ size }), className)}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className={cn(progressIndicatorVariants({ variant }))}
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress, progressVariants, progressIndicatorVariants }
+export type { ProgressSize, ProgressVariant }

package/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Label } from "../Label/Label"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { RadioGroup, RadioGroupItem } from "./RadioGroup"
+
+const meta: Meta<typeof RadioGroup> = {
+  title: "Components/RadioGroup",
+  component: RadioGroup,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <RadioGroup defaultValue="comfortable">
+      <Flex direction="row" align="center" gap={2}>
+        <RadioGroupItem value="default" id="r1" />
+        <Label htmlFor="r1">Default</Label>
+      </Flex>
+      <Flex direction="row" align="center" gap={2}>
+        <RadioGroupItem value="comfortable" id="r2" />
+        <Label htmlFor="r2">Comfortable</Label>
+      </Flex>
+      <Flex direction="row" align="center" gap={2}>
+        <RadioGroupItem value="compact" id="r3" />
+        <Label htmlFor="r3">Compact</Label>
+      </Flex>
+    </RadioGroup>
+  ),
+}
+
+export const Small: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option1">
+      <Flex direction="row" align="center" gap={2}>
+        <RadioGroupItem value="option1" id="s1" size="small" />
+        <Label htmlFor="s1" className="text-sm">Option 1</Label>
+      </Flex>
+      <Flex direction="row" align="center" gap={2}>
+        <RadioGroupItem value="option2" id="s2" size="small" />
+        <Label htmlFor="s2" className="text-sm">Option 2</Label>
+      </Flex>
+    </RadioGroup>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option1" disabled>
+      <Flex direction="row" align="center" gap={2}>
+        <RadioGroupItem value="option1" id="d1" />
+        <Label htmlFor="d1" className="opacity-50">Option 1</Label>
+      </Flex>
+      <Flex direction="row" align="center" gap={2}>
+        <RadioGroupItem value="option2" id="d2" />
+        <Label htmlFor="d2" className="opacity-50">Option 2</Label>
+      </Flex>
+    </RadioGroup>
+  ),
+}
+
+export const Horizontal: Story = {
+  render: () => (
+    <RadioGroup defaultValue="left" className="flex flex-row gap-4">
+      <Flex direction="row" align="center" gap={2}>
+        <RadioGroupItem value="left" id="h1" />
+        <Label htmlFor="h1">Left</Label>
+      </Flex>
+      <Flex direction="row" align="center" gap={2}>
+        <RadioGroupItem value="center" id="h2" />
+        <Label htmlFor="h2">Center</Label>
+      </Flex>
+      <Flex direction="row" align="center" gap={2}>
+        <RadioGroupItem value="right" id="h3" />
+        <Label htmlFor="h3">Right</Label>
+      </Flex>
+    </RadioGroup>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex  gap={6}>
+      <Typography variant="h4" className="text-white">Radio Group</Typography>
+
+      <Flex  gap={4}>
+        <Typography variant="body2" className="text-grey-400">Plan Selection</Typography>
+        <RadioGroup defaultValue="pro">
+          <Flex direction="row" align="center" gap={2}>
+            <RadioGroupItem value="free" id="plan1" />
+            <Label htmlFor="plan1">Free - $0/month</Label>
+          </Flex>
+          <Flex direction="row" align="center" gap={2}>
+            <RadioGroupItem value="pro" id="plan2" />
+            <Label htmlFor="plan2">Pro - $9/month</Label>
+          </Flex>
+          <Flex direction="row" align="center" gap={2}>
+            <RadioGroupItem value="enterprise" id="plan3" />
+            <Label htmlFor="plan3">Enterprise - $29/month</Label>
+          </Flex>
+        </RadioGroup>
+      </Flex>
+
+      <Flex  gap={4}>
+        <Typography variant="body2" className="text-grey-400">Size Comparison</Typography>
+        <Flex direction="row" gap={8}>
+          <Flex  gap={2}>
+            <Typography variant="caption" className="text-grey-500">Small</Typography>
+            <RadioGroup defaultValue="a" className="gap-3">
+              <Flex direction="row" align="center" gap={2}>
+                <RadioGroupItem value="a" id="size-s1" size="small" />
+                <Label htmlFor="size-s1" className="text-sm">Option A</Label>
+              </Flex>
+              <Flex direction="row" align="center" gap={2}>
+                <RadioGroupItem value="b" id="size-s2" size="small" />
+                <Label htmlFor="size-s2" className="text-sm">Option B</Label>
+              </Flex>
+            </RadioGroup>
+          </Flex>
+
+          <Flex  gap={2}>
+            <Typography variant="caption" className="text-grey-500">Regular</Typography>
+            <RadioGroup defaultValue="a" className="gap-3">
+              <Flex direction="row" align="center" gap={2}>
+                <RadioGroupItem value="a" id="size-r1" />
+                <Label htmlFor="size-r1">Option A</Label>
+              </Flex>
+              <Flex direction="row" align="center" gap={2}>
+                <RadioGroupItem value="b" id="size-r2" />
+                <Label htmlFor="size-r2">Option B</Label>
+              </Flex>
+            </RadioGroup>
+          </Flex>
+        </Flex>
+      </Flex>
+
+      <Flex  gap={4}>
+        <Typography variant="body2" className="text-grey-400">Horizontal Layout</Typography>
+        <RadioGroup defaultValue="monthly" className="flex flex-row gap-6">
+          <Flex direction="row" align="center" gap={2}>
+            <RadioGroupItem value="monthly" id="billing1" />
+            <Label htmlFor="billing1">Monthly</Label>
+          </Flex>
+          <Flex direction="row" align="center" gap={2}>
+            <RadioGroupItem value="yearly" id="billing2" />
+            <Label htmlFor="billing2">Yearly</Label>
+          </Flex>
+        </RadioGroup>
+      </Flex>
+    </Flex>
+  ),
+}

package/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,68 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+type RadioGroupItemSize = "small" | "regular"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const radioGroupItemVariants = cva(
+  "aspect-square rounded-full border border-grey-300 bg-white text-main-950 ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-main-950 focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-main-950",
+  {
+    variants: {
+      size: {
+        small: "size-4",
+        regular: "size-5",
+      },
+    },
+    defaultVariants: {
+      size: "regular",
+    },
+  }
+)
+
+export interface RadioGroupItemProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
+  size?: RadioGroupItemSize
+}
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  RadioGroupItemProps
+>(({ className, size, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(radioGroupItemVariants({ size }), className)}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle
+          className={cn(
+            "fill-main-950 text-main-950",
+            size === "small" ? "size-2" : "size-2.5"
+          )}
+        />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem, radioGroupItemVariants }
+export type { RadioGroupItemSize }