@tamagui/label 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/Label.cjs

@@ -1,3 +1,4 @@
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -5,164 +6,137 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Label_exports = {};
 __export(Label_exports, {
-  Label: () => Label,
-  LabelFrame: () => LabelFrame,
-  useLabelContext: () => useLabelContext
+	Label: () => Label,
+	LabelFrame: () => LabelFrame,
+	useLabelContext: () => useLabelContext
 });
 module.exports = __toCommonJS(Label_exports);
 var import_compose_refs = require("@tamagui/compose-refs");
 var import_constants = require("@tamagui/constants");
 var import_create_context = require("@tamagui/create-context");
 var import_focusable = require("@tamagui/focusable");
-var import_get_button_sized = require("@tamagui/get-button-sized");
 var import_get_font_sized = require("@tamagui/get-font-sized");
+var import_size = require("@tamagui/size");
 var import_text = require("@tamagui/text");
 var import_web = require("@tamagui/web");
 var React = __toESM(require("react"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
 const NAME = "Label";
 const [LabelProvider, useLabelContextImpl] = (0, import_create_context.createContext)(NAME, {
-  id: void 0,
-  controlRef: {
-    current: null
-  }
+	id: void 0,
+	controlRef: { current: null }
 });
+const labelSizeVariant = (val, extras) => {
+	const fontStyle = (0, import_get_font_sized.getFontSized)(val, extras);
+	const sizeKey = (0, import_size.resolveSizeToken)(val, "size");
+	return {
+		...fontStyle,
+		lineHeight: typeof sizeKey === "number" ? sizeKey : extras.tokens.size[sizeKey]
+	};
+};
 const LabelFrame = (0, import_web.styled)(import_text.SizableText, {
-  name: "Label",
-  render: "label",
-  variants: {
-    unstyled: {
-      false: {
-        size: "$true",
-        color: "$color",
-        backgroundColor: "transparent",
-        display: "flex",
-        alignItems: "center",
-        userSelect: "none",
-        cursor: "default",
-        pressStyle: {
-          color: "$colorPress"
-        }
-      }
-    },
-    size: {
-      "...size": (val, extras) => {
-        const buttonStyle = (0, import_get_button_sized.getButtonSized)(val, extras);
-        const buttonHeight = buttonStyle?.height;
-        const fontStyle = (0, import_get_font_sized.getFontSized)(val, extras);
-        return {
-          ...fontStyle,
-          lineHeight: buttonHeight ? extras.tokens.size[buttonHeight] : void 0
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "Label",
+	render: "label",
+	size: true,
+	backgroundColor: "transparent",
+	display: "flex",
+	alignItems: "center",
+	userSelect: "none",
+	cursor: "default",
+	variants: { size: {
+		true: labelSizeVariant,
+		Size: labelSizeVariant
+	} }
 });
-const Label = LabelFrame.styleable(function Label2(props, forwardedRef) {
-  const {
-    htmlFor,
-    id: idProp,
-    ...labelProps
-  } = props;
-  const controlRef = React.useRef(null);
-  const ref = React.useRef(null);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
-  const backupId = React.useId();
-  const id = idProp ?? backupId;
-  if (import_constants.isWeb) {
-    (0, import_constants.useIsomorphicLayoutEffect)(() => {
-      if (htmlFor) {
-        const element = document.getElementById(htmlFor);
-        const label = ref.current;
-        if (label && element) {
-          const getAriaLabel = () => element.getAttribute("aria-labelledby");
-          const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(" ");
-          element.setAttribute("aria-labelledby", ariaLabelledBy);
-          controlRef.current = element;
-          return () => {
-            if (!id) return;
-            const ariaLabelledBy2 = getAriaLabel()?.replace(id, "");
-            if (ariaLabelledBy2 === "") {
-              element.removeAttribute("aria-labelledby");
-            } else if (ariaLabelledBy2) {
-              element.setAttribute("aria-labelledby", ariaLabelledBy2);
-            }
-          };
-        }
-      }
-    }, [id, htmlFor]);
-  }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(LabelProvider, {
-    id,
-    controlRef,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(LabelFrame, {
-      id,
-      htmlFor,
-      ...labelProps,
-      ref: composedRefs,
-      onMouseDown: event => {
-        props.onMouseDown?.(event);
-        if (!event.defaultPrevented && event.detail > 1) {
-          event.preventDefault();
-        }
-      },
-      onPress: event => {
-        props.onPress?.(event);
-        if (import_constants.isWeb) {
-          if (htmlFor || !controlRef.current || event.defaultPrevented) return;
-          const isClickingControl = controlRef.current.contains(event.target);
-          const isUserClick = event.isTrusted === true;
-          if (!isClickingControl && isUserClick) {
-            controlRef.current.click();
-            controlRef.current.focus();
-          }
-        } else {
-          if (props.htmlFor) {
-            (0, import_focusable.focusFocusable)(props.htmlFor);
-          }
-        }
-      }
-    })
-  });
+const Label = (0, import_web.createStyledHOC)(LabelFrame, function Label2(props, forwardedRef) {
+	const { htmlFor, id: idProp, ...labelProps } = props;
+	const controlRef = React.useRef(null);
+	const ref = React.useRef(null);
+	const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
+	const backupId = React.useId();
+	const id = idProp ?? backupId;
+	if (import_constants.isWeb) {
+		(0, import_constants.useIsomorphicLayoutEffect)(() => {
+			if (htmlFor) {
+				const element = document.getElementById(htmlFor);
+				const label = ref.current;
+				if (label && element) {
+					const getAriaLabel = () => element.getAttribute("aria-labelledby");
+					const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(" ");
+					element.setAttribute("aria-labelledby", ariaLabelledBy);
+					controlRef.current = element;
+					return () => {
+						if (!id) return;
+						const ariaLabelledBy2 = getAriaLabel()?.replace(id, "");
+						if (ariaLabelledBy2 === "") {
+							element.removeAttribute("aria-labelledby");
+						} else if (ariaLabelledBy2) {
+							element.setAttribute("aria-labelledby", ariaLabelledBy2);
+						}
+					};
+				}
+			}
+		}, [id, htmlFor]);
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelProvider, {
+		id,
+		controlRef,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelFrame, {
+			id,
+			htmlFor,
+			...labelProps,
+			ref: composedRefs,
+			onMouseDown: (event) => {
+				props.onMouseDown?.(event);
+				if (!event.defaultPrevented && event.detail > 1) {
+					event.preventDefault();
+				}
+			},
+			onPress: (event) => {
+				props.onPress?.(event);
+				if (import_constants.isWeb) {
+					if (htmlFor || !controlRef.current || event.defaultPrevented) return;
+					const isClickingControl = controlRef.current.contains(event.target);
+					const isUserClick = event.isTrusted === true;
+					if (!isClickingControl && isUserClick) {
+						controlRef.current.click();
+						controlRef.current.focus();
+					}
+				} else {
+					if (props.htmlFor) {
+						(0, import_focusable.focusFocusable)(props.htmlFor);
+					}
+				}
+			}
+		})
+	});
 });
-const useLabelContext = element => {
-  const context = useLabelContextImpl("LabelConsumer");
-  const {
-    controlRef
-  } = context;
-  React.useEffect(() => {
-    if (element) controlRef.current = element;
-  }, [element, controlRef]);
-  return context.id;
-};
+const useLabelContext = (element) => {
+	const context = useLabelContextImpl("LabelConsumer");
+	const { controlRef } = context;
+	React.useEffect(() => {
+		if (element) controlRef.current = element;
+	}, [element, controlRef]);
+	return context.id;
+};

package/dist/cjs/Label.native.cjs

@@ -0,0 +1,149 @@
+"use strict";
+
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Label_exports = {};
+__export(Label_exports, {
+	Label: () => Label,
+	LabelFrame: () => LabelFrame,
+	useLabelContext: () => useLabelContext
+});
+module.exports = __toCommonJS(Label_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
+var import_create_context = require("@tamagui/create-context");
+var import_focusable = require("@tamagui/focusable");
+var import_get_font_sized = require("@tamagui/get-font-sized");
+var import_size = require("@tamagui/size");
+var import_text = require("@tamagui/text");
+var import_web = require("@tamagui/web");
+var React = __toESM(require("react"), 1);
+var NAME = "Label";
+var [LabelProvider, useLabelContextImpl] = (0, import_create_context.createContext)(NAME, {
+	id: void 0,
+	controlRef: { current: null }
+});
+var labelSizeVariant = function(val, extras) {
+	var fontStyle = (0, import_get_font_sized.getFontSized)(val, extras);
+	var sizeKey = (0, import_size.resolveSizeToken)(val, "size");
+	return {
+		...fontStyle,
+		lineHeight: typeof sizeKey === "number" ? sizeKey : extras.tokens.size[sizeKey]
+	};
+};
+var LabelFrame = (0, import_web.styled)(import_text.SizableText, {
+	displayName: "Label",
+	render: "label",
+	size: true,
+	backgroundColor: "transparent",
+	display: "flex",
+	alignItems: "center",
+	userSelect: "none",
+	cursor: "default",
+	variants: { size: {
+		true: labelSizeVariant,
+		Size: labelSizeVariant
+	} }
+});
+var Label = (0, import_web.createStyledHOC)(LabelFrame, function Label2(props, forwardedRef) {
+	var { htmlFor, id: idProp, ...labelProps } = props;
+	var controlRef = React.useRef(null);
+	var ref = React.useRef(null);
+	var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
+	var backupId = React.useId();
+	var id = idProp !== null && idProp !== void 0 ? idProp : backupId;
+	if (import_constants.isWeb) {
+		(0, import_constants.useIsomorphicLayoutEffect)(function() {
+			if (htmlFor) {
+				var element = document.getElementById(htmlFor);
+				var label = ref.current;
+				if (label && element) {
+					var getAriaLabel = function() {
+						return element.getAttribute("aria-labelledby");
+					};
+					var ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(" ");
+					element.setAttribute("aria-labelledby", ariaLabelledBy);
+					controlRef.current = element;
+					return function() {
+						var _getAriaLabel;
+						if (!id) return;
+						var ariaLabelledBy2 = (_getAriaLabel = getAriaLabel()) === null || _getAriaLabel === void 0 ? void 0 : _getAriaLabel.replace(id, "");
+						if (ariaLabelledBy2 === "") {
+							element.removeAttribute("aria-labelledby");
+						} else if (ariaLabelledBy2) {
+							element.setAttribute("aria-labelledby", ariaLabelledBy2);
+						}
+					};
+				}
+			}
+		}, [id, htmlFor]);
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelProvider, {
+		id,
+		controlRef,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelFrame, {
+			id,
+			htmlFor,
+			...labelProps,
+			ref: composedRefs,
+			onMouseDown: function(event) {
+				var _props_onMouseDown;
+				(_props_onMouseDown = props.onMouseDown) === null || _props_onMouseDown === void 0 ? void 0 : _props_onMouseDown.call(props, event);
+				if (!event.defaultPrevented && event.detail > 1) {
+					event.preventDefault();
+				}
+			},
+			onPress: function(event) {
+				var _props_onPress;
+				(_props_onPress = props.onPress) === null || _props_onPress === void 0 ? void 0 : _props_onPress.call(props, event);
+				if (import_constants.isWeb) {
+					if (htmlFor || !controlRef.current || event.defaultPrevented) return;
+					var isClickingControl = controlRef.current.contains(event.target);
+					var isUserClick = event.isTrusted === true;
+					if (!isClickingControl && isUserClick) {
+						controlRef.current.click();
+						controlRef.current.focus();
+					}
+				} else {
+					if (props.htmlFor) {
+						(0, import_focusable.focusFocusable)(props.htmlFor);
+					}
+				}
+			}
+		})
+	});
+});
+var useLabelContext = function(element) {
+	var context = useLabelContextImpl("LabelConsumer");
+	var { controlRef } = context;
+	React.useEffect(function() {
+		if (element) controlRef.current = element;
+	}, [element, controlRef]);
+	return context.id;
+};