aporia 0.2.0 → 0.2.5

package/dist/index.js

@@ -2,9 +2,9 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs } from "react/jsx-runtime";
-import t, { useContext, createContext, useId, useState, useCallback, useEffect, useRef, useLayoutEffect, useMemo } from "react";
-import { useMotionValue, useSpring, useTransform, motion } from "motion/react";
-import { Popover } from "@base-ui/react";
+import t, { useContext, createContext, useId, useState, useCallback, useRef, useLayoutEffect, useEffect, useMemo } from "react";
+import { motion, useMotionValue, useSpring, useTransform } from "motion/react";
+import { Popover, Select } from "@base-ui/react";
 function Panel({ children, className, ...rest }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -25,6 +25,12 @@ function CategoryDisabledProvider({
 function useCategoryDisabled() {
   return useContext(CategoryDisabledContext);
 }
+const categoryBodyTransition = {
+  type: "spring",
+  stiffness: 1e3,
+  damping: 44,
+  mass: 0.28
+};
 function Category({
   title,
   children,
@@ -47,11 +53,26 @@ function Category({
     },
     [collapsedProp, onCollapsedChange]
   );
+  const innerRef = useRef(null);
+  const [bodyHeightPx, setBodyHeightPx] = useState(0);
+  useLayoutEffect(() => {
+    const inner = innerRef.current;
+    if (!inner) return;
+    const measure = () => {
+      setBodyHeightPx(inner.scrollHeight);
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(inner);
+    return () => ro.disconnect();
+  }, []);
+  const openBodyHeight = Math.max(bodyHeightPx, 1);
   return /* @__PURE__ */ jsxs(
     "section",
     {
       className: ["category", className].filter(Boolean).join(" "),
       "data-disabled": disabled ? "true" : "false",
+      "data-collapsed": collapsed ? "true" : "false",
       children: [
         /* @__PURE__ */ jsxs("div", { className: "categoryHeader", children: [
           /* @__PURE__ */ jsxs("div", { className: "categoryHeaderStart", children: [
@@ -88,7 +109,14 @@ function Category({
                 )
               }
             ) }),
-            /* @__PURE__ */ jsx("h2", { className: "categoryTitle", id: `${bodyId}-label`, children: title })
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: "categoryTitle",
+                id: `${bodyId}-label`,
+                children: title
+              }
+            )
           ] }),
           onDisabledChange ? /* @__PURE__ */ jsx(
             "button",
@@ -105,15 +133,40 @@ function Category({
           ) : null
         ] }),
         /* @__PURE__ */ jsx(CategoryDisabledProvider, { value: disabled, children: /* @__PURE__ */ jsx(
-          "div",
+          motion.div,
           {
             id: bodyId,
-            className: "categoryBody sliderGroup",
+            className: "categoryBody",
             role: "region",
             "aria-labelledby": `${bodyId}-label`,
-            hidden: collapsed,
             "aria-hidden": collapsed,
-            children
+            initial: false,
+            animate: {
+              height: collapsed ? 0 : openBodyHeight,
+              marginTop: collapsed ? -8 : 0,
+              opacity: collapsed ? 0 : 1
+            },
+            transition: {
+              height: categoryBodyTransition,
+              marginTop: categoryBodyTransition,
+              // Fade out quickly while collapsing so controls don’t peek; gentler fade-in on expand.
+              opacity: collapsed ? { duration: 0.09, ease: "easeIn" } : { duration: 0.15, ease: "easeOut" }
+            },
+            style: {
+              /* visible so SliderRow edge stretch (width/margin motion) isn’t clipped; collapse hides via height + opacity + inert */
+              overflow: "visible",
+              minHeight: 0,
+              boxSizing: "border-box"
+            },
+            inert: collapsed,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: innerRef,
+                className: "categoryBodyInner sliderGroup",
+                children
+              }
+            )
           }
         ) })
       ]
@@ -451,9 +504,6 @@ function useSliderOverlapDebugEnabled() {
 const ThemeContext = createContext(null);
 function ThemeProvider({ children }) {
   const theme = "dark";
-  useEffect(() => {
-    document.documentElement.dataset.theme = theme;
-  }, [theme]);
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme }, children });
 }
 function useTheme() {
@@ -2101,6 +2151,91 @@ function ToggleRow({ label, checked, onChange, disabled: disabledProp }) {
     }
   ) });
 }
+function SelectRow({
+  label,
+  options,
+  value,
+  onChange,
+  placeholder = "Choose…",
+  disabled: disabledProp,
+  name
+}) {
+  const categoryDisabled = useCategoryDisabled();
+  const disabled = Boolean(disabledProp || categoryDisabled);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const wrapRef = useRef(null);
+  const [anchorWidth, setAnchorWidth] = useState(0);
+  useLayoutEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => {
+      setAnchorWidth(el.offsetWidth);
+    });
+    ro.observe(el);
+    setAnchorWidth(el.offsetWidth);
+    return () => ro.disconnect();
+  }, []);
+  const portalStyle = anchorWidth > 0 ? { "--select-anchor-width": `${anchorWidth}px` } : void 0;
+  const items = useMemo(
+    () => Object.fromEntries(options.map((o) => [o.value, o.label])),
+    [options]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: wrapRef,
+      className: "selectRowWrap",
+      "data-disabled": disabled ? "true" : "false",
+      children: /* @__PURE__ */ jsxs(
+        Select.Root,
+        {
+          name,
+          items,
+          value,
+          onValueChange: (next) => {
+            if (next != null) onChange(next);
+          },
+          onOpenChange: (open) => setMenuOpen(open),
+          disabled,
+          modal: false,
+          children: [
+            /* @__PURE__ */ jsxs(Select.Trigger, { className: "selectCard", "data-menu-open": menuOpen ? "true" : "false", children: [
+              /* @__PURE__ */ jsx("span", { className: "selectLabel", children: label }),
+              /* @__PURE__ */ jsxs("span", { className: "selectValueZone", children: [
+                /* @__PURE__ */ jsx(Select.Value, { placeholder, className: "selectValue" }),
+                /* @__PURE__ */ jsx(Select.Icon, { className: "selectIcon", "aria-hidden": true, children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", className: "selectChevronSvg", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M3 4.5L6 7.5L9 4.5",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                ) }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Select.Portal, { className: "selectPortal", style: portalStyle, children: /* @__PURE__ */ jsx(
+              Select.Positioner,
+              {
+                className: "selectPositioner",
+                style: portalStyle,
+                positionMethod: "fixed",
+                side: "bottom",
+                align: "end",
+                sideOffset: 6,
+                alignItemWithTrigger: false,
+                collisionAvoidance: { side: "flip", align: "shift", fallbackAxisSide: "none" },
+                children: /* @__PURE__ */ jsx(Select.Popup, { className: "selectPopup", children: /* @__PURE__ */ jsx(Select.List, { className: "selectList", children: options.map((opt) => /* @__PURE__ */ jsx(Select.Item, { value: opt.value, className: "selectItem", children: /* @__PURE__ */ jsx(Select.ItemText, { className: "selectItemText", children: opt.label }) }, opt.value)) }) })
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
 function generateAestheticGradient(stopCount) {
   const baseHue = Math.random() * 360;
   const hueShift = 25 + Math.random() * 35;
@@ -2402,6 +2537,7 @@ export {
   GradientPicker,
   GradientRow,
   Panel,
+  SelectRow,
   SliderOverlapDebugProvider,
   SliderRow,
   SwatchPopover,