@exitvibing/hqui 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -849,108 +849,155 @@ var StatusBar = forwardRef18(
 );
 StatusBar.displayName = "StatusBar";
 
-// src/components/extended/WeekViewCalendar.tsx
+// src/components/extended/Sidebar.tsx
 import { forwardRef as forwardRef19 } from "react";
+import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-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(
+var Sidebar = forwardRef19(
+  ({ className, side, open, onToggle, width = 240, children, style, ...props }, ref) => {
+    const isLeft = side === "left";
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        ref,
+        className: cn("sidebar-root", `sidebar-${side}`, className),
+        style: {
+          "--sidebar-w": `${width}px`,
+          ...style
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx19(
             "div",
             {
               className: cn(
-                "grid grid-cols-8",
-                hIndex < hours.length - 1 && "border-b border-border/50"
+                "sidebar-panel",
+                open ? "sidebar-panel-open" : "sidebar-panel-closed"
               ),
-              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
-          )),
+              children: /* @__PURE__ */ jsx19("div", { className: "sidebar-content", children })
+            }
+          ),
           /* @__PURE__ */ jsx19(
-            "div",
+            "button",
             {
-              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
-                );
-              }) })
+              type: "button",
+              onClick: onToggle,
+              className: "sidebar-toggle",
+              "aria-label": open ? `Hide ${side} sidebar` : `Show ${side} sidebar`,
+              children: isLeft ? open ? /* @__PURE__ */ jsx19(ChevronLeft2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx19(ChevronRight2, { className: "h-4 w-4" }) : open ? /* @__PURE__ */ jsx19(ChevronRight2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx19(ChevronLeft2, { className: "h-4 w-4" })
             }
           )
-        ] })
-      ]
-    }
-  );
-});
-WeekViewCalendar.displayName = "WeekViewCalendar";
+        ]
+      }
+    );
+  }
+);
+Sidebar.displayName = "Sidebar";
+
+// src/components/extended/FloatingPopup.tsx
+import {
+  forwardRef as forwardRef20,
+  useEffect as useEffect4,
+  useLayoutEffect,
+  useState as useState5,
+  useCallback as useCallback2
+} from "react";
+import { X as X2 } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+var FloatingPopup = forwardRef20(
+  ({ className, open, onClose, anchorRef, title, gap = 8, children, ...props }, ref) => {
+    const [pos, setPos] = useState5(null);
+    const [visible, setVisible] = useState5(false);
+    const calculate = useCallback2(() => {
+      if (!anchorRef.current) return;
+      const rect = anchorRef.current.getBoundingClientRect();
+      const popupHeight = 200;
+      const popupWidth = 320;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const direction = spaceBelow >= popupHeight + gap ? "below" : "above";
+      let top;
+      if (direction === "below") {
+        top = rect.bottom + gap;
+      } else {
+        top = rect.top - popupHeight - gap;
+        if (top < 8) top = 8;
+      }
+      let left = rect.left + rect.width / 2 - popupWidth / 2;
+      if (left < 8) left = 8;
+      if (left + popupWidth > window.innerWidth - 8) {
+        left = window.innerWidth - popupWidth - 8;
+      }
+      setPos({ top, left, direction });
+    }, [anchorRef, gap]);
+    useLayoutEffect(() => {
+      if (open) {
+        calculate();
+        requestAnimationFrame(() => setVisible(true));
+      } else {
+        setVisible(false);
+        setPos(null);
+      }
+    }, [open, calculate]);
+    useEffect4(() => {
+      if (!open) return;
+      const onResize = () => calculate();
+      const onScroll = () => calculate();
+      window.addEventListener("resize", onResize);
+      window.addEventListener("scroll", onScroll, true);
+      return () => {
+        window.removeEventListener("resize", onResize);
+        window.removeEventListener("scroll", onScroll, true);
+      };
+    }, [open, calculate]);
+    useEffect4(() => {
+      if (!open) return;
+      const handleEsc = (e) => {
+        if (e.key === "Escape") onClose();
+      };
+      document.addEventListener("keydown", handleEsc);
+      return () => document.removeEventListener("keydown", handleEsc);
+    }, [open, onClose]);
+    if (!open || !pos) return null;
+    return /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        ref,
+        className: cn(
+          "floating-popup",
+          visible && "floating-popup-visible",
+          pos.direction === "above" ? "floating-popup-above" : "floating-popup-below",
+          className
+        ),
+        style: {
+          position: "fixed",
+          top: pos.top,
+          left: pos.left,
+          zIndex: 50,
+          width: 320
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between mb-2", children: [
+            title && /* @__PURE__ */ jsx20("span", { className: "text-sm font-semibold tracking-tight", children: title }),
+            /* @__PURE__ */ jsx20(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-6 w-6 rounded-full ml-auto",
+                onClick: onClose,
+                "aria-label": "Close popup",
+                children: /* @__PURE__ */ jsx20(X2, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx20("div", { className: "text-sm text-muted-foreground", children })
+        ]
+      }
+    );
+  }
+);
+FloatingPopup.displayName = "FloatingPopup";
 export {
   ArrowButton,
   Badge,
@@ -964,11 +1011,13 @@ export {
   Checkbox,
   ChooseList,
   Counter,
+  FloatingPopup,
   HighlightText,
   Input,
   Popup,
   ProgressBar,
   Separator,
+  Sidebar,
   StatusBar,
   Switch,
   Table,
@@ -983,6 +1032,5 @@ export {
   TabsTrigger,
   ThemeToggle,
   Tooltip,
-  WeekViewCalendar,
   cn
 };

package/docs/extended-components.md

@@ -148,54 +148,63 @@ Shows a colored dot next to a label. Children are shown after a divider.
 
 ---
 
-## WeekViewCalendar
+## Sidebar
 
 ```tsx
-import { WeekViewCalendar } from "hqui";
+import { Sidebar } from "hqui";
 ```
 
 **Props:**
 
-| Prop        | Type              | Default |
-| ----------- | ----------------- | ------- |
-| `events`    | `CalendarEvent[]` | `[]`    |
-| `startHour` | `number`          | `8`     |
-| `endHour`   | `number`          | `18`    |
-
-**CalendarEvent:**
-
-```ts
-{
-  id: string;
-  dayIndex: number; // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
-  startHour: number; // 9.5 means 9:30 AM
-  durationHours: number; // 1.5 means 1 hour 30 minutes
-  title: string;
-  color: string; // any CSS color
-}
+| Prop       | Type               | Default  |
+| ---------- | ------------------ | -------- |
+| `side`     | `'left'` `'right'` | required |
+| `open`     | `boolean`          | required |
+| `onToggle` | `() => void`       | required |
+| `width`    | `number`           | `240`    |
+
+A VSCode-style side panel. When closed, a small toggle button stays visible at the edge so the user can reopen it. The panel slides in and out with a smooth animation.
+
+```tsx
+const [open, setOpen] = useState(true);
+
+<Sidebar side="left" open={open} onToggle={() => setOpen(!open)}>
+  <p>Panel content here</p>
+</Sidebar>;
 ```
 
+---
+
+## FloatingPopup
+
 ```tsx
-<WeekViewCalendar
-  events={[
-    {
-      id: "1",
-      dayIndex: 1,
-      startHour: 9,
-      durationHours: 2,
-      title: "Standup",
-      color: "hsl(var(--purple))",
-    },
-    {
-      id: "2",
-      dayIndex: 3,
-      startHour: 14,
-      durationHours: 1,
-      title: "Review",
-      color: "hsl(var(--orange))",
-    },
-  ]}
-  startHour={8}
-  endHour={18}
-/>
+import { FloatingPopup } from "hqui";
+```
+
+**Props:**
+
+| Prop        | Type                             | Default  |
+| ----------- | -------------------------------- | -------- |
+| `open`      | `boolean`                        | `false`  |
+| `onClose`   | `() => void`                     | required |
+| `anchorRef` | `RefObject<HTMLElement \| null>` | required |
+| `title`     | `ReactNode`                      | none     |
+| `gap`       | `number`                         | `8`      |
+
+A non-modal floating popup anchored to a trigger element. It does not dim the background. It positions itself below the anchor by default; if there is not enough viewport space below, it flips above. Press Escape to close.
+
+```tsx
+const ref = useRef<HTMLButtonElement>(null);
+const [open, setOpen] = useState(false);
+
+<Button ref={ref} onClick={() => setOpen(true)}>Show Info</Button>
+
+<FloatingPopup
+  open={open}
+  onClose={() => setOpen(false)}
+  anchorRef={ref}
+  title="Details"
+>
+  <p>This popup does not block the background.</p>
+</FloatingPopup>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exitvibing/hqui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React Tailwind UI library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/extended/FloatingPopup.tsx

@@ -0,0 +1,139 @@
+import React, {
+  HTMLAttributes,
+  forwardRef,
+  useEffect,
+  useLayoutEffect,
+  useState,
+  useCallback,
+} from "react";
+import { X } from "lucide-react";
+import { Button } from "../Button";
+import { cn } from "../../lib/cn";
+
+export interface FloatingPopupProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "title"
+> {
+  open: boolean;
+  onClose: () => void;
+  anchorRef: React.RefObject<HTMLElement | null>;
+  title?: React.ReactNode;
+  gap?: number;
+}
+
+interface Position {
+  top: number;
+  left: number;
+  direction: "below" | "above";
+}
+
+export const FloatingPopup = forwardRef<HTMLDivElement, FloatingPopupProps>(
+  (
+    { className, open, onClose, anchorRef, title, gap = 8, children, ...props },
+    ref,
+  ) => {
+    const [pos, setPos] = useState<Position | null>(null);
+    const [visible, setVisible] = useState(false);
+
+    const calculate = useCallback(() => {
+      if (!anchorRef.current) return;
+      const rect = anchorRef.current.getBoundingClientRect();
+      const popupHeight = 200;
+      const popupWidth = 320;
+
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const direction: "below" | "above" =
+        spaceBelow >= popupHeight + gap ? "below" : "above";
+
+      let top: number;
+      if (direction === "below") {
+        top = rect.bottom + gap;
+      } else {
+        top = rect.top - popupHeight - gap;
+        if (top < 8) top = 8;
+      }
+
+      let left = rect.left + rect.width / 2 - popupWidth / 2;
+      if (left < 8) left = 8;
+      if (left + popupWidth > window.innerWidth - 8) {
+        left = window.innerWidth - popupWidth - 8;
+      }
+
+      setPos({ top, left, direction });
+    }, [anchorRef, gap]);
+
+    useLayoutEffect(() => {
+      if (open) {
+        calculate();
+        requestAnimationFrame(() => setVisible(true));
+      } else {
+        setVisible(false);
+        setPos(null);
+      }
+    }, [open, calculate]);
+
+    useEffect(() => {
+      if (!open) return;
+      const onResize = () => calculate();
+      const onScroll = () => calculate();
+      window.addEventListener("resize", onResize);
+      window.addEventListener("scroll", onScroll, true);
+      return () => {
+        window.removeEventListener("resize", onResize);
+        window.removeEventListener("scroll", onScroll, true);
+      };
+    }, [open, calculate]);
+
+    useEffect(() => {
+      if (!open) return;
+      const handleEsc = (e: KeyboardEvent) => {
+        if (e.key === "Escape") onClose();
+      };
+      document.addEventListener("keydown", handleEsc);
+      return () => document.removeEventListener("keydown", handleEsc);
+    }, [open, onClose]);
+
+    if (!open || !pos) return null;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "floating-popup",
+          visible && "floating-popup-visible",
+          pos.direction === "above"
+            ? "floating-popup-above"
+            : "floating-popup-below",
+          className,
+        )}
+        style={{
+          position: "fixed",
+          top: pos.top,
+          left: pos.left,
+          zIndex: 50,
+          width: 320,
+        }}
+        {...props}
+      >
+        <div className="flex items-center justify-between mb-2">
+          {title && (
+            <span className="text-sm font-semibold tracking-tight">
+              {title}
+            </span>
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 rounded-full ml-auto"
+            onClick={onClose}
+            aria-label="Close popup"
+          >
+            <X className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+        <div className="text-sm text-muted-foreground">{children}</div>
+      </div>
+    );
+  },
+);
+FloatingPopup.displayName = "FloatingPopup";

package/src/components/extended/Sidebar.tsx

@@ -0,0 +1,64 @@
+import React, { HTMLAttributes, forwardRef } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../../lib/cn";
+
+export interface SidebarProps extends HTMLAttributes<HTMLDivElement> {
+  side: "left" | "right";
+  open: boolean;
+  onToggle: () => void;
+  width?: number;
+}
+
+export const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
+  (
+    { className, side, open, onToggle, width = 240, children, style, ...props },
+    ref,
+  ) => {
+    const isLeft = side === "left";
+
+    return (
+      <div
+        ref={ref}
+        className={cn("sidebar-root", `sidebar-${side}`, className)}
+        style={
+          {
+            "--sidebar-w": `${width}px`,
+            ...style,
+          } as React.CSSProperties
+        }
+        {...props}
+      >
+        {/* Panel */}
+        <div
+          className={cn(
+            "sidebar-panel",
+            open ? "sidebar-panel-open" : "sidebar-panel-closed",
+          )}
+        >
+          <div className="sidebar-content">{children}</div>
+        </div>
+
+        {/* Toggle button — always visible */}
+        <button
+          type="button"
+          onClick={onToggle}
+          className="sidebar-toggle"
+          aria-label={open ? `Hide ${side} sidebar` : `Show ${side} sidebar`}
+        >
+          {isLeft ? (
+            open ? (
+              <ChevronLeft className="h-4 w-4" />
+            ) : (
+              <ChevronRight className="h-4 w-4" />
+            )
+          ) : open ? (
+            <ChevronRight className="h-4 w-4" />
+          ) : (
+            <ChevronLeft className="h-4 w-4" />
+          )}
+        </button>
+      </div>
+    );
+  },
+);
+Sidebar.displayName = "Sidebar";

package/src/index.css

@@ -117,3 +117,94 @@
     transform: scale(1);
   }
 }
+
+/* ── Sidebar ── */
+.sidebar-root {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  height: 100%;
+}
+
+.sidebar-left {
+  flex-direction: row;
+}
+.sidebar-right {
+  flex-direction: row-reverse;
+}
+
+.sidebar-panel {
+  width: var(--sidebar-w, 240px);
+  overflow: hidden;
+  background: hsl(var(--card));
+  border-right: 1px solid hsl(var(--border));
+  transition:
+    width 0.2s ease-in-out,
+    opacity 0.2s ease-in-out;
+}
+.sidebar-right .sidebar-panel {
+  border-right: none;
+  border-left: 1px solid hsl(var(--border));
+}
+
+.sidebar-panel-open {
+  opacity: 1;
+}
+.sidebar-panel-closed {
+  width: 0;
+  opacity: 0;
+  border-width: 0;
+}
+
+.sidebar-content {
+  width: var(--sidebar-w, 240px);
+  height: 100%;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+.sidebar-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  flex-shrink: 0;
+  cursor: pointer;
+  border: none;
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+.sidebar-toggle:hover {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+/* ── Floating Popup ── */
+.floating-popup {
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.75rem;
+  padding: 0.75rem 1rem;
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.12),
+    0 1px 4px rgba(0, 0, 0, 0.08);
+  opacity: 0;
+  transition:
+    opacity 0.15s ease-out,
+    transform 0.15s ease-out;
+  pointer-events: none;
+}
+.floating-popup-below {
+  transform: translateY(-6px);
+}
+.floating-popup-above {
+  transform: translateY(6px);
+}
+.floating-popup-visible {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}

package/src/index.ts

@@ -22,4 +22,5 @@ export * from "./components/extended/ArrowButton";
 export * from "./components/extended/ChooseList";
 export * from "./components/extended/Popup";
 export * from "./components/extended/StatusBar";
-export * from "./components/extended/WeekViewCalendar";
+export * from "./components/extended/Sidebar";
+export * from "./components/extended/FloatingPopup";