@exitvibing/hqui 0.1.0

package/dist/index.js

@@ -0,0 +1,1049 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ArrowButton: () => ArrowButton,
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  CardContent: () => CardContent,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
+  Checkbox: () => Checkbox,
+  ChooseList: () => ChooseList,
+  Counter: () => Counter,
+  HighlightText: () => HighlightText,
+  Input: () => Input,
+  Popup: () => Popup,
+  ProgressBar: () => ProgressBar,
+  Separator: () => Separator,
+  StatusBar: () => StatusBar,
+  Switch: () => Switch,
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCell: () => TableCell,
+  TableHead: () => TableHead,
+  TableHeader: () => TableHeader,
+  TableRow: () => TableRow,
+  Tabs: () => Tabs,
+  TabsContent: () => TabsContent,
+  TabsList: () => TabsList,
+  TabsTrigger: () => TabsTrigger,
+  ThemeToggle: () => ThemeToggle,
+  Tooltip: () => Tooltip,
+  WeekViewCalendar: () => WeekViewCalendar,
+  cn: () => cn
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/lib/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/Button.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("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 = (0, import_react.forwardRef)(
+  ({ className, variant = "primary", size = "default", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.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
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Card = (0, import_react2.forwardRef)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "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 = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6 pb-4", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "h3",
+  {
+    ref,
+    className: cn("font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
+// src/components/Input.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Input = (0, import_react3.forwardRef)(
+  ({ className, type = "text", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "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
+var import_react4 = __toESM(require("react"));
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Checkbox = (0, import_react4.forwardRef)(
+  ({ className, label, id, ...props }, ref) => {
+    const defaultId = import_react4.default.useId();
+    const inputId = id || defaultId;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          "flex items-center gap-2 cursor-pointer select-none",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative flex items-center justify-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "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__ */ (0, import_jsx_runtime4.jsx)(
+              import_lucide_react.Check,
+              {
+                className: "absolute h-3 w-3 text-background pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity",
+                strokeWidth: 3
+              }
+            )
+          ] }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("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 = (0, import_react5.forwardRef)(
+  ({
+    className,
+    value = 0,
+    max = 100,
+    showLabel = false,
+    color = "white",
+    ...props
+  }, ref) => {
+    const percentage = Math.min(Math.max(0, value / max * 100), 100);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex items-center gap-3", showLabel && "w-full"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "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__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              className: cn(
+                "h-full rounded-full transition-all duration-500 ease-out",
+                colorClasses[color]
+              ),
+              style: { width: `${percentage}%` }
+            }
+          )
+        }
+      ),
+      showLabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("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
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Table = (0, import_react6.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "relative w-full overflow-auto rounded-lg border border-border", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+var TableHeader = (0, import_react6.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "thead",
+  {
+    ref,
+    className: cn("bg-muted/50 [&_tr]:border-b", className),
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = (0, import_react6.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableRow = (0, import_react6.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "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 = (0, import_react6.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "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 = (0, import_react6.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "td",
+  {
+    ref,
+    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+
+// src/components/HighlightText.tsx
+var import_react7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var HighlightText = (0, import_react7.forwardRef)(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "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
+var import_react8 = require("react");
+var import_jsx_runtime8 = require("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 = (0, import_react8.forwardRef)(
+  ({ className, variant = "default", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "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
+var import_react9 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Separator = (0, import_react9.forwardRef)(
+  ({ className, orientation = "horizontal", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "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
+var import_react10 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var TabsContext = (0, import_react10.createContext)({
+  value: "",
+  onValueChange: () => {
+  }
+});
+var Tabs = (0, import_react10.forwardRef)(
+  ({
+    className,
+    defaultValue = "",
+    value: controlledValue,
+    onValueChange,
+    children,
+    ...props
+  }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = (0, import_react10.useState)(defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const currentValue = isControlled ? controlledValue : uncontrolledValue;
+    const handleChange = (newValue) => {
+      if (!isControlled) setUncontrolledValue(newValue);
+      onValueChange?.(newValue);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      TabsContext.Provider,
+      {
+        value: { value: currentValue, onValueChange: handleChange },
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cn("w-full", className), ...props, children })
+      }
+    );
+  }
+);
+Tabs.displayName = "Tabs";
+var TabsList = (0, import_react10.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  "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 = (0, import_react10.forwardRef)(
+  ({ className, value, ...props }, ref) => {
+    const ctx = (0, import_react10.useContext)(TabsContext);
+    const isActive = ctx.value === value;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "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 = (0, import_react10.forwardRef)(
+  ({ className, value, ...props }, ref) => {
+    const ctx = (0, import_react10.useContext)(TabsContext);
+    if (ctx.value !== value) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "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
+var import_react11 = __toESM(require("react"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Switch = (0, import_react11.forwardRef)(
+  ({ className, label, id, ...props }, ref) => {
+    const defaultId = import_react11.default.useId();
+    const inputId = id || defaultId;
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          "inline-flex items-center gap-2 cursor-pointer select-none",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "input",
+              {
+                id: inputId,
+                type: "checkbox",
+                role: "switch",
+                className: "peer sr-only",
+                ref,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm font-medium leading-none", children: label })
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+
+// src/components/Tooltip.tsx
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Tooltip = (0, import_react12.forwardRef)(
+  ({ className, content, side = "top", delayMs = 200, children, ...props }, ref) => {
+    const [visible, setVisible] = (0, import_react12.useState)(false);
+    const timeoutRef = (0, import_react12.useRef)();
+    const wrapperRef = (0, import_react12.useRef)(null);
+    const tooltipRef = (0, import_react12.useRef)(null);
+    const [position, setPosition] = (0, import_react12.useState)({ top: 0, left: 0 });
+    const show = () => {
+      timeoutRef.current = setTimeout(() => setVisible(true), delayMs);
+    };
+    const hide = () => {
+      clearTimeout(timeoutRef.current);
+      setVisible(false);
+    };
+    const updatePosition = (0, import_react12.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]);
+    (0, import_react12.useEffect)(() => {
+      if (visible) {
+        requestAnimationFrame(updatePosition);
+      }
+    }, [visible, updatePosition]);
+    (0, import_react12.useEffect)(() => {
+      return () => clearTimeout(timeoutRef.current);
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "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__ */ (0, import_jsx_runtime12.jsx)(
+        "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
+var import_react13 = require("react");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var ThemeToggle = (0, import_react13.forwardRef)(
+  ({ className, defaultTheme }, ref) => {
+    const [isDark, setIsDark] = (0, import_react13.useState)(() => {
+      if (typeof window === "undefined") return defaultTheme === "dark";
+      return document.documentElement.classList.contains("dark");
+    });
+    (0, import_react13.useEffect)(() => {
+      if (isDark) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    }, [isDark]);
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      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__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.Moon, { className: "h-4 w-4" })
+      }
+    );
+  }
+);
+ThemeToggle.displayName = "ThemeToggle";
+
+// src/components/extended/Counter.tsx
+var import_react14 = require("react");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Counter = (0, import_react14.forwardRef)(
+  ({
+    initialValue = 0,
+    min = Number.MIN_SAFE_INTEGER,
+    max = Number.MAX_SAFE_INTEGER,
+    step = 1,
+    onChange,
+    className
+  }, ref) => {
+    const [value, setValue] = (0, import_react14.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 /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center rounded-lg border border-border bg-card",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8 rounded-r-none",
+              onClick: handleDecrement,
+              disabled: value <= min,
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.Minus, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "w-10 text-center text-sm font-medium tabular-nums border-x border-border", children: value }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8 rounded-l-none",
+              onClick: handleIncrement,
+              disabled: value >= max,
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.Plus, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Counter.displayName = "Counter";
+
+// src/components/extended/ArrowButton.tsx
+var import_react15 = require("react");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ArrowButton = (0, import_react15.forwardRef)(
+  ({ direction = "right", text, className, children, ...props }, ref) => {
+    const Icon = direction === "left" ? import_lucide_react4.ChevronLeft : import_lucide_react4.ChevronRight;
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      Button,
+      {
+        ref,
+        className: cn("gap-1", !text && !children && "px-2", className),
+        ...props,
+        children: [
+          direction === "left" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "h-4 w-4" }),
+          (text || children) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: text || children }),
+          direction === "right" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "h-4 w-4" })
+        ]
+      }
+    );
+  }
+);
+ArrowButton.displayName = "ArrowButton";
+
+// src/components/extended/ChooseList.tsx
+var import_react16 = require("react");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ChooseList = (0, import_react16.forwardRef)(
+  ({ className, options, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative inline-block w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "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__ */ (0, import_jsx_runtime16.jsx)(
+            "option",
+            {
+              value: opt.value,
+              className: "bg-card text-foreground",
+              children: opt.label
+            },
+            opt.value
+          ))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react5.ChevronDown, { className: "h-4 w-4" }) })
+    ] });
+  }
+);
+ChooseList.displayName = "ChooseList";
+
+// src/components/extended/Popup.tsx
+var import_react17 = require("react");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Popup = (0, import_react17.forwardRef)(
+  ({ className, open, onClose, title, children, ...props }, ref) => {
+    (0, import_react17.useEffect)(() => {
+      if (open) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }, [open]);
+    (0, import_react17.useEffect)(() => {
+      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__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "div",
+        {
+          className: "fixed inset-0 bg-background/80 backdrop-blur-sm",
+          style: { animation: "popup-fade-in 0.15s ease-out" },
+          onClick: onClose
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        "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__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: "text-lg font-semibold tracking-tight", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-7 w-7 rounded-full ml-auto",
+                  onClick: onClose,
+                  "aria-label": "Close popup",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react6.X, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-sm text-muted-foreground", children })
+          ]
+        }
+      )
+    ] });
+  }
+);
+Popup.displayName = "Popup";
+
+// src/components/extended/StatusBar.tsx
+var import_react18 = require("react");
+var import_jsx_runtime18 = require("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 = (0, import_react18.forwardRef)(
+  ({ className, status = "idle", label, children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      "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__ */ (0, import_jsx_runtime18.jsx)(
+            "span",
+            {
+              className: cn("h-2 w-2 rounded-full", statusStyles[status]),
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-xs font-semibold uppercase tracking-wider", children: label || status }),
+          children && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-xs text-muted-foreground border-l border-border pl-2", children })
+        ]
+      }
+    );
+  }
+);
+StatusBar.displayName = "StatusBar";
+
+// src/components/extended/WeekViewCalendar.tsx
+var import_react19 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var WeekViewCalendar = (0, import_react19.forwardRef)(({ 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__ */ (0, import_jsx_runtime19.jsxs)(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col rounded-lg border border-border overflow-hidden bg-card",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "grid grid-cols-8 border-b border-border bg-muted/30", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)(
+            "div",
+            {
+              className: cn(
+                "p-2 text-center text-sm font-semibold",
+                i < 6 && "border-r border-border"
+              ),
+              children: day
+            },
+            day
+          ))
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative overflow-y-auto max-h-[500px] custom-scrollbar", children: [
+          hours.map((hour, hIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+            "div",
+            {
+              className: cn(
+                "grid grid-cols-8",
+                hIndex < hours.length - 1 && "border-b border-border/50"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "h-16 relative",
+                      dIndex < 6 && "border-r border-border/50"
+                    )
+                  },
+                  dIndex
+                ))
+              ]
+            },
+            hour
+          )),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "div",
+            {
+              className: "absolute inset-0 z-10 pointer-events-none",
+              style: { paddingLeft: "4rem" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)(
+                  "div",
+                  {
+                    className: "absolute p-0.5 pointer-events-auto",
+                    style: {
+                      top: `${top}%`,
+                      left: `${left}%`,
+                      height: `${height}%`,
+                      width: `${width}%`
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      "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";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  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
+});