pixelplay 1.0.13 → 1.1.1

package/dist/index.mjs

@@ -1794,7 +1794,7 @@ function DropdownMenuItem({
 }
 
 // ../../app/ui-kit/pixelplay-ui/shared/ui/select/Select.tsx
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import Image2 from "next/image";
 import { Check as Check2, ChevronDown, ChevronUp, Search } from "react-feather";
 import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -1886,6 +1886,7 @@ function Select({
 }) {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
+  const [openAbove, setOpenAbove] = useState(false);
   const containerRef = useRef(null);
   useEffect(() => {
     function onOutsideClick(e) {
@@ -1897,6 +1898,21 @@ function Select({
     document.addEventListener("mousedown", onOutsideClick);
     return () => document.removeEventListener("mousedown", onOutsideClick);
   }, []);
+  const computeOpenAbove = useCallback(() => {
+    if (!containerRef.current) return false;
+    const rect = containerRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const panelHeight = 280;
+    return spaceBelow < panelHeight && rect.top > spaceBelow;
+  }, []);
+  const toggleOpen = useCallback(() => {
+    setOpen((prev) => {
+      if (!prev) {
+        setOpenAbove(computeOpenAbove());
+      }
+      return !prev;
+    });
+  }, [computeOpenAbove]);
   const selectedOption = options.find((o) => o.value === value);
   const filtered = isSearchable ? options.filter(
     (o) => o.label.toLowerCase().includes(search.toLowerCase())
@@ -1916,7 +1932,7 @@ function Select({
           {
             type: "button",
             disabled: isDisabled,
-            onClick: () => !isDisabled && setOpen((v) => !v),
+            onClick: () => !isDisabled && toggleOpen(),
             className: cn(
               "flex w-full items-center rounded-lg border transition-all",
               "bg-[var(--surface-container-lowest)] border-[var(--outline)]",
@@ -1952,7 +1968,8 @@ function Select({
           "div",
           {
             className: cn(
-              "absolute left-0 top-full z-50 mt-1 w-full overflow-hidden rounded-lg",
+              "absolute left-0 z-50 w-full overflow-hidden rounded-lg",
+              openAbove ? "bottom-full mb-1" : "top-full mt-1",
               "bg-[var(--surface-container-lowest)]",
               "shadow-[0px_4px_6px_-2px_rgba(10,13,18,0.05),0px_12px_16px_-4px_rgba(10,13,18,0.10)]",
               "outline outline-1 outline-offset-[-1px] outline-[var(--outline)]"
@@ -3360,7 +3377,7 @@ function TooltipTrigger({
 import {
   useEffect as useEffect2,
   useRef as useRef3,
-  useCallback,
+  useCallback as useCallback2,
   useId as useId4,
   useSyncExternalStore
 } from "react";
@@ -3562,7 +3579,7 @@ function Modal({
   const titleId = useId4();
   const descId = useId4();
   const panelRef = useRef3(null);
-  const handleKeyDown = useCallback(
+  const handleKeyDown = useCallback2(
     (e) => {
       if (e.key === "Escape") onClose == null ? void 0 : onClose();
     },
@@ -6303,7 +6320,7 @@ function Alert({
 // ../../app/ui-kit/pixelplay-ui/shared/ui/toast/Toast.tsx
 import {
   createContext,
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   useContext,
   useEffect as useEffect4,
   useState as useState6
@@ -6386,7 +6403,7 @@ function ToastProvider({ children }) {
   const [toasts, setToasts] = useState6([]);
   const [mounted, setMounted] = useState6(false);
   useEffect4(() => setMounted(true), []);
-  const removeToast = useCallback2((id) => {
+  const removeToast = useCallback3((id) => {
     setToasts(
       (prev) => prev.map((t) => t.id === id ? __spreadProps(__spreadValues({}, t), { visible: false }) : t)
     );
@@ -6394,7 +6411,7 @@ function ToastProvider({ children }) {
       setToasts((prev) => prev.filter((t) => t.id !== id));
     }, 300);
   }, []);
-  const addToast = useCallback2(
+  const addToast = useCallback3(
     (toast) => {
       var _a;
       const id = String(++_idCounter);
@@ -6437,7 +6454,7 @@ function ToastProvider({ children }) {
 }
 
 // ../../app/ui-kit/pixelplay-ui/shared/ui/date-picker/DatePicker.tsx
-import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
 import { Calendar, ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "react-feather";
 import { jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
 var MONTHS = [
@@ -6785,7 +6802,7 @@ function DatePicker({
   const [pending, setPending] = useState7(current != null ? current : null);
   const [open, setOpen] = useState7(false);
   const wrapRef = useRef5(null);
-  const handleClose = useCallback3(() => setOpen(false), []);
+  const handleClose = useCallback4(() => setOpen(false), []);
   useClickOutside(wrapRef, handleClose, open && !inline);
   useEffect5(() => {
     if (controlled) {
@@ -6895,7 +6912,7 @@ function DateTimePicker({
   const slots = timeSlots != null ? timeSlots : DEFAULT_SLOTS;
   const wrapRef = useRef5(null);
   const slotListRef = useRef5(null);
-  const handleClose = useCallback3(() => setOpen(false), []);
+  const handleClose = useCallback4(() => setOpen(false), []);
   useClickOutside(wrapRef, handleClose, open && !inline);
   useEffect5(() => {
     if (controlled) {
@@ -7058,7 +7075,7 @@ function DateRangePicker({
   const [activePreset, setActivePreset] = useState7(null);
   const [open, setOpen] = useState7(false);
   const wrapRef = useRef5(null);
-  const handleClose = useCallback3(() => setOpen(false), []);
+  const handleClose = useCallback4(() => setOpen(false), []);
   useClickOutside(wrapRef, handleClose, open && !inline);
   useEffect5(() => {
     if (controlled) {
@@ -7191,7 +7208,7 @@ function DateRangePicker({
 }
 
 // ../../app/ui-kit/pixelplay-ui/shared/ui/calendar/Calendar.tsx
-import React23, { useState as useState8, useCallback as useCallback4, useMemo } from "react";
+import React23, { useState as useState8, useCallback as useCallback5, useMemo, useRef as useRef6 } from "react";
 import {
   Plus,
   ChevronLeft as ChevronLeft4,
@@ -7297,63 +7314,63 @@ function getHourLabels() {
 var HOUR_LABELS = getHourLabels();
 var colorMap3 = {
   neutral: {
-    chip: "bg-[var(--utility-neutral-50,#f9fafb)] ring-[var(--utility-neutral-200,#e5e7eb)] hover:bg-[var(--utility-neutral-100,#f3f4f6)]",
-    dot: "bg-[var(--utility-neutral-500,#6b7280)]",
-    text: "text-[var(--utility-neutral-700,#374151)]",
-    time: "text-[var(--utility-neutral-600,#4b5563)]"
+    chip: "bg-[var(--surface-container-low)] ring-[var(--outline-variant)] hover:bg-[var(--surface-container)]",
+    dot: "bg-[var(--on-surface-variant)]",
+    text: "text-[var(--on-surface)]",
+    time: "text-[var(--on-surface-variant)]"
   },
   blue: {
-    chip: "bg-[var(--utility-blue-50,#eff6ff)] ring-[var(--utility-blue-200,#bfdbfe)] hover:bg-[var(--utility-blue-100,#dbeafe)]",
-    dot: "bg-[var(--utility-blue-500,#3b82f6)]",
-    text: "text-[var(--utility-blue-700,#1d4ed8)]",
-    time: "text-[var(--utility-blue-600,#2563eb)]"
+    chip: "bg-[var(--graphic-1-container)] ring-[var(--graphic-1)] hover:bg-[var(--graphic-1-container)]",
+    dot: "bg-[var(--graphic-1)]",
+    text: "text-[var(--on-graphic-1-container)]",
+    time: "text-[var(--on-graphic-1-container)]"
   },
   green: {
-    chip: "bg-[var(--utility-green-50,#f0fdf4)] ring-[var(--utility-green-200,#bbf7d0)] hover:bg-[var(--utility-green-100,#dcfce7)]",
-    dot: "bg-[var(--utility-green-500,#22c55e)]",
-    text: "text-[var(--utility-green-700,#15803d)]",
-    time: "text-[var(--utility-green-600,#16a34a)]"
+    chip: "bg-[var(--graphic-2-container)] ring-[var(--graphic-2)] hover:bg-[var(--graphic-2-container)]",
+    dot: "bg-[var(--graphic-2)]",
+    text: "text-[var(--on-graphic-2-container)]",
+    time: "text-[var(--on-graphic-2-container)]"
   },
   purple: {
-    chip: "bg-[var(--utility-purple-50,#faf5ff)] ring-[var(--utility-purple-200,#e9d5ff)] hover:bg-[var(--utility-purple-100,#f3e8ff)]",
-    dot: "bg-[var(--utility-purple-500,#a855f7)]",
-    text: "text-[var(--utility-purple-700,#7e22ce)]",
-    time: "text-[var(--utility-purple-600,#9333ea)]"
+    chip: "bg-[var(--graphic-3-container)] ring-[var(--graphic-3)] hover:bg-[var(--graphic-3-container)]",
+    dot: "bg-[var(--graphic-3)]",
+    text: "text-[var(--on-graphic-3-container)]",
+    time: "text-[var(--on-graphic-3-container)]"
   },
   orange: {
-    chip: "bg-[var(--utility-orange-50,#fff7ed)] ring-[var(--utility-orange-200,#fed7aa)] hover:bg-[var(--utility-orange-100,#ffedd5)]",
-    dot: "bg-[var(--utility-orange-500,#f97316)]",
-    text: "text-[var(--utility-orange-700,#c2410c)]",
-    time: "text-[var(--utility-orange-600,#ea580c)]"
+    chip: "bg-[var(--graphic-4-container)] ring-[var(--graphic-4)] hover:bg-[var(--graphic-4-container)]",
+    dot: "bg-[var(--graphic-4)]",
+    text: "text-[var(--on-graphic-4-container)]",
+    time: "text-[var(--on-graphic-4-container)]"
   },
   pink: {
-    chip: "bg-[var(--utility-pink-50,#fdf2f8)] ring-[var(--utility-pink-200,#fbcfe8)] hover:bg-[var(--utility-pink-100,#fce7f3)]",
-    dot: "bg-[var(--utility-pink-500,#ec4899)]",
-    text: "text-[var(--utility-pink-700,#be185d)]",
-    time: "text-[var(--utility-pink-600,#db2777)]"
+    chip: "bg-[var(--graphic-5-container)] ring-[var(--graphic-5)] hover:bg-[var(--graphic-5-container)]",
+    dot: "bg-[var(--graphic-5)]",
+    text: "text-[var(--on-graphic-5-container)]",
+    time: "text-[var(--on-graphic-5-container)]"
   },
   red: {
-    chip: "bg-[var(--utility-red-50,#fef2f2)] ring-[var(--utility-red-200,#fecaca)] hover:bg-[var(--utility-red-100,#fee2e2)]",
-    dot: "bg-[var(--utility-red-500,#ef4444)]",
-    text: "text-[var(--utility-red-700,#b91c1c)]",
-    time: "text-[var(--utility-red-600,#dc2626)]"
+    chip: "bg-[var(--graphic-6-container)] ring-[var(--graphic-6)] hover:bg-[var(--graphic-6-container)]",
+    dot: "bg-[var(--graphic-6)]",
+    text: "text-[var(--on-graphic-6-container)]",
+    time: "text-[var(--on-graphic-6-container)]"
   },
   yellow: {
-    chip: "bg-[var(--utility-yellow-50,#fefce8)] ring-[var(--utility-yellow-200,#fef08a)] hover:bg-[var(--utility-yellow-100,#fef9c3)]",
-    dot: "bg-[var(--utility-yellow-500,#eab308)]",
-    text: "text-[var(--utility-yellow-700,#a16207)]",
-    time: "text-[var(--utility-yellow-600,#ca8a04)]"
+    chip: "bg-[var(--graphic-7-container)] ring-[var(--graphic-7)] hover:bg-[var(--graphic-7-container)]",
+    dot: "bg-[var(--graphic-7)]",
+    text: "text-[var(--on-graphic-7-container)]",
+    time: "text-[var(--on-graphic-7-container)]"
   }
 };
 var cardColorMap = {
-  neutral: "bg-[var(--utility-neutral-50,#f9fafb)] ring-[var(--utility-neutral-200,#e5e7eb)] text-[var(--utility-neutral-700,#374151)]",
-  blue: "bg-[var(--utility-blue-50,#eff6ff)] ring-[var(--utility-blue-200,#bfdbfe)] text-[var(--utility-blue-700,#1d4ed8)]",
-  green: "bg-[var(--utility-green-50,#f0fdf4)] ring-[var(--utility-green-200,#bbf7d0)] text-[var(--utility-green-700,#15803d)]",
-  purple: "bg-[var(--utility-purple-50,#faf5ff)] ring-[var(--utility-purple-200,#e9d5ff)] text-[var(--utility-purple-700,#7e22ce)]",
-  orange: "bg-[var(--utility-orange-50,#fff7ed)] ring-[var(--utility-orange-200,#fed7aa)] text-[var(--utility-orange-700,#c2410c)]",
-  pink: "bg-[var(--utility-pink-50,#fdf2f8)] ring-[var(--utility-pink-200,#fbcfe8)] text-[var(--utility-pink-700,#be185d)]",
-  red: "bg-[var(--utility-red-50,#fef2f2)] ring-[var(--utility-red-200,#fecaca)] text-[var(--utility-red-700,#b91c1c)]",
-  yellow: "bg-[var(--utility-yellow-50,#fefce8)] ring-[var(--utility-yellow-200,#fef08a)] text-[var(--utility-yellow-700,#a16207)]"
+  neutral: "bg-[var(--surface-container-low)] ring-[var(--outline-variant)] text-[var(--on-surface)]",
+  blue: "bg-[var(--graphic-1-container)] ring-[var(--graphic-1)] text-[var(--on-graphic-1-container)]",
+  green: "bg-[var(--graphic-2-container)] ring-[var(--graphic-2)] text-[var(--on-graphic-2-container)]",
+  purple: "bg-[var(--graphic-3-container)] ring-[var(--graphic-3)] text-[var(--on-graphic-3-container)]",
+  orange: "bg-[var(--graphic-4-container)] ring-[var(--graphic-4)] text-[var(--on-graphic-4-container)]",
+  pink: "bg-[var(--graphic-5-container)] ring-[var(--graphic-5)] text-[var(--on-graphic-5-container)]",
+  red: "bg-[var(--graphic-6-container)] ring-[var(--graphic-6)] text-[var(--on-graphic-6-container)]",
+  yellow: "bg-[var(--graphic-7-container)] ring-[var(--graphic-7)] text-[var(--on-graphic-7-container)]"
 };
 function EventChip({
   event,
@@ -7423,7 +7440,7 @@ function MonthView({
   onEventClick
 }) {
   const cells = useMemo(() => getMonthCells(year, month), [year, month]);
-  const eventsForDay = useCallback4(
+  const eventsForDay = useCallback5(
     (date) => events.filter((e) => isSameDay2(e.date, date)).sort((a, b) => {
       return timeToMinutes(a.startTime) - timeToMinutes(b.startTime);
     }),
@@ -7588,7 +7605,7 @@ function WeekView({
     () => days.findIndex((d) => isToday2(d)),
     [days]
   );
-  const eventsForDay = useCallback4(
+  const eventsForDay = useCallback5(
     (date) => events.filter((e) => isSameDay2(e.date, date)).sort(
       (a, b) => timeToMinutes(a.startTime) - timeToMinutes(b.startTime)
     ),
@@ -7681,11 +7698,13 @@ function WeekView({
             const top = startMins / 60 * CELL_HEIGHT;
             const height = durationMins / 60 * CELL_HEIGHT;
             const c = cardColorMap[(_a = ev.color) != null ? _a : "neutral"];
-            return /* @__PURE__ */ jsxs38(
+            const isCompact = durationMins <= 30;
+            return /* @__PURE__ */ jsx42(
               "div",
               {
                 className: cn(
-                  "absolute pointer-events-auto z-10 rounded-md px-2 py-1 ring-1 ring-inset cursor-pointer overflow-hidden",
+                  "absolute pointer-events-auto z-10 rounded-md ring-1 ring-inset cursor-pointer overflow-hidden",
+                  isCompact ? "px-2 py-0.5" : "px-2 py-1",
                   c
                 ),
                 style: {
@@ -7698,13 +7717,19 @@ function WeekView({
                   e.stopPropagation();
                   onEventClick == null ? void 0 : onEventClick(ev);
                 },
-                children: [
+                children: isCompact ? /* @__PURE__ */ jsxs38("p", { className: "text-xs font-semibold truncate leading-tight", children: [
+                  ev.title,
+                  /* @__PURE__ */ jsxs38("span", { className: "font-normal opacity-75", children: [
+                    " \xB7 ",
+                    formatTime12(ev.startTime)
+                  ] })
+                ] }) : /* @__PURE__ */ jsxs38(Fragment6, { children: [
                   /* @__PURE__ */ jsx42("p", { className: "text-xs font-semibold truncate", children: ev.title }),
                   /* @__PURE__ */ jsxs38("p", { className: "text-xs opacity-75", children: [
                     formatTime12(ev.startTime),
                     ev.endTime && ` \u2013 ${formatTime12(ev.endTime)}`
                   ] })
-                ]
+                ] })
               },
               ev.id
             );
@@ -7811,7 +7836,7 @@ function DayView({
     const now = /* @__PURE__ */ new Date();
     return now.getHours() * 60 + now.getMinutes();
   }, [date]);
-  const hasEvents = useCallback4(
+  const hasEvents = useCallback5(
     (d) => events.some((e) => isSameDay2(e.date, d)),
     [events]
   );
@@ -8052,41 +8077,60 @@ function ViewDropdown({
   onViewChange
 }) {
   const [open, setOpen] = useState8(false);
+  const [dropdownStyle, setDropdownStyle] = useState8({});
+  const wrapperRef = useRef6(null);
   const labels = {
     month: "Month view",
     week: "Week view",
     day: "Day view"
   };
-  return /* @__PURE__ */ jsxs38("div", { className: "relative", children: [
+  const handleToggle = () => {
+    if (!open && wrapperRef.current) {
+      const rect = wrapperRef.current.getBoundingClientRect();
+      setDropdownStyle({
+        top: rect.bottom + 4,
+        right: window.innerWidth - rect.right
+      });
+    }
+    setOpen((o) => !o);
+  };
+  return /* @__PURE__ */ jsxs38("div", { className: "relative", ref: wrapperRef, children: [
     /* @__PURE__ */ jsx42(
       Button,
       {
         variant: "bordered",
         size: "sm",
         endContent: /* @__PURE__ */ jsx42(ChevronDown2, { size: 14 }),
-        onClick: () => setOpen((o) => !o),
+        onClick: handleToggle,
         "aria-haspopup": "true",
         "aria-expanded": open,
         children: labels[view]
       }
     ),
     open && /* @__PURE__ */ jsxs38(Fragment6, { children: [
-      /* @__PURE__ */ jsx42("div", { className: "fixed inset-0 z-20", onClick: () => setOpen(false) }),
-      /* @__PURE__ */ jsx42("div", { className: "absolute right-0 top-full z-30 mt-1 w-40 overflow-hidden rounded-lg border border-[var(--outline-variant)] bg-[var(--surface)] shadow-lg", children: ["month", "week", "day"].map((v) => /* @__PURE__ */ jsx42(
-        "button",
+      /* @__PURE__ */ jsx42("div", { className: "fixed inset-0 z-40", onClick: () => setOpen(false) }),
+      /* @__PURE__ */ jsx42(
+        "div",
         {
-          className: cn(
-            "flex w-full items-center px-3 py-2 text-sm font-medium transition-colors",
-            v === view ? "bg-[var(--surface-container-low,var(--surface-dim))] text-[var(--on-surface)]" : "text-[var(--on-surface-variant)] hover:bg-[var(--surface-container-low,var(--surface-dim))] hover:text-[var(--on-surface)]"
-          ),
-          onClick: () => {
-            onViewChange(v);
-            setOpen(false);
-          },
-          children: labels[v]
-        },
-        v
-      )) })
+          className: "fixed z-50 w-40 overflow-hidden rounded-lg border border-[var(--outline-variant)] bg-[var(--surface)] shadow-lg",
+          style: dropdownStyle,
+          children: ["month", "week", "day"].map((v) => /* @__PURE__ */ jsx42(
+            "button",
+            {
+              className: cn(
+                "flex w-full items-center px-3 py-2 text-sm font-medium transition-colors",
+                v === view ? "bg-[var(--surface-container-low,var(--surface-dim))] text-[var(--on-surface)]" : "text-[var(--on-surface-variant)] hover:bg-[var(--surface-container-low,var(--surface-dim))] hover:text-[var(--on-surface)]"
+              ),
+              onClick: () => {
+                onViewChange(v);
+                setOpen(false);
+              },
+              children: labels[v]
+            },
+            v
+          ))
+        }
+      )
     ] })
   ] });
 }
@@ -8210,35 +8254,35 @@ function Calendar2({
   const view = controlledView != null ? controlledView : internalView;
   const [internalDate, setInternalDate] = useState8(defaultDate != null ? defaultDate : today);
   const date = controlledDate != null ? controlledDate : internalDate;
-  const handleViewChange = useCallback4(
+  const handleViewChange = useCallback5(
     (v) => {
       setInternalView(v);
       onViewChange == null ? void 0 : onViewChange(v);
     },
     [onViewChange]
   );
-  const handleDateChange = useCallback4(
+  const handleDateChange = useCallback5(
     (d) => {
       setInternalDate(d);
       onDateChange == null ? void 0 : onDateChange(d);
     },
     [onDateChange]
   );
-  const handlePrev = useCallback4(() => {
+  const handlePrev = useCallback5(() => {
     const d = new Date(date);
     if (view === "month") d.setMonth(d.getMonth() - 1);
     else if (view === "week") d.setDate(d.getDate() - 7);
     else d.setDate(d.getDate() - 1);
     handleDateChange(d);
   }, [date, view, handleDateChange]);
-  const handleNext = useCallback4(() => {
+  const handleNext = useCallback5(() => {
     const d = new Date(date);
     if (view === "month") d.setMonth(d.getMonth() + 1);
     else if (view === "week") d.setDate(d.getDate() + 7);
     else d.setDate(d.getDate() + 1);
     handleDateChange(d);
   }, [date, view, handleDateChange]);
-  const handleToday = useCallback4(() => {
+  const handleToday = useCallback5(() => {
     handleDateChange(/* @__PURE__ */ new Date());
   }, [handleDateChange]);
   return /* @__PURE__ */ jsxs38(
@@ -8382,7 +8426,7 @@ function FileTypeIcon({ name, variant = "outline" }) {
 }
 
 // ../../app/ui-kit/pixelplay-ui/shared/ui/file-upload/FileUpload.tsx
-import { useId as useId7, useRef as useRef6, useState as useState9 } from "react";
+import { useId as useId7, useRef as useRef7, useState as useState9 } from "react";
 import { UploadCloud, X as X4, CheckCircle as CheckCircle3, XCircle, RotateCcw } from "react-feather";
 import { jsx as jsx44, jsxs as jsxs40 } from "react/jsx-runtime";
 function FileRow({
@@ -8662,9 +8706,9 @@ function FileUpload({
   className
 }) {
   const inputId = useId7();
-  const containerRef = useRef6(null);
+  const containerRef = useRef7(null);
   const [isDragging, setIsDragging] = useState9(false);
-  const dragCounter = useRef6(0);
+  const dragCounter = useRef7(0);
   function handleDragEnter(e) {
     e.preventDefault();
     dragCounter.current++;