gladvn 0.2.14

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

@@ -0,0 +1,130 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (20 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { OTPInput, OTPInputContext } from "input-otp";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const inputOTPVariants = cva(
+  "cn-input-otp group/otp inline-flex items-center has-disabled:opacity-50 has-disabled:cursor-not-allowed has-disabled:pointer-events-none",
+  {
+    variants: {
+      size: {
+        sm: "min-h-7 text-xs",
+        md: "min-h-8 text-sm",
+        lg: "min-h-9 text-sm",
+      },
+    },
+  },
+);
+
+type DistributiveOmit<T, K extends keyof any> = T extends any
+  ? Omit<T, K>
+  : never;
+
+const InputOTP = React.forwardRef<
+  React.ComponentRef<typeof OTPInput>,
+  DistributiveOmit<React.ComponentProps<typeof OTPInput>, "size"> &
+    VariantProps<typeof inputOTPVariants> & {
+      containerClassName?: string;
+    }
+>(({ className, containerClassName, size = "md", ...props }, ref) => {
+  return (
+    <div
+      data-slot="input-otp"
+      data-size={size}
+      className={cn(inputOTPVariants({ size }))}
+    >
+      <OTPInput
+        {...(ref ? { ref } : {})}
+        containerClassName={cn("flex items-center", containerClassName)}
+        spellCheck={false}
+        className={cn(
+          "disabled:cursor-not-allowed disabled:opacity-100",
+          className,
+        )}
+        {...(props as React.ComponentProps<typeof OTPInput>)}
+      />
+    </div>
+  );
+});
+InputOTP.displayName = "InputOTP";
+
+const InputOTPGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="input-otp-group"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  );
+});
+InputOTPGroup.displayName = "InputOTPGroup";
+
+const InputOTPSlot = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      ref={ref}
+      data-slot="input-otp-slot"
+      data-active={isActive ? "" : undefined}
+      className={cn(
+        "relative flex size-8 group-data-[size=sm]/otp:size-7 group-data-[size=lg]/otp:size-9 items-center justify-center border border-input rounded-lg bg-transparent transition-colors outline-none",
+        "aria-invalid:border-destructive dark:aria-invalid:border-destructive/50",
+        "data-active:z-10 data-active:border-ring data-active:ring-3 data-active:ring-ring/50 data-active:ring-offset-1 data-active:ring-offset-background",
+        "data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-3 data-active:aria-invalid:ring-destructive/50",
+        "dark:bg-input/30 dark:data-active:aria-invalid:ring-destructive/50",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+const InputOTPSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, children, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="input-otp-separator"
+      className={cn(
+        "flex items-center text-muted-foreground [&>svg:not([class*='size-'])]:size-4 group-data-[size=sm]/otp:[&>svg:not([class*='size-'])]:size-3.5",
+        className,
+      )}
+      role="separator"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/src/components/micro/input.tsx

@@ -0,0 +1,56 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (20 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { type Size } from "../../lib/types";
+import { cn } from "../../lib/utils";
+
+const inputVariants = cva(
+  "min-w-0 rounded-lg border border-input bg-transparent text-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground 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:ring-3 aria-invalid:focus-visible:ring-destructive/50 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:focus-visible:ring-destructive/50",
+  {
+    variants: {
+      size: {
+        sm: "h-7 px-2 py-0.5 text-xs",
+        md: "h-8 px-2.5 py-1 text-sm",
+        lg: "h-9 px-3 py-1.5 text-sm",
+      },
+    },
+  },
+);
+
+export type InputProps = Omit<
+  React.ComponentPropsWithoutRef<typeof InputPrimitive>,
+  "size"
+> &
+  Omit<VariantProps<typeof inputVariants>, "size"> & {
+    size?: Size;
+  };
+
+/**
+ * @description Displays a form input field or a component that looks like an input field.
+ * @example
+ * <Input type="email" placeholder="Email" />
+ */
+const Input = React.forwardRef<
+  React.ComponentRef<typeof InputPrimitive>,
+  InputProps
+>(function Input({ className, size = "md", ...props }, ref) {
+  return (
+    <InputPrimitive
+      ref={ref}
+      data-slot="input"
+      className={cn(inputVariants({ size, className }))}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";
+
+export { Input };

package/src/components/micro/item.tsx

@@ -0,0 +1,206 @@
+/**
+ * ✅ AUDITED & REFACTORED
+ * - Design System Compliant (22 Commandments)
+ * - WCAG AAA/AA
+ * - Form Control Parity
+ * - CSS Delegated Logic
+ */
+import * as React from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+
+import { Separator } from "../../components/micro/separator";
+import { type Size } from "../../lib/types";
+import { cn } from "../../lib/utils";
+
+/**
+ * @description Base flex container for listing items consistently.
+ */
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-2", className)}
+      {...props}
+    />
+  );
+}
+
+const itemVariants = cva(
+  "group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background [&_a]:transition-colors [&_a]:hover:bg-muted border-transparent",
+  {
+    variants: {
+      variant: {
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50",
+      },
+      size: {
+        sm: "gap-1 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+        md: "gap-1.5 px-3 py-2.5",
+        lg: "gap-2 px-3.5 py-2.5",
+      },
+    },
+  },
+);
+
+function Item({
+  className,
+  variant,
+  size = "md",
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & {
+  variant?: "outline" | "muted";
+  size?: Size;
+}) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(itemVariants({ variant, size, className })),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "item",
+      variant,
+      size,
+    },
+  });
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&>svg]:pointer-events-none bg-transparent",
+  {
+    variants: {
+      variant: {
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&>img]:size-full [&>img]:object-cover",
+      },
+    },
+  },
+);
+
+function ItemMedia({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & { variant?: "icon" | "image" }) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+};

package/src/components/micro/kbd.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";
+
+/**
+ * @description Displays a keyboard shortcut.
+ * @example
+ * <Kbd>⌘K</Kbd>
+ */
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&>svg:not([class*='size-'])]:size-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+export { Kbd, KbdGroup };

package/src/components/micro/label.tsx

@@ -0,0 +1,48 @@
+/**
+ * ✅ 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 * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const labelVariants = cva(
+  "flex items-center gap-2 leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm",
+      },
+    },
+  },
+);
+
+/**
+ * @description Renders an accessible label associated with controls.
+ * @example
+ * <Label htmlFor="email">Email</Label>
+ */
+const Label = React.forwardRef<
+  HTMLLabelElement,
+  React.ComponentProps<"label"> & VariantProps<typeof labelVariants>
+>(({ className, size = "md", ...props }, ref) => {
+  return (
+    <label
+      ref={ref}
+      data-slot="label"
+      className={cn(labelVariants({ size, className }))}
+      {...props}
+    />
+  );
+});
+Label.displayName = "Label";
+
+export { Label, labelVariants };