@a2v2ai/uikit 0.0.38 → 0.0.39

package/Popover/Popover.stories.tsx

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

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

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

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

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

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