gladvn 0.2.14

package/src/components/micro/field.tsx

@@ -0,0 +1,311 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (22 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { AlertCircleIcon } from "lucide-react";
+import * as React from "react";
+
+import { Label } from "../../components/micro/label";
+import { Separator } from "../../components/micro/separator";
+import { cn } from "../../lib/utils";
+
+const FieldSet = React.forwardRef<
+  HTMLFieldSetElement,
+  React.ComponentProps<"fieldset">
+>(({ className, ...props }, ref) => {
+  return (
+    <fieldset
+      ref={ref}
+      data-slot="field-set"
+      className={cn("flex flex-col gap-4", className)}
+      {...props}
+    />
+  );
+});
+FieldSet.displayName = "FieldSet";
+
+const FieldLegend = React.forwardRef<
+  HTMLLegendElement,
+  React.ComponentProps<"legend"> & { variant?: "legend" | "label" }
+>(({ className, variant = "legend", ...props }, ref) => {
+  return (
+    <legend
+      ref={ref}
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+FieldLegend.displayName = "FieldLegend";
+
+const FieldGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="field-group"
+      className={cn(
+        "group/field-group flex flex-col gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+FieldGroup.displayName = "FieldGroup";
+
+const fieldVariants = cva("group/field flex min-w-fit", {
+  variants: {
+    orientation: {
+      vertical: "flex-col [&>.sr-only]:w-auto",
+      horizontal: "flex-row items-center [&>[data-slot=field-label]]:flex-auto",
+      // Responsive: vertical on mobile, horizontal on @md breakpoint.
+      responsive:
+        "flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>[data-slot=field-label]]:flex-auto [&>.sr-only]:w-auto",
+    },
+    size: {
+      sm: "",
+      md: "",
+      lg: "",
+    },
+  },
+  compoundVariants: [
+    { orientation: "vertical", size: "sm", className: "gap-0.5" },
+    { orientation: "vertical", size: "md", className: "gap-0.5" },
+    { orientation: "vertical", size: "lg", className: "gap-0.5" },
+
+    { orientation: "horizontal", size: "sm", className: "gap-1" },
+    { orientation: "horizontal", size: "md", className: "gap-1.5" },
+    { orientation: "horizontal", size: "lg", className: "gap-2" },
+
+    {
+      orientation: "responsive",
+      size: "sm",
+      className: "gap-0.5 @md/field-group:gap-1",
+    },
+    {
+      orientation: "responsive",
+      size: "md",
+      className: "gap-0.5 @md/field-group:gap-1.5",
+    },
+    {
+      orientation: "responsive",
+      size: "lg",
+      className: "gap-0.5 @md/field-group:gap-2",
+    },
+  ],
+});
+
+const Field = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+  VariantProps<typeof fieldVariants> & { error?: boolean | string }
+>(
+  (
+    { className, orientation = "vertical", size = "md", error, ...props },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        role="group"
+        data-slot="field"
+        data-orientation={orientation}
+        data-size={size}
+        data-invalid={!!error}
+        className={cn(fieldVariants({ orientation, size }), className)}
+        {...props}
+      />
+    );
+  },
+);
+Field.displayName = "Field";
+
+const FieldContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+FieldContent.displayName = "FieldContent";
+
+const FieldLabel = React.forwardRef<
+  React.ElementRef<typeof Label>,
+  React.ComponentProps<typeof Label>
+>(({ className, ...props }, ref) => {
+  return (
+    <Label
+      ref={ref}
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "text-sm group-data-[size=sm]/field:text-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+FieldLabel.displayName = "FieldLabel";
+
+const FieldTitle = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="field-title"
+      className={cn(
+        "flex w-fit items-center gap-2 font-medium group-data-[disabled=true]/field:opacity-50",
+        "text-sm group-data-[size=sm]/field:text-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+FieldTitle.displayName = "FieldTitle";
+
+const FieldDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentProps<"p">
+>(({ className, ...props }, ref) => {
+  return (
+    <p
+      ref={ref}
+      data-slot="field-description"
+      className={cn(
+        // Pull up when after a legend variant; balance text when inside horizontal Field
+        "text-left leading-normal font-normal text-muted-foreground group-data-[orientation=horizontal]/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        // Tighten gap: no margin when last child, pull up when second-to-last (before FieldError)
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        "text-sm group-data-[size=sm]/field:text-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+FieldDescription.displayName = "FieldDescription";
+
+const FieldSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { children?: React.ReactNode }
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className,
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  );
+});
+FieldSeparator.displayName = "FieldSeparator";
+
+const FieldError = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    errors?: Array<{ message?: string } | undefined>;
+  }
+>(({ className, children, errors, ...props }, ref) => {
+  const content = React.useMemo(() => {
+    if (children) {
+      return children;
+    }
+
+    if (!errors?.length) {
+      return null;
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ];
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>,
+        )}
+      </ul>
+    );
+  }, [children, errors]);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      role="alert"
+      data-slot="field-error"
+      className={cn(
+        "text-sm font-medium text-destructive flex items-start gap-1.5 animate-in fade-in-0 slide-in-from-top-1",
+        className,
+      )}
+      {...props}
+    >
+      <AlertCircleIcon className="size-4 shrink-0 mt-0.5" />
+      <div className="flex-1">{content}</div>
+    </div>
+  );
+});
+FieldError.displayName = "FieldError";
+
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+};

package/src/components/micro/hover-card.tsx

@@ -0,0 +1,86 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (22 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+"use client";
+
+import * as React from "react";
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * @description For sighted users to preview content available behind a link.
+ * @requires HoverCardTrigger, HoverCardContent
+ * @example
+ * <HoverCard>
+ *   <HoverCardTrigger>Hover me</HoverCardTrigger>
+ *   <HoverCardContent>Details</HoverCardContent>
+ * </HoverCard>
+ */
+function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
+  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+const HoverCardTrigger = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<typeof PreviewCardPrimitive.Trigger>
+>(({ ...props }, ref) => (
+  <PreviewCardPrimitive.Trigger
+    ref={ref}
+    data-slot="hover-card-trigger"
+    {...props}
+  />
+));
+HoverCardTrigger.displayName = "HoverCardTrigger";
+
+const HoverCardPortal = PreviewCardPrimitive.Portal;
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof PreviewCardPrimitive.Popup>,
+  React.ComponentPropsWithoutRef<typeof PreviewCardPrimitive.Popup> &
+    Pick<
+      React.ComponentPropsWithoutRef<typeof PreviewCardPrimitive.Positioner>,
+      "align" | "alignOffset" | "side" | "sideOffset"
+    >
+>(
+  (
+    {
+      className,
+      side = "bottom",
+      sideOffset = 4,
+      align = "center",
+      alignOffset = 4,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <PreviewCardPrimitive.Positioner
+            align={align}
+            alignOffset={alignOffset}
+            side={side}
+            sideOffset={sideOffset}
+            className="isolate"
+          >
+            <PreviewCardPrimitive.Popup
+              ref={ref}
+              data-slot="hover-card-content"
+              className={cn(
+                "z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100",
+                "data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                "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 motion-reduce:animate-none motion-reduce:transition-none",
+                className,
+              )}
+              {...props}
+            />
+          </PreviewCardPrimitive.Positioner>
+    );
+  },
+);
+HoverCardContent.displayName = "HoverCardContent";
+
+export { HoverCard, HoverCardContent, HoverCardTrigger, HoverCardPortal };

package/src/components/micro/input-group.tsx

@@ -0,0 +1,269 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Self-contained: no imports from @/components/micro/*
+ * - InputGroupButton, InputGroupInput, InputGroupTextarea render native HTML
+ * - Size is always inherited from InputGroup wrapper via CSS group modifiers
+ * - InputGroupButton placed directly in InputGroup (not inside InputGroupAddon)
+ */
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+/* ── InputGroup ─────────────────────────────────────────────────
+   Wrapper that groups inputs, addons, and action buttons.
+   `size` is set once here and propagated to all children via
+   CSS group modifiers: group-data-[size=sm|md|lg]/input-group:*
+   ─────────────────────────────────────────────────────────────── */
+const inputGroupVariants = cva(
+  [
+    "group/input-group relative flex min-w-0 items-center overflow-hidden rounded-lg border border-input transition-colors outline-none",
+    // Disabled state delegated from inner elements
+    "has-disabled:bg-input/50 has-disabled:opacity-50 has-disabled:cursor-not-allowed dark:has-disabled:bg-input/80",
+    // Focus ring delegated from [data-slot=input-group-control]
+    "has-[[data-slot=input-group-control]:focus-visible]:border-ring",
+    "has-[[data-slot=input-group-control]:focus-visible]:ring-3",
+    "has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
+    "has-[[data-slot=input-group-control]:focus-visible]:ring-offset-1",
+    "has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background",
+    // Error state delegated from aria-invalid on inner control
+    "has-[[data-slot][aria-invalid=true]]:border-destructive",
+    "has-[[data-slot][aria-invalid=true]:focus-visible]:ring-3",
+    "has-[[data-slot][aria-invalid=true]:focus-visible]:ring-destructive/50",
+    "has-[[data-slot][aria-invalid=true]:focus-visible]:border-destructive",
+    // Dark mode base
+    "dark:bg-input/30",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "min-h-7 text-xs",
+        md: "min-h-8 text-sm",
+        lg: "min-h-9 text-sm",
+      },
+    },
+  },
+);
+
+const InputGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> &
+    VariantProps<typeof inputGroupVariants>
+>(function InputGroup({ className, size = "md", ...props }, ref) {
+  return (
+    <div
+      ref={ref}
+      data-slot="input-group"
+      data-size={size}
+      role="group"
+      className={cn(inputGroupVariants({ size }), className)}
+      {...props}
+    />
+  );
+});
+InputGroup.displayName = "InputGroup";
+
+/* ── InputGroupAddon ─────────────────────────────────────────────
+   Decorative slot for text/icon labels only (non-interactive).
+   Clicking the addon area focuses the nearest input/textarea.
+   Use `align="start"` (default) or `align="end"`.
+   ─────────────────────────────────────────────────────────────── */
+const inputGroupAddonVariants = cva(
+  [
+    "flex h-auto cursor-text items-center justify-center gap-2 font-medium text-muted-foreground select-none",
+    "group-has-[[data-slot][aria-invalid=true]]/input-group:text-destructive",
+    "group-data-[size=sm]/input-group:py-0.5",
+    "group-data-[size=md]/input-group:py-1.5",
+    "group-data-[size=lg]/input-group:py-1.5",
+    "[&>svg:not([class*='size-'])]:size-4",
+    "group-data-[size=sm]/input-group:[&>svg:not([class*='size-'])]:size-3.5",
+  ],
+  {
+    variants: {
+      align: {
+        start: "order-first pl-2 pr-1",
+        end: "order-last pl-1 pr-2",
+      },
+    },
+  },
+);
+
+const InputGroupAddon = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> &
+    VariantProps<typeof inputGroupAddonVariants>
+>(function InputGroupAddon({ className, align = "start", ...props }, ref) {
+  return (
+    <div
+      ref={ref}
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) return;
+        e.currentTarget.parentElement
+          ?.querySelector<HTMLElement>("input, textarea")
+          ?.focus();
+      }}
+      {...props}
+    />
+  );
+});
+InputGroupAddon.displayName = "InputGroupAddon";
+
+/* ── InputGroupText ──────────────────────────────────────────────
+   Inline label text or icon+text combo inside an InputGroupAddon.
+   @note Decorative icons placed here should include `aria-hidden="true"`
+   to prevent screen readers from announcing them, e.g.:
+   <InputGroupText><SearchIcon aria-hidden="true" /></InputGroupText>
+   ─────────────────────────────────────────────────────────────── */
+const InputGroupText = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(function InputGroupText({ className, ...props }, ref) {
+  return (
+    <span
+      ref={ref}
+      className={cn(
+        "flex items-center gap-2 text-muted-foreground",
+        "[&>svg]:pointer-events-none [&>svg:not([class*='size-'])]:size-4",
+        "group-data-[size=sm]/input-group:[&>svg:not([class*='size-'])]:size-3.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+InputGroupText.displayName = "InputGroupText";
+
+/* ── InputGroupButton ────────────────────────────────────────────
+   Self-contained native <button>. Place directly inside InputGroup
+   (not inside InputGroupAddon). Size is always inherited from the
+   parent InputGroup via CSS group modifiers — no `size` prop.
+
+   Separator borders (border-l / border-r) are applied automatically
+   based on DOM position within the flex container.
+
+   icon={true}  → square icon-only button (width = row height)
+   icon={false} → text button with horizontal padding (default)
+   ─────────────────────────────────────────────────────────────── */
+const inputGroupButtonVariants = cva(
+  [
+    "inline-flex shrink-0 self-stretch cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors duration-150 select-none",
+    // Self-managed focus ring (separate from wrapper delegation)
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50",
+    // Auto separator borders based on sibling position
+    "[&:not(:first-child)]:border-l [&:not(:last-child)]:border-r border-border",
+    // Icon sizing — base (md/lg), overridden for sm. Shared by both icon and text modes.
+    "[&>svg:not([class*='size-'])]:size-4",
+    "group-data-[size=sm]/input-group:[&>svg:not([class*='size-'])]:size-3.5",
+  ],
+  {
+    variants: {
+      variant: {
+        ghost:
+          "bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground",
+        solid: "bg-primary text-primary-foreground hover:bg-primary/90",
+        soft: "bg-muted text-foreground hover:bg-muted/80",
+        outline:
+          "border border-input bg-transparent text-foreground hover:bg-muted/50",
+      },
+      icon: {
+        true: [
+          // Square: width = min-h of wrapper
+          "group-data-[size=sm]/input-group:w-7",
+          "group-data-[size=md]/input-group:w-8",
+          "group-data-[size=lg]/input-group:w-9",
+        ],
+        false: [
+          // Text button: horizontal padding + font size from group
+          "group-data-[size=sm]/input-group:px-2 group-data-[size=sm]/input-group:text-xs",
+          "group-data-[size=md]/input-group:px-2.5 group-data-[size=md]/input-group:text-sm",
+          "group-data-[size=lg]/input-group:px-3 group-data-[size=lg]/input-group:text-sm",
+        ],
+      },
+    },
+  },
+);
+
+type InputGroupButtonProps = React.ComponentPropsWithoutRef<"button"> &
+  VariantProps<typeof inputGroupButtonVariants>;
+
+const InputGroupButton = React.forwardRef<
+  HTMLButtonElement,
+  InputGroupButtonProps
+>(function InputGroupButton(
+  { className, type = "button", variant = "ghost", icon = false, ...props },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type={type}
+      data-slot="input-group-button"
+      className={cn(inputGroupButtonVariants({ variant, icon }), className)}
+      {...props}
+    />
+  );
+});
+InputGroupButton.displayName = "InputGroupButton";
+
+/* ── InputGroupInput ─────────────────────────────────────────────
+   Self-contained native <input>. Size inherited from InputGroup.
+   ─────────────────────────────────────────────────────────────── */
+const InputGroupInput = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentPropsWithoutRef<"input">
+>(function InputGroupInput({ className, ...props }, ref) {
+  return (
+    <input
+      ref={ref}
+      data-slot="input-group-control"
+      className={cn(
+        "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+        "group-data-[size=sm]/input-group:h-7 group-data-[size=sm]/input-group:px-2 group-data-[size=sm]/input-group:py-0.5 group-data-[size=sm]/input-group:text-xs",
+        "group-data-[size=md]/input-group:h-8 group-data-[size=md]/input-group:px-2.5 group-data-[size=md]/input-group:py-1 group-data-[size=md]/input-group:text-sm",
+        "group-data-[size=lg]/input-group:h-9 group-data-[size=lg]/input-group:px-3 group-data-[size=lg]/input-group:py-1.5 group-data-[size=lg]/input-group:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+InputGroupInput.displayName = "InputGroupInput";
+
+/* ── InputGroupTextarea ──────────────────────────────────────────
+   Self-contained native <textarea>. Size inherited from InputGroup.
+   ─────────────────────────────────────────────────────────────── */
+const InputGroupTextarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentPropsWithoutRef<"textarea">
+>(function InputGroupTextarea({ className, ...props }, ref) {
+  return (
+    <textarea
+      ref={ref}
+      data-slot="input-group-control"
+      className={cn(
+        "min-w-0 flex-1 resize-none bg-transparent py-2 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+        "group-data-[size=sm]/input-group:px-2 group-data-[size=sm]/input-group:text-xs",
+        "group-data-[size=md]/input-group:px-2.5 group-data-[size=md]/input-group:text-sm",
+        "group-data-[size=lg]/input-group:px-3 group-data-[size=lg]/input-group:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+InputGroupTextarea.displayName = "InputGroupTextarea";
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+};