gladvn 0.2.14

package/src/components/micro/popover.tsx

@@ -0,0 +1,131 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (22 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ * - No Hardcoded Dimensions
+ */
+"use client";
+
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root {...props} />;
+}
+
+const PopoverTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
+>((props, ref) => {
+  return (
+    <PopoverPrimitive.Trigger
+      ref={ref}
+      data-slot="popover-trigger"
+      {...props}
+    />
+  );
+});
+PopoverTrigger.displayName = "PopoverTrigger";
+
+const PopoverPortal = PopoverPrimitive.Portal;
+
+const PopoverContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Popup> &
+    Pick<
+      React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Positioner>,
+      "align" | "alignOffset" | "side" | "sideOffset"
+    >
+>(
+  (
+    {
+      className,
+      align = "center",
+      alignOffset = 0,
+      side = "bottom",
+      sideOffset = 4,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          ref={ref}
+          data-slot="popover-content"
+          className={cn(
+            "flex origin-(--transform-origin) flex-col gap-2.5 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",
+            className,
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    );
+  },
+);
+PopoverContent.displayName = "PopoverContent";
+
+const PopoverHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-0.5 text-sm", className)}
+      {...props}
+    />
+  );
+});
+PopoverHeader.displayName = "PopoverHeader";
+
+const PopoverTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Title>
+>(({ className, ...props }, ref) => {
+  return (
+    <PopoverPrimitive.Title
+      ref={ref}
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  );
+});
+PopoverTitle.displayName = "PopoverTitle";
+
+const PopoverDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Description>
+>(({ className, ...props }, ref) => {
+  return (
+    <PopoverPrimitive.Description
+      ref={ref}
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+PopoverDescription.displayName = "PopoverDescription";
+
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverPortal,
+  PopoverTitle,
+  PopoverTrigger,
+};

package/src/components/micro/progress.tsx

@@ -0,0 +1,144 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (22 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+"use client";
+
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import * as React from "react";
+
+import { type Color, type Size } from "../../lib/types";
+import { cn } from "../../lib/utils";
+
+const ProgressContext = React.createContext<{ size: Size; color: Color }>({
+  size: "md",
+  color: "primary",
+});
+
+export interface ProgressProps extends ProgressPrimitive.Root.Props {
+  size?: Size;
+  color?: Color;
+}
+
+/**
+ * @description Displays an indicator showing the completion progress of a task.
+ * @example
+ * <Progress value={33} />
+ */
+function Progress({
+  className,
+  children,
+  size = "md",
+  color = "primary",
+  ...props
+}: ProgressProps) {
+  return (
+    <ProgressContext.Provider value={{ size, color }}>
+      <ProgressPrimitive.Root
+        data-slot="progress"
+        className={cn("flex flex-wrap gap-x-3 gap-y-1.5", className)}
+        {...props}
+      >
+        {children}
+      </ProgressPrimitive.Root>
+    </ProgressContext.Provider>
+  );
+}
+
+function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
+  const { size } = React.useContext(ProgressContext);
+
+  const sizeClasses: Partial<Record<Size, string>> = {
+    sm: "h-1",
+    md: "h-1.5",
+    lg: "h-2",
+  };
+
+  return (
+    <ProgressPrimitive.Track
+      className={cn(
+        "relative flex w-full items-center overflow-x-hidden rounded-full bg-muted",
+        size ? sizeClasses[size] : "",
+        className,
+      )}
+      data-slot="progress-track"
+      {...props}
+    />
+  );
+}
+
+function ProgressIndicator({
+  className,
+  ...props
+}: ProgressPrimitive.Indicator.Props) {
+  const { color } = React.useContext(ProgressContext);
+
+  const bgColors: Record<Color, string> = {
+    primary: "bg-primary",
+    secondary: "bg-secondary",
+    destructive: "bg-destructive",
+    success: "bg-success",
+    warning: "bg-warning",
+    info: "bg-info",
+    tertiary: "bg-tertiary",
+    muted: "bg-muted",
+    accent: "bg-accent",
+  };
+
+  return (
+    <ProgressPrimitive.Indicator
+      data-slot="progress-indicator"
+      className={cn("h-full transition-all", bgColors[color], className)}
+      {...props}
+    />
+  );
+}
+
+function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
+  const { size } = React.useContext(ProgressContext);
+  const textSizes = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base",
+  };
+
+  return (
+    <ProgressPrimitive.Label
+      className={cn(textSizes[size], "font-medium", className)}
+      data-slot="progress-label"
+      {...props}
+    />
+  );
+}
+
+function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
+  const { size } = React.useContext(ProgressContext);
+  const textSizes = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base",
+  };
+
+  return (
+    <ProgressPrimitive.Value
+      className={cn(
+        "ml-auto text-muted-foreground tabular-nums",
+        textSizes[size],
+        className,
+      )}
+      data-slot="progress-value"
+      {...props}
+    />
+  );
+}
+
+export {
+  Progress,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressTrack,
+  ProgressValue,
+};

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

@@ -0,0 +1,73 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (22 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+"use client";
+
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import * as React from "react";
+
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { type Size } from "../../lib/types";
+import { cn } from "../../lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ComponentRef<typeof RadioGroupPrimitive>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive>
+>(function RadioGroup({ className, ...props }, ref) {
+  return (
+    <RadioGroupPrimitive
+      ref={ref}
+      data-slot="radio-group"
+      className={cn("grid gap-2", className)}
+      {...props}
+    />
+  );
+});
+RadioGroup.displayName = "RadioGroup";
+
+const radioGroupItemVariants = cva(
+  "group/radio peer relative flex aspect-square shrink-0 rounded-full border border-input after:absolute after:content-[''] 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 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-destructive/50 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:focus-visible:ring-destructive/50 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+  {
+    variants: {
+      size: {
+        sm: "size-3.5 after:-inset-x-2.5 after:-inset-y-2.5",
+        md: "size-4 after:-inset-x-3 after:-inset-y-2",
+        lg: "size-5 after:-inset-x-4 after:-inset-y-3",
+      },
+    },
+  },
+);
+
+const RadioGroupItem = React.forwardRef<
+  React.ComponentRef<typeof RadioPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioPrimitive.Root> &
+    Omit<VariantProps<typeof radioGroupItemVariants>, "size"> & {
+      size?: Size;
+    }
+>(function RadioGroupItem({ className, size = "md", ...props }, ref) {
+  return (
+    <RadioPrimitive.Root
+      ref={ref}
+      data-slot="radio-group-item"
+      data-size={size}
+      className={cn(radioGroupItemVariants({ size, className }))}
+      {...props}
+    >
+      <RadioPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex items-center justify-center size-4 group-data-[size=sm]/radio:size-3.5 group-data-[size=lg]/radio:size-5"
+      >
+        <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground size-2 group-data-[size=sm]/radio:size-1.5 group-data-[size=lg]/radio:size-2.5" />
+      </RadioPrimitive.Indicator>
+    </RadioPrimitive.Root>
+  );
+});
+RadioGroupItem.displayName = "RadioGroupItem";
+
+export { RadioGroup, RadioGroupItem };

package/src/components/micro/resizable.tsx

@@ -0,0 +1,64 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (22 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+"use client";
+
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * @description Accessible resizable panel groups and layouts.
+ * @requires ResizablePanel, ResizableHandle
+ */
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean;
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]_[data-slot=resizable-handle-bar]]:rotate-90",
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div
+          data-slot="resizable-handle-bar"
+          className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border"
+        />
+      )}
+    </ResizablePrimitive.Separator>
+  );
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/src/components/micro/scroll-area.tsx

@@ -0,0 +1,68 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (22 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+"use client";
+
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * @description Augments native scroll functionality for custom, cross-browser styling.
+ * @example
+ * <ScrollArea className="h-[200px] w-[350px]">
+ *   Jokester began sneaking into the castle in the middle of the night.
+ * </ScrollArea>
+ */
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: ScrollAreaPrimitive.Root.Props) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-border data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-border data-vertical:border-l-transparent",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };