@a2v2ai/uikit 0.0.3 → 0.0.5

package/AlertDialog/AlertDialog.tsx

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

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

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

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

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