@app-studio/web 0.8.77 → 0.8.78

package/dist/components/Form/Label/Label/Label.type.d.ts

@@ -1,3 +1,3 @@
 export declare type TextWeights = 'hairline' | 'thin' | 'light' | 'normal' | 'medium' | 'semiBold' | 'bold' | 'extraBold' | 'black';
-export declare type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+export declare type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/dist/components/Form/TextArea/TextArea/TextArea.type.d.ts

@@ -3,9 +3,11 @@ export declare type Variant = 'outline' | 'default' | 'none';
 export declare type Shape = 'default' | 'sharp' | 'rounded';
 export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare type TextAreaStyles = {
-    box?: ViewProps;
-    text?: ViewProps;
+    warper?: ViewProps;
+    container?: ViewProps;
     label?: ViewProps;
     helperText?: ViewProps;
     field?: ViewProps;
+    content?: ViewProps;
+    textarea?: ViewProps;
 };

package/dist/components/Input/Input.type.d.ts

@@ -3,10 +3,11 @@ export declare type Variant = 'outline' | 'default' | 'none';
 export declare type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
 export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare type TextFieldStyles = {
-    box?: ViewProps;
     text?: ViewProps;
     label?: ViewProps;
+    error?: ViewProps;
     helperText?: ViewProps;
+    container?: ViewProps;
 };
 export declare type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';
 export declare type Justify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';

package/dist/components/OTPInput/OTPInput/OTPInput.type.d.ts

@@ -7,9 +7,8 @@ export declare type OTPInputType = 'text' | 'password' | 'number';
  * Styles for different parts of the OTP input component
  */
 export declare type OTPInputStyles = {
-    container?: ViewProps;
     input?: ViewProps;
-    box?: ViewProps;
+    container?: ViewProps;
     text?: ViewProps;
     label?: ViewProps;
     helperText?: ViewProps;

package/dist/web.cjs.development.js

@@ -470,12 +470,7 @@ var FontSizes = {
   sm: '14px',
   md: '16px',
   lg: '18px',
-  xl: '20px',
-  '2xl': '24px',
-  '3xl': '30px',
-  '4xl': '36px',
-  '5xl': '48px',
-  '6xl': '60px'
+  xl: '20px'
 };
 /**
  * Line heights following typography guidelines
@@ -485,12 +480,7 @@ var LineHeights = {
   sm: '20px',
   md: '24px',
   lg: '28px',
-  xl: '28px',
-  '2xl': '32px',
-  '3xl': '36px',
-  '4xl': '40px',
-  '5xl': '60px',
-  '6xl': '72px'
+  xl: '28px'
 };
 /**
  * Font weights following typography guidelines
@@ -731,9 +721,12 @@ var IconWrapper = _ref => {
 };
 // Utility function to handle fill and stroke based on 'filled' prop
 var getSvgProps = (filled, color, strokeWidth) => {
+  var {
+    getColor
+  } = appStudio.useTheme();
   return {
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
+    fill: filled ? getColor(color) : 'none',
+    stroke: filled ? 'none' : getColor(color),
     strokeWidth,
     strokeLinecap: 'round',
     strokeLinejoin: 'round'
@@ -1199,7 +1192,7 @@ var InfoIcon = _ref19 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
-      filled = false,
+      filled = true,
       strokeWidth = 1
     } = _ref19,
     props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
@@ -2943,7 +2936,7 @@ var AlertView = _ref => {
     borderStyle: "solid",
     borderColor: Themes[variant].container.borderColor,
     backgroundColor: Themes[variant].container.backgroundColor,
-    boxShadow: Themes[variant].container.boxShadow,
+    boxShadow: Themes[variant].container.containerShadow,
     // Animation
     transition: "all 0.2s ease"
   }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
@@ -3377,12 +3370,7 @@ var IconSizes = {
   sm: 14,
   md: 16,
   lg: 18,
-  xl: 20,
-  '2xl': 24,
-  '3xl': 30,
-  '4xl': 36,
-  '5xl': 48,
-  '6xl': 64
+  xl: 20
 };
 
 var _excluded$6 = ["children", "to", "iconSize", "underline", "isHovered", "isExternal", "views", "setIsHovered"];
@@ -3634,12 +3622,7 @@ var DefaultSizes = {
   sm: 18,
   md: 22,
   lg: 26,
-  xl: 30,
-  '2xl': 40,
-  '3xl': 50,
-  '4xl': 60,
-  '5xl': 70,
-  '6xl': 80
+  xl: 30
 };
 // Specifies a mapping of spinning speed labels to numerical millisecond values, determining the speed of the Loader component's animation cycles.
 var DefaultSpeeds = {
@@ -6280,9 +6263,9 @@ var FieldContainer = _ref => {
     gap: 8,
     position: "relative",
     width: "100%"
-  }, props), children, !error && helperText && (/*#__PURE__*/React__default.createElement(HelperText, Object.assign({
+  }, props, views == null ? void 0 : views.container), children, !error && helperText && (/*#__PURE__*/React__default.createElement(HelperText, Object.assign({
     marginTop: 4
-  }, views), helperText)), error && (/*#__PURE__*/React__default.createElement(Text, {
+  }, views == null ? void 0 : views.helperText), helperText)), error && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: "xs",
     marginTop: 4,
     marginHorizontal: 0,
@@ -6290,7 +6273,7 @@ var FieldContainer = _ref => {
     ,
     color: "color.red.500",
     transition: "all 0.2s ease"
-  }, error)));
+  }, views == null ? void 0 : views.error), error)));
 };
 
 /**
@@ -7069,26 +7052,6 @@ var KnobSizes = {
   xl: {
     height: '28px',
     width: '28px'
-  },
-  '2xl': {
-    height: '32px',
-    width: '32px'
-  },
-  '3xl': {
-    height: '36px',
-    width: '36px'
-  },
-  '4xl': {
-    height: '40px',
-    width: '40px'
-  },
-  '5xl': {
-    height: '44px',
-    width: '44px'
-  },
-  '6xl': {
-    height: '48px',
-    width: '48px'
   }
 };
 /**
@@ -7115,26 +7078,6 @@ var SliderSizes = {
   xl: {
     height: '40px',
     width: '72px'
-  },
-  '2xl': {
-    height: '44px',
-    width: '80px'
-  },
-  '3xl': {
-    height: '48px',
-    width: '88px'
-  },
-  '4xl': {
-    height: '52px',
-    width: '96px'
-  },
-  '5xl': {
-    height: '56px',
-    width: '104px'
-  },
-  '6xl': {
-    height: '60px',
-    width: '112px'
   }
 };
 /**
@@ -7161,26 +7104,6 @@ var SliderPadding = {
   xl: {
     paddingVertical: 4,
     paddingHorizontal: 4
-  },
-  '2xl': {
-    paddingVertical: 4,
-    paddingHorizontal: 4
-  },
-  '3xl': {
-    paddingVertical: 4,
-    paddingHorizontal: 4
-  },
-  '4xl': {
-    paddingVertical: 4,
-    paddingHorizontal: 4
-  },
-  '5xl': {
-    paddingVertical: 4,
-    paddingHorizontal: 4
-  },
-  '6xl': {
-    paddingVertical: 4,
-    paddingHorizontal: 4
   }
 };
 /**
@@ -7393,11 +7316,8 @@ var TextAreaView = _ref => {
       setIsFocused = () => {},
       setIsHovered = () => {},
       views = {
-        box: {},
-        text: {},
         label: {},
-        helperText: {},
-        field: {}
+        helperText: {}
       }
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
@@ -7408,11 +7328,11 @@ var TextAreaView = _ref => {
   var fieldStyles = Object.assign({
     // Layout properties
     margin: 0,
-    paddingVertical: 12,
-    paddingHorizontal: 0,
+    paddingVertical: 2,
+    paddingHorizontal: 2,
     width: '100%',
-    height: '100%',
-    minHeight: '80px',
+    maxHeight: 'calc(100vh - 100px)',
+    height: 'calc(5em)',
     border: 'none',
     resize: 'vertical',
     // Focus state
@@ -7423,7 +7343,7 @@ var TextAreaView = _ref => {
     },
     // Typography properties
     fontSize: appStudio.Typography.fontSizes[size],
-    lineHeight: '1.5',
+    lineHeight: appStudio.Typography.fontSizes[size] * 1.5,
     letterSpacing: '-0.01em',
     // Visual properties
     backgroundColor: 'transparent',
@@ -7431,11 +7351,7 @@ var TextAreaView = _ref => {
     // State properties
     cursor: isDisabled ? 'not-allowed' : 'text',
     // Animation
-    transition: 'all 0.2s ease',
-    // Dark mode support
-    '@media (prefers-color-scheme: dark)': {
-      color: isDisabled ? 'color.gray.600' : 'color.gray.100'
-    }
+    transition: 'all 0.2s ease'
   }, views['field']);
   var handleHover = () => setIsHovered(!isHovered);
   var handleFocus = () => {
@@ -7457,11 +7373,11 @@ var TextAreaView = _ref => {
       if (onChange) onChange(event.target.value);
     }
   };
-  return /*#__PURE__*/React__default.createElement(FieldContainer, {
+  return /*#__PURE__*/React__default.createElement(FieldContainer, Object.assign({
     helperText: helperText,
     error: error,
     views: views
-  }, /*#__PURE__*/React__default.createElement(FieldContent, {
+  }, props), /*#__PURE__*/React__default.createElement(FieldContent, Object.assign({
     label: label,
     size: size,
     error: error,
@@ -7478,11 +7394,11 @@ var TextAreaView = _ref => {
     showLabel: showLabel,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
+  }, views == null ? void 0 : views.content), /*#__PURE__*/React__default.createElement(FieldWrapper, Object.assign({}, views == null ? void 0 : views.warper), showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: 'theme.primary',
     error: error
-  }, views), label)), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+  }, views == null ? void 0 : views.label), label)), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "textarea",
     id: id,
     name: name,
@@ -7497,10 +7413,10 @@ var TextAreaView = _ref => {
     onBlur: handleBlur,
     onFocus: handleFocus,
     multiline: isMultiline
-  }, fieldStyles, props, {
+  }, fieldStyles, {
     onChange: handleChange,
     onChangeText: handleChange
-  })))));
+  }, views == null ? void 0 : views.textarea)))));
 };
 
 // Defines the TextAreaComponent as a functional component that accepts TextAreaProps for type safety and structure.
@@ -7568,7 +7484,7 @@ var TextFieldView = _ref => {
       onChangeText,
       shadow = {},
       views = {
-        box: {},
+        container: {},
         field: {},
         label: {},
         helperText: {},
@@ -7768,26 +7684,6 @@ var Sizes = {
   xl: {
     height: '32px',
     width: '32px'
-  },
-  '2xl': {
-    height: '36px',
-    width: '36px'
-  },
-  '3xl': {
-    height: '40px',
-    width: '40px'
-  },
-  '4xl': {
-    height: '44px',
-    width: '44px'
-  },
-  '5xl': {
-    height: '48px',
-    width: '48px'
-  },
-  '6xl': {
-    height: '52px',
-    width: '52px'
   }
 };
 /**
@@ -7799,12 +7695,7 @@ var IconSizes$3 = {
   sm: 14,
   md: 16,
   lg: 20,
-  xl: 24,
-  '2xl': 28,
-  '3xl': 32,
-  '4xl': 36,
-  '5xl': 40,
-  '6xl': 44
+  xl: 24
 };
 /**
  * Variant styles for the Checkbox component
@@ -9600,8 +9491,7 @@ var CountryPickerView = _ref5 => {
         icon: {},
         label: {},
         dropDown: {},
-        helperText: {},
-        box: {}
+        helperText: {}
       },
       themeMode: elementMode
     } = _ref5,
@@ -9749,7 +9639,7 @@ var DatePickerView = _ref => {
       variant = 'default',
       shape = 'default',
       views = {
-        box: {},
+        container: {},
         label: {},
         helperText: {},
         text: {},
@@ -10032,7 +9922,7 @@ var ComboBoxView = _ref => {
       widthHeight: 12
     }),
     views: {
-      box: Object.assign({
+      container: Object.assign({
         width: '100%',
         padding: '6px 12px',
         borderBottom: filteredItems.length > 0 ? '1px solid #ccc' : '1px solid transparent'
@@ -10402,14 +10292,7 @@ var OTPInputView = _ref => {
       length = 6,
       helperText,
       placeholder = '',
-      views = {
-        container: {},
-        input: {},
-        box: {},
-        text: {},
-        label: {},
-        helperText: {}
-      },
+      views = {},
       size = 'md',
       shape = 'rounded',
       variant = 'outline',
@@ -10515,7 +10398,7 @@ var OTPInputView = _ref => {
       width: "100%",
       position: "relative",
       height: size === 'xs' ? '32px' : size === 'sm' ? '36px' : size === 'md' ? '40px' : size === 'lg' ? '48px' : '56px'
-    }, views.box), slot.char ? (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    }, views.container), slot.char ? (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       textAlign: "center",
       fontSize: size === 'xs' ? '14px' : size === 'sm' ? '16px' : size === 'md' ? '18px' : size === 'lg' ? '20px' : '24px',
       fontWeight: "medium"
@@ -12283,23 +12166,19 @@ var OverlayAlignments = {
   },
   top: {
     justifyContent: 'center',
-    alignItems: 'flex-start',
-    paddingTop: '64px'
+    alignItems: 'flex-start'
   },
   right: {
     justifyContent: 'flex-end',
-    alignItems: 'center',
-    paddingRight: '32px'
+    alignItems: 'center'
   },
   bottom: {
     justifyContent: 'center',
-    alignItems: 'flex-end',
-    paddingBottom: '64px'
+    alignItems: 'flex-end'
   },
   left: {
     justifyContent: 'flex-start',
-    alignItems: 'center',
-    paddingLeft: '32px'
+    alignItems: 'center'
   }
 };
 /**
@@ -15202,7 +15081,7 @@ var SeparatorView = _ref => {
       variant = 'solid',
       thickness = 'thin',
       color,
-      spacing = '16px',
+      spacing = '0px',
       label,
       decorative = false,
       views
@@ -15227,7 +15106,7 @@ var SeparatorView = _ref => {
       alignItems: "center",
       justifyContent: "center",
       width: "100%",
-      margin: spacing
+      padding: spacing
     }, ariaProps, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       height: "0px",
       flexGrow: 1,
@@ -15250,7 +15129,7 @@ var SeparatorView = _ref => {
       borderTopWidth: borderWidth,
       borderTopStyle: borderStyle,
       borderTopColor: separatorColor,
-      margin: spacing
+      padding: spacing
     }, DefaultSeparatorStyles.container, ariaProps, views == null ? void 0 : views.container, props));
   }
   // For vertical separator
@@ -15260,7 +15139,7 @@ var SeparatorView = _ref => {
     borderLeftWidth: borderWidth,
     borderLeftStyle: borderStyle,
     borderLeftColor: separatorColor,
-    margin: spacing
+    padding: spacing
   }, DefaultSeparatorStyles.container, ariaProps, views == null ? void 0 : views.container, props));
 };