@udixio/ui-react 2.9.13 → 2.9.15

package/dist/lib/styles/date-picker.style.d.ts

@@ -0,0 +1,45 @@
+import { ClassNameComponent } from '../utils';
+import { DatePickerInterface } from '../interfaces/date-picker.interface';
+export declare const datePickerStyle: (states: {
+    mode: any;
+    value: any;
+    defaultValue: any;
+    onChange: any;
+    minDate: any;
+    maxDate: any;
+    shouldDisableDate: any;
+    locale: any;
+    weekStartDay: any;
+    className: any;
+    style: any;
+} & {
+    mode?: "single" | "range";
+    value?: Date | import('../interfaces/date-picker.interface').DateRange | null;
+    defaultValue?: Date | import('../interfaces/date-picker.interface').DateRange | null;
+    onChange?: (value: any) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    shouldDisableDate?: (date: Date) => boolean;
+    locale?: string;
+    weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    className?: string;
+    style?: React.CSSProperties;
+} & import('../interfaces/date-picker.interface').DatePickerStates & {
+    className: string | ClassNameComponent<DatePickerInterface> | undefined;
+}) => Record<"header" | "datePicker" | "monthNav" | "monthLabel" | "weekDays" | "weekDay" | "daysGrid" | "dayCell" | "dayButton", string>;
+export declare const useDatePickerStyle: (states: import('../interfaces/date-picker.interface').DatePickerStates & {
+    mode?: "single" | "range";
+    value?: Date | import('../interfaces/date-picker.interface').DateRange | null;
+    defaultValue?: Date | import('../interfaces/date-picker.interface').DateRange | null;
+    onChange?: (value: any) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    shouldDisableDate?: (date: Date) => boolean;
+    locale?: string;
+    weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    className?: string;
+    style?: React.CSSProperties;
+} & {
+    className?: string | ClassNameComponent<DatePickerInterface> | undefined;
+}) => Record<"header" | "datePicker" | "monthNav" | "monthLabel" | "weekDays" | "weekDay" | "daysGrid" | "dayCell" | "dayButton", string>;
+//# sourceMappingURL=date-picker.style.d.ts.map

package/dist/lib/styles/date-picker.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/date-picker.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AA4B1E,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;yIAG3B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;yIAG9B,CAAC"}

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/icon-button.style.d.ts

@@ -11,6 +11,7 @@ export declare const iconButtonStyle: (states: (({
     variant: any;
     disabled: any;
     activated: any;
+    title: any;
     shape: any;
     allowShapeTransformation: any;
     transition: any;
@@ -26,6 +27,7 @@ export declare const iconButtonStyle: (states: (({
     variant: any;
     disabled: any;
     activated: any;
+    title: any;
     shape: any;
     allowShapeTransformation: any;
     transition: any;
@@ -33,7 +35,7 @@ export declare const iconButtonStyle: (states: (({
 }) & (({
     label?: string;
     children?: string;
-    icon: import('..').Icon;
+    icon?: import('..').Icon;
     size?: "xSmall" | "small" | "medium" | "large" | "xLarge";
     width?: "default" | "narrow" | "wide";
     iconSelected?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
@@ -41,6 +43,7 @@ export declare const iconButtonStyle: (states: (({
     variant?: import('..').IconButtonVariant;
     disabled?: boolean;
     activated?: boolean;
+    title?: string | null;
     shape?: "squared" | "rounded";
     allowShapeTransformation?: boolean;
     transition?: import('motion').Transition;
@@ -49,7 +52,7 @@ export declare const iconButtonStyle: (states: (({
 }) | ({
     label?: string;
     children?: string;
-    icon: import('..').Icon;
+    icon?: import('..').Icon;
     size?: "xSmall" | "small" | "medium" | "large" | "xLarge";
     width?: "default" | "narrow" | "wide";
     iconSelected?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
@@ -57,6 +60,7 @@ export declare const iconButtonStyle: (states: (({
     variant?: import('..').IconButtonVariant;
     disabled?: boolean;
     activated?: boolean;
+    title?: string | null;
     shape?: "squared" | "rounded";
     allowShapeTransformation?: boolean;
     transition?: import('motion').Transition;
@@ -68,7 +72,7 @@ export declare const iconButtonStyle: (states: (({
 export declare const useIconButtonStyle: (states: import('..').IconButtonStates & ((({
     label?: string;
     children?: string;
-    icon: import('..').Icon;
+    icon?: import('..').Icon;
     size?: "xSmall" | "small" | "medium" | "large" | "xLarge";
     width?: "default" | "narrow" | "wide";
     iconSelected?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
@@ -76,6 +80,7 @@ export declare const useIconButtonStyle: (states: import('..').IconButtonStates
     variant?: import('..').IconButtonVariant;
     disabled?: boolean;
     activated?: boolean;
+    title?: string | null;
     shape?: "squared" | "rounded";
     allowShapeTransformation?: boolean;
     transition?: import('motion').Transition;
@@ -84,7 +89,7 @@ export declare const useIconButtonStyle: (states: import('..').IconButtonStates
 }) | ({
     label?: string;
     children?: string;
-    icon: import('..').Icon;
+    icon?: import('..').Icon;
     size?: "xSmall" | "small" | "medium" | "large" | "xLarge";
     width?: "default" | "narrow" | "wide";
     iconSelected?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
@@ -92,6 +97,7 @@ export declare const useIconButtonStyle: (states: import('..').IconButtonStates
     variant?: import('..').IconButtonVariant;
     disabled?: boolean;
     activated?: boolean;
+    title?: string | null;
     shape?: "squared" | "rounded";
     allowShapeTransformation?: boolean;
     transition?: import('motion').Transition;

package/dist/lib/styles/icon-button.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/icon-button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAyJlB,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0EAG3B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2EAG9B,CAAC"}
+{"version":3,"file":"icon-button.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/icon-button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAyJlB,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0EAG3B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2EAG9B,CAAC"}

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

@@ -2,6 +2,7 @@ export * from './button.style';
 export * from './card.style';
 export * from './carousel-item.style';
 export * from './carousel.style';
+export * from './checkbox.style';
 export * from './chip.style';
 export * from './chips.style';
 export * from './divider.style';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -14,48 +14,57 @@ export declare const textFieldStyle: (states: {
     showSupportingText: any;
     suffix: any;
     value: any;
+    defaultValue: any;
+    id: any;
+    style: any;
     variant: any;
     type: any;
     autoComplete: any;
-    textLine: any;
+    multiline: any;
 } & {
     placeholder?: string;
-    name: string;
+    name?: string;
     label: string;
     disabled?: boolean;
     errorText?: string | null;
     supportingText?: string;
     trailingIcon?: React.ReactElement<typeof import('..').IconButton> | import('..').Icon;
     leadingIcon?: React.ReactElement<typeof import('..').IconButton> | import('..').Icon;
-    onChange?: (value: string) => void;
+    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     showSupportingText?: boolean;
     suffix?: string;
-    value: string;
+    value?: string;
+    defaultValue?: string;
+    id?: string;
+    style?: React.CSSProperties;
     variant?: import('..').TextFieldVariant;
-    type?: "text" | "password" | "number";
+    type?: "text" | "password" | "number" | "date";
     autoComplete?: "on" | "off" | string;
-    textLine?: "singleLine" | "multiLine" | "textAreas";
+    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;
+    name?: string;
     label: string;
     disabled?: boolean;
     errorText?: string | null;
     supportingText?: string;
     trailingIcon?: React.ReactElement<typeof import('..').IconButton> | import('..').Icon;
     leadingIcon?: React.ReactElement<typeof import('..').IconButton> | import('..').Icon;
-    onChange?: (value: string) => void;
+    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     showSupportingText?: boolean;
     suffix?: string;
-    value: string;
+    value?: string;
+    defaultValue?: string;
+    id?: string;
+    style?: React.CSSProperties;
     variant?: import('..').TextFieldVariant;
-    type?: "text" | "password" | "number";
+    type?: "text" | "password" | "number" | "date";
     autoComplete?: "on" | "off" | string;
-    textLine?: "singleLine" | "multiLine" | "textAreas";
+    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/text-field.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/text-field.style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAmGnD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mKAG1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;mKAG7B,CAAC"}
+{"version":3,"file":"text-field.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/text-field.style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAmGnD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mKAG1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;mKAG7B,CAAC"}

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.13",
+  "version": "2.9.15",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -37,8 +37,8 @@
   "devDependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "@udixio/tailwind": "2.4.12",
-    "@udixio/theme": "2.1.12"
+    "@udixio/tailwind": "2.4.13",
+    "@udixio/theme": "2.1.13"
   },
   "repository": {
     "type": "git",

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/Button.tsx

@@ -1,3 +1,4 @@
+
 import { classNames, ReactProps } from '../utils';
 import { ButtonInterface } from '../interfaces';
 import { useButtonStyle } from '../styles';

package/src/lib/components/Card.tsx

@@ -9,7 +9,7 @@ import { State } from '../effects';
  * @status beta
  * @category Layout
  * @devx
- * - `isInteractive` only adds a state layer; add your own click/role semantics.
+ * - `interactive` only adds a state layer; add your own click/role semantics.
  * @limitations
  * - No built-in header/actions slots; layout is fully custom via children.
  */
@@ -17,18 +17,23 @@ export const Card = ({
   variant = 'outlined',
   className,
   children,
-  isInteractive = false,
+  interactive = false,
   ref,
   ...rest
 }: ReactProps<CardInterface>) => {
-  const styles = useCardStyle({ className, isInteractive, variant, children });
+  const styles = useCardStyle({
+    className,
+    isInteractive: interactive,
+    variant,
+    children,
+  });
 
   const defaultRef = useRef<HTMLDivElement>(null);
   const resolvedRef = ref || defaultRef;
 
   return (
     <div {...rest} ref={resolvedRef} className={styles.card}>
-      {isInteractive && (
+      {interactive && (
         <State
           className={styles.stateLayer}
           colorName={'on-surface'}