@codefast/ui 0.3.16-canary.1 → 0.3.16-canary.3

package/src/components/breadcrumb.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import type { ComponentProps, JSX, ReactNode } from "react";
+
+import { cn } from "#/lib/utils";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRightIcon, EllipsisIcon } from "lucide-react";
+
+/* -----------------------------------------------------------------------------
+ * 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 break-words text-muted-foreground",
+        "sm:gap-2",
+        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 : "a";
+
+  return (
+    <Component
+      className={cn(
+        "transition-colors motion-reduce:transition-none",
+        "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"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: BreadcrumbSeparator
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type BreadcrumbSeparatorProps = ComponentProps<"li">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function BreadcrumbSeparator({ children, ...props }: BreadcrumbSeparatorProps): JSX.Element {
+  return (
+    <li aria-hidden="true" data-slot="breadcrumb-separator" role="presentation" {...props}>
+      {children ?? <ChevronRightIcon className="size-3.5" />}
+    </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-4 items-center justify-center", className)}
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      {...props}
+    >
+      <EllipsisIcon className="size-4" />
+      <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,107 @@
+"use client";
+
+import type { ButtonGroupVariants } from "#/variants/button-group";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+import { buttonGroupVariants } from "#/variants/button-group";
+import { Slot } from "@radix-ui/react-slot";
+
+import { Separator } from "#/components/separator";
+
+/* -----------------------------------------------------------------------------
+ * 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 : "div";
+
+  return (
+    <Component
+      className={cn(
+        "flex items-center gap-2",
+        "px-4",
+        "rounded-lg border",
+        "bg-muted shadow-xs",
+        "text-sm font-medium",
+        "[&_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-vertical:h-auto", "!m-0", 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,66 @@
+import type { ButtonVariants } from "#/variants/button";
+import type { ComponentProps, JSX } from "react";
+
+import { Slot } from "@radix-ui/react-slot";
+
+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,
+  children,
+  className,
+  size,
+  type = "button",
+  variant,
+  ...props
+}: ButtonProps): JSX.Element {
+  const Comp = asChild ? Slot : "button";
+
+  if (asChild) {
+    return (
+      <Comp
+        className={buttonVariants({ className, size, variant })}
+        data-slot="button"
+        data-variant={variant}
+        {...props}
+      >
+        {children}
+      </Comp>
+    );
+  }
+
+  return (
+    <button
+      className={buttonVariants({ className, size, variant })}
+      data-slot="button"
+      data-variant={variant}
+      type={type}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Button };
+export type { ButtonProps };

package/src/components/calendar.tsx

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