gladvn 0.2.14

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

@@ -0,0 +1,69 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { FieldPreset } from "./field-preset";
+
+describe("FieldPreset", () => {
+  it("renders children", () => {
+    render(
+      <FieldPreset>
+        <input data-testid="child-input" />
+      </FieldPreset>,
+    );
+    expect(screen.getByTestId("child-input")).toBeInTheDocument();
+  });
+
+  it("renders label when provided", () => {
+    render(
+      <FieldPreset label="Name">
+        <input />
+      </FieldPreset>,
+    );
+    expect(screen.getByText("Name")).toBeInTheDocument();
+  });
+
+  it("renders description when provided", () => {
+    render(
+      <FieldPreset description="Enter your name">
+        <input />
+      </FieldPreset>,
+    );
+    expect(screen.getByText("Enter your name")).toBeInTheDocument();
+  });
+
+  it("renders error message when provided", () => {
+    render(
+      <FieldPreset errorMessage="Field is required">
+        <input />
+      </FieldPreset>,
+    );
+    expect(screen.getByText("Field is required")).toBeInTheDocument();
+  });
+
+  it("does not render error when showError is false", () => {
+    render(
+      <FieldPreset errorMessage="Required" showError={false}>
+        <input />
+      </FieldPreset>,
+    );
+    expect(screen.queryByText("Required")).not.toBeInTheDocument();
+  });
+
+  it("sets invalid state on field wrapper", () => {
+    const { container } = render(
+      <FieldPreset errorMessage="Bad">
+        <input />
+      </FieldPreset>,
+    );
+    const field = container.querySelector("[data-slot='field']");
+    expect(field).toHaveAttribute("data-invalid", "true");
+  });
+
+  it("applies className to field wrapper", () => {
+    const { container } = render(
+      <FieldPreset className="my-class">
+        <input />
+      </FieldPreset>,
+    );
+    expect(container.firstChild).toHaveClass("my-class");
+  });
+});

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

@@ -0,0 +1,65 @@
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from "../../components/micro/field";
+import { type Size } from "../../lib/types";
+import * as React from "react";
+
+export type FieldPresetProps = Omit<
+  React.ComponentProps<typeof Field>,
+  "error"
+> & {
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  errorMessage?: React.ReactNode;
+  showError?: boolean;
+  htmlFor?: string;
+  children: React.ReactNode;
+  size?: Size;
+};
+
+const FieldPreset = React.forwardRef<
+  React.ComponentRef<typeof Field>,
+  FieldPresetProps
+>(
+  (
+    {
+      label,
+      description,
+      errorMessage,
+      showError = true,
+      htmlFor,
+      children,
+      className,
+      size,
+      ...fieldProps
+    },
+    ref,
+  ) => {
+    return (
+      <div className={className} ref={ref}>
+        <div className="@container/field size-full">
+          <Field
+            className="size-full"
+            error={!!errorMessage}
+            size={size}
+            {...fieldProps}
+          >
+            {label && <FieldLabel htmlFor={htmlFor}>{label}</FieldLabel>}
+            <FieldContent>{children}</FieldContent>
+            {description && <FieldDescription>{description}</FieldDescription>}
+            {showError && errorMessage && (
+              <FieldError>{errorMessage}</FieldError>
+            )}
+          </Field>
+        </div>
+      </div>
+    );
+  },
+);
+FieldPreset.displayName = "FieldPreset";
+
+export { FieldPreset };

package/src/components/macro/index.ts

@@ -0,0 +1,21 @@
+export * from "./accordion-preset";
+export * from "./alert-dialog-preset";
+export * from "./alert-preset";
+export * from "./avatar-preset";
+export * from "./breadcrumb-preset";
+export * from "./card-preset";
+export * from "./carousel-preset";
+export * from "./checkbox-preset";
+export * from "./combobox-preset";
+export * from "./date-picker";
+export * from "./field-preset";
+export * from "./input-otp-preset";
+export * from "./input-preset";
+export * from "./pagination-preset";
+export * from "./progress-preset";
+export * from "./radio-group-preset";
+export * from "./select-preset";
+export * from "./slider-preset";
+export * from "./switch-preset";
+export * from "./tabs-preset";
+export * from "./textarea-preset";

package/src/components/macro/input-otp-preset.tsx

@@ -0,0 +1,98 @@
+/**
+ * ✅ STABLE
+ * - Full Utilization of Micro Components
+ * - Custom Layout & Groups
+ * - Form Control Integration
+ */
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "../../components/micro/input-otp";
+import { MinusIcon } from "lucide-react";
+import * as React from "react";
+import { FieldPreset } from "./field-preset";
+
+export type InputOTPPresetProps = Omit<
+  React.ComponentProps<typeof InputOTP>,
+  "children" | "render" | "maxLength"
+> & {
+  groups: number[];
+  separator?: React.ReactNode;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  errorMessage?: React.ReactNode;
+  showError?: boolean;
+};
+
+const InputOTPPreset = React.forwardRef<
+  React.ComponentRef<typeof InputOTP>,
+  InputOTPPresetProps
+>(
+  (
+    {
+      groups,
+      separator = <MinusIcon aria-hidden="true" />,
+      label,
+      description,
+      errorMessage,
+      showError = true,
+      className,
+      id,
+      size = "md",
+      ...inputOtpProps
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+    const totalLength = groups.reduce((a, b) => a + b, 0);
+
+    return (
+      <FieldPreset
+        label={label}
+        description={description}
+        errorMessage={errorMessage}
+        showError={showError}
+        className={className}
+        size={size!}
+        orientation="vertical"
+        htmlFor={inputId}
+      >
+        <InputOTP
+          ref={ref}
+          id={inputId}
+          size={size}
+          maxLength={totalLength}
+          aria-invalid={!!errorMessage || undefined}
+          {...inputOtpProps}
+        >
+          {groups.map((groupLength, groupIndex) => (
+            <React.Fragment key={`${inputId}-g-${groupIndex}`}>
+              {groupIndex > 0 && (
+                <InputOTPSeparator>{separator}</InputOTPSeparator>
+              )}
+              <InputOTPGroup>
+                {Array.from({ length: groupLength }).map((_, index) => {
+                  const slotIndex =
+                    groups.slice(0, groupIndex).reduce((a, b) => a + b, 0) +
+                    index;
+                  return (
+                    <InputOTPSlot
+                      key={`${inputId}-slot-${slotIndex}`}
+                      index={slotIndex}
+                    />
+                  );
+                })}
+              </InputOTPGroup>
+            </React.Fragment>
+          ))}
+        </InputOTP>
+      </FieldPreset>
+    );
+  },
+);
+InputOTPPreset.displayName = "InputOTPPreset";
+
+export { InputOTPPreset };

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

@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { InputPreset } from "./input-preset";
+
+describe("InputPreset", () => {
+  it("renders with default props", () => {
+    render(<InputPreset />);
+    const input = screen.getByRole("textbox");
+    expect(input).toBeInTheDocument();
+  });
+
+  it("renders label when provided", () => {
+    render(<InputPreset label="Email" />);
+    expect(screen.getByText("Email")).toBeInTheDocument();
+  });
+
+  it("renders description when provided", () => {
+    render(
+      <InputPreset label="Email" description="Enter your email address" />,
+    );
+    expect(screen.getByText("Enter your email address")).toBeInTheDocument();
+  });
+
+  it("renders error message when provided", () => {
+    render(<InputPreset errorMessage="This field is required" />);
+    expect(screen.getByText("This field is required")).toBeInTheDocument();
+  });
+
+  it("sets aria-invalid when errorMessage is provided", () => {
+    render(<InputPreset errorMessage="Required" />);
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("passes placeholder to input", () => {
+    render(<InputPreset placeholder="Type here..." />);
+    expect(screen.getByPlaceholderText("Type here...")).toBeInTheDocument();
+  });
+
+  it("applies className to wrapper", () => {
+    const { container } = render(<InputPreset className="custom-class" />);
+    expect(container.firstChild).toHaveClass("custom-class");
+  });
+
+  it("generates unique id linking label and input", () => {
+    render(<InputPreset label="Username" />);
+    const input = screen.getByRole("textbox");
+    const label = screen.getByText("Username");
+    expect(input.id).toBeTruthy();
+    expect(label).toHaveAttribute("for", input.id);
+  });
+});

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

@@ -0,0 +1,139 @@
+"use client";
+
+import { Input, InputProps } from "../../components/micro/input";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+} from "../../components/micro/input-group";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React, { useState } from "react";
+import { FieldPreset } from "./field-preset";
+
+export type InputPresetProps = Omit<InputProps, "className"> & {
+  className?: string;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  errorMessage?: React.ReactNode;
+  showError?: boolean;
+  startAdornment?: React.ReactNode;
+  endAdornment?: React.ReactNode;
+};
+
+export const InputPreset = React.forwardRef<HTMLInputElement, InputPresetProps>(
+  (
+    {
+      label,
+      description,
+      errorMessage,
+      showError = true,
+      className,
+      size,
+      id,
+      startAdornment,
+      endAdornment,
+      type,
+      ...props
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+    const isInvalid = !!errorMessage;
+
+    // Auto password toggle logic
+    const isPasswordType = type === "password";
+    const [showPassword, setShowPassword] = useState(false);
+    const actualType = isPasswordType
+      ? showPassword
+        ? "text"
+        : "password"
+      : type;
+
+    const passwordToggleAdornment = isPasswordType ? (
+      <InputGroupButton
+        type="button"
+        variant="ghost"
+        icon
+        onClick={() => setShowPassword((prev) => !prev)}
+        aria-label={showPassword ? "Hide password" : "Show password"}
+        aria-pressed={showPassword}
+        className="text-muted-foreground hover:text-foreground"
+      >
+        {showPassword ? (
+          <EyeOffIcon className="size-4" />
+        ) : (
+          <EyeIcon className="size-4" />
+        )}
+      </InputGroupButton>
+    ) : null;
+
+    const combinedEndAdornment =
+      endAdornment || passwordToggleAdornment ? (
+        <>
+          {endAdornment &&
+            (typeof endAdornment === "string" ? (
+              <InputGroupText>{endAdornment}</InputGroupText>
+            ) : (
+              endAdornment
+            ))}
+          {passwordToggleAdornment}
+        </>
+      ) : null;
+
+    const hasAdornments = !!startAdornment || !!combinedEndAdornment;
+
+    return (
+      <FieldPreset
+        label={label}
+        description={description}
+        errorMessage={errorMessage}
+        showError={showError}
+        className={className}
+        size={size}
+        htmlFor={inputId}
+      >
+        {hasAdornments ? (
+          <div className="@container/input-group w-full">
+            <InputGroup size={size} className="w-full">
+              {startAdornment && (
+                <InputGroupAddon align="start">
+                  {typeof startAdornment === "string" ? (
+                    <InputGroupText>{startAdornment}</InputGroupText>
+                  ) : (
+                    startAdornment
+                  )}
+                </InputGroupAddon>
+              )}
+              <InputGroupInput
+                ref={ref}
+                id={inputId}
+                aria-invalid={isInvalid}
+                type={actualType}
+                {...(props as React.ComponentPropsWithoutRef<"input">)}
+              />
+              {combinedEndAdornment && (
+                <InputGroupAddon align="end">
+                  {combinedEndAdornment}
+                </InputGroupAddon>
+              )}
+            </InputGroup>
+          </div>
+        ) : (
+          <Input
+            ref={ref}
+            id={inputId}
+            size={size}
+            type={actualType}
+            aria-invalid={isInvalid}
+            {...props}
+          />
+        )}
+      </FieldPreset>
+    );
+  },
+);
+
+InputPreset.displayName = "InputPreset";

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

@@ -0,0 +1,153 @@
+import * as React from "react";
+
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "../../components/micro/pagination";
+import { cn } from "../../lib/utils";
+import type { Size } from "../../lib/types";
+
+export type PaginationPresetProps = React.ComponentProps<typeof Pagination> & {
+  currentPage: number;
+  totalPages: number;
+  onPageChange?: (page: number) => void;
+  siblingCount?: number;
+  size?: Size;
+};
+
+function generatePaginationRange(
+  currentPage: number,
+  totalPages: number,
+  siblingCount = 1,
+) {
+  const totalPageNumbers = siblingCount + 5;
+
+  if (totalPageNumbers >= totalPages) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+
+  const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+  const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+
+  const shouldShowLeftDots = leftSiblingIndex > 2;
+  const shouldShowRightDots = rightSiblingIndex < totalPages - 2;
+
+  const firstPageIndex = 1;
+  const lastPageIndex = totalPages;
+
+  if (!shouldShowLeftDots && shouldShowRightDots) {
+    const leftItemCount = 3 + 2 * siblingCount;
+    const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
+    return [...leftRange, "...", totalPages];
+  }
+
+  if (shouldShowLeftDots && !shouldShowRightDots) {
+    const rightItemCount = 3 + 2 * siblingCount;
+    const rightRange = Array.from(
+      { length: rightItemCount },
+      (_, i) => totalPages - rightItemCount + i + 1,
+    );
+    return [firstPageIndex, "...", ...rightRange];
+  }
+
+  if (shouldShowLeftDots && shouldShowRightDots) {
+    const middleRange = Array.from(
+      { length: rightSiblingIndex - leftSiblingIndex + 1 },
+      (_, i) => leftSiblingIndex + i,
+    );
+    return [firstPageIndex, "...", ...middleRange, "...", lastPageIndex];
+  }
+
+  return [];
+}
+
+const PaginationPreset = React.forwardRef<HTMLElement, PaginationPresetProps>(
+  (
+    {
+      currentPage,
+      totalPages,
+      onPageChange,
+      siblingCount = 1,
+      size = "md",
+      className,
+      ...paginationProps
+    },
+    ref,
+  ) => {
+    const paginationRange = generatePaginationRange(
+      currentPage,
+      totalPages,
+      siblingCount,
+    );
+
+    return (
+      <Pagination ref={ref} className={className} {...paginationProps}>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              href="#"
+              size={size}
+              onClick={(e) => {
+                e.preventDefault();
+                if (currentPage > 1) onPageChange?.(currentPage - 1);
+              }}
+              aria-disabled={currentPage === 1}
+              className={cn({
+                "pointer-events-none opacity-50": currentPage === 1,
+              })}
+            />
+          </PaginationItem>
+
+          {paginationRange.map((pageNumber, index) => {
+            if (pageNumber === "...") {
+              return (
+                <PaginationItem key={`ellipsis-${index}`}>
+                  <PaginationEllipsis size={size} />
+                </PaginationItem>
+              );
+            }
+
+            return (
+              <PaginationItem key={`page-${pageNumber}`}>
+                <PaginationLink
+                  href="#"
+                  size={size}
+                  isActive={pageNumber === currentPage}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    onPageChange?.(pageNumber as number);
+                  }}
+                >
+                  {pageNumber}
+                </PaginationLink>
+              </PaginationItem>
+            );
+          })}
+
+          <PaginationItem>
+            <PaginationNext
+              href="#"
+              size={size}
+              onClick={(e) => {
+                e.preventDefault();
+                if (currentPage < totalPages) onPageChange?.(currentPage + 1);
+              }}
+              aria-disabled={currentPage === totalPages}
+              className={cn({
+                "pointer-events-none opacity-50": currentPage === totalPages,
+              })}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    );
+  },
+);
+PaginationPreset.displayName = "PaginationPreset";
+
+export { PaginationPreset };

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

@@ -0,0 +1,65 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ProgressPreset } from "./progress-preset";
+
+describe("ProgressPreset", () => {
+  it("renders progress bar", () => {
+    const { container } = render(<ProgressPreset value={50} />);
+    const progress = container.querySelector("[data-slot='progress']");
+    expect(progress).toBeInTheDocument();
+  });
+
+  it("renders track and indicator", () => {
+    const { container } = render(<ProgressPreset value={50} />);
+    expect(
+      container.querySelector("[data-slot='progress-track']"),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector("[data-slot='progress-indicator']"),
+    ).toBeInTheDocument();
+  });
+
+  it("renders label when provided", () => {
+    const { container } = render(
+      <ProgressPreset value={75} label="Uploading" />,
+    );
+    const label = container.querySelector("[data-slot='progress-label']");
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveTextContent("Uploading");
+  });
+
+  it("renders value display when label and showValue are set", () => {
+    const { container } = render(
+      <ProgressPreset value={75} label="Loading" showValue />,
+    );
+    const valueEl = container.querySelector("[data-slot='progress-value']");
+    expect(valueEl).toBeInTheDocument();
+  });
+
+  it("does not render label or value when label is not provided", () => {
+    const { container } = render(<ProgressPreset value={50} />);
+    expect(
+      container.querySelector("[data-slot='progress-label']"),
+    ).not.toBeInTheDocument();
+    expect(
+      container.querySelector("[data-slot='progress-value']"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("supports indeterminate state (no value)", () => {
+    const { container } = render(<ProgressPreset />);
+    const progress = container.querySelector("[data-slot='progress']");
+    expect(progress).toBeInTheDocument();
+  });
+
+  it("accepts custom children for composition mode", () => {
+    const { container } = render(
+      <ProgressPreset value={30}>
+        <div data-testid="custom-child">Custom</div>
+      </ProgressPreset>,
+    );
+    expect(
+      container.querySelector("[data-testid='custom-child']"),
+    ).toBeInTheDocument();
+  });
+});