@descope/flow-components 2.0.428 → 2.0.430

package/dist/dts/Container/Container.d.ts

@@ -17,12 +17,13 @@ type ContainerAlignment = {
 type Props = {
     direction?: 'row' | 'column';
     shadow?: 'md' | 'lg' | 'xl' | '2xl';
-    'border-radius'?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
     paddingX?: string;
     paddingY?: string;
     background?: string;
     backgroundImageUrl?: string;
     width?: string;
+    variant?: string;
 } & ((Flex & Never<ContainerAlignment>) | (ContainerAlignment & Never<Flex>));
 declare global {
     namespace React.JSX {

package/dist/dts/inputHelpers.d.ts

@@ -1 +1,2 @@
 export declare function handleCustomValidationMessages(): void;
+export declare const isNumeric: (value?: string) => boolean;

package/dist/index.cjs.js

@@ -100,6 +100,8 @@ const Button = React__default.default.forwardRef(({ children, startIcon, startIc
 
 const Code = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-passcode", { ref: ref, ...props }));
 
+const isNumeric = (value) => /^\d*\.?\d+$/.test(value);
+
 const justifyContent = {
     start: 'flex-start',
     center: 'safe center',
@@ -115,21 +117,45 @@ const alignItems = {
     baseline: 'baseline',
     stretch: 'stretch'
 };
-const Container = React__default.default.forwardRef(({ background, justify, paddingX = '0', paddingY = '0', shadow, width, align, spaceBetween, backgroundImageUrl, direction = 'row', ...props }, ref) => {
+const applyDefaults = ({ paddingX, paddingY, align, justify, background, spaceBetween }) => ({
+    'st-horizontal-padding': !paddingX || isNumeric(paddingX)
+        ? `${Number.parseInt(paddingX || '0', 10) / 4}rem`
+        : paddingX,
+    'st-vertical-padding': !paddingY || isNumeric(paddingY)
+        ? `${Number.parseInt(paddingY || '0', 10) / 4}rem`
+        : paddingY,
+    'st-align-items': alignItems[align],
+    'st-justify-content': justifyContent[justify],
+    'st-background-color': background,
+    ...(spaceBetween
+        ? {
+            'st-gap': isNumeric(spaceBetween)
+                ? `${Number.parseFloat(spaceBetween || '0') / 4}rem`
+                : spaceBetween
+        }
+        : {})
+});
+const Container = React__default.default.forwardRef(({ background, justify, paddingX, paddingY, shadow, width, align, spaceBetween, backgroundImageUrl, direction = 'row', variant, borderRadius, ...props }, ref) => {
     const mergedProps = {
         ...props,
         direction,
         shadow,
-        'st-horizontal-padding': `${Number.parseInt(paddingX, 10) / 4}rem`,
-        'st-vertical-padding': `${Number.parseInt(paddingY, 10) / 4}rem`,
-        'st-align-items': alignItems[align],
-        'st-justify-content': justifyContent[justify],
-        'st-background-color': background,
+        variant,
+        'border-radius': borderRadius || props['border-radius'],
+        'st-host-width': width || '100%',
         'st-background-image': backgroundImageUrl?.trim()
             ? `url('${backgroundImageUrl.trim()}')`
             : undefined,
-        'st-host-width': width,
-        'st-gap': spaceBetween && `${Number.parseFloat(spaceBetween) / 4}rem`
+        ...(variant
+            ? {}
+            : applyDefaults({
+                paddingX,
+                paddingY,
+                align,
+                justify,
+                background,
+                spaceBetween
+            }))
     };
     // eslint-disable-next-line react/jsx-props-no-spreading
     return React__default.default.createElement("descope-container", { ...mergedProps, ref: ref });

package/dist/index.d.ts

@@ -105,12 +105,13 @@ type ContainerAlignment = {
 type Props$C = {
     direction?: 'row' | 'column';
     shadow?: 'md' | 'lg' | 'xl' | '2xl';
-    'border-radius'?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
     paddingX?: string;
     paddingY?: string;
     background?: string;
     backgroundImageUrl?: string;
     width?: string;
+    variant?: string;
 } & ((Flex & Never<ContainerAlignment>) | (ContainerAlignment & Never<Flex>));
 declare global {
     namespace React.JSX {

package/dist/index.esm.js

@@ -95,6 +95,8 @@ const Button = React.forwardRef(({ children, startIcon, startIconColorText, colo
 
 const Code = React.forwardRef((props, ref) => React.createElement("descope-passcode", { ref: ref, ...props }));
 
+const isNumeric = (value) => /^\d*\.?\d+$/.test(value);
+
 const justifyContent = {
     start: 'flex-start',
     center: 'safe center',
@@ -110,21 +112,45 @@ const alignItems = {
     baseline: 'baseline',
     stretch: 'stretch'
 };
-const Container = React.forwardRef(({ background, justify, paddingX = '0', paddingY = '0', shadow, width, align, spaceBetween, backgroundImageUrl, direction = 'row', ...props }, ref) => {
+const applyDefaults = ({ paddingX, paddingY, align, justify, background, spaceBetween }) => ({
+    'st-horizontal-padding': !paddingX || isNumeric(paddingX)
+        ? `${Number.parseInt(paddingX || '0', 10) / 4}rem`
+        : paddingX,
+    'st-vertical-padding': !paddingY || isNumeric(paddingY)
+        ? `${Number.parseInt(paddingY || '0', 10) / 4}rem`
+        : paddingY,
+    'st-align-items': alignItems[align],
+    'st-justify-content': justifyContent[justify],
+    'st-background-color': background,
+    ...(spaceBetween
+        ? {
+            'st-gap': isNumeric(spaceBetween)
+                ? `${Number.parseFloat(spaceBetween || '0') / 4}rem`
+                : spaceBetween
+        }
+        : {})
+});
+const Container = React.forwardRef(({ background, justify, paddingX, paddingY, shadow, width, align, spaceBetween, backgroundImageUrl, direction = 'row', variant, borderRadius, ...props }, ref) => {
     const mergedProps = {
         ...props,
         direction,
         shadow,
-        'st-horizontal-padding': `${Number.parseInt(paddingX, 10) / 4}rem`,
-        'st-vertical-padding': `${Number.parseInt(paddingY, 10) / 4}rem`,
-        'st-align-items': alignItems[align],
-        'st-justify-content': justifyContent[justify],
-        'st-background-color': background,
+        variant,
+        'border-radius': borderRadius || props['border-radius'],
+        'st-host-width': width || '100%',
         'st-background-image': backgroundImageUrl?.trim()
             ? `url('${backgroundImageUrl.trim()}')`
             : undefined,
-        'st-host-width': width,
-        'st-gap': spaceBetween && `${Number.parseFloat(spaceBetween) / 4}rem`
+        ...(variant
+            ? {}
+            : applyDefaults({
+                paddingX,
+                paddingY,
+                align,
+                justify,
+                background,
+                spaceBetween
+            }))
     };
     // eslint-disable-next-line react/jsx-props-no-spreading
     return React.createElement("descope-container", { ...mergedProps, ref: ref });

package/dist/types/src/Container/Container.d.ts

@@ -17,12 +17,13 @@ type ContainerAlignment = {
 type Props = {
     direction?: 'row' | 'column';
     shadow?: 'md' | 'lg' | 'xl' | '2xl';
-    'border-radius'?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
     paddingX?: string;
     paddingY?: string;
     background?: string;
     backgroundImageUrl?: string;
     width?: string;
+    variant?: string;
 } & ((Flex & Never<ContainerAlignment>) | (ContainerAlignment & Never<Flex>));
 declare global {
     namespace React.JSX {

package/dist/types/src/inputHelpers.d.ts

@@ -1 +1,2 @@
 export declare function handleCustomValidationMessages(): void;
+export declare const isNumeric: (value?: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/flow-components",
-	"version": "2.0.428",
+	"version": "2.0.430",
 	"description": "",
 	"main": "dist/index.cjs.js",
 	"module": "dist/index.esm.js",
@@ -54,7 +54,7 @@
 		"@storybook/testing-library": "^0.2.2",
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "16.2.0",
-		"@testing-library/user-event": "14.6.0",
+		"@testing-library/user-event": "14.6.1",
 		"@types/color": "^4.0.0",
 		"@types/jest": "^29.0.0",
 		"@types/react": "^19.0.0",