diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx
index 73aec06cf439f..d4559f362ac97 100644
--- a/packages/canon/src/components/Grid/Grid.stories.tsx
+++ b/packages/canon/src/components/Grid/Grid.stories.tsx
@@ -61,6 +61,20 @@ export const Default: Story = {
),
};
+export const Test: Story = {
+ args: {
+ columns: 12,
+ gap: 'md',
+ },
+ render: args => (
+
+
+
+
+
+ ),
+};
+
export const LargeGap: Story = {
args: {
gap: 'lg',
diff --git a/packages/canon/src/components/Grid/Grid.tsx b/packages/canon/src/components/Grid/Grid.tsx
index 2b61d1d3d4c56..67c9c54855972 100644
--- a/packages/canon/src/components/Grid/Grid.tsx
+++ b/packages/canon/src/components/Grid/Grid.tsx
@@ -16,62 +16,54 @@
import { createElement, forwardRef } from 'react';
import { GridItemProps, GridProps } from './types';
-import { gridItemSprinkles, gridSprinkles } from './sprinkles.css';
+import { getClassNames } from '../../utils/getClassNames';
const GridBase = forwardRef((props, ref) => {
const {
children,
- columns,
gap = 'xs',
+ columns = 'auto',
className,
style,
...restProps
} = props;
- const sprinklesClassName = gridSprinkles({
- ...restProps,
- gap,
- gridTemplateColumns: columns ? columns : 'auto',
- });
+ const utilityClassNames = getClassNames({ gap, columns, ...restProps });
- const classNames = ['grid', sprinklesClassName, className]
+ const classNames = ['canon-grid', utilityClassNames, className]
.filter(Boolean)
.join(' ');
- return createElement(
- 'div',
- {
- ref,
- className: classNames,
- style,
- },
+ return createElement('div', {
+ ref,
+ className: classNames,
+ style,
children,
- );
+ });
});
const GridItem = forwardRef((props, ref) => {
- const { children, rowSpan, colSpan, start, end, className, style } = props;
+ const { children, className, style, ...restProps } = props;
- const sprinklesClassName = gridItemSprinkles({
- rowSpan,
- colSpan,
- start,
- end,
- });
+ const utilityClassNames = getClassNames(restProps);
- const classNames = ['grid-item', sprinklesClassName, className]
+ // const sprinklesClassName = gridItemSprinkles({
+ // rowSpan,
+ // colSpan,
+ // start,
+ // end,
+ // });
+
+ const classNames = ['grid-item', utilityClassNames, className]
.filter(Boolean)
.join(' ');
- return createElement(
- 'div',
- {
- ref,
- className: classNames,
- style,
- },
+ return createElement('div', {
+ ref,
+ className: classNames,
+ style,
children,
- );
+ });
});
/** @public */
diff --git a/packages/canon/src/components/Grid/styles.css b/packages/canon/src/components/Grid/styles.css
index 81f8d5471d37f..8314f896bcfa8 100644
--- a/packages/canon/src/components/Grid/styles.css
+++ b/packages/canon/src/components/Grid/styles.css
@@ -1,3 +1,3 @@
-.grid {
+.canon-grid {
display: grid;
}
diff --git a/packages/canon/src/components/Grid/types.ts b/packages/canon/src/components/Grid/types.ts
index 097ad105e8aa1..4e154f03b77bb 100644
--- a/packages/canon/src/components/Grid/types.ts
+++ b/packages/canon/src/components/Grid/types.ts
@@ -13,27 +13,25 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { ColorProps } from '../../layout/types';
-import { SpaceProps } from '../../layout/types';
-import type { Breakpoint } from '../../types';
-/** @public */
-export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+import type { UtilityProps, SpaceProps } from '../../types';
/** @public */
-export interface GridProps extends SpaceProps, ColorProps {
+export interface GridProps extends SpaceProps {
children?: React.ReactNode;
- columns?: Columns | Partial>;
className?: string;
+ columns?: UtilityProps['columns'];
+ gap?: UtilityProps['gap'];
style?: React.CSSProperties;
}
/** @public */
export interface GridItemProps {
children: React.ReactNode;
- rowSpan?: Columns | 'full';
- colSpan?: Columns | 'full';
- start?: Columns | 'auto';
- end?: Columns | 'auto';
className?: string;
+ colSpan?: UtilityProps['colSpan'];
+ colEnd?: UtilityProps['colEnd'];
+ colStart?: UtilityProps['colStart'];
+ rowSpan?: UtilityProps['rowSpan'];
style?: React.CSSProperties;
}
diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css
index 91013ab78e45f..9ee818e0525d7 100644
--- a/packages/canon/src/css/utilities/2xl.css
+++ b/packages/canon/src/css/utilities/2xl.css
@@ -612,5 +612,57 @@
.cu-2xl-wrap-reverse {
flex-wrap: wrap-reverse;
}
+
+ .cu-2xl-grid-cols-1 {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ }
+
+ .cu-2xl-grid-cols-2 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .cu-2xl-grid-cols-3 {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+
+ .cu-2xl-grid-cols-4 {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+
+ .cu-2xl-grid-cols-5 {
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ }
+
+ .cu-2xl-grid-cols-6 {
+ grid-template-columns: repeat(6, minmax(0, 1fr));
+ }
+
+ .cu-2xl-grid-cols-7 {
+ grid-template-columns: repeat(7, minmax(0, 1fr));
+ }
+
+ .cu-2xl-grid-cols-8 {
+ grid-template-columns: repeat(8, minmax(0, 1fr));
+ }
+
+ .cu-2xl-grid-cols-9 {
+ grid-template-columns: repeat(9, minmax(0, 1fr));
+ }
+
+ .cu-2xl-grid-cols-10 {
+ grid-template-columns: repeat(10, minmax(0, 1fr));
+ }
+
+ .cu-2xl-grid-cols-11 {
+ grid-template-columns: repeat(11, minmax(0, 1fr));
+ }
+
+ .cu-2xl-grid-cols-12 {
+ grid-template-columns: repeat(12, minmax(0, 1fr));
+ }
+
+ .cu-2xl-grid-cols-auto {
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+ }
}
}
diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css
index 673c55885eba0..0bedcdddd25cc 100644
--- a/packages/canon/src/css/utilities/lg.css
+++ b/packages/canon/src/css/utilities/lg.css
@@ -612,5 +612,57 @@
.cu-lg-wrap-reverse {
flex-wrap: wrap-reverse;
}
+
+ .cu-lg-grid-cols-1 {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ }
+
+ .cu-lg-grid-cols-2 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .cu-lg-grid-cols-3 {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+
+ .cu-lg-grid-cols-4 {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+
+ .cu-lg-grid-cols-5 {
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ }
+
+ .cu-lg-grid-cols-6 {
+ grid-template-columns: repeat(6, minmax(0, 1fr));
+ }
+
+ .cu-lg-grid-cols-7 {
+ grid-template-columns: repeat(7, minmax(0, 1fr));
+ }
+
+ .cu-lg-grid-cols-8 {
+ grid-template-columns: repeat(8, minmax(0, 1fr));
+ }
+
+ .cu-lg-grid-cols-9 {
+ grid-template-columns: repeat(9, minmax(0, 1fr));
+ }
+
+ .cu-lg-grid-cols-10 {
+ grid-template-columns: repeat(10, minmax(0, 1fr));
+ }
+
+ .cu-lg-grid-cols-11 {
+ grid-template-columns: repeat(11, minmax(0, 1fr));
+ }
+
+ .cu-lg-grid-cols-12 {
+ grid-template-columns: repeat(12, minmax(0, 1fr));
+ }
+
+ .cu-lg-grid-cols-auto {
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+ }
}
}
diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css
index 4772943947432..ae163d9275762 100644
--- a/packages/canon/src/css/utilities/md.css
+++ b/packages/canon/src/css/utilities/md.css
@@ -612,5 +612,57 @@
.cu-md-wrap-reverse {
flex-wrap: wrap-reverse;
}
+
+ .cu-md-grid-cols-1 {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ }
+
+ .cu-md-grid-cols-2 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .cu-md-grid-cols-3 {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+
+ .cu-md-grid-cols-4 {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+
+ .cu-md-grid-cols-5 {
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ }
+
+ .cu-md-grid-cols-6 {
+ grid-template-columns: repeat(6, minmax(0, 1fr));
+ }
+
+ .cu-md-grid-cols-7 {
+ grid-template-columns: repeat(7, minmax(0, 1fr));
+ }
+
+ .cu-md-grid-cols-8 {
+ grid-template-columns: repeat(8, minmax(0, 1fr));
+ }
+
+ .cu-md-grid-cols-9 {
+ grid-template-columns: repeat(9, minmax(0, 1fr));
+ }
+
+ .cu-md-grid-cols-10 {
+ grid-template-columns: repeat(10, minmax(0, 1fr));
+ }
+
+ .cu-md-grid-cols-11 {
+ grid-template-columns: repeat(11, minmax(0, 1fr));
+ }
+
+ .cu-md-grid-cols-12 {
+ grid-template-columns: repeat(12, minmax(0, 1fr));
+ }
+
+ .cu-md-grid-cols-auto {
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+ }
}
}
diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css
index d3ffc68b44d6d..4ddb1b945269d 100644
--- a/packages/canon/src/css/utilities/sm.css
+++ b/packages/canon/src/css/utilities/sm.css
@@ -612,5 +612,57 @@
.cu-sm-wrap-reverse {
flex-wrap: wrap-reverse;
}
+
+ .cu-sm-grid-cols-1 {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ }
+
+ .cu-sm-grid-cols-2 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .cu-sm-grid-cols-3 {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+
+ .cu-sm-grid-cols-4 {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+
+ .cu-sm-grid-cols-5 {
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ }
+
+ .cu-sm-grid-cols-6 {
+ grid-template-columns: repeat(6, minmax(0, 1fr));
+ }
+
+ .cu-sm-grid-cols-7 {
+ grid-template-columns: repeat(7, minmax(0, 1fr));
+ }
+
+ .cu-sm-grid-cols-8 {
+ grid-template-columns: repeat(8, minmax(0, 1fr));
+ }
+
+ .cu-sm-grid-cols-9 {
+ grid-template-columns: repeat(9, minmax(0, 1fr));
+ }
+
+ .cu-sm-grid-cols-10 {
+ grid-template-columns: repeat(10, minmax(0, 1fr));
+ }
+
+ .cu-sm-grid-cols-11 {
+ grid-template-columns: repeat(11, minmax(0, 1fr));
+ }
+
+ .cu-sm-grid-cols-12 {
+ grid-template-columns: repeat(12, minmax(0, 1fr));
+ }
+
+ .cu-sm-grid-cols-auto {
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+ }
}
}
diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css
index 0ac56c7de193d..8a7130e1a1ffb 100644
--- a/packages/canon/src/css/utilities/xl.css
+++ b/packages/canon/src/css/utilities/xl.css
@@ -612,5 +612,57 @@
.cu-xl-wrap-reverse {
flex-wrap: wrap-reverse;
}
+
+ .cu-xl-grid-cols-1 {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ }
+
+ .cu-xl-grid-cols-2 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .cu-xl-grid-cols-3 {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+
+ .cu-xl-grid-cols-4 {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+
+ .cu-xl-grid-cols-5 {
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ }
+
+ .cu-xl-grid-cols-6 {
+ grid-template-columns: repeat(6, minmax(0, 1fr));
+ }
+
+ .cu-xl-grid-cols-7 {
+ grid-template-columns: repeat(7, minmax(0, 1fr));
+ }
+
+ .cu-xl-grid-cols-8 {
+ grid-template-columns: repeat(8, minmax(0, 1fr));
+ }
+
+ .cu-xl-grid-cols-9 {
+ grid-template-columns: repeat(9, minmax(0, 1fr));
+ }
+
+ .cu-xl-grid-cols-10 {
+ grid-template-columns: repeat(10, minmax(0, 1fr));
+ }
+
+ .cu-xl-grid-cols-11 {
+ grid-template-columns: repeat(11, minmax(0, 1fr));
+ }
+
+ .cu-xl-grid-cols-12 {
+ grid-template-columns: repeat(12, minmax(0, 1fr));
+ }
+
+ .cu-xl-grid-cols-auto {
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+ }
}
}
diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css
index 7276e59c46c11..f278d96a7c8f9 100644
--- a/packages/canon/src/css/utilities/xs.css
+++ b/packages/canon/src/css/utilities/xs.css
@@ -611,4 +611,56 @@
.cu-wrap-reverse {
flex-wrap: wrap-reverse;
}
+
+ .cu-grid-cols-1 {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ }
+
+ .cu-grid-cols-2 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .cu-grid-cols-3 {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+
+ .cu-grid-cols-4 {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+
+ .cu-grid-cols-5 {
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ }
+
+ .cu-grid-cols-6 {
+ grid-template-columns: repeat(6, minmax(0, 1fr));
+ }
+
+ .cu-grid-cols-7 {
+ grid-template-columns: repeat(7, minmax(0, 1fr));
+ }
+
+ .cu-grid-cols-8 {
+ grid-template-columns: repeat(8, minmax(0, 1fr));
+ }
+
+ .cu-grid-cols-9 {
+ grid-template-columns: repeat(9, minmax(0, 1fr));
+ }
+
+ .cu-grid-cols-10 {
+ grid-template-columns: repeat(10, minmax(0, 1fr));
+ }
+
+ .cu-grid-cols-11 {
+ grid-template-columns: repeat(11, minmax(0, 1fr));
+ }
+
+ .cu-grid-cols-12 {
+ grid-template-columns: repeat(12, minmax(0, 1fr));
+ }
+
+ .cu-grid-cols-auto {
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+ }
}
diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts
index 1f2ce8c02bce9..fbb3c408649e4 100644
--- a/packages/canon/src/types.ts
+++ b/packages/canon/src/types.ts
@@ -56,15 +56,10 @@ export type BorderRadius =
export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected';
/** @public */
-export interface UtilityProps {
- alignItems?: AlignItems | Partial>;
- border?: Border | Partial>;
- borderRadius?: BorderRadius | Partial>;
- display?: Display | Partial>;
- flexDirection?: FlexDirection | Partial>;
- flexWrap?: FlexWrap | Partial>;
- gap?: Space | Partial>;
- justifyContent?: JustifyContent | Partial>;
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
+
+/** @public */
+export interface SpaceProps {
margin?: Space | Partial>;
marginBottom?: Space | Partial>;
marginLeft?: Space | Partial>;
@@ -80,3 +75,20 @@ export interface UtilityProps {
paddingX?: Space | Partial>;
paddingY?: Space | Partial>;
}
+
+/** @public */
+export interface UtilityProps extends SpaceProps {
+ alignItems?: AlignItems | Partial>;
+ border?: Border | Partial>;
+ borderRadius?: BorderRadius | Partial>;
+ display?: Display | Partial>;
+ flexDirection?: FlexDirection | Partial>;
+ flexWrap?: FlexWrap | Partial>;
+ gap?: Space | Partial>;
+ justifyContent?: JustifyContent | Partial>;
+ columns?: Columns | Partial>;
+ rowSpan?: Columns | 'full' | Partial>;
+ colSpan?: Columns | 'full' | Partial>;
+ colStart?: Columns | 'auto' | Partial>;
+ colEnd?: Columns | 'auto' | Partial>;
+}
diff --git a/packages/canon/src/utils/getClassNames.ts b/packages/canon/src/utils/getClassNames.ts
index 9beb63d24ed94..47584f35ece6a 100644
--- a/packages/canon/src/utils/getClassNames.ts
+++ b/packages/canon/src/utils/getClassNames.ts
@@ -27,6 +27,89 @@ const spaceMap = (type: string) => ({
});
const valueMap: Record> = {
+ alignItems: {
+ stretch: 'items-stretch',
+ start: 'items-start',
+ center: 'items-center',
+ end: 'items-end',
+ },
+ border: {
+ none: 'border-none',
+ base: 'border-base',
+ error: 'border-error',
+ warning: 'border-warning',
+ selected: 'border-selected',
+ },
+ borderRadius: {
+ none: 'rounded-none',
+ '2xs': 'rounded-2xs',
+ xs: 'rounded-xs',
+ sm: 'rounded-sm',
+ md: 'rounded-md',
+ lg: 'rounded-lg',
+ xl: 'rounded-xl',
+ '2xl': 'rounded-2xl',
+ },
+ colEnd: {
+ 1: 'col-end-1',
+ 2: 'col-end-2',
+ 3: 'col-end-3',
+ 4: 'col-end-4',
+ 5: 'col-end-5',
+ 6: 'col-end-6',
+ 7: 'col-end-7',
+ 8: 'col-end-8',
+ 9: 'col-end-9',
+ 10: 'col-end-10',
+ 11: 'col-end-11',
+ 12: 'col-end-12',
+ auto: 'col-end-auto',
+ },
+ colSpan: {
+ 1: 'col-span-1',
+ 2: 'col-span-2',
+ 3: 'col-span-3',
+ 4: 'col-span-4',
+ 5: 'col-span-5',
+ 6: 'col-span-6',
+ 7: 'col-span-7',
+ 8: 'col-span-8',
+ 9: 'col-span-9',
+ 10: 'col-span-10',
+ 11: 'col-span-11',
+ 12: 'col-span-12',
+ auto: 'col-span-auto',
+ },
+ colStart: {
+ 1: 'col-start-1',
+ 2: 'col-start-2',
+ 3: 'col-start-3',
+ 4: 'col-start-4',
+ 5: 'col-start-5',
+ 6: 'col-start-6',
+ 7: 'col-start-7',
+ 8: 'col-start-8',
+ 9: 'col-start-9',
+ 10: 'col-start-10',
+ 11: 'col-start-11',
+ 12: 'col-start-12',
+ auto: 'col-start-auto',
+ },
+ columns: {
+ 1: 'grid-cols-1',
+ 2: 'grid-cols-2',
+ 3: 'grid-cols-3',
+ 4: 'grid-cols-4',
+ 5: 'grid-cols-5',
+ 6: 'grid-cols-6',
+ 7: 'grid-cols-7',
+ 8: 'grid-cols-8',
+ 9: 'grid-cols-9',
+ 10: 'grid-cols-10',
+ 11: 'grid-cols-11',
+ 12: 'grid-cols-12',
+ auto: 'grid-cols-auto',
+ },
display: {
none: 'hidden',
flex: 'flex',
@@ -42,6 +125,7 @@ const valueMap: Record> = {
nowrap: 'flex-nowrap',
'wrap-reverse': 'flex-wrap-reverse',
},
+ gap: spaceMap('gap'),
justifyContent: {
stretch: 'justify-stretch',
start: 'justify-start',
@@ -50,44 +134,35 @@ const valueMap: Record> = {
around: 'justify-around',
between: 'justify-between',
},
- alignItems: {
- stretch: 'items-stretch',
- start: 'items-start',
- center: 'items-center',
- end: 'items-end',
- },
- borderRadius: {
- none: 'rounded-none',
- '2xs': 'rounded-2xs',
- xs: 'rounded-xs',
- sm: 'rounded-sm',
- md: 'rounded-md',
- lg: 'rounded-lg',
- xl: 'rounded-xl',
- '2xl': 'rounded-2xl',
- },
- border: {
- none: 'border-none',
- base: 'border-base',
- error: 'border-error',
- warning: 'border-warning',
- selected: 'border-selected',
- },
- padding: spaceMap('p'),
- paddingX: spaceMap('px'),
- paddingY: spaceMap('py'),
- paddingLeft: spaceMap('pl'),
- paddingRight: spaceMap('pr'),
- paddingTop: spaceMap('pt'),
- paddingBottom: spaceMap('pb'),
margin: spaceMap('m'),
- marginX: spaceMap('mx'),
- marginY: spaceMap('my'),
+ marginBottom: spaceMap('mb'),
marginLeft: spaceMap('ml'),
marginRight: spaceMap('mr'),
marginTop: spaceMap('mt'),
- marginBottom: spaceMap('mb'),
- gap: spaceMap('gap'),
+ marginX: spaceMap('mx'),
+ marginY: spaceMap('my'),
+ padding: spaceMap('p'),
+ paddingBottom: spaceMap('pb'),
+ paddingLeft: spaceMap('pl'),
+ paddingRight: spaceMap('pr'),
+ paddingTop: spaceMap('pt'),
+ paddingX: spaceMap('px'),
+ paddingY: spaceMap('py'),
+ rowSpan: {
+ 1: 'row-span-1',
+ 2: 'row-span-2',
+ 3: 'row-span-3',
+ 4: 'row-span-4',
+ 5: 'row-span-5',
+ 6: 'row-span-6',
+ 7: 'row-span-7',
+ 8: 'row-span-8',
+ 9: 'row-span-9',
+ 10: 'row-span-10',
+ 11: 'row-span-11',
+ 12: 'row-span-12',
+ full: 'row-span-full',
+ },
};
const generateClassNames = (propName: string, propValue: any) => {
@@ -98,7 +173,7 @@ const generateClassNames = (propName: string, propValue: any) => {
return classNames;
}
- if (typeof propValue === 'string') {
+ if (typeof propValue === 'string' || typeof propValue === 'number') {
// If the property value is a string, map it to the valueMap
const value = valueMap[propName]?.[propValue] || propValue;
classNames.push(`cu-${value}`);