@vvedantb/ui 0.0.0-stage → 0.1.0

package/src/ui/input-group.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../utils/cn";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Textarea } from "./textarea";
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex w-full flex-wrap items-center rounded-field border border-border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth outline-hidden",
+        "h-10 min-w-0 has-[>textarea]:h-auto",
+        "[&>input]:has-[>[data-align=inline-start]]:pl-2",
+        "[&>input]:has-[>[data-align=inline-end]]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col [&>input]:has-[>[data-align=block-start]]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col [&>input]:has-[>[data-align=block-end]]:pt-3",
+        "has-[[data-slot=input-group-control]:focus-visible]:border-focus-border has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-focus-ring",
+        "has-[[data-slot][aria-invalid=true]]:border-danger-border has-[[data-slot][aria-invalid=true]]:ring-danger-ring",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-md group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+);
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      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("input")?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva(
+  "text-sm shadow-none flex gap-2 items-center",
+  {
+    variants: {
+      size: {
+        xs: "h-7 gap-1 rounded-lg px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        sm: "h-8 rounded-lg px-2.5 gap-1.5 text-xs has-[>svg]:px-2.5",
+        "icon-xs": "size-7 rounded-lg p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 rounded-lg p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  },
+);
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus:outline-hidden focus-visible:ring-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus:outline-hidden focus-visible:ring-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+};

package/src/ui/input-group.verve.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../utils/cn";
+import { Button, type ButtonProps } from "./button";
+import { Input } from "./input";
+import { Textarea } from "./textarea";
+
+const InputGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { error?: boolean }
+>(({ className, error, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-input-group=""
+    className={cn(
+      "flex h-10 flex-wrap rounded-field border border-border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth",
+      "has-[textarea]:h-auto",
+      "has-data-[slot=input-group-control]:h-auto",
+      "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col",
+      "has-focus-visible:border-focus-border has-focus-visible:outline-hidden has-focus-visible:ring-2 has-focus-visible:ring-focus-ring",
+      error &&
+        "border-danger-border has-focus-visible:border-danger has-focus-visible:ring-danger-ring",
+      className,
+    )}
+    {...props}
+  />
+));
+InputGroup.displayName = "InputGroup";
+
+const inputGroupAddonVariants = cva("flex items-center", {
+  variants: {
+    align: {
+      "inline-start": "flex-row ps-3",
+      "inline-end": "flex-row pe-3",
+      "block-start": "w-full flex-row border-b border-separator px-3 py-2",
+      "block-end": "w-full flex-row px-3 py-2",
+    },
+  },
+  defaultVariants: {
+    align: "inline-start",
+  },
+});
+
+const InputGroupAddon = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> &
+    VariantProps<typeof inputGroupAddonVariants>
+>(({ className, align, onClick, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-align={align}
+    className={cn(inputGroupAddonVariants({ align }), className)}
+    onClick={(e) => {
+      if (onClick) {
+        onClick(e);
+        return;
+      }
+      const group = (e.currentTarget as HTMLElement).closest(
+        "[data-input-group]",
+      );
+      const input = group?.querySelector("textarea, input");
+      if (input instanceof HTMLElement) input.focus();
+    }}
+    {...props}
+  />
+));
+InputGroupAddon.displayName = "InputGroupAddon";
+
+const inputGroupButtonVariants = cva("shrink-0 shadow-none", {
+  variants: {
+    size: {
+      xs: "h-7 rounded-lg px-2 text-xs",
+      sm: "h-8 rounded-lg px-2.5 text-xs",
+      "icon-xs": "h-7 w-7 rounded-lg",
+      "icon-sm": "h-8 w-8 rounded-lg",
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+  },
+});
+
+const InputGroupButton = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps & VariantProps<typeof inputGroupButtonVariants>
+>(({ className, size, variant = "ghost", ...props }, ref) => (
+  <Button
+    ref={ref}
+    variant={variant}
+    className={cn(inputGroupButtonVariants({ size }), className)}
+    {...props}
+  />
+));
+InputGroupButton.displayName = "InputGroupButton";
+
+function InputGroupText({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={cn(
+        "flex items-center text-sm text-muted-foreground/95",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const InputGroupInput = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => (
+  <Input
+    ref={ref}
+    className={cn(
+      "h-full flex-1 border-0 bg-transparent px-3 py-2 shadow-none focus-visible:border-0 focus-visible:ring-0",
+      className,
+    )}
+    {...props}
+  />
+));
+InputGroupInput.displayName = "InputGroupInput";
+
+const InputGroupTextarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<typeof Textarea>
+>(({ className, ...props }, ref) => (
+  <Textarea
+    ref={ref}
+    className={cn(
+      "flex-1 resize-none border-0 bg-transparent px-3 py-2.5 shadow-none focus-visible:border-0 focus-visible:ring-0 field-sizing-content",
+      className,
+    )}
+    {...props}
+  />
+));
+InputGroupTextarea.displayName = "InputGroupTextarea";
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+};

package/src/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { cn } from "../utils/cn";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full max-sm:min-w-0 rounded-none border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-field-placeholder focus-visible:border-focus-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

package/src/ui/kbd.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { cn } from "../utils/cn";
+
+const Kbd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, ...props }, ref) => (
+    <kbd
+      ref={ref}
+      className={cn(
+        "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-md bg-surface-secondary px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Kbd.displayName = "Kbd";
+
+export { Kbd };

package/src/ui/label.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "../utils/cn";
+
+const labelClass =
+  "text-sm font-medium leading-none tracking-normal text-foreground/90 peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
+
+const Label = React.forwardRef<
+  React.ComponentRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelClass, className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/ui/labeled-switch-row.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+import { Label } from "./label";
+import { Switch } from "./switch";
+
+interface LabeledSwitchRowProps {
+  id: string;
+  label: string;
+  description?: string;
+  checked: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  icon?: ReactNode;
+  trailing?: ReactNode;
+}
+
+export function LabeledSwitchRow({
+  id,
+  label,
+  description,
+  checked,
+  onCheckedChange,
+  disabled,
+  icon,
+  trailing,
+}: LabeledSwitchRowProps) {
+  return (
+    <div className="flex items-center justify-between gap-3 max-sm:flex-wrap">
+      <div className="flex min-w-0 items-start gap-2">
+        {icon ? (
+          <span className="mt-0.5 shrink-0 text-muted">{icon}</span>
+        ) : null}
+        <div className="min-w-0">
+          <Label htmlFor={id} className="text-sm font-medium">
+            {label}
+          </Label>
+          {description ? (
+            <p className="mt-1 text-xs text-muted text-pretty">{description}</p>
+          ) : null}
+        </div>
+      </div>
+      {trailing ?? (
+        <div className="flex min-h-10 shrink-0 items-center">
+          <Switch
+            id={id}
+            checked={checked}
+            onCheckedChange={onCheckedChange}
+            disabled={disabled}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/modalTransition.ts

@@ -0,0 +1,85 @@
+const closeTimers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();
+
+function readModalCloseMs(): number {
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(
+    "--modal-close-dur",
+  );
+  const parsed = parseFloat(raw);
+  return Number.isFinite(parsed) ? parsed : 150;
+}
+
+function clearCloseTimer(el: HTMLElement): void {
+  const timer = closeTimers.get(el);
+  if (timer !== undefined) {
+    clearTimeout(timer);
+    closeTimers.delete(el);
+  }
+}
+
+// open: scales up from, modal, scale clears any in, flight close cleanup
+function openModalSurface(el: HTMLElement): void {
+  clearCloseTimer(el);
+  el.classList.remove("is-closing");
+  el.classList.add("is-open");
+}
+
+// close: swap to is, closing, remove after, modal, close, dur
+function closeModalSurface(el: HTMLElement): void {
+  clearCloseTimer(el);
+  el.classList.remove("is-open");
+  el.classList.add("is-closing");
+  const closeMs = readModalCloseMs();
+  const timer = setTimeout(() => {
+    el.classList.remove("is-closing");
+    closeTimers.delete(el);
+  }, closeMs);
+  closeTimers.set(el, timer);
+}
+
+// first paint entrance, start at resting scale, then open on next frame
+function primeModalSurface(el: HTMLElement): void {
+  clearCloseTimer(el);
+  el.classList.remove("is-open", "is-closing");
+  requestAnimationFrame(() => {
+    openModalSurface(el);
+  });
+}
+
+// sync is, open / is, closing with radix data, state on the same node
+function syncModalSurfaceFromDataState(el: HTMLElement): void {
+  const state = el.getAttribute("data-state");
+  if (state === "open") {
+    if (!el.classList.contains("is-open")) {
+      primeModalSurface(el);
+    } else {
+      clearCloseTimer(el);
+      el.classList.remove("is-closing");
+    }
+    return;
+  }
+  if (state === "closed" && el.classList.contains("is-open")) {
+    closeModalSurface(el);
+  }
+}
+
+function disconnectModalSurface(el: HTMLElement): void {
+  clearCloseTimer(el);
+}
+
+// wire radix data, state → is, open / is, closing on the dialog surface
+// call from the content ref callback so portal, mounted nodes are never missed
+export function connectModalSurface(el: HTMLElement): () => void {
+  if (el.getAttribute("data-state") === "open") {
+    primeModalSurface(el);
+  }
+
+  const observer = new MutationObserver(() => {
+    syncModalSurfaceFromDataState(el);
+  });
+  observer.observe(el, { attributes: true, attributeFilter: ["data-state"] });
+
+  return () => {
+    observer.disconnect();
+    disconnectModalSurface(el);
+  };
+}

package/src/ui/pagination.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { cn } from "../utils/cn";
+import { Button } from "./button";
+
+interface PaginationProps {
+  total: number;
+  page: number;
+  onChange: (page: number) => void;
+  className?: string;
+}
+
+function Pagination({ total, page, onChange, className }: PaginationProps) {
+  if (total <= 1) return null;
+
+  return (
+    <nav className={cn("flex items-center justify-center gap-1", className)}>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onChange(Math.max(1, page - 1))}
+        disabled={page <= 1}
+      >
+        Previous
+      </Button>
+      {Array.from({ length: total }, (_, i) => i + 1).map((p) => (
+        <Button
+          key={p}
+          variant={p === page ? "default" : "outline"}
+          size="sm"
+          onClick={() => onChange(p)}
+        >
+          {p}
+        </Button>
+      ))}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onChange(Math.min(total, page + 1))}
+        disabled={page >= total}
+      >
+        Next
+      </Button>
+    </nav>
+  );
+}
+
+export { Pagination, type PaginationProps };

package/src/ui/popover.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "../utils/cn";
+import {
+  floatingSurfaceAnimateClass,
+  floatingSurfaceClass,
+} from "./_menu-classes";
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 6, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 max-sm:max-w-[calc(100vw-2rem)] max-sm:max-h-[85dvh] max-sm:overflow-y-auto p-4 outline-none",
+        floatingSurfaceClass,
+        floatingSurfaceAnimateClass,
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

package/src/ui/progress.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "../utils/cn";
+
+const Progress = React.forwardRef<
+  React.ComponentRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2.5 w-full overflow-hidden rounded-full bg-default/85",
+      className,
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 rounded-full bg-accent transition-transform duration-300 ease-smooth"
+      style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };