@tamagui/label 1.0.1-beta.103

package/dist/cjs/Card.js

@@ -0,0 +1,144 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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 Card_exports = {};
+__export(Card_exports, {
+  Card: () => Card,
+  CardBackground: () => CardBackground,
+  CardFooter: () => CardFooter,
+  CardFrame: () => CardFrame,
+  CardHeader: () => CardHeader,
+  createCardScope: () => createCardScope,
+  useCardContext: () => useCardContext
+});
+module.exports = __toCommonJS(Card_exports);
+var import_core = require("@tamagui/core");
+var import_create_context = require("@tamagui/create-context");
+var import_stacks = require("@tamagui/stacks");
+var import_react = __toESM(require("react"));
+import_react.default["createElement"];
+const CARD_NAME = "CARD";
+const [createCardContext, createCardScope] = (0, import_create_context.createContextScope)(CARD_NAME);
+const [CardProvider, useCardContext] = createCardContext(CARD_NAME);
+const CardFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
+  name: "Card",
+  backgroundColor: "$background",
+  position: "relative",
+  overflow: "hidden",
+  variants: {
+    size: {
+      "...size": (val, { tokens }) => {
+        return {
+          borderRadius: tokens.radius[val] ?? val
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$4"
+  }
+});
+const CardHeader = (0, import_core.styled)(import_stacks.ThemeableStack, {
+  name: "CardHeader",
+  zIndex: 10,
+  backgroundColor: "transparent",
+  marginBottom: "auto",
+  variants: {
+    size: {
+      "...size": (val, { tokens }) => {
+        return {
+          padding: tokens.space[val] ?? val
+        };
+      }
+    }
+  }
+});
+const CardFooter = (0, import_core.styled)(CardHeader, {
+  name: "CardFooter",
+  zIndex: 5,
+  flexDirection: "row",
+  marginTop: "auto",
+  marginBottom: 0
+});
+const CardBackground = (0, import_core.styled)(import_stacks.ThemeableStack, {
+  name: "CardBackground",
+  zIndex: 0,
+  fullscreen: true,
+  overflow: "hidden",
+  pointerEvents: "none",
+  padding: 0
+});
+const Card = (0, import_core.withStaticProperties)(CardFrame.extractable((0, import_core.themeable)((0, import_react.forwardRef)((_a, ref) => {
+  var _b = _a, { size, __scopeCard, children } = _b, props = __objRest(_b, ["size", "__scopeCard", "children"]);
+  return /* @__PURE__ */ import_react.default.createElement(CardProvider, {
+    scope: __scopeCard,
+    size
+  }, /* @__PURE__ */ import_react.default.createElement(CardFrame, __spreadValues({
+    ref
+  }, props), import_react.default.Children.map(children, (child) => {
+    if ((0, import_core.isTamaguiElement)(child) && !child.props.size) {
+      return (0, import_react.cloneElement)(child, {
+        size
+      });
+    }
+    return child;
+  })));
+}))), {
+  Header: CardHeader,
+  Footer: CardFooter,
+  Background: CardBackground
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Card,
+  CardBackground,
+  CardFooter,
+  CardFrame,
+  CardHeader,
+  createCardScope,
+  useCardContext
+});
+//# sourceMappingURL=Card.js.map

package/dist/cjs/Card.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Card.tsx"],
+  "sourcesContent": ["import {\n  GetProps,\n  SizeTokens,\n  isTamaguiElement,\n  styled,\n  themeable,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport React, { cloneElement, forwardRef } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nconst CARD_NAME = 'CARD'\n\ntype CardContextValue = {\n  size?: SizeTokens\n}\n\nconst [createCardContext, createCardScope] = createContextScope(CARD_NAME)\nconst [CardProvider, useCardContext] = createCardContext<CardContextValue>(CARD_NAME)\n\nexport const CardFrame = styled(ThemeableStack, {\n  name: 'Card',\n  backgroundColor: '$background',\n  position: 'relative',\n  overflow: 'hidden',\n\n  variants: {\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          borderRadius: tokens.radius[val] ?? val,\n        }\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\nexport const CardHeader = styled(ThemeableStack, {\n  name: 'CardHeader',\n  zIndex: 10,\n  backgroundColor: 'transparent',\n  marginBottom: 'auto',\n\n  variants: {\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          padding: tokens.space[val] ?? val,\n        }\n      },\n    },\n  },\n})\n\nexport const CardFooter = styled(CardHeader, {\n  name: 'CardFooter',\n  zIndex: 5,\n  flexDirection: 'row',\n  marginTop: 'auto',\n  marginBottom: 0,\n})\n\nexport const CardBackground = styled(ThemeableStack, {\n  name: 'CardBackground',\n  zIndex: 0,\n  fullscreen: true,\n  overflow: 'hidden',\n  pointerEvents: 'none',\n  padding: 0,\n})\n\nexport type CardHeaderProps = GetProps<typeof CardHeader>\nexport type CardFooterProps = GetProps<typeof CardFooter>\n\nexport type CardProps = GetProps<typeof CardFrame>\n\nexport const Card = withStaticProperties(\n  CardFrame.extractable(\n    themeable(\n      forwardRef<HTMLElement | View, ScopedProps<CardProps, 'Card'>>(\n        ({ size, __scopeCard, children, ...props }, ref) => {\n          return (\n            <CardProvider scope={__scopeCard} size={size}>\n              <CardFrame ref={ref} {...props}>\n                {React.Children.map(children, (child) => {\n                  if (isTamaguiElement(child) && !child.props.size) {\n                    return cloneElement(child, {\n                      size,\n                    })\n                  }\n                  return child\n                })}\n              </CardFrame>\n            </CardProvider>\n          )\n        }\n      )\n    )\n  ),\n  {\n    Header: CardHeader,\n    Footer: CardFooter,\n    Background: CardBackground,\n  }\n)\n\nexport { createCardScope, useCardContext }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOO;AACP,4BAAgD;AAChD,oBAA+B;AAC/B,mBAAgD;AAIhD,qBAAM;AAEN,MAAM,YAAY;AAMlB,MAAM,CAAC,mBAAmB,mBAAmB,8CAAmB,SAAS;AACzE,MAAM,CAAC,cAAc,kBAAkB,kBAAoC,SAAS;AAE7E,MAAM,YAAY,wBAAO,8BAAgB;AAAA,EAC9C,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAC9B,eAAO;AAAA,UACL,cAAc,OAAO,OAAO,QAAQ;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,aAAa,wBAAO,8BAAgB;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAC9B,eAAO;AAAA,UACL,SAAS,OAAO,MAAM,QAAQ;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,wBAAO,YAAY;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc;AAChB,CAAC;AAEM,MAAM,iBAAiB,wBAAO,8BAAgB;AAAA,EACnD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EACf,SAAS;AACX,CAAC;AAOM,MAAM,OAAO,sCAClB,UAAU,YACR,2BACE,6BACE,CAAC,IAA2C,QAAQ;AAAnD,eAAE,QAAM,aAAa,aAArB,IAAkC,kBAAlC,IAAkC,CAAhC,QAAM,eAAa;AACpB,SACE,mDAAC;AAAA,IAAa,OAAO;AAAA,IAAa;AAAA,KAChC,mDAAC;AAAA,IAAU;AAAA,KAAc,QACtB,qBAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,kCAAiB,KAAK,KAAK,CAAC,MAAM,MAAM,MAAM;AAChD,aAAO,+BAAa,OAAO;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC,CACH,CACF;AAEJ,CACF,CACF,CACF,GACA;AAAA,EACE,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AACd,CACF;",
+  "names": []
+}

package/dist/cjs/Label.js

@@ -0,0 +1,178 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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_compose_refs = require("@tamagui/compose-refs");
+var import_core = require("@tamagui/core");
+var import_create_context = require("@tamagui/create-context");
+var import_focusable = require("@tamagui/focusable");
+var import_text = require("@tamagui/text");
+var React = __toESM(require("react"));
+const NAME = "Label";
+const [LabelProvider, useLabelContextImpl] = (0, import_create_context.createContext)(NAME, {
+  id: void 0,
+  controlRef: { current: null }
+});
+const LabelFrame = (0, import_core.styled)(import_text.SizableText, {
+  name: "Label",
+  tag: "label",
+  size: "$4",
+  backgroundColor: "transparent",
+  display: "flex",
+  alignItems: "center",
+  selectable: false,
+  cursor: "default",
+  pressStyle: {
+    color: "$colorPress"
+  },
+  variants: {
+    size: {
+      "...size": (val, extras) => {
+        const buttonStyle = (0, import_core.getButtonSize)(val, extras);
+        return __spreadProps(__spreadValues({}, (0, import_core.getFont)(val, extras)), {
+          height: buttonStyle.height,
+          lineHeight: buttonStyle.height
+        });
+      }
+    }
+  }
+});
+const LabelComponent = React.forwardRef((props, forwardedRef) => {
+  const _a = props, { htmlFor, id: idProp } = _a, labelProps = __objRest(_a, ["htmlFor", "id"]);
+  const controlRef = React.useRef(null);
+  const ref = React.useRef(null);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
+  const id = (0, import_core.useId)(idProp);
+  if (import_core.isWeb) {
+    React.useEffect(() => {
+      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 () => {
+            var _a2;
+            if (!id)
+              return;
+            const ariaLabelledBy2 = (_a2 = getAriaLabel()) == null ? void 0 : _a2.replace(id, "");
+            if (ariaLabelledBy2 === "") {
+              element.removeAttribute("aria-labelledby");
+            } else if (ariaLabelledBy2) {
+              element.setAttribute("aria-labelledby", ariaLabelledBy2);
+            }
+          };
+        }
+      }
+    }, [id, htmlFor]);
+  }
+  return /* @__PURE__ */ React.createElement(LabelProvider, {
+    id,
+    controlRef
+  }, /* @__PURE__ */ React.createElement(LabelFrame, __spreadProps(__spreadValues({
+    role: "label",
+    id
+  }, labelProps), {
+    ref: composedRefs,
+    onMouseDown: (event) => {
+      var _a2;
+      (_a2 = props.onMouseDown) == null ? void 0 : _a2.call(props, event);
+      if (!event.defaultPrevented && event.detail > 1) {
+        event.preventDefault();
+      }
+    },
+    onPress: (event) => {
+      var _a2;
+      (_a2 = props.onPress) == null ? void 0 : _a2.call(props, event);
+      if (import_core.isWeb) {
+        if (!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);
+        }
+      }
+    }
+  })));
+});
+LabelComponent.displayName = NAME;
+const Label = LabelFrame.extractable((0, import_core.themeable)(LabelComponent), {
+  neverFlatten: true
+});
+const useLabelContext = (element) => {
+  const context = useLabelContextImpl("LabelConsumer");
+  const { controlRef } = context;
+  React.useEffect(() => {
+    if (element)
+      controlRef.current = element;
+  }, [element, controlRef]);
+  return context.id;
+};
+const Root = Label;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Label,
+  LabelFrame,
+  useLabelContext
+});
+//# sourceMappingURL=Label.js.map

package/dist/cjs/Label.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Label.tsx"],
+  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  ReactComponentWithRef,\n  getButtonSize,\n  getFont,\n  isWeb,\n  styled,\n  themeable,\n  useId,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\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: '$4',\n  backgroundColor: 'transparent',\n  display: 'flex',\n  alignItems: 'center',\n  selectable: false,\n  cursor: 'default',\n  pressStyle: {\n    color: '$colorPress',\n  },\n  variants: {\n    size: {\n      '...size': (val, extras) => {\n        const buttonStyle = getButtonSize(val, extras)\n        return {\n          ...getFont(val, extras),\n          height: buttonStyle.height,\n          lineHeight: buttonStyle.height,\n        }\n      },\n    },\n  },\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n  htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>((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 id = useId(idProp)\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}\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(event.target as any as Node)\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\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAgC;AAChC,kBASO;AACP,4BAA8B;AAC9B,uBAA+B;AAC/B,kBAA4B;AAC5B,YAAuB;AAGvB,MAAM,OAAO;AAOb,MAAM,CAAC,eAAe,uBAAuB,yCAAiC,MAAM;AAAA,EAClF,IAAI;AAAA,EACJ,YAAY,EAAE,SAAS,KAAK;AAC9B,CAAC;AAEM,MAAM,aAAa,wBAAO,yBAAa;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,+BAAc,KAAK,MAAM;AAC7C,eAAO,iCACF,yBAAQ,KAAK,MAAM,IADjB;AAAA,UAEL,QAAQ,YAAY;AAAA,UACpB,YAAY,YAAY;AAAA,QAC1B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAMD,MAAM,iBAAiB,MAAM,WAA0C,CAAC,OAAO,iBAAiB;AAC9F,QAA+C,YAAvC,WAAS,IAAI,WAA0B,IAAf,uBAAe,IAAf,CAAxB,WAAS;AACjB,QAAM,aAAa,MAAM,OAA2B,IAAI;AACxD,QAAM,MAAM,MAAM,OAAY,IAAI;AAClC,QAAM,eAAe,yCAAgB,cAAc,GAAG;AACtD,QAAM,KAAK,uBAAM,MAAM;AAEvB,MAAI,mBAAO;AACT,UAAM,UAAU,MAAM;AACpB,UAAI,SAAS;AACX,cAAM,UAAU,SAAS,eAAe,OAAO;AAC/C,cAAM,QAAQ,IAAI;AAClB,YAAI,SAAS,SAAS;AACpB,gBAAM,eAAe,MAAM,QAAQ,aAAa,iBAAiB;AACjE,gBAAM,iBAAiB,CAAC,IAAI,aAAa,CAAC,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACpE,kBAAQ,aAAa,mBAAmB,cAAc;AACtD,qBAAW,UAAU;AACrB,iBAAO,MAAM;AA5EvB;AAiFY,gBAAI,CAAC;AAAI;AACT,kBAAM,kBAAiB,oBAAa,MAAb,oBAAgB,QAAQ,IAAI;AACnD,gBAAI,oBAAmB,IAAI;AACzB,sBAAQ,gBAAgB,iBAAiB;AAAA,YAC3C,WAAW,iBAAgB;AACzB,sBAAQ,aAAa,mBAAmB,eAAc;AAAA,YACxD;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,GAAG,CAAC,IAAI,OAAO,CAAC;AAAA,EAClB;AAEA,SACE,oCAAC;AAAA,IAAc;AAAA,IAAQ;AAAA,KACrB,oCAAC;AAAA,IAEC,MAAK;AAAA,IACL;AAAA,KACI,aAJL;AAAA,IAKC,KAAK;AAAA,IACL,aAAa,CAAC,UAAU;AAtGhC;AAuGU,mBAAM,gBAAN,gCAAoB;AAEpB,UAAI,CAAC,MAAM,oBAAoB,MAAM,SAAS,GAAG;AAC/C,cAAM,eAAe;AAAA,MACvB;AAAA,IACF;AAAA,IACA,SAAS,CAAC,UAAU;AA7G5B;AA8GU,mBAAM,YAAN,gCAAgB;AAEhB,UAAI,mBAAO;AACT,YAAI,CAAC,WAAW,WAAW,MAAM;AAAkB;AACnD,cAAM,oBAAoB,WAAW,QAAQ,SAAS,MAAM,MAAqB;AAGjF,cAAM,cAAc,MAAM,cAAc;AAMxC,YAAI,CAAC,qBAAqB,aAAa;AACrC,qBAAW,QAAQ,MAAM;AACzB,qBAAW,QAAQ,MAAM;AAAA,QAC3B;AAAA,MACF,OAAO;AACL,YAAI,MAAM,SAAS;AACjB,+CAAe,MAAM,OAAO;AAAA,QAC9B;AAAA,MACF;AAAA,IACF;AAAA,IACF,CACF;AAEJ,CAAC;AAED,eAAe,cAAc;AAEtB,MAAM,QACX,WAAW,YAAY,2BAAU,cAAqB,GAAU;AAAA,EAC9D,cAAc;AAChB,CAAC;AAEI,MAAM,kBAAkB,CAAC,YAAiC;AAC/D,QAAM,UAAU,oBAAoB,eAAe;AACnD,QAAM,EAAE,eAAe;AAEvB,QAAM,UAAU,MAAM;AACpB,QAAI;AAAS,iBAAW,UAAU;AAAA,EACpC,GAAG,CAAC,SAAS,UAAU,CAAC;AAExB,SAAO,QAAQ;AACjB;AAEA,MAAM,OAAO;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./Label"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Label'\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,oBAAd;",
+  "names": []
+}

package/dist/esm/Card.js

@@ -0,0 +1,119 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import {
+  isTamaguiElement,
+  styled,
+  themeable,
+  withStaticProperties
+} from "@tamagui/core";
+import { createContextScope } from "@tamagui/create-context";
+import { ThemeableStack } from "@tamagui/stacks";
+import React, { cloneElement, forwardRef } from "react";
+React["createElement"];
+const CARD_NAME = "CARD";
+const [createCardContext, createCardScope] = createContextScope(CARD_NAME);
+const [CardProvider, useCardContext] = createCardContext(CARD_NAME);
+const CardFrame = styled(ThemeableStack, {
+  name: "Card",
+  backgroundColor: "$background",
+  position: "relative",
+  overflow: "hidden",
+  variants: {
+    size: {
+      "...size": (val, { tokens }) => {
+        return {
+          borderRadius: tokens.radius[val] ?? val
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$4"
+  }
+});
+const CardHeader = styled(ThemeableStack, {
+  name: "CardHeader",
+  zIndex: 10,
+  backgroundColor: "transparent",
+  marginBottom: "auto",
+  variants: {
+    size: {
+      "...size": (val, { tokens }) => {
+        return {
+          padding: tokens.space[val] ?? val
+        };
+      }
+    }
+  }
+});
+const CardFooter = styled(CardHeader, {
+  name: "CardFooter",
+  zIndex: 5,
+  flexDirection: "row",
+  marginTop: "auto",
+  marginBottom: 0
+});
+const CardBackground = styled(ThemeableStack, {
+  name: "CardBackground",
+  zIndex: 0,
+  fullscreen: true,
+  overflow: "hidden",
+  pointerEvents: "none",
+  padding: 0
+});
+const Card = withStaticProperties(CardFrame.extractable(themeable(forwardRef((_a, ref) => {
+  var _b = _a, { size, __scopeCard, children } = _b, props = __objRest(_b, ["size", "__scopeCard", "children"]);
+  return /* @__PURE__ */ React.createElement(CardProvider, {
+    scope: __scopeCard,
+    size
+  }, /* @__PURE__ */ React.createElement(CardFrame, __spreadValues({
+    ref
+  }, props), React.Children.map(children, (child) => {
+    if (isTamaguiElement(child) && !child.props.size) {
+      return cloneElement(child, {
+        size
+      });
+    }
+    return child;
+  })));
+}))), {
+  Header: CardHeader,
+  Footer: CardFooter,
+  Background: CardBackground
+});
+export {
+  Card,
+  CardBackground,
+  CardFooter,
+  CardFrame,
+  CardHeader,
+  createCardScope,
+  useCardContext
+};
+//# sourceMappingURL=Card.js.map

package/dist/esm/Card.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Card.tsx"],
+  "sourcesContent": ["import {\n  GetProps,\n  SizeTokens,\n  isTamaguiElement,\n  styled,\n  themeable,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport React, { cloneElement, forwardRef } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nconst CARD_NAME = 'CARD'\n\ntype CardContextValue = {\n  size?: SizeTokens\n}\n\nconst [createCardContext, createCardScope] = createContextScope(CARD_NAME)\nconst [CardProvider, useCardContext] = createCardContext<CardContextValue>(CARD_NAME)\n\nexport const CardFrame = styled(ThemeableStack, {\n  name: 'Card',\n  backgroundColor: '$background',\n  position: 'relative',\n  overflow: 'hidden',\n\n  variants: {\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          borderRadius: tokens.radius[val] ?? val,\n        }\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\nexport const CardHeader = styled(ThemeableStack, {\n  name: 'CardHeader',\n  zIndex: 10,\n  backgroundColor: 'transparent',\n  marginBottom: 'auto',\n\n  variants: {\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          padding: tokens.space[val] ?? val,\n        }\n      },\n    },\n  },\n})\n\nexport const CardFooter = styled(CardHeader, {\n  name: 'CardFooter',\n  zIndex: 5,\n  flexDirection: 'row',\n  marginTop: 'auto',\n  marginBottom: 0,\n})\n\nexport const CardBackground = styled(ThemeableStack, {\n  name: 'CardBackground',\n  zIndex: 0,\n  fullscreen: true,\n  overflow: 'hidden',\n  pointerEvents: 'none',\n  padding: 0,\n})\n\nexport type CardHeaderProps = GetProps<typeof CardHeader>\nexport type CardFooterProps = GetProps<typeof CardFooter>\n\nexport type CardProps = GetProps<typeof CardFrame>\n\nexport const Card = withStaticProperties(\n  CardFrame.extractable(\n    themeable(\n      forwardRef<HTMLElement | View, ScopedProps<CardProps, 'Card'>>(\n        ({ size, __scopeCard, children, ...props }, ref) => {\n          return (\n            <CardProvider scope={__scopeCard} size={size}>\n              <CardFrame ref={ref} {...props}>\n                {React.Children.map(children, (child) => {\n                  if (isTamaguiElement(child) && !child.props.size) {\n                    return cloneElement(child, {\n                      size,\n                    })\n                  }\n                  return child\n                })}\n              </CardFrame>\n            </CardProvider>\n          )\n        }\n      )\n    )\n  ),\n  {\n    Header: CardHeader,\n    Footer: CardFooter,\n    Background: CardBackground,\n  }\n)\n\nexport { createCardScope, useCardContext }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AACA;AAIA,MAAM;AAEN,MAAM,YAAY;AAMlB,MAAM,CAAC,mBAAmB,mBAAmB,mBAAmB,SAAS;AACzE,MAAM,CAAC,cAAc,kBAAkB,kBAAoC,SAAS;AAE7E,MAAM,YAAY,OAAO,gBAAgB;AAAA,EAC9C,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAC9B,eAAO;AAAA,UACL,cAAc,OAAO,OAAO,QAAQ;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,aAAa,OAAO,gBAAgB;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAC9B,eAAO;AAAA,UACL,SAAS,OAAO,MAAM,QAAQ;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,OAAO,YAAY;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc;AAChB,CAAC;AAEM,MAAM,iBAAiB,OAAO,gBAAgB;AAAA,EACnD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EACf,SAAS;AACX,CAAC;AAOM,MAAM,OAAO,qBAClB,UAAU,YACR,UACE,WACE,CAAC,IAA2C,QAAQ;AAAnD,eAAE,QAAM,aAAa,aAArB,IAAkC,kBAAlC,IAAkC,CAAhC,QAAM,eAAa;AACpB,SACE,oCAAC;AAAA,IAAa,OAAO;AAAA,IAAa;AAAA,KAChC,oCAAC;AAAA,IAAU;AAAA,KAAc,QACtB,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,iBAAiB,KAAK,KAAK,CAAC,MAAM,MAAM,MAAM;AAChD,aAAO,aAAa,OAAO;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC,CACH,CACF;AAEJ,CACF,CACF,CACF,GACA;AAAA,EACE,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AACd,CACF;",
+  "names": []
+}

package/dist/esm/Label.js

@@ -0,0 +1,159 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { useComposedRefs } from "@tamagui/compose-refs";
+import {
+  getButtonSize,
+  getFont,
+  isWeb,
+  styled,
+  themeable,
+  useId
+} from "@tamagui/core";
+import { createContext } from "@tamagui/create-context";
+import { focusFocusable } from "@tamagui/focusable";
+import { SizableText } from "@tamagui/text";
+import * as React from "react";
+const NAME = "Label";
+const [LabelProvider, useLabelContextImpl] = createContext(NAME, {
+  id: void 0,
+  controlRef: { current: null }
+});
+const LabelFrame = styled(SizableText, {
+  name: "Label",
+  tag: "label",
+  size: "$4",
+  backgroundColor: "transparent",
+  display: "flex",
+  alignItems: "center",
+  selectable: false,
+  cursor: "default",
+  pressStyle: {
+    color: "$colorPress"
+  },
+  variants: {
+    size: {
+      "...size": (val, extras) => {
+        const buttonStyle = getButtonSize(val, extras);
+        return __spreadProps(__spreadValues({}, getFont(val, extras)), {
+          height: buttonStyle.height,
+          lineHeight: buttonStyle.height
+        });
+      }
+    }
+  }
+});
+const LabelComponent = React.forwardRef((props, forwardedRef) => {
+  const _a = props, { htmlFor, id: idProp } = _a, labelProps = __objRest(_a, ["htmlFor", "id"]);
+  const controlRef = React.useRef(null);
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  const id = useId(idProp);
+  if (isWeb) {
+    React.useEffect(() => {
+      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 () => {
+            var _a2;
+            if (!id)
+              return;
+            const ariaLabelledBy2 = (_a2 = getAriaLabel()) == null ? void 0 : _a2.replace(id, "");
+            if (ariaLabelledBy2 === "") {
+              element.removeAttribute("aria-labelledby");
+            } else if (ariaLabelledBy2) {
+              element.setAttribute("aria-labelledby", ariaLabelledBy2);
+            }
+          };
+        }
+      }
+    }, [id, htmlFor]);
+  }
+  return /* @__PURE__ */ React.createElement(LabelProvider, {
+    id,
+    controlRef
+  }, /* @__PURE__ */ React.createElement(LabelFrame, __spreadProps(__spreadValues({
+    role: "label",
+    id
+  }, labelProps), {
+    ref: composedRefs,
+    onMouseDown: (event) => {
+      var _a2;
+      (_a2 = props.onMouseDown) == null ? void 0 : _a2.call(props, event);
+      if (!event.defaultPrevented && event.detail > 1) {
+        event.preventDefault();
+      }
+    },
+    onPress: (event) => {
+      var _a2;
+      (_a2 = props.onPress) == null ? void 0 : _a2.call(props, event);
+      if (isWeb) {
+        if (!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) {
+          focusFocusable(props.htmlFor);
+        }
+      }
+    }
+  })));
+});
+LabelComponent.displayName = NAME;
+const Label = LabelFrame.extractable(themeable(LabelComponent), {
+  neverFlatten: true
+});
+const useLabelContext = (element) => {
+  const context = useLabelContextImpl("LabelConsumer");
+  const { controlRef } = context;
+  React.useEffect(() => {
+    if (element)
+      controlRef.current = element;
+  }, [element, controlRef]);
+  return context.id;
+};
+const Root = Label;
+export {
+  Label,
+  LabelFrame,
+  useLabelContext
+};
+//# sourceMappingURL=Label.js.map

package/dist/esm/Label.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Label.tsx"],
+  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  ReactComponentWithRef,\n  getButtonSize,\n  getFont,\n  isWeb,\n  styled,\n  themeable,\n  useId,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\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: '$4',\n  backgroundColor: 'transparent',\n  display: 'flex',\n  alignItems: 'center',\n  selectable: false,\n  cursor: 'default',\n  pressStyle: {\n    color: '$colorPress',\n  },\n  variants: {\n    size: {\n      '...size': (val, extras) => {\n        const buttonStyle = getButtonSize(val, extras)\n        return {\n          ...getFont(val, extras),\n          height: buttonStyle.height,\n          lineHeight: buttonStyle.height,\n        }\n      },\n    },\n  },\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n  htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>((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 id = useId(idProp)\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}\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(event.target as any as Node)\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\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": []
+}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from "./Label";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Label'\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/jsx/Card.js

@@ -0,0 +1,87 @@
+import {
+  isTamaguiElement,
+  styled,
+  themeable,
+  withStaticProperties
+} from "@tamagui/core";
+import { createContextScope } from "@tamagui/create-context";
+import { ThemeableStack } from "@tamagui/stacks";
+import React, { cloneElement, forwardRef } from "react";
+React["createElement"];
+const CARD_NAME = "CARD";
+const [createCardContext, createCardScope] = createContextScope(CARD_NAME);
+const [CardProvider, useCardContext] = createCardContext(CARD_NAME);
+const CardFrame = styled(ThemeableStack, {
+  name: "Card",
+  backgroundColor: "$background",
+  position: "relative",
+  overflow: "hidden",
+  variants: {
+    size: {
+      "...size": (val, { tokens }) => {
+        var _a;
+        return {
+          borderRadius: (_a = tokens.radius[val]) != null ? _a : val
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$4"
+  }
+});
+const CardHeader = styled(ThemeableStack, {
+  name: "CardHeader",
+  zIndex: 10,
+  backgroundColor: "transparent",
+  marginBottom: "auto",
+  variants: {
+    size: {
+      "...size": (val, { tokens }) => {
+        var _a;
+        return {
+          padding: (_a = tokens.space[val]) != null ? _a : val
+        };
+      }
+    }
+  }
+});
+const CardFooter = styled(CardHeader, {
+  name: "CardFooter",
+  zIndex: 5,
+  flexDirection: "row",
+  marginTop: "auto",
+  marginBottom: 0
+});
+const CardBackground = styled(ThemeableStack, {
+  name: "CardBackground",
+  zIndex: 0,
+  fullscreen: true,
+  overflow: "hidden",
+  pointerEvents: "none",
+  padding: 0
+});
+const Card = withStaticProperties(CardFrame.extractable(themeable(forwardRef(({ size, __scopeCard, children, ...props }, ref) => {
+  return <CardProvider scope={__scopeCard} size={size}><CardFrame ref={ref} {...props}>{React.Children.map(children, (child) => {
+    if (isTamaguiElement(child) && !child.props.size) {
+      return cloneElement(child, {
+        size
+      });
+    }
+    return child;
+  })}</CardFrame></CardProvider>;
+}))), {
+  Header: CardHeader,
+  Footer: CardFooter,
+  Background: CardBackground
+});
+export {
+  Card,
+  CardBackground,
+  CardFooter,
+  CardFrame,
+  CardHeader,
+  createCardScope,
+  useCardContext
+};
+//# sourceMappingURL=Card.js.map

package/dist/jsx/Card.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Card.tsx"],
+  "sourcesContent": ["import {\n  GetProps,\n  SizeTokens,\n  isTamaguiElement,\n  styled,\n  themeable,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport React, { cloneElement, forwardRef } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nconst CARD_NAME = 'CARD'\n\ntype CardContextValue = {\n  size?: SizeTokens\n}\n\nconst [createCardContext, createCardScope] = createContextScope(CARD_NAME)\nconst [CardProvider, useCardContext] = createCardContext<CardContextValue>(CARD_NAME)\n\nexport const CardFrame = styled(ThemeableStack, {\n  name: 'Card',\n  backgroundColor: '$background',\n  position: 'relative',\n  overflow: 'hidden',\n\n  variants: {\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          borderRadius: tokens.radius[val] ?? val,\n        }\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\nexport const CardHeader = styled(ThemeableStack, {\n  name: 'CardHeader',\n  zIndex: 10,\n  backgroundColor: 'transparent',\n  marginBottom: 'auto',\n\n  variants: {\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          padding: tokens.space[val] ?? val,\n        }\n      },\n    },\n  },\n})\n\nexport const CardFooter = styled(CardHeader, {\n  name: 'CardFooter',\n  zIndex: 5,\n  flexDirection: 'row',\n  marginTop: 'auto',\n  marginBottom: 0,\n})\n\nexport const CardBackground = styled(ThemeableStack, {\n  name: 'CardBackground',\n  zIndex: 0,\n  fullscreen: true,\n  overflow: 'hidden',\n  pointerEvents: 'none',\n  padding: 0,\n})\n\nexport type CardHeaderProps = GetProps<typeof CardHeader>\nexport type CardFooterProps = GetProps<typeof CardFooter>\n\nexport type CardProps = GetProps<typeof CardFrame>\n\nexport const Card = withStaticProperties(\n  CardFrame.extractable(\n    themeable(\n      forwardRef<HTMLElement | View, ScopedProps<CardProps, 'Card'>>(\n        ({ size, __scopeCard, children, ...props }, ref) => {\n          return (\n            <CardProvider scope={__scopeCard} size={size}>\n              <CardFrame ref={ref} {...props}>\n                {React.Children.map(children, (child) => {\n                  if (isTamaguiElement(child) && !child.props.size) {\n                    return cloneElement(child, {\n                      size,\n                    })\n                  }\n                  return child\n                })}\n              </CardFrame>\n            </CardProvider>\n          )\n        }\n      )\n    )\n  ),\n  {\n    Header: CardHeader,\n    Footer: CardFooter,\n    Background: CardBackground,\n  }\n)\n\nexport { createCardScope, useCardContext }\n"],
+  "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AACA;AAIA,MAAM;AAEN,MAAM,YAAY;AAMlB,MAAM,CAAC,mBAAmB,mBAAmB,mBAAmB,SAAS;AACzE,MAAM,CAAC,cAAc,kBAAkB,kBAAoC,SAAS;AAE7E,MAAM,YAAY,OAAO,gBAAgB;AAAA,EAC9C,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAjCtC;AAkCQ,eAAO;AAAA,UACL,cAAc,aAAO,OAAO,SAAd,YAAsB;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,aAAa,OAAO,gBAAgB;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAtDtC;AAuDQ,eAAO;AAAA,UACL,SAAS,aAAO,MAAM,SAAb,YAAqB;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,OAAO,YAAY;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc;AAChB,CAAC;AAEM,MAAM,iBAAiB,OAAO,gBAAgB;AAAA,EACnD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EACf,SAAS;AACX,CAAC;AAOM,MAAM,OAAO,qBAClB,UAAU,YACR,UACE,WACE,CAAC,EAAE,MAAM,aAAa,aAAa,SAAS,QAAQ;AAClD,SACE,CAAC,aAAa,OAAO,aAAa,MAAM,MACtC,CAAC,UAAU,KAAK,SAAS,QACtB,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,iBAAiB,KAAK,KAAK,CAAC,MAAM,MAAM,MAAM;AAChD,aAAO,aAAa,OAAO;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC,EACH,EATC,UAUH,EAXC;AAaL,CACF,CACF,CACF,GACA;AAAA,EACE,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AACd,CACF;",
+  "names": []
+}

package/dist/jsx/Label.js

@@ -0,0 +1,119 @@
+import { useComposedRefs } from "@tamagui/compose-refs";
+import {
+  getButtonSize,
+  getFont,
+  isWeb,
+  styled,
+  themeable,
+  useId
+} from "@tamagui/core";
+import { createContext } from "@tamagui/create-context";
+import { focusFocusable } from "@tamagui/focusable";
+import { SizableText } from "@tamagui/text";
+import * as React from "react";
+const NAME = "Label";
+const [LabelProvider, useLabelContextImpl] = createContext(NAME, {
+  id: void 0,
+  controlRef: { current: null }
+});
+const LabelFrame = styled(SizableText, {
+  name: "Label",
+  tag: "label",
+  size: "$4",
+  backgroundColor: "transparent",
+  display: "flex",
+  alignItems: "center",
+  selectable: false,
+  cursor: "default",
+  pressStyle: {
+    color: "$colorPress"
+  },
+  variants: {
+    size: {
+      "...size": (val, extras) => {
+        const buttonStyle = getButtonSize(val, extras);
+        return {
+          ...getFont(val, extras),
+          height: buttonStyle.height,
+          lineHeight: buttonStyle.height
+        };
+      }
+    }
+  }
+});
+const LabelComponent = React.forwardRef((props, forwardedRef) => {
+  const { htmlFor, id: idProp, ...labelProps } = props;
+  const controlRef = React.useRef(null);
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  const id = useId(idProp);
+  if (isWeb) {
+    React.useEffect(() => {
+      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 () => {
+            var _a;
+            if (!id)
+              return;
+            const ariaLabelledBy2 = (_a = getAriaLabel()) == null ? void 0 : _a.replace(id, "");
+            if (ariaLabelledBy2 === "") {
+              element.removeAttribute("aria-labelledby");
+            } else if (ariaLabelledBy2) {
+              element.setAttribute("aria-labelledby", ariaLabelledBy2);
+            }
+          };
+        }
+      }
+    }, [id, htmlFor]);
+  }
+  return <LabelProvider id={id} controlRef={controlRef}><LabelFrame role="label" id={id} {...labelProps} ref={composedRefs} onMouseDown={(event) => {
+    var _a;
+    (_a = props.onMouseDown) == null ? void 0 : _a.call(props, event);
+    if (!event.defaultPrevented && event.detail > 1) {
+      event.preventDefault();
+    }
+  }} onPress={(event) => {
+    var _a;
+    (_a = props.onPress) == null ? void 0 : _a.call(props, event);
+    if (isWeb) {
+      if (!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) {
+        focusFocusable(props.htmlFor);
+      }
+    }
+  }} /></LabelProvider>;
+});
+LabelComponent.displayName = NAME;
+const Label = LabelFrame.extractable(themeable(LabelComponent), {
+  neverFlatten: true
+});
+const useLabelContext = (element) => {
+  const context = useLabelContextImpl("LabelConsumer");
+  const { controlRef } = context;
+  React.useEffect(() => {
+    if (element)
+      controlRef.current = element;
+  }, [element, controlRef]);
+  return context.id;
+};
+const Root = Label;
+export {
+  Label,
+  LabelFrame,
+  useLabelContext
+};
+//# sourceMappingURL=Label.js.map

package/dist/jsx/Label.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Label.tsx"],
+  "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  ReactComponentWithRef,\n  getButtonSize,\n  getFont,\n  isWeb,\n  styled,\n  themeable,\n  useId,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\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: '$4',\n  backgroundColor: 'transparent',\n  display: 'flex',\n  alignItems: 'center',\n  selectable: false,\n  cursor: 'default',\n  pressStyle: {\n    color: '$colorPress',\n  },\n  variants: {\n    size: {\n      '...size': (val, extras) => {\n        const buttonStyle = getButtonSize(val, extras)\n        return {\n          ...getFont(val, extras),\n          height: buttonStyle.height,\n          lineHeight: buttonStyle.height,\n        }\n      },\n    },\n  },\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n  htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>((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 id = useId(idProp)\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}\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(event.target as any as Node)\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\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": []
+}

package/dist/jsx/index.js

@@ -0,0 +1,2 @@
+export * from "./Label";
+//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Label'\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@tamagui/label",
+  "version": "1.0.1-beta.103",
+  "sideEffects": [
+    "*.css"
+  ],
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
+  },
+  "dependencies": {
+    "@tamagui/compose-refs": "^1.0.1-beta.103",
+    "@tamagui/core": "^1.0.1-beta.103",
+    "@tamagui/create-context": "^1.0.1-beta.103",
+    "@tamagui/focusable": "^1.0.1-beta.103",
+    "@tamagui/text": "^1.0.1-beta.103"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.1-beta.103",
+    "@types/react-native": "^0.69.2",
+    "react": "*",
+    "react-dom": "*",
+    "react-native": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/Label.tsx

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

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Label'

package/types/Label.d.ts

@@ -0,0 +1,25 @@
+import { GetProps, ReactComponentWithRef } from '@tamagui/core';
+import { View } from 'react-native';
+export declare const LabelFrame: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
+    size?: import("@tamagui/core").FontSizeTokens | undefined;
+}, "size"> & {
+    size?: import("@tamagui/core").SizeTokens | undefined;
+} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
+    size?: import("@tamagui/core").FontSizeTokens | undefined;
+}, "size"> & {
+    size?: import("@tamagui/core").SizeTokens | undefined;
+}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{
+    size?: import("@tamagui/core").FontSizeTokens | undefined;
+}, "size"> & {
+    size?: import("@tamagui/core").SizeTokens | undefined;
+}>>, any, import("@tamagui/core").TextPropsBase, {
+    size?: import("@tamagui/core").FontSizeTokens | undefined;
+} & {
+    size?: import("@tamagui/core").SizeTokens | undefined;
+}>;
+export declare type LabelProps = GetProps<typeof LabelFrame> & {
+    htmlFor?: string;
+};
+export declare const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View>;
+export declare const useLabelContext: (element?: HTMLElement | null) => string | undefined;
+//# sourceMappingURL=Label.d.ts.map

package/types/Label.d.ts.map

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

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Label';
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}