@geomak/ui 5.5.1 → 5.5.2

package/dist/index.cjs

@@ -10,12 +10,12 @@ var framerMotion = require('framer-motion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var Accordion = require('@radix-ui/react-accordion');
-var ToggleGroup = require('@radix-ui/react-toggle-group');
 var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
 var Popover = require('@radix-ui/react-popover');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
+var ToggleGroup = require('@radix-ui/react-toggle-group');
 var SliderPrimitive = require('@radix-ui/react-slider');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -44,12 +44,12 @@ var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var Accordion__namespace = /*#__PURE__*/_interopNamespace(Accordion);
-var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
 var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
+var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 
 var Moon = ({ color = "gray" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" }) });
@@ -1178,38 +1178,6 @@ function Tree({
     item.key
   )) });
 }
-function ToggleButton({ items, onChange, activeKey }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ToggleGroup__namespace.Root,
-    {
-      type: "single",
-      value: activeKey,
-      onValueChange: (val) => {
-        if (val) onChange(val);
-      },
-      className: "flex items-center",
-      children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        ToggleGroup__namespace.Item,
-        {
-          value: item.key,
-          "aria-label": typeof item.label === "string" ? item.label : item.key,
-          className: [
-            // Semantic tokens handle both light and dark modes via
-            // CSS vars — no `dark:` variants needed.
-            index === 0 && "rounded-l-lg border-r border-border",
-            index === items.length - 1 && "rounded-r-lg border-l border-border",
-            "p-2 cursor-pointer transition-colors duration-150 text-foreground-secondary",
-            "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-            "bg-surface hover:bg-surface-raised",
-            "data-[state=on]:bg-accent data-[state=on]:text-accent-fg"
-          ].filter(Boolean).join(" "),
-          children: item.icon ?? item.label
-        },
-        item.key
-      ))
-    }
-  );
-}
 var NotificationContext = React8.createContext({
   open: () => void 0,
   close: () => void 0
@@ -1611,6 +1579,10 @@ var TOGGLE_POSITION_CLASS = {
 function ScalableContainer({
   width = "100%",
   height = "auto",
+  expandedWidth = "100%",
+  expandedHeight = "100%",
+  expanded,
+  onExpandedChange,
   children,
   assignClassOnClick,
   expandIcon,
@@ -1618,27 +1590,32 @@ function ScalableContainer({
   togglePosition = "top-right"
 }) {
   const containerRef = React8.useRef(null);
-  const [isScaled, setScaled] = React8.useState(false);
+  const [internalScaled, setInternalScaled] = React8.useState(false);
+  const isScaled = expanded ?? internalScaled;
   const reduced = framerMotion.useReducedMotion();
   const onToggle = () => {
     const next = !isScaled;
-    setScaled(next);
-    requestAnimationFrame(() => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }));
+    if (expanded === void 0) setInternalScaled(next);
+    onExpandedChange?.(next);
+    if (next) {
+      window.setTimeout(
+        () => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }),
+        reduced ? 0 : 340
+      );
+    }
   };
   const wrapperClass = isScaled ? assignClassOnClick : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     framerMotion.motion.div,
     {
       ref: containerRef,
-      layout: true,
       animate: {
-        width: isScaled ? "100%" : width,
-        height: isScaled ? "100%" : height
+        width: isScaled ? expandedWidth : width,
+        height: isScaled ? expandedHeight : height
       },
       transition: reduced ? { duration: 0 } : {
         width: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
-        height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
-        layout: { duration: 0.32, ease: [0.16, 1, 0.3, 1] }
+        height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] }
       },
       className: [
         "relative rounded-lg overflow-hidden",
@@ -2174,10 +2151,10 @@ var FIELD_SIZE = {
   md: { control: "h-control-md", text: "text-sm", padX: "px-3", gap: "gap-2" },
   lg: { control: "h-control-lg", text: "text-sm", padX: "px-3.5", gap: "gap-2.5" }
 };
-var FOCUS_WITHIN = "focus-within:outline-none focus-within:border-accent focus-within:ring-[3px] focus-within:ring-focus-ring";
-var FOCUS_ELEMENT = "focus:outline-none focus:border-accent focus:ring-[3px] focus:ring-focus-ring data-[state=open]:border-accent data-[state=open]:ring-[3px] data-[state=open]:ring-focus-ring";
-var FOCUS_WITHIN_ERROR = "focus-within:border-status-error focus-within:ring-focus-ring-error";
-var FOCUS_ELEMENT_ERROR = "focus:border-status-error focus:ring-focus-ring-error data-[state=open]:border-status-error data-[state=open]:ring-focus-ring-error";
+var FOCUS_WITHIN = "focus-within:outline-none focus-within:border-accent";
+var FOCUS_ELEMENT = "focus:outline-none focus:border-accent data-[state=open]:border-accent";
+var FOCUS_WITHIN_ERROR = "focus-within:border-status-error";
+var FOCUS_ELEMENT_ERROR = "focus:border-status-error data-[state=open]:border-status-error";
 function fieldShell({
   size = "md",
   hasError = false,
@@ -5749,7 +5726,6 @@ exports.TextInput = TextInput;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitch = ThemeSwitch;
 exports.TimePicker = TimePicker;
-exports.ToggleButton = ToggleButton;
 exports.Tooltip = Tooltip;
 exports.TooltipProvider = TooltipProvider;
 exports.TopBar = TopBar;