@dreamtree-org/twreact-ui 1.0.59 → 1.0.60

package/dist/index.js

@@ -10336,6 +10336,9 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
  * - Sizes: 'sm' | 'md' | 'lg'
  * - Accessible (role="switch", keyboard toggle)
  * - Hidden input for form serialization (name prop)
+ *
+ * New props:
+ * - topLabel, bottomLabel, rightLabel, leftLable (renders label in those positions)
  */
 
 var SIZE_MAP$2 = {
@@ -10356,7 +10359,6 @@ var SIZE_MAP$2 = {
   }
 };
 function Switch(props) {
-  var _ref;
   var id = props.id,
     name = props.name,
     checked = props.checked,
@@ -10371,9 +10373,10 @@ function Switch(props) {
     thumbColor = props.thumbColor,
     _props$className = props.className,
     className = _props$className === void 0 ? "" : _props$className,
-    label = props.label,
-    _props$labelPosition = props.labelPosition,
-    labelPosition = _props$labelPosition === void 0 ? "right" : _props$labelPosition,
+    topLabel = props.topLabel,
+    bottomLabel = props.bottomLabel,
+    rightLabel = props.rightLabel,
+    leftLable = props.leftLable,
     ariaLabel = props.ariaLabel;
   var isControlled = typeof checked === "boolean";
   var _useState = React.useState(defaultChecked),
@@ -10421,17 +10424,30 @@ function Switch(props) {
 
   // fallback when ON and no bgColor provided (keeps the switch visible)
   var fallbackOnClass = isOn && !bgColor ? "bg-sky-500" : "";
+
+  // Accessible label fallback: prefer ariaLabel, otherwise first provided visible label, otherwise "Toggle"
+  var accessibleLabel = ariaLabel || rightLabel || leftLable || topLabel || bottomLabel || "Toggle";
+
+  // Container layout: column if top or bottom labels exist, otherwise row
+  var containerIsColumn = Boolean(topLabel || bottomLabel);
+  var containerClass = [containerIsColumn ? "flex flex-col items-center" : "inline-flex items-center", "gap-2", className].filter(Boolean).join(" ");
+  var labelOpacityClass = disabled ? "opacity-50" : "";
   return /*#__PURE__*/React.createElement("div", {
-    className: "inline-flex items-center gap-2 ".concat(className)
-  }, label && labelPosition === "left" ? /*#__PURE__*/React.createElement("label", {
+    className: containerClass
+  }, topLabel ? /*#__PURE__*/React.createElement("label", {
     htmlFor: idRef.current,
-    className: disabled ? "opacity-50" : ""
-  }, label) : null, /*#__PURE__*/React.createElement("button", {
+    className: labelOpacityClass
+  }, topLabel) : null, /*#__PURE__*/React.createElement("div", {
+    className: "inline-flex items-center gap-2"
+  }, leftLable ? /*#__PURE__*/React.createElement("label", {
+    htmlFor: idRef.current,
+    className: labelOpacityClass
+  }, leftLable) : null, /*#__PURE__*/React.createElement("button", {
     id: idRef.current,
     type: "button",
     role: "switch",
     "aria-checked": isOn,
-    "aria-label": ariaLabel,
+    "aria-label": accessibleLabel,
     "aria-disabled": disabled || undefined,
     disabled: disabled,
     tabIndex: disabled ? -1 : 0,
@@ -10441,14 +10457,17 @@ function Switch(props) {
     style: trackStyle
   }, /*#__PURE__*/React.createElement("span", {
     className: "sr-only"
-  }, (_ref = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label) !== null && _ref !== void 0 ? _ref : "Toggle"), /*#__PURE__*/React.createElement("span", {
+  }, accessibleLabel), /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "true",
     className: "".concat(knobBase, " ").concat(knobTransform),
     style: knobStyle
-  })), label && labelPosition === "right" ? /*#__PURE__*/React.createElement("label", {
+  })), rightLabel ? /*#__PURE__*/React.createElement("label", {
+    htmlFor: idRef.current,
+    className: labelOpacityClass
+  }, rightLabel) : null), bottomLabel ? /*#__PURE__*/React.createElement("label", {
     htmlFor: idRef.current,
-    className: disabled ? "opacity-50" : ""
-  }, label) : null, name ? /*#__PURE__*/React.createElement("input", {
+    className: labelOpacityClass
+  }, bottomLabel) : null, name ? /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     name: name,
     readOnly: true,