@codefast/ui 0.3.16-canary.2 → 0.4.0-canary.4

package/src/components/badge.tsx

@@ -0,0 +1,35 @@
+import { Slot } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import type { BadgeVariants } from "#/variants/badge";
+import { badgeVariants } from "#/variants/badge";
+
+/* -----------------------------------------------------------------------------
+ * Component: Badge
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface BadgeProps extends ComponentProps<"span">, BadgeVariants {
+  asChild?: boolean;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Badge({ asChild = false, className, variant = "default", ...props }: BadgeProps): JSX.Element {
+  const Component = asChild ? Slot.Root : "span";
+
+  return (
+    <Component className={badgeVariants({ className, variant })} data-slot="badge" data-variant={variant} {...props} />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Badge };
+
+export type { BadgeProps };

package/src/components/breadcrumb.tsx

@@ -0,0 +1,191 @@
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { Slot } from "radix-ui";
+import type { ComponentProps, JSX, ReactNode } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Breadcrumb
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface BreadcrumbProps extends ComponentProps<"nav"> {
+  separator?: ReactNode;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Breadcrumb({ ...props }: BreadcrumbProps): JSX.Element {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: BreadcrumbList
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type BreadcrumbListProps = ComponentProps<"ol">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function BreadcrumbList({ className, ...props }: BreadcrumbListProps): JSX.Element {
+  return (
+    <ol
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5",
+        className,
+      )}
+      data-slot="breadcrumb-list"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: BreadcrumbItem
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type BreadcrumbItemProps = ComponentProps<"li">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps): JSX.Element {
+  return <li className={cn("inline-flex items-center gap-1.5", className)} data-slot="breadcrumb-item" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: BreadcrumbLink
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface BreadcrumbLinkProps extends ComponentProps<"a"> {
+  asChild?: boolean;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function BreadcrumbLink({ asChild, className, ...props }: BreadcrumbLinkProps): JSX.Element {
+  const Component = asChild ? Slot.Root : "a";
+
+  return (
+    <Component
+      className={cn("transition-colors hover:text-foreground", className)}
+      data-slot="breadcrumb-link"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: BreadcrumbPage
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type BreadcrumbPageProps = ComponentProps<"span">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps): JSX.Element {
+  return (
+    <span
+      aria-current="page"
+      aria-disabled="true"
+      className={cn("font-normal text-foreground", className)}
+      data-slot="breadcrumb-page"
+      role="link"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: BreadcrumbSeparator
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type BreadcrumbSeparatorProps = ComponentProps<"li">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps): JSX.Element {
+  return (
+    <li
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      {...props}
+    >
+      {children ?? <ChevronRightIcon className="rtl:rotate-180" />}
+    </li>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: BreadcrumbEllipsis
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type BreadcrumbEllipsisProps = ComponentProps<"span">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps): JSX.Element {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn("flex size-5 items-center justify-center [&>svg]:size-4", className)}
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};
+export type {
+  BreadcrumbEllipsisProps,
+  BreadcrumbItemProps,
+  BreadcrumbLinkProps,
+  BreadcrumbListProps,
+  BreadcrumbPageProps,
+  BreadcrumbProps,
+  BreadcrumbSeparatorProps,
+};

package/src/components/button-group.tsx

@@ -0,0 +1,97 @@
+import { Slot } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import { Separator } from "#/components/separator";
+import { cn } from "#/lib/utils";
+import type { ButtonGroupVariants } from "#/variants/button-group";
+import { buttonGroupVariants } from "#/variants/button-group";
+
+/* -----------------------------------------------------------------------------
+ * Component: ButtonGroup
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ButtonGroupProps = ComponentProps<"div"> & ButtonGroupVariants;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps): JSX.Element {
+  return (
+    <div
+      className={buttonGroupVariants({ orientation, className })}
+      data-orientation={orientation}
+      data-slot="button-group"
+      role="group"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ButtonGroupText
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface ButtonGroupTextProps extends ComponentProps<"div"> {
+  asChild?: boolean;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ButtonGroupText({ asChild = false, className, ...props }: ButtonGroupTextProps): JSX.Element {
+  const Component = asChild ? Slot.Root : "div";
+
+  return (
+    <Component
+      className={cn(
+        "flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ButtonGroupSeparator
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ButtonGroupSeparatorProps = ComponentProps<typeof Separator>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: ButtonGroupSeparatorProps): JSX.Element {
+  return (
+    <Separator
+      className={cn(
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className,
+      )}
+      data-slot="button-group-separator"
+      orientation={orientation}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };
+
+export type { ButtonGroupProps, ButtonGroupSeparatorProps, ButtonGroupTextProps };

package/src/components/button.tsx

@@ -0,0 +1,55 @@
+import { Slot } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import type { ButtonVariants } from "#/variants/button";
+import { buttonVariants } from "#/variants/button";
+
+/* -----------------------------------------------------------------------------
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ButtonProps = ComponentProps<"button"> &
+  ButtonVariants & {
+    asChild?: boolean;
+    type?: ComponentProps<"button">["type"];
+  };
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Button({ asChild = false, className, size, type = "button", variant, ...props }: ButtonProps): JSX.Element {
+  const Comp = asChild ? Slot.Root : "button";
+
+  if (asChild) {
+    return (
+      <Comp
+        className={buttonVariants({ className, size, variant })}
+        data-size={size}
+        data-slot="button"
+        data-variant={variant}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <button
+      className={buttonVariants({ className, size, variant })}
+      data-size={size}
+      data-slot="button"
+      data-variant={variant}
+      type={type}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Button };
+export type { ButtonProps };

package/src/components/calendar.tsx

@@ -0,0 +1,222 @@
+import type { Chevron, DayButton, Locale, Root, WeekNumber } from "@daypicker/react";
+import { DayPicker, getDefaultClassNames } from "@daypicker/react";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import type { ComponentProps, JSX } from "react";
+import { useEffect, useRef } from "react";
+
+import { Button } from "#/components/button";
+import { cn } from "#/lib/utils";
+import { buttonVariants } from "#/variants/button";
+
+/* -----------------------------------------------------------------------------
+ * Component: Calendar
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CalendarProps = ComponentProps<typeof DayPicker> & {
+  buttonVariant?: ComponentProps<typeof Button>["variant"];
+};
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Calendar({
+  buttonVariant = "ghost",
+  captionLayout = "label",
+  className,
+  classNames,
+  components,
+  formatters,
+  locale,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps): JSX.Element {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      captionLayout={captionLayout}
+      className={cn(
+        "group/calendar bg-background p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          "relative rounded-(--cell-radius) border border-input shadow-xs has-focus:border-ring has-focus:ring-3 has-focus:ring-ring/50",
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-sm"
+            : "flex h-8 items-center gap-1 rounded-(--cell-radius) pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label,
+        ),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday,
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+        week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
+        day: cn(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day,
+        ),
+        range_start: cn(
+          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn(
+          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_end,
+        ),
+        today: cn(
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today,
+        ),
+        outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Chevron: CalendarChevron,
+        DayButton: (dayButtonProps) => <CalendarDayButton locale={locale} {...dayButtonProps} />,
+        Root: CalendarRoot,
+        WeekNumber: CalendarWeekNumber,
+        ...components,
+      }}
+      formatters={{
+        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters,
+      }}
+      locale={locale}
+      showOutsideDays={showOutsideDays}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: CalendarChevron (internal)
+ * -------------------------------------------------------------------------- */
+
+function CalendarChevron({ className, orientation, ...props }: ComponentProps<typeof Chevron>): JSX.Element {
+  if (orientation === "left") {
+    return <ChevronLeftIcon className={cn("size-4 rtl:rotate-180", className)} {...props} />;
+  }
+
+  if (orientation === "right") {
+    return <ChevronRightIcon className={cn("size-4 rtl:rotate-180", className)} {...props} />;
+  }
+
+  return <ChevronDownIcon className={cn("size-4", className)} {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: CalendarRoot (internal)
+ * -------------------------------------------------------------------------- */
+
+function CalendarRoot({ rootRef, ...props }: ComponentProps<typeof Root>): JSX.Element {
+  return <div ref={rootRef} data-slot="calendar" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: CalendarWeekNumber (internal)
+ * -------------------------------------------------------------------------- */
+
+function CalendarWeekNumber({ children, ...props }: ComponentProps<typeof WeekNumber>): JSX.Element {
+  return (
+    <td {...props}>
+      <div className="flex size-(--cell-size) items-center justify-center text-center">{children}</div>
+    </td>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: CalendarDayButton
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type CalendarDayButtonProps = ComponentProps<typeof DayButton> & {
+  locale?: Partial<Locale>;
+};
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function CalendarDayButton({ className, day, locale, modifiers, ...props }: CalendarDayButtonProps): JSX.Element {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (modifiers.focused) {
+      ref.current?.focus();
+    }
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      className={cn(
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-focused/day:relative group-data-focused/day:z-10 group-data-focused/day:border-ring group-data-focused/day:ring-3 group-data-focused/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className,
+      )}
+      data-day={day.date.toLocaleDateString(locale?.code)}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      data-range-start={modifiers.range_start}
+      data-selected-single={
+        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
+      }
+      size="icon"
+      variant="ghost"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Calendar, CalendarDayButton };
+export type { CalendarDayButtonProps, CalendarProps };