@geomak/ui 5.5.1 → 5.5.3

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,
@@ -2388,7 +2365,7 @@ function Dropdown({
                 "aria-invalid": hasError || void 0,
                 "aria-describedby": hasError ? errorId : void 0,
                 style,
-                className: `flex items-center justify-between gap-1 cursor-pointer select-none min-h-[36px] px-3 py-1.5 ${fieldShell({ size, hasError, disabled, sized: false })}`,
+                className: `flex items-center justify-between gap-2 cursor-pointer select-none min-h-[36px] px-3 py-1.5 ${!style?.width ? "min-w-[200px]" : ""} ${fieldShell({ size, hasError, disabled, sized: false })}`,
                 tabIndex: disabled ? -1 : 0,
                 onKeyDown: (e) => {
                   if (disabled) return;
@@ -2398,31 +2375,25 @@ function Dropdown({
                   }
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0 flex flex-wrap items-center gap-1.5", children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? value.map((val) => /* @__PURE__ */ jsxRuntime.jsx(
+                    Tag,
                     {
-                      className: `${!style?.width ? "min-w-[200px]" : ""} flex flex-wrap items-center gap-1.5`,
-                      children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? value.map((val) => /* @__PURE__ */ jsxRuntime.jsx(
-                        Tag,
-                        {
-                          disabled,
-                          removeLabel: `Remove ${labelFor(val)}`,
-                          onRemove: () => removeSelected(val),
-                          children: labelFor(val)
-                        },
-                        String(val)
-                      )) : /* @__PURE__ */ jsxRuntime.jsx(
-                        Tag,
-                        {
-                          disabled,
-                          removeLabel: `Remove ${labelFor(value)}`,
-                          onRemove: () => removeSelected(value),
-                          children: labelFor(value)
-                        }
-                      )
+                      disabled,
+                      removeLabel: `Remove ${labelFor(val)}`,
+                      onRemove: () => removeSelected(val),
+                      children: labelFor(val)
+                    },
+                    String(val)
+                  )) : /* @__PURE__ */ jsxRuntime.jsx(
+                    Tag,
+                    {
+                      disabled,
+                      removeLabel: `Remove ${labelFor(value)}`,
+                      onRemove: () => removeSelected(value),
+                      children: labelFor(value)
                     }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 ml-2 text-foreground-muted transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 text-foreground-muted transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
                 ]
               }
             ) }),
@@ -3680,7 +3651,8 @@ function RadioGroup({
   onChange,
   name,
   label,
-  orientation = "vertical",
+  layout = "vertical",
+  labelPosition = "right",
   size = "md",
   disabled,
   required,
@@ -3689,6 +3661,7 @@ function RadioGroup({
   const errorId = React8.useId();
   const groupId = React8.useId();
   const hasError = errorMessage != null;
+  const labelFirst = labelPosition === "left";
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
@@ -3709,44 +3682,51 @@ function RadioGroup({
           required,
           "aria-invalid": hasError || void 0,
           "aria-describedby": hasError ? errorId : void 0,
-          orientation,
-          className: orientation === "horizontal" ? "flex flex-row flex-wrap gap-5" : "flex flex-col gap-3",
+          orientation: layout,
+          className: layout === "horizontal" ? "flex flex-row flex-wrap gap-5" : "flex flex-col gap-3",
           children: options.map((opt) => {
             const itemId = `${groupId}-${opt.value}`;
-            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                RadioGroupPrimitive__namespace.Item,
-                {
-                  id: itemId,
-                  value: opt.value,
-                  disabled: opt.disabled,
-                  className: [
-                    DOT_SIZE[size],
-                    "mt-0.5 flex-shrink-0 rounded-full border bg-surface transition-colors duration-150",
-                    "border-border-strong",
-                    "hover:border-accent",
-                    "data-[state=checked]:border-accent",
-                    "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
-                    "disabled:cursor-not-allowed disabled:opacity-50"
-                  ].join(" "),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block h-1/2 w-1/2 rounded-full bg-accent" }) })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "label",
-                {
-                  htmlFor: itemId,
-                  className: [
-                    "select-none",
-                    opt.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-                  ].join(" "),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `block ${TEXT_SIZE[size]} text-foreground`, children: opt.label }),
-                    opt.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-foreground-secondary mt-0.5", children: opt.description })
-                  ]
-                }
-              )
-            ] }, opt.value);
+            const dot = /* @__PURE__ */ jsxRuntime.jsx(
+              RadioGroupPrimitive__namespace.Item,
+              {
+                id: itemId,
+                value: opt.value,
+                disabled: opt.disabled,
+                className: [
+                  DOT_SIZE[size],
+                  "mt-0.5 flex-shrink-0 rounded-full border bg-surface transition-colors duration-150",
+                  "border-border-strong",
+                  "hover:border-accent",
+                  "data-[state=checked]:border-accent",
+                  // Border-only focus, consistent with the fields.
+                  "focus:outline-none focus-visible:border-accent",
+                  "disabled:cursor-not-allowed disabled:opacity-50"
+                ].join(" "),
+                children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block h-1/2 w-1/2 rounded-full bg-accent" }) })
+              }
+            );
+            const labelEl = /* @__PURE__ */ jsxRuntime.jsxs(
+              "label",
+              {
+                htmlFor: itemId,
+                className: [
+                  "select-none",
+                  opt.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+                  labelFirst ? "text-right" : ""
+                ].filter(Boolean).join(" "),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `block ${TEXT_SIZE[size]} text-foreground`, children: opt.label }),
+                  opt.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-foreground-secondary mt-0.5", children: opt.description })
+                ]
+              }
+            );
+            return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start gap-2.5", children: labelFirst ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              labelEl,
+              dot
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              dot,
+              labelEl
+            ] }) }, opt.value);
           })
         }
       )
@@ -4477,11 +4457,11 @@ function DatePicker({
   };
   const displayValue = value ? format(value) : "";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-center gap-2"}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1.5" : "flex-row items-start gap-3"}`, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(
         "label",
         {
-          className: "text-sm font-medium ml-1 max-content select-none text-foreground",
+          className: `text-sm font-medium select-none text-foreground ${layout === "horizontal" ? "mt-2 flex-shrink-0 whitespace-nowrap" : ""}`,
           htmlFor,
           children: label
         }
@@ -5137,10 +5117,11 @@ function OtpInput({
         className: [
           BOX_SIZE[size],
           "text-center font-medium rounded-lg border bg-surface text-foreground",
-          "transition-[border-color,box-shadow] duration-150",
+          "transition-[border-color] duration-150",
           hasError ? "border-status-error" : "border-border",
           "hover:border-border-strong",
-          "focus:outline-none focus:border-accent focus:ring-[3px] focus:ring-focus-ring",
+          // Border-only focus, consistent with every field (no clip-prone ring).
+          "focus:outline-none focus:border-accent",
           "disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed"
         ].join(" ")
       }
@@ -5749,7 +5730,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;