@a2v2ai/uikit 0.0.1 → 0.0.3

package/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,241 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import { X, Loader2 } from "lucide-react"
+import { cva } from "class-variance-authority"
+import { Button } from "../Button/Button"
+import { cn } from "../lib/utils"
+
+type AlertDialogContentType = "desktop" | "mobile"
+type AlertDialogHeaderType = "header" | "close-only" | "icon-button-close"
+type AlertDialogFooterType = "buttons-right" | "full-width" | "single-full-width"
+type AlertDialogCloseButtonVariant = "default" | "icon-button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const alertDialogContentVariants = cva(
+  "fixed z-50 grid gap-4 bg-white border border-grey-200 shadow-lg duration-200 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",
+  {
+    variants: {
+      type: {
+        desktop: "left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] w-full max-w-[640px] rounded-lg",
+        mobile: "left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] w-full max-w-[320px] rounded-lg",
+      },
+      scrollable: {
+        true: "max-h-[80vh] overflow-y-auto",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      type: "desktop",
+      scrollable: false,
+    },
+  }
+)
+
+export interface AlertDialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {
+  type?: AlertDialogContentType
+  scrollable?: boolean
+  showCloseButton?: boolean
+  closeButtonVariant?: AlertDialogCloseButtonVariant
+  loading?: boolean
+}
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  AlertDialogContentProps
+>(({ className, children, type, scrollable, showCloseButton = true, closeButtonVariant = "default", loading = false, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(alertDialogContentVariants({ type, scrollable, className }))}
+      {...props}
+    >
+      {loading && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/80 rounded-lg">
+          <Loader2 className="size-8 text-main-600 animate-spin" />
+        </div>
+      )}
+      {children}
+      {showCloseButton && closeButtonVariant === "default" && !loading && (
+        <AlertDialogPrimitive.Cancel className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:shadow-[0_0_0_3px_#d4d4d4] disabled:pointer-events-none cursor-pointer">
+          <X className="size-4 text-grey-600" />
+          <span className="sr-only">Close</span>
+        </AlertDialogPrimitive.Cancel>
+      )}
+      {showCloseButton && closeButtonVariant === "icon-button" && !loading && (
+        <AlertDialogPrimitive.Cancel asChild>
+          <Button
+            variant="ghost"
+            size="small"
+            className="absolute right-2 top-2 size-9 p-0"
+          >
+            <X className="size-4" />
+            <span className="sr-only">Close</span>
+          </Button>
+        </AlertDialogPrimitive.Cancel>
+      )}
+    </AlertDialogPrimitive.Content>
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const alertDialogHeaderVariants = cva(
+  "flex p-4",
+  {
+    variants: {
+      type: {
+        header: "flex-row items-center justify-between",
+        "close-only": "flex-col items-end",
+        "icon-button-close": "flex-col items-end justify-center pr-0",
+      },
+    },
+    defaultVariants: {
+      type: "header",
+    },
+  }
+)
+
+export interface AlertDialogHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  type?: AlertDialogHeaderType
+}
+
+const AlertDialogHeader = React.forwardRef<HTMLDivElement, AlertDialogHeaderProps>(
+  ({ className, type, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(alertDialogHeaderVariants({ type, className }))}
+      {...props}
+    />
+  )
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const alertDialogFooterVariants = cva(
+  "flex gap-2 p-4",
+  {
+    variants: {
+      type: {
+        "buttons-right": "flex-row items-center justify-end",
+        "full-width": "flex-row items-start",
+        "single-full-width": "flex-row items-start",
+      },
+    },
+    defaultVariants: {
+      type: "buttons-right",
+    },
+  }
+)
+
+export interface AlertDialogFooterProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  type?: AlertDialogFooterType
+}
+
+const AlertDialogFooter = React.forwardRef<HTMLDivElement, AlertDialogFooterProps>(
+  ({ className, type, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(alertDialogFooterVariants({ type, className }))}
+      {...props}
+    >
+      {type === "full-width" || type === "single-full-width" ? (
+        <div className="flex gap-2 w-full">
+          {React.Children.map(children, (child) =>
+            React.isValidElement(child)
+              ? React.cloneElement(child as React.ReactElement<{ className?: string }>, {
+                  className: cn("flex-1", (child as React.ReactElement<{ className?: string }>).props.className),
+                })
+              : child
+          )}
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  )
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-2xl font-bold leading-[1.2] tracking-tight text-main-950 font-display",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-grey-600", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
+
+const AlertDialogBody = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex-1 px-4 py-2", className)}
+    {...props}
+  />
+))
+AlertDialogBody.displayName = "AlertDialogBody"
+
+const AlertDialogAction = AlertDialogPrimitive.Action
+
+const AlertDialogCancel = AlertDialogPrimitive.Cancel
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogBody,
+  AlertDialogAction,
+  AlertDialogCancel,
+  alertDialogContentVariants,
+  alertDialogHeaderVariants,
+  alertDialogFooterVariants,
+}
+export type { AlertDialogContentType, AlertDialogHeaderType, AlertDialogFooterType, AlertDialogCloseButtonVariant }

package/Avatar/Avatar.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { Avatar, AvatarImage, AvatarFallback } from "./Avatar"
+
+const meta: Meta<typeof Avatar> = {
+  title: "Components/Avatar",
+  component: Avatar,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["small", "regular", "large", "xlarge"],
+      description: "The size of the avatar",
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  ),
+}
+
+export const WithFallback: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="https://invalid-url.com/avatar.png" alt="User" />
+      <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+  ),
+}
+
+export const Small: Story = {
+  render: () => (
+    <Avatar size="small">
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  ),
+}
+
+export const Large: Story = {
+  render: () => (
+    <Avatar size="large">
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  ),
+}
+
+export const XLarge: Story = {
+  render: () => (
+    <Avatar size="xlarge">
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex direction="column" gap={6}>
+      <Typography variant="h4" className="text-white">Avatar Sizes</Typography>
+
+      <Flex gap={4} align="center">
+        <Flex direction="column" align="center" gap={2}>
+          <Avatar size="small">
+            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarFallback>CN</AvatarFallback>
+          </Avatar>
+          <Typography variant="caption" className="text-grey-400">Small</Typography>
+        </Flex>
+
+        <Flex direction="column" align="center" gap={2}>
+          <Avatar size="regular">
+            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarFallback>CN</AvatarFallback>
+          </Avatar>
+          <Typography variant="caption" className="text-grey-400">Regular</Typography>
+        </Flex>
+
+        <Flex direction="column" align="center" gap={2}>
+          <Avatar size="large">
+            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarFallback>CN</AvatarFallback>
+          </Avatar>
+          <Typography variant="caption" className="text-grey-400">Large</Typography>
+        </Flex>
+
+        <Flex direction="column" align="center" gap={2}>
+          <Avatar size="xlarge">
+            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarFallback>CN</AvatarFallback>
+          </Avatar>
+          <Typography variant="caption" className="text-grey-400">XLarge</Typography>
+        </Flex>
+      </Flex>
+
+      <Typography variant="h4" className="text-white mt-4">Fallback Examples</Typography>
+
+      <Flex gap={4} align="center">
+        <Avatar>
+          <AvatarFallback>JD</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>MK</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>ZY</AvatarFallback>
+        </Avatar>
+      </Flex>
+    </Flex>
+  ),
+}

package/Avatar/Avatar.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+type AvatarSize = "small" | "regular" | "large" | "xlarge"
+
+const avatarVariants = cva(
+  "relative flex shrink-0 overflow-hidden rounded-full",
+  {
+    variants: {
+      size: {
+        small: "size-8",
+        regular: "size-10",
+        large: "size-12",
+        xlarge: "size-16",
+      },
+    },
+    defaultVariants: {
+      size: "regular",
+    },
+  }
+)
+
+export interface AvatarProps
+  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+  size?: AvatarSize
+}
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  AvatarProps
+>(({ className, size, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(avatarVariants({ size }), className)}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-grey-100 text-grey-600 font-medium",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback, avatarVariants }
+export type { AvatarSize }

package/Badge/Badge.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { Badge } from "./Badge"
+
+const meta: Meta<typeof Badge> = {
+  title: "Components/Badge",
+  component: Badge,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "secondary", "outline", "destructive", "success", "warning"],
+      description: "The visual variant of the badge",
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => <Badge>Badge</Badge>,
+}
+
+export const Secondary: Story = {
+  render: () => <Badge variant="secondary">Secondary</Badge>,
+}
+
+export const Outline: Story = {
+  render: () => <Badge variant="outline">Outline</Badge>,
+}
+
+export const Destructive: Story = {
+  render: () => <Badge variant="destructive">Destructive</Badge>,
+}
+
+export const Success: Story = {
+  render: () => <Badge variant="success">Success</Badge>,
+}
+
+export const Warning: Story = {
+  render: () => <Badge variant="warning">Warning</Badge>,
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex direction="column" gap={6}>
+      <Typography variant="h4" className="text-white">Badge Variants</Typography>
+
+      <Flex gap={3} align="center" wrap="wrap">
+        <Badge>Default</Badge>
+        <Badge variant="secondary">Secondary</Badge>
+        <Badge variant="outline">Outline</Badge>
+        <Badge variant="destructive">Destructive</Badge>
+        <Badge variant="success">Success</Badge>
+        <Badge variant="warning">Warning</Badge>
+      </Flex>
+
+      <Typography variant="h4" className="text-white mt-4">Use Cases</Typography>
+
+      <Flex gap={3} align="center" wrap="wrap">
+        <Badge>New</Badge>
+        <Badge variant="secondary">Featured</Badge>
+        <Badge variant="success">Active</Badge>
+        <Badge variant="warning">Pending</Badge>
+        <Badge variant="destructive">Expired</Badge>
+        <Badge variant="outline">Draft</Badge>
+      </Flex>
+    </Flex>
+  ),
+}

package/Badge/Badge.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+type BadgeVariant = "default" | "secondary" | "outline" | "destructive" | "success" | "warning"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-main-950 focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-main-950 text-main-50",
+        secondary: "border-transparent bg-grey-100 text-main-950",
+        outline: "border-grey-300 text-main-950",
+        destructive: "border-transparent bg-error-600 text-white",
+        success: "border-transparent bg-success-600 text-white",
+        warning: "border-transparent bg-warning-500 text-white",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: BadgeVariant
+}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
+export type { BadgeVariant }