@vvedantb/ui 0.1.1 → 0.1.2

package/src/ui/modalTransition.ts

@@ -1,85 +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);
-  };
-}
+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

@@ -1,47 +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 };
+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

@@ -1,33 +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 };
+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

@@ -1,25 +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 };
+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 };