@geomak/ui 7.5.1 → 7.5.2

package/dist/index.d.cts

@@ -370,29 +370,32 @@ declare function Typography({ variant, as, color, weight, align, truncate, muted
 
 type IconButtonVariant = 'primary' | 'bordered' | 'ghost';
 interface IconButtonProps {
-    icon?: React.ReactNode;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    icon?: react__default.ReactNode;
+    onClick?: react__default.MouseEventHandler<HTMLButtonElement>;
     /** Visual style. Defaults to `'primary'`. */
     type?: IconButtonVariant;
     buttonType?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
     loading?: boolean;
-    loadingIcon?: React.ReactNode;
+    loadingIcon?: react__default.ReactNode;
     title?: string;
     /** Extra classes appended to the button. */
     className?: string;
     /** Inline style on the button. */
-    style?: React.CSSProperties;
+    style?: react__default.CSSProperties;
 }
 /**
  * Square icon-only button.
  *
+ * Uses `React.forwardRef` so it works as a Radix `asChild` trigger (Popover,
+ * PopConfirm, Tooltip, etc.) — those need a DOM ref to anchor floating content.
+ *
  * @example
  * <IconButton icon={<Icon.Search />} onClick={doSearch} />
  * <IconButton type="bordered" icon={<Icon.Edit />} />
  */
-declare function IconButton({ icon, onClick, type, buttonType, disabled, size, loading, loadingIcon, title, className, style, }: IconButtonProps): react_jsx_runtime.JSX.Element;
+declare const IconButton: react__default.ForwardRefExoticComponent<IconButtonProps & react__default.RefAttributes<HTMLButtonElement>>;
 
 interface ButtonProps extends Omit<react__default.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'content'> {
     /** Button content (text or nodes). */

package/dist/index.d.ts

@@ -370,29 +370,32 @@ declare function Typography({ variant, as, color, weight, align, truncate, muted
 
 type IconButtonVariant = 'primary' | 'bordered' | 'ghost';
 interface IconButtonProps {
-    icon?: React.ReactNode;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    icon?: react__default.ReactNode;
+    onClick?: react__default.MouseEventHandler<HTMLButtonElement>;
     /** Visual style. Defaults to `'primary'`. */
     type?: IconButtonVariant;
     buttonType?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
     loading?: boolean;
-    loadingIcon?: React.ReactNode;
+    loadingIcon?: react__default.ReactNode;
     title?: string;
     /** Extra classes appended to the button. */
     className?: string;
     /** Inline style on the button. */
-    style?: React.CSSProperties;
+    style?: react__default.CSSProperties;
 }
 /**
  * Square icon-only button.
  *
+ * Uses `React.forwardRef` so it works as a Radix `asChild` trigger (Popover,
+ * PopConfirm, Tooltip, etc.) — those need a DOM ref to anchor floating content.
+ *
  * @example
  * <IconButton icon={<Icon.Search />} onClick={doSearch} />
  * <IconButton type="bordered" icon={<Icon.Edit />} />
  */
-declare function IconButton({ icon, onClick, type, buttonType, disabled, size, loading, loadingIcon, title, className, style, }: IconButtonProps): react_jsx_runtime.JSX.Element;
+declare const IconButton: react__default.ForwardRefExoticComponent<IconButtonProps & react__default.RefAttributes<HTMLButtonElement>>;
 
 interface ButtonProps extends Omit<react__default.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'content'> {
     /** Button content (text or nodes). */

package/dist/index.js

@@ -1,9 +1,9 @@
 export { icons_default as Icon, createIcon } from './chunk-KAFJJO5O.js';
 import { colors_default } from './chunk-DXOWXLKK.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-DXOWXLKK.js';
-import React30, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
+import React31, { useMemo, createContext, useState, useEffect, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as DropdownMenu2 from '@radix-ui/react-dropdown-menu';
 import * as Dialog from '@radix-ui/react-dialog';
@@ -452,7 +452,7 @@ function Typography({
     }
   );
 }
-function IconButton({
+var IconButton = React31.forwardRef(function IconButton2({
   icon,
   onClick,
   type = "primary",
@@ -464,7 +464,7 @@ function IconButton({
   title,
   className = "",
   style
-}) {
+}, ref) {
   const colorScheme = useMemo(() => {
     if (type === "primary") {
       return "bg-accent text-accent-fg hover:bg-accent-hover";
@@ -480,6 +480,7 @@ function IconButton({
   return /* @__PURE__ */ jsx(
     "button",
     {
+      ref,
       type: buttonType,
       disabled: disabled || loading,
       onClick,
@@ -490,7 +491,9 @@ function IconButton({
       children: loading ? loadingIcon : icon
     }
   );
-}
+});
+IconButton.displayName = "IconButton";
+var IconButton_default = IconButton;
 var VARIANT_CLASSES = {
   primary: [
     "bg-accent text-accent-fg",
@@ -558,7 +561,7 @@ var SIZE_CLASSES = {
   md: "h-9  px-4   text-sm  gap-1.5 rounded-lg",
   lg: "h-11 px-5   text-sm  gap-2   rounded-xl"
 };
-var Button = React30.forwardRef(function Button2({
+var Button = React31.forwardRef(function Button2({
   content,
   variant = "primary",
   size = "md",
@@ -666,7 +669,7 @@ function MenuButton({
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
         ].join(" "),
-        children: items.map((item) => /* @__PURE__ */ jsxs(React30.Fragment, { children: [
+        children: items.map((item) => /* @__PURE__ */ jsxs(React31.Fragment, { children: [
           item.separatorBefore && /* @__PURE__ */ jsx(DropdownMenu2.Separator, { className: "my-1 h-px bg-border" }),
           /* @__PURE__ */ jsxs(
             DropdownMenu2.Item,
@@ -1754,7 +1757,7 @@ function Kbd({
   style
 }) {
   if (keys && keys.length > 0) {
-    return /* @__PURE__ */ jsx("span", { className: cx("inline-flex items-center gap-1", className), style, children: keys.map((k, i) => /* @__PURE__ */ jsxs(React30.Fragment, { children: [
+    return /* @__PURE__ */ jsx("span", { className: cx("inline-flex items-center gap-1", className), style, children: keys.map((k, i) => /* @__PURE__ */ jsxs(React31.Fragment, { children: [
       i > 0 && /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-xs select-none", children: separator }),
       /* @__PURE__ */ jsx("kbd", { className: [cap, SIZE3[size]].join(" "), children: k })
     ] }, `${k}-${i}`)) });
@@ -1846,7 +1849,7 @@ function FlatCarousel({
   style
 }) {
   const scrollerRef = useRef(null);
-  const slides = React30.Children.toArray(children);
+  const slides = React31.Children.toArray(children);
   const [active, setActive] = useState(0);
   const [atStart, setAtStart] = useState(true);
   const [atEnd, setAtEnd] = useState(false);
@@ -1901,7 +1904,7 @@ function RotatingCarousel({
   className = "",
   style
 }) {
-  const slides = React30.Children.toArray(children);
+  const slides = React31.Children.toArray(children);
   const count = slides.length;
   const [active, setActive] = useState(0);
   const reduced = useReducedMotion();
@@ -2260,7 +2263,7 @@ function Chat({
             }
           ),
           /* @__PURE__ */ jsx(
-            IconButton,
+            IconButton_default,
             {
               type: "primary",
               icon: /* @__PURE__ */ jsx(SendIcon, {}),
@@ -2881,8 +2884,8 @@ function Scheduler({
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(IconButton, { type: "bordered", size: "sm", icon: /* @__PURE__ */ jsx(Chevron4, { dir: "left" }), title: "Previous", onClick: () => go(-1) }),
-            /* @__PURE__ */ jsx(IconButton, { type: "bordered", size: "sm", icon: /* @__PURE__ */ jsx(Chevron4, { dir: "right" }), title: "Next", onClick: () => go(1) }),
+            /* @__PURE__ */ jsx(IconButton_default, { type: "bordered", size: "sm", icon: /* @__PURE__ */ jsx(Chevron4, { dir: "left" }), title: "Previous", onClick: () => go(-1) }),
+            /* @__PURE__ */ jsx(IconButton_default, { type: "bordered", size: "sm", icon: /* @__PURE__ */ jsx(Chevron4, { dir: "right" }), title: "Next", onClick: () => go(1) }),
             /* @__PURE__ */ jsx(Button_default, { variant: "ghost", size: "sm", content: "Today", onClick: goToday }),
             /* @__PURE__ */ jsx(
               MonthYearPicker,
@@ -3006,9 +3009,9 @@ function MonthYearPicker({ label, cursor, onPick }) {
         ].join(" "),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx(IconButton, { size: "sm", type: "bordered", icon: /* @__PURE__ */ jsx(Chevron4, { dir: "left" }), title: "Previous year", onClick: () => setViewYear((y) => y - 1) }),
+            /* @__PURE__ */ jsx(IconButton_default, { size: "sm", type: "bordered", icon: /* @__PURE__ */ jsx(Chevron4, { dir: "left" }), title: "Previous year", onClick: () => setViewYear((y) => y - 1) }),
             /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold tabular-nums text-foreground", children: viewYear }),
-            /* @__PURE__ */ jsx(IconButton, { size: "sm", type: "bordered", icon: /* @__PURE__ */ jsx(Chevron4, { dir: "right" }), title: "Next year", onClick: () => setViewYear((y) => y + 1) })
+            /* @__PURE__ */ jsx(IconButton_default, { size: "sm", type: "bordered", icon: /* @__PURE__ */ jsx(Chevron4, { dir: "right" }), title: "Next year", onClick: () => setViewYear((y) => y + 1) })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1", children: MONTHS_SHORT.map((m, i) => {
             const current = i === cursor.getMonth() && viewYear === cursor.getFullYear();
@@ -3392,7 +3395,7 @@ function CartButton({
   const { getItemCount } = useCart();
   const count = getItemCount();
   return /* @__PURE__ */ jsx(Badge, { count, max, tone: badgeTone, className, children: /* @__PURE__ */ jsx(
-    IconButton,
+    IconButton_default,
     {
       type: variant,
       icon,
@@ -5221,7 +5224,7 @@ function Wizard({
   ] });
 }
 var SearchIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) });
-var SearchInput = React30.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
+var SearchInput = React31.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
   return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5519,7 +5522,7 @@ function TableBody({
   return /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => {
     const rowKey = getRowKey(row, i);
     const isExpanded = expanded.has(rowKey);
-    return /* @__PURE__ */ jsxs(React30.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React31.Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "tr",
         {
@@ -5970,7 +5973,7 @@ function FlyoutItems({ items }) {
 }
 function CollapsedFlyout({ item, trigger }) {
   const [open, setOpen] = useState(false);
-  const closeTimer = React30.useRef(void 0);
+  const closeTimer = React31.useRef(void 0);
   const openNow = () => {
     window.clearTimeout(closeTimer.current);
     setOpen(true);
@@ -5979,7 +5982,7 @@ function CollapsedFlyout({ item, trigger }) {
     window.clearTimeout(closeTimer.current);
     closeTimer.current = window.setTimeout(() => setOpen(false), 150);
   };
-  React30.useEffect(() => () => window.clearTimeout(closeTimer.current), []);
+  React31.useEffect(() => () => window.clearTimeout(closeTimer.current), []);
   return /* @__PURE__ */ jsxs(DropdownMenu2.Root, { open, onOpenChange: setOpen, modal: false, children: [
     /* @__PURE__ */ jsx(
       DropdownMenu2.Trigger,
@@ -6271,8 +6274,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
 function MegaMenuFeatured({ children, className = "" }) {
   return /* @__PURE__ */ jsx("div", { className: cx("min-w-0 rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className), children });
 }
-var elementsOfType = (children, type) => React30.Children.toArray(children).filter(
-  (c) => React30.isValidElement(c) && c.type === type
+var elementsOfType = (children, type) => React31.Children.toArray(children).filter(
+  (c) => React31.isValidElement(c) && c.type === type
 );
 var MOBILE_CHEVRON = /* @__PURE__ */ jsx(
   "svg",
@@ -6309,9 +6312,9 @@ function MobileLinkRow({ link, onNavigate }) {
   );
 }
 function MobilePanel({ panel, onNavigate }) {
-  const nodes = React30.Children.toArray(panel.props.children);
+  const nodes = React31.Children.toArray(panel.props.children);
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
-    if (!React30.isValidElement(node)) return null;
+    if (!React31.isValidElement(node)) return null;
     const el = node;
     if (el.type === MegaMenuSection) {
       const { title, children } = el.props;
@@ -6720,7 +6723,7 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React30.useId().replace(/:/g, "");
+  const id = React31.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
   const divRef = useRef(null);
   useEffect(() => {
@@ -9028,7 +9031,7 @@ function OtpInput({
     emit(valid.join(""));
     focusBox(valid.length);
   };
-  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React30.Fragment, { children: [
+  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React31.Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -10087,7 +10090,7 @@ function Blog({
           post.tag != null && !post.image && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { tone: "accent", variant: "soft", size: "sm", children: post.tag }) }),
           /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold leading-snug text-foreground transition-colors group-hover:text-accent", children: post.title }),
           post.excerpt != null && /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-sm leading-relaxed text-foreground-secondary", children: post.excerpt }),
-          meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-3 text-xs text-foreground-muted", children: meta.map((m, j) => /* @__PURE__ */ jsxs(React30.Fragment, { children: [
+          meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-3 text-xs text-foreground-muted", children: meta.map((m, j) => /* @__PURE__ */ jsxs(React31.Fragment, { children: [
             j > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
             /* @__PURE__ */ jsx("span", { children: m })
           ] }, j)) })
@@ -10260,6 +10263,6 @@ function LeadCapture({
   );
 }
 
-export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Blog, Box, Breadcrumbs, Button_default as Button, CARD_BRANDS, Card_default as Card, CardCarousel, Cart, CartButton, CartProvider, Catalog, CatalogCarousel, CatalogGrid, Chat, Checkbox, Checkout, ColorPicker, ContextMenu, CookieConsent, CreditCardForm, DateRangePicker, Drawer, Dropdown, EmptyCart, FAB, FadingBase, FeatureGrid, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid, GridCard, IconButton, Jumbotron, Kbd, LeadCapture, List2 as List, LoadingSpinner, LogoutTimer, MegaMenu_default as MegaMenu, MenuButton, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Parallax, Password, PasswordStrength, PopConfirm, Portal, PricingPlans, RadioGroup, RadioTile, Rating, ScalableContainer, Scheduler, SearchInput_default as SearchInput, SecureLayout, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, SlideShow, Slider, Socials, Statistic, Stepper, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, Testimonials, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Timeline, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Video, VirtualList, Wizard, cardNumberError, cvvError, cx, defaultPasswordRules, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, scorePassword, useBreakpoint, useCart, useFieldArray, useForm, useFormField, useFormStore, useJwt, useLocalStorage, useMediaQuery, useNotification };
+export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Blog, Box, Breadcrumbs, Button_default as Button, CARD_BRANDS, Card_default as Card, CardCarousel, Cart, CartButton, CartProvider, Catalog, CatalogCarousel, CatalogGrid, Chat, Checkbox, Checkout, ColorPicker, ContextMenu, CookieConsent, CreditCardForm, DateRangePicker, Drawer, Dropdown, EmptyCart, FAB, FadingBase, FeatureGrid, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid, GridCard, IconButton_default as IconButton, Jumbotron, Kbd, LeadCapture, List2 as List, LoadingSpinner, LogoutTimer, MegaMenu_default as MegaMenu, MenuButton, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Parallax, Password, PasswordStrength, PopConfirm, Portal, PricingPlans, RadioGroup, RadioTile, Rating, ScalableContainer, Scheduler, SearchInput_default as SearchInput, SecureLayout, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, SlideShow, Slider, Socials, Statistic, Stepper, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, Testimonials, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Timeline, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Video, VirtualList, Wizard, cardNumberError, cvvError, cx, defaultPasswordRules, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, scorePassword, useBreakpoint, useCart, useFieldArray, useForm, useFormField, useFormStore, useJwt, useLocalStorage, useMediaQuery, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map