@a2v2ai/uikit 0.0.1 → 0.0.3

package/Button/Button.tsx

@@ -0,0 +1,90 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "ghost-muted" | "destructive"
+type ButtonSize = "mini" | "small" | "regular" | "large"
+type ButtonRoundness = "default" | "round"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-normal font-sans cursor-pointer transition-colors focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_#d4d4d4] disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-main-950 text-main-50 hover:bg-main-800",
+        secondary:
+          "bg-main-100 text-main-950 hover:bg-main-200",
+        outline:
+          "border border-main-300 bg-transparent text-main-950 hover:bg-main-100",
+        ghost:
+          "bg-transparent text-main-600 hover:bg-main-100 hover:text-main-950",
+        "ghost-muted":
+          "bg-transparent text-main-400 hover:bg-main-100 hover:text-main-600",
+        destructive:
+          "bg-error-600 text-white hover:bg-error-700",
+      },
+      size: {
+        mini: "h-6 px-3 text-xs rounded-md [&_svg]:size-3",
+        small: "h-8 px-3 text-sm rounded-md [&_svg]:size-3.5",
+        regular: "h-9 px-4 text-sm rounded-lg [&_svg]:size-4",
+        large: "h-10 px-4 text-base rounded-lg [&_svg]:size-5",
+      },
+      roundness: {
+        default: "",
+        round: "!rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "regular",
+      roundness: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  roundness?: ButtonRoundness
+  asChild?: boolean
+  leftIcon?: React.ReactNode
+  rightIcon?: React.ReactNode
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      roundness,
+      asChild = false,
+      leftIcon,
+      rightIcon,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, roundness, className }))}
+        ref={ref}
+        {...props}
+      >
+        {leftIcon && <span className="shrink-0">{leftIcon}</span>}
+        {children}
+        {rightIcon && <span className="shrink-0">{rightIcon}</span>}
+      </Comp>
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
+export type { ButtonVariant, ButtonSize, ButtonRoundness }

package/Calendar/Calendar.stories.tsx

@@ -0,0 +1,207 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+import type { DateRange } from "react-day-picker"
+import { Calendar } from "./Calendar"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+
+const meta: Meta<typeof Calendar> = {
+  title: "Components/Calendar",
+  component: Calendar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    mode: {
+      control: "select",
+      options: ["single", "multiple", "range"],
+      description: "Selection mode for the calendar",
+    },
+    showOutsideDays: {
+      control: "boolean",
+      description: "Show days from adjacent months",
+    },
+    showWeekNumber: {
+      control: "boolean",
+      description: "Show week numbers",
+    },
+    captionLayout: {
+      control: "select",
+      options: ["label", "dropdown", "dropdown-months", "dropdown-years"],
+      description: "Layout of the caption (month/year selector)",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Calendar>
+
+export const Default: Story = {
+  render: () => {
+    const [date, setDate] = React.useState<Date | undefined>(new Date())
+    return (
+      <Calendar
+        mode="single"
+        selected={date}
+        onSelect={setDate}
+      />
+    )
+  },
+}
+
+export const SingleSelection: Story = {
+  render: () => {
+    const [date, setDate] = React.useState<Date | undefined>(new Date())
+    return (
+      <Flex direction="column" gap={4} align="center">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+        />
+        <Typography variant="body2" color="main-600">
+          Selected: {date ? date.toLocaleDateString() : "None"}
+        </Typography>
+      </Flex>
+    )
+  },
+}
+
+export const MultipleSelection: Story = {
+  render: () => {
+    const [dates, setDates] = React.useState<Date[] | undefined>([])
+    return (
+      <Flex direction="column" gap={4} align="center">
+        <Calendar
+          mode="multiple"
+          selected={dates}
+          onSelect={setDates}
+        />
+        <Typography variant="body2" color="main-600">
+          Selected: {dates && dates.length > 0
+            ? dates.map(d => d.toLocaleDateString()).join(", ")
+            : "None"}
+        </Typography>
+      </Flex>
+    )
+  },
+}
+
+export const RangeSelection: Story = {
+  render: () => {
+    const [range, setRange] = React.useState<DateRange | undefined>()
+    return (
+      <Flex direction="column" gap={4} align="center">
+        <Calendar
+          mode="range"
+          selected={range}
+          onSelect={setRange}
+          numberOfMonths={2}
+        />
+        <Typography variant="body2" color="main-600">
+          {range?.from && range?.to
+            ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
+            : range?.from
+            ? `${range.from.toLocaleDateString()} - Select end date`
+            : "Select a date range"}
+        </Typography>
+      </Flex>
+    )
+  },
+}
+
+export const WithWeekNumbers: Story = {
+  render: () => {
+    const [date, setDate] = React.useState<Date | undefined>(new Date())
+    return (
+      <Calendar
+        mode="single"
+        selected={date}
+        onSelect={setDate}
+        showWeekNumber
+      />
+    )
+  },
+}
+
+export const WithDropdowns: Story = {
+  render: () => {
+    const [date, setDate] = React.useState<Date | undefined>(new Date())
+    return (
+      <Calendar
+        mode="single"
+        selected={date}
+        onSelect={setDate}
+        captionLayout="dropdown"
+        fromYear={2020}
+        toYear={2030}
+      />
+    )
+  },
+}
+
+export const DisabledDates: Story = {
+  render: () => {
+    const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+    // Disable weekends
+    const disabledDays = [
+      { dayOfWeek: [0, 6] }, // Sunday and Saturday
+    ]
+
+    return (
+      <Flex direction="column" gap={4} align="center">
+        <Typography variant="body2" color="main-600">
+          Weekends are disabled
+        </Typography>
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          disabled={disabledDays}
+        />
+      </Flex>
+    )
+  },
+}
+
+export const LimitedDateRange: Story = {
+  render: () => {
+    const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+    // Only allow dates in the next 30 days
+    const today = new Date()
+    const thirtyDaysFromNow = new Date()
+    thirtyDaysFromNow.setDate(today.getDate() + 30)
+
+    return (
+      <Flex direction="column" gap={4} align="center">
+        <Typography variant="body2" color="main-600">
+          Only next 30 days selectable
+        </Typography>
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          fromDate={today}
+          toDate={thirtyDaysFromNow}
+        />
+      </Flex>
+    )
+  },
+}
+
+export const TwoMonths: Story = {
+  render: () => {
+    const [date, setDate] = React.useState<Date | undefined>(new Date())
+    return (
+      <Calendar
+        mode="single"
+        selected={date}
+        onSelect={setDate}
+        numberOfMonths={2}
+      />
+    )
+  },
+}

package/Calendar/Calendar.tsx

@@ -0,0 +1,232 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "../lib/utils"
+import { Button, buttonVariants } from "../Button/Button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+  /**
+   * Variant for navigation buttons
+   * @default "ghost"
+   */
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: CalendarProps) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-white group/calendar p-3 rounded-lg border border-grey-200",
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant, size: "small" }),
+          "size-8 aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant, size: "small" }),
+          "size-8 aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-8 w-full px-8",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-8 gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-grey-400 border border-grey-300 shadow-xs has-focus:ring-grey-300/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-white inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium text-main-900",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-main-400 [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-main-500 rounded-md flex-1 font-normal text-[0.8rem] select-none w-8 h-8 flex items-center justify-center",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-8",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-main-400",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-8 h-8 p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day select-none",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-main-100",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-main-100", defaultClassNames.range_end),
+        today: cn(
+          "bg-main-100 text-main-900 rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-main-300 aria-selected:text-main-400",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-main-300 opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-8 items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="small"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "size-8 p-0 font-normal",
+        "data-[selected-single=true]:bg-main-900 data-[selected-single=true]:text-white",
+        "data-[range-middle=true]:bg-main-100 data-[range-middle=true]:text-main-900",
+        "data-[range-start=true]:bg-main-900 data-[range-start=true]:text-white",
+        "data-[range-end=true]:bg-main-900 data-[range-end=true]:text-white",
+        "group-data-[focused=true]/day:border-grey-400 group-data-[focused=true]/day:ring-grey-300/50",
+        "hover:bg-main-100 hover:text-main-900",
+        "group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px]",
+        "data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md",
+        "data-[range-middle=true]:rounded-none",
+        "data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+Calendar.displayName = "Calendar"
+
+export { Calendar, CalendarDayButton }

package/Card/Card.stories.tsx

@@ -0,0 +1,136 @@
+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 { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from "./Card"
+
+const meta: Meta<typeof Card> = {
+  title: "Components/Card",
+  component: Card,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "outline"],
+      description: "The visual variant of the card",
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card Description</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Card Content</p>
+      </CardContent>
+      <CardFooter>
+        <p>Card Footer</p>
+      </CardFooter>
+    </Card>
+  ),
+}
+
+export const Outline: Story = {
+  render: () => (
+    <Card variant="outline" className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Outline Card</CardTitle>
+        <CardDescription>This card has no shadow</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Card content goes here.</p>
+      </CardContent>
+    </Card>
+  ),
+}
+
+export const WithForm: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Create project</CardTitle>
+        <CardDescription>Deploy your new project in one-click.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form>
+          <Flex direction="column" gap={4}>
+            <Flex direction="column" gap={2}>
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" placeholder="Name of your project" />
+            </Flex>
+            <Flex direction="column" gap={2}>
+              <Label htmlFor="framework">Framework</Label>
+              <Input id="framework" placeholder="Select a framework" />
+            </Flex>
+          </Flex>
+        </form>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="outline">Cancel</Button>
+        <Button>Deploy</Button>
+      </CardFooter>
+    </Card>
+  ),
+}
+
+export const SimpleCard: Story = {
+  render: () => (
+    <Card className="w-[350px] p-6">
+      <Flex direction="column" gap={2}>
+        <Typography variant="h4">Notifications</Typography>
+        <Typography variant="body2" color="grey-500">
+          You have 3 unread messages.
+        </Typography>
+      </Flex>
+    </Card>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex direction="column" gap={6}>
+      <Typography variant="h4" className="text-white">Card Variants</Typography>
+
+      <Flex gap={4} wrap="wrap">
+        <Card className="w-[300px]">
+          <CardHeader>
+            <CardTitle>Default Card</CardTitle>
+            <CardDescription>With shadow</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p>This is the default card style with a subtle shadow.</p>
+          </CardContent>
+          <CardFooter>
+            <Button size="small">Action</Button>
+          </CardFooter>
+        </Card>
+
+        <Card variant="outline" className="w-[300px]">
+          <CardHeader>
+            <CardTitle>Outline Card</CardTitle>
+            <CardDescription>Without shadow</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p>This card has an outline border but no shadow.</p>
+          </CardContent>
+          <CardFooter>
+            <Button size="small" variant="outline">Action</Button>
+          </CardFooter>
+        </Card>
+      </Flex>
+    </Flex>
+  ),
+}