@udixio/ui-react 1.1.0 → 1.2.0

package/src/lib/interfaces/switch.interface.ts

@@ -1,11 +1,11 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { Icon } from '../icon';
 
 export interface SwitchInterface {
   type: 'div';
   props: {
     selected?: boolean;
-    activeIcon?: IconDefinition;
-    inactiveIcon?: IconDefinition;
+    activeIcon?: Icon;
+    inactiveIcon?: Icon;
     disabled?: boolean;
     onChange?: (checked: boolean) => void;
   };

package/src/lib/interfaces/tab.interface.ts

@@ -1,20 +1,20 @@
 import { ActionOrLink } from '../utils/component';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { TabsVariant } from './tabs.interface';
 import { Dispatch, RefObject, SetStateAction } from 'react';
+import { Icon } from '../icon';
 
 export type TabProps = {
   selected?: boolean;
   variant?: TabsVariant;
   label?: string;
-  icon?: IconDefinition;
+  icon?: Icon;
   selectedTab?: number | null;
   setSelectedTab?: Dispatch<SetStateAction<number | null>>;
   tabsId?: string;
   onTabSelected?: (
     args: { index: number } & Pick<TabProps, 'label' | 'icon'> & {
         ref: RefObject<any>;
-      }
+      },
   ) => void;
   index?: number;
   scrollable?: boolean;

package/src/lib/interfaces/text-field.interface.ts

@@ -1,6 +1,6 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import React from 'react';
 import { IconButton } from '../components/IconButton';
+import { Icon } from '../icon';
 
 export type TextFieldVariant = 'filled' | 'outlined';
 
@@ -11,8 +11,8 @@ type Props = {
   disabled?: boolean;
   errorText?: string | null;
   supportingText?: string;
-  trailingIcon?: React.ReactElement<typeof IconButton> | IconDefinition;
-  leadingIcon?: React.ReactElement<typeof IconButton> | IconDefinition;
+  trailingIcon?: React.ReactElement<typeof IconButton> | Icon;
+  leadingIcon?: React.ReactElement<typeof IconButton> | Icon;
   onChange?: (value: string) => void;
   showSupportingText?: boolean;
   suffix?: string;

package/src/lib/styles/navigation-rail-item.style.ts

@@ -5,12 +5,15 @@ export const navigationRailItemStyle =
   defaultClassNames<NavigationRailItemInterface>(
     'navigationRailItem',
     ({ isSelected, icon, label, variant }) => ({
-      navigationRailItem: classNames(' group flex flex-col  pt-1 pb-1.5 cursor-pointer', {
-        'text-on-surface-variant': !isSelected,
-        'text-on-secondary-container': isSelected,
-        'gap-2  h-[68px]': variant == 'vertical',
-        'gap-0  h-[66px]': variant == 'horizontal',
-      }),
+      navigationRailItem: classNames(
+        ' group flex flex-col  pt-1 pb-1.5 cursor-pointer',
+        {
+          'text-on-surface-variant': !isSelected,
+          'text-on-secondary-container': isSelected,
+          'gap-2  h-[68px]': variant == 'vertical',
+          'gap-0  h-[66px]': variant == 'horizontal',
+        },
+      ),
       container: classNames(
         ' w-fit flex justify-center  relative rounded-full items-center mx-5',
         {
@@ -25,20 +28,20 @@ export const navigationRailItemStyle =
             'py-1 ': variant == 'vertical',
             'py-4 ': variant == 'horizontal',
           },
-        ]
+        ],
       ),
       stateLayer: classNames(
         '  absolute w-full rounded-full h-full left-0 top-0  ',
         {
           'group-state-on-surface': !isSelected,
           'group-state-on-secondary-container': isSelected,
-        }
+        },
       ),
 
       icon: classNames('size-6 flex'),
-      label: classNames('w-fit mx-auto', {
+      label: classNames('w-fit mx-auto text-nowrap', {
         'text-label-large ': variant == 'horizontal',
         'text-label-medium': variant == 'vertical',
       }),
-    })
+    }),
   );