@tamagui/label 1.5.16 → 1.5.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cjs/Label.js CHANGED
@@ -35,19 +35,19 @@ __export(Label_exports, {
35
35
  module.exports = __toCommonJS(Label_exports);
36
36
  var import_jsx_runtime = require("react/jsx-runtime");
37
37
  var import_compose_refs = require("@tamagui/compose-refs");
38
- var import_core = require("@tamagui/core");
39
38
  var import_create_context = require("@tamagui/create-context");
40
39
  var import_focusable = require("@tamagui/focusable");
41
40
  var import_get_button_sized = require("@tamagui/get-button-sized");
42
41
  var import_get_font_sized = require("@tamagui/get-font-sized");
43
42
  var import_text = require("@tamagui/text");
43
+ var import_web = require("@tamagui/web");
44
44
  var React = __toESM(require("react"));
45
45
  const NAME = "Label";
46
46
  const [LabelProvider, useLabelContextImpl] = (0, import_create_context.createContext)(NAME, {
47
47
  id: void 0,
48
48
  controlRef: { current: null }
49
49
  });
50
- const LabelFrame = (0, import_core.styled)(import_text.SizableText, {
50
+ const LabelFrame = (0, import_web.styled)(import_text.SizableText, {
51
51
  name: "Label",
52
52
  tag: "label",
53
53
  variants: {
@@ -86,9 +86,9 @@ const LabelComponent = React.forwardRef(
86
86
  const controlRef = React.useRef(null);
87
87
  const ref = React.useRef(null);
88
88
  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
89
- const backupId = (0, import_core.useId)();
89
+ const backupId = (0, import_web.useId)();
90
90
  const id = idProp ?? backupId;
91
- if (import_core.isWeb) {
91
+ if (import_web.isWeb) {
92
92
  React.useEffect(() => {
93
93
  if (htmlFor) {
94
94
  const element = document.getElementById(htmlFor);
@@ -131,7 +131,7 @@ const LabelComponent = React.forwardRef(
131
131
  onPress: (event) => {
132
132
  var _a;
133
133
  (_a = props.onPress) == null ? void 0 : _a.call(props, event);
134
- if (import_core.isWeb) {
134
+ if (import_web.isWeb) {
135
135
  if (htmlFor || !controlRef.current || event.defaultPrevented)
136
136
  return;
137
137
  const isClickingControl = controlRef.current.contains(
@@ -153,7 +153,7 @@ const LabelComponent = React.forwardRef(
153
153
  }
154
154
  );
155
155
  LabelComponent.displayName = NAME;
156
- const Label = LabelFrame.extractable((0, import_core.themeable)(LabelComponent), {
156
+ const Label = LabelFrame.extractable((0, import_web.themeable)(LabelComponent), {
157
157
  neverFlatten: true
158
158
  });
159
159
  const useLabelContext = (element) => {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Label.tsx"],
4
- "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\n variants: {\n unstyled: {\n false: {\n size: '$true',\n color: '$color',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n userSelect: 'none',\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n },\n },\n\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 defaultVariants: {\n unstyled: false,\n },\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"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\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 {\n GetProps,\n ReactComponentWithRef,\n isWeb,\n styled,\n themeable,\n useId,\n} from '@tamagui/web'\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\n variants: {\n unstyled: {\n false: {\n size: '$true',\n color: '$color',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n userSelect: 'none',\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n },\n },\n\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 defaultVariants: {\n unstyled: false,\n },\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"],
5
+ "mappings": "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",
6
6
  "names": ["ariaLabelledBy"]
7
7
  }
package/dist/esm/Label.js CHANGED
@@ -1,16 +1,16 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { useComposedRefs } from "@tamagui/compose-refs";
3
- import {
4
- isWeb,
5
- styled,
6
- themeable,
7
- useId
8
- } from "@tamagui/core";
9
3
  import { createContext } from "@tamagui/create-context";
10
4
  import { focusFocusable } from "@tamagui/focusable";
11
5
  import { getButtonSized } from "@tamagui/get-button-sized";
12
6
  import { getFontSized } from "@tamagui/get-font-sized";
13
7
  import { SizableText } from "@tamagui/text";
8
+ import {
9
+ isWeb,
10
+ styled,
11
+ themeable,
12
+ useId
13
+ } from "@tamagui/web";
14
14
  import * as React from "react";
15
15
  const NAME = "Label";
16
16
  const [LabelProvider, useLabelContextImpl] = createContext(NAME, {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Label.tsx"],
4
- "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\n variants: {\n unstyled: {\n false: {\n size: '$true',\n color: '$color',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n userSelect: 'none',\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n },\n },\n\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 defaultVariants: {\n unstyled: false,\n },\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"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\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 {\n GetProps,\n ReactComponentWithRef,\n isWeb,\n styled,\n themeable,\n useId,\n} from '@tamagui/web'\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\n variants: {\n unstyled: {\n false: {\n size: '$true',\n color: '$color',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n userSelect: 'none',\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n },\n },\n\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 defaultVariants: {\n unstyled: false,\n },\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"],
5
+ "mappings": "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",
6
6
  "names": ["ariaLabelledBy"]
7
7
  }
@@ -1,16 +1,16 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { useComposedRefs } from "@tamagui/compose-refs";
3
- import {
4
- isWeb,
5
- styled,
6
- themeable,
7
- useId
8
- } from "@tamagui/core";
9
3
  import { createContext } from "@tamagui/create-context";
10
4
  import { focusFocusable } from "@tamagui/focusable";
11
5
  import { getButtonSized } from "@tamagui/get-button-sized";
12
6
  import { getFontSized } from "@tamagui/get-font-sized";
13
7
  import { SizableText } from "@tamagui/text";
8
+ import {
9
+ isWeb,
10
+ styled,
11
+ themeable,
12
+ useId
13
+ } from "@tamagui/web";
14
14
  import * as React from "react";
15
15
  const NAME = "Label";
16
16
  const [LabelProvider, useLabelContextImpl] = createContext(NAME, {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Label.tsx"],
4
- "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\n variants: {\n unstyled: {\n false: {\n size: '$true',\n color: '$color',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n userSelect: 'none',\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n },\n },\n\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 defaultVariants: {\n unstyled: false,\n },\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"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\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 {\n GetProps,\n ReactComponentWithRef,\n isWeb,\n styled,\n themeable,\n useId,\n} from '@tamagui/web'\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\n variants: {\n unstyled: {\n false: {\n size: '$true',\n color: '$color',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n userSelect: 'none',\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n },\n },\n\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 defaultVariants: {\n unstyled: false,\n },\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"],
5
+ "mappings": "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",
6
6
  "names": ["ariaLabelledBy"]
7
7
  }
package/dist/jsx/Label.js CHANGED
@@ -1,15 +1,15 @@
1
1
  import { useComposedRefs } from "@tamagui/compose-refs";
2
- import {
3
- isWeb,
4
- styled,
5
- themeable,
6
- useId
7
- } from "@tamagui/core";
8
2
  import { createContext } from "@tamagui/create-context";
9
3
  import { focusFocusable } from "@tamagui/focusable";
10
4
  import { getButtonSized } from "@tamagui/get-button-sized";
11
5
  import { getFontSized } from "@tamagui/get-font-sized";
12
6
  import { SizableText } from "@tamagui/text";
7
+ import {
8
+ isWeb,
9
+ styled,
10
+ themeable,
11
+ useId
12
+ } from "@tamagui/web";
13
13
  import * as React from "react";
14
14
  const NAME = "Label";
15
15
  const [LabelProvider, useLabelContextImpl] = createContext(NAME, {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Label.tsx"],
4
- "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\n variants: {\n unstyled: {\n false: {\n size: '$true',\n color: '$color',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n userSelect: 'none',\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n },\n },\n\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 defaultVariants: {\n unstyled: false,\n },\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"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\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 {\n GetProps,\n ReactComponentWithRef,\n isWeb,\n styled,\n themeable,\n useId,\n} from '@tamagui/web'\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\n variants: {\n unstyled: {\n false: {\n size: '$true',\n color: '$color',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n userSelect: 'none',\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n },\n },\n\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 defaultVariants: {\n unstyled: false,\n },\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"],
5
+ "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,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,EAEL,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,iBAAiB;AAAA,QACjB,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,YAAY;AAAA,UACV,OAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,IAEA,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;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;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;AAKX,kBAAI,CAAC;AAAI;AACT,oBAAMA,kBAAiB,aAAa,GAAG,QAAQ,IAAI,EAAE;AACrD,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,CAAC,cAAc,IAAI,IAAI,YAAY,YACjC,CAAC;AAAA,MACC,KAAK;AAAA,MACL,IAAI;AAAA,MAEJ,SAAS;AAAA,UACL;AAAA,MACJ,KAAK;AAAA,MACL,aAAa,CAAC,UAAU;AACtB,cAAM,cAAc,KAAK;AAEzB,YAAI,CAAC,MAAM,oBAAoB,MAAM,SAAS,GAAG;AAC/C,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AAAA,MACA,SAAS,CAAC,UAAU;AAClB,cAAM,UAAU,KAAK;AAErB,YAAI,OAAO;AACT,cAAI,WAAW,CAAC,WAAW,WAAW,MAAM;AAAkB;AAC9D,gBAAM,oBAAoB,WAAW,QAAQ;AAAA,YAC3C,MAAM;AAAA,UACR;AAGA,gBAAM,cAAc,MAAM,cAAc;AAMxC,cAAI,CAAC,qBAAqB,aAAa;AACrC,uBAAW,QAAQ,MAAM;AACzB,uBAAW,QAAQ,MAAM;AAAA,UAC3B;AAAA,QACF,OAAO;AACL,cAAI,MAAM,SAAS;AACjB,2BAAe,MAAM,OAAO;AAAA,UAC9B;AAAA,QACF;AAAA,MACF;AAAA,IACF,EACF,EA1CC;AAAA,EA4CL;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;",
6
6
  "names": ["ariaLabelledBy"]
7
7
  }
@@ -1,15 +1,15 @@
1
1
  import { useComposedRefs } from "@tamagui/compose-refs";
2
- import {
3
- isWeb,
4
- styled,
5
- themeable,
6
- useId
7
- } from "@tamagui/core";
8
2
  import { createContext } from "@tamagui/create-context";
9
3
  import { focusFocusable } from "@tamagui/focusable";
10
4
  import { getButtonSized } from "@tamagui/get-button-sized";
11
5
  import { getFontSized } from "@tamagui/get-font-sized";
12
6
  import { SizableText } from "@tamagui/text";
7
+ import {
8
+ isWeb,
9
+ styled,
10
+ themeable,
11
+ useId
12
+ } from "@tamagui/web";
13
13
  import * as React from "react";
14
14
  const NAME = "Label";
15
15
  const [LabelProvider, useLabelContextImpl] = createContext(NAME, {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/Label.tsx"],
4
- "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\n variants: {\n unstyled: {\n false: {\n size: '$true',\n color: '$color',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n userSelect: 'none',\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n },\n },\n\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 defaultVariants: {\n unstyled: false,\n },\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"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\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 {\n GetProps,\n ReactComponentWithRef,\n isWeb,\n styled,\n themeable,\n useId,\n} from '@tamagui/web'\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\n variants: {\n unstyled: {\n false: {\n size: '$true',\n color: '$color',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n userSelect: 'none',\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n },\n },\n\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 defaultVariants: {\n unstyled: false,\n },\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"],
5
+ "mappings": "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",
6
6
  "names": ["ariaLabelledBy"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/label",
3
- "version": "1.5.16",
3
+ "version": "1.5.17",
4
4
  "sideEffects": [
5
5
  "*.css"
6
6
  ],
@@ -31,13 +31,13 @@
31
31
  }
32
32
  },
33
33
  "dependencies": {
34
- "@tamagui/compose-refs": "^1.5.16",
35
- "@tamagui/core": "^1.5.16",
36
- "@tamagui/create-context": "^1.5.16",
37
- "@tamagui/focusable": "^1.5.16",
38
- "@tamagui/get-button-sized": "^1.5.16",
39
- "@tamagui/get-font-sized": "^1.5.16",
40
- "@tamagui/text": "^1.5.16"
34
+ "@tamagui/compose-refs": "^1.5.17",
35
+ "@tamagui/create-context": "^1.5.17",
36
+ "@tamagui/focusable": "^1.5.17",
37
+ "@tamagui/get-button-sized": "^1.5.17",
38
+ "@tamagui/get-font-sized": "^1.5.17",
39
+ "@tamagui/text": "^1.5.17",
40
+ "@tamagui/web": "^1.5.17"
41
41
  },
42
42
  "peerDependencies": {
43
43
  "react": "*",
@@ -45,7 +45,7 @@
45
45
  "react-native": "*"
46
46
  },
47
47
  "devDependencies": {
48
- "@tamagui/build": "^1.5.16",
48
+ "@tamagui/build": "^1.5.17",
49
49
  "react": "^18.2.0",
50
50
  "react-dom": "^18.2.0",
51
51
  "react-native": "*"
package/src/Label.tsx CHANGED
@@ -1,4 +1,9 @@
1
1
  import { useComposedRefs } from '@tamagui/compose-refs'
2
+ import { createContext } from '@tamagui/create-context'
3
+ import { focusFocusable } from '@tamagui/focusable'
4
+ import { getButtonSized } from '@tamagui/get-button-sized'
5
+ import { getFontSized } from '@tamagui/get-font-sized'
6
+ import { SizableText } from '@tamagui/text'
2
7
  import {
3
8
  GetProps,
4
9
  ReactComponentWithRef,
@@ -6,13 +11,7 @@ import {
6
11
  styled,
7
12
  themeable,
8
13
  useId,
9
- useIsomorphicLayoutEffect,
10
- } from '@tamagui/core'
11
- import { createContext } from '@tamagui/create-context'
12
- import { focusFocusable } from '@tamagui/focusable'
13
- import { getButtonSized } from '@tamagui/get-button-sized'
14
- import { getFontSized } from '@tamagui/get-font-sized'
15
- import { SizableText } from '@tamagui/text'
14
+ } from '@tamagui/web'
16
15
  import * as React from 'react'
17
16
  import { View } from 'react-native'
18
17
 
package/types/Label.d.ts CHANGED
@@ -1,25 +1,25 @@
1
- import { GetProps, ReactComponentWithRef } from '@tamagui/core';
1
+ import { GetProps, ReactComponentWithRef } from '@tamagui/web';
2
2
  import { View } from 'react-native';
3
- export declare const LabelFrame: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").TextProps, "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/core").ExtendsBaseTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNTextProps & Omit<{
4
- readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
3
+ export declare const LabelFrame: import("@tamagui/web").TamaguiComponent<Omit<import("react-native").TextProps, "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers)> & import("@tamagui/web").ExtendsBaseTextProps & import("@tamagui/web").TamaguiComponentPropsBase & import("@tamagui/web").WithThemeValues<import("@tamagui/web").TextStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").TextStylePropsBase>> & Omit<{
4
+ readonly size?: import("@tamagui/web").FontSizeTokens | undefined;
5
5
  }, "size" | "unstyled"> & {
6
6
  readonly unstyled?: boolean | undefined;
7
- readonly size?: import("@tamagui/core").SizeTokens | undefined;
8
- } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").TextProps, "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/core").ExtendsBaseTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNTextProps & Omit<{
9
- readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
7
+ readonly size?: import("@tamagui/web").SizeTokens | undefined;
8
+ } & import("@tamagui/web").MediaProps<Partial<Omit<import("react-native").TextProps, "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers)> & import("@tamagui/web").ExtendsBaseTextProps & import("@tamagui/web").TamaguiComponentPropsBase & import("@tamagui/web").WithThemeValues<import("@tamagui/web").TextStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").TextStylePropsBase>> & Omit<{
9
+ readonly size?: import("@tamagui/web").FontSizeTokens | undefined;
10
10
  }, "size" | "unstyled"> & {
11
11
  readonly unstyled?: boolean | undefined;
12
- readonly size?: import("@tamagui/core").SizeTokens | undefined;
13
- }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").TextProps, "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/core").ExtendsBaseTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNTextProps & Omit<{
14
- readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
12
+ readonly size?: import("@tamagui/web").SizeTokens | undefined;
13
+ }>> & import("@tamagui/web").PseudoProps<Partial<Omit<import("react-native").TextProps, "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers)> & import("@tamagui/web").ExtendsBaseTextProps & import("@tamagui/web").TamaguiComponentPropsBase & import("@tamagui/web").WithThemeValues<import("@tamagui/web").TextStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").TextStylePropsBase>> & Omit<{
14
+ readonly size?: import("@tamagui/web").FontSizeTokens | undefined;
15
15
  }, "size" | "unstyled"> & {
16
16
  readonly unstyled?: boolean | undefined;
17
- readonly size?: import("@tamagui/core").SizeTokens | undefined;
18
- }>>, import("@tamagui/core").TamaguiElement, Omit<import("react-native").TextProps, "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/core").ExtendsBaseTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNTextProps, {
19
- readonly size?: import("@tamagui/core").FontSizeTokens | undefined;
17
+ readonly size?: import("@tamagui/web").SizeTokens | undefined;
18
+ }>>, import("@tamagui/web").TamaguiElement, import("@tamagui/web").TextPropsBase, {
19
+ readonly size?: import("@tamagui/web").FontSizeTokens | undefined;
20
20
  } & {
21
21
  readonly unstyled?: boolean | undefined;
22
- readonly size?: import("@tamagui/core").SizeTokens | undefined;
22
+ readonly size?: import("@tamagui/web").SizeTokens | undefined;
23
23
  }>;
24
24
  export type LabelProps = GetProps<typeof LabelFrame> & {
25
25
  htmlFor?: string;
@@ -1 +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;;;;;;;;;;;;;;;;;;;;EAmCrB,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"}
1
+ {"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../src/Label.tsx"],"names":[],"mappings":"AAMA,OAAO,EACL,QAAQ,EACR,qBAAqB,EAKtB,MAAM,cAAc,CAAA;AAErB,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAcnC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;EAmCrB,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"}