@vvedantb/ui 0.0.0-stage → 0.1.0

package/src/ui/carousel.tsx

@@ -0,0 +1,211 @@
+"use client";
+import * as React from "react";
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { cn } from "../utils/cn";
+import { Button } from "./button";
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins,
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+  const onSelect = (api: CarouselApi) => {
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  };
+  const scrollPrev = () => {
+    api?.scrollPrev();
+  };
+  const scrollNext = () => {
+    api?.scrollNext();
+  };
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      scrollPrev();
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      scrollNext();
+    }
+  };
+  React.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+  React.useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel();
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel();
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <IconChevronLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+}
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <IconChevronRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+}
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};

package/src/ui/checkbox.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { IconCheck } from "@tabler/icons-react";
+import { cn } from "../utils/cn";
+
+const Checkbox = React.forwardRef<
+  React.ComponentRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer relative h-4 w-4 shrink-0 rounded-md border border-border bg-field-background transition-[background-color,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground before:absolute before:inset-[-12px] before:content-['']",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <IconCheck className="h-3.5 w-3.5" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/src/ui/clear-input.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import * as React from "react";
+import { IconX } from "@tabler/icons-react";
+import { cn } from "../utils/cn";
+import { runClearInputDissolve } from "./clearInputDissolve";
+
+export interface ClearInputProps extends Omit<
+  React.ComponentProps<"input">,
+  "value" | "onChange"
+> {
+  value: string;
+  onChange: (value: string) => void;
+  wrapperClassName?: string;
+  /** Icon or adornment positioned in the field's left gutter. */
+  leading?: React.ReactNode;
+  clearLabel?: string;
+}
+
+const ClearInput = React.forwardRef<HTMLInputElement, ClearInputProps>(
+  (
+    {
+      value,
+      onChange,
+      wrapperClassName,
+      leading,
+      clearLabel = "Clear",
+      className,
+      placeholder = "",
+      ...props
+    },
+    ref,
+  ) => {
+    const wrapRef = React.useRef<HTMLDivElement>(null);
+    const inputRef = React.useRef<HTMLInputElement | null>(null);
+    const mirrorRef = React.useRef<HTMLDivElement>(null);
+    const placeholderRef = React.useRef<HTMLDivElement>(null);
+    const glowRef = React.useRef<HTMLDivElement>(null);
+    const clearingRef = React.useRef(false);
+    const [clearing, setClearing] = React.useState(false);
+
+    function mergedRef(node: HTMLInputElement | null) {
+      inputRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }
+
+    const hasValue = value.length > 0 || clearing;
+
+    React.useEffect(() => {
+      const wrap = wrapRef.current;
+      const mirror = mirrorRef.current;
+      if (!wrap || !mirror || clearingRef.current) {
+        return;
+      }
+      wrap.classList.toggle("has-value", value.length > 0);
+      if (value.length > 0) {
+        mirror.textContent = value.replace(/ /g, "\u00a0");
+      } else if (!clearingRef.current) {
+        mirror.textContent = "";
+      }
+    }, [value]);
+
+    const preventFocusSteal = (event: React.SyntheticEvent) => {
+      if (document.activeElement === inputRef.current) {
+        event.preventDefault();
+      }
+    };
+
+    const handleClear = () => {
+      const wrap = wrapRef.current;
+      const input = inputRef.current;
+      const mirror = mirrorRef.current;
+      const placeholderLayer = placeholderRef.current;
+      const glow = glowRef.current;
+      if (
+        !wrap ||
+        !input ||
+        !mirror ||
+        !placeholderLayer ||
+        !glow ||
+        clearingRef.current ||
+        value.length === 0
+      ) {
+        return;
+      }
+
+      clearingRef.current = true;
+      setClearing(true);
+
+      runClearInputDissolve(
+        { wrap, input, mirror, placeholderLayer, glow },
+        () => {
+          onChange("");
+        },
+        () => {
+          clearingRef.current = false;
+          setClearing(false);
+        },
+      );
+    };
+
+    const fieldClassName = cn(hasValue && "pr-9", className);
+
+    return (
+      <div
+        ref={wrapRef}
+        className={cn(
+          "t-clear",
+          hasValue && "has-value",
+          clearing && "is-clearing",
+          wrapperClassName,
+        )}
+      >
+        {leading}
+        <input
+          ref={mergedRef}
+          type="text"
+          value={value}
+          onChange={(event) => {
+            onChange(event.target.value);
+          }}
+          placeholder={placeholder}
+          className={cn(
+            "flex h-10 w-full rounded-field 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 placeholder:text-field-placeholder focus-visible:border-focus-border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
+            fieldClassName,
+          )}
+          {...props}
+        />
+        <div
+          ref={mirrorRef}
+          className={cn(
+            "t-clear-mirror border-0 bg-transparent text-foreground shadow-none",
+            fieldClassName,
+          )}
+          aria-hidden="true"
+        />
+        <div
+          ref={placeholderRef}
+          className={cn(
+            "t-clear-placeholder border-0 bg-transparent text-field-placeholder shadow-none",
+            fieldClassName,
+          )}
+          aria-hidden="true"
+        >
+          {placeholder}
+        </div>
+        <div ref={glowRef} className="t-clear-glow" aria-hidden="true" />
+        {value.length > 0 && !clearing ? (
+          <button
+            type="button"
+            className="t-clear-btn absolute right-2 top-1/2 z-4 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.92] hover:bg-surface-tertiary/50 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring"
+            aria-label={clearLabel}
+            onPointerDown={preventFocusSteal}
+            onMouseDown={preventFocusSteal}
+            onClick={handleClear}
+          >
+            <IconX size={14} stroke={1.75} />
+          </button>
+        ) : null}
+      </div>
+    );
+  },
+);
+ClearInput.displayName = "ClearInput";
+
+export { ClearInput };

package/src/ui/clear-input.vibot.tsx

@@ -0,0 +1,76 @@
+"use client";
+import * as React from "react";
+import { IconX } from "@tabler/icons-react";
+import { cn } from "../utils/cn";
+export interface ClearInputProps
+  extends Omit<React.ComponentProps<"input">, "value" | "onChange"> {
+  value: string;
+  onChange: (value: string) => void;
+  wrapperClassName?: string;
+  /** Icon or adornment positioned in the field's left gutter. */
+  leading?: React.ReactNode;
+  clearLabel?: string;
+}
+const ClearInput = React.forwardRef<HTMLInputElement, ClearInputProps>(
+  (
+    {
+      value,
+      onChange,
+      wrapperClassName,
+      leading,
+      clearLabel = "Clear",
+      className,
+      placeholder,
+      ...props
+    },
+    ref,
+  ) => {
+    const inputRef = React.useRef<HTMLInputElement | null>(null);
+    const mergedRef = (node: HTMLInputElement | null) => {
+      inputRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+    const hasValue = value.length > 0;
+    return (
+      <div className={cn("relative", wrapperClassName)}>
+        {leading}
+        <input
+          ref={mergedRef}
+          type="text"
+          value={value}
+          onChange={(event) => {
+            onChange(event.target.value);
+          }}
+          placeholder={placeholder}
+          className={cn(
+            "flex h-10 w-full rounded-field border border-border bg-field-background px-3.5 py-2 text-sm transition-[border-color,background-color] duration-200 ease-smooth placeholder:text-field-placeholder focus-visible:border-focus-border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
+            "pr-9",
+            className,
+          )}
+          {...props}
+        />
+        <button
+          type="button"
+          tabIndex={hasValue ? 0 : -1}
+          className={cn(
+            "absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted transition-[opacity,background-color,color,transform] duration-150 ease-out active:duration-100 active:ease-out active:scale-[0.97] hover:bg-surface-tertiary hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring before:absolute before:inset-[-8px] before:content-['']",
+            hasValue ? "opacity-100" : "pointer-events-none opacity-0",
+          )}
+          aria-hidden={!hasValue}
+          aria-label={clearLabel}
+          onClick={() => {
+            onChange("");
+            inputRef.current?.focus({ preventScroll: true });
+          }}
+        >
+          <IconX size={14} stroke={1.75} />
+        </button>
+      </div>
+    );
+  },
+);
+export { ClearInput };

package/src/ui/clearInputDissolve.ts

@@ -0,0 +1,214 @@
+/** transitions.dev input clear with dissolve — see 13-input-clear-dissolve.md */
+
+function readCssNumber(
+  root: HTMLElement,
+  name: string,
+  fallback: number,
+): number {
+  const raw = getComputedStyle(root).getPropertyValue(name);
+  const parsed = parseFloat(raw);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+function readCssEase(root: HTMLElement, name: string): (t: number) => number {
+  const raw = getComputedStyle(root).getPropertyValue(name);
+  const match = raw.match(
+    /cubic-bezier\(([-\d.]+),([-\d.]+),([-\d.]+),([-\d.]+)\)/,
+  );
+  if (!match) {
+    return (t) => t;
+  }
+  const x1 = parseFloat(match[1] ?? "0");
+  const y1 = parseFloat(match[2] ?? "0");
+  const x2 = parseFloat(match[3] ?? "0");
+  const y2 = parseFloat(match[4] ?? "0");
+  const cx = 3 * x1;
+  const bx = 3 * (x2 - x1) - cx;
+  const ax = 1 - cx - bx;
+  const cy = 3 * y1;
+  const by = 3 * (y2 - y1) - cy;
+  const ay = 1 - cy - by;
+  return (t) => {
+    if (t <= 0) {
+      return 0;
+    }
+    if (t >= 1) {
+      return 1;
+    }
+    let sample = t;
+    for (let i = 0; i < 8; i += 1) {
+      const dx = ((ax * sample + bx) * sample + cx) * sample - t;
+      const derivative = (3 * ax * sample + 2 * bx) * sample + cx;
+      if (Math.abs(dx) < 1e-6 || derivative === 0) {
+        break;
+      }
+      sample -= dx / derivative;
+    }
+    return ((ay * sample + by) * sample + cy) * sample;
+  };
+}
+
+function isDarkTheme(root: HTMLElement): boolean {
+  return (
+    root.classList.contains("dark") ||
+    root.getAttribute("data-theme") === "dark"
+  );
+}
+
+function measureCanvas(): CanvasRenderingContext2D | null {
+  const canvas = document.createElement("canvas");
+  return canvas.getContext("2d");
+}
+
+let sharedMeasureCanvas: CanvasRenderingContext2D | null = null;
+
+function getMeasureCanvas(): CanvasRenderingContext2D | null {
+  if (sharedMeasureCanvas === null) {
+    sharedMeasureCanvas = measureCanvas();
+  }
+  return sharedMeasureCanvas;
+}
+
+export interface ClearDissolveElements {
+  wrap: HTMLElement;
+  input: HTMLInputElement;
+  mirror: HTMLElement;
+  placeholderLayer: HTMLElement;
+  glow: HTMLElement;
+}
+
+function buildGlowBackground(
+  wrap: HTMLElement,
+  input: HTMLInputElement,
+  text: string,
+  root: HTMLElement,
+): string {
+  const canvas = getMeasureCanvas();
+  if (canvas === null) {
+    return "";
+  }
+  canvas.font = getComputedStyle(input).font;
+  const dark = isDarkTheme(root);
+  const rgb = dark ? "255,255,255" : "0,0,0";
+  const width = wrap.clientWidth || 280;
+  const padLeft = parseFloat(getComputedStyle(input).paddingLeft) || 12;
+  const spread = readCssNumber(root, "--glow-spread", 1.5);
+  const layers: string[] = [];
+  let x = 0;
+  for (const segment of text.split(/(\s+)/)) {
+    const segmentWidth = canvas.measureText(segment).width;
+    if (segment.trim()) {
+      const centerX = padLeft + x + segmentWidth / 2;
+      const halfWidth = Math.max(segmentWidth * 0.45, 8) * spread;
+      const streaks: Array<[number, number, number, number]> = [
+        [0, 0.8, 7, 0.22],
+        [halfWidth * 0.45, 0.55, 8, 0.18],
+        [-halfWidth * 0.4, 0.65, 6, 0.16],
+        [halfWidth * 0.15, 0.9, 5, 0.14],
+      ];
+      for (const [dx, rwm, rh, alpha] of streaks) {
+        const leftPercent = (((centerX + dx) / width) * 100).toFixed(2);
+        layers.push(
+          `radial-gradient(ellipse ${Math.max(halfWidth * rwm, 2).toFixed(1)}px ${rh}px at ${leftPercent}% 100%, rgba(${rgb},${alpha}), transparent)`,
+        );
+      }
+    }
+    x += segmentWidth;
+  }
+  return layers.join(", ");
+}
+
+function resetLayerStyles(
+  mirror: HTMLElement,
+  placeholderLayer: HTMLElement,
+): void {
+  mirror.style.cssText = "";
+  placeholderLayer.style.cssText = "";
+}
+
+export function runClearInputDissolve(
+  elements: ClearDissolveElements,
+  onValueClear: () => void,
+  onDone: () => void,
+): void {
+  const { wrap, input, mirror, placeholderLayer, glow } = elements;
+  const root = document.documentElement;
+  const text = input.value;
+  if (text.length === 0) {
+    return;
+  }
+
+  const keepFocus = document.activeElement === input;
+  mirror.textContent = text.replace(/ /g, "\u00a0");
+
+  const total = readCssNumber(root, "--clear-dur", 1000);
+  const outDur = readCssNumber(root, "--clear-out-dur", 400);
+  const inDur = readCssNumber(root, "--clear-in-dur", 400);
+  const outFly = readCssNumber(root, "--clear-out-fly", 12);
+  const inFly = readCssNumber(root, "--clear-in-fly", 12);
+  const delay = readCssNumber(root, "--glow-delay", 50);
+  const peakAt = readCssNumber(root, "--glow-peak-at", 0.15);
+  const glowOpacity = readCssNumber(root, "--glow-opacity", 0.85);
+  const easeOut = readCssEase(root, "--clear-out-ease");
+  const easeIn = readCssEase(root, "--clear-in-ease");
+
+  onValueClear();
+  wrap.classList.remove("has-value");
+  wrap.classList.add("is-clearing");
+  glow.style.background = buildGlowBackground(
+    wrap,
+    input,
+    mirror.textContent,
+    root,
+  );
+  glow.style.opacity = "0";
+  placeholderLayer.style.transform = `translateY(-${inFly}px)`;
+  placeholderLayer.style.opacity = "0.9";
+  placeholderLayer.style.filter = "none";
+  mirror.style.filter = "none";
+
+  const startedAt = performance.now();
+
+  function tick(now: number): void {
+    const elapsed = now - startedAt;
+    const outProgress = easeOut(Math.min(1, elapsed / outDur));
+    mirror.style.transform = `translateY(${(outProgress * outFly).toFixed(1)}px)`;
+    mirror.style.opacity = (1 - outProgress).toFixed(3);
+
+    const inProgress = easeIn(Math.min(1, elapsed / inDur));
+    placeholderLayer.style.transform = `translateY(${(-inFly + inProgress * inFly).toFixed(1)}px)`;
+    placeholderLayer.style.opacity = (0.9 + inProgress * 0.1).toFixed(3);
+
+    let glowStrength = 0;
+    if (elapsed > delay) {
+      const glowProgress = Math.min(
+        1,
+        (elapsed - delay) / Math.max(1, total - delay),
+      );
+      glowStrength =
+        glowProgress < peakAt
+          ? glowProgress / peakAt
+          : 1 - (glowProgress - peakAt) / (1 - peakAt);
+    }
+    glow.style.opacity = (glowStrength * glowOpacity).toFixed(3);
+
+    if (elapsed < total) {
+      requestAnimationFrame(tick);
+      return;
+    }
+
+    wrap.classList.remove("is-clearing");
+    resetLayerStyles(mirror, placeholderLayer);
+    mirror.textContent = "";
+    glow.style.opacity = "0";
+    glow.style.background = "";
+    onDone();
+    if (keepFocus) {
+      requestAnimationFrame(() => {
+        input.focus({ preventScroll: true });
+      });
+    }
+  }
+
+  requestAnimationFrame(tick);
+}

package/src/ui/collapsible.tsx

@@ -0,0 +1,7 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };