@tamagui/label 1.5.0 → 1.5.2

package/dist/cjs/Label.js

@@ -110,6 +110,7 @@ const LabelComponent = React.forwardRef(
       {
         role: "label",
         id,
+        htmlFor,
         ...labelProps,
         ref: composedRefs,
         onMouseDown: (event) => {
@@ -123,7 +124,7 @@ const LabelComponent = React.forwardRef(
           var _a;
           (_a = props.onPress) == null ? void 0 : _a.call(props, event);
           if (import_core.isWeb) {
-            if (!controlRef.current || event.defaultPrevented)
+            if (htmlFor || !controlRef.current || event.defaultPrevented)
               return;
             const isClickingControl = controlRef.current.contains(
               event.target

package/dist/cjs/Label.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Label.tsx"],
-  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  ReactComponentWithRef,\n  isWeb,\n  styled,\n  themeable,\n  useId,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { getFontSized } from '@tamagui/get-font-sized'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n  id?: string\n  controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n  id: undefined,\n  controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n  name: 'Label',\n  tag: 'label',\n  size: '$true',\n  backgroundColor: 'transparent',\n  display: 'flex',\n  alignItems: 'center',\n  userSelect: 'none',\n  cursor: 'default',\n  pressStyle: {\n    color: '$colorPress',\n  },\n  variants: {\n    size: {\n      '...size': (val, extras) => {\n        const buttonStyle = getButtonSized(val, extras)\n        return {\n          ...getFontSized(val, extras),\n          height: buttonStyle.height,\n          lineHeight: buttonStyle.height,\n        }\n      },\n    },\n  } as const,\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n  htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(\n  (props, forwardedRef) => {\n    const { htmlFor, id: idProp, ...labelProps } = props\n    const controlRef = React.useRef<HTMLElement | null>(null)\n    const ref = React.useRef<any>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref)\n    const backupId = useId()\n    const id = idProp ?? backupId\n\n    if (isWeb) {\n      React.useEffect(() => {\n        if (htmlFor) {\n          const element = document.getElementById(htmlFor)\n          const label = ref.current\n          if (label && element) {\n            const getAriaLabel = () => element.getAttribute('aria-labelledby')\n            const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(' ')\n            element.setAttribute('aria-labelledby', ariaLabelledBy)\n            controlRef.current = element\n            return () => {\n              /**\n               * We get the latest attribute value because at the time that this cleanup fires,\n               * the values from the closure may have changed.\n               */\n              if (!id) return\n              const ariaLabelledBy = getAriaLabel()?.replace(id, '')\n              if (ariaLabelledBy === '') {\n                element.removeAttribute('aria-labelledby')\n              } else if (ariaLabelledBy) {\n                element.setAttribute('aria-labelledby', ariaLabelledBy)\n              }\n            }\n          }\n        }\n      }, [id, htmlFor])\n    }\n\n    return (\n      <LabelProvider id={id} controlRef={controlRef}>\n        <LabelFrame\n          // @ts-ignore\n          role=\"label\"\n          id={id}\n          {...labelProps}\n          ref={composedRefs as any}\n          onMouseDown={(event) => {\n            props.onMouseDown?.(event)\n            // prevent text selection when double clicking label\n            if (!event.defaultPrevented && event.detail > 1) {\n              event.preventDefault()\n            }\n          }}\n          onPress={(event) => {\n            props.onPress?.(event)\n\n            if (isWeb) {\n              if (!controlRef.current || event.defaultPrevented) return\n              const isClickingControl = controlRef.current.contains(\n                event.target as any as Node\n              )\n              // Ensure event was generated by a user action\n              // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n              const isUserClick = event.isTrusted === true\n              /**\n               * When a label is wrapped around the control it labels, we trigger the appropriate events\n               * on the control when the label is clicked. We do nothing if the user is already clicking the\n               * control inside the label.\n               */\n              if (!isClickingControl && isUserClick) {\n                controlRef.current.click()\n                controlRef.current.focus()\n              }\n            } else {\n              if (props.htmlFor) {\n                focusFocusable(props.htmlFor)\n              }\n            }\n          }}\n        />\n      </LabelProvider>\n    )\n  }\n)\n\nLabelComponent.displayName = NAME\n\nexport const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View> =\n  LabelFrame.extractable(themeable(LabelComponent as any) as any, {\n    neverFlatten: true,\n  })\n\nexport const useLabelContext = (element?: HTMLElement | null) => {\n  const context = useLabelContextImpl('LabelConsumer')\n  const { controlRef } = context\n\n  React.useEffect(() => {\n    if (element) controlRef.current = element\n  }, [element, controlRef])\n\n  return context.id\n}\n\nconst Root = Label\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  ReactComponentWithRef,\n  isWeb,\n  styled,\n  themeable,\n  useId,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { getFontSized } from '@tamagui/get-font-sized'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n  id?: string\n  controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n  id: undefined,\n  controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n  name: 'Label',\n  tag: 'label',\n  size: '$true',\n  backgroundColor: 'transparent',\n  display: 'flex',\n  alignItems: 'center',\n  userSelect: 'none',\n  cursor: 'default',\n  pressStyle: {\n    color: '$colorPress',\n  },\n  variants: {\n    size: {\n      '...size': (val, extras) => {\n        const buttonStyle = getButtonSized(val, extras)\n        return {\n          ...getFontSized(val, extras),\n          height: buttonStyle.height,\n          lineHeight: buttonStyle.height,\n        }\n      },\n    },\n  } as const,\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n  htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(\n  (props, forwardedRef) => {\n    const { htmlFor, id: idProp, ...labelProps } = props\n    const controlRef = React.useRef<HTMLElement | null>(null)\n    const ref = React.useRef<any>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref)\n    const backupId = useId()\n    const id = idProp ?? backupId\n\n    if (isWeb) {\n      React.useEffect(() => {\n        if (htmlFor) {\n          const element = document.getElementById(htmlFor)\n          const label = ref.current\n          if (label && element) {\n            const getAriaLabel = () => element.getAttribute('aria-labelledby')\n            const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(' ')\n            element.setAttribute('aria-labelledby', ariaLabelledBy)\n            controlRef.current = element\n            return () => {\n              /**\n               * We get the latest attribute value because at the time that this cleanup fires,\n               * the values from the closure may have changed.\n               */\n              if (!id) return\n              const ariaLabelledBy = getAriaLabel()?.replace(id, '')\n              if (ariaLabelledBy === '') {\n                element.removeAttribute('aria-labelledby')\n              } else if (ariaLabelledBy) {\n                element.setAttribute('aria-labelledby', ariaLabelledBy)\n              }\n            }\n          }\n        }\n      }, [id, htmlFor])\n    }\n\n    return (\n      <LabelProvider id={id} controlRef={controlRef}>\n        <LabelFrame\n          role=\"label\"\n          id={id}\n          // @ts-ignore\n          htmlFor={htmlFor}\n          {...labelProps}\n          ref={composedRefs as any}\n          onMouseDown={(event) => {\n            props.onMouseDown?.(event)\n            // prevent text selection when double clicking label\n            if (!event.defaultPrevented && event.detail > 1) {\n              event.preventDefault()\n            }\n          }}\n          onPress={(event) => {\n            props.onPress?.(event)\n\n            if (isWeb) {\n              if (htmlFor || !controlRef.current || event.defaultPrevented) return\n              const isClickingControl = controlRef.current.contains(\n                event.target as any as Node\n              )\n              // Ensure event was generated by a user action\n              // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n              const isUserClick = event.isTrusted === true\n              /**\n               * When a label is wrapped around the control it labels, we trigger the appropriate events\n               * on the control when the label is clicked. We do nothing if the user is already clicking the\n               * control inside the label.\n               */\n              if (!isClickingControl && isUserClick) {\n                controlRef.current.click()\n                controlRef.current.focus()\n              }\n            } else {\n              if (props.htmlFor) {\n                focusFocusable(props.htmlFor)\n              }\n            }\n          }}\n        />\n      </LabelProvider>\n    )\n  }\n)\n\nLabelComponent.displayName = NAME\n\nexport const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View> =\n  LabelFrame.extractable(themeable(LabelComponent as any) as any, {\n    neverFlatten: true,\n  })\n\nexport const useLabelContext = (element?: HTMLElement | null) => {\n  const context = useLabelContextImpl('LabelConsumer')\n  const { controlRef } = context\n\n  React.useEffect(() => {\n    if (element) controlRef.current = element\n  }, [element, controlRef])\n\n  return context.id\n}\n\nconst Root = Label\n"],
+  "mappings": "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",
   "names": ["ariaLabelledBy"]
 }

package/dist/esm/Label.js

@@ -80,6 +80,7 @@ const LabelComponent = React.forwardRef(
       {
         role: "label",
         id,
+        htmlFor,
         ...labelProps,
         ref: composedRefs,
         onMouseDown: (event) => {
@@ -93,7 +94,7 @@ const LabelComponent = React.forwardRef(
           var _a;
           (_a = props.onPress) == null ? void 0 : _a.call(props, event);
           if (isWeb) {
-            if (!controlRef.current || event.defaultPrevented)
+            if (htmlFor || !controlRef.current || event.defaultPrevented)
               return;
             const isClickingControl = controlRef.current.contains(
               event.target

package/dist/esm/Label.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Label.tsx"],
-  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  ReactComponentWithRef,\n  isWeb,\n  styled,\n  themeable,\n  useId,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { getFontSized } from '@tamagui/get-font-sized'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n  id?: string\n  controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n  id: undefined,\n  controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n  name: 'Label',\n  tag: 'label',\n  size: '$true',\n  backgroundColor: 'transparent',\n  display: 'flex',\n  alignItems: 'center',\n  userSelect: 'none',\n  cursor: 'default',\n  pressStyle: {\n    color: '$colorPress',\n  },\n  variants: {\n    size: {\n      '...size': (val, extras) => {\n        const buttonStyle = getButtonSized(val, extras)\n        return {\n          ...getFontSized(val, extras),\n          height: buttonStyle.height,\n          lineHeight: buttonStyle.height,\n        }\n      },\n    },\n  } as const,\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n  htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(\n  (props, forwardedRef) => {\n    const { htmlFor, id: idProp, ...labelProps } = props\n    const controlRef = React.useRef<HTMLElement | null>(null)\n    const ref = React.useRef<any>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref)\n    const backupId = useId()\n    const id = idProp ?? backupId\n\n    if (isWeb) {\n      React.useEffect(() => {\n        if (htmlFor) {\n          const element = document.getElementById(htmlFor)\n          const label = ref.current\n          if (label && element) {\n            const getAriaLabel = () => element.getAttribute('aria-labelledby')\n            const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(' ')\n            element.setAttribute('aria-labelledby', ariaLabelledBy)\n            controlRef.current = element\n            return () => {\n              /**\n               * We get the latest attribute value because at the time that this cleanup fires,\n               * the values from the closure may have changed.\n               */\n              if (!id) return\n              const ariaLabelledBy = getAriaLabel()?.replace(id, '')\n              if (ariaLabelledBy === '') {\n                element.removeAttribute('aria-labelledby')\n              } else if (ariaLabelledBy) {\n                element.setAttribute('aria-labelledby', ariaLabelledBy)\n              }\n            }\n          }\n        }\n      }, [id, htmlFor])\n    }\n\n    return (\n      <LabelProvider id={id} controlRef={controlRef}>\n        <LabelFrame\n          // @ts-ignore\n          role=\"label\"\n          id={id}\n          {...labelProps}\n          ref={composedRefs as any}\n          onMouseDown={(event) => {\n            props.onMouseDown?.(event)\n            // prevent text selection when double clicking label\n            if (!event.defaultPrevented && event.detail > 1) {\n              event.preventDefault()\n            }\n          }}\n          onPress={(event) => {\n            props.onPress?.(event)\n\n            if (isWeb) {\n              if (!controlRef.current || event.defaultPrevented) return\n              const isClickingControl = controlRef.current.contains(\n                event.target as any as Node\n              )\n              // Ensure event was generated by a user action\n              // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n              const isUserClick = event.isTrusted === true\n              /**\n               * When a label is wrapped around the control it labels, we trigger the appropriate events\n               * on the control when the label is clicked. We do nothing if the user is already clicking the\n               * control inside the label.\n               */\n              if (!isClickingControl && isUserClick) {\n                controlRef.current.click()\n                controlRef.current.focus()\n              }\n            } else {\n              if (props.htmlFor) {\n                focusFocusable(props.htmlFor)\n              }\n            }\n          }}\n        />\n      </LabelProvider>\n    )\n  }\n)\n\nLabelComponent.displayName = NAME\n\nexport const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View> =\n  LabelFrame.extractable(themeable(LabelComponent as any) as any, {\n    neverFlatten: true,\n  })\n\nexport const useLabelContext = (element?: HTMLElement | null) => {\n  const context = useLabelContextImpl('LabelConsumer')\n  const { controlRef } = context\n\n  React.useEffect(() => {\n    if (element) controlRef.current = element\n  }, [element, controlRef])\n\n  return context.id\n}\n\nconst Root = Label\n"],
-  "mappings": "AAmGQ;AAnGR,SAAS,uBAAuB;AAChC;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,YAAY,WAAW;AAGvB,MAAM,OAAO;AAOb,MAAM,CAAC,eAAe,mBAAmB,IAAI,cAAiC,MAAM;AAAA,EAClF,IAAI;AAAA,EACJ,YAAY,EAAE,SAAS,KAAK;AAC9B,CAAC;AAEM,MAAM,aAAa,OAAO,aAAa;AAAA,EAC5C,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,YAAY;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,WAAW;AAC1B,cAAM,cAAc,eAAe,KAAK,MAAM;AAC9C,eAAO;AAAA,UACL,GAAG,aAAa,KAAK,MAAM;AAAA,UAC3B,QAAQ,YAAY;AAAA,UACpB,YAAY,YAAY;AAAA,QAC1B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAMD,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,SAAS,IAAI,QAAQ,GAAG,WAAW,IAAI;AAC/C,UAAM,aAAa,MAAM,OAA2B,IAAI;AACxD,UAAM,MAAM,MAAM,OAAY,IAAI;AAClC,UAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,UAAM,WAAW,MAAM;AACvB,UAAM,KAAK,UAAU;AAErB,QAAI,OAAO;AACT,YAAM,UAAU,MAAM;AACpB,YAAI,SAAS;AACX,gBAAM,UAAU,SAAS,eAAe,OAAO;AAC/C,gBAAM,QAAQ,IAAI;AAClB,cAAI,SAAS,SAAS;AACpB,kBAAM,eAAe,MAAM,QAAQ,aAAa,iBAAiB;AACjE,kBAAM,iBAAiB,CAAC,IAAI,aAAa,CAAC,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACpE,oBAAQ,aAAa,mBAAmB,cAAc;AACtD,uBAAW,UAAU;AACrB,mBAAO,MAAM;AA/EzB;AAoFc,kBAAI,CAAC;AAAI;AACT,oBAAMA,mBAAiB,kBAAa,MAAb,mBAAgB,QAAQ,IAAI;AACnD,kBAAIA,oBAAmB,IAAI;AACzB,wBAAQ,gBAAgB,iBAAiB;AAAA,cAC3C,WAAWA,iBAAgB;AACzB,wBAAQ,aAAa,mBAAmBA,eAAc;AAAA,cACxD;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF,GAAG,CAAC,IAAI,OAAO,CAAC;AAAA,IAClB;AAEA,WACE,oBAAC,iBAAc,IAAQ,YACrB;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,aAAa,CAAC,UAAU;AAzGlC;AA0GY,sBAAM,gBAAN,+BAAoB;AAEpB,cAAI,CAAC,MAAM,oBAAoB,MAAM,SAAS,GAAG;AAC/C,kBAAM,eAAe;AAAA,UACvB;AAAA,QACF;AAAA,QACA,SAAS,CAAC,UAAU;AAhH9B;AAiHY,sBAAM,YAAN,+BAAgB;AAEhB,cAAI,OAAO;AACT,gBAAI,CAAC,WAAW,WAAW,MAAM;AAAkB;AACnD,kBAAM,oBAAoB,WAAW,QAAQ;AAAA,cAC3C,MAAM;AAAA,YACR;AAGA,kBAAM,cAAc,MAAM,cAAc;AAMxC,gBAAI,CAAC,qBAAqB,aAAa;AACrC,yBAAW,QAAQ,MAAM;AACzB,yBAAW,QAAQ,MAAM;AAAA,YAC3B;AAAA,UACF,OAAO;AACL,gBAAI,MAAM,SAAS;AACjB,6BAAe,MAAM,OAAO;AAAA,YAC9B;AAAA,UACF;AAAA,QACF;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAEtB,MAAM,QACX,WAAW,YAAY,UAAU,cAAqB,GAAU;AAAA,EAC9D,cAAc;AAChB,CAAC;AAEI,MAAM,kBAAkB,CAAC,YAAiC;AAC/D,QAAM,UAAU,oBAAoB,eAAe;AACnD,QAAM,EAAE,WAAW,IAAI;AAEvB,QAAM,UAAU,MAAM;AACpB,QAAI;AAAS,iBAAW,UAAU;AAAA,EACpC,GAAG,CAAC,SAAS,UAAU,CAAC;AAExB,SAAO,QAAQ;AACjB;AAEA,MAAM,OAAO;",
+  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  ReactComponentWithRef,\n  isWeb,\n  styled,\n  themeable,\n  useId,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { getFontSized } from '@tamagui/get-font-sized'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n  id?: string\n  controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n  id: undefined,\n  controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n  name: 'Label',\n  tag: 'label',\n  size: '$true',\n  backgroundColor: 'transparent',\n  display: 'flex',\n  alignItems: 'center',\n  userSelect: 'none',\n  cursor: 'default',\n  pressStyle: {\n    color: '$colorPress',\n  },\n  variants: {\n    size: {\n      '...size': (val, extras) => {\n        const buttonStyle = getButtonSized(val, extras)\n        return {\n          ...getFontSized(val, extras),\n          height: buttonStyle.height,\n          lineHeight: buttonStyle.height,\n        }\n      },\n    },\n  } as const,\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n  htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(\n  (props, forwardedRef) => {\n    const { htmlFor, id: idProp, ...labelProps } = props\n    const controlRef = React.useRef<HTMLElement | null>(null)\n    const ref = React.useRef<any>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref)\n    const backupId = useId()\n    const id = idProp ?? backupId\n\n    if (isWeb) {\n      React.useEffect(() => {\n        if (htmlFor) {\n          const element = document.getElementById(htmlFor)\n          const label = ref.current\n          if (label && element) {\n            const getAriaLabel = () => element.getAttribute('aria-labelledby')\n            const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(' ')\n            element.setAttribute('aria-labelledby', ariaLabelledBy)\n            controlRef.current = element\n            return () => {\n              /**\n               * We get the latest attribute value because at the time that this cleanup fires,\n               * the values from the closure may have changed.\n               */\n              if (!id) return\n              const ariaLabelledBy = getAriaLabel()?.replace(id, '')\n              if (ariaLabelledBy === '') {\n                element.removeAttribute('aria-labelledby')\n              } else if (ariaLabelledBy) {\n                element.setAttribute('aria-labelledby', ariaLabelledBy)\n              }\n            }\n          }\n        }\n      }, [id, htmlFor])\n    }\n\n    return (\n      <LabelProvider id={id} controlRef={controlRef}>\n        <LabelFrame\n          role=\"label\"\n          id={id}\n          // @ts-ignore\n          htmlFor={htmlFor}\n          {...labelProps}\n          ref={composedRefs as any}\n          onMouseDown={(event) => {\n            props.onMouseDown?.(event)\n            // prevent text selection when double clicking label\n            if (!event.defaultPrevented && event.detail > 1) {\n              event.preventDefault()\n            }\n          }}\n          onPress={(event) => {\n            props.onPress?.(event)\n\n            if (isWeb) {\n              if (htmlFor || !controlRef.current || event.defaultPrevented) return\n              const isClickingControl = controlRef.current.contains(\n                event.target as any as Node\n              )\n              // Ensure event was generated by a user action\n              // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n              const isUserClick = event.isTrusted === true\n              /**\n               * When a label is wrapped around the control it labels, we trigger the appropriate events\n               * on the control when the label is clicked. We do nothing if the user is already clicking the\n               * control inside the label.\n               */\n              if (!isClickingControl && isUserClick) {\n                controlRef.current.click()\n                controlRef.current.focus()\n              }\n            } else {\n              if (props.htmlFor) {\n                focusFocusable(props.htmlFor)\n              }\n            }\n          }}\n        />\n      </LabelProvider>\n    )\n  }\n)\n\nLabelComponent.displayName = NAME\n\nexport const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View> =\n  LabelFrame.extractable(themeable(LabelComponent as any) as any, {\n    neverFlatten: true,\n  })\n\nexport const useLabelContext = (element?: HTMLElement | null) => {\n  const context = useLabelContextImpl('LabelConsumer')\n  const { controlRef } = context\n\n  React.useEffect(() => {\n    if (element) controlRef.current = element\n  }, [element, controlRef])\n\n  return context.id\n}\n\nconst Root = Label\n"],
+  "mappings": "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",
   "names": ["ariaLabelledBy"]
 }

package/dist/esm/Label.mjs

@@ -80,6 +80,7 @@ const LabelComponent = React.forwardRef(
       {
         role: "label",
         id,
+        htmlFor,
         ...labelProps,
         ref: composedRefs,
         onMouseDown: (event) => {
@@ -93,7 +94,7 @@ const LabelComponent = React.forwardRef(
           var _a;
           (_a = props.onPress) == null ? void 0 : _a.call(props, event);
           if (isWeb) {
-            if (!controlRef.current || event.defaultPrevented)
+            if (htmlFor || !controlRef.current || event.defaultPrevented)
               return;
             const isClickingControl = controlRef.current.contains(
               event.target

package/dist/esm/Label.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Label.tsx"],
-  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  ReactComponentWithRef,\n  isWeb,\n  styled,\n  themeable,\n  useId,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { getFontSized } from '@tamagui/get-font-sized'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n  id?: string\n  controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n  id: undefined,\n  controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n  name: 'Label',\n  tag: 'label',\n  size: '$true',\n  backgroundColor: 'transparent',\n  display: 'flex',\n  alignItems: 'center',\n  userSelect: 'none',\n  cursor: 'default',\n  pressStyle: {\n    color: '$colorPress',\n  },\n  variants: {\n    size: {\n      '...size': (val, extras) => {\n        const buttonStyle = getButtonSized(val, extras)\n        return {\n          ...getFontSized(val, extras),\n          height: buttonStyle.height,\n          lineHeight: buttonStyle.height,\n        }\n      },\n    },\n  } as const,\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n  htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(\n  (props, forwardedRef) => {\n    const { htmlFor, id: idProp, ...labelProps } = props\n    const controlRef = React.useRef<HTMLElement | null>(null)\n    const ref = React.useRef<any>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref)\n    const backupId = useId()\n    const id = idProp ?? backupId\n\n    if (isWeb) {\n      React.useEffect(() => {\n        if (htmlFor) {\n          const element = document.getElementById(htmlFor)\n          const label = ref.current\n          if (label && element) {\n            const getAriaLabel = () => element.getAttribute('aria-labelledby')\n            const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(' ')\n            element.setAttribute('aria-labelledby', ariaLabelledBy)\n            controlRef.current = element\n            return () => {\n              /**\n               * We get the latest attribute value because at the time that this cleanup fires,\n               * the values from the closure may have changed.\n               */\n              if (!id) return\n              const ariaLabelledBy = getAriaLabel()?.replace(id, '')\n              if (ariaLabelledBy === '') {\n                element.removeAttribute('aria-labelledby')\n              } else if (ariaLabelledBy) {\n                element.setAttribute('aria-labelledby', ariaLabelledBy)\n              }\n            }\n          }\n        }\n      }, [id, htmlFor])\n    }\n\n    return (\n      <LabelProvider id={id} controlRef={controlRef}>\n        <LabelFrame\n          // @ts-ignore\n          role=\"label\"\n          id={id}\n          {...labelProps}\n          ref={composedRefs as any}\n          onMouseDown={(event) => {\n            props.onMouseDown?.(event)\n            // prevent text selection when double clicking label\n            if (!event.defaultPrevented && event.detail > 1) {\n              event.preventDefault()\n            }\n          }}\n          onPress={(event) => {\n            props.onPress?.(event)\n\n            if (isWeb) {\n              if (!controlRef.current || event.defaultPrevented) return\n              const isClickingControl = controlRef.current.contains(\n                event.target as any as Node\n              )\n              // Ensure event was generated by a user action\n              // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n              const isUserClick = event.isTrusted === true\n              /**\n               * When a label is wrapped around the control it labels, we trigger the appropriate events\n               * on the control when the label is clicked. We do nothing if the user is already clicking the\n               * control inside the label.\n               */\n              if (!isClickingControl && isUserClick) {\n                controlRef.current.click()\n                controlRef.current.focus()\n              }\n            } else {\n              if (props.htmlFor) {\n                focusFocusable(props.htmlFor)\n              }\n            }\n          }}\n        />\n      </LabelProvider>\n    )\n  }\n)\n\nLabelComponent.displayName = NAME\n\nexport const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View> =\n  LabelFrame.extractable(themeable(LabelComponent as any) as any, {\n    neverFlatten: true,\n  })\n\nexport const useLabelContext = (element?: HTMLElement | null) => {\n  const context = useLabelContextImpl('LabelConsumer')\n  const { controlRef } = context\n\n  React.useEffect(() => {\n    if (element) controlRef.current = element\n  }, [element, controlRef])\n\n  return context.id\n}\n\nconst Root = Label\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  ReactComponentWithRef,\n  isWeb,\n  styled,\n  themeable,\n  useId,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { getFontSized } from '@tamagui/get-font-sized'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n  id?: string\n  controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n  id: undefined,\n  controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n  name: 'Label',\n  tag: 'label',\n  size: '$true',\n  backgroundColor: 'transparent',\n  display: 'flex',\n  alignItems: 'center',\n  userSelect: 'none',\n  cursor: 'default',\n  pressStyle: {\n    color: '$colorPress',\n  },\n  variants: {\n    size: {\n      '...size': (val, extras) => {\n        const buttonStyle = getButtonSized(val, extras)\n        return {\n          ...getFontSized(val, extras),\n          height: buttonStyle.height,\n          lineHeight: buttonStyle.height,\n        }\n      },\n    },\n  } as const,\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n  htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(\n  (props, forwardedRef) => {\n    const { htmlFor, id: idProp, ...labelProps } = props\n    const controlRef = React.useRef<HTMLElement | null>(null)\n    const ref = React.useRef<any>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref)\n    const backupId = useId()\n    const id = idProp ?? backupId\n\n    if (isWeb) {\n      React.useEffect(() => {\n        if (htmlFor) {\n          const element = document.getElementById(htmlFor)\n          const label = ref.current\n          if (label && element) {\n            const getAriaLabel = () => element.getAttribute('aria-labelledby')\n            const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(' ')\n            element.setAttribute('aria-labelledby', ariaLabelledBy)\n            controlRef.current = element\n            return () => {\n              /**\n               * We get the latest attribute value because at the time that this cleanup fires,\n               * the values from the closure may have changed.\n               */\n              if (!id) return\n              const ariaLabelledBy = getAriaLabel()?.replace(id, '')\n              if (ariaLabelledBy === '') {\n                element.removeAttribute('aria-labelledby')\n              } else if (ariaLabelledBy) {\n                element.setAttribute('aria-labelledby', ariaLabelledBy)\n              }\n            }\n          }\n        }\n      }, [id, htmlFor])\n    }\n\n    return (\n      <LabelProvider id={id} controlRef={controlRef}>\n        <LabelFrame\n          role=\"label\"\n          id={id}\n          // @ts-ignore\n          htmlFor={htmlFor}\n          {...labelProps}\n          ref={composedRefs as any}\n          onMouseDown={(event) => {\n            props.onMouseDown?.(event)\n            // prevent text selection when double clicking label\n            if (!event.defaultPrevented && event.detail > 1) {\n              event.preventDefault()\n            }\n          }}\n          onPress={(event) => {\n            props.onPress?.(event)\n\n            if (isWeb) {\n              if (htmlFor || !controlRef.current || event.defaultPrevented) return\n              const isClickingControl = controlRef.current.contains(\n                event.target as any as Node\n              )\n              // Ensure event was generated by a user action\n              // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n              const isUserClick = event.isTrusted === true\n              /**\n               * When a label is wrapped around the control it labels, we trigger the appropriate events\n               * on the control when the label is clicked. We do nothing if the user is already clicking the\n               * control inside the label.\n               */\n              if (!isClickingControl && isUserClick) {\n                controlRef.current.click()\n                controlRef.current.focus()\n              }\n            } else {\n              if (props.htmlFor) {\n                focusFocusable(props.htmlFor)\n              }\n            }\n          }}\n        />\n      </LabelProvider>\n    )\n  }\n)\n\nLabelComponent.displayName = NAME\n\nexport const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View> =\n  LabelFrame.extractable(themeable(LabelComponent as any) as any, {\n    neverFlatten: true,\n  })\n\nexport const useLabelContext = (element?: HTMLElement | null) => {\n  const context = useLabelContextImpl('LabelConsumer')\n  const { controlRef } = context\n\n  React.useEffect(() => {\n    if (element) controlRef.current = element\n  }, [element, controlRef])\n\n  return context.id\n}\n\nconst Root = Label\n"],
+  "mappings": "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",
   "names": ["ariaLabelledBy"]
 }

package/dist/jsx/Label.js

@@ -76,6 +76,7 @@ const LabelComponent = React.forwardRef(
     return <LabelProvider id={id} controlRef={controlRef}><LabelFrame
       role="label"
       id={id}
+      htmlFor={htmlFor}
       {...labelProps}
       ref={composedRefs}
       onMouseDown={(event) => {
@@ -87,7 +88,7 @@ const LabelComponent = React.forwardRef(
       onPress={(event) => {
         props.onPress?.(event);
         if (isWeb) {
-          if (!controlRef.current || event.defaultPrevented)
+          if (htmlFor || !controlRef.current || event.defaultPrevented)
             return;
           const isClickingControl = controlRef.current.contains(
             event.target

package/dist/jsx/Label.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Label.tsx"],
-  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  ReactComponentWithRef,\n  isWeb,\n  styled,\n  themeable,\n  useId,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { getFontSized } from '@tamagui/get-font-sized'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n  id?: string\n  controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n  id: undefined,\n  controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n  name: 'Label',\n  tag: 'label',\n  size: '$true',\n  backgroundColor: 'transparent',\n  display: 'flex',\n  alignItems: 'center',\n  userSelect: 'none',\n  cursor: 'default',\n  pressStyle: {\n    color: '$colorPress',\n  },\n  variants: {\n    size: {\n      '...size': (val, extras) => {\n        const buttonStyle = getButtonSized(val, extras)\n        return {\n          ...getFontSized(val, extras),\n          height: buttonStyle.height,\n          lineHeight: buttonStyle.height,\n        }\n      },\n    },\n  } as const,\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n  htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(\n  (props, forwardedRef) => {\n    const { htmlFor, id: idProp, ...labelProps } = props\n    const controlRef = React.useRef<HTMLElement | null>(null)\n    const ref = React.useRef<any>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref)\n    const backupId = useId()\n    const id = idProp ?? backupId\n\n    if (isWeb) {\n      React.useEffect(() => {\n        if (htmlFor) {\n          const element = document.getElementById(htmlFor)\n          const label = ref.current\n          if (label && element) {\n            const getAriaLabel = () => element.getAttribute('aria-labelledby')\n            const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(' ')\n            element.setAttribute('aria-labelledby', ariaLabelledBy)\n            controlRef.current = element\n            return () => {\n              /**\n               * We get the latest attribute value because at the time that this cleanup fires,\n               * the values from the closure may have changed.\n               */\n              if (!id) return\n              const ariaLabelledBy = getAriaLabel()?.replace(id, '')\n              if (ariaLabelledBy === '') {\n                element.removeAttribute('aria-labelledby')\n              } else if (ariaLabelledBy) {\n                element.setAttribute('aria-labelledby', ariaLabelledBy)\n              }\n            }\n          }\n        }\n      }, [id, htmlFor])\n    }\n\n    return (\n      <LabelProvider id={id} controlRef={controlRef}>\n        <LabelFrame\n          // @ts-ignore\n          role=\"label\"\n          id={id}\n          {...labelProps}\n          ref={composedRefs as any}\n          onMouseDown={(event) => {\n            props.onMouseDown?.(event)\n            // prevent text selection when double clicking label\n            if (!event.defaultPrevented && event.detail > 1) {\n              event.preventDefault()\n            }\n          }}\n          onPress={(event) => {\n            props.onPress?.(event)\n\n            if (isWeb) {\n              if (!controlRef.current || event.defaultPrevented) return\n              const isClickingControl = controlRef.current.contains(\n                event.target as any as Node\n              )\n              // Ensure event was generated by a user action\n              // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n              const isUserClick = event.isTrusted === true\n              /**\n               * When a label is wrapped around the control it labels, we trigger the appropriate events\n               * on the control when the label is clicked. We do nothing if the user is already clicking the\n               * control inside the label.\n               */\n              if (!isClickingControl && isUserClick) {\n                controlRef.current.click()\n                controlRef.current.focus()\n              }\n            } else {\n              if (props.htmlFor) {\n                focusFocusable(props.htmlFor)\n              }\n            }\n          }}\n        />\n      </LabelProvider>\n    )\n  }\n)\n\nLabelComponent.displayName = NAME\n\nexport const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View> =\n  LabelFrame.extractable(themeable(LabelComponent as any) as any, {\n    neverFlatten: true,\n  })\n\nexport const useLabelContext = (element?: HTMLElement | null) => {\n  const context = useLabelContextImpl('LabelConsumer')\n  const { controlRef } = context\n\n  React.useEffect(() => {\n    if (element) controlRef.current = element\n  }, [element, controlRef])\n\n  return context.id\n}\n\nconst Root = Label\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  ReactComponentWithRef,\n  isWeb,\n  styled,\n  themeable,\n  useId,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { getFontSized } from '@tamagui/get-font-sized'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n  id?: string\n  controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n  id: undefined,\n  controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n  name: 'Label',\n  tag: 'label',\n  size: '$true',\n  backgroundColor: 'transparent',\n  display: 'flex',\n  alignItems: 'center',\n  userSelect: 'none',\n  cursor: 'default',\n  pressStyle: {\n    color: '$colorPress',\n  },\n  variants: {\n    size: {\n      '...size': (val, extras) => {\n        const buttonStyle = getButtonSized(val, extras)\n        return {\n          ...getFontSized(val, extras),\n          height: buttonStyle.height,\n          lineHeight: buttonStyle.height,\n        }\n      },\n    },\n  } as const,\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n  htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(\n  (props, forwardedRef) => {\n    const { htmlFor, id: idProp, ...labelProps } = props\n    const controlRef = React.useRef<HTMLElement | null>(null)\n    const ref = React.useRef<any>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref)\n    const backupId = useId()\n    const id = idProp ?? backupId\n\n    if (isWeb) {\n      React.useEffect(() => {\n        if (htmlFor) {\n          const element = document.getElementById(htmlFor)\n          const label = ref.current\n          if (label && element) {\n            const getAriaLabel = () => element.getAttribute('aria-labelledby')\n            const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(' ')\n            element.setAttribute('aria-labelledby', ariaLabelledBy)\n            controlRef.current = element\n            return () => {\n              /**\n               * We get the latest attribute value because at the time that this cleanup fires,\n               * the values from the closure may have changed.\n               */\n              if (!id) return\n              const ariaLabelledBy = getAriaLabel()?.replace(id, '')\n              if (ariaLabelledBy === '') {\n                element.removeAttribute('aria-labelledby')\n              } else if (ariaLabelledBy) {\n                element.setAttribute('aria-labelledby', ariaLabelledBy)\n              }\n            }\n          }\n        }\n      }, [id, htmlFor])\n    }\n\n    return (\n      <LabelProvider id={id} controlRef={controlRef}>\n        <LabelFrame\n          role=\"label\"\n          id={id}\n          // @ts-ignore\n          htmlFor={htmlFor}\n          {...labelProps}\n          ref={composedRefs as any}\n          onMouseDown={(event) => {\n            props.onMouseDown?.(event)\n            // prevent text selection when double clicking label\n            if (!event.defaultPrevented && event.detail > 1) {\n              event.preventDefault()\n            }\n          }}\n          onPress={(event) => {\n            props.onPress?.(event)\n\n            if (isWeb) {\n              if (htmlFor || !controlRef.current || event.defaultPrevented) return\n              const isClickingControl = controlRef.current.contains(\n                event.target as any as Node\n              )\n              // Ensure event was generated by a user action\n              // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n              const isUserClick = event.isTrusted === true\n              /**\n               * When a label is wrapped around the control it labels, we trigger the appropriate events\n               * on the control when the label is clicked. We do nothing if the user is already clicking the\n               * control inside the label.\n               */\n              if (!isClickingControl && isUserClick) {\n                controlRef.current.click()\n                controlRef.current.focus()\n              }\n            } else {\n              if (props.htmlFor) {\n                focusFocusable(props.htmlFor)\n              }\n            }\n          }}\n        />\n      </LabelProvider>\n    )\n  }\n)\n\nLabelComponent.displayName = NAME\n\nexport const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View> =\n  LabelFrame.extractable(themeable(LabelComponent as any) as any, {\n    neverFlatten: true,\n  })\n\nexport const useLabelContext = (element?: HTMLElement | null) => {\n  const context = useLabelContextImpl('LabelConsumer')\n  const { controlRef } = context\n\n  React.useEffect(() => {\n    if (element) controlRef.current = element\n  }, [element, controlRef])\n\n  return context.id\n}\n\nconst Root = Label\n"],
+  "mappings": "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",
   "names": ["ariaLabelledBy"]
 }

package/dist/jsx/Label.mjs

@@ -76,6 +76,7 @@ const LabelComponent = React.forwardRef(
     return <LabelProvider id={id} controlRef={controlRef}><LabelFrame
       role="label"
       id={id}
+      htmlFor={htmlFor}
       {...labelProps}
       ref={composedRefs}
       onMouseDown={(event) => {
@@ -87,7 +88,7 @@ const LabelComponent = React.forwardRef(
       onPress={(event) => {
         props.onPress?.(event);
         if (isWeb) {
-          if (!controlRef.current || event.defaultPrevented)
+          if (htmlFor || !controlRef.current || event.defaultPrevented)
             return;
           const isClickingControl = controlRef.current.contains(
             event.target

package/dist/jsx/Label.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Label.tsx"],
-  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  ReactComponentWithRef,\n  isWeb,\n  styled,\n  themeable,\n  useId,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { getFontSized } from '@tamagui/get-font-sized'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n  id?: string\n  controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n  id: undefined,\n  controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n  name: 'Label',\n  tag: 'label',\n  size: '$true',\n  backgroundColor: 'transparent',\n  display: 'flex',\n  alignItems: 'center',\n  userSelect: 'none',\n  cursor: 'default',\n  pressStyle: {\n    color: '$colorPress',\n  },\n  variants: {\n    size: {\n      '...size': (val, extras) => {\n        const buttonStyle = getButtonSized(val, extras)\n        return {\n          ...getFontSized(val, extras),\n          height: buttonStyle.height,\n          lineHeight: buttonStyle.height,\n        }\n      },\n    },\n  } as const,\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n  htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(\n  (props, forwardedRef) => {\n    const { htmlFor, id: idProp, ...labelProps } = props\n    const controlRef = React.useRef<HTMLElement | null>(null)\n    const ref = React.useRef<any>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref)\n    const backupId = useId()\n    const id = idProp ?? backupId\n\n    if (isWeb) {\n      React.useEffect(() => {\n        if (htmlFor) {\n          const element = document.getElementById(htmlFor)\n          const label = ref.current\n          if (label && element) {\n            const getAriaLabel = () => element.getAttribute('aria-labelledby')\n            const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(' ')\n            element.setAttribute('aria-labelledby', ariaLabelledBy)\n            controlRef.current = element\n            return () => {\n              /**\n               * We get the latest attribute value because at the time that this cleanup fires,\n               * the values from the closure may have changed.\n               */\n              if (!id) return\n              const ariaLabelledBy = getAriaLabel()?.replace(id, '')\n              if (ariaLabelledBy === '') {\n                element.removeAttribute('aria-labelledby')\n              } else if (ariaLabelledBy) {\n                element.setAttribute('aria-labelledby', ariaLabelledBy)\n              }\n            }\n          }\n        }\n      }, [id, htmlFor])\n    }\n\n    return (\n      <LabelProvider id={id} controlRef={controlRef}>\n        <LabelFrame\n          // @ts-ignore\n          role=\"label\"\n          id={id}\n          {...labelProps}\n          ref={composedRefs as any}\n          onMouseDown={(event) => {\n            props.onMouseDown?.(event)\n            // prevent text selection when double clicking label\n            if (!event.defaultPrevented && event.detail > 1) {\n              event.preventDefault()\n            }\n          }}\n          onPress={(event) => {\n            props.onPress?.(event)\n\n            if (isWeb) {\n              if (!controlRef.current || event.defaultPrevented) return\n              const isClickingControl = controlRef.current.contains(\n                event.target as any as Node\n              )\n              // Ensure event was generated by a user action\n              // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n              const isUserClick = event.isTrusted === true\n              /**\n               * When a label is wrapped around the control it labels, we trigger the appropriate events\n               * on the control when the label is clicked. We do nothing if the user is already clicking the\n               * control inside the label.\n               */\n              if (!isClickingControl && isUserClick) {\n                controlRef.current.click()\n                controlRef.current.focus()\n              }\n            } else {\n              if (props.htmlFor) {\n                focusFocusable(props.htmlFor)\n              }\n            }\n          }}\n        />\n      </LabelProvider>\n    )\n  }\n)\n\nLabelComponent.displayName = NAME\n\nexport const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View> =\n  LabelFrame.extractable(themeable(LabelComponent as any) as any, {\n    neverFlatten: true,\n  })\n\nexport const useLabelContext = (element?: HTMLElement | null) => {\n  const context = useLabelContextImpl('LabelConsumer')\n  const { controlRef } = context\n\n  React.useEffect(() => {\n    if (element) controlRef.current = element\n  }, [element, controlRef])\n\n  return context.id\n}\n\nconst Root = Label\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  ReactComponentWithRef,\n  isWeb,\n  styled,\n  themeable,\n  useId,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { getButtonSized } from '@tamagui/get-button-sized'\nimport { getFontSized } from '@tamagui/get-font-sized'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n  id?: string\n  controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n  id: undefined,\n  controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n  name: 'Label',\n  tag: 'label',\n  size: '$true',\n  backgroundColor: 'transparent',\n  display: 'flex',\n  alignItems: 'center',\n  userSelect: 'none',\n  cursor: 'default',\n  pressStyle: {\n    color: '$colorPress',\n  },\n  variants: {\n    size: {\n      '...size': (val, extras) => {\n        const buttonStyle = getButtonSized(val, extras)\n        return {\n          ...getFontSized(val, extras),\n          height: buttonStyle.height,\n          lineHeight: buttonStyle.height,\n        }\n      },\n    },\n  } as const,\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n  htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(\n  (props, forwardedRef) => {\n    const { htmlFor, id: idProp, ...labelProps } = props\n    const controlRef = React.useRef<HTMLElement | null>(null)\n    const ref = React.useRef<any>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref)\n    const backupId = useId()\n    const id = idProp ?? backupId\n\n    if (isWeb) {\n      React.useEffect(() => {\n        if (htmlFor) {\n          const element = document.getElementById(htmlFor)\n          const label = ref.current\n          if (label && element) {\n            const getAriaLabel = () => element.getAttribute('aria-labelledby')\n            const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(' ')\n            element.setAttribute('aria-labelledby', ariaLabelledBy)\n            controlRef.current = element\n            return () => {\n              /**\n               * We get the latest attribute value because at the time that this cleanup fires,\n               * the values from the closure may have changed.\n               */\n              if (!id) return\n              const ariaLabelledBy = getAriaLabel()?.replace(id, '')\n              if (ariaLabelledBy === '') {\n                element.removeAttribute('aria-labelledby')\n              } else if (ariaLabelledBy) {\n                element.setAttribute('aria-labelledby', ariaLabelledBy)\n              }\n            }\n          }\n        }\n      }, [id, htmlFor])\n    }\n\n    return (\n      <LabelProvider id={id} controlRef={controlRef}>\n        <LabelFrame\n          role=\"label\"\n          id={id}\n          // @ts-ignore\n          htmlFor={htmlFor}\n          {...labelProps}\n          ref={composedRefs as any}\n          onMouseDown={(event) => {\n            props.onMouseDown?.(event)\n            // prevent text selection when double clicking label\n            if (!event.defaultPrevented && event.detail > 1) {\n              event.preventDefault()\n            }\n          }}\n          onPress={(event) => {\n            props.onPress?.(event)\n\n            if (isWeb) {\n              if (htmlFor || !controlRef.current || event.defaultPrevented) return\n              const isClickingControl = controlRef.current.contains(\n                event.target as any as Node\n              )\n              // Ensure event was generated by a user action\n              // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n              const isUserClick = event.isTrusted === true\n              /**\n               * When a label is wrapped around the control it labels, we trigger the appropriate events\n               * on the control when the label is clicked. We do nothing if the user is already clicking the\n               * control inside the label.\n               */\n              if (!isClickingControl && isUserClick) {\n                controlRef.current.click()\n                controlRef.current.focus()\n              }\n            } else {\n              if (props.htmlFor) {\n                focusFocusable(props.htmlFor)\n              }\n            }\n          }}\n        />\n      </LabelProvider>\n    )\n  }\n)\n\nLabelComponent.displayName = NAME\n\nexport const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View> =\n  LabelFrame.extractable(themeable(LabelComponent as any) as any, {\n    neverFlatten: true,\n  })\n\nexport const useLabelContext = (element?: HTMLElement | null) => {\n  const context = useLabelContextImpl('LabelConsumer')\n  const { controlRef } = context\n\n  React.useEffect(() => {\n    if (element) controlRef.current = element\n  }, [element, controlRef])\n\n  return context.id\n}\n\nconst Root = Label\n"],
+  "mappings": "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",
   "names": ["ariaLabelledBy"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/label",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "sideEffects": [
     "*.css"
   ],
@@ -31,13 +31,13 @@
     }
   },
   "dependencies": {
-    "@tamagui/compose-refs": "^1.5.0",
-    "@tamagui/core": "^1.5.0",
-    "@tamagui/create-context": "^1.5.0",
-    "@tamagui/focusable": "^1.5.0",
-    "@tamagui/get-button-sized": "^1.5.0",
-    "@tamagui/get-font-sized": "^1.5.0",
-    "@tamagui/text": "^1.5.0"
+    "@tamagui/compose-refs": "^1.5.2",
+    "@tamagui/core": "^1.5.2",
+    "@tamagui/create-context": "^1.5.2",
+    "@tamagui/focusable": "^1.5.2",
+    "@tamagui/get-button-sized": "^1.5.2",
+    "@tamagui/get-font-sized": "^1.5.2",
+    "@tamagui/text": "^1.5.2"
   },
   "peerDependencies": {
     "react": "*",
@@ -45,7 +45,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.5.0",
+    "@tamagui/build": "^1.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native": "*"

package/src/Label.tsx

@@ -98,9 +98,10 @@ const LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(
     return (
       <LabelProvider id={id} controlRef={controlRef}>
         <LabelFrame
-          // @ts-ignore
           role="label"
           id={id}
+          // @ts-ignore
+          htmlFor={htmlFor}
           {...labelProps}
           ref={composedRefs as any}
           onMouseDown={(event) => {
@@ -114,7 +115,7 @@ const LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>(
             props.onPress?.(event)
 
             if (isWeb) {
-              if (!controlRef.current || event.defaultPrevented) return
+              if (htmlFor || !controlRef.current || event.defaultPrevented) return
               const isClickingControl = controlRef.current.contains(
                 event.target as any as Node
               )

package/types/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../src/Label.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,QAAQ,EACR,qBAAqB,EAMtB,MAAM,eAAe,CAAA;AAOtB,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAcnC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;EAwBrB,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,GAAG;IACrD,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAwFD,eAAO,MAAM,KAAK,EAAE,qBAAqB,CAAC,UAAU,EAAE,iBAAiB,GAAG,IAAI,CAG1E,CAAA;AAEJ,eAAO,MAAM,eAAe,aAAc,WAAW,GAAG,IAAI,uBAS3D,CAAA"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../src/Label.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,QAAQ,EACR,qBAAqB,EAMtB,MAAM,eAAe,CAAA;AAOtB,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAcnC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;EAwBrB,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,GAAG;IACrD,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAyFD,eAAO,MAAM,KAAK,EAAE,qBAAqB,CAAC,UAAU,EAAE,iBAAiB,GAAG,IAAI,CAG1E,CAAA;AAEJ,eAAO,MAAM,eAAe,aAAc,WAAW,GAAG,IAAI,uBAS3D,CAAA"}