@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/buttons/DefaultSlideButtonHandle.js

@@ -0,0 +1,138 @@
+const _excluded = ["checked", "disabled", "style", "variant", "startUncheckedNode", "endCheckedNode", "checkedLabel", "borderRadius"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { variants } from '@coinbase/cds-common/tokens/button';
+import { animated, useChain, useSpring, useSpringRef } from '@react-spring/native';
+import { useTheme } from '../hooks/useTheme';
+import { Icon } from '../icons/Icon';
+import { Box } from '../layout/Box';
+import { Spinner } from '../loaders/Spinner';
+import { Pressable } from '../system/Pressable';
+import { TextHeadline } from '../typography/TextHeadline';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const animationConfig = {
+  tension: 300,
+  clamp: true
+};
+export const styles = StyleSheet.create({
+  base: {
+    width: '100%',
+    height: '100%'
+  },
+  absoluteContainer: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon: {
+    flexShrink: 0
+  }
+});
+export const SlideButtonHandleChecked = /*#__PURE__*/memo(_ref => {
+  let {
+    label,
+    end
+  } = _ref;
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(Box, {
+    alignItems: "center",
+    height: "100%",
+    justifyContent: "center",
+    width: "100%",
+    children: [typeof label !== 'string' ? label : /*#__PURE__*/_jsx(TextHeadline, {
+      color: "fgInverse",
+      children: label
+    }), /*#__PURE__*/_jsx(Box, {
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 2,
+      pin: "right",
+      children: end != null ? end : /*#__PURE__*/_jsx(Spinner, {
+        color: theme.color.fgInverse,
+        size: "small"
+      })
+    })]
+  });
+});
+export const SlideButtonHandleUnchecked = /*#__PURE__*/memo(_ref2 => {
+  let {
+    start
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Box, {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 2,
+    pin: "right",
+    children: start != null ? start : /*#__PURE__*/_jsx(Icon, {
+      color: "fgInverse",
+      name: "forwardArrow",
+      size: "m"
+    })
+  });
+});
+export const DefaultSlideButtonHandle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+      checked,
+      disabled,
+      style,
+      variant = 'primary',
+      startUncheckedNode,
+      endCheckedNode,
+      checkedLabel,
+      borderRadius = 900
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded);
+  const backgroundColor = variants[variant].background;
+  const checkedSpringRef = useSpringRef();
+  const uncheckedSpringRef = useSpringRef();
+  const checkedSpring = useSpring({
+    opacity: checked ? 1 : 0,
+    ref: checkedSpringRef,
+    config: animationConfig,
+    immediate: !checked
+  });
+  const uncheckedSpring = useSpring({
+    opacity: checked ? 0 : 1,
+    ref: uncheckedSpringRef,
+    config: animationConfig
+  });
+  useChain(checked ? [uncheckedSpringRef, checkedSpringRef] : [checkedSpringRef, uncheckedSpringRef], [0, 0.1]);
+  const containerStyle = useMemo(() => [styles.base, style], [style]);
+  const animatedCheckedStyle = useMemo(() => [styles.absoluteContainer, {
+    opacity: checkedSpring.opacity
+  }], [checkedSpring]);
+  const animatedUncheckedStyle = useMemo(() => [styles.absoluteContainer, {
+    opacity: uncheckedSpring.opacity
+  }], [uncheckedSpring]);
+  return /*#__PURE__*/_jsxs(Pressable, _extends({
+    ref: ref,
+    noScaleOnPress: true,
+    background: backgroundColor,
+    borderRadius: borderRadius,
+    contentStyle: containerStyle,
+    disabled: disabled,
+    loading: checked
+  }, props, {
+    children: [/*#__PURE__*/_jsx(animated.View, {
+      style: animatedCheckedStyle,
+      children: /*#__PURE__*/_jsx(SlideButtonHandleChecked, {
+        disabled: disabled,
+        end: endCheckedNode,
+        label: checkedLabel,
+        variant: variant
+      })
+    }), /*#__PURE__*/_jsx(animated.View, {
+      style: animatedUncheckedStyle,
+      children: /*#__PURE__*/_jsx(SlideButtonHandleUnchecked, {
+        disabled: disabled,
+        start: startUncheckedNode,
+        variant: variant
+      })
+    })]
+  }));
+}));

package/esm/buttons/IconButton.js

@@ -0,0 +1,87 @@
+const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "borderWidth", "borderRadius", "feedback", "flush", "loading", "style", "accessibilityHint", "accessibilityLabel"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo, useCallback, useMemo } from 'react';
+import { ActivityIndicator } from 'react-native';
+import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
+import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
+import { getButtonSpacingProps } from '@coinbase/cds-common/utils/getButtonSpacingProps';
+import { useTheme } from '../hooks/useTheme';
+import { Icon } from '../icons/Icon';
+import { Pressable } from '../system/Pressable';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const IconButton = /*#__PURE__*/memo(function IconButton(_ref) {
+  let {
+      name,
+      active,
+      variant = 'secondary',
+      transparent,
+      compact = true,
+      background,
+      color,
+      borderColor,
+      borderWidth = 100,
+      borderRadius = 1000,
+      feedback = compact ? 'light' : 'normal',
+      flush,
+      loading,
+      style,
+      accessibilityHint,
+      accessibilityLabel
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const iconSize = compact ? 's' : 'm';
+  const variantMap = transparent ? transparentVariants : variants;
+  const variantStyle = variantMap[variant];
+  const colorValue = color != null ? color : variantStyle.color;
+  const backgroundValue = background != null ? background : variantStyle.background;
+  const borderColorValue = borderColor != null ? borderColor : variantStyle.borderColor;
+  const minHeight = interactableHeight[compact ? 'compact' : 'regular'];
+  const {
+    marginStart,
+    marginEnd
+  } = getButtonSpacingProps({
+    compact,
+    flush
+  });
+  const sizingStyle = useMemo(() => ({
+    height: minHeight,
+    width: minHeight,
+    alignItems: 'center',
+    flexDirection: 'column',
+    justifyContent: 'center'
+  }), [minHeight]);
+  const pressableStyle = useCallback(state => [sizingStyle, typeof style === 'function' ? style(state) : style], [sizingStyle, style]);
+  return /*#__PURE__*/_jsx(Pressable, _extends({
+    accessibilityHint: accessibilityHint,
+    accessibilityLabel: loading ? (accessibilityLabel != null ? accessibilityLabel : '') + ", loading" : accessibilityLabel,
+    background: backgroundValue,
+    borderColor: borderColorValue,
+    borderRadius: borderRadius,
+    borderWidth: borderWidth,
+    feedback: feedback,
+    loading: loading,
+    marginEnd: marginEnd,
+    marginStart: marginStart,
+    style: pressableStyle,
+    transparentWhileInactive: transparent
+  }, props, {
+    children: loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+      color: theme.color[colorValue],
+      size: "small",
+      style: sizingStyle,
+      testID: props.testID ? props.testID + "-activity-indicator" : undefined
+    }) :
+    /*#__PURE__*/
+    /* TO DO: test using currentColor like web does on Icon here */
+    _jsx(Icon, {
+      active: active,
+      color: colorValue,
+      name: name,
+      size: iconSize,
+      style: sizingStyle
+    })
+  }));
+});
+IconButton.displayName = 'IconButton';

package/esm/buttons/IconCounterButton.js

@@ -0,0 +1,42 @@
+const _excluded = ["icon", "iconSize", "size", "active", "count", "color", "dangerouslySetColor"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo } from 'react';
+import { formatCount } from '@coinbase/cds-common/utils/formatCount';
+import { Icon } from '../icons';
+import { HStack } from '../layout';
+import { Pressable } from '../system';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const IconCounterButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function IconCounterButton(_ref, ref) {
+  let {
+      icon,
+      iconSize = 's',
+      size = iconSize,
+      active,
+      count = 0,
+      color = 'fg',
+      dangerouslySetColor
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Pressable, _extends({
+    ref: ref,
+    background: "transparent"
+  }, props, {
+    children: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 1,
+      children: [typeof icon === 'string' ? /*#__PURE__*/_jsx(Icon, {
+        active: active,
+        color: color,
+        dangerouslySetColor: dangerouslySetColor,
+        name: icon,
+        size: size
+      }) : icon, count > 0 ? /*#__PURE__*/_jsx(Text, {
+        mono: true,
+        font: "label1",
+        children: formatCount(count)
+      }) : null]
+    })
+  }));
+}));

package/esm/buttons/SlideButton.js

@@ -0,0 +1,145 @@
+const _excluded = ["borderRadius", "checked", "uncheckedLabel", "checkedLabel", "onSlideStart", "onSlideCancel", "onSlideEnd", "onSlideComplete", "onChange", "disabled", "height", "checkThreshold", "SlideButtonHandleComponent", "SlideButtonBackgroundComponent", "styles", "testID", "autoCompleteSlideOnThresholdMet", "variant", "startUncheckedNode", "endCheckedNode"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useCallback, useId, useMemo } from 'react';
+import { View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
+import { animated, to, useSpring } from '@react-spring/native';
+import { useLayout } from '../hooks/useLayout';
+import { DefaultSlideButtonBackground } from './DefaultSlideButtonBackground';
+import { animationConfig, DefaultSlideButtonHandle } from './DefaultSlideButtonHandle';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const slideButtonTestID = 'slide-button';
+export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      borderRadius,
+      checked,
+      uncheckedLabel,
+      checkedLabel,
+      onSlideStart,
+      onSlideCancel,
+      onSlideEnd,
+      onSlideComplete,
+      onChange,
+      disabled,
+      height,
+      checkThreshold = 0.7,
+      SlideButtonHandleComponent = DefaultSlideButtonHandle,
+      SlideButtonBackgroundComponent = DefaultSlideButtonBackground,
+      styles,
+      testID = slideButtonTestID,
+      autoCompleteSlideOnThresholdMet,
+      variant = 'primary',
+      startUncheckedNode,
+      endCheckedNode
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const labelId = useId();
+  const [containerSize, onLayout] = useLayout();
+  const {
+    progress
+  } = useSpring({
+    progress: checked ? 1 : 0,
+    config: animationConfig
+  });
+  const buttonMinHeight = interactableHeight.regular;
+  const buttonMinWidth = buttonMinHeight;
+  const handleComplete = useCallback(() => {
+    void progress.start(1);
+    onChange == null || onChange(true);
+    onSlideComplete == null || onSlideComplete();
+    onSlideEnd == null || onSlideEnd();
+  }, [progress, onSlideComplete, onChange, onSlideEnd]);
+  const handleAccessibilityAction = useCallback(event => {
+    if (event.nativeEvent.actionName === 'activate' && !checked && !disabled) {
+      handleComplete();
+    }
+  }, [checked, disabled, handleComplete]);
+  const accessibilityActions = useMemo(() => !checked && !disabled ? [{
+    name: 'activate'
+  }] : undefined, [checked, disabled]);
+  const accessibilityLabel = useMemo(() => checked ? checkedLabel : uncheckedLabel, [checked, checkedLabel, uncheckedLabel]);
+  const panGesture = useMemo(() => Gesture.Pan().onStart(() => {
+    if (checked || disabled) return;
+    onSlideStart == null || onSlideStart();
+  }).onUpdate(_ref2 => {
+    let {
+      translationX
+    } = _ref2;
+    if (checked || disabled) return;
+    const newWidth = (buttonMinWidth + translationX) / containerSize.width;
+    const thresholdReached = newWidth >= checkThreshold;
+    if (thresholdReached && autoCompleteSlideOnThresholdMet) {
+      handleComplete();
+      return;
+    }
+    const progressValue = autoCompleteSlideOnThresholdMet ? newWidth : Math.min(1, newWidth);
+    void progress.set(progressValue);
+  }).onEnd(_ref3 => {
+    let {
+      translationX
+    } = _ref3;
+    if (checked || disabled) return;
+    const newWidth = (buttonMinWidth + translationX) / containerSize.width;
+    if (newWidth >= checkThreshold) {
+      handleComplete();
+      return;
+    }
+    void progress.start(0);
+    onSlideCancel == null || onSlideCancel();
+    onSlideEnd == null || onSlideEnd();
+  }).withTestId(testID).runOnJS(true), [testID, checked, disabled, onSlideStart, buttonMinWidth, containerSize.width, autoCompleteSlideOnThresholdMet, checkThreshold, handleComplete, progress, onSlideCancel, onSlideEnd]);
+  const containerStyle = useMemo(() => [{
+    height: height != null ? height : buttonMinHeight,
+    width: '100%',
+    position: 'relative'
+  }, styles == null ? void 0 : styles.container], [height, buttonMinHeight, styles == null ? void 0 : styles.container]);
+  const animatedStyle = useMemo(() => ({
+    position: 'absolute',
+    height: height != null ? height : buttonMinHeight,
+    minWidth: buttonMinWidth,
+    width: to(progress, value => value * 100 + "%")
+  }), [height, buttonMinHeight, buttonMinWidth, progress]);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    id: labelId,
+    onLayout: onLayout,
+    style: containerStyle,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(SlideButtonBackgroundComponent, {
+      borderRadius: borderRadius,
+      checked: checked,
+      disabled: disabled,
+      progress: progress,
+      style: styles == null ? void 0 : styles.background,
+      uncheckedLabel: uncheckedLabel,
+      variant: variant
+    }), /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: panGesture,
+      children: /*#__PURE__*/_jsx(animated.View, {
+        style: animatedStyle,
+        children: /*#__PURE__*/_jsx(SlideButtonHandleComponent, _extends({
+          accessible: true,
+          accessibilityActions: accessibilityActions
+        }, typeof accessibilityLabel === 'string' ? {
+          accessibilityLabel
+        } : {
+          accessibilityLabelledBy: labelId
+        }, {
+          borderRadius: borderRadius,
+          checked: checked,
+          checkedLabel: checkedLabel,
+          disabled: disabled,
+          endCheckedNode: endCheckedNode,
+          onAccessibilityAction: handleAccessibilityAction,
+          progress: progress,
+          startUncheckedNode: startUncheckedNode,
+          style: styles == null ? void 0 : styles.handle,
+          testID: testID + "-handle",
+          variant: variant
+        }, props))
+      })
+    })]
+  });
+}));

package/esm/buttons/__figma__/AvatarButton.figma.js

@@ -0,0 +1,25 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { figma } from '@figma/code-connect';
+import { AvatarButton } from '../AvatarButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(AvatarButton, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=276-23400&m=dev', {
+  imports: ["import {AvatarButton} from '@coinbase/cds-mobile/buttons/AvatarButton';"],
+  props: {
+    //   state: figma.enum('state', {
+    //     active: 'active',
+    //     focus: 'focus',
+    //     hover: 'hover',
+    //     pressed: 'pressed',
+    //     selected: 'selected',
+    //   }),
+    selected: figma.enum('state', {
+      selected: true
+    }),
+    compact: figma.boolean('compact'),
+    loading: figma.boolean('disabled')
+  },
+  example: props => /*#__PURE__*/_jsx(AvatarButton, _extends({}, props, {
+    accessibilityLabel: "Avatar button",
+    name: "A"
+  }))
+});

package/esm/buttons/__figma__/Button.figma.js

@@ -0,0 +1,65 @@
+const _excluded = ["startIcon", "endIcon"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { figma } from '@figma/code-connect';
+import { Button } from '../Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Button, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=89-3096&m=dev', {
+  imports: ["import { Button } from '@coinbase/cds-mobile/buttons/Button';"],
+  props: {
+    variant: figma.enum('variant', {
+      primary: 'primary',
+      secondary: 'secondary',
+      negative: 'negative'
+    }),
+    transparent: figma.boolean('transparent'),
+    loading: figma.enum('state', {
+      loading: true,
+      default: false,
+      hover: false,
+      pressed: false,
+      disabled: false
+    }),
+    disabled: figma.enum('state', {
+      disabled: true,
+      default: false,
+      hover: false,
+      pressed: false,
+      loading: false
+    }),
+    compact: figma.boolean('compact'),
+    block: figma.enum('width', {
+      hug: false,
+      full: true,
+      flush: false
+    }),
+    startIcon: figma.enum('icon', {
+      leading: figma.instance('↳ icon').getProps(),
+      trailing: undefined,
+      none: undefined
+    }),
+    endIcon: figma.enum('icon', {
+      trailing: figma.instance('↳ icon').getProps(),
+      leading: undefined,
+      none: undefined
+    }),
+    flush: figma.enum('width', {
+      hug: undefined,
+      full: undefined,
+      flush: 'start'
+    })
+  },
+  example: _ref => {
+    let {
+        startIcon,
+        endIcon
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/_jsx(Button, _extends({
+      endIcon: endIcon.name,
+      startIcon: startIcon.name
+    }, props, {
+      children: "Button"
+    }));
+  }
+});

package/esm/buttons/__figma__/ButtonGroup.figma.js

@@ -0,0 +1,48 @@
+const _excluded = ["children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { figma } from '@figma/code-connect';
+import { Button } from '../Button';
+import { ButtonGroup } from '../ButtonGroup';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(ButtonGroup, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=283-19617&m=dev', {
+  imports: ["import {ButtonGroup} from '@coinbase/cds-mobile/buttons/ButtonGroup'"],
+  props: {
+    direction: figma.enum('orientation', {
+      stacked: 'vertical',
+      'side-by-side': 'horizontal'
+    }),
+    children: figma.enum('# of actions', {
+      '2': /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Button"
+        })]
+      }),
+      '3': /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Button"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "negative",
+          children: "Button"
+        })]
+      })
+    })
+  },
+  example: _ref => {
+    let {
+        children
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/_jsx(ButtonGroup, _extends({}, props, {
+      children: children
+    }));
+  }
+});

package/esm/buttons/__figma__/IconButton.figma.js

@@ -0,0 +1,29 @@
+function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { figma } from '@figma/code-connect';
+import { IconButton } from '../IconButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(IconButton, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=47-358&m=dev', {
+  imports: ["import {IconButton} from '@coinbase/cds-mobile/buttons/IconButton';"],
+  props: {
+    variant: figma.enum('variant', {
+      primary: 'primary',
+      secondary: 'secondary'
+    }),
+    disabled: figma.enum('state', {
+      disabled: true,
+      default: false,
+      hover: false,
+      pressed: false,
+      loading: false
+    }),
+    compact: figma.boolean('compact'),
+    transparent: figma.boolean('transparent')
+  },
+  example: _ref => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+    return /*#__PURE__*/_jsx(IconButton, _extends({
+      name: "add"
+    }, props));
+  }
+});

package/esm/buttons/__figma__/SlideButton.figma.js

@@ -0,0 +1,26 @@
+const _excluded = ["checked"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { figma } from '@figma/code-connect';
+import { SlideButton } from '../SlideButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(SlideButton, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-10283&m=dev', {
+  imports: ["import { SlideButton } from '@coinbase/cds-mobile/buttons/SlideButton';"],
+  props: {
+    checked: figma.enum('Position', {
+      // TODO: fix falsy values returning undefined. This is an existing issue in code connect https://github.com/figma/code-connect/issues/193
+      Start: false,
+      Middle: false,
+      End: true
+    })
+  },
+  example: _ref => {
+    let {
+        checked = false
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/_jsx(SlideButton, _extends({
+      checked: checked
+    }, props));
+  }
+});