@app-studio/web 0.3.59 → 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", "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__default.createElement(appStudio.Input, Object.assign({
     type: "checkbox"
@@ -4127,8 +4129,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,
@@ -4151,7 +4156,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) {
@@ -4163,11 +4169,20 @@ var SwitchView = function SwitchView(_ref) {
   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,
@@ -4177,7 +4192,7 @@ var SwitchView = function SwitchView(_ref) {
     onChange: handleToggle,
     disabled: isDisabled,
     readOnly: isReadOnly
-  }, 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",
@@ -4190,7 +4205,7 @@ var SwitchView = function SwitchView(_ref) {
   }, 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 && !value && 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) {