@tamagui/button 1.0.1-beta.38

package/dist/cjs/Button.js

@@ -0,0 +1,247 @@
+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 __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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 Button_exports = {};
+__export(Button_exports, {
+  Button: () => Button,
+  ButtonText: () => ButtonText
+});
+module.exports = __toCommonJS(Button_exports);
+var import_core = require("@tamagui/core");
+var import_font_size = require("@tamagui/font-size");
+var import_stacks = require("@tamagui/stacks");
+var import_text = require("@tamagui/text");
+var import_react = __toESM(require("react"));
+import_react.default["createElement"];
+const ButtonFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
+  name: "Button",
+  tag: "button",
+  hoverable: true,
+  pressable: true,
+  borderWidth: 1,
+  borderColor: "transparent",
+  justifyContent: "center",
+  alignItems: "center",
+  flexWrap: "nowrap",
+  cursor: "pointer",
+  pressStyle: {
+    borderColor: "transparent"
+  },
+  hoverStyle: {
+    borderColor: "transparent"
+  },
+  focusStyle: {
+    borderColor: "$borderColorFocus"
+  },
+  variants: {
+    size: {
+      "...size": import_core.getButtonSize
+    },
+    active: {
+      true: {
+        hoverStyle: {
+          backgroundColor: "$background"
+        }
+      }
+    },
+    disabled: {
+      true: {
+        opacity: 0.5,
+        pointerEvents: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$4"
+  }
+});
+const ButtonText = (0, import_core.styled)(import_text.SizableText, {
+  color: "$color",
+  selectable: false,
+  flexGrow: 1,
+  flexShrink: 1,
+  ellipse: true
+});
+const ButtonComponent = (0, import_react.forwardRef)((props, ref) => {
+  const _a = props, {
+    children,
+    icon,
+    iconAfter,
+    noTextWrap,
+    theme: themeName,
+    space,
+    spaceFlex,
+    scaleIcon = 1,
+    scaleSpace = 0.5,
+    color: colorProp,
+    fontWeight,
+    letterSpacing,
+    fontSize,
+    fontFamily,
+    textAlign,
+    textProps
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "icon",
+    "iconAfter",
+    "noTextWrap",
+    "theme",
+    "space",
+    "spaceFlex",
+    "scaleIcon",
+    "scaleSpace",
+    "color",
+    "fontWeight",
+    "letterSpacing",
+    "fontSize",
+    "fontFamily",
+    "textAlign",
+    "textProps"
+  ]);
+  const isInsideButton = (0, import_react.useContext)(import_core.ButtonInsideButtonContext);
+  const theme = (0, import_core.useTheme)();
+  const size = props.size || "$4";
+  let color;
+  if (theme && colorProp && colorProp in theme) {
+    color = theme[colorProp];
+  } else if (colorProp) {
+    color = colorProp;
+  } else {
+    color = theme == null ? void 0 : theme.color;
+  }
+  color = color == null ? void 0 : color.toString();
+  const iconSize = (0, import_font_size.getFontSize)(size) * scaleIcon;
+  const addTheme = /* @__PURE__ */ __name((el) => {
+    if ((0, import_react.isValidElement)(el)) {
+      return el;
+    }
+    if (el) {
+      return import_react.default.createElement(el, {
+        color,
+        size: iconSize
+      });
+    }
+    return el;
+  }, "addTheme");
+  const themedIcon = icon ? addTheme(icon) : null;
+  const themedIconAfter = iconAfter ? addTheme(iconAfter) : null;
+  let contents = children;
+  if (!noTextWrap && children) {
+    let concatStringChildren = function() {
+      if (!lastIsString)
+        return;
+      const index = nextChildren.length - 1;
+      const childrenStrings = nextChildren[index];
+      nextChildren[index] = /* @__PURE__ */ import_react.default.createElement(ButtonText, __spreadValues(__spreadValues(__spreadValues({
+        key: index
+      }, {
+        fontWeight,
+        letterSpacing,
+        fontSize,
+        fontFamily,
+        textAlign,
+        size
+      }), colorProp && {
+        color: colorProp
+      }), textProps), childrenStrings);
+    };
+    __name(concatStringChildren, "concatStringChildren");
+    let allChildren = import_react.default.Children.toArray(children);
+    let nextChildren = [];
+    let lastIsString = false;
+    for (const child of allChildren) {
+      const last = nextChildren[nextChildren.length - 1];
+      const isString = typeof child === "string";
+      if (isString) {
+        if (lastIsString) {
+          last.push(child);
+        } else {
+          nextChildren.push([child]);
+        }
+      } else {
+        concatStringChildren();
+        nextChildren.push(child);
+      }
+      lastIsString = isString;
+    }
+    concatStringChildren();
+    contents = nextChildren;
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_core.ButtonInsideButtonContext.Provider, {
+    value: true
+  }, /* @__PURE__ */ import_react.default.createElement(ButtonFrame, __spreadValues(__spreadProps(__spreadValues({
+    fontFamily
+  }, isInsideButton && {
+    tag: "span"
+  }), {
+    ref
+  }), rest), themedIcon || themedIconAfter ? (0, import_core.spacedChildren)({
+    space: (0, import_core.getVariableValue)(iconSize) * scaleSpace,
+    spaceFlex,
+    direction: props.flexDirection || "row",
+    children: [themedIcon, contents, themedIconAfter]
+  }) : contents));
+});
+const Button = ButtonFrame.extractable((0, import_core.themeable)(ButtonComponent), {
+  inlineProps: /* @__PURE__ */ new Set([
+    "color",
+    "fontWeight",
+    "fontSize",
+    "fontFamily",
+    "letterSpacing",
+    "textAlign"
+  ])
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  ButtonText
+});
+//# sourceMappingURL=Button.js.map

package/dist/cjs/Button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Button.tsx"],
+  "sourcesContent": ["import {\n  ButtonInsideButtonContext,\n  GetProps,\n  ReactComponentWithRef,\n  ThemeableProps,\n  getButtonSize,\n  getVariableValue,\n  spacedChildren,\n  styled,\n  themeable,\n  useTheme,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, SizableTextProps } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, isValidElement, useContext } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = GetProps<typeof ButtonFrame> &\n  ThemeableProps & {\n    // add icon before, passes color and size automatically if Component\n    icon?: IconProp\n    // add icon after, passes color and size automatically if Component\n    iconAfter?: IconProp\n    // adjust icon relative to size\n    // default: -1\n    scaleIcon?: number\n    // dont wrap inner contents in a text element\n    noTextWrap?: boolean\n    // make the spacing elements flex\n    spaceFlex?: number | boolean\n    // adjust internal space relative to icon size\n    scaleSpace?: number\n\n    // pass text properties:\n    color?: SizableTextProps['color']\n    fontWeight?: SizableTextProps['fontWeight']\n    fontSize?: SizableTextProps['fontSize']\n    fontFamily?: SizableTextProps['fontFamily']\n    letterSpacing?: SizableTextProps['letterSpacing']\n    textAlign?: SizableTextProps['textAlign']\n\n    // all the other text controls\n    textProps?: Partial<SizableTextProps>\n  }\n\nconst ButtonFrame = styled(ThemeableStack, {\n  name: 'Button',\n  tag: 'button',\n  hoverable: true,\n  pressable: true,\n  borderWidth: 1,\n  borderColor: 'transparent',\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n\n  // if we wanted this only when pressable = true, we'd need to merge variants?\n  cursor: 'pointer',\n\n  pressStyle: {\n    borderColor: 'transparent',\n  },\n\n  hoverStyle: {\n    borderColor: 'transparent',\n  },\n\n  focusStyle: {\n    borderColor: '$borderColorFocus',\n  },\n\n  variants: {\n    size: {\n      '...size': getButtonSize,\n    },\n\n    active: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    disabled: {\n      true: {\n        opacity: 0.5,\n        // TODO breaking types\n        pointerEvents: 'none' as any,\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n  color: '$color',\n  selectable: false,\n  flexGrow: 1,\n  flexShrink: 1,\n  ellipse: true,\n})\n\nconst ButtonComponent = forwardRef((props: ButtonProps, ref) => {\n  // careful not to desctructure and re-order props, order is important\n  const {\n    children,\n    icon,\n    iconAfter,\n    noTextWrap,\n    theme: themeName,\n    space,\n    spaceFlex,\n    scaleIcon = 1,\n    scaleSpace = 0.5,\n\n    // text props\n    color: colorProp,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    textAlign,\n    textProps,\n    ...rest\n  } = props as ButtonProps\n\n  const isInsideButton = useContext(ButtonInsideButtonContext)\n  const theme = useTheme()\n  const size = props.size || '$4'\n\n  // get color from prop or theme\n  let color: any\n  // @ts-expect-error\n  if (theme && colorProp && colorProp in theme) {\n    // @ts-expect-error\n    color = theme[colorProp]\n  } else if (colorProp) {\n    color = colorProp\n  } else {\n    color = theme?.color\n  }\n  color = color?.toString()\n\n  const iconSize = getFontSize(size) * scaleIcon\n\n  const addTheme = (el: any) => {\n    if (isValidElement(el)) {\n      return el\n    }\n    if (el) {\n      return React.createElement(el, {\n        color,\n        size: iconSize,\n      })\n    }\n    return el\n  }\n  const themedIcon = icon ? addTheme(icon) : null\n  const themedIconAfter = iconAfter ? addTheme(iconAfter) : null\n\n  let contents = children\n\n  if (!noTextWrap && children) {\n    // in the case of using variables, like so:\n    // <Button>Hello, {name}</Button>\n    // it gives us props.children as ['Hello, ', 'name']\n    // but we don't want to wrap multiple SizableText around each part\n    // so we group them\n    let allChildren = React.Children.toArray(children)\n    let nextChildren: any[] = []\n    let lastIsString = false\n\n    function concatStringChildren() {\n      if (!lastIsString) return\n      const index = nextChildren.length - 1\n      const childrenStrings = nextChildren[index]\n      nextChildren[index] = (\n        <ButtonText\n          key={index}\n          {...{\n            fontWeight,\n            letterSpacing,\n            fontSize,\n            fontFamily,\n            textAlign,\n            size,\n          }}\n          {...(colorProp && {\n            color: colorProp,\n          })}\n          {...textProps}\n        >\n          {childrenStrings}\n        </ButtonText>\n      )\n    }\n\n    for (const child of allChildren) {\n      const last = nextChildren[nextChildren.length - 1]\n      const isString = typeof child === 'string'\n      if (isString) {\n        if (lastIsString) {\n          last.push(child)\n        } else {\n          nextChildren.push([child])\n        }\n      } else {\n        concatStringChildren()\n        nextChildren.push(child)\n      }\n      lastIsString = isString\n    }\n    concatStringChildren()\n\n    contents = nextChildren\n  }\n\n  return (\n    // careful not to desctructure and re-order props, order is important\n    <ButtonInsideButtonContext.Provider value={true}>\n      <ButtonFrame\n        fontFamily={fontFamily}\n        // fixes SSR issue + DOM nesting issue of not allowing button in button\n        {...(isInsideButton && {\n          tag: 'span',\n        })}\n        ref={ref as any}\n        {...rest}\n      >\n        {themedIcon || themedIconAfter\n          ? spacedChildren({\n              // a bit arbitrary but scaling to font size is necessary so long as button does\n              space: getVariableValue(iconSize) * scaleSpace,\n              spaceFlex,\n              direction: props.flexDirection || 'row',\n              children: [themedIcon, contents, themedIconAfter],\n            })\n          : contents}\n      </ButtonFrame>\n    </ButtonInsideButtonContext.Provider>\n  )\n})\n\nexport const Button: ReactComponentWithRef<ButtonProps, HTMLButtonElement | View> =\n  ButtonFrame.extractable(themeable(ButtonComponent as any) as any, {\n    inlineProps: new Set([\n      // text props go here (can't really optimize them, but we never fully extract button anyway)\n      'color',\n      'fontWeight',\n      'fontSize',\n      'fontFamily',\n      'letterSpacing',\n      'textAlign',\n    ]),\n  })\n"],
+  "mappings": "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",
+  "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("./Button"), 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 './Button'\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,qBAAd;",
+  "names": []
+}

package/dist/esm/Button.js

@@ -0,0 +1,188 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import {
+  ButtonInsideButtonContext,
+  getButtonSize,
+  getVariableValue,
+  spacedChildren,
+  styled,
+  themeable,
+  useTheme
+} from "@tamagui/core";
+import { getFontSize } from "@tamagui/font-size";
+import { ThemeableStack } from "@tamagui/stacks";
+import { SizableText } from "@tamagui/text";
+import React, { forwardRef, isValidElement, useContext } from "react";
+React["createElement"];
+const ButtonFrame = styled(ThemeableStack, {
+  name: "Button",
+  tag: "button",
+  hoverable: true,
+  pressable: true,
+  borderWidth: 1,
+  borderColor: "transparent",
+  justifyContent: "center",
+  alignItems: "center",
+  flexWrap: "nowrap",
+  cursor: "pointer",
+  pressStyle: {
+    borderColor: "transparent"
+  },
+  hoverStyle: {
+    borderColor: "transparent"
+  },
+  focusStyle: {
+    borderColor: "$borderColorFocus"
+  },
+  variants: {
+    size: {
+      "...size": getButtonSize
+    },
+    active: {
+      true: {
+        hoverStyle: {
+          backgroundColor: "$background"
+        }
+      }
+    },
+    disabled: {
+      true: {
+        opacity: 0.5,
+        pointerEvents: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$4"
+  }
+});
+const ButtonText = styled(SizableText, {
+  color: "$color",
+  selectable: false,
+  flexGrow: 1,
+  flexShrink: 1,
+  ellipse: true
+});
+const ButtonComponent = forwardRef((props, ref) => {
+  const {
+    children,
+    icon,
+    iconAfter,
+    noTextWrap,
+    theme: themeName,
+    space,
+    spaceFlex,
+    scaleIcon = 1,
+    scaleSpace = 0.5,
+    color: colorProp,
+    fontWeight,
+    letterSpacing,
+    fontSize,
+    fontFamily,
+    textAlign,
+    textProps,
+    ...rest
+  } = props;
+  const isInsideButton = useContext(ButtonInsideButtonContext);
+  const theme = useTheme();
+  const size = props.size || "$4";
+  let color;
+  if (theme && colorProp && colorProp in theme) {
+    color = theme[colorProp];
+  } else if (colorProp) {
+    color = colorProp;
+  } else {
+    color = theme == null ? void 0 : theme.color;
+  }
+  color = color == null ? void 0 : color.toString();
+  const iconSize = getFontSize(size) * scaleIcon;
+  const addTheme = /* @__PURE__ */ __name((el) => {
+    if (isValidElement(el)) {
+      return el;
+    }
+    if (el) {
+      return React.createElement(el, {
+        color,
+        size: iconSize
+      });
+    }
+    return el;
+  }, "addTheme");
+  const themedIcon = icon ? addTheme(icon) : null;
+  const themedIconAfter = iconAfter ? addTheme(iconAfter) : null;
+  let contents = children;
+  if (!noTextWrap && children) {
+    let concatStringChildren = function() {
+      if (!lastIsString)
+        return;
+      const index = nextChildren.length - 1;
+      const childrenStrings = nextChildren[index];
+      nextChildren[index] = /* @__PURE__ */ React.createElement(ButtonText, {
+        key: index,
+        ...{
+          fontWeight,
+          letterSpacing,
+          fontSize,
+          fontFamily,
+          textAlign,
+          size
+        },
+        ...colorProp && {
+          color: colorProp
+        },
+        ...textProps
+      }, childrenStrings);
+    };
+    __name(concatStringChildren, "concatStringChildren");
+    let allChildren = React.Children.toArray(children);
+    let nextChildren = [];
+    let lastIsString = false;
+    for (const child of allChildren) {
+      const last = nextChildren[nextChildren.length - 1];
+      const isString = typeof child === "string";
+      if (isString) {
+        if (lastIsString) {
+          last.push(child);
+        } else {
+          nextChildren.push([child]);
+        }
+      } else {
+        concatStringChildren();
+        nextChildren.push(child);
+      }
+      lastIsString = isString;
+    }
+    concatStringChildren();
+    contents = nextChildren;
+  }
+  return /* @__PURE__ */ React.createElement(ButtonInsideButtonContext.Provider, {
+    value: true
+  }, /* @__PURE__ */ React.createElement(ButtonFrame, {
+    fontFamily,
+    ...isInsideButton && {
+      tag: "span"
+    },
+    ref,
+    ...rest
+  }, themedIcon || themedIconAfter ? spacedChildren({
+    space: getVariableValue(iconSize) * scaleSpace,
+    spaceFlex,
+    direction: props.flexDirection || "row",
+    children: [themedIcon, contents, themedIconAfter]
+  }) : contents));
+});
+const Button = ButtonFrame.extractable(themeable(ButtonComponent), {
+  inlineProps: /* @__PURE__ */ new Set([
+    "color",
+    "fontWeight",
+    "fontSize",
+    "fontFamily",
+    "letterSpacing",
+    "textAlign"
+  ])
+});
+export {
+  Button,
+  ButtonText
+};
+//# sourceMappingURL=Button.js.map

package/dist/esm/Button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Button.tsx"],
+  "sourcesContent": ["import {\n  ButtonInsideButtonContext,\n  GetProps,\n  ReactComponentWithRef,\n  ThemeableProps,\n  getButtonSize,\n  getVariableValue,\n  spacedChildren,\n  styled,\n  themeable,\n  useTheme,\n} from '@tamagui/core'\nimport { getFontSize } from '@tamagui/font-size'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText, SizableTextProps } from '@tamagui/text'\nimport React, { FunctionComponent, forwardRef, isValidElement, useContext } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\ntype ButtonIconProps = { color?: string; size?: number }\ntype IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null\n\nexport type ButtonProps = GetProps<typeof ButtonFrame> &\n  ThemeableProps & {\n    // add icon before, passes color and size automatically if Component\n    icon?: IconProp\n    // add icon after, passes color and size automatically if Component\n    iconAfter?: IconProp\n    // adjust icon relative to size\n    // default: -1\n    scaleIcon?: number\n    // dont wrap inner contents in a text element\n    noTextWrap?: boolean\n    // make the spacing elements flex\n    spaceFlex?: number | boolean\n    // adjust internal space relative to icon size\n    scaleSpace?: number\n\n    // pass text properties:\n    color?: SizableTextProps['color']\n    fontWeight?: SizableTextProps['fontWeight']\n    fontSize?: SizableTextProps['fontSize']\n    fontFamily?: SizableTextProps['fontFamily']\n    letterSpacing?: SizableTextProps['letterSpacing']\n    textAlign?: SizableTextProps['textAlign']\n\n    // all the other text controls\n    textProps?: Partial<SizableTextProps>\n  }\n\nconst ButtonFrame = styled(ThemeableStack, {\n  name: 'Button',\n  tag: 'button',\n  hoverable: true,\n  pressable: true,\n  borderWidth: 1,\n  borderColor: 'transparent',\n  justifyContent: 'center',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n\n  // if we wanted this only when pressable = true, we'd need to merge variants?\n  cursor: 'pointer',\n\n  pressStyle: {\n    borderColor: 'transparent',\n  },\n\n  hoverStyle: {\n    borderColor: 'transparent',\n  },\n\n  focusStyle: {\n    borderColor: '$borderColorFocus',\n  },\n\n  variants: {\n    size: {\n      '...size': getButtonSize,\n    },\n\n    active: {\n      true: {\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n      },\n    },\n\n    disabled: {\n      true: {\n        opacity: 0.5,\n        // TODO breaking types\n        pointerEvents: 'none' as any,\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\n// see TODO breaking types\n// type x = GetProps<typeof ButtonFrame>\n// type y = x['size']\n\nexport const ButtonText = styled(SizableText, {\n  color: '$color',\n  selectable: false,\n  flexGrow: 1,\n  flexShrink: 1,\n  ellipse: true,\n})\n\nconst ButtonComponent = forwardRef((props: ButtonProps, ref) => {\n  // careful not to desctructure and re-order props, order is important\n  const {\n    children,\n    icon,\n    iconAfter,\n    noTextWrap,\n    theme: themeName,\n    space,\n    spaceFlex,\n    scaleIcon = 1,\n    scaleSpace = 0.5,\n\n    // text props\n    color: colorProp,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    fontFamily,\n    textAlign,\n    textProps,\n    ...rest\n  } = props as ButtonProps\n\n  const isInsideButton = useContext(ButtonInsideButtonContext)\n  const theme = useTheme()\n  const size = props.size || '$4'\n\n  // get color from prop or theme\n  let color: any\n  // @ts-expect-error\n  if (theme && colorProp && colorProp in theme) {\n    // @ts-expect-error\n    color = theme[colorProp]\n  } else if (colorProp) {\n    color = colorProp\n  } else {\n    color = theme?.color\n  }\n  color = color?.toString()\n\n  const iconSize = getFontSize(size) * scaleIcon\n\n  const addTheme = (el: any) => {\n    if (isValidElement(el)) {\n      return el\n    }\n    if (el) {\n      return React.createElement(el, {\n        color,\n        size: iconSize,\n      })\n    }\n    return el\n  }\n  const themedIcon = icon ? addTheme(icon) : null\n  const themedIconAfter = iconAfter ? addTheme(iconAfter) : null\n\n  let contents = children\n\n  if (!noTextWrap && children) {\n    // in the case of using variables, like so:\n    // <Button>Hello, {name}</Button>\n    // it gives us props.children as ['Hello, ', 'name']\n    // but we don't want to wrap multiple SizableText around each part\n    // so we group them\n    let allChildren = React.Children.toArray(children)\n    let nextChildren: any[] = []\n    let lastIsString = false\n\n    function concatStringChildren() {\n      if (!lastIsString) return\n      const index = nextChildren.length - 1\n      const childrenStrings = nextChildren[index]\n      nextChildren[index] = (\n        <ButtonText\n          key={index}\n          {...{\n            fontWeight,\n            letterSpacing,\n            fontSize,\n            fontFamily,\n            textAlign,\n            size,\n          }}\n          {...(colorProp && {\n            color: colorProp,\n          })}\n          {...textProps}\n        >\n          {childrenStrings}\n        </ButtonText>\n      )\n    }\n\n    for (const child of allChildren) {\n      const last = nextChildren[nextChildren.length - 1]\n      const isString = typeof child === 'string'\n      if (isString) {\n        if (lastIsString) {\n          last.push(child)\n        } else {\n          nextChildren.push([child])\n        }\n      } else {\n        concatStringChildren()\n        nextChildren.push(child)\n      }\n      lastIsString = isString\n    }\n    concatStringChildren()\n\n    contents = nextChildren\n  }\n\n  return (\n    // careful not to desctructure and re-order props, order is important\n    <ButtonInsideButtonContext.Provider value={true}>\n      <ButtonFrame\n        fontFamily={fontFamily}\n        // fixes SSR issue + DOM nesting issue of not allowing button in button\n        {...(isInsideButton && {\n          tag: 'span',\n        })}\n        ref={ref as any}\n        {...rest}\n      >\n        {themedIcon || themedIconAfter\n          ? spacedChildren({\n              // a bit arbitrary but scaling to font size is necessary so long as button does\n              space: getVariableValue(iconSize) * scaleSpace,\n              spaceFlex,\n              direction: props.flexDirection || 'row',\n              children: [themedIcon, contents, themedIconAfter],\n            })\n          : contents}\n      </ButtonFrame>\n    </ButtonInsideButtonContext.Provider>\n  )\n})\n\nexport const Button: ReactComponentWithRef<ButtonProps, HTMLButtonElement | View> =\n  ButtonFrame.extractable(themeable(ButtonComponent as any) as any, {\n    inlineProps: new Set([\n      // text props go here (can't really optimize them, but we never fully extract button anyway)\n      'color',\n      'fontWeight',\n      'fontSize',\n      'fontFamily',\n      'letterSpacing',\n      'textAlign',\n    ]),\n  })\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/index.js

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

package/dist/esm/index.js.map

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

package/dist/jsx/Button.js

@@ -0,0 +1,175 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import {
+  ButtonInsideButtonContext,
+  getButtonSize,
+  getVariableValue,
+  spacedChildren,
+  styled,
+  themeable,
+  useTheme
+} from "@tamagui/core";
+import { getFontSize } from "@tamagui/font-size";
+import { ThemeableStack } from "@tamagui/stacks";
+import { SizableText } from "@tamagui/text";
+import React, { forwardRef, isValidElement, useContext } from "react";
+React["createElement"];
+const ButtonFrame = styled(ThemeableStack, {
+  name: "Button",
+  tag: "button",
+  hoverable: true,
+  pressable: true,
+  borderWidth: 1,
+  borderColor: "transparent",
+  justifyContent: "center",
+  alignItems: "center",
+  flexWrap: "nowrap",
+  cursor: "pointer",
+  pressStyle: {
+    borderColor: "transparent"
+  },
+  hoverStyle: {
+    borderColor: "transparent"
+  },
+  focusStyle: {
+    borderColor: "$borderColorFocus"
+  },
+  variants: {
+    size: {
+      "...size": getButtonSize
+    },
+    active: {
+      true: {
+        hoverStyle: {
+          backgroundColor: "$background"
+        }
+      }
+    },
+    disabled: {
+      true: {
+        opacity: 0.5,
+        pointerEvents: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$4"
+  }
+});
+const ButtonText = styled(SizableText, {
+  color: "$color",
+  selectable: false,
+  flexGrow: 1,
+  flexShrink: 1,
+  ellipse: true
+});
+const ButtonComponent = forwardRef((props, ref) => {
+  const {
+    children,
+    icon,
+    iconAfter,
+    noTextWrap,
+    theme: themeName,
+    space,
+    spaceFlex,
+    scaleIcon = 1,
+    scaleSpace = 0.5,
+    color: colorProp,
+    fontWeight,
+    letterSpacing,
+    fontSize,
+    fontFamily,
+    textAlign,
+    textProps,
+    ...rest
+  } = props;
+  const isInsideButton = useContext(ButtonInsideButtonContext);
+  const theme = useTheme();
+  const size = props.size || "$4";
+  let color;
+  if (theme && colorProp && colorProp in theme) {
+    color = theme[colorProp];
+  } else if (colorProp) {
+    color = colorProp;
+  } else {
+    color = theme == null ? void 0 : theme.color;
+  }
+  color = color == null ? void 0 : color.toString();
+  const iconSize = getFontSize(size) * scaleIcon;
+  const addTheme = /* @__PURE__ */ __name((el) => {
+    if (isValidElement(el)) {
+      return el;
+    }
+    if (el) {
+      return React.createElement(el, {
+        color,
+        size: iconSize
+      });
+    }
+    return el;
+  }, "addTheme");
+  const themedIcon = icon ? addTheme(icon) : null;
+  const themedIconAfter = iconAfter ? addTheme(iconAfter) : null;
+  let contents = children;
+  if (!noTextWrap && children) {
+    let concatStringChildren = function() {
+      if (!lastIsString)
+        return;
+      const index = nextChildren.length - 1;
+      const childrenStrings = nextChildren[index];
+      nextChildren[index] = <ButtonText key={index} {...{
+        fontWeight,
+        letterSpacing,
+        fontSize,
+        fontFamily,
+        textAlign,
+        size
+      }} {...colorProp && {
+        color: colorProp
+      }} {...textProps}>{childrenStrings}</ButtonText>;
+    };
+    __name(concatStringChildren, "concatStringChildren");
+    let allChildren = React.Children.toArray(children);
+    let nextChildren = [];
+    let lastIsString = false;
+    for (const child of allChildren) {
+      const last = nextChildren[nextChildren.length - 1];
+      const isString = typeof child === "string";
+      if (isString) {
+        if (lastIsString) {
+          last.push(child);
+        } else {
+          nextChildren.push([child]);
+        }
+      } else {
+        concatStringChildren();
+        nextChildren.push(child);
+      }
+      lastIsString = isString;
+    }
+    concatStringChildren();
+    contents = nextChildren;
+  }
+  return <ButtonInsideButtonContext.Provider value={true}><ButtonFrame fontFamily={fontFamily} {...isInsideButton && {
+    tag: "span"
+  }} ref={ref} {...rest}>{themedIcon || themedIconAfter ? spacedChildren({
+    space: getVariableValue(iconSize) * scaleSpace,
+    spaceFlex,
+    direction: props.flexDirection || "row",
+    children: [themedIcon, contents, themedIconAfter]
+  }) : contents}</ButtonFrame></ButtonInsideButtonContext.Provider>;
+});
+const Button = ButtonFrame.extractable(themeable(ButtonComponent), {
+  inlineProps: /* @__PURE__ */ new Set([
+    "color",
+    "fontWeight",
+    "fontSize",
+    "fontFamily",
+    "letterSpacing",
+    "textAlign"
+  ])
+});
+export {
+  Button,
+  ButtonText
+};

package/dist/jsx/index.js

@@ -0,0 +1 @@
+export * from "./Button";

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@tamagui/button",
+  "version": "1.0.1-beta.38",
+  "sideEffects": false,
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch"
+  },
+  "dependencies": {
+    "@tamagui/core": "^1.0.1-beta.38",
+    "@tamagui/font-size": "^1.0.1-beta.38"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.1-beta.38",
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14"
+}

package/types/Button.d.ts

@@ -0,0 +1,123 @@
+import { GetProps, ReactComponentWithRef, ThemeableProps } from '@tamagui/core';
+import { SizableTextProps } from '@tamagui/text';
+import { FunctionComponent } from 'react';
+import { View } from 'react-native';
+declare type ButtonIconProps = {
+    color?: string;
+    size?: number;
+};
+declare type IconProp = JSX.Element | FunctionComponent<ButtonIconProps> | null;
+export declare type ButtonProps = GetProps<typeof ButtonFrame> & ThemeableProps & {
+    icon?: IconProp;
+    iconAfter?: IconProp;
+    scaleIcon?: number;
+    noTextWrap?: boolean;
+    spaceFlex?: number | boolean;
+    scaleSpace?: number;
+    color?: SizableTextProps['color'];
+    fontWeight?: SizableTextProps['fontWeight'];
+    fontSize?: SizableTextProps['fontSize'];
+    fontFamily?: SizableTextProps['fontFamily'];
+    letterSpacing?: SizableTextProps['letterSpacing'];
+    textAlign?: SizableTextProps['textAlign'];
+    textProps?: Partial<SizableTextProps>;
+};
+declare const ButtonFrame: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
+    fullscreen?: boolean | undefined;
+    elevation?: import("@tamagui/core").SizeTokens | undefined;
+} & {
+    fontFamily?: unknown;
+    hoverable?: boolean | undefined;
+    pressable?: boolean | undefined;
+    focusable?: boolean | undefined;
+    circular?: boolean | undefined;
+    pad?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: number | boolean | undefined;
+    transparent?: boolean | undefined;
+    chromeless?: boolean | undefined;
+}, "disabled" | "size" | "active"> & {
+    size?: import("@tamagui/core").SizeTokens | undefined;
+    active?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
+    fullscreen?: boolean | undefined;
+    elevation?: import("@tamagui/core").SizeTokens | undefined;
+} & {
+    fontFamily?: unknown;
+    hoverable?: boolean | undefined;
+    pressable?: boolean | undefined;
+    focusable?: boolean | undefined;
+    circular?: boolean | undefined;
+    pad?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: number | boolean | undefined;
+    transparent?: boolean | undefined;
+    chromeless?: boolean | undefined;
+}, "disabled" | "size" | "active"> & {
+    size?: import("@tamagui/core").SizeTokens | undefined;
+    active?: boolean | undefined;
+    disabled?: boolean | undefined;
+}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
+    fullscreen?: boolean | undefined;
+    elevation?: import("@tamagui/core").SizeTokens | undefined;
+} & {
+    fontFamily?: unknown;
+    hoverable?: boolean | undefined;
+    pressable?: boolean | undefined;
+    focusable?: boolean | undefined;
+    circular?: boolean | undefined;
+    pad?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: number | boolean | undefined;
+    transparent?: boolean | undefined;
+    chromeless?: boolean | undefined;
+}, "disabled" | "size" | "active"> & {
+    size?: import("@tamagui/core").SizeTokens | undefined;
+    active?: boolean | undefined;
+    disabled?: boolean | undefined;
+}>>, any, import("@tamagui/core").StackPropsBase, {
+    fullscreen?: boolean | undefined;
+    elevation?: import("@tamagui/core").SizeTokens | undefined;
+} & {
+    fontFamily?: unknown;
+    hoverable?: boolean | undefined;
+    pressable?: boolean | undefined;
+    focusable?: boolean | undefined;
+    circular?: boolean | undefined;
+    pad?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: number | boolean | undefined;
+    transparent?: boolean | undefined;
+    chromeless?: boolean | undefined;
+} & {
+    size?: import("@tamagui/core").SizeTokens | undefined;
+    active?: boolean | undefined;
+    disabled?: boolean | undefined;
+}>;
+export declare const ButtonText: 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"> & {
+    size?: import("@tamagui/core").FontSizeTokens | 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"> & {
+    size?: import("@tamagui/core").FontSizeTokens | 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"> & {
+    size?: import("@tamagui/core").FontSizeTokens | undefined;
+}>>) | (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;
+}, string | number> & {
+    [x: string]: 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;
+}, string | number> & {
+    [x: string]: 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;
+}, string | number> & {
+    [x: string]: undefined;
+}>>), any, import("@tamagui/core").TextPropsBase, {
+    size?: import("@tamagui/core").FontSizeTokens | undefined;
+} & ({} | {
+    [x: string]: undefined;
+})>;
+export declare const Button: ReactComponentWithRef<ButtonProps, HTMLButtonElement | View>;
+export {};
+//# sourceMappingURL=Button.d.ts.map

package/types/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,QAAQ,EACR,qBAAqB,EACrB,cAAc,EAOf,MAAM,eAAe,CAAA;AAGtB,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAC7D,OAAc,EAAE,iBAAiB,EAA0C,MAAM,OAAO,CAAA;AACxF,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAKnC,aAAK,eAAe,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AACxD,aAAK,QAAQ,GAAG,GAAG,CAAC,OAAO,GAAG,iBAAiB,CAAC,eAAe,CAAC,GAAG,IAAI,CAAA;AAEvE,oBAAY,WAAW,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,GACpD,cAAc,GAAG;IAEf,IAAI,CAAC,EAAE,QAAQ,CAAA;IAEf,SAAS,CAAC,EAAE,QAAQ,CAAA;IAGpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAE5B,UAAU,CAAC,EAAE,MAAM,CAAA;IAGnB,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IACjC,UAAU,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAA;IACvC,UAAU,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAA;IAC3C,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAA;IACjD,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;IAGzC,SAAS,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;CACtC,CAAA;AAEH,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDf,CAAA;AAMF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;GAMrB,CAAA;AA+IF,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,WAAW,EAAE,iBAAiB,GAAG,IAAI,CAW5E,CAAA"}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+//# 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,UAAU,CAAA"}