@vvedantb/ui 0.1.1 → 0.1.2

package/src/ui/tabs.tsx

@@ -1,140 +1,140 @@
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { cn } from "../utils/cn";
-import { assignRef } from "../utils/ref";
-import { syncTabsPill } from "./tabsSliding";
-
-const Tabs = TabsPrimitive.Root;
-
-// `pills` (default): isolated rounded pills with a gap, no shared track.
-// `segmented`: connected bar with a sliding pill, kept for marketing surfaces.
-type TabsListVariant = "pills" | "segmented";
-
-const TabsList = React.forwardRef<
-  React.ComponentRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
-    variant?: TabsListVariant;
-  }
->(({ className, children, variant = "pills", ...props }, ref) => {
-  const listRef = React.useRef<React.ComponentRef<
-    typeof TabsPrimitive.List
-  > | null>(null);
-  const pillRef = React.useRef<HTMLSpanElement>(null);
-  const pillReadyRef = React.useRef(false);
-
-  const mergedRef = React.useCallback(
-    (node: React.ComponentRef<typeof TabsPrimitive.List> | null) => {
-      listRef.current = node;
-      assignRef(ref, node);
-    },
-    [ref],
-  );
-
-  React.useLayoutEffect(() => {
-    const list = listRef.current;
-    const pill = pillRef.current;
-    if (!list || !pill) {
-      return;
-    }
-
-    const snap = () => {
-      syncTabsPill(list, pill, false);
-    };
-
-    const animate = () => {
-      syncTabsPill(list, pill, true);
-    };
-
-    snap();
-
-    requestAnimationFrame(() => {
-      pillReadyRef.current = true;
-    });
-
-    const onWindowResize = () => {
-      snap();
-    };
-    window.addEventListener("resize", onWindowResize);
-
-    const resizeObserver = new ResizeObserver(() => {
-      snap();
-    });
-    resizeObserver.observe(list);
-
-    const mutationObserver = new MutationObserver(() => {
-      if (pillReadyRef.current) {
-        animate();
-      } else {
-        snap();
-      }
-    });
-    mutationObserver.observe(list, {
-      subtree: true,
-      attributes: true,
-      attributeFilter: ["data-state", "aria-selected"],
-    });
-
-    return () => {
-      window.removeEventListener("resize", onWindowResize);
-      resizeObserver.disconnect();
-      mutationObserver.disconnect();
-    };
-  }, [variant]);
-
-  return (
-    <TabsPrimitive.List
-      ref={mergedRef}
-      className={cn(
-        "t-tabs max-sm:max-w-full max-sm:justify-center-safe max-sm:overflow-x-auto max-sm:scrollbar-none",
-        variant === "segmented" ? "t-tabs--segmented" : "t-tabs--pills",
-        className,
-      )}
-      data-variant={variant}
-      {...props}
-    >
-      {variant === "segmented" ? (
-        <span ref={pillRef} className="t-tabs-pill" aria-hidden="true" />
-      ) : null}
-      {children}
-    </TabsPrimitive.List>
-  );
-});
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ComponentRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "t-tab inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ComponentRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-// raw radix primitives, use these when you need a tabs layout that the
-// styled `tabs`/`tabslist`/`tabstrigger`/`tabscontent` defaults don't fit
-// (e.g a vertical sidebar of tabs inside a popover) the styled exports
-// above are tuned for horizontal pill, style tab bars
-export { TabsPrimitive };
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../utils/cn";
+import { assignRef } from "../utils/ref";
+import { syncTabsPill } from "./tabsSliding";
+
+const Tabs = TabsPrimitive.Root;
+
+// `pills` (default): isolated rounded pills with a gap, no shared track.
+// `segmented`: connected bar with a sliding pill, kept for marketing surfaces.
+type TabsListVariant = "pills" | "segmented";
+
+const TabsList = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    variant?: TabsListVariant;
+  }
+>(({ className, children, variant = "pills", ...props }, ref) => {
+  const listRef = React.useRef<React.ComponentRef<
+    typeof TabsPrimitive.List
+  > | null>(null);
+  const pillRef = React.useRef<HTMLSpanElement>(null);
+  const pillReadyRef = React.useRef(false);
+
+  const mergedRef = React.useCallback(
+    (node: React.ComponentRef<typeof TabsPrimitive.List> | null) => {
+      listRef.current = node;
+      assignRef(ref, node);
+    },
+    [ref],
+  );
+
+  React.useLayoutEffect(() => {
+    const list = listRef.current;
+    const pill = pillRef.current;
+    if (!list || !pill) {
+      return;
+    }
+
+    const snap = () => {
+      syncTabsPill(list, pill, false);
+    };
+
+    const animate = () => {
+      syncTabsPill(list, pill, true);
+    };
+
+    snap();
+
+    requestAnimationFrame(() => {
+      pillReadyRef.current = true;
+    });
+
+    const onWindowResize = () => {
+      snap();
+    };
+    window.addEventListener("resize", onWindowResize);
+
+    const resizeObserver = new ResizeObserver(() => {
+      snap();
+    });
+    resizeObserver.observe(list);
+
+    const mutationObserver = new MutationObserver(() => {
+      if (pillReadyRef.current) {
+        animate();
+      } else {
+        snap();
+      }
+    });
+    mutationObserver.observe(list, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-state", "aria-selected"],
+    });
+
+    return () => {
+      window.removeEventListener("resize", onWindowResize);
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [variant]);
+
+  return (
+    <TabsPrimitive.List
+      ref={mergedRef}
+      className={cn(
+        "t-tabs max-sm:max-w-full max-sm:justify-center-safe max-sm:overflow-x-auto max-sm:scrollbar-none",
+        variant === "segmented" ? "t-tabs--segmented" : "t-tabs--pills",
+        className,
+      )}
+      data-variant={variant}
+      {...props}
+    >
+      {variant === "segmented" ? (
+        <span ref={pillRef} className="t-tabs-pill" aria-hidden="true" />
+      ) : null}
+      {children}
+    </TabsPrimitive.List>
+  );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "t-tab inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+// raw radix primitives, use these when you need a tabs layout that the
+// styled `tabs`/`tabslist`/`tabstrigger`/`tabscontent` defaults don't fit
+// (e.g a vertical sidebar of tabs inside a popover) the styled exports
+// above are tuned for horizontal pill, style tab bars
+export { TabsPrimitive };
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/ui/tabsSliding.ts

@@ -1,56 +1,56 @@
-// transitions.dev tabs sliding, see 16, tabs, sliding.md
-
-function findActiveTab(list: HTMLElement): HTMLElement | null {
-  const tabs = list.querySelectorAll<HTMLElement>(".t-tab");
-  for (const tab of tabs) {
-    if (
-      tab.getAttribute("aria-selected") === "true" ||
-      tab.getAttribute("data-state") === "active"
-    ) {
-      return tab;
-    }
-  }
-  if (tabs.length === 0) {
-    return null;
-  }
-  return tabs[0] ?? null;
-}
-
-function moveTabsPill(
-  pill: HTMLElement,
-  tab: HTMLElement,
-  animate: boolean,
-): void {
-  const left = tab.offsetLeft;
-  const width = tab.offsetWidth;
-  const top = tab.offsetTop;
-  const height = tab.offsetHeight;
-
-  if (!animate) {
-    const previousTransition = pill.style.transition;
-    pill.style.transition = "none";
-    pill.style.transform = `translateX(${left}px)`;
-    pill.style.width = `${width}px`;
-    pill.style.top = `${top}px`;
-    pill.style.height = `${height}px`;
-    void pill.offsetWidth;
-    pill.style.transition = previousTransition;
-    return;
-  }
-
-  pill.style.transform = `translateX(${left}px)`;
-  pill.style.width = `${width}px`;
-  pill.style.top = `${top}px`;
-  pill.style.height = `${height}px`;
-}
-
-export function syncTabsPill(
-  list: HTMLElement,
-  pill: HTMLElement,
-  animate: boolean,
-): void {
-  const tab = findActiveTab(list);
-  if (tab) {
-    moveTabsPill(pill, tab, animate);
-  }
-}
+// transitions.dev tabs sliding, see 16, tabs, sliding.md
+
+function findActiveTab(list: HTMLElement): HTMLElement | null {
+  const tabs = list.querySelectorAll<HTMLElement>(".t-tab");
+  for (const tab of tabs) {
+    if (
+      tab.getAttribute("aria-selected") === "true" ||
+      tab.getAttribute("data-state") === "active"
+    ) {
+      return tab;
+    }
+  }
+  if (tabs.length === 0) {
+    return null;
+  }
+  return tabs[0] ?? null;
+}
+
+function moveTabsPill(
+  pill: HTMLElement,
+  tab: HTMLElement,
+  animate: boolean,
+): void {
+  const left = tab.offsetLeft;
+  const width = tab.offsetWidth;
+  const top = tab.offsetTop;
+  const height = tab.offsetHeight;
+
+  if (!animate) {
+    const previousTransition = pill.style.transition;
+    pill.style.transition = "none";
+    pill.style.transform = `translateX(${left}px)`;
+    pill.style.width = `${width}px`;
+    pill.style.top = `${top}px`;
+    pill.style.height = `${height}px`;
+    void pill.offsetWidth;
+    pill.style.transition = previousTransition;
+    return;
+  }
+
+  pill.style.transform = `translateX(${left}px)`;
+  pill.style.width = `${width}px`;
+  pill.style.top = `${top}px`;
+  pill.style.height = `${height}px`;
+}
+
+export function syncTabsPill(
+  list: HTMLElement,
+  pill: HTMLElement,
+  animate: boolean,
+): void {
+  const tab = findActiveTab(list);
+  if (tab) {
+    moveTabsPill(pill, tab, animate);
+  }
+}

package/src/ui/textarea.tsx

@@ -1,21 +1,21 @@
-import * as React from "react";
-import { cn } from "../utils/cn";
-
-const Textarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.ComponentProps<"textarea">
->(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "flex min-h-20 w-full max-sm:min-w-0 rounded-none border border-border bg-field-background px-3.5 py-2.5 text-base sm:text-sm 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}
-    />
-  );
-});
-Textarea.displayName = "Textarea";
-
-export { Textarea };
+import * as React from "react";
+import { cn } from "../utils/cn";
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-20 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2.5 text-base sm:text-sm 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}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };