@udixio/ui-react 2.9.14 → 2.9.16

package/dist/lib/components/AnchorPositioner.d.ts

@@ -0,0 +1,11 @@
+import { default as React, CSSProperties, RefObject } from 'react';
+export type Position = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export interface AnchorPositionerProps {
+    anchorRef: RefObject<HTMLElement | null>;
+    position?: Position;
+    children: React.ReactNode;
+    style?: CSSProperties;
+    className?: string;
+}
+export declare const AnchorPositioner: ({ anchorRef, position, children, style, }: AnchorPositionerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AnchorPositioner.d.ts.map

package/dist/lib/components/AnchorPositioner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnchorPositioner.d.ts","sourceRoot":"","sources":["../../../src/lib/components/AnchorPositioner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,SAAS,EAIV,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,QAAQ,GAChB,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,GAAI,2CAK9B,qBAAqB,4CAmGvB,CAAC"}

package/dist/lib/components/FabMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FabMenu.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FabMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAShD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,GAAI,+IAerB,UAAU,CAAC,gBAAgB,CAAC,4CAoM9B,CAAC"}
+{"version":3,"file":"FabMenu.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FabMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAShD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,GAAI,+IAerB,UAAU,CAAC,gBAAgB,CAAC,4CAuM9B,CAAC"}

package/dist/lib/components/TextField.d.ts

@@ -1,5 +1,5 @@
 import { ReactProps } from '../utils/component';
-import { TextFieldInterface } from '../interfaces/text-field.interface';
+import { TextFieldInterface } from '../interfaces';
 /**
  * Text fields let users enter text into a UI
  * @status beta
@@ -10,5 +10,5 @@ import { TextFieldInterface } from '../interfaces/text-field.interface';
  * @a11y
  * - `aria-describedby` links supporting text/error to input.
  */
-export declare const TextField: ({ variant, disabled, errorText, placeholder, suffix, name, label, className, supportingText, trailingIcon, leadingIcon, type, multiline, autoComplete, onChange, value: valueProp, defaultValue, showSupportingText, id: idProp, style, ...restProps }: ReactProps<TextFieldInterface>) => import("react/jsx-runtime").JSX.Element;
+export declare const TextField: ({ variant, disabled, errorText, placeholder, suffix, name, label, className, supportingText, trailingIcon, leadingIcon, type, multiline, autoComplete, onChange, value: valueProp, defaultValue, showSupportingText, id: idProp, style, ref, ...restProps }: ReactProps<TextFieldInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextField.d.ts.map

package/dist/lib/components/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TextField.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAExE;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,GAAI,wPAsBvB,UAAU,CAAC,kBAAkB,CAAC,4CA8NhC,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TextField.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,GAAI,6PAuBvB,UAAU,CAAC,kBAAkB,CAAC,4CAwUhC,CAAC"}

package/dist/lib/components/Tooltip.d.ts

@@ -10,5 +10,5 @@ import { ToolTipInterface } from '../interfaces';
  * @a11y
  * - Provides `role="tooltip"` and `aria-describedby` when open.
  */
-export declare const Tooltip: ({ variant, buttons, className, children, title, text, content, position: positionProp, targetRef, ref, trigger, transition, openDelay, closeDelay, isOpen: isOpenProp, defaultOpen, onOpenChange, id, ...props }: MotionProps<ToolTipInterface>) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ variant, buttons, className, children, title, text, content, position: positionProp, targetRef, ref, trigger, transition, openDelay, closeDelay, isOpen: isOpenProp, defaultOpen, onOpenChange, id, anchorRef, ...props }: MotionProps<ToolTipInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/lib/components/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMjD;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,GAAI,kNAoBrB,WAAW,CAAC,gBAAgB,CAAC,4CAiL/B,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKjD;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,GAAI,6NAqBrB,WAAW,CAAC,gBAAgB,CAAC,4CAgL/B,CAAC"}

package/dist/lib/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './AnchorPositioner';
 export * from './Button';
 export * from './Card';
 export * from './Carousel';

package/dist/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}

package/dist/lib/effects/smooth-scroll.effect.d.ts

@@ -33,6 +33,20 @@ export type SmoothScrollProps = {
 /**
  * SmoothScroll component using Lenis for smooth scrolling.
  * This component enables smooth scrolling at the document level.
+ *
+ * @warning **Use with caution.** Overriding native scroll behavior can cause:
+ * - **Accessibility issues**: Screen readers, keyboard navigation, and assistive technologies
+ *   may not work correctly with custom scroll implementations.
+ * - **Anchor links broken**: `scrollIntoView()`, hash navigation (`#section`), and
+ *   `window.scrollTo()` may behave unexpectedly or be ignored.
+ * - **Third-party library conflicts**: Libraries relying on native scroll events
+ *   (infinite scroll, lazy loading, scroll-triggered animations) may malfunction.
+ * - **Browser features disabled**: Find-in-page (Ctrl+F), autoscroll, and native
+ *   momentum scrolling on trackpads may not work as expected.
+ * - **Performance overhead**: The RAF loop runs continuously, which may impact
+ *   battery life and performance on low-end devices.
+ * - **Mobile issues**: Touch gestures, pull-to-refresh, and overscroll behaviors
+ *   can conflict with smooth scroll implementations.
  */
 export declare const SmoothScroll: ({ transition, easing, orientation, smoothTouch, touchMultiplier, children, }: SmoothScrollProps) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=smooth-scroll.effect.d.ts.map

package/dist/lib/effects/smooth-scroll.effect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"smooth-scroll.effect.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/smooth-scroll.effect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,8EAO1B,iBAAiB,mDAmDnB,CAAC"}
+{"version":3,"file":"smooth-scroll.effect.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/smooth-scroll.effect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAGrD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,YAAY,GAAI,8EAO1B,iBAAiB,mDAmDnB,CAAC"}

package/dist/lib/hooks/index.d.ts

@@ -1,5 +1,4 @@
 export { useTooltipTrigger } from './useTooltipTrigger';
 export type { UseTooltipTriggerOptions, UseTooltipTriggerReturn, } from './useTooltipTrigger';
-export { useTooltipPosition } from './useTooltipPosition';
 export type { UseTooltipPositionOptions, UseTooltipPositionReturn, } from './useTooltipPosition';
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EACV,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EACV,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAE7B,YAAY,EACV,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC"}

package/dist/lib/interfaces/text-field.interface.d.ts

@@ -19,7 +19,7 @@ type Props = {
     id?: string;
     style?: React.CSSProperties;
     variant?: TextFieldVariant;
-    type?: 'text' | 'password' | 'number';
+    type?: 'text' | 'password' | 'number' | 'date';
     autoComplete?: 'on' | 'off' | string;
     multiline?: boolean;
 };

package/dist/lib/interfaces/text-field.interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/text-field.interface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAErD,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IAC5E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;IACtC,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE;QACR,WAAW;QACX,SAAS;QACT,OAAO;QACP,OAAO;QACP,iBAAiB;QACjB,gBAAgB;QAChB,aAAa;QACb,cAAc;QACd,QAAQ;QACR,YAAY;KACb,CAAC;CACH"}
+{"version":3,"file":"text-field.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/text-field.interface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAErD,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IAC5E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/C,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE;QACR,WAAW;QACX,SAAS;QACT,OAAO;QACP,OAAO;QACP,iBAAiB;QACjB,gBAAgB;QAChB,aAAa;QACb,cAAc;QACd,QAAQ;QACR,YAAY;KACb,CAAC;CACH"}

package/dist/lib/interfaces/tooltip.interface.d.ts

@@ -28,6 +28,8 @@ export type ToolTipInterface<T extends HTMLElement = any> = {
         onOpenChange?: (open: boolean) => void;
         /** Custom ID for accessibility linking. Auto-generated if not provided. */
         id?: string;
+        /** Custom anchor for positioning. Defaults to the trigger element. */
+        anchorRef?: RefObject<HTMLElement>;
     } & ({
         children?: never;
         targetRef: RefObject<T>;

package/dist/lib/interfaces/tooltip.interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/tooltip.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;AAElD,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,IAAI;IAC1D,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE;QACL,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,2EAA2E;QAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,yEAAyE;QACzE,OAAO,CAAC,EAAE,SAAS,CAAC;QACpB,OAAO,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC;QACtE,QAAQ,CAAC,EACL,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;QACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;QAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,uEAAuE;QACvE,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,sEAAsE;QACtE,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,sEAAsE;QACtE,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,4CAA4C;QAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,2CAA2C;QAC3C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QACvC,2EAA2E;QAC3E,EAAE,CAAC,EAAE,MAAM,CAAC;KACb,GAAG,CACA;QACE,QAAQ,CAAC,EAAE,KAAK,CAAC;QACjB,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;KACzB,GACD;QACE,QAAQ,EAAE,SAAS,CAAC;QACpB,SAAS,CAAC,EAAE,KAAK,CAAC;KACnB,CACJ,CAAC;IACF,QAAQ,EAAE;QACR,SAAS;QACT,WAAW;QACX,SAAS;QACT,gBAAgB;QAChB,SAAS;QACT,SAAS;KACV,CAAC;CACH,CAAC"}
+{"version":3,"file":"tooltip.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/tooltip.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,KAAK,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;AAElD,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,IAAI;IAC1D,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE;QACL,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,2EAA2E;QAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,yEAAyE;QACzE,OAAO,CAAC,EAAE,SAAS,CAAC;QACpB,OAAO,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,GAAG,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC;QACtE,QAAQ,CAAC,EACL,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;QACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;QAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,uEAAuE;QACvE,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,sEAAsE;QACtE,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,sEAAsE;QACtE,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,4CAA4C;QAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,2CAA2C;QAC3C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QACvC,2EAA2E;QAC3E,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,sEAAsE;QACtE,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;KACpC,GAAG,CACA;QACE,QAAQ,CAAC,EAAE,KAAK,CAAC;QACjB,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;KACzB,GACD;QACE,QAAQ,EAAE,SAAS,CAAC;QACpB,SAAS,CAAC,EAAE,KAAK,CAAC;KACnB,CACJ,CAAC;IACF,QAAQ,EAAE;QACR,SAAS;QACT,WAAW;QACX,SAAS;QACT,gBAAgB;QAChB,SAAS;QACT,SAAS;KACV,CAAC;CACH,CAAC"}

package/dist/lib/styles/card.style.d.ts

@@ -10,12 +10,12 @@ export declare const cardStyle: (states: {
     children: import('react').ReactNode;
 } & {
     className: string | ClassNameComponent<CardInterface> | undefined;
-}) => Record<"card" | "stateLayer", string>;
+}) => Record<"stateLayer" | "card", string>;
 export declare const useCardStyle: (states: {
     variant?: "outlined" | "elevated" | "filled";
     interactive?: boolean;
     children: import('react').ReactNode;
 } & {
     className?: string | ClassNameComponent<CardInterface> | undefined;
-}) => Record<"card" | "stateLayer", string>;
+}) => Record<"stateLayer" | "card", string>;
 //# sourceMappingURL=card.style.d.ts.map

package/dist/lib/styles/checkbox.style.d.ts

@@ -26,7 +26,7 @@ export declare const checkboxStyle: (states: {
     className?: string;
 } & import('..').CheckboxStates & {
     className: string | ClassNameComponent<CheckboxInterface> | undefined;
-}) => Record<"box" | "container" | "input" | "icon" | "checkbox" | "stateLayer" | "ripple", string>;
+}) => Record<"input" | "container" | "checkbox" | "icon" | "box" | "stateLayer" | "ripple", string>;
 export declare const useCheckboxStyle: (states: import('..').CheckboxStates & {
     checked?: boolean;
     defaultChecked?: boolean;
@@ -41,5 +41,5 @@ export declare const useCheckboxStyle: (states: import('..').CheckboxStates & {
     className?: string;
 } & {
     className?: string | ClassNameComponent<CheckboxInterface> | undefined;
-}) => Record<"box" | "container" | "input" | "icon" | "checkbox" | "stateLayer" | "ripple", string>;
+}) => Record<"input" | "container" | "checkbox" | "icon" | "box" | "stateLayer" | "ripple", string>;
 //# sourceMappingURL=checkbox.style.d.ts.map

package/dist/lib/styles/fab.style.d.ts

@@ -40,7 +40,7 @@ export declare const fabStyle: (states: ({
     href?: never;
 })) & {
     className: string | ClassNameComponent<FabInterface> | undefined;
-})) => Record<"label" | "icon" | "fab" | "stateLayer", string>;
+})) => Record<"label" | "icon" | "stateLayer" | "fab", string>;
 export declare const useFabStyle: (states: (({
     variant?: import('..').FabVariant;
     label?: string;
@@ -63,5 +63,5 @@ export declare const useFabStyle: (states: (({
     href?: never;
 })) & {
     className?: string | ClassNameComponent<FabInterface> | undefined;
-}) => Record<"label" | "icon" | "fab" | "stateLayer", string>;
+}) => Record<"label" | "icon" | "stateLayer" | "fab", string>;
 //# sourceMappingURL=fab.style.d.ts.map

package/dist/lib/styles/navigation-rail-item.style.d.ts

@@ -38,7 +38,7 @@ export declare const navigationRailItemStyle: (states: (({
     isSelected: boolean;
 } & {
     className: string | ClassNameComponent<NavigationRailItemInterface> | undefined;
-}) => Record<"container" | "label" | "icon" | "stateLayer" | "navigationRailItem", string>;
+}) => Record<"label" | "container" | "icon" | "stateLayer" | "navigationRailItem", string>;
 export declare const useNavigationRailItemStyle: (states: {
     isSelected: boolean;
 } & (((import('..').NavProps & {
@@ -47,5 +47,5 @@ export declare const useNavigationRailItemStyle: (states: {
     href?: never;
 })) & {
     className?: string | ClassNameComponent<NavigationRailItemInterface> | undefined;
-})) => Record<"container" | "label" | "icon" | "stateLayer" | "navigationRailItem", string>;
+})) => Record<"label" | "container" | "icon" | "stateLayer" | "navigationRailItem", string>;
 //# sourceMappingURL=navigation-rail-item.style.d.ts.map

package/dist/lib/styles/side-sheet.style.d.ts

@@ -25,7 +25,7 @@ export declare const sideSheetStyle: (states: {
     isExtended: boolean;
 } & {
     className: string | ClassNameComponent<SideSheetInterface> | undefined;
-}) => Record<"container" | "content" | "header" | "title" | "overlay" | "divider" | "sideSheet" | "closeButton", string>;
+}) => Record<"header" | "title" | "content" | "container" | "overlay" | "divider" | "sideSheet" | "closeButton", string>;
 export declare const useSideSheetStyle: (states: {
     isExtended: boolean;
 } & {
@@ -40,5 +40,5 @@ export declare const useSideSheetStyle: (states: {
     divider?: boolean;
 } & {
     className?: string | ClassNameComponent<SideSheetInterface> | undefined;
-}) => Record<"container" | "content" | "header" | "title" | "overlay" | "divider" | "sideSheet" | "closeButton", string>;
+}) => Record<"header" | "title" | "content" | "container" | "overlay" | "divider" | "sideSheet" | "closeButton", string>;
 //# sourceMappingURL=side-sheet.style.d.ts.map

package/dist/lib/styles/slider.style.d.ts

@@ -26,7 +26,7 @@ export declare const sliderStyle: (states: {
     isChanging: boolean;
 } & {
     className: string | ClassNameComponent<SliderInterface> | undefined;
-}) => Record<"slider" | "dot" | "activeTrack" | "handle" | "inactiveTrack" | "valueIndicator", string>;
+}) => Record<"dot" | "slider" | "activeTrack" | "handle" | "inactiveTrack" | "valueIndicator", string>;
 export declare const useSliderStyle: (states: {
     isChanging: boolean;
 } & {
@@ -43,5 +43,5 @@ export declare const useSliderStyle: (states: {
     }[];
 } & {
     className?: string | ClassNameComponent<SliderInterface> | undefined;
-}) => Record<"slider" | "dot" | "activeTrack" | "handle" | "inactiveTrack" | "valueIndicator", string>;
+}) => Record<"dot" | "slider" | "activeTrack" | "handle" | "inactiveTrack" | "valueIndicator", string>;
 //# sourceMappingURL=slider.style.d.ts.map

package/dist/lib/styles/tab.style.d.ts

@@ -34,7 +34,7 @@ export declare const tabStyle: (states: (({
     isSelected: boolean;
 } & {
     className: string | ClassNameComponent<TabInterface> | undefined;
-}) => Record<"content" | "label" | "icon" | "tab" | "underline" | "stateLayer", string>;
+}) => Record<"label" | "content" | "icon" | "underline" | "tab" | "stateLayer", string>;
 export declare const useTabStyle: (states: {
     isSelected: boolean;
 } & (((import('..').TabProps & {
@@ -43,5 +43,5 @@ export declare const useTabStyle: (states: {
     href?: never;
 })) & {
     className?: string | ClassNameComponent<TabInterface> | undefined;
-})) => Record<"content" | "label" | "icon" | "tab" | "underline" | "stateLayer", string>;
+})) => Record<"label" | "content" | "icon" | "underline" | "tab" | "stateLayer", string>;
 //# sourceMappingURL=tab.style.d.ts.map

package/dist/lib/styles/text-field.style.d.ts

@@ -38,12 +38,12 @@ export declare const textFieldStyle: (states: {
     id?: string;
     style?: React.CSSProperties;
     variant?: import('..').TextFieldVariant;
-    type?: "text" | "password" | "number";
+    type?: "text" | "password" | "number" | "date";
     autoComplete?: "on" | "off" | string;
     multiline?: boolean;
 } & import('..').TextFieldStates & {
     className: string | ClassNameComponent<TextFieldInterface> | undefined;
-}) => Record<"content" | "input" | "label" | "stateLayer" | "leadingIcon" | "trailingIcon" | "activeIndicator" | "supportingText" | "textField" | "suffix", string>;
+}) => Record<"input" | "label" | "content" | "stateLayer" | "leadingIcon" | "trailingIcon" | "activeIndicator" | "supportingText" | "textField" | "suffix", string>;
 export declare const useTextFieldStyle: (states: import('..').TextFieldStates & {
     placeholder?: string;
     name?: string;
@@ -61,10 +61,10 @@ export declare const useTextFieldStyle: (states: import('..').TextFieldStates &
     id?: string;
     style?: React.CSSProperties;
     variant?: import('..').TextFieldVariant;
-    type?: "text" | "password" | "number";
+    type?: "text" | "password" | "number" | "date";
     autoComplete?: "on" | "off" | string;
     multiline?: boolean;
 } & {
     className?: string | ClassNameComponent<TextFieldInterface> | undefined;
-}) => Record<"content" | "input" | "label" | "stateLayer" | "leadingIcon" | "trailingIcon" | "activeIndicator" | "supportingText" | "textField" | "suffix", string>;
+}) => Record<"input" | "label" | "content" | "stateLayer" | "leadingIcon" | "trailingIcon" | "activeIndicator" | "supportingText" | "textField" | "suffix", string>;
 //# sourceMappingURL=text-field.style.d.ts.map

package/dist/lib/styles/tooltip.style.d.ts

@@ -15,6 +15,7 @@ export declare const toolStyle: (states: ({
     defaultOpen: any;
     onOpenChange: any;
     id: any;
+    anchorRef: any;
     children: any;
     targetRef: any;
 } | {
@@ -32,6 +33,7 @@ export declare const toolStyle: (states: ({
     defaultOpen: any;
     onOpenChange: any;
     id: any;
+    anchorRef: any;
     children: any;
     targetRef: any;
 }) & (({
@@ -41,7 +43,7 @@ export declare const toolStyle: (states: ({
     content?: import('react').ReactNode;
     buttons?: import('..').ReactProps<import('..').ButtonInterface> | import('..').ReactProps<import('..').ButtonInterface>[];
     position?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    trigger?: ("hover" | "click" | "focus" | null) | ("hover" | "click" | "focus" | null)[];
+    trigger?: ("click" | "focus" | "hover" | null) | ("click" | "focus" | "hover" | null)[];
     transition?: import('motion').Transition;
     openDelay?: number;
     closeDelay?: number;
@@ -49,6 +51,7 @@ export declare const toolStyle: (states: ({
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     id?: string;
+    anchorRef?: import('react').RefObject<HTMLElement>;
 } & ({
     children: import('react').ReactNode;
     targetRef?: never;
@@ -57,7 +60,7 @@ export declare const toolStyle: (states: ({
     targetRef: import('react').RefObject<any>;
 })) & {
     className: string | ClassNameComponent<ToolTipInterface> | undefined;
-})) => Record<"container" | "content" | "actions" | "supportingText" | "toolTip" | "subHead", string>;
+})) => Record<"content" | "container" | "actions" | "supportingText" | "toolTip" | "subHead", string>;
 export declare const useToolTipStyle: (states: ({
     variant?: "plain" | "rich";
     title?: string;
@@ -65,7 +68,7 @@ export declare const useToolTipStyle: (states: ({
     content?: import('react').ReactNode;
     buttons?: import('..').ReactProps<import('..').ButtonInterface> | import('..').ReactProps<import('..').ButtonInterface>[];
     position?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    trigger?: ("hover" | "click" | "focus" | null) | ("hover" | "click" | "focus" | null)[];
+    trigger?: ("click" | "focus" | "hover" | null) | ("click" | "focus" | "hover" | null)[];
     transition?: import('motion').Transition;
     openDelay?: number;
     closeDelay?: number;
@@ -73,6 +76,7 @@ export declare const useToolTipStyle: (states: ({
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     id?: string;
+    anchorRef?: import('react').RefObject<HTMLElement>;
 } & ({
     children: import('react').ReactNode;
     targetRef?: never;
@@ -81,5 +85,5 @@ export declare const useToolTipStyle: (states: ({
     targetRef: import('react').RefObject<any>;
 })) & {
     className?: string | ClassNameComponent<ToolTipInterface> | undefined;
-}) => Record<"container" | "content" | "actions" | "supportingText" | "toolTip" | "subHead", string>;
+}) => Record<"content" | "container" | "actions" | "supportingText" | "toolTip" | "subHead", string>;
 //# sourceMappingURL=tooltip.style.d.ts.map

package/dist/lib/styles/tooltip.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/tooltip.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAiCjD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qGAGrB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;oGAG3B,CAAC"}
+{"version":3,"file":"tooltip.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/tooltip.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAiCjD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qGAGrB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;oGAG3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "2.9.14",
+  "version": "2.9.16",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/lib/components/AnchorPositioner.tsx

@@ -0,0 +1,132 @@
+import React, {
+  CSSProperties,
+  RefObject,
+  useId,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import { SyncedFixedWrapper } from '../effects';
+
+export type Position =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
+export interface AnchorPositionerProps {
+  anchorRef: RefObject<HTMLElement | null>;
+  position?: Position;
+  children: React.ReactNode;
+  style?: CSSProperties;
+  className?: string; // Optional if we want to wrap in a class
+}
+
+export const AnchorPositioner = ({
+  anchorRef,
+  position = 'bottom',
+  children,
+  style,
+}: AnchorPositionerProps) => {
+  const uniqueId = useId();
+  const anchorName = `--anchor-${uniqueId.replace(/:/g, '')}`;
+  const [supportsAnchor, setSupportsAnchor] = useState(false);
+
+  useLayoutEffect(() => {
+    if (typeof CSS !== 'undefined' && CSS.supports('anchor-name', '--a')) {
+      setSupportsAnchor(true);
+    }
+  }, []);
+
+  useLayoutEffect(() => {
+    if (supportsAnchor && anchorRef.current) {
+      const el = anchorRef.current;
+      // Apply anchor name to the reference element
+      (el.style as any).anchorName = anchorName;
+      return () => {
+        if (anchorRef.current) {
+          (anchorRef.current.style as any).anchorName = '';
+        }
+      };
+    }
+  }, [supportsAnchor, anchorRef, anchorName]);
+
+  if (supportsAnchor) {
+    const positionAreaMap: Record<Position, string> = {
+      top: 'top',
+      bottom: 'bottom',
+      left: 'left',
+      right: 'right',
+      'top-left': 'top left',
+      'top-right': 'top right',
+      'bottom-left': 'bottom left',
+      'bottom-right': 'bottom right',
+    };
+
+    const floatingStyles: CSSProperties = {
+      position: 'fixed',
+      margin: 0,
+      zIndex: 9999,
+      positionAnchor: anchorName,
+      positionArea: positionAreaMap[position],
+      positionTryFallbacks: 'flip-block, flip-inline',
+      ...style,
+    } as any;
+
+    return <div style={floatingStyles}>{children}</div>;
+  }
+
+  const fallbackStyles: CSSProperties = {
+    position: 'absolute',
+    pointerEvents: 'auto',
+    ...style,
+  };
+
+  switch (position) {
+    case 'top':
+      fallbackStyles.bottom = '100%';
+      fallbackStyles.left = '50%';
+      fallbackStyles.transform = 'translateX(-50%)';
+      break;
+    case 'top-left':
+      fallbackStyles.bottom = '100%';
+      fallbackStyles.left = 0;
+      break;
+    case 'top-right':
+      fallbackStyles.bottom = '100%';
+      fallbackStyles.right = 0;
+      break;
+    case 'bottom':
+      fallbackStyles.top = '100%';
+      fallbackStyles.left = '50%';
+      fallbackStyles.transform = 'translateX(-50%)';
+      break;
+    case 'bottom-left':
+      fallbackStyles.top = '100%';
+      fallbackStyles.left = 0;
+      break;
+    case 'bottom-right':
+      fallbackStyles.top = '100%';
+      fallbackStyles.right = 0;
+      break;
+    case 'left':
+      fallbackStyles.right = '100%';
+      fallbackStyles.top = '50%';
+      fallbackStyles.transform = 'translateY(-50%)';
+      break;
+    case 'right':
+      fallbackStyles.left = '100%';
+      fallbackStyles.top = '50%';
+      fallbackStyles.transform = 'translateY(-50%)';
+      break;
+  }
+
+  return (
+    <SyncedFixedWrapper targetRef={anchorRef}>
+      <div style={fallbackStyles}>{children}</div>
+    </SyncedFixedWrapper>
+  );
+};

package/src/lib/components/FabMenu.tsx

@@ -151,15 +151,18 @@ export const FabMenu = ({
                         shape: 'rounded',
                         variant: 'filled',
                         className: () => ({
-                          button: classNames('max-w-full overflow-hidden', {
-                            'px-0': !open,
-                            'bg-primary-container text-on-primary-container ':
-                              variant === 'primary',
-                            'bg-secondary-container text-on-secondary-container':
-                              variant === 'secondary',
-                            'bg-tertiary-container text-on-tertiary-container':
-                              variant === 'tertiary',
-                          }),
+                          button: classNames(
+                            'max-w-full overflow-hidden text-nowrap',
+                            {
+                              'px-0': !open,
+                              'bg-primary-container text-on-primary-container ':
+                                variant === 'primary',
+                              'bg-secondary-container text-on-secondary-container':
+                                variant === 'secondary',
+                              'bg-tertiary-container text-on-tertiary-container':
+                                variant === 'tertiary',
+                            },
+                          ),
                           stateLayer: classNames({
                             'state-on-primary-container': variant === 'primary',
                             'state-on-secondary-container':
@@ -195,7 +198,7 @@ export const FabMenu = ({
               layoutId={'fab-menu' + id}
               variant={'filled'}
               className={() => ({
-                iconButton: classNames('', {
+                iconButton: classNames({
                   'bg-primary text-on-primary': variant === 'primary',
                   'bg-secondary text-on-secondary': variant === 'secondary',
                   'bg-tertiary text-on-tertiary': variant === 'tertiary',