@a2v2ai/uikit 0.0.36 → 0.0.38

package/Button/Button.tsx

@@ -0,0 +1,107 @@
+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"
+type ButtonTextVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "body3" | "caption"
+
+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-accent-600 text-white hover:bg-accent-700",
+        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",
+      },
+      textVariant: {
+        h1: "text-[64px] font-extrabold",
+        h2: "text-[48px] font-bold",
+        h3: "text-[32px] font-bold",
+        h4: "text-[24px] font-bold",
+        h5: "text-[20px] font-bold",
+        h6: "text-[20px] font-semibold",
+        subtitle1: "text-[20px] font-semibold",
+        subtitle2: "text-[18px] font-semibold",
+        body1: "text-[16px] font-normal",
+        body2: "text-[14px] font-normal",
+        body3: "text-[12px] font-normal",
+        caption: "text-[12px] font-light",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "regular",
+      roundness: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  roundness?: ButtonRoundness
+  textVariant?: ButtonTextVariant
+  asChild?: boolean
+  leftIcon?: React.ReactNode
+  rightIcon?: React.ReactNode
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      roundness,
+      textVariant,
+      asChild = false,
+      leftIcon,
+      rightIcon,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, roundness, textVariant, 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, ButtonTextVariant }

package/Calendar/Calendar.stories.tsx

@@ -0,0 +1,291 @@
+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"
+import { Button } from "../Button/Button"
+
+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 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 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 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 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 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}
+      />
+    )
+  },
+}
+
+export const Error: Story = {
+  render: () => {
+    const [date, setDate] = React.useState<Date | undefined>()
+    return (
+      <Calendar
+        mode="single"
+        selected={date}
+        onSelect={setDate}
+        error="Please select a valid date"
+      />
+    )
+  },
+}
+
+export const ErrorWithSelection: Story = {
+  render: () => {
+    const [date, setDate] = React.useState<Date | undefined>(new Date())
+    // Simulate an invalid selection (e.g., past date when only future dates are allowed)
+    return (
+      <Flex gap={4} align="center">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          error="Selected date cannot be in the past"
+        />
+        <Typography variant="body2" color="error-600">
+          Please select a future date
+        </Typography>
+      </Flex>
+    )
+  },
+}
+
+export const FormikTouchedUntouched: Story = {
+  render: function FormikExample() {
+    const [date, setDate] = React.useState<Date | undefined>()
+    const [touched, setTouched] = React.useState(false)
+    const error = "Please select a date"
+
+    const handleSelect = (selectedDate: Date | undefined) => {
+      setDate(selectedDate)
+      setTouched(true)
+    }
+
+    return (
+      <Flex gap={6} align="center">
+        <Flex gap={2}>
+          <Typography variant="subtitle2" color="main-700">
+            Formik-style touched/untouched validation
+          </Typography>
+          <Typography variant="caption" color="grey-500">
+            Error message only shows after interaction with calendar
+          </Typography>
+        </Flex>
+
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={handleSelect}
+          error={touched && !date ? error : undefined}
+        />
+
+        <Flex gap={2} align="center">
+          <Typography variant="caption" color="grey-400">
+            {touched ? "Touched" : "Untouched"} | Selected: {date ? date.toLocaleDateString() : "none"}
+          </Typography>
+          <Button
+            variant="secondary"
+            size="small"
+            onClick={() => {
+              setTouched(false)
+              setDate(undefined)
+            }}
+          >
+            Reset
+          </Button>
+        </Flex>
+      </Flex>
+    )
+  },
+}

package/Calendar/Calendar.tsx

@@ -0,0 +1,246 @@
+"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"
+import { Typography } from "../Typography/Typography"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+  /**
+   * Variant for navigation buttons
+   * @default "ghost"
+   */
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+  /**
+   * Error message to display below the calendar
+   */
+  error?: string
+}
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  error,
+  ...props
+}: CalendarProps) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <div className="flex flex-col w-fit">
+      <DayPicker
+        showOutsideDays={showOutsideDays}
+        className={cn(
+          "bg-white group/calendar p-3 rounded-lg border",
+          error ? "border-error-500" : "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}
+    />
+      {error && (
+        <Typography variant="caption" color="error-600" className="mt-1">
+          {error}
+        </Typography>
+      )}
+    </div>
+  )
+}
+
+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 }