@exitvibing/hqui 0.1.0

package/dist/index.mjs

@@ -0,0 +1,988 @@
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/Button.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var variants = {
+  primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+  secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+  destructive: "bg-[hsl(var(--red))] text-white shadow-sm hover:bg-[hsl(var(--red))]/90",
+  outline: "border border-border bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+  ghost: "hover:bg-accent hover:text-accent-foreground",
+  purple: "bg-[hsl(var(--purple))] text-white shadow-sm hover:bg-[hsl(var(--purple))]/90",
+  orange: "bg-[hsl(var(--orange))] text-white shadow-sm hover:bg-[hsl(var(--orange))]/90",
+  blue: "bg-[hsl(var(--blue))] text-white shadow-sm hover:bg-[hsl(var(--blue))]/90",
+  green: "bg-[hsl(var(--green))] text-white shadow-sm hover:bg-[hsl(var(--green))]/90"
+};
+var sizes = {
+  sm: "h-8 rounded-md px-3 text-xs gap-1.5",
+  default: "h-9 px-4 py-2 text-sm gap-2",
+  lg: "h-10 rounded-md px-6 text-base gap-2",
+  icon: "h-9 w-9 p-0"
+};
+var Button = forwardRef(
+  ({ className, variant = "primary", size = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+          variants[variant],
+          sizes[size],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/Card.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Card = forwardRef2(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-xl border border-border bg-card text-card-foreground shadow-sm transition-shadow hover:shadow-md",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6 pb-4", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "h3",
+  {
+    ref,
+    className: cn("font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
+// src/components/Input.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Input = forwardRef3(
+  ({ className, type = "text", ...props }, ref) => {
+    return /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/components/Checkbox.tsx
+import React4, { forwardRef as forwardRef4 } from "react";
+import { Check } from "lucide-react";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var Checkbox = forwardRef4(
+  ({ className, label, id, ...props }, ref) => {
+    const defaultId = React4.useId();
+    const inputId = id || defaultId;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          "flex items-center gap-2 cursor-pointer select-none",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+            /* @__PURE__ */ jsx4(
+              "input",
+              {
+                id: inputId,
+                type: "checkbox",
+                className: "peer h-4 w-4 shrink-0 rounded-sm border border-foreground/30 shadow appearance-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 checked:bg-foreground checked:border-foreground",
+                ref,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              Check,
+              {
+                className: "absolute h-3 w-3 text-background pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity",
+                strokeWidth: 3
+              }
+            )
+          ] }),
+          label && /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: label })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/ProgressBar.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var colorClasses = {
+  white: "bg-foreground",
+  purple: "bg-[hsl(var(--purple))]",
+  orange: "bg-[hsl(var(--orange))]",
+  blue: "bg-[hsl(var(--blue))]",
+  green: "bg-[hsl(var(--green))]"
+};
+var ProgressBar = forwardRef5(
+  ({
+    className,
+    value = 0,
+    max = 100,
+    showLabel = false,
+    color = "white",
+    ...props
+  }, ref) => {
+    const percentage = Math.min(Math.max(0, value / max * 100), 100);
+    return /* @__PURE__ */ jsxs2("div", { className: cn("flex items-center gap-3", showLabel && "w-full"), children: [
+      /* @__PURE__ */ jsx5(
+        "div",
+        {
+          ref,
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": max,
+          "aria-valuenow": value,
+          className: cn(
+            "relative h-2 w-full overflow-hidden rounded-full bg-secondary",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: cn(
+                "h-full rounded-full transition-all duration-500 ease-out",
+                colorClasses[color]
+              ),
+              style: { width: `${percentage}%` }
+            }
+          )
+        }
+      ),
+      showLabel && /* @__PURE__ */ jsxs2("span", { className: "text-xs font-medium text-muted-foreground tabular-nums w-10 text-right", children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] });
+  }
+);
+ProgressBar.displayName = "ProgressBar";
+
+// src/components/Table.tsx
+import {
+  forwardRef as forwardRef6
+} from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Table = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx6("div", { className: "relative w-full overflow-auto rounded-lg border border-border", children: /* @__PURE__ */ jsx6(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+var TableHeader = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  "thead",
+  {
+    ref,
+    className: cn("bg-muted/50 [&_tr]:border-b", className),
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableRow = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+var TableHead = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  "td",
+  {
+    ref,
+    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+
+// src/components/HighlightText.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var HighlightText = forwardRef7(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx7(
+      "span",
+      {
+        ref,
+        className: cn(
+          "bg-foreground text-background px-1.5 py-0.5 rounded font-medium",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+HighlightText.displayName = "HighlightText";
+
+// src/components/Badge.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var colorVariants = {
+  default: "bg-primary text-primary-foreground shadow hover:bg-primary/80",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  outline: "border border-border text-foreground",
+  white: "bg-foreground/10 text-foreground border border-foreground/20",
+  destructive: "bg-[hsl(var(--red))] text-white shadow hover:bg-[hsl(var(--red))]/80",
+  purple: "bg-[hsl(var(--purple))]/15 text-[hsl(var(--purple))] border border-[hsl(var(--purple))]/20",
+  orange: "bg-[hsl(var(--orange))]/15 text-[hsl(var(--orange))] border border-[hsl(var(--orange))]/20",
+  blue: "bg-[hsl(var(--blue))]/15 text-[hsl(var(--blue))] border border-[hsl(var(--blue))]/20",
+  green: "bg-[hsl(var(--green))]/15 text-[hsl(var(--green))] border border-[hsl(var(--green))]/20",
+  red: "bg-[hsl(var(--red))]/15 text-[hsl(var(--red))] border border-[hsl(var(--red))]/20"
+};
+var Badge = forwardRef8(
+  ({ className, variant = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsx8(
+      "span",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center rounded-md px-2 py-0.5 text-xs font-semibold transition-colors",
+          colorVariants[variant],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+// src/components/Separator.tsx
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Separator = forwardRef9(
+  ({ className, orientation = "horizontal", ...props }, ref) => {
+    return /* @__PURE__ */ jsx9(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": orientation,
+        className: cn(
+          "shrink-0 bg-border",
+          orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Separator.displayName = "Separator";
+
+// src/components/Tabs.tsx
+import { createContext, useContext, useState, forwardRef as forwardRef10 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var TabsContext = createContext({
+  value: "",
+  onValueChange: () => {
+  }
+});
+var Tabs = forwardRef10(
+  ({
+    className,
+    defaultValue = "",
+    value: controlledValue,
+    onValueChange,
+    children,
+    ...props
+  }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const currentValue = isControlled ? controlledValue : uncontrolledValue;
+    const handleChange = (newValue) => {
+      if (!isControlled) setUncontrolledValue(newValue);
+      onValueChange?.(newValue);
+    };
+    return /* @__PURE__ */ jsx10(
+      TabsContext.Provider,
+      {
+        value: { value: currentValue, onValueChange: handleChange },
+        children: /* @__PURE__ */ jsx10("div", { ref, className: cn("w-full", className), ...props, children })
+      }
+    );
+  }
+);
+Tabs.displayName = "Tabs";
+var TabsList = forwardRef10(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+  "div",
+  {
+    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";
+var TabsTrigger = forwardRef10(
+  ({ className, value, ...props }, ref) => {
+    const ctx = useContext(TabsContext);
+    const isActive = ctx.value === value;
+    return /* @__PURE__ */ jsx10(
+      "button",
+      {
+        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";
+var TabsContent = forwardRef10(
+  ({ className, value, ...props }, ref) => {
+    const ctx = useContext(TabsContext);
+    if (ctx.value !== value) return null;
+    return /* @__PURE__ */ jsx10(
+      "div",
+      {
+        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";
+
+// src/components/Switch.tsx
+import React11, { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+var Switch = forwardRef11(
+  ({ className, label, id, ...props }, ref) => {
+    const defaultId = React11.useId();
+    const inputId = id || defaultId;
+    return /* @__PURE__ */ jsxs3(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          "inline-flex items-center gap-2 cursor-pointer select-none",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx11(
+              "input",
+              {
+                id: inputId,
+                type: "checkbox",
+                role: "switch",
+                className: "peer sr-only",
+                ref,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx11("div", { className: "h-5 w-9 rounded-full border-2 border-transparent bg-input transition-colors peer-checked:bg-foreground peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background peer-disabled:cursor-not-allowed peer-disabled:opacity-50" }),
+            /* @__PURE__ */ jsx11("div", { className: "absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-background shadow-lg transition-transform peer-checked:translate-x-4 peer-checked:bg-background" })
+          ] }),
+          label && /* @__PURE__ */ jsx11("span", { className: "text-sm font-medium leading-none", children: label })
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+
+// src/components/Tooltip.tsx
+import {
+  forwardRef as forwardRef12,
+  useState as useState2,
+  useRef,
+  useEffect,
+  useCallback
+} from "react";
+import { Fragment, jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var Tooltip = forwardRef12(
+  ({ className, content, side = "top", delayMs = 200, children, ...props }, ref) => {
+    const [visible, setVisible] = useState2(false);
+    const timeoutRef = useRef();
+    const wrapperRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const [position, setPosition] = useState2({ 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) {
+        requestAnimationFrame(updatePosition);
+      }
+    }, [visible, updatePosition]);
+    useEffect(() => {
+      return () => clearTimeout(timeoutRef.current);
+    }, []);
+    return /* @__PURE__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsx12(
+        "div",
+        {
+          ref: (node) => {
+            wrapperRef.current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref)
+              ref.current = node;
+          },
+          className: cn("inline-flex", className),
+          onMouseEnter: show,
+          onMouseLeave: hide,
+          onFocus: show,
+          onBlur: hide,
+          ...props,
+          children
+        }
+      ),
+      visible && /* @__PURE__ */ jsx12(
+        "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"
+          },
+          children: content
+        }
+      )
+    ] });
+  }
+);
+Tooltip.displayName = "Tooltip";
+
+// src/components/ThemeToggle.tsx
+import { forwardRef as forwardRef13, useEffect as useEffect2, useState as useState3 } from "react";
+import { Moon, Sun } from "lucide-react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var ThemeToggle = forwardRef13(
+  ({ className, defaultTheme }, ref) => {
+    const [isDark, setIsDark] = useState3(() => {
+      if (typeof window === "undefined") return defaultTheme === "dark";
+      return document.documentElement.classList.contains("dark");
+    });
+    useEffect2(() => {
+      if (isDark) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    }, [isDark]);
+    return /* @__PURE__ */ jsx13(
+      Button,
+      {
+        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",
+        children: isDark ? /* @__PURE__ */ jsx13(Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx13(Moon, { className: "h-4 w-4" })
+      }
+    );
+  }
+);
+ThemeToggle.displayName = "ThemeToggle";
+
+// src/components/extended/Counter.tsx
+import { useState as useState4, forwardRef as forwardRef14 } from "react";
+import { Plus, Minus } from "lucide-react";
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+var Counter = forwardRef14(
+  ({
+    initialValue = 0,
+    min = Number.MIN_SAFE_INTEGER,
+    max = Number.MAX_SAFE_INTEGER,
+    step = 1,
+    onChange,
+    className
+  }, ref) => {
+    const [value, setValue] = useState4(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 /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center rounded-lg border border-border bg-card",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx14(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8 rounded-r-none",
+              onClick: handleDecrement,
+              disabled: value <= min,
+              children: /* @__PURE__ */ jsx14(Minus, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsx14("span", { className: "w-10 text-center text-sm font-medium tabular-nums border-x border-border", children: value }),
+          /* @__PURE__ */ jsx14(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8 rounded-l-none",
+              onClick: handleIncrement,
+              disabled: value >= max,
+              children: /* @__PURE__ */ jsx14(Plus, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Counter.displayName = "Counter";
+
+// src/components/extended/ArrowButton.tsx
+import { forwardRef as forwardRef15 } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+var ArrowButton = forwardRef15(
+  ({ direction = "right", text, className, children, ...props }, ref) => {
+    const Icon = direction === "left" ? ChevronLeft : ChevronRight;
+    return /* @__PURE__ */ jsxs6(
+      Button,
+      {
+        ref,
+        className: cn("gap-1", !text && !children && "px-2", className),
+        ...props,
+        children: [
+          direction === "left" && /* @__PURE__ */ jsx15(Icon, { className: "h-4 w-4" }),
+          (text || children) && /* @__PURE__ */ jsx15("span", { children: text || children }),
+          direction === "right" && /* @__PURE__ */ jsx15(Icon, { className: "h-4 w-4" })
+        ]
+      }
+    );
+  }
+);
+ArrowButton.displayName = "ArrowButton";
+
+// src/components/extended/ChooseList.tsx
+import { forwardRef as forwardRef16 } from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+var ChooseList = forwardRef16(
+  ({ className, options, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs7("div", { className: "relative inline-block w-full", children: [
+      /* @__PURE__ */ jsx16(
+        "select",
+        {
+          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,
+          children: options.map((opt) => /* @__PURE__ */ jsx16(
+            "option",
+            {
+              value: opt.value,
+              className: "bg-card text-foreground",
+              children: opt.label
+            },
+            opt.value
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx16("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground", children: /* @__PURE__ */ jsx16(ChevronDown, { className: "h-4 w-4" }) })
+    ] });
+  }
+);
+ChooseList.displayName = "ChooseList";
+
+// src/components/extended/Popup.tsx
+import { forwardRef as forwardRef17, useEffect as useEffect3 } from "react";
+import { X } from "lucide-react";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+var Popup = forwardRef17(
+  ({ className, open, onClose, title, children, ...props }, ref) => {
+    useEffect3(() => {
+      if (open) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }, [open]);
+    useEffect3(() => {
+      const handleEscape = (e) => {
+        if (e.key === "Escape") onClose();
+      };
+      if (open) document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }, [open, onClose]);
+    if (!open) return null;
+    return /* @__PURE__ */ jsxs8("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+      /* @__PURE__ */ jsx17(
+        "div",
+        {
+          className: "fixed inset-0 bg-background/80 backdrop-blur-sm",
+          style: { animation: "popup-fade-in 0.15s ease-out" },
+          onClick: onClose
+        }
+      ),
+      /* @__PURE__ */ jsxs8(
+        "div",
+        {
+          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,
+          children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mb-4", children: [
+              title && /* @__PURE__ */ jsx17("h2", { className: "text-lg font-semibold tracking-tight", children: title }),
+              /* @__PURE__ */ jsx17(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-7 w-7 rounded-full ml-auto",
+                  onClick: onClose,
+                  "aria-label": "Close popup",
+                  children: /* @__PURE__ */ jsx17(X, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx17("div", { className: "text-sm text-muted-foreground", children })
+          ]
+        }
+      )
+    ] });
+  }
+);
+Popup.displayName = "Popup";
+
+// src/components/extended/StatusBar.tsx
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+var 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"
+};
+var StatusBar = forwardRef18(
+  ({ className, status = "idle", label, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        ref,
+        role: "status",
+        className: cn(
+          "inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx18(
+            "span",
+            {
+              className: cn("h-2 w-2 rounded-full", statusStyles[status]),
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx18("span", { className: "text-xs font-semibold uppercase tracking-wider", children: label || status }),
+          children && /* @__PURE__ */ jsx18("span", { className: "text-xs text-muted-foreground border-l border-border pl-2", children })
+        ]
+      }
+    );
+  }
+);
+StatusBar.displayName = "StatusBar";
+
+// src/components/extended/WeekViewCalendar.tsx
+import { forwardRef as forwardRef19 } from "react";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+var WeekViewCalendar = forwardRef19(({ 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 /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col rounded-lg border border-border overflow-hidden bg-card",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-8 border-b border-border bg-muted/30", children: [
+          /* @__PURE__ */ jsx19("div", { className: "flex items-center justify-center border-r border-border p-2 text-xs font-medium text-muted-foreground w-16", children: "Time" }),
+          days.map((day, i) => /* @__PURE__ */ jsx19(
+            "div",
+            {
+              className: cn(
+                "p-2 text-center text-sm font-semibold",
+                i < 6 && "border-r border-border"
+              ),
+              children: day
+            },
+            day
+          ))
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { className: "relative overflow-y-auto max-h-[500px] custom-scrollbar", children: [
+          hours.map((hour, hIndex) => /* @__PURE__ */ jsxs10(
+            "div",
+            {
+              className: cn(
+                "grid grid-cols-8",
+                hIndex < hours.length - 1 && "border-b border-border/50"
+              ),
+              children: [
+                /* @__PURE__ */ jsx19("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", children: `${hour === 0 ? 12 : hour > 12 ? hour - 12 : hour} ${hour >= 12 ? "PM" : "AM"}` }),
+                days.map((_, dIndex) => /* @__PURE__ */ jsx19(
+                  "div",
+                  {
+                    className: cn(
+                      "h-16 relative",
+                      dIndex < 6 && "border-r border-border/50"
+                    )
+                  },
+                  dIndex
+                ))
+              ]
+            },
+            hour
+          )),
+          /* @__PURE__ */ jsx19(
+            "div",
+            {
+              className: "absolute inset-0 z-10 pointer-events-none",
+              style: { paddingLeft: "4rem" },
+              children: /* @__PURE__ */ jsx19("div", { className: "relative w-full h-full", children: 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 /* @__PURE__ */ jsx19(
+                  "div",
+                  {
+                    className: "absolute p-0.5 pointer-events-auto",
+                    style: {
+                      top: `${top}%`,
+                      left: `${left}%`,
+                      height: `${height}%`,
+                      width: `${width}%`
+                    },
+                    children: /* @__PURE__ */ jsx19(
+                      "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,
+                        children: event.title
+                      }
+                    )
+                  },
+                  event.id
+                );
+              }) })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+WeekViewCalendar.displayName = "WeekViewCalendar";
+export {
+  ArrowButton,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  ChooseList,
+  Counter,
+  HighlightText,
+  Input,
+  Popup,
+  ProgressBar,
+  Separator,
+  StatusBar,
+  Switch,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  ThemeToggle,
+  Tooltip,
+  WeekViewCalendar,
+  cn
+};