@udixio/ui-react 1.0.1 → 1.2.0

package/src/lib/interfaces/icon-button.interface.ts

@@ -2,11 +2,12 @@ import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { IconButtonVariant } from '../components/IconButton';
 import { ActionOrLink } from '../utils/component';
 import { Transition } from 'motion';
+import { Icon } from '../icon';
 
 type Props = {
   label?: string;
   children?: string;
-  icon: IconDefinition;
+  icon: Icon;
   size?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
   width?: 'default' | 'narrow' | 'wide';
   iconSelected?: IconDefinition;

package/src/lib/interfaces/navigation-rail-item.interface.ts

@@ -2,13 +2,14 @@ import { ActionOrLink } from '../utils';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { Dispatch, RefObject, SetStateAction } from 'react';
 import { Transition } from 'motion';
+import { Icon } from '../icon';
 
 export type NavProps = {
   selected?: boolean;
   variant?: 'vertical' | 'horizontal';
   label?: string;
   children?: string;
-  icon: IconDefinition;
+  icon: Icon;
   iconSelected: IconDefinition;
   selectedItem?: number | null;
   setSelectedItem?: Dispatch<SetStateAction<number | null>>;

package/src/lib/interfaces/navigation-rail.interface.ts

@@ -1,11 +1,11 @@
 import { Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { Transition } from 'motion';
 import { ReactProps } from '../utils';
 import { NavigationRailItemInterface } from './navigation-rail-item.interface';
+import { Icon } from '../icon';
 
 type MenuState = {
-  icon: IconDefinition;
+  icon: Icon;
   label: string;
 };
 
@@ -19,7 +19,7 @@ export interface NavigationRailInterface {
         'label' | 'icon'
       > & {
           ref: RefObject<any>;
-        }
+        },
     ) => void;
     children: ReactNode;
     selectedItem?: number | null;

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

@@ -1,4 +1,4 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { Icon } from '../icon';
 
 export interface SnackbarInterface {
   type: 'div';
@@ -6,7 +6,7 @@ export interface SnackbarInterface {
     duration?: number;
     onClose?: () => void;
     message: string;
-    closeIcon?: IconDefinition;
+    closeIcon?: Icon;
   };
   states: { isVisible: boolean };
   elements: ['snackbar', 'container', 'supportingText', 'action', 'icon'];

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

@@ -5,6 +5,7 @@ export const buttonStyle = defaultClassNames<ButtonInterface>(
   'button',
   ({
     variant,
+    disableTextMargins,
     disabled,
     iconPosition,
     icon,
@@ -76,15 +77,17 @@ export const buttonStyle = defaultClassNames<ButtonInterface>(
           'text-primary': !disabled,
           'text-on-surface/[0.38]': disabled,
         },
-        size === 'xSmall' && '-mx-3 ',
-        size === 'small' && '-mx-4 ',
-        size === 'medium' && '-mx-6 ',
-        size === 'large' && '-mx-12',
-        size === 'xLarge' && '-mx-16 ',
-        // size === 'small' && ' -my-2.5',
-        // size === 'medium' && ' -my-4',
-        // size === 'large' && '-my-8',
-        // size === 'xLarge' && ' -my-12',
+        disableTextMargins && [
+          size === 'xSmall' && '-mx-3 ',
+          size === 'small' && '-mx-4 ',
+          size === 'medium' && '-mx-6 ',
+          size === 'large' && '-mx-12',
+          size === 'xLarge' && '-mx-16 ',
+          // size === 'small' && ' -my-2.5',
+          // size === 'medium' && ' -my-4',
+          // size === 'large' && '-my-8',
+          // size === 'xLarge' && ' -my-12',
+        ],
       ],
       disabled && 'cursor-default',
     ),

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',
       }),
-    })
+    }),
   );