@udixio/ui-react 2.6.0 → 2.7.0

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

@@ -1,4 +1,5 @@
 import { IconButtonInterface } from '../interfaces/icon-button.interface';
+import { ClassNameComponent } from '../utils';
 export declare const iconButtonStyle: (states: (({
     label: any;
     children: any;
@@ -62,6 +63,41 @@ export declare const iconButtonStyle: (states: (({
 } & {
     href?: never;
 }))) & import('..').IconButtonStates & {
-    className: string | import('..').ClassNameComponent<IconButtonInterface> | undefined;
+    className: string | ClassNameComponent<IconButtonInterface> | undefined;
 }) => Record<"icon" | "stateLayer" | "iconButton" | "touchTarget", string>;
+export declare const useIconButtonStyle: (states: import('..').IconButtonStates & ((({
+    label?: string;
+    children?: string;
+    icon: import('..').Icon;
+    size?: "xSmall" | "small" | "medium" | "large" | "xLarge";
+    width?: "default" | "narrow" | "wide";
+    iconSelected?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
+    onToggle?: (isActive: boolean) => void;
+    variant?: import('..').IconButtonVariant;
+    disabled?: boolean;
+    activated?: boolean;
+    shape?: "squared" | "rounded";
+    allowShapeTransformation?: boolean;
+    transition?: import('motion').Transition;
+} & {
+    href?: string;
+}) | ({
+    label?: string;
+    children?: string;
+    icon: import('..').Icon;
+    size?: "xSmall" | "small" | "medium" | "large" | "xLarge";
+    width?: "default" | "narrow" | "wide";
+    iconSelected?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
+    onToggle?: (isActive: boolean) => void;
+    variant?: import('..').IconButtonVariant;
+    disabled?: boolean;
+    activated?: boolean;
+    shape?: "squared" | "rounded";
+    allowShapeTransformation?: boolean;
+    transition?: import('motion').Transition;
+} & {
+    href?: never;
+})) & {
+    className?: string | ClassNameComponent<IconButtonInterface> | undefined;
+})) => Record<"icon" | "stateLayer" | "iconButton" | "touchTarget", string>;
 //# sourceMappingURL=icon-button.style.d.ts.map

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;AAG1E,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0EAyJ3B,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

@@ -4,6 +4,7 @@ export * from './carousel-item.style';
 export * from './carousel.style';
 export * from './divider.style';
 export * from './fab.style';
+export * from './fab-menu.style';
 export * from './icon-button.style';
 export * from './progress-indicator.style';
 export * from './side-sheet.style';
@@ -14,4 +15,5 @@ export * from './tab.style';
 export * from './tabs.style';
 export * from './text-field.style';
 export * from './tooltip.style';
+export { useButtonStyle } from './button.style';
 //# sourceMappingURL=index.d.ts.map

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,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,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,iBAAiB,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,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,iBAAiB,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -1,3 +1,4 @@
+import { ClassNameComponent } from '../utils';
 import { NavigationRailItemInterface } from '../interfaces';
 export declare const navigationRailItemStyle: (states: (({
     selected: any;
@@ -36,6 +37,15 @@ export declare const navigationRailItemStyle: (states: (({
 }))) & {
     isSelected: boolean;
 } & {
-    className: string | import('..').ClassNameComponent<NavigationRailItemInterface> | undefined;
+    className: string | ClassNameComponent<NavigationRailItemInterface> | undefined;
 }) => Record<"container" | "label" | "icon" | "stateLayer" | "navigationRailItem", string>;
+export declare const useNavigationRailItemStyle: (states: {
+    isSelected: boolean;
+} & (((import('..').NavProps & {
+    href?: string;
+}) | (import('..').NavProps & {
+    href?: never;
+})) & {
+    className?: string | ClassNameComponent<NavigationRailItemInterface> | undefined;
+})) => Record<"container" | "label" | "icon" | "stateLayer" | "navigationRailItem", string>;
 //# sourceMappingURL=navigation-rail-item.style.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-rail-item.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/navigation-rail-item.style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAC;AAE5D,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0FA2CjC,CAAC"}
+{"version":3,"file":"navigation-rail-item.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/navigation-rail-item.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAC;AAuC5D,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0FAIjC,CAAC;AAEJ,eAAO,MAAM,0BAA0B;;;;;;;;2FAIpC,CAAC"}

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

@@ -1,3 +1,4 @@
+import { ClassNameComponent } from '../utils';
 import { NavigationRailInterface } from '../interfaces/navigation-rail.interface';
 export declare const navigationRailStyle: (states: {
     variant: any;
@@ -37,6 +38,35 @@ export declare const navigationRailStyle: (states: {
 } & {
     isExtended?: boolean;
 } & {
-    className: string | import('..').ClassNameComponent<NavigationRailInterface> | undefined;
+    className: string | ClassNameComponent<NavigationRailInterface> | undefined;
+}) => Record<"header" | "navigationRail" | "menuIcon" | "segments", string>;
+export declare const useNavigationRailStyle: (states: {
+    isExtended?: boolean;
+} & {
+    variant?: "standard" | "modal";
+    onItemSelected?: (args: {
+        index: number;
+    } & Pick<import('..').ReactProps<import('..').NavigationRailItemInterface>, "label" | "icon"> & {
+        ref: import('react').RefObject<any>;
+    }) => void;
+    children: import('react').ReactNode;
+    selectedItem?: number | null;
+    setSelectedItem?: import('react').Dispatch<import('react').SetStateAction<number | null>>;
+    extended?: boolean;
+    onExtendedChange?: (extended: boolean) => void;
+    alignment?: "middle" | "top";
+    menu?: {
+        closed: {
+            icon: import('..').Icon;
+            label: string;
+        };
+        opened: {
+            icon: import('..').Icon;
+            label: string;
+        };
+    };
+    transition?: import('motion').Transition;
+} & {
+    className?: string | ClassNameComponent<NavigationRailInterface> | undefined;
 }) => Record<"header" | "navigationRail" | "menuIcon" | "segments", string>;
 //# sourceMappingURL=navigation-rail.style.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-rail.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/navigation-rail.style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAElF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2EAgB/B,CAAC"}
+{"version":3,"file":"navigation-rail.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/navigation-rail.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAoBlF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2EAG/B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;2EAIhC,CAAC"}

package/dist/lib/styles/progress-indicator.style.d.ts

@@ -1,4 +1,5 @@
 import { ProgressIndicatorInterface } from '../interfaces/progress-indicator.interface';
+import { ClassNameComponent } from '../utils';
 export declare const progressIndicatorStyle: (states: {
     value: any;
     transitionDuration: any;
@@ -12,6 +13,16 @@ export declare const progressIndicatorStyle: (states: {
 } & {
     isVisible: boolean;
 } & {
-    className: string | import('..').ClassNameComponent<ProgressIndicatorInterface> | undefined;
+    className: string | ClassNameComponent<ProgressIndicatorInterface> | undefined;
+}) => Record<"track" | "stop" | "progressIndicator" | "activeIndicator", string>;
+export declare const useProgressIndicatorStyle: (states: {
+    isVisible: boolean;
+} & {
+    value?: number;
+    transitionDuration?: number;
+    variant?: import('..').ProgressIndicatorVariant;
+    minHeight?: number;
+} & {
+    className?: string | ClassNameComponent<ProgressIndicatorInterface> | undefined;
 }) => Record<"track" | "stop" | "progressIndicator" | "activeIndicator", string>;
 //# sourceMappingURL=progress-indicator.style.d.ts.map

package/dist/lib/styles/progress-indicator.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-indicator.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/progress-indicator.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AAGxF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;gFAuChC,CAAC"}
+{"version":3,"file":"progress-indicator.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/progress-indicator.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AACxF,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAuClB,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;gFAIhC,CAAC;AAEJ,eAAO,MAAM,yBAAyB;;;;;;;;;gFAInC,CAAC"}

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

@@ -1,4 +1,6 @@
-import { SideSheetInterface } from '../interfaces/side-sheet.interface';
+import { ClassNameComponent } from '../utils';
+import { SideSheetInterface } from '../interfaces';
+export declare const sideSheetConfig: ClassNameComponent<SideSheetInterface>;
 export declare const sideSheetStyle: (states: {
     variant: any;
     children: any;
@@ -22,6 +24,21 @@ export declare const sideSheetStyle: (states: {
 } & {
     isExtended: boolean;
 } & {
-    className: string | import('..').ClassNameComponent<SideSheetInterface> | undefined;
-}) => Record<"container" | "content" | "header" | "title" | "overlay" | "divider" | "slideSheet" | "closeButton", string>;
+    className: string | ClassNameComponent<SideSheetInterface> | undefined;
+}) => Record<"container" | "content" | "header" | "title" | "overlay" | "divider" | "sideSheet" | "closeButton", string>;
+export declare const useSideSheetStyle: (states: {
+    isExtended: boolean;
+} & {
+    variant?: "standard" | "modal";
+    children: React.ReactNode;
+    title?: string;
+    position?: "left" | "right";
+    extended?: boolean;
+    onExtendedChange?: (extended: boolean) => void;
+    transition?: import('motion').Transition;
+    closeIcon?: import('..').Icon;
+    divider?: boolean;
+} & {
+    className?: string | ClassNameComponent<SideSheetInterface> | undefined;
+}) => Record<"container" | "content" | "header" | "title" | "overlay" | "divider" | "sideSheet" | "closeButton", string>;
 //# sourceMappingURL=side-sheet.style.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"side-sheet.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/side-sheet.style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAExE,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;yHA2B1B,CAAC"}
+{"version":3,"file":"side-sheet.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/side-sheet.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD,eAAO,MAAM,eAAe,EAAE,kBAAkB,CAAC,kBAAkB,CAyBjE,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;wHAG1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;wHAG7B,CAAC"}

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

@@ -1,4 +1,6 @@
-import { SliderInterface } from '../interfaces/slider.interface';
+import { ClassNameComponent } from '../utils';
+import { SliderInterface } from '../interfaces';
+export declare const sliderConfig: ClassNameComponent<SliderInterface>;
 export declare const sliderStyle: (states: {
     value: any;
     name: any;
@@ -23,6 +25,23 @@ export declare const sliderStyle: (states: {
 } & {
     isChanging: boolean;
 } & {
-    className: string | import('..').ClassNameComponent<SliderInterface> | undefined;
+    className: string | ClassNameComponent<SliderInterface> | undefined;
+}) => Record<"slider" | "dot" | "activeTrack" | "handle" | "inactiveTrack" | "valueIndicator", string>;
+export declare const useSliderStyle: (states: {
+    isChanging: boolean;
+} & {
+    value?: number;
+    name: string;
+    onChange?: (value: number) => void;
+    valueFormatter?: (value: number) => string | number;
+    step?: number;
+    min?: number;
+    max?: number;
+    marks?: {
+        value: number;
+        label?: string;
+    }[];
+} & {
+    className?: string | ClassNameComponent<SliderInterface> | undefined;
 }) => Record<"slider" | "dot" | "activeTrack" | "handle" | "inactiveTrack" | "valueIndicator", string>;
 //# sourceMappingURL=slider.style.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/slider.style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;aAIuB,CAAC;;;;;;sGAmB/C,CAAC"}
+{"version":3,"file":"slider.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/slider.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,YAAY,EAAE,kBAAkB,CAAC,eAAe,CAsB3D,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;aApBH,CAAA;;;;;;sGAuBpB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;aAzBN,CAAA;;;;sGA4BpB,CAAC"}

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

@@ -1,4 +1,5 @@
-import { SnackbarInterface } from '../interfaces/snackbar.interface';
+import { ClassNameComponent } from '../utils';
+import { SnackbarInterface } from '../interfaces';
 export declare const snackbarStyle: (states: {
     duration: any;
     onClose: any;
@@ -12,6 +13,16 @@ export declare const snackbarStyle: (states: {
 } & {
     isVisible: boolean;
 } & {
-    className: string | import('..').ClassNameComponent<SnackbarInterface> | undefined;
-}) => Record<"container" | "icon" | "snackbar" | "supportingText" | "action", string>;
+    className: string | ClassNameComponent<SnackbarInterface> | undefined;
+}) => Record<"container" | "icon" | "action" | "snackbar" | "supportingText", string>;
+export declare const useSnackbarStyle: (states: {
+    isVisible: boolean;
+} & {
+    duration?: number;
+    onClose?: () => void;
+    message: string;
+    closeIcon?: import('..').Icon;
+} & {
+    className?: string | ClassNameComponent<SnackbarInterface> | undefined;
+}) => Record<"container" | "icon" | "action" | "snackbar" | "supportingText", string>;
 //# sourceMappingURL=snackbar.style.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"snackbar.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/snackbar.style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAErE,eAAO,MAAM,aAAa;;;;;;;;;;;;;;qFAUzB,CAAC"}
+{"version":3,"file":"snackbar.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/snackbar.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWlD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;qFAGzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;qFAG5B,CAAC"}

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

@@ -1,4 +1,5 @@
-import { SwitchInterface } from '../interfaces/switch.interface';
+import { ClassNameComponent } from '../utils';
+import { SwitchInterface } from '../interfaces';
 export declare const switchStyle: (states: {
     selected: any;
     activeIcon: any;
@@ -14,6 +15,17 @@ export declare const switchStyle: (states: {
 } & {
     isSelected: boolean;
 } & {
-    className: string | import('..').ClassNameComponent<SwitchInterface> | undefined;
+    className: string | ClassNameComponent<SwitchInterface> | undefined;
+}) => Record<"switch" | "icon" | "handle" | "handleContainer" | "handleStateLayer", string>;
+export declare const useSwitchStyle: (states: {
+    isSelected: boolean;
+} & {
+    selected?: boolean;
+    activeIcon?: import('..').Icon;
+    inactiveIcon?: import('..').Icon;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+} & {
+    className?: string | ClassNameComponent<SwitchInterface> | undefined;
 }) => Record<"switch" | "icon" | "handle" | "handleContainer" | "handleStateLayer", string>;
 //# sourceMappingURL=switch.style.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"switch.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/switch.style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;2FA+CvB,CAAC"}
+{"version":3,"file":"switch.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/switch.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAoDhD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;2FAGvB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;2FAG1B,CAAC"}

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

@@ -1,4 +1,5 @@
-import { TabInterface } from '../interfaces/tab.interface';
+import { ClassNameComponent } from '../utils';
+import { TabInterface } from '../interfaces';
 export declare const tabStyle: (states: (({
     selected: any;
     variant: any;
@@ -30,6 +31,15 @@ export declare const tabStyle: (states: (({
 }))) & {
     isSelected: boolean;
 } & {
-    className: string | import('..').ClassNameComponent<TabInterface> | undefined;
+    className: string | ClassNameComponent<TabInterface> | undefined;
 }) => Record<"content" | "label" | "icon" | "tab" | "underline" | "stateLayer", string>;
+export declare const useTabStyle: (states: {
+    isSelected: boolean;
+} & (((import('..').TabProps & {
+    href?: string;
+}) | (import('..').TabProps & {
+    href?: never;
+})) & {
+    className?: string | ClassNameComponent<TabInterface> | undefined;
+})) => Record<"content" | "label" | "icon" | "tab" | "underline" | "stateLayer", string>;
 //# sourceMappingURL=tab.style.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/tab.style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uFA+DpB,CAAC"}
+{"version":3,"file":"tab.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/tab.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAqE7C,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uFAAoD,CAAC;AAE1E,eAAO,MAAM,WAAW;;;;;;;;wFAAsD,CAAC"}

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

@@ -1,4 +1,5 @@
-import { TabsInterface } from '../interfaces/tabs.interface';
+import { TabsInterface } from '../interfaces';
+import { ClassNameComponent } from '../utils';
 export declare const tabsStyle: (states: {
     variant: any;
     onTabSelected: any;
@@ -18,6 +19,20 @@ export declare const tabsStyle: (states: {
     setSelectedTab?: import('react').Dispatch<import('react').SetStateAction<number | null>>;
     scrollable?: boolean;
 } & object & {
-    className: string | import('..').ClassNameComponent<TabsInterface> | undefined;
+    className: string | ClassNameComponent<TabsInterface> | undefined;
+}) => Record<"tabs", string>;
+export declare const useTabsStyle: (states: object & {
+    variant?: import('..').TabsVariant;
+    onTabSelected?: (args: {
+        index: number;
+    } & Pick<import('..').TabProps, "label" | "icon"> & {
+        ref: import('react').RefObject<any>;
+    }) => void;
+    children: import('react').ReactNode;
+    selectedTab?: number | null;
+    setSelectedTab?: import('react').Dispatch<import('react').SetStateAction<number | null>>;
+    scrollable?: boolean;
+} & {
+    className?: string | ClassNameComponent<TabsInterface> | undefined;
 }) => Record<"tabs", string>;
 //# sourceMappingURL=tabs.style.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/tabs.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAG7D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;4BASrB,CAAC"}
+{"version":3,"file":"tabs.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/tabs.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAUlB,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;4BAAuD,CAAC;AAE9E,eAAO,MAAM,YAAY;;;;;;;;;;;;;4BAGxB,CAAC"}

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

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
-import { TextFieldInterface } from '../interfaces/text-field.interface';
+import { ClassNameComponent } from '../utils';
+import { TextFieldInterface } from '../interfaces';
 export declare const textFieldStyle: (states: {
     placeholder: any;
     name: any;
@@ -35,6 +36,26 @@ export declare const textFieldStyle: (states: {
     autoComplete?: "on" | "off" | string;
     textLine?: "singleLine" | "multiLine" | "textAreas";
 } & import('..').TextFieldStates & {
-    className: string | import('..').ClassNameComponent<TextFieldInterface> | undefined;
+    className: string | ClassNameComponent<TextFieldInterface> | undefined;
+}) => Record<"content" | "input" | "label" | "stateLayer" | "activeIndicator" | "supportingText" | "textField" | "leadingIcon" | "trailingIcon" | "suffix", string>;
+export declare const useTextFieldStyle: (states: import('..').TextFieldStates & {
+    placeholder?: 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;
+    showSupportingText?: boolean;
+    suffix?: string;
+    value: string;
+    variant?: import('..').TextFieldVariant;
+    type?: "text" | "password" | "number";
+    autoComplete?: "on" | "off" | string;
+    textLine?: "singleLine" | "multiLine" | "textAreas";
+} & {
+    className?: string | ClassNameComponent<TextFieldInterface> | undefined;
 }) => Record<"content" | "input" | "label" | "stateLayer" | "activeIndicator" | "supportingText" | "textField" | "leadingIcon" | "trailingIcon" | "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;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAGxE,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mKAkG1B,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

@@ -1,4 +1,5 @@
-import { ToolTipInterface } from '../interfaces/tooltip.interface';
+import { ClassNameComponent } from '../utils';
+import { ToolTipInterface } from '../interfaces';
 export declare const toolStyle: (states: ({
     variant: any;
     title: any;
@@ -31,6 +32,22 @@ export declare const toolStyle: (states: ({
     children?: never;
     targetRef: import('react').RefObject<any>;
 })) & {
-    className: string | import('..').ClassNameComponent<ToolTipInterface> | undefined;
-})) => Record<"container" | "supportingText" | "toolTip" | "subHead" | "actions", string>;
+    className: string | ClassNameComponent<ToolTipInterface> | undefined;
+})) => Record<"container" | "actions" | "supportingText" | "toolTip" | "subHead", string>;
+export declare const useToolTipStyle: (states: ({
+    variant?: "plain" | "rich";
+    title?: string;
+    text: string;
+    buttons?: import('..').ReactProps<import('..').ButtonInterface> | import('..').ReactProps<import('..').ButtonInterface>[];
+    position?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    trigger?: ("click" | "focus" | "hover" | null) | ("click" | "focus" | "hover" | null)[];
+} & ({
+    children: import('react').ReactNode;
+    targetRef?: never;
+} | {
+    children?: never;
+    targetRef: import('react').RefObject<any>;
+})) & {
+    className?: string | ClassNameComponent<ToolTipInterface> | undefined;
+}) => Record<"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":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yFAiCrB,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;AA+BjD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yFAGrB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;wFAG3B,CAAC"}

package/dist/lib/utils/styles/get-classname.d.ts

@@ -14,5 +14,8 @@ export declare const getClassNames: <T extends ComponentInterface>(args: {
 export declare const defaultClassNames: <T extends ComponentInterface>(element: T["elements"][0], defaultClassName: ClassNameComponent<T> | string) => (states: RequiredNullable<T["props"]> & T["props"] & T["states"] & {
     className: ClassNameComponent<T> | string | undefined;
 }) => Record<T["elements"][number], string>;
+export declare const createUseClassNames: <T extends ComponentInterface>(element: T["elements"][0], defaultClassName: ClassNameComponent<T> | string) => (states: T["states"] & T["props"] & {
+    className?: string | ClassNameComponent<T>;
+}) => Record<T["elements"][number], string>;
 export {};
 //# sourceMappingURL=get-classname.d.ts.map

package/dist/lib/utils/styles/get-classname.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-classname.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/styles/get-classname.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,KAAK,gBAAgB,CAAC,CAAC,IAAI;KACxB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG;CACtB,CAAC;AAEF,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,kBAAkB;IACtD,SAAS,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAC;CAC5C;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,kBAAkB,IAAI,CAC7D,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,KAC7B,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AAEpD,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,kBAAkB,EAAE,MAAM;IAChE,aAAa,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC9D,OAAO,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1B,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC;CAClC,KAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAkCvC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,kBAAkB,EAC5D,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EACzB,kBAAkB,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,MAG9C,QAAQ,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAClC,CAAC,CAAC,OAAO,CAAC,GACV,CAAC,CAAC,QAAQ,CAAC,GAAG;IACZ,SAAS,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;CACvD,0CAON,CAAC"}
+{"version":3,"file":"get-classname.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/styles/get-classname.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,KAAK,gBAAgB,CAAC,CAAC,IAAI;KACxB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG;CACtB,CAAC;AAEF,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,kBAAkB;IACtD,SAAS,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAC;CAC5C;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,kBAAkB,IAAI,CAC7D,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,KAC7B,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AAEpD,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,kBAAkB,EAAE,MAAM;IAChE,aAAa,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAC9D,OAAO,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1B,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC;CAClC,KAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAkCvC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,kBAAkB,EAC5D,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EACzB,kBAAkB,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,MAG9C,QAAQ,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAClC,CAAC,CAAC,OAAO,CAAC,GACV,CAAC,CAAC,QAAQ,CAAC,GAAG;IACZ,SAAS,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;CACvD,0CAON,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,kBAAkB,EAC9D,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EACzB,kBAAkB,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,MAG9C,QAAQ,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG;IACjC,SAAS,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAC;CAC5C,KACA,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAYxC,CAAC"}

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

@@ -1,4 +1,5 @@
 export * from './classnames';
 export * from './classnames';
 export * from './get-classname';
+export * from './use-classnames';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC"}

package/dist/lib/utils/styles/use-classnames.d.ts

@@ -0,0 +1,6 @@
+import { ComponentInterface } from '../component';
+import { ClassNameComponent } from './get-classname';
+export declare function useClassNames<T extends ComponentInterface>(element: T['elements'][0], defaultClassName: ClassNameComponent<T> | string, states: (T['states'] & T['props']) & {
+    className?: string | ClassNameComponent<T>;
+}): Record<T['elements'][number], string>;
+//# sourceMappingURL=use-classnames.d.ts.map

package/dist/lib/utils/styles/use-classnames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-classnames.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/styles/use-classnames.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAiB,MAAM,iBAAiB,CAAC;AAEpE,wBAAgB,aAAa,CAAC,CAAC,SAAS,kBAAkB,EACxD,OAAO,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EACzB,gBAAgB,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,EAChD,MAAM,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAA;CAAE,GAClF,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAUvC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -37,7 +37,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "@udixio/theme": "2.1.2",
-    "@udixio/tailwind": "2.3.7"
+    "@udixio/tailwind": "2.4.0"
   },
   "repository": {
     "type": "git",