gladvn 0.2.14

package/src/components/macro/accordion-preset.tsx

@@ -0,0 +1,41 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../components/micro/accordion";
+import * as React from "react";
+
+export interface AccordionPresetItem {
+  value: string;
+  title: React.ReactNode;
+  content: React.ReactNode;
+  disabled?: boolean;
+}
+
+export type AccordionPresetProps = React.ComponentProps<typeof Accordion> & {
+  items: AccordionPresetItem[];
+};
+
+const AccordionPreset = React.forwardRef<
+  React.ComponentRef<typeof Accordion>,
+  AccordionPresetProps
+>(({ items, ...accordionProps }, ref) => {
+  return (
+    <Accordion ref={ref} {...accordionProps}>
+      {items.map((item) => (
+        <AccordionItem
+          key={item.value}
+          value={item.value}
+          disabled={item.disabled}
+        >
+          <AccordionTrigger>{item.title}</AccordionTrigger>
+          <AccordionContent>{item.content}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+});
+AccordionPreset.displayName = "AccordionPreset";
+
+export { AccordionPreset };

package/src/components/macro/alert-dialog-preset.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AlertDialogPortal,
+} from "../../components/micro/alert-dialog";
+import { ThemeWrapper } from "../../components/micro/theme-provider";
+import { type Color, type Size, type Variant } from "../../lib/types";
+import { cn } from "../../lib/utils";
+import * as React from "react";
+
+type AlertDialogPresetProps = Omit<
+  React.ComponentProps<typeof AlertDialog>,
+  "children"
+> & {
+  children?: React.ReactNode;
+  trigger?: React.ReactElement;
+  icon?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  cancelLabel?: React.ReactNode;
+  cancelColor?: Color;
+  cancelVariant?: Variant;
+  actionLabel?: React.ReactNode;
+  actionColor?: Color;
+  actionVariant?: Variant;
+  onAction?: () => void;
+  onCancel?: () => void;
+  size?: Size;
+};
+
+function AlertDialogPreset({
+  trigger,
+  icon,
+  title,
+  description,
+  cancelLabel,
+  cancelColor,
+  cancelVariant,
+  actionLabel,
+  actionColor,
+  actionVariant,
+  onAction,
+  onCancel,
+  size = "md",
+  children,
+  ...props
+}: AlertDialogPresetProps) {
+  return (
+    <AlertDialog {...props}>
+      {trigger && <AlertDialogTrigger render={trigger} />}
+      <AlertDialogPortal>
+        <ThemeWrapper>
+          <AlertDialogContent size={size}>
+            <div
+          className={cn("flex flex-col gap-1.5", {
+            "sm:flex-row sm:gap-4": !!icon,
+          })}
+        >
+          {icon && (
+            <AlertDialogMedia className="mx-auto mb-2 shrink-0 sm:mx-0 sm:mb-0">
+              {icon}
+            </AlertDialogMedia>
+          )}
+          <AlertDialogHeader>
+            {title && <AlertDialogTitle>{title}</AlertDialogTitle>}
+            {description && (
+              <AlertDialogDescription>{description}</AlertDialogDescription>
+            )}
+            {children}
+          </AlertDialogHeader>
+        </div>
+        {(cancelLabel || actionLabel) && (
+          <AlertDialogFooter className="group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 group-data-[size=sm]/alert-dialog-content:sm:flex group-data-[size=sm]/alert-dialog-content:sm:justify-end">
+            {cancelLabel && (
+              <AlertDialogCancel
+                size={size}
+                color={cancelColor}
+                variant={cancelVariant}
+                onClick={onCancel}
+              >
+                {cancelLabel}
+              </AlertDialogCancel>
+            )}
+            {actionLabel && (
+              <AlertDialogAction
+                size={size}
+                color={actionColor}
+                variant={actionVariant}
+                onClick={onAction}
+              >
+                {actionLabel}
+              </AlertDialogAction>
+            )}
+          </AlertDialogFooter>
+          )}
+        </AlertDialogContent>
+        </ThemeWrapper>
+      </AlertDialogPortal>
+    </AlertDialog>
+  );
+}
+
+AlertDialogPreset.displayName = "AlertDialogPreset";
+
+export { AlertDialogPreset };
+export type { AlertDialogPresetProps };

package/src/components/macro/alert-preset.tsx

@@ -0,0 +1,94 @@
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  type AlertProps,
+} from "../../components/micro/alert";
+import { Button } from "../../components/micro/button";
+import { cn } from "../../lib/utils";
+import { XIcon } from "lucide-react";
+import * as React from "react";
+
+export type AlertPresetProps = AlertProps & {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: React.ReactElement;
+  action?: React.ReactNode;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  defaultOpen?: boolean;
+};
+
+const AlertPreset = React.forwardRef<HTMLDivElement, AlertPresetProps>(
+  (
+    {
+      title,
+      description,
+      icon,
+      action,
+      dismissible = false,
+      onDismiss,
+      defaultOpen = true,
+      children,
+      color = "info",
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isOpen, setIsOpen] = React.useState(defaultOpen);
+
+    if (!isOpen) return null;
+
+    const handleDismiss = () => {
+      setIsOpen(false);
+      onDismiss?.();
+    };
+
+    return (
+      <Alert
+        ref={ref}
+        color={color}
+        className={cn(
+          "flex w-full flex-col gap-3 @sm/alert:flex-row @sm/alert:items-start",
+          dismissible && "pr-8 data-[size=sm]:pr-7 data-[size=lg]:pr-10",
+          className,
+        )}
+        {...props}
+      >
+        <div className="flex flex-1 items-start gap-3">
+          {icon && <AlertIcon render={icon} className="mt-0.5 shrink-0" />}
+          <div className="flex-1 space-y-0.5">
+            {title && <AlertTitle>{title}</AlertTitle>}
+            {description && <AlertDescription>{description}</AlertDescription>}
+            {children}
+          </div>
+        </div>
+        {action && (
+          <AlertAction className="shrink-0 @sm/alert:ml-4">
+            {action}
+          </AlertAction>
+        )}
+        {dismissible && (
+          <Button
+            variant="ghost"
+            color={color as React.ComponentProps<typeof Button>["color"]}
+            size="sm"
+            className="absolute right-1 top-1 p-0 size-6 group-data-[size=sm]/alert:size-5 group-data-[size=lg]/alert:size-7"
+            onClick={handleDismiss}
+            aria-label="Dismiss alert"
+            iconOnly
+          >
+            <XIcon className="size-3.5 group-data-[size=sm]/alert:size-3 group-data-[size=lg]/alert:size-4" />
+          </Button>
+        )}
+      </Alert>
+    );
+  },
+);
+
+AlertPreset.displayName = "AlertPreset";
+
+export { AlertPreset };

package/src/components/macro/avatar-preset.tsx

@@ -0,0 +1,54 @@
+import {
+  Avatar,
+  AvatarBadge,
+  AvatarFallback,
+  AvatarImage,
+} from "../../components/micro/avatar";
+import * as React from "react";
+
+export type AvatarPresetProps = React.ComponentProps<typeof Avatar> & {
+  src?: string;
+  alt?: string;
+  fallback?: React.ReactNode;
+  status?: "online" | "offline" | "away" | "busy";
+};
+
+const statusColors = {
+  online: "bg-success",
+  away: "bg-warning",
+  busy: "bg-destructive",
+  offline: "bg-muted-foreground/50",
+};
+
+function getInitials(name: string) {
+  const parts = name.split(" ").filter(Boolean);
+  if (parts.length === 0) return "??";
+  if (parts.length === 1)
+    return parts[0]?.substring(0, 2).toUpperCase() ?? "??";
+  return (
+    (parts[0]?.charAt(0) ?? "") + (parts[parts.length - 1]?.charAt(0) ?? "")
+  ).toUpperCase();
+}
+
+const AvatarPreset = React.forwardRef<
+  React.ComponentRef<typeof Avatar>,
+  AvatarPresetProps
+>(({ src, alt = "", fallback, status, ...avatarProps }, ref) => {
+  const generatedFallback = fallback ?? getInitials(alt);
+
+  return (
+    <Avatar ref={ref} {...avatarProps}>
+      <AvatarImage src={src} alt={alt} />
+      <AvatarFallback>{generatedFallback}</AvatarFallback>
+      {status && (
+        <AvatarBadge
+          className={`absolute z-10 right-0 bottom-0 ${statusColors[status]}`}
+        />
+      )}
+      {avatarProps.children}
+    </Avatar>
+  );
+});
+AvatarPreset.displayName = "AvatarPreset";
+
+export { AvatarPreset };

package/src/components/macro/breadcrumb-preset.tsx

@@ -0,0 +1,50 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../../components/micro/breadcrumb";
+import * as React from "react";
+
+export interface BreadcrumbPresetItem {
+  label: React.ReactNode;
+  href?: string;
+}
+
+export type BreadcrumbPresetProps = React.ComponentProps<typeof Breadcrumb> & {
+  items: BreadcrumbPresetItem[];
+};
+
+const BreadcrumbPreset = React.forwardRef<
+  React.ComponentRef<typeof Breadcrumb>,
+  BreadcrumbPresetProps
+>(({ items, ...breadcrumbProps }, ref) => {
+  return (
+    <Breadcrumb ref={ref} {...breadcrumbProps}>
+      <BreadcrumbList>
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          const isPage = isLast || !item.href;
+
+          return (
+            <React.Fragment key={index}>
+              <BreadcrumbItem>
+                {isPage ? (
+                  <BreadcrumbPage>{item.label}</BreadcrumbPage>
+                ) : (
+                  <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+              {!isLast && <BreadcrumbSeparator />}
+            </React.Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+});
+BreadcrumbPreset.displayName = "BreadcrumbPreset";
+
+export { BreadcrumbPreset };

package/src/components/macro/card-preset.tsx

@@ -0,0 +1,44 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components/micro/card";
+import * as React from "react";
+
+export type CardPresetProps = Omit<
+  React.ComponentProps<typeof Card>,
+  "title"
+> & {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  footer?: React.ReactNode;
+};
+
+const CardPreset = React.forwardRef<HTMLDivElement, CardPresetProps>(
+  ({ title, description, footer, children, className, ...props }, ref) => {
+    return (
+      <div className={className} ref={ref}>
+        <div className="@container/card size-full">
+          <Card className="size-full" {...props}>
+            {(title || description) && (
+              <CardHeader>
+                {title && <CardTitle>{title}</CardTitle>}
+                {description && (
+                  <CardDescription>{description}</CardDescription>
+                )}
+              </CardHeader>
+            )}
+            {children && <CardContent>{children}</CardContent>}
+            {footer && <CardFooter>{footer}</CardFooter>}
+          </Card>
+        </div>
+      </div>
+    );
+  },
+);
+CardPreset.displayName = "CardPreset";
+
+export { CardPreset };

package/src/components/macro/carousel-preset.tsx

@@ -0,0 +1,150 @@
+import {
+  Carousel,
+  CarouselContent,
+  CarouselDots,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  type CarouselApi,
+} from "../../components/micro/carousel";
+import { cn } from "../../lib/utils";
+import * as React from "react";
+
+export type CarouselPresetProps = Omit<
+  React.ComponentProps<typeof Carousel>,
+  "setApi" | "onScroll"
+> & {
+  items: { id: string | number; content: React.ReactNode }[];
+  showArrows?: boolean;
+  showDots?: boolean;
+  itemClassName?: string;
+  contentClassName?: string;
+
+  // Controlled & Uncontrolled props
+  index?: number;
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+};
+
+const CarouselPreset = React.forwardRef<
+  React.ComponentRef<typeof Carousel>,
+  CarouselPresetProps
+>(
+  (
+    {
+      items,
+      showArrows = true,
+      showDots = true,
+      itemClassName,
+      contentClassName,
+      index: controlledIndex,
+      defaultIndex = 0,
+      onIndexChange,
+      className,
+      ...carouselProps
+    },
+    ref,
+  ) => {
+    const [api, setApi] = React.useState<CarouselApi>();
+
+    React.useEffect(() => {
+      if (!api) return;
+      const handleSelect = () => {
+        onIndexChange?.(api.selectedScrollSnap());
+      };
+      api.on("select", handleSelect);
+      return () => {
+        api.off("select", handleSelect);
+      };
+    }, [api, onIndexChange]);
+
+    React.useEffect(() => {
+      if (!api || controlledIndex === undefined) return;
+      if (api.selectedScrollSnap() !== controlledIndex) {
+        api.scrollTo(controlledIndex);
+      }
+    }, [api, controlledIndex]);
+
+    const orientation = carouselProps.orientation || "horizontal";
+    const opts = { ...carouselProps.opts, startIndex: defaultIndex };
+
+    if (orientation === "vertical") {
+      return (
+        <div className={className}>
+          <div className="@container/carousel h-full">
+            <Carousel
+              ref={ref}
+              {...carouselProps}
+              opts={opts}
+              setApi={setApi}
+              orientation="vertical"
+              className="h-full"
+            >
+              <CarouselContent className={cn("-mt-4", contentClassName)}>
+                {items.map((item) => (
+                  <CarouselItem
+                    key={item.id}
+                    className={cn("pt-4", itemClassName)}
+                  >
+                    {item.content}
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              {showArrows && (
+                <>
+                  <CarouselPrevious className="absolute z-10 -top-12 left-1/2 -translate-x-1/2 rotate-90" />
+                  <CarouselNext className="absolute z-10 -bottom-12 left-1/2 -translate-x-1/2 rotate-90" />
+                </>
+              )}
+              {showDots && (
+                <div className="mt-2 flex justify-center">
+                  <CarouselDots />
+                </div>
+              )}
+            </Carousel>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className={className}>
+        <div className="@container/carousel size-full">
+          <Carousel
+            ref={ref}
+            {...carouselProps}
+            opts={opts}
+            setApi={setApi}
+            orientation="horizontal"
+            className="size-full"
+          >
+            <CarouselContent className={cn("-ml-4", contentClassName)}>
+              {items.map((item) => (
+                <CarouselItem
+                  key={item.id}
+                  className={cn("pl-4", itemClassName)}
+                >
+                  {item.content}
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            {showArrows && (
+              <>
+                <CarouselPrevious className="absolute z-10 inset-y-0 -left-12 my-auto" />
+                <CarouselNext className="absolute z-10 inset-y-0 -right-12 my-auto" />
+              </>
+            )}
+            {showDots && (
+              <div className="mt-4 flex justify-center">
+                <CarouselDots />
+              </div>
+            )}
+          </Carousel>
+        </div>
+      </div>
+    );
+  },
+);
+CarouselPreset.displayName = "CarouselPreset";
+
+export { CarouselPreset };

package/src/components/macro/checkbox-preset.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { CheckboxPreset } from "./checkbox-preset";
+
+describe("CheckboxPreset", () => {
+  it("renders checkbox", () => {
+    render(<CheckboxPreset />);
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).toBeInTheDocument();
+  });
+
+  it("renders label when provided", () => {
+    render(<CheckboxPreset label="Accept terms" />);
+    expect(screen.getByText("Accept terms")).toBeInTheDocument();
+  });
+
+  it("renders description when provided", () => {
+    render(<CheckboxPreset label="Terms" description="You must accept" />);
+    expect(screen.getByText("You must accept")).toBeInTheDocument();
+  });
+
+  it("renders error message when provided", () => {
+    render(<CheckboxPreset errorMessage="Required" />);
+    expect(screen.getByText("Required")).toBeInTheDocument();
+  });
+
+  it("sets aria-invalid when errorMessage is provided", () => {
+    render(<CheckboxPreset errorMessage="Required" />);
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("renders the check indicator", () => {
+    const { container } = render(<CheckboxPreset />);
+    // CheckboxIndicator may not render a separate data-slot when unchecked
+    const checkbox = container.querySelector("[data-slot='checkbox']");
+    expect(checkbox).toBeInTheDocument();
+  });
+
+  it("links label to checkbox", () => {
+    render(<CheckboxPreset label="Agree" />);
+    const checkbox = screen.getByRole("checkbox");
+    const label = screen.getByText("Agree");
+    expect(checkbox).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
+    // Label's for attr may point to internal input
+    expect(label.getAttribute("for")).toBeTruthy();
+  });
+});

package/src/components/macro/checkbox-preset.tsx

@@ -0,0 +1,84 @@
+import { Checkbox, CheckboxIndicator } from "../../components/micro/checkbox";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from "../../components/micro/field";
+import { type Size } from "../../lib/types";
+import { cn } from "../../lib/utils";
+import { CheckIcon } from "lucide-react";
+import * as React from "react";
+
+export type CheckboxPresetProps = Omit<
+  React.ComponentProps<typeof Checkbox>,
+  "className" | "size"
+> & {
+  // Forward className to the outermost wrapper (FieldPreset) instead of the Checkbox primitive
+  className?: string;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  errorMessage?: React.ReactNode;
+  showError?: boolean;
+  size?: Size;
+};
+
+const CheckboxPreset = React.forwardRef<
+  React.ComponentRef<typeof Checkbox>,
+  CheckboxPresetProps
+>(
+  (
+    {
+      label,
+      description,
+      errorMessage,
+      showError = true,
+      className,
+      id,
+      size = "md",
+      ...checkboxProps
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+
+    return (
+      <Field
+        className={cn("flex flex-row items-start gap-3", className)}
+        data-size={size}
+      >
+        {/* Zero-width space hack to perfectly align the Checkbox with the first line of the Label */}
+        <div className="flex items-center text-sm leading-snug group-data-[size=sm]/field:text-xs group-data-[size=lg]/field:text-base">
+          &#8203;
+          <Checkbox
+            ref={ref}
+            id={inputId}
+            aria-invalid={!!errorMessage}
+            size={size}
+            {...checkboxProps}
+          >
+            <CheckboxIndicator>
+              <CheckIcon />
+            </CheckboxIndicator>
+          </Checkbox>
+        </div>
+        <div className="grid gap-1.5 leading-none">
+          {label && (
+            <FieldLabel
+              htmlFor={inputId}
+              className="font-medium cursor-pointer"
+            >
+              {label}
+            </FieldLabel>
+          )}
+          {description && <FieldDescription>{description}</FieldDescription>}
+          {showError && errorMessage && <FieldError>{errorMessage}</FieldError>}
+        </div>
+      </Field>
+    );
+  },
+);
+CheckboxPreset.displayName = "CheckboxPreset";
+
+export { CheckboxPreset };