@vvedantb/ui 0.1.0 → 0.1.2

package/src/ui/time-picker.tsx

@@ -1,170 +1,170 @@
-import * as React from "react";
-import { IconClock } from "@tabler/icons-react";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
-import { cn } from "../utils/cn";
-
-// custom 24, hour "hh:mm" time picker replaces `<input type="time">` because the native picker varies wildly
-// across browsers and platforms (chrome/firefox/safari each render a
-// different control, and the spinner buttons feel laggy on windows) ux:, the trigger is styled like an input, same height/border/radius, so it slots into forms without bespoke alignment work, clicking the trigger (or its clock icon) opens a popover with two scrollable columns: hours 00, 23 on the left, minutes 00, 59 on the right click an item to select, the popover stays open so users can set both halves in one trip, selected items use the same `bg, surface, tertiary` treatment used elsewhere for active states, no rings or borders, matching the design system the component is fully controlled, `value` is always "hh:mm" 24h and
-// the consumer is responsible for any local↔utc conversion that keeps
-// the picker free of timezone logic and matches how the rest of the
-// codebase (e.g dream mode) shapes scheduling values
-interface TimePickerProps {
-  value: string;
-  onChange: (value: string) => void;
-  className?: string;
-  disabled?: boolean;
-  ariaLabel?: string;
-  // width of the trigger button defaults to a compact 110px
-  triggerClassName?: string;
-}
-
-const HOURS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
-const MINUTES = Array.from({ length: 60 }, (_, i) =>
-  String(i).padStart(2, "0"),
-);
-
-function parseValue(value: string): { hour: string; minute: string } {
-  const match = /^(\d{2}):(\d{2})$/.exec(value);
-  if (match) {
-    const hour = match[1];
-    const minute = match[2];
-    if (hour !== undefined && minute !== undefined) {
-      return { hour, minute };
-    }
-  }
-  return { hour: "00", minute: "00" };
-}
-
-// auto, scroll a column to its selected item when the popover opens using
-// `scrollintoview({ block: "centre" })` is good enough, the popover only
-// has 2 columns and a fixed height, so we don't need a custom scroll calc
-function useScrollSelectedIntoView(
-  ref: React.RefObject<HTMLDivElement | null>,
-  selector: string,
-  open: boolean,
-): void {
-  React.useEffect(() => {
-    if (!open) return;
-    const root = ref.current;
-    if (!root) return;
-    const target = root.querySelector(selector);
-    if (target instanceof HTMLElement) {
-      target.scrollIntoView({ block: "center", behavior: "auto" });
-    }
-  }, [open, ref, selector]);
-}
-
-const TimePicker = React.forwardRef<HTMLButtonElement, TimePickerProps>(
-  (
-    { value, onChange, className, disabled, ariaLabel, triggerClassName },
-    ref,
-  ) => {
-    const [open, setOpen] = React.useState(false);
-    const { hour, minute } = parseValue(value);
-    const hoursRef = React.useRef<HTMLDivElement | null>(null);
-    const minutesRef = React.useRef<HTMLDivElement | null>(null);
-
-    useScrollSelectedIntoView(hoursRef, `[data-time-value="${hour}"]`, open);
-    useScrollSelectedIntoView(
-      minutesRef,
-      `[data-time-value="${minute}"]`,
-      open,
-    );
-
-    const handleHourSelect = (h: string) => {
-      onChange(`${h}:${minute}`);
-    };
-    const handleMinuteSelect = (m: string) => {
-      onChange(`${hour}:${m}`);
-    };
-
-    return (
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <button
-            ref={ref}
-            type="button"
-            disabled={disabled}
-            aria-label={ariaLabel}
-            className={cn(
-              "inline-flex h-8 items-center justify-between gap-2 rounded-field border border-border bg-field-background px-2.5 text-xs font-medium tabular-nums transition-[border-color,box-shadow,background-color] duration-200 ease-smooth hover:bg-field-background/90 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",
-              triggerClassName ?? "w-[110px]",
-              className,
-            )}
-          >
-            <span>{`${hour}:${minute}`}</span>
-            <IconClock className="h-3.5 w-3.5 text-muted" />
-          </button>
-        </PopoverTrigger>
-        <PopoverContent
-          align="end"
-          sideOffset={4}
-          className="flex w-auto gap-1 p-2"
-        >
-          <TimeColumn
-            ref={hoursRef}
-            label="Hours"
-            values={HOURS}
-            selected={hour}
-            onSelect={handleHourSelect}
-          />
-          <TimeColumn
-            ref={minutesRef}
-            label="Minutes"
-            values={MINUTES}
-            selected={minute}
-            onSelect={handleMinuteSelect}
-          />
-        </PopoverContent>
-      </Popover>
-    );
-  },
-);
-TimePicker.displayName = "TimePicker";
-
-interface TimeColumnProps {
-  label: string;
-  values: string[];
-  selected: string;
-  onSelect: (value: string) => void;
-}
-
-const TimeColumn = React.forwardRef<HTMLDivElement, TimeColumnProps>(
-  ({ label, values, selected, onSelect }, ref) => {
-    return (
-      <div className="flex w-14 flex-col">
-        <div className="px-2 pb-1 text-[10px] uppercase tracking-wider text-muted">
-          {label}
-        </div>
-        <div
-          ref={ref}
-          className="h-48 overflow-y-auto rounded-lg bg-segment py-1"
-        >
-          {values.map((v) => {
-            const isSelected = v === selected;
-            return (
-              <button
-                key={v}
-                type="button"
-                data-time-value={v}
-                onClick={() => onSelect(v)}
-                className={cn(
-                  "flex h-7 w-full items-center justify-center text-xs tabular-nums transition-colors",
-                  isSelected
-                    ? "bg-accent text-accent-foreground"
-                    : "text-foreground/80 hover:bg-surface-tertiary/50",
-                )}
-              >
-                {v}
-              </button>
-            );
-          })}
-        </div>
-      </div>
-    );
-  },
-);
-TimeColumn.displayName = "TimeColumn";
-
-export { TimePicker };
+import * as React from "react";
+import { IconClock } from "@tabler/icons-react";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { cn } from "../utils/cn";
+
+// custom 24, hour "hh:mm" time picker replaces `<input type="time">` because the native picker varies wildly
+// across browsers and platforms (chrome/firefox/safari each render a
+// different control, and the spinner buttons feel laggy on windows) ux:, the trigger is styled like an input, same height/border/radius, so it slots into forms without bespoke alignment work, clicking the trigger (or its clock icon) opens a popover with two scrollable columns: hours 00, 23 on the left, minutes 00, 59 on the right click an item to select, the popover stays open so users can set both halves in one trip, selected items use the same `bg, surface, tertiary` treatment used elsewhere for active states, no rings or borders, matching the design system the component is fully controlled, `value` is always "hh:mm" 24h and
+// the consumer is responsible for any local↔utc conversion that keeps
+// the picker free of timezone logic and matches how the rest of the
+// codebase (e.g dream mode) shapes scheduling values
+interface TimePickerProps {
+  value: string;
+  onChange: (value: string) => void;
+  className?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  // width of the trigger button defaults to a compact 110px
+  triggerClassName?: string;
+}
+
+const HOURS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
+const MINUTES = Array.from({ length: 60 }, (_, i) =>
+  String(i).padStart(2, "0"),
+);
+
+function parseValue(value: string): { hour: string; minute: string } {
+  const match = /^(\d{2}):(\d{2})$/.exec(value);
+  if (match) {
+    const hour = match[1];
+    const minute = match[2];
+    if (hour !== undefined && minute !== undefined) {
+      return { hour, minute };
+    }
+  }
+  return { hour: "00", minute: "00" };
+}
+
+// auto, scroll a column to its selected item when the popover opens using
+// `scrollintoview({ block: "centre" })` is good enough, the popover only
+// has 2 columns and a fixed height, so we don't need a custom scroll calc
+function useScrollSelectedIntoView(
+  ref: React.RefObject<HTMLDivElement | null>,
+  selector: string,
+  open: boolean,
+): void {
+  React.useEffect(() => {
+    if (!open) return;
+    const root = ref.current;
+    if (!root) return;
+    const target = root.querySelector(selector);
+    if (target instanceof HTMLElement) {
+      target.scrollIntoView({ block: "center", behavior: "auto" });
+    }
+  }, [open, ref, selector]);
+}
+
+const TimePicker = React.forwardRef<HTMLButtonElement, TimePickerProps>(
+  (
+    { value, onChange, className, disabled, ariaLabel, triggerClassName },
+    ref,
+  ) => {
+    const [open, setOpen] = React.useState(false);
+    const { hour, minute } = parseValue(value);
+    const hoursRef = React.useRef<HTMLDivElement | null>(null);
+    const minutesRef = React.useRef<HTMLDivElement | null>(null);
+
+    useScrollSelectedIntoView(hoursRef, `[data-time-value="${hour}"]`, open);
+    useScrollSelectedIntoView(
+      minutesRef,
+      `[data-time-value="${minute}"]`,
+      open,
+    );
+
+    const handleHourSelect = (h: string) => {
+      onChange(`${h}:${minute}`);
+    };
+    const handleMinuteSelect = (m: string) => {
+      onChange(`${hour}:${m}`);
+    };
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={ref}
+            type="button"
+            disabled={disabled}
+            aria-label={ariaLabel}
+            className={cn(
+              "inline-flex h-8 items-center justify-between gap-2 rounded-field border border-border bg-field-background px-2.5 text-xs font-medium tabular-nums transition-[border-color,box-shadow,background-color] duration-200 ease-smooth hover:bg-field-background/90 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",
+              triggerClassName ?? "w-[110px]",
+              className,
+            )}
+          >
+            <span>{`${hour}:${minute}`}</span>
+            <IconClock className="h-3.5 w-3.5 text-muted" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="end"
+          sideOffset={4}
+          className="flex w-auto gap-1 p-2"
+        >
+          <TimeColumn
+            ref={hoursRef}
+            label="Hours"
+            values={HOURS}
+            selected={hour}
+            onSelect={handleHourSelect}
+          />
+          <TimeColumn
+            ref={minutesRef}
+            label="Minutes"
+            values={MINUTES}
+            selected={minute}
+            onSelect={handleMinuteSelect}
+          />
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+TimePicker.displayName = "TimePicker";
+
+interface TimeColumnProps {
+  label: string;
+  values: string[];
+  selected: string;
+  onSelect: (value: string) => void;
+}
+
+const TimeColumn = React.forwardRef<HTMLDivElement, TimeColumnProps>(
+  ({ label, values, selected, onSelect }, ref) => {
+    return (
+      <div className="flex w-14 flex-col">
+        <div className="px-2 pb-1 text-[10px] uppercase tracking-wider text-muted">
+          {label}
+        </div>
+        <div
+          ref={ref}
+          className="h-48 overflow-y-auto rounded-lg bg-segment py-1"
+        >
+          {values.map((v) => {
+            const isSelected = v === selected;
+            return (
+              <button
+                key={v}
+                type="button"
+                data-time-value={v}
+                onClick={() => onSelect(v)}
+                className={cn(
+                  "flex h-7 w-full items-center justify-center text-xs tabular-nums transition-colors",
+                  isSelected
+                    ? "bg-accent text-accent-foreground"
+                    : "text-foreground/80 hover:bg-surface-tertiary/50",
+                )}
+              >
+                {v}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+TimeColumn.displayName = "TimeColumn";
+
+export { TimePicker };

package/src/ui/tooltip.tsx

@@ -1,25 +1,25 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { cn } from "../utils/cn";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-const Tooltip = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ComponentRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 max-w-[calc(100vw-2rem)] overflow-hidden rounded-lg bg-overlay px-2.5 py-1.5 text-xs text-overlay-foreground smooth-shadow-ring-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../utils/cn";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ComponentRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 max-w-[calc(100vw-2rem)] overflow-hidden rounded-lg bg-overlay px-2.5 py-1.5 text-xs text-overlay-foreground smooth-shadow-ring-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/ui/visually-hidden.tsx

@@ -1,3 +1,3 @@
-"use client";
-
-export { Root as VisuallyHidden } from "@radix-ui/react-visually-hidden";
+"use client";
+
+export { Root as VisuallyHidden } from "@radix-ui/react-visually-hidden";

package/src/utils/cn.ts

@@ -1,16 +1,16 @@
-import { type ClassValue, clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-
-// `rounded-field` is a custom radius token — teach twMerge it conflicts with
-// `rounded-none` / `rounded-md` / etc. so Input overrides actually win.
-const twMerge = extendTailwindMerge({
-  extend: {
-    theme: {
-      borderRadius: ["field"],
-    },
-  },
-});
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
+import { type ClassValue, clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+// `rounded-field` is a custom radius token — teach twMerge it conflicts with
+// `rounded-none` / `rounded-md` / etc. so Input overrides actually win.
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      borderRadius: ["field"],
+    },
+  },
+});
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/utils/ref.ts

@@ -1,10 +1,10 @@
-import type { Ref } from "react";
-
-// forward a node to a callback or object ref (the two shapes forwardRef hands us)
-export function assignRef<T>(ref: Ref<T> | undefined, node: T): void {
-  if (typeof ref === "function") {
-    ref(node);
-  } else if (ref) {
-    ref.current = node;
-  }
-}
+import type { Ref } from "react";
+
+// forward a node to a callback or object ref (the two shapes forwardRef hands us)
+export function assignRef<T>(ref: Ref<T> | undefined, node: T): void {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref) {
+    ref.current = node;
+  }
+}