@exitvibing/hqui 0.1.0

package/src/components/Tabs.tsx

@@ -0,0 +1,122 @@
+import React, { createContext, useContext, useState, forwardRef } from "react";
+import { cn } from "../lib/cn";
+
+interface TabsContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const TabsContext = createContext<TabsContextValue>({
+  value: "",
+  onValueChange: () => {},
+});
+
+export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  (
+    {
+      className,
+      defaultValue = "",
+      value: controlledValue,
+      onValueChange,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const currentValue = isControlled ? controlledValue : uncontrolledValue;
+
+    const handleChange = (newValue: string) => {
+      if (!isControlled) setUncontrolledValue(newValue);
+      onValueChange?.(newValue);
+    };
+
+    return (
+      <TabsContext.Provider
+        value={{ value: currentValue, onValueChange: handleChange }}
+      >
+        <div ref={ref} className={cn("w-full", className)} {...props}>
+          {children}
+        </div>
+      </TabsContext.Provider>
+    );
+  },
+);
+Tabs.displayName = "Tabs";
+
+export const TabsList = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = "TabsList";
+
+export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string;
+}
+
+export const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
+  ({ className, value, ...props }, ref) => {
+    const ctx = useContext(TabsContext);
+    const isActive = ctx.value === value;
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="tab"
+        aria-selected={isActive}
+        data-state={isActive ? "active" : "inactive"}
+        className={cn(
+          "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+          isActive
+            ? "bg-background text-foreground shadow"
+            : "hover:bg-background/50 hover:text-foreground",
+          className,
+        )}
+        onClick={() => ctx.onValueChange(value)}
+        {...props}
+      />
+    );
+  },
+);
+TabsTrigger.displayName = "TabsTrigger";
+
+export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+}
+
+export const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(
+  ({ className, value, ...props }, ref) => {
+    const ctx = useContext(TabsContext);
+    if (ctx.value !== value) return null;
+
+    return (
+      <div
+        ref={ref}
+        role="tabpanel"
+        className={cn(
+          "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 animate-fade-in",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+TabsContent.displayName = "TabsContent";

package/src/components/ThemeToggle.tsx

@@ -0,0 +1,40 @@
+import React, { forwardRef, useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+import { Button } from "./Button";
+import { cn } from "../lib/cn";
+
+export interface ThemeToggleProps {
+  className?: string;
+  defaultTheme?: "light" | "dark";
+}
+
+export const ThemeToggle = forwardRef<HTMLButtonElement, ThemeToggleProps>(
+  ({ className, defaultTheme }, ref) => {
+    const [isDark, setIsDark] = useState(() => {
+      if (typeof window === "undefined") return defaultTheme === "dark";
+      return document.documentElement.classList.contains("dark");
+    });
+
+    useEffect(() => {
+      if (isDark) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    }, [isDark]);
+
+    return (
+      <Button
+        ref={ref}
+        variant="ghost"
+        size="icon"
+        className={cn("rounded-full", className)}
+        onClick={() => setIsDark((prev) => !prev)}
+        aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      >
+        {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+      </Button>
+    );
+  },
+);
+ThemeToggle.displayName = "ThemeToggle";

package/src/components/Tooltip.tsx

@@ -0,0 +1,120 @@
+import React, {
+  HTMLAttributes,
+  forwardRef,
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+} from "react";
+import { cn } from "../lib/cn";
+
+export interface TooltipProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "content"
+> {
+  content: React.ReactNode;
+  side?: "top" | "bottom" | "left" | "right";
+  delayMs?: number;
+}
+
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  (
+    { className, content, side = "top", delayMs = 200, children, ...props },
+    ref,
+  ) => {
+    const [visible, setVisible] = useState(false);
+    const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const tooltipRef = useRef<HTMLDivElement>(null);
+    const [position, setPosition] = useState({ top: 0, left: 0 });
+
+    const show = () => {
+      timeoutRef.current = setTimeout(() => setVisible(true), delayMs);
+    };
+    const hide = () => {
+      clearTimeout(timeoutRef.current);
+      setVisible(false);
+    };
+
+    const updatePosition = useCallback(() => {
+      if (!wrapperRef.current || !tooltipRef.current) return;
+      const trigger = wrapperRef.current.getBoundingClientRect();
+      const tip = tooltipRef.current.getBoundingClientRect();
+      const gap = 8;
+
+      let top = 0;
+      let left = 0;
+
+      switch (side) {
+        case "top":
+          top = trigger.top - tip.height - gap;
+          left = trigger.left + trigger.width / 2 - tip.width / 2;
+          break;
+        case "bottom":
+          top = trigger.bottom + gap;
+          left = trigger.left + trigger.width / 2 - tip.width / 2;
+          break;
+        case "left":
+          top = trigger.top + trigger.height / 2 - tip.height / 2;
+          left = trigger.left - tip.width - gap;
+          break;
+        case "right":
+          top = trigger.top + trigger.height / 2 - tip.height / 2;
+          left = trigger.right + gap;
+          break;
+      }
+
+      setPosition({ top, left });
+    }, [side]);
+
+    useEffect(() => {
+      if (visible) {
+        // Use requestAnimationFrame so the tooltip DOM is painted before measuring
+        requestAnimationFrame(updatePosition);
+      }
+    }, [visible, updatePosition]);
+
+    useEffect(() => {
+      return () => clearTimeout(timeoutRef.current);
+    }, []);
+
+    return (
+      <>
+        <div
+          ref={(node) => {
+            (
+              wrapperRef as React.MutableRefObject<HTMLDivElement | null>
+            ).current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref)
+              (ref as React.MutableRefObject<HTMLDivElement | null>).current =
+                node;
+          }}
+          className={cn("inline-flex", className)}
+          onMouseEnter={show}
+          onMouseLeave={hide}
+          onFocus={show}
+          onBlur={hide}
+          {...props}
+        >
+          {children}
+        </div>
+        {visible && (
+          <div
+            ref={tooltipRef}
+            role="tooltip"
+            className="fixed z-[9999] rounded-md bg-foreground px-3 py-1.5 text-xs text-background shadow-md whitespace-nowrap pointer-events-none"
+            style={{
+              top: position.top,
+              left: position.left,
+              animation: "popup-fade-in 0.1s ease-out",
+            }}
+          >
+            {content}
+          </div>
+        )}
+      </>
+    );
+  },
+);
+Tooltip.displayName = "Tooltip";

package/src/components/extended/ArrowButton.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button, ButtonProps } from "../Button";
+import { cn } from "../../lib/cn";
+
+export interface ArrowButtonProps extends ButtonProps {
+  direction?: "left" | "right";
+  text?: string;
+}
+
+export const ArrowButton = forwardRef<HTMLButtonElement, ArrowButtonProps>(
+  ({ direction = "right", text, className, children, ...props }, ref) => {
+    const Icon = direction === "left" ? ChevronLeft : ChevronRight;
+
+    return (
+      <Button
+        ref={ref}
+        className={cn("gap-1", !text && !children && "px-2", className)}
+        {...props}
+      >
+        {direction === "left" && <Icon className="h-4 w-4" />}
+        {(text || children) && <span>{text || children}</span>}
+        {direction === "right" && <Icon className="h-4 w-4" />}
+      </Button>
+    );
+  },
+);
+ArrowButton.displayName = "ArrowButton";

package/src/components/extended/ChooseList.tsx

@@ -0,0 +1,38 @@
+import React, { SelectHTMLAttributes, forwardRef } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/cn";
+
+export interface ChooseListProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  options: { label: string; value: string | number }[];
+}
+
+export const ChooseList = forwardRef<HTMLSelectElement, ChooseListProps>(
+  ({ className, options, ...props }, ref) => {
+    return (
+      <div className="relative inline-block w-full">
+        <select
+          ref={ref}
+          className={cn(
+            "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring appearance-none cursor-pointer pr-10",
+            className,
+          )}
+          {...props}
+        >
+          {options.map((opt) => (
+            <option
+              key={opt.value}
+              value={opt.value}
+              className="bg-card text-foreground"
+            >
+              {opt.label}
+            </option>
+          ))}
+        </select>
+        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground">
+          <ChevronDown className="h-4 w-4" />
+        </div>
+      </div>
+    );
+  },
+);
+ChooseList.displayName = "ChooseList";

package/src/components/extended/Counter.tsx

@@ -0,0 +1,74 @@
+import React, { useState, forwardRef } from "react";
+import { Plus, Minus } from "lucide-react";
+import { Button } from "../Button";
+import { cn } from "../../lib/cn";
+
+export interface CounterProps {
+  initialValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  onChange?: (value: number) => void;
+  className?: string;
+}
+
+export const Counter = forwardRef<HTMLDivElement, CounterProps>(
+  (
+    {
+      initialValue = 0,
+      min = Number.MIN_SAFE_INTEGER,
+      max = Number.MAX_SAFE_INTEGER,
+      step = 1,
+      onChange,
+      className,
+    },
+    ref,
+  ) => {
+    const [value, setValue] = useState(initialValue);
+
+    const handleIncrement = () => {
+      const next = Math.min(max, value + step);
+      setValue(next);
+      onChange?.(next);
+    };
+
+    const handleDecrement = () => {
+      const next = Math.max(min, value - step);
+      setValue(next);
+      onChange?.(next);
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "inline-flex items-center rounded-lg border border-border bg-card",
+          className,
+        )}
+      >
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 rounded-r-none"
+          onClick={handleDecrement}
+          disabled={value <= min}
+        >
+          <Minus className="h-3.5 w-3.5" />
+        </Button>
+        <span className="w-10 text-center text-sm font-medium tabular-nums border-x border-border">
+          {value}
+        </span>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 rounded-l-none"
+          onClick={handleIncrement}
+          disabled={value >= max}
+        >
+          <Plus className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    );
+  },
+);
+Counter.displayName = "Counter";

package/src/components/extended/Popup.tsx

@@ -0,0 +1,78 @@
+import React, { HTMLAttributes, forwardRef, useEffect } from "react";
+import { X } from "lucide-react";
+import { Button } from "../Button";
+import { cn } from "../../lib/cn";
+
+export interface PopupProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "title"
+> {
+  open: boolean;
+  onClose: () => void;
+  title?: React.ReactNode;
+}
+
+export const Popup = forwardRef<HTMLDivElement, PopupProps>(
+  ({ className, open, onClose, title, children, ...props }, ref) => {
+    useEffect(() => {
+      if (open) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }, [open]);
+
+    useEffect(() => {
+      const handleEscape = (e: KeyboardEvent) => {
+        if (e.key === "Escape") onClose();
+      };
+      if (open) document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }, [open, onClose]);
+
+    if (!open) return null;
+
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+        {/* Backdrop */}
+        <div
+          className="fixed inset-0 bg-background/80 backdrop-blur-sm"
+          style={{ animation: "popup-fade-in 0.15s ease-out" }}
+          onClick={onClose}
+        />
+        {/* Content */}
+        <div
+          ref={ref}
+          role="dialog"
+          aria-modal="true"
+          className={cn(
+            "relative z-50 w-full max-w-lg rounded-xl border border-border bg-card p-6 shadow-2xl",
+            className,
+          )}
+          style={{ animation: "popup-scale-in 0.15s ease-out" }}
+          {...props}
+        >
+          <div className="flex items-center justify-between mb-4">
+            {title && (
+              <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
+            )}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7 rounded-full ml-auto"
+              onClick={onClose}
+              aria-label="Close popup"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+          <div className="text-sm text-muted-foreground">{children}</div>
+        </div>
+      </div>
+    );
+  },
+);
+Popup.displayName = "Popup";

package/src/components/extended/StatusBar.tsx

@@ -0,0 +1,45 @@
+import React, { HTMLAttributes, forwardRef } from "react";
+import { cn } from "../../lib/cn";
+
+export interface StatusBarProps extends HTMLAttributes<HTMLDivElement> {
+  status?: "idle" | "working" | "error" | "ready" | "live";
+  label?: string;
+}
+
+const statusStyles = {
+  idle: "bg-muted-foreground",
+  working: "bg-[hsl(var(--blue))] animate-pulse",
+  error: "bg-[hsl(var(--orange))]",
+  ready: "bg-[hsl(var(--purple))]",
+  live: "bg-[hsl(var(--purple))] animate-pulse",
+};
+
+export const StatusBar = forwardRef<HTMLDivElement, StatusBarProps>(
+  ({ className, status = "idle", label, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="status"
+        className={cn(
+          "inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1",
+          className,
+        )}
+        {...props}
+      >
+        <span
+          className={cn("h-2 w-2 rounded-full", statusStyles[status])}
+          aria-hidden="true"
+        />
+        <span className="text-xs font-semibold uppercase tracking-wider">
+          {label || status}
+        </span>
+        {children && (
+          <span className="text-xs text-muted-foreground border-l border-border pl-2">
+            {children}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+StatusBar.displayName = "StatusBar";

package/src/components/extended/WeekViewCalendar.tsx

@@ -0,0 +1,126 @@
+import React, { HTMLAttributes, forwardRef } from "react";
+import { cn } from "../../lib/cn";
+
+export interface WeekViewEvent {
+  id: string;
+  dayIndex: number;
+  startHour: number;
+  durationHours: number;
+  title: string;
+  color?: string;
+}
+
+export interface WeekViewCalendarProps extends HTMLAttributes<HTMLDivElement> {
+  events?: WeekViewEvent[];
+  startHour?: number;
+  endHour?: number;
+}
+
+export const WeekViewCalendar = forwardRef<
+  HTMLDivElement,
+  WeekViewCalendarProps
+>(({ className, events = [], startHour = 8, endHour = 18, ...props }, ref) => {
+  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const hours = Array.from(
+    { length: endHour - startHour },
+    (_, i) => i + startHour,
+  );
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "flex flex-col rounded-lg border border-border overflow-hidden bg-card",
+        className,
+      )}
+      {...props}
+    >
+      {/* Header */}
+      <div className="grid grid-cols-8 border-b border-border bg-muted/30">
+        <div className="flex items-center justify-center border-r border-border p-2 text-xs font-medium text-muted-foreground w-16">
+          Time
+        </div>
+        {days.map((day, i) => (
+          <div
+            key={day}
+            className={cn(
+              "p-2 text-center text-sm font-semibold",
+              i < 6 && "border-r border-border",
+            )}
+          >
+            {day}
+          </div>
+        ))}
+      </div>
+
+      {/* Body */}
+      <div className="relative overflow-y-auto max-h-[500px] custom-scrollbar">
+        {hours.map((hour, hIndex) => (
+          <div
+            key={hour}
+            className={cn(
+              "grid grid-cols-8",
+              hIndex < hours.length - 1 && "border-b border-border/50",
+            )}
+          >
+            <div className="flex items-start justify-center border-r border-border p-2 text-xs text-muted-foreground w-16 sticky left-0 bg-card">
+              {`${hour === 0 ? 12 : hour > 12 ? hour - 12 : hour} ${hour >= 12 ? "PM" : "AM"}`}
+            </div>
+            {days.map((_, dIndex) => (
+              <div
+                key={dIndex}
+                className={cn(
+                  "h-16 relative",
+                  dIndex < 6 && "border-r border-border/50",
+                )}
+              />
+            ))}
+          </div>
+        ))}
+
+        {/* Events layer */}
+        <div
+          className="absolute inset-0 z-10 pointer-events-none"
+          style={{ paddingLeft: "4rem" }}
+        >
+          <div className="relative w-full h-full">
+            {events.map((event) => {
+              if (event.startHour < startHour || event.startHour >= endHour)
+                return null;
+              const top =
+                ((event.startHour - startHour) / (endHour - startHour)) * 100;
+              const height =
+                (event.durationHours / (endHour - startHour)) * 100;
+              const left = (event.dayIndex / 7) * 100;
+              const width = 100 / 7;
+
+              return (
+                <div
+                  key={event.id}
+                  className="absolute p-0.5 pointer-events-auto"
+                  style={{
+                    top: `${top}%`,
+                    left: `${left}%`,
+                    height: `${height}%`,
+                    width: `${width}%`,
+                  }}
+                >
+                  <div
+                    className="h-full w-full rounded-md border border-white/10 p-1.5 text-xs font-semibold text-white overflow-hidden shadow-sm transition-transform hover:scale-[1.02] hover:shadow-md cursor-pointer"
+                    style={{
+                      backgroundColor: event.color || "hsl(var(--primary))",
+                    }}
+                    title={event.title}
+                  >
+                    {event.title}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+WeekViewCalendar.displayName = "WeekViewCalendar";