@app-studio/web 0.3.58 → 0.3.60

package/dist/components/Form/Checkbox/Checkbox/Checkbox.props.d.ts

@@ -50,6 +50,10 @@ export interface CheckboxProps {
      * Indicates that the checkbox is neither checked nor unchecked.
      */
     isIndeterminate?: boolean;
+    /**
+     * Label position
+     */
+    labelPosition?: 'left' | 'right';
     /**
      * Handler function called when the controlled checkbox value changes.
      */

package/dist/components/Form/Switch/Switch/Switch.props.d.ts

@@ -15,10 +15,6 @@ export interface SwitchProps {
      * Specifies the unique identifier of the switch.
      */
     id?: string;
-    /**
-     * Indicates the initial value of the switch.
-     */
-    isChecked?: boolean;
     /**
      * If set to true, the switch is disabled and cannot be interacted with.
      */
@@ -31,10 +27,6 @@ export interface SwitchProps {
      * A callback function that is invoked when the switch's value changes.
      */
     onChange?: Function;
-    /**
-     * A callback function that is invoked when the switch's value changes on iOS and Android devices.
-     */
-    onValueChange?: (event: any) => void;
     /**
      * The name of the switch.
      */
@@ -55,6 +47,10 @@ export interface SwitchProps {
      * Specifies the size of the switch, affecting its height and width.
      */
     size?: Size;
+    /**
+     * Label position
+     */
+    labelPosition?: 'left' | 'right';
     /**
      * Additional properties and attributes.
      */
@@ -66,7 +62,7 @@ export interface SwitchViewProps extends SwitchProps {
     /** Callback prop to update the hover state of the switch */
     setIsHovered: Function;
     /** Prop indicating the current state of the switch */
-    on?: boolean;
+    value?: boolean;
     /** Callback prop to update the state of the switch */
-    setOn?: Function;
+    setValue?: Function;
 }

package/dist/web.cjs.development.js

@@ -1023,7 +1023,7 @@ var IconSizes$2 = {
   '6xl': 60
 };
 
-var _excluded$e = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles"];
+var _excluded$e = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles"];
 var CheckboxView = function CheckboxView(_ref) {
   var id = _ref.id,
     icon = _ref.icon,
@@ -1033,6 +1033,8 @@ var CheckboxView = function CheckboxView(_ref) {
     onValueChange = _ref.onValueChange,
     _ref$shadow = _ref.shadow,
     shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
+    _ref$labelPosition = _ref.labelPosition,
+    labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
     _ref$colorScheme = _ref.colorScheme,
@@ -1099,9 +1101,9 @@ var CheckboxView = function CheckboxView(_ref) {
     onMouseEnter: handleHover,
     onMouseLeave: handleHover,
     size: appStudio.Typography.fontSizes[size]
-  }, checkboxStyle.container, props), React__default.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? React__default.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : React__default.createElement(CheckSvg, {
+  }, checkboxStyle.container, props), labelPosition === 'left' && label && React__default.createElement(appStudio.View, null, label), React__default.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? React__default.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : React__default.createElement(CheckSvg, {
     size: IconSizes$2[size]
-  }))), label);
+  }))), labelPosition === 'right' && label && React__default.createElement(appStudio.View, null, label));
 };
 
 var CheckboxComponent = function CheckboxComponent(props) {
@@ -4118,7 +4120,7 @@ var SliderPadding = {
   }
 };
 
-var _excluded$s = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "on", "isHovered", "isChecked", "isDisabled", "isReadOnly", "onChange", "onValueChange", "setOn", "setIsHovered", "styles"];
+var _excluded$s = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "colorScheme", "value", "isHovered", "isDisabled", "isReadOnly", "onChange", "setValue", "setIsHovered", "styles"];
 var SwitchContent = function SwitchContent(props) {
   return React__default.createElement(appStudio.Input, Object.assign({
     type: "checkbox"
@@ -4127,16 +4129,19 @@ var SwitchContent = function SwitchContent(props) {
 var SwitchView = function SwitchView(_ref) {
   var id = _ref.id,
     name = _ref.name,
+    label = _ref.label,
     inActiveChild = _ref.inActiveChild,
     activeChild = _ref.activeChild,
+    _ref$labelPosition = _ref.labelPosition,
+    labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
     _ref$shadow = _ref.shadow,
     shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'sm' : _ref$size,
     _ref$colorScheme = _ref.colorScheme,
     colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
-    _ref$on = _ref.on,
-    on = _ref$on === void 0 ? false : _ref$on,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? false : _ref$value,
     _ref$isHovered = _ref.isHovered,
     isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
     _ref$isDisabled = _ref.isDisabled,
@@ -4144,56 +4149,63 @@ var SwitchView = function SwitchView(_ref) {
     _ref$isReadOnly = _ref.isReadOnly,
     isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
     onChange = _ref.onChange,
-    onValueChange = _ref.onValueChange,
-    _ref$setOn = _ref.setOn,
-    setOn = _ref$setOn === void 0 ? function () {} : _ref$setOn,
+    _ref$setValue = _ref.setValue,
+    setValue = _ref$setValue === void 0 ? function () {} : _ref$setValue,
     _ref$setIsHovered = _ref.setIsHovered,
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
     _ref$styles = _ref.styles,
     styles = _ref$styles === void 0 ? {
       slider: {},
-      circle: {}
+      circle: {},
+      label: {}
     } : _ref$styles,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var handleToggle = function handleToggle(event) {
     if (!isReadOnly) {
-      setOn(!on);
+      setValue(!value);
       if (onChange) onChange(event.target.checked);
     }
   };
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
-  return React__default.createElement(Label, {
+  var switchStyle = {
+    container: _extends({
+      gap: 10,
+      display: 'flex',
+      height: 'fit-content',
+      width: 'fit-content',
+      cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'default' : 'pointer'
+    }, styles.label)
+  };
+  return React__default.createElement(Label, Object.assign({
     htmlFor: id,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, React__default.createElement(SwitchContent, Object.assign({
+  }, switchStyle.container, props), React__default.createElement(SwitchContent, Object.assign({
     id: id,
     name: name,
     opacity: 0,
     width: 0,
     height: 0,
-    checked: on,
+    checked: value,
     onChange: handleToggle,
     disabled: isDisabled,
     readOnly: isReadOnly
-  }, onValueChange && {
-    onValueChange: handleToggle
-  }, props)), React__default.createElement(View, Object.assign({
+  }, props)), labelPosition === 'left' && label && React__default.createElement(View, null, label), React__default.createElement(View, Object.assign({
     display: "flex",
     cursor: "pointer",
     alignItems: "center",
     borderRadius: 24,
     marginBottom: 5,
-    filter: isHovered && on ? 'brightness(0.9)' : 'brightness(1)',
+    filter: isHovered && value ? 'brightness(0.9)' : 'brightness(1)',
     transition: "justify-content 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-    backgroundColor: isDisabled ? 'disabled' : on ? colorScheme : 'lightgray',
-    justifyContent: activeChild ? 'space-between' : on ? 'flex-end' : 'flex-start'
-  }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && on && React__default.createElement(View, null, activeChild), React__default.createElement(View, Object.assign({
+    backgroundColor: isDisabled ? 'disabled' : value ? colorScheme : 'lightgray',
+    justifyContent: activeChild ? 'space-between' : value ? 'flex-end' : 'flex-start'
+  }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && value && React__default.createElement(View, null, activeChild), React__default.createElement(View, Object.assign({
     borderRadius: "50%",
     backgroundColor: "white"
-  }, KnobSizes[size], styles['circle'])), inActiveChild && !on && React__default.createElement(View, null, inActiveChild)));
+  }, KnobSizes[size], styles['circle'])), inActiveChild && !value && React__default.createElement(View, null, inActiveChild)), labelPosition === 'right' && label && React__default.createElement(View, null, label));
 };
 
 var SwitchComponent = function SwitchComponent(props) {
@@ -4578,12 +4590,8 @@ var SelectComponent$1 = function SelectComponent(props) {
  */
 var FormikSelect = SelectComponent$1;
 
-var _excluded$w = ["value"];
 var SwitchComponent$1 = function SwitchComponent(props) {
-  var _useFormikInput = useFormikInput(props),
-    value = _useFormikInput.value,
-    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$w);
-  formProps.isChecked = value;
+  var formProps = useFormikInput(props);
   var switchStates = useSwitchState(props);
   return React__default.createElement(SwitchView, Object.assign({}, switchStates, formProps));
 };
@@ -4599,11 +4607,11 @@ var TextAreaComponent$1 = function TextAreaComponent(props) {
  */
 var FormikTextArea = TextAreaComponent$1;
 
-var _excluded$x = ["value"];
+var _excluded$w = ["value"];
 var TextFieldComponent$1 = function TextFieldComponent(props) {
   var formProps = useFormikInput(props);
   var _useTextFieldState = useTextFieldState(props),
-    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$x);
+    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$w);
   return React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
 };
 /**
@@ -4611,7 +4619,7 @@ var TextFieldComponent$1 = function TextFieldComponent(props) {
  */
 var FormikTextField = TextFieldComponent$1;
 
-var _excluded$y = ["visibleIcon", "hiddenIcon"],
+var _excluded$x = ["visibleIcon", "hiddenIcon"],
   _excluded2$3 = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = function PasswordComponent(_ref) {
   var _ref$visibleIcon = _ref.visibleIcon,
@@ -4622,7 +4630,7 @@ var PasswordComponent$1 = function PasswordComponent(_ref) {
     hiddenIcon = _ref$hiddenIcon === void 0 ? React__default.createElement(CloseEyeSvg, {
       size: 14
     }) : _ref$hiddenIcon,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   var formProps = useFormikInput(props);
   var _usePasswordState = usePasswordState(formProps),
     isVisible = _usePasswordState.isVisible,
@@ -4730,7 +4738,7 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$z = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+var _excluded$y = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
   _excluded2$4 = ["children", "shadow", "isFullScreen", "shape"],
   _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$2 = ["children"],
@@ -4746,7 +4754,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
     onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'center' : _ref$position,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
@@ -4902,12 +4910,12 @@ Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.Layout = ModalLayout;
 
-var _excluded$A = ["src", "color"],
+var _excluded$z = ["src", "color"],
   _excluded2$5 = ["path"];
 var FileSVG = function FileSVG(_ref) {
   var src = _ref.src,
     color = _ref.color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   var _useTheme = appStudio.useTheme(),
     getColor = _useTheme.getColor;
   var Colorprops = color ? {