react-native-molecules 0.5.0-beta.22 → 0.5.0-beta.24

package/components/Accordion/Accordion.tsx

@@ -1,3 +1,4 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import {
     type ComponentPropsWithRef,
     createContext,
@@ -9,7 +10,6 @@ import {
 } from 'react';
 import { View } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
 import { accordionStyles } from './utils';
 
 export type Props = Omit<ComponentPropsWithRef<typeof View>, 'children'> & {

package/components/Accordion/AccordionItem.tsx

@@ -1,3 +1,4 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import {
     forwardRef,
     memo,
@@ -9,7 +10,6 @@ import {
 } from 'react';
 import { View, type ViewProps } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
 import type { WithElements } from '../../types';
 import { extractSubcomponents } from '../../utils/extractSubcomponents';
 import { AccordionContext } from './Accordion';

package/components/Button/Button.tsx

@@ -81,6 +81,8 @@ export type Props = Omit<SurfaceProps, 'style'> &
         disabledPress?: boolean;
     };
 
+const emptyObj = {};
+
 const Button = (
     {
         disabled = false,
@@ -97,7 +99,7 @@ const Button = (
         style: styleProp,
         testID,
         accessible,
-        stateLayerProps = {},
+        stateLayerProps = emptyObj,
         elevation: elevationProp,
         textRelatedStyle,
         disabledPress,

package/components/Checkbox/Checkbox.tsx

@@ -1,7 +1,7 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { forwardRef, memo, useCallback, useMemo } from 'react';
 import { View } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { Text } from '../Text';
 import CheckboxBase from './CheckboxBase';
@@ -50,6 +50,7 @@ const Checkbox = (
             // @ts-ignore // TODO - fix this
             state: state as States,
             isLeading,
+            // @ts-ignore // TODO - fix this
             size,
         });
     }

package/components/DateField/useDateFieldState.ts

@@ -1,9 +1,9 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { type RefObject, useCallback, useEffect, useState } from 'react';
 import type { BlurEvent, FocusEvent } from 'react-native';
 
-import { useLatest } from '../../hooks';
 import { endOfDay, format, isValid, parse } from '../../utils/date-fns';
-import { isNil } from '../../utils/lodash';
 import type { ValidRangeType } from '../DatePickerInline';
 import { useRangeChecker } from '../DatePickerInline/dateUtils';
 

package/components/DatePicker/DatePickerProvider.tsx

@@ -1,8 +1,8 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import type { ReactNode } from 'react';
 import { memo, useCallback, useMemo, useRef, useState } from 'react';
 
 import { getRegisteredComponentWithFallback } from '../../core';
-import { useControlledValue } from '../../hooks';
 import type { ValidRangeType } from '../DatePickerInline';
 import type {
     DatePickerContextType,

package/components/DatePicker/utils.ts

@@ -232,6 +232,8 @@ const datePickerPopoverMonthItemStylesDefault = StyleSheet.create(theme => ({
         width: '100%',
         overflow: 'hidden',
         padding: theme.spacings['0'],
+        justifyContent: 'flex-start',
+
         variants: {
             state: {
                 selected: {

package/components/DatePickerInline/DatePickerInline.tsx

@@ -1,7 +1,7 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback } from 'react';
 import { View, type ViewStyle } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
 import DatePickerDockedHeader from './DatePickerDockedHeader';
 import DatePickerInlineBase from './DatePickerInlineBase';
 import DatePickerInlineHeader from './DatePickerInlineHeader';

package/components/DatePickerInline/DatePickerInlineBase.tsx

@@ -1,7 +1,7 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useEffect, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { useLatest } from '../../hooks';
 import { areDatesOnSameDay, dateToUnix, getEndOfDay, getInitialIndex } from './dateUtils';
 import Month from './Month';
 import MonthPicker from './MonthPicker';

package/components/DatePickerInline/Day.tsx

@@ -1,7 +1,7 @@
 import { memo, useCallback, useMemo } from 'react';
 import { type StyleProp, View, type ViewStyle } from 'react-native';
 
-import { useActionState } from '../../hooks/useActionState';
+import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { StateLayer } from '../StateLayer';
 import { Text } from '../Text';

package/components/DatePickerInline/MonthPicker.tsx

@@ -1,6 +1,6 @@
 import { setMonth } from 'date-fns';
 import { memo, useCallback, useMemo } from 'react';
-import { FlatList, type FlatListProps, View, type ViewStyle } from 'react-native';
+import { FlatList, View, type ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { resolveStateVariant } from '../../utils';
@@ -9,7 +9,7 @@ import type { DatePickerLocale } from '../DatePicker/context';
 import { datePickerMonthItemStyles, datePickerMonthPickerStyles } from '../DatePicker/utils';
 import { Divider } from '../Divider';
 import { Icon } from '../Icon';
-import { List, type ListContentProcessPropsArgs, useListContextValue } from '../List';
+import { List, type ListItemId, useListContextValue } from '../List';
 import { Text } from '../Text';
 import { useDatePickerInlineStore, useDatePickerInlineStoreValue } from './store';
 
@@ -28,48 +28,22 @@ export default function MonthPicker({ locale }: { locale?: DatePickerLocale }) {
     );
 
     const handleOnChange = useCallback(
-        (month: number | null) => {
-            if (month === null) return;
+        (value: ListItemId | null) => {
+            if (typeof value !== 'number') return;
             setStore(prev => ({
-                localDate: setMonth(prev.localDate, month),
+                localDate: setMonth(prev.localDate, value),
                 pickerType: undefined,
             }));
         },
         [setStore],
     );
 
-    const processFlatListProps = useCallback(
-        ({
-            props,
-            items,
-        }: ListContentProcessPropsArgs<
-            MonthListItem,
-            Omit<FlatListProps<MonthListItem>, 'children' | 'ref'>
-        >): FlatListProps<MonthListItem> => ({
-            ...props,
-            data: items,
-            renderItem: ({ item }) => (
-                <Month
-                    month={item.id}
-                    monthStyles={datePickerMonthPickerStyles.root}
-                    locale={locale}
-                />
-            ),
-            keyExtractor: item => `${item.id}`,
-        }),
-        [locale],
-    );
-
     if (!selectingMonth) {
         return null;
     }
 
     return (
-        <List
-            items={monthItems}
-            multiple={false}
-            value={localDate.getMonth()}
-            onChange={handleOnChange}>
+        <List multiple={false} value={localDate.getMonth()} onChange={handleOnChange}>
             <View
                 style={[
                     StyleSheet.absoluteFill,
@@ -78,10 +52,17 @@ export default function MonthPicker({ locale }: { locale?: DatePickerLocale }) {
                 ]}
                 pointerEvents={selectingMonth ? 'auto' : 'none'}>
                 <Divider />
-                <List.Content<MonthListItem, typeof FlatList<MonthListItem>>
-                    ContainerComponent={FlatList<MonthListItem>}
+                <FlatList<MonthListItem>
                     style={styles.list}
-                    processProps={processFlatListProps}
+                    data={monthItems}
+                    renderItem={({ item }) => (
+                        <Month
+                            month={item.id}
+                            monthStyles={datePickerMonthPickerStyles.root}
+                            locale={locale}
+                        />
+                    )}
+                    keyExtractor={item => `${item.id}`}
                 />
             </View>
         </List>
@@ -131,16 +112,16 @@ function MonthPure({
             accessibilityLabel={String(month)}
             accessibilityState={accessibilityState}
             style={monthButtonStyle}
-            testID={`pick-month-${month}`}
-            left={
-                isSelected ? (
+            testID={`pick-month-${month}`}>
+            <View style={styles.left}>
+                {isSelected ? (
                     <View style={styles.checkIconView}>
                         <Icon name="check" size={24} />
                     </View>
                 ) : (
                     <View style={styles.spacer} />
-                )
-            }>
+                )}
+            </View>
             <View style={datePickerMonthItemStyles.monthInner}>
                 <Text style={datePickerMonthItemStyles.monthLabel} selectable={false}>
                     {monthLabel}
@@ -165,6 +146,9 @@ const styles = StyleSheet.create(theme => ({
     spacer: {
         width: 44,
     },
+    left: {
+        marginRight: theme.spacings['2'],
+    },
 
     list: {
         flex: 1,

package/components/DatePickerInline/Swiper.tsx

@@ -1,3 +1,4 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import {
     type CSSProperties,
     memo,
@@ -10,7 +11,6 @@ import {
     useState,
 } from 'react';
 
-import { useLatest } from '../../hooks';
 import AutoSizer from './AutoSizer';
 import { beginOffset, estimatedMonthHeight, getInitialIndex, totalMonths } from './dateUtils';
 import { addMonths, getRealIndex } from './dateUtils';

package/components/DatePickerInline/SwiperUtils.ts

@@ -1,6 +1,6 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { type RefObject, useEffect } from 'react';
 
-import { useLatest } from '../../hooks';
 import { addMonths, differenceInMonths, getRealIndex, startAtIndex } from './dateUtils';
 
 export type SwiperProps = {

package/components/DatePickerInline/YearPicker.tsx

@@ -1,12 +1,12 @@
 import { setYear } from 'date-fns';
 import { memo, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
-import { FlatList, type FlatListProps, StyleSheet, View } from 'react-native';
+import { FlatList, StyleSheet, View } from 'react-native';
 
 import { getYearRange, resolveStateVariant } from '../../utils';
 import { datePickerMonthItemStyles, datePickerMonthPickerStyles } from '../DatePicker/utils';
 import { Divider } from '../Divider';
 import { Icon } from '../Icon';
-import { List, type ListContentProcessPropsArgs, useListContextValue } from '../List';
+import { List, type ListItemId, useListContextValue } from '../List';
 import { Text } from '../Text';
 import { useDatePickerInlineStore } from './store';
 import { datePickerYearItemStyles, datePickerYearPickerStyles } from './utils';
@@ -69,10 +69,10 @@ function YearPickerGrid() {
     }, [selectingYear]);
 
     const handleOnChange = useCallback(
-        (year: number | null) => {
-            if (year === null) return;
+        (value: ListItemId | null) => {
+            if (typeof value !== 'number') return;
             setStore(prev => ({
-                localDate: setYear(prev.localDate, year),
+                localDate: setYear(prev.localDate, value),
                 pickerType: undefined,
             }));
         },
@@ -88,48 +88,26 @@ function YearPickerGrid() {
         [],
     );
 
-    const processGridFlatListProps = useCallback(
-        ({
-            props,
-            items,
-            isEmpty,
-            emptyState,
-        }: ListContentProcessPropsArgs<
-            YearListItem,
-            Omit<FlatListProps<YearListItem>, 'children' | 'ref'>
-        >): FlatListProps<YearListItem> => ({
-            ...props,
-            data: items,
-            numColumns: NUM_COLUMNS,
-            contentContainerStyle: gridStyles.grid,
-            columnWrapperStyle: gridStyles.row,
-            renderItem: ({ item }) => (
-                <View style={gridStyles.cell}>
-                    <YearPill year={item.id} yearStyles={yearStyle} />
-                </View>
-            ),
-            keyExtractor: item => `${item.id}`,
-            getItemLayout: getRowLayout,
-            initialScrollIndex: Math.floor(initialScrollOffset / GRID_ITEM_HEIGHT),
-            removeClippedSubviews: true,
-            ListEmptyComponent: isEmpty
-                ? function GridListEmpty() {
-                      return <>{emptyState}</>;
-                  }
-                : undefined,
-        }),
-        [getRowLayout, initialScrollOffset, yearStyle],
-    );
-
     return (
-        <List items={yearItems} multiple={false} value={selectedYear} onChange={handleOnChange}>
+        <List multiple={false} value={selectedYear} onChange={handleOnChange}>
             <View style={containerStyle} pointerEvents={selectingYear ? 'auto' : 'none'}>
                 <Divider />
-                <List.Content<YearListItem, typeof FlatList<YearListItem>>
+                <FlatList<YearListItem>
                     ref={flatListRef}
-                    ContainerComponent={FlatList<YearListItem>}
                     style={gridStyles.list}
-                    processProps={processGridFlatListProps}
+                    data={yearItems}
+                    numColumns={NUM_COLUMNS}
+                    contentContainerStyle={gridStyles.grid}
+                    columnWrapperStyle={gridStyles.row}
+                    renderItem={({ item }) => (
+                        <View style={gridStyles.cell}>
+                            <YearPill year={item.id} yearStyles={yearStyle} />
+                        </View>
+                    )}
+                    keyExtractor={item => `${item.id}`}
+                    getItemLayout={getRowLayout}
+                    initialScrollIndex={Math.floor(initialScrollOffset / GRID_ITEM_HEIGHT)}
+                    removeClippedSubviews
                 />
             </View>
         </List>
@@ -149,17 +127,18 @@ function YearPillPure({ year, yearStyles }: { year: number; yearStyles: Record<s
     return (
         <List.Item
             value={year}
-            contentStyle={datePickerYearItemStyles.content}
             accessibilityRole="button"
             accessibilityLabel={String(year)}
             style={[yearStyles, datePickerYearItemStyles.yearButton]}
             testID={`pick-year-${year}`}>
-            <Text
-                typescale="bodyLarge"
-                style={datePickerYearItemStyles.yearLabel}
-                selectable={false}>
-                {year}
-            </Text>
+            <View style={datePickerYearItemStyles.content}>
+                <Text
+                    typescale="bodyLarge"
+                    style={datePickerYearItemStyles.yearLabel}
+                    selectable={false}>
+                    {year}
+                </Text>
+            </View>
         </List.Item>
     );
 }
@@ -186,10 +165,10 @@ function YearPickerList() {
     }, [selectedYear, years]);
 
     const handleOnChange = useCallback(
-        (year: number | null) => {
-            if (year === null) return;
+        (value: ListItemId | null) => {
+            if (typeof value !== 'number') return;
             setStore(prev => ({
-                localDate: setYear(prev.localDate, year),
+                localDate: setYear(prev.localDate, value),
                 pickerType: undefined,
             }));
         },
@@ -205,34 +184,19 @@ function YearPickerList() {
         [],
     );
 
-    const processFlatListProps = useCallback(
-        ({
-            props,
-            items,
-        }: ListContentProcessPropsArgs<
-            YearListItem,
-            Omit<FlatListProps<YearListItem>, 'children' | 'ref'>
-        >): FlatListProps<YearListItem> => ({
-            ...props,
-            data: items,
-            renderItem: ({ item }) => <YearRow year={item.id} />,
-            keyExtractor: item => `${item.id}`,
-            initialScrollIndex,
-            getItemLayout,
-        }),
-        [getItemLayout, initialScrollIndex],
-    );
-
     if (!selectingYear) return null;
 
     return (
-        <List items={yearItems} multiple={false} value={selectedYear} onChange={handleOnChange}>
+        <List multiple={false} value={selectedYear} onChange={handleOnChange}>
             <View style={[StyleSheet.absoluteFill, listStyles.root]} pointerEvents="auto">
                 <Divider />
-                <List.Content<YearListItem, typeof FlatList<YearListItem>>
-                    ContainerComponent={FlatList<YearListItem>}
+                <FlatList<YearListItem>
                     style={listStyles.list}
-                    processProps={processFlatListProps}
+                    data={yearItems}
+                    renderItem={({ item }) => <YearRow year={item.id} />}
+                    keyExtractor={item => `${item.id}`}
+                    initialScrollIndex={initialScrollIndex}
+                    getItemLayout={getItemLayout}
                 />
             </View>
         </List>
@@ -255,16 +219,16 @@ function YearRowPure({ year }: { year: number }) {
             accessibilityRole="button"
             accessibilityLabel={String(year)}
             style={datePickerMonthItemStyles.monthButton}
-            testID={`pick-year-${year}`}
-            left={
-                isSelected ? (
+            testID={`pick-year-${year}`}>
+            <View style={listStyles.left}>
+                {isSelected ? (
                     <View style={listStyles.checkIconView}>
                         <Icon name="check" size={24} />
                     </View>
                 ) : (
                     <View style={listStyles.spacer} />
-                )
-            }>
+                )}
+            </View>
             <View style={datePickerMonthItemStyles.monthInner}>
                 <Text style={datePickerMonthItemStyles.monthLabel} selectable={false}>
                     {year}
@@ -313,4 +277,5 @@ const listStyles = StyleSheet.create({
     list: { flex: 1 },
     checkIconView: { marginLeft: 16 },
     spacer: { width: 44 },
+    left: { marginRight: 8 },
 });

package/components/DatePickerInline/dateUtils.tsx

@@ -1,6 +1,6 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { useCallback } from 'react';
 
-import { useLatest } from '../../hooks';
 import type { CalendarDate, CalendarDates, ValidRangeType } from './types';
 
 export type DisableWeekDaysType = number[];

package/components/DatePickerInline/store.tsx

@@ -1,4 +1,5 @@
-import { createFastContext } from '../../fast-context';
+import { createFastContext } from '@react-native-molecules/utils/fast-context';
+
 import { registerPortalContext } from '../Portal/Portal';
 
 export type Store = {

package/components/Divider/index.tsx

@@ -1,11 +1,10 @@
 export {
     Divider,
+    type DividerProps,
     horizontalDividerStyles,
     horizontalDividerStylesDefault,
+    type Props,
     verticalDividerStyles,
     verticalDividerStylesDefault,
-    type DividerProps,
-    type Props,
 } from './Divider';
-
 export { default } from './Divider';

package/components/ElementGroup/ElementGroup.tsx

@@ -1,8 +1,8 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
 import { Children, cloneElement, forwardRef, memo, type ReactElement, useMemo } from 'react';
 import { View, type ViewProps, type ViewStyle } from 'react-native';
 
 import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
-import { isNil } from '../../utils/lodash';
 import { elementGroupStyles } from './utils';
 
 export enum Orientation {

package/components/FilePicker/FilePicker.tsx

@@ -1,6 +1,6 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useMemo } from 'react';
 
-import useControlledValue from '../../hooks/useControlledValue';
 import useFilePicker from '../../hooks/useFilePicker';
 import type { DocumentPickerOptions, DocumentResult } from '../../utils/DocumentPicker';
 import { IconButton } from '../IconButton';

package/components/Icon/iconFactory.tsx

@@ -1,5 +1,6 @@
 // import { textFactory } from '../Text/textFactory';
-import { memoize } from '../../utils/lodash';
+import { memoize } from '@react-native-molecules/utils/helpers/lodash';
+
 import type { IconType } from './types';
 
 const customIcons: any = {};

package/components/IconButton/IconButton.tsx

@@ -6,16 +6,20 @@ import {
     type ViewProps,
 } from 'react-native';
 
-import { useActionState } from '../../hooks/useActionState';
+import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { Icon, type IconProps, type IconType } from '../Icon';
 import CrossFadeIcon from '../Icon/CrossFadeIcon';
 import { StateLayer } from '../StateLayer';
 import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
-import type { IconButtonVariant } from './types';
+import type { IconButtonShape, IconButtonVariant, IconButtonWidth } from './types';
 import { defaultStyles, iconButtonSizeToIconSizeMap } from './utils';
 
-const whiteSpace = 12;
+const ICON_BUTTON_MIN_CONTAINER_SIZE = 32;
+const ICON_BUTTON_CONTAINER_PADDING = 16;
+const M3_ICON_BUTTON_NARROW_WIDTH_ADJUSTMENT = -8;
+const M3_ICON_BUTTON_WIDE_WIDTH_ADJUSTMENT = 12;
+const M3_ICON_BUTTON_SQUARE_CORNER_RADIUS = 12;
 
 export type Props = Omit<TouchableRippleProps, 'children' | 'style'> & {
     /**
@@ -26,6 +30,14 @@ export type Props = Omit<TouchableRippleProps, 'children' | 'style'> & {
      * Mode of the icon button. By default there is no specified mode - only pressable icon will be rendered.
      */
     variant?: IconButtonVariant;
+    /**
+     * Container shape. Material 3 supports round and square icon buttons.
+     */
+    shape?: IconButtonShape;
+    /**
+     * Container width option. `default` maps to Material 3's uniform width.
+     */
+    width?: IconButtonWidth;
     /**
      * Whether icon button is selected. A selected button receives alternative combination of icon and container colors.
      */
@@ -85,6 +97,8 @@ const IconButton = (
         selected = false,
         animated = false,
         variant = 'default',
+        shape = 'round',
+        width = 'default',
         style,
         testID,
         stateLayerProps = emptyObject,
@@ -126,33 +140,45 @@ const IconButton = (
     } = useMemo(() => {
         const iconSizeInNum =
             iconButtonSizeToIconSizeMap[size as keyof typeof iconButtonSizeToIconSizeMap] ??
-            (typeof size === 'number' && size ? (size as number) : undefined);
+            (typeof size === 'number' && size ? (size as number) : 24);
+        const containerHeight = Math.max(
+            ICON_BUTTON_MIN_CONTAINER_SIZE,
+            iconSizeInNum + ICON_BUTTON_CONTAINER_PADDING,
+        );
+        const widthAdjustment =
+            width === 'narrow'
+                ? M3_ICON_BUTTON_NARROW_WIDTH_ADJUSTMENT
+                : width === 'wide'
+                ? M3_ICON_BUTTON_WIDE_WIDTH_ADJUSTMENT
+                : 0;
+        const containerWidth = Math.max(iconSizeInNum, containerHeight + widthAdjustment);
+        const borderRadius =
+            shape === 'round' ? containerHeight / 2 : M3_ICON_BUTTON_SQUARE_CORNER_RADIUS;
 
         return {
             iconColor: _iconColor,
             iconSize: iconSizeInNum,
             containerStyle: [
-                iconSizeInNum
-                    ? {
-                          width: iconSizeInNum + whiteSpace,
-                          height: iconSizeInNum + whiteSpace,
-                      }
-                    : {},
                 defaultStyles.root,
+                {
+                    width: containerWidth,
+                    height: containerHeight,
+                    borderRadius,
+                },
                 style,
             ],
             iconStyle: [defaultStyles.icon, iconStyleProp],
             // accessibilityTraits: disabled ? ['button', 'disabled'] : 'button',
             accessibilityState: { disabled },
-            stateLayerStyle: [defaultStyles.stateLayer, stateLayerProps?.style],
+            stateLayerStyle: [defaultStyles.stateLayer, { borderRadius }, stateLayerProps?.style],
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [_iconColor, disabled, size, stateLayerProps?.style, style, state, variant]);
+    }, [_iconColor, disabled, shape, size, stateLayerProps?.style, style, state, variant, width]);
 
     return (
         <TouchableRipple
             borderless
-            centered
+            centered={shape === 'round' && width === 'default'}
             onPress={onPress}
             rippleAlpha={0.12}
             accessibilityLabel={accessibilityLabel}

package/components/IconButton/index.tsx

@@ -4,4 +4,5 @@ import IconButtonDefault from './IconButton';
 export const IconButton = getRegisteredComponentWithFallback('IconButton', IconButtonDefault);
 
 export type { Props as IconButtonProps } from './IconButton';
+export type * from './types';
 export { defaultStyles } from './utils';

package/components/IconButton/types.ts

@@ -1 +1,3 @@
 export type IconButtonVariant = 'default' | 'outlined' | 'contained' | 'contained-tonal';
+export type IconButtonShape = 'round' | 'square';
+export type IconButtonWidth = 'narrow' | 'default' | 'wide';