@app-studio/web 0.3.59 → 0.3.61

package/dist/web.esm.js

@@ -1016,7 +1016,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,
@@ -1026,6 +1026,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,
@@ -1092,9 +1094,9 @@ var CheckboxView = function CheckboxView(_ref) {
     onMouseEnter: handleHover,
     onMouseLeave: handleHover,
     size: Typography.fontSizes[size]
-  }, checkboxStyle.container, props), React.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? React.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : React.createElement(CheckSvg, {
+  }, checkboxStyle.container, props), labelPosition === 'left' && label && React.createElement(View$1, null, label), React.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? React.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : React.createElement(CheckSvg, {
     size: IconSizes$2[size]
-  }))), label);
+  }))), labelPosition === 'right' && label && React.createElement(View$1, null, label));
 };
 
 var CheckboxComponent = function CheckboxComponent(props) {
@@ -4111,7 +4113,7 @@ var SliderPadding = {
   }
 };
 
-var _excluded$s = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "value", "isHovered", "isDisabled", "isReadOnly", "onChange", "setValue", "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.createElement(Input, Object.assign({
     type: "checkbox"
@@ -4120,8 +4122,11 @@ 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,
@@ -4144,7 +4149,8 @@ var SwitchView = function SwitchView(_ref) {
     _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) {
@@ -4156,11 +4162,20 @@ var SwitchView = function SwitchView(_ref) {
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
-  return React.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.createElement(Label, Object.assign({
     htmlFor: id,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, React.createElement(SwitchContent, Object.assign({
+  }, switchStyle.container, props), React.createElement(SwitchContent, Object.assign({
     id: id,
     name: name,
     opacity: 0,
@@ -4170,7 +4185,7 @@ var SwitchView = function SwitchView(_ref) {
     onChange: handleToggle,
     disabled: isDisabled,
     readOnly: isReadOnly
-  }, props)), React.createElement(View, Object.assign({
+  }, props)), labelPosition === 'left' && label && React.createElement(View, null, label), React.createElement(View, Object.assign({
     display: "flex",
     cursor: "pointer",
     alignItems: "center",
@@ -4183,7 +4198,7 @@ var SwitchView = function SwitchView(_ref) {
   }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && value && React.createElement(View, null, activeChild), React.createElement(View, Object.assign({
     borderRadius: "50%",
     backgroundColor: "white"
-  }, KnobSizes[size], styles['circle'])), inActiveChild && !value && React.createElement(View, null, inActiveChild)));
+  }, KnobSizes[size], styles['circle'])), inActiveChild && !value && React.createElement(View, null, inActiveChild)), labelPosition === 'right' && label && React.createElement(View, null, label));
 };
 
 var SwitchComponent = function SwitchComponent(props) {