gladvn 0.2.14

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

@@ -0,0 +1,39 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { TextareaPreset } from "./textarea-preset";
+
+describe("TextareaPreset", () => {
+  it("renders textarea", () => {
+    render(<TextareaPreset />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toBeInTheDocument();
+  });
+
+  it("renders label when provided", () => {
+    render(<TextareaPreset label="Bio" />);
+    expect(screen.getByText("Bio")).toBeInTheDocument();
+  });
+
+  it("renders description when provided", () => {
+    render(<TextareaPreset label="Bio" description="Tell us about yourself" />);
+    expect(screen.getByText("Tell us about yourself")).toBeInTheDocument();
+  });
+
+  it("renders error message when provided", () => {
+    render(<TextareaPreset errorMessage="Too short" />);
+    expect(screen.getByText("Too short")).toBeInTheDocument();
+  });
+
+  it("sets aria-invalid when errorMessage is provided", () => {
+    render(<TextareaPreset errorMessage="Required" />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("passes placeholder to textarea", () => {
+    render(<TextareaPreset placeholder="Write something..." />);
+    expect(
+      screen.getByPlaceholderText("Write something..."),
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,55 @@
+import { Textarea, TextareaProps } from "../../components/micro/textarea";
+import React from "react";
+import { FieldPreset } from "./field-preset";
+
+export type TextareaPresetProps = Omit<TextareaProps, "className"> & {
+  className?: string;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  errorMessage?: React.ReactNode;
+  showError?: boolean;
+};
+
+export const TextareaPreset = React.forwardRef<
+  HTMLTextAreaElement,
+  TextareaPresetProps
+>(
+  (
+    {
+      label,
+      description,
+      errorMessage,
+      showError = true,
+      className,
+      size,
+      id,
+      ...props
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+
+    return (
+      <FieldPreset
+        label={label}
+        description={description}
+        errorMessage={errorMessage}
+        showError={showError}
+        className={className}
+        size={size}
+        htmlFor={inputId}
+      >
+        <Textarea
+          ref={ref}
+          id={inputId}
+          aria-invalid={!!errorMessage}
+          size={size}
+          {...props}
+        />
+      </FieldPreset>
+    );
+  },
+);
+
+TextareaPreset.displayName = "TextareaPreset";

package/src/components/micro/accordion.tsx

@@ -0,0 +1,76 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (20 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { ChevronDownIcon } from "lucide-react";
+
+const Accordion = React.forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Root>,
+  AccordionPrimitive.Root.Props
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Root
+    ref={ref}
+    data-slot="accordion"
+    className={cn("flex flex-col", className)}
+    {...props}
+  />
+));
+Accordion.displayName = "Accordion";
+
+const AccordionItem = React.forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Item>,
+  AccordionPrimitive.Item.Props
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    data-slot="accordion-item"
+    className={cn("not-last:border-b not-last:border-border", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Trigger>,
+  AccordionPrimitive.Trigger.Props
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className={cn("flex", className)}>
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      data-slot="accordion-trigger"
+      className="group/accordion-trigger relative flex flex-1 items-start justify-between gap-4 rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-colors outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50"
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon
+        data-slot="accordion-trigger-icon"
+        className="size-4 text-muted-foreground pointer-events-none shrink-0 transition-[rotate] duration-200 group-data-panel-open/accordion-trigger:rotate-180"
+      />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = "AccordionTrigger";
+
+const AccordionContent = React.forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Panel>,
+  AccordionPrimitive.Panel.Props
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Panel
+    ref={ref}
+    data-slot="accordion-content"
+    className="overflow-hidden text-sm h-(--accordion-panel-height) transition-[height] duration-200 ease-out data-starting-style:h-0 data-ending-style:h-0"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Panel>
+));
+AccordionContent.displayName = "AccordionContent";
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/components/micro/alert-dialog.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import * as React from "react";
+
+import { Button } from "../../components/micro/button";
+import { type Size } from "../../lib/types";
+import { cn } from "../../lib/utils";
+
+/**
+ * @description A modal dialog that interrupts the user with important content and expects a response.
+ * @requires AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter
+ * @example
+ * <AlertDialog>
+ *   <AlertDialogTrigger>Open</AlertDialogTrigger>
+ *   <AlertDialogContent>
+ *     <AlertDialogHeader><AlertDialogTitle>Are you sure?</AlertDialogTitle></AlertDialogHeader>
+ *     <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction>Continue</AlertDialogAction></AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>
+ */
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogClose({ ...props }: AlertDialogPrimitive.Close.Props) {
+  return (
+    <AlertDialogPrimitive.Close data-slot="alert-dialog-close" {...props} />
+  );
+}
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = "md",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: Size;
+}) {
+  return (
+    <>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none",
+          "data-[size=sm]:max-w-xs",
+          "data-[size=md]:max-w-xs data-[size=md]:sm:max-w-sm",
+          "data-[size=lg]:max-w-sm data-[size=lg]:sm:max-w-md",
+          "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        {...props}
+      />
+    </>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-t-border bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "inline-flex size-10 items-center justify-center [&>svg:not([class*='size-'])]:size-6",
+        "group-data-[size=lg]/alert-dialog-content:size-12",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-heading text-base font-medium",
+        "group-data-[size=lg]/alert-dialog-content:text-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_p]:leading-relaxed",
+        "group-data-[size=lg]/alert-dialog-content:text-base",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  variant,
+  color,
+  size = "md",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "color" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      render={<Button variant={variant} color={color} size={size} />}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  color,
+  size = "md",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "color" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} color={color} size={size} />}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/components/micro/alert.tsx

@@ -0,0 +1,146 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (22 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+// CSS Delegated Logic:
+// - KHÔNG CÒN MAGIC CSS: Mọi logic layout (như khoảng cách icon, padding action) đều được uỷ quyền cho Macro xử lý.
+const alertVariants = cva(
+  "group/alert relative rounded-lg border border-border text-left bg-card text-card-foreground",
+  {
+    variants: {
+      color: {
+        info: "border-info/15 bg-info/5 text-info",
+        destructive: "border-destructive/15 bg-destructive/5 text-destructive",
+        success: "border-success/15 bg-success/5 text-success",
+        warning: "border-warning/15 bg-warning/5 text-warning",
+      },
+      size: {
+        sm: "px-2 py-1.5 text-xs gap-x-1.5",
+        md: "px-2.5 py-2 text-sm gap-x-2",
+        lg: "px-3 py-2.5 text-base gap-x-2.5",
+      },
+    },
+  },
+);
+
+/**
+ * @description Displays a callout for user attention.
+ * @requires AlertTitle, AlertDescription
+ * @example
+ * <Alert variant="destructive">
+ *   <AlertTitle>Error</AlertTitle>
+ *   <AlertDescription>Something went wrong.</AlertDescription>
+ * </Alert>
+ */
+export type AlertProps = Omit<React.ComponentProps<"div">, "color"> &
+  VariantProps<typeof alertVariants>;
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  { className, color = "info", size = "md", ...props },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      data-slot="alert"
+      data-size={size}
+      data-color={color}
+      role="alert"
+      className={cn(alertVariants({ color, size }), className)}
+      {...props}
+    />
+  );
+});
+Alert.displayName = "Alert";
+
+export type AlertTitleProps = React.ComponentProps<"div">;
+
+const AlertTitle = React.forwardRef<HTMLDivElement, AlertTitleProps>(
+  function AlertTitle({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        data-slot="alert-title"
+        className={cn("font-medium", className)}
+        {...props}
+      />
+    );
+  },
+);
+AlertTitle.displayName = "AlertTitle";
+
+export type AlertDescriptionProps = React.ComponentProps<"div">;
+
+const AlertDescription = React.forwardRef<
+  HTMLDivElement,
+  AlertDescriptionProps
+>(function AlertDescription({ className, ...props }, ref) {
+  return (
+    <div
+      ref={ref}
+      data-slot="alert-description"
+      className={cn(
+        "text-balance text-muted-foreground md:text-pretty leading-relaxed",
+        "group-data-[color=info]/alert:text-info/90",
+        "group-data-[color=destructive]/alert:text-destructive/90",
+        "group-data-[color=success]/alert:text-success/90",
+        "group-data-[color=warning]/alert:text-warning/90",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+AlertDescription.displayName = "AlertDescription";
+
+export type AlertActionProps = React.ComponentProps<"div">;
+
+const AlertAction = React.forwardRef<HTMLDivElement, AlertActionProps>(
+  function AlertAction({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        data-slot="alert-action"
+        className={cn(className)}
+        {...props}
+      />
+    );
+  },
+);
+AlertAction.displayName = "AlertAction";
+
+export type AlertIconProps = useRender.ComponentProps<"div">;
+
+const AlertIcon = React.forwardRef<HTMLDivElement, AlertIconProps>(
+  function AlertIcon({ className, render, ...props }, ref) {
+    return useRender({
+      render,
+      defaultTagName: "div",
+      props: mergeProps<"div">(
+        {
+          ref,
+          className: cn(
+            "text-current",
+            "size-4 group-data-[size=sm]/alert:size-3.5 group-data-[size=lg]/alert:size-5",
+            className,
+          ),
+          "data-slot": "alert-icon",
+        } as React.ComponentProps<"div">,
+        props,
+      ),
+    });
+  },
+);
+AlertIcon.displayName = "AlertIcon";
+
+export { Alert, AlertAction, AlertDescription, AlertIcon, AlertTitle };

package/src/components/micro/aspect-ratio.tsx

@@ -0,0 +1,38 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (22 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+import { cn } from "../../lib/utils";
+import * as React from "react";
+
+/**
+ * @description Displays content within a desired ratio.
+ * @example
+ * <AspectRatio ratio={16 / 9}>
+ *   <img src="..." alt="..." />
+ * </AspectRatio>
+ */
+const AspectRatio = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { ratio: number }
+>(({ ratio, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="aspect-ratio"
+      style={
+        {
+          "--ratio": ratio,
+        } as React.CSSProperties
+      }
+      className={cn("relative aspect-(--ratio)", className)}
+      {...props}
+    />
+  );
+});
+AspectRatio.displayName = "AspectRatio";
+
+export { AspectRatio };