pixelplay 1.0.15 → 1.1.3

package/dist/index.js

@@ -956,10 +956,10 @@ var SIZE_MAP = {
     checkbox: "h-3.5 w-3.5"
   },
   lg: {
-    outer: "gap-2 rounded-md px-3 py-1.5",
-    text: "text-sm font-medium leading-5",
+    outer: "gap-2 rounded-lg px-3.5 py-1.5",
+    text: "text-base font-medium leading-6",
     iconWrapper: "h-5 w-5",
-    dot: "h-2 w-2",
+    dot: "h-2.5 w-2.5",
     dismissSize: 14,
     checkbox: "h-4 w-4"
   }
@@ -1051,7 +1051,7 @@ var Card = import_react5.default.forwardRef(
       className,
       isPressable = false,
       isBlurred = false,
-      shadow = "md",
+      shadow = "xs",
       radius = "lg",
       fullWidth = false,
       onClick
@@ -1989,6 +1989,7 @@ function Select({
 }) {
   const [open, setOpen] = (0, import_react12.useState)(false);
   const [search, setSearch] = (0, import_react12.useState)("");
+  const [openAbove, setOpenAbove] = (0, import_react12.useState)(false);
   const containerRef = (0, import_react12.useRef)(null);
   (0, import_react12.useEffect)(() => {
     function onOutsideClick(e) {
@@ -2000,6 +2001,21 @@ function Select({
     document.addEventListener("mousedown", onOutsideClick);
     return () => document.removeEventListener("mousedown", onOutsideClick);
   }, []);
+  const computeOpenAbove = (0, import_react12.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 = (0, import_react12.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())
@@ -2019,7 +2035,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)]",
@@ -2055,7 +2071,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)]"
@@ -2171,6 +2188,7 @@ function Toggle({
         !isChecked && !isDisabled && "hover:bg-[var(--surface-container-high)]",
         "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--primary-container)]",
         isDisabled ? "cursor-not-allowed" : "cursor-pointer",
+        size === "sm" ? "before:content-[''] before:absolute before:-inset-[10px]" : "before:content-[''] before:absolute before:-inset-3",
         !label && !description && className
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -2346,7 +2364,10 @@ function Checkbox({
         onChange: handleChange,
         disabled: isDisabled,
         "aria-checked": indeterminate ? "mixed" : isChecked,
-        className: "peer absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+        className: cn(
+          "peer absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 cursor-pointer opacity-0 disabled:cursor-not-allowed",
+          size === "sm" ? "min-h-10 min-w-10" : "min-h-12 min-w-12"
+        )
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -7332,63 +7353,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,
@@ -7716,11 +7737,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__ */ (0, import_jsx_runtime42.jsxs)(
+            const isCompact = durationMins <= 30;
+            return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               "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: {
@@ -7733,13 +7756,19 @@ function WeekView({
                   e.stopPropagation();
                   onEventClick == null ? void 0 : onEventClick(ev);
                 },
-                children: [
+                children: isCompact ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("p", { className: "text-xs font-semibold truncate leading-tight", children: [
+                  ev.title,
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "font-normal opacity-75", children: [
+                    " \xB7 ",
+                    formatTime12(ev.startTime)
+                  ] })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
                   /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-xs font-semibold truncate", children: ev.title }),
                   /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("p", { className: "text-xs opacity-75", children: [
                     formatTime12(ev.startTime),
                     ev.endTime && ` \u2013 ${formatTime12(ev.endTime)}`
                   ] })
-                ]
+                ] })
               },
               ev.id
             );
@@ -8087,41 +8116,60 @@ function ViewDropdown({
   onViewChange
 }) {
   const [open, setOpen] = (0, import_react31.useState)(false);
+  const [dropdownStyle, setDropdownStyle] = (0, import_react31.useState)({});
+  const wrapperRef = (0, import_react31.useRef)(null);
   const labels = {
     month: "Month view",
     week: "Week view",
     day: "Day view"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("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__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative", ref: wrapperRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       Button,
       {
         variant: "bordered",
         size: "sm",
         endContent: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_feather14.ChevronDown, { size: 14 }),
-        onClick: () => setOpen((o) => !o),
+        onClick: handleToggle,
         "aria-haspopup": "true",
         "aria-expanded": open,
         children: labels[view]
       }
     ),
     open && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "fixed inset-0 z-20", onClick: () => setOpen(false) }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("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__ */ (0, import_jsx_runtime42.jsx)(
-        "button",
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "fixed inset-0 z-40", onClick: () => setOpen(false) }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "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__ */ (0, import_jsx_runtime42.jsx)(
+            "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
+          ))
+        }
+      )
     ] })
   ] });
 }