@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/system/__stories__/PatternDisclosureHighFrictionBenefit.stories.js

@@ -0,0 +1,95 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Button } from '../../buttons';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Icon } from '../../icons';
+import { SpotRectangle } from '../../illustrations';
+import { Box, HStack, VStack } from '../../layout';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '../../overlays';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PatternDisclosureHighFrictionBenefitScreen = () => {
+  const [visible, setVisible] = useState(true);
+  const setVisibleToTrue = useCallback(() => setVisible(true), []);
+  const setVisibleToFalse = useCallback(() => setVisible(false), []);
+  const data = useMemo(() => [{
+    id: 1,
+    headline: 'Benefit to highlight 1',
+    body: 'Bullet outlining benefits.'
+  }, {
+    id: 2,
+    headline: 'Benefit to highlight 2',
+    body: 'Bullet outlining benefits.'
+  }], []);
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsxs(Example, {
+      title: "Pattern - High-Friction Benefit Disclosure",
+      children: [/*#__PURE__*/_jsx(Button, {
+        onPress: setVisibleToTrue,
+        children: "View HFB Disclosure"
+      }), /*#__PURE__*/_jsxs(Modal, {
+        hideDividers: true,
+        accessibilityHint: "Hint providing more context about the disclosure. Close this dialog to continue.",
+        accessibilityLabel: "Title outlining the benefit in 1-2 lines",
+        onRequestClose: setVisibleToFalse,
+        visible: visible,
+        children: [/*#__PURE__*/_jsx(ModalHeader, {
+          closeAccessibilityHint: "Close this dialog to continue",
+          closeAccessibilityLabel: "Close"
+        }), /*#__PURE__*/_jsxs(ModalBody, {
+          children: [/*#__PURE__*/_jsx(Box, {
+            alignItems: "center",
+            children: /*#__PURE__*/_jsx(SpotRectangle, {
+              name: "accessToAdvancedCharts"
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "title3",
+            paddingTop: 4,
+            children: "Title outlining the benefit in 1-2 lines"
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            paddingTop: 1,
+            children: "Body text saying \"By verbing, you will get X, Y, Z.\""
+          }), /*#__PURE__*/_jsx(VStack, {
+            gap: 3,
+            paddingY: 3,
+            children: data.map(_ref => {
+              let {
+                id,
+                headline,
+                body
+              } = _ref;
+              return /*#__PURE__*/_jsxs(VStack, {
+                gap: 1,
+                children: [/*#__PURE__*/_jsxs(HStack, {
+                  alignItems: "center",
+                  gap: 2,
+                  children: [/*#__PURE__*/_jsx(Icon, {
+                    color: "fg",
+                    name: "checkmark",
+                    size: "s"
+                  }), /*#__PURE__*/_jsx(Text, {
+                    font: "headline",
+                    style: {
+                      flex: 1
+                    },
+                    children: headline
+                  })]
+                }), /*#__PURE__*/_jsx(Text, {
+                  font: "body",
+                  paddingStart: 4,
+                  children: body
+                })]
+              }, id);
+            })
+          })]
+        }), /*#__PURE__*/_jsx(ModalFooter, {
+          primaryAction: /*#__PURE__*/_jsx(Button, {
+            onPress: setVisibleToFalse,
+            children: "[CTA]"
+          })
+        })]
+      })]
+    })
+  });
+};
+export default PatternDisclosureHighFrictionBenefitScreen;

package/esm/system/__stories__/PatternDisclosureHighFrictionRisk.stories.js

@@ -0,0 +1,116 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Button } from '../../buttons';
+import { Checkbox } from '../../controls';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { SpotRectangle } from '../../illustrations';
+import { Box, HStack, VStack } from '../../layout';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '../../overlays';
+import { Link } from '../../typography/Link';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PatternDisclosureHighFrictionRiskScreen = () => {
+  const data = useMemo(() => [{
+    id: 1,
+    headline: 'Risk item 1',
+    checkboxLabel: "I understand that I won't be able to do X because of Y.",
+    linkText: 'Learn more',
+    linkUrl: 'https://www.coinbase.com'
+  }, {
+    id: 2,
+    headline: 'Risk item 2',
+    checkboxLabel: "I understand that I won't be able to do X because of Y.",
+    linkText: 'Learn more',
+    linkUrl: 'https://www.coinbase.com'
+  }], []);
+  const initialCheckboxesState = useMemo(() => data.map(() => false), [data]);
+  const [visible, setVisible] = useState(true);
+  const setVisibleToFalse = useCallback(() => setVisible(false), []);
+  const setVisibleToTrue = useCallback(() => setVisible(true), []);
+  const [checkboxes, setCheckboxes] = useState(initialCheckboxesState);
+  const isCtaDisabled = useMemo(() => checkboxes.some(checked => !checked), [checkboxes]);
+  const handleCheckboxChange = useCallback(index => () => {
+    setCheckboxes(prevCheckboxes => prevCheckboxes.map((checked, i) => i === index ? !checked : checked));
+  }, []);
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsxs(Example, {
+      title: "Pattern - High-Friction Risk Disclosure",
+      children: [/*#__PURE__*/_jsx(Button, {
+        onPress: setVisibleToTrue,
+        children: "View HFR Disclosure"
+      }), /*#__PURE__*/_jsxs(Modal, {
+        hideDividers: true,
+        accessibilityHint: "Hint providing more context about the disclosure. Close this dialog to continue.",
+        accessibilityLabel: "Title outlining risk in 1-2 lines",
+        onRequestClose: setVisibleToFalse,
+        visible: visible,
+        children: [/*#__PURE__*/_jsx(ModalHeader, {
+          backAccessibilityHint: "Go back to the previous dialog",
+          backAccessibilityLabel: "Back",
+          closeAccessibilityHint: "Close this dialog to continue",
+          closeAccessibilityLabel: "Close",
+          onBackButtonClick: setVisibleToFalse
+        }), /*#__PURE__*/_jsxs(ModalBody, {
+          children: [/*#__PURE__*/_jsx(Box, {
+            alignItems: "center",
+            children: /*#__PURE__*/_jsx(SpotRectangle, {
+              name: "accessToAdvancedCharts"
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "title3",
+            paddingTop: 4,
+            children: "Title outlining risk in 1-2 lines"
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            paddingTop: 1,
+            children: "Body text saying \"Before you [verb], here are a few things you need to understand about [action].\""
+          }), /*#__PURE__*/_jsx(VStack, {
+            gap: 3,
+            paddingY: 3,
+            children: data.map((_ref, index) => {
+              let {
+                id,
+                headline,
+                checkboxLabel,
+                linkText,
+                linkUrl
+              } = _ref;
+              return /*#__PURE__*/_jsxs(VStack, {
+                gap: 1,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  font: "headline",
+                  children: headline
+                }), /*#__PURE__*/_jsxs(HStack, {
+                  alignItems: "center",
+                  gap: 1,
+                  children: [/*#__PURE__*/_jsx(Checkbox, {
+                    accessibilityHint: "Toggle acknowledgment of this risk item. All risk items must be acknowledged to proceed.",
+                    accessibilityLabel: checkboxLabel,
+                    checked: checkboxes[index],
+                    onChange: handleCheckboxChange(index)
+                  }), /*#__PURE__*/_jsxs(Text, {
+                    font: "label2",
+                    style: {
+                      flex: 1
+                    },
+                    children: [checkboxLabel, ' ', /*#__PURE__*/_jsx(Link, {
+                      underline: true,
+                      to: linkUrl,
+                      children: linkText
+                    })]
+                  })]
+                })]
+              }, id);
+            })
+          })]
+        }), /*#__PURE__*/_jsx(ModalFooter, {
+          primaryAction: /*#__PURE__*/_jsx(Button, {
+            disabled: isCtaDisabled,
+            onPress: setVisibleToFalse,
+            children: "[" + (isCtaDisabled ? 'Disabled' : 'Enabled') + " CTA]"
+          })
+        })]
+      })]
+    })
+  });
+};
+export default PatternDisclosureHighFrictionRiskScreen;

package/esm/system/__stories__/PatternDisclosureLowFriction.stories.js

@@ -0,0 +1,100 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Button } from '../../buttons';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Icon } from '../../icons';
+import { SpotRectangle } from '../../illustrations';
+import { Box, HStack, VStack } from '../../layout';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '../../overlays';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PatternDisclosureLowFrictionScreen = () => {
+  const [visible, setVisible] = useState(true);
+  const setVisibleToFalse = useCallback(() => setVisible(false), []);
+  const setVisibleToTrue = useCallback(() => setVisible(true), []);
+  const data = useMemo(() => [{
+    id: 1,
+    headline: 'Benefit to highlight 1',
+    body: 'Bullets explaining selling points and potential risks (can include “learn more” links).'
+  }, {
+    id: 2,
+    headline: 'Risk to highlight 1',
+    body: 'Bullets explaining selling points and potential risks (can include “learn more” links).'
+  }], []);
+  const handleSecondaryPress = useCallback(() => {
+    // open terms and conditions
+  }, []);
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsxs(Example, {
+      title: "Pattern - Low-Friction Disclosure",
+      children: [/*#__PURE__*/_jsx(Button, {
+        onPress: setVisibleToTrue,
+        children: "View LF Disclosure"
+      }), /*#__PURE__*/_jsxs(Modal, {
+        hideDividers: true,
+        accessibilityHint: "Hint providing more context about the disclosure. Close this dialog to continue.",
+        accessibilityLabel: "Title outlining the action and benefit in 1-2 lines",
+        onRequestClose: setVisibleToFalse,
+        visible: visible,
+        children: [/*#__PURE__*/_jsx(ModalHeader, {
+          closeAccessibilityHint: "Close this dialog to continue",
+          closeAccessibilityLabel: "Close"
+        }), /*#__PURE__*/_jsxs(ModalBody, {
+          children: [/*#__PURE__*/_jsx(Box, {
+            alignItems: "center",
+            children: /*#__PURE__*/_jsx(SpotRectangle, {
+              name: "accessToAdvancedCharts"
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "title3",
+            paddingTop: 4,
+            children: "Title outlining the action and benefit in 1-2 lines"
+          }), /*#__PURE__*/_jsx(VStack, {
+            gap: 3,
+            paddingY: 3,
+            children: data.map(_ref => {
+              let {
+                id,
+                headline,
+                body
+              } = _ref;
+              return /*#__PURE__*/_jsxs(VStack, {
+                gap: 1,
+                children: [/*#__PURE__*/_jsxs(HStack, {
+                  alignItems: "center",
+                  gap: 2,
+                  children: [/*#__PURE__*/_jsx(Icon, {
+                    color: "fg",
+                    name: "checkmark",
+                    size: "s"
+                  }), /*#__PURE__*/_jsx(Text, {
+                    font: "headline",
+                    style: {
+                      flex: 1
+                    },
+                    children: headline
+                  })]
+                }), /*#__PURE__*/_jsx(Text, {
+                  font: "body",
+                  paddingStart: 4,
+                  children: body
+                })]
+              }, id);
+            })
+          })]
+        }), /*#__PURE__*/_jsx(ModalFooter, {
+          direction: "vertical",
+          primaryAction: /*#__PURE__*/_jsx(Button, {
+            onPress: setVisibleToFalse,
+            children: "[Affirmative CTA]"
+          }),
+          secondaryAction: /*#__PURE__*/_jsx(Button, {
+            onPress: handleSecondaryPress,
+            variant: "secondary",
+            children: "Terms and conditions"
+          })
+        })]
+      })]
+    })
+  });
+};
+export default PatternDisclosureLowFrictionScreen;

package/esm/system/__stories__/PatternDisclosureMedFriction.stories.js

@@ -0,0 +1,100 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Button } from '../../buttons';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Icon } from '../../icons';
+import { SpotRectangle } from '../../illustrations';
+import { Box, HStack, VStack } from '../../layout';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '../../overlays';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PatternDisclosureMedFrictionScreen = () => {
+  const [visible, setVisible] = useState(true);
+  const setVisibleToFalse = useCallback(() => setVisible(false), []);
+  const setVisibleToTrue = useCallback(() => setVisible(true), []);
+  const data = useMemo(() => [{
+    id: 1,
+    headline: 'Risk to highlight 1',
+    body: 'Bullets explaining selling points and potential risks (include “learn more” links in risk bullets).'
+  }, {
+    id: 2,
+    headline: 'Risk to highlight 2',
+    body: 'Bullets explaining selling points and potential risks (include “learn more” links in risk bullets).'
+  }], []);
+  const handleSecondaryPress = useCallback(() => {
+    // open terms and conditions
+  }, []);
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsxs(Example, {
+      title: "Pattern - Medium-Friction Disclosure",
+      children: [/*#__PURE__*/_jsx(Button, {
+        onPress: setVisibleToTrue,
+        children: "View MF Disclosure"
+      }), /*#__PURE__*/_jsxs(Modal, {
+        hideDividers: true,
+        accessibilityHint: "Hint providing more context about the disclosure. Close this dialog to continue.",
+        accessibilityLabel: "Title outlining the benefit in 1-2 lines",
+        onRequestClose: setVisibleToFalse,
+        visible: visible,
+        children: [/*#__PURE__*/_jsx(ModalHeader, {
+          closeAccessibilityHint: "Close this dialog to continue",
+          closeAccessibilityLabel: "Close"
+        }), /*#__PURE__*/_jsxs(ModalBody, {
+          children: [/*#__PURE__*/_jsx(Box, {
+            alignItems: "center",
+            children: /*#__PURE__*/_jsx(SpotRectangle, {
+              name: "accessToAdvancedCharts"
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "title3",
+            paddingTop: 4,
+            children: "Title outlining the benefit in 1-2 lines"
+          }), /*#__PURE__*/_jsx(VStack, {
+            gap: 3,
+            paddingY: 3,
+            children: data.map(_ref => {
+              let {
+                id,
+                headline,
+                body
+              } = _ref;
+              return /*#__PURE__*/_jsxs(VStack, {
+                gap: 1,
+                children: [/*#__PURE__*/_jsxs(HStack, {
+                  alignItems: "center",
+                  gap: 2,
+                  children: [/*#__PURE__*/_jsx(Icon, {
+                    color: "fg",
+                    name: "checkmark",
+                    size: "s"
+                  }), /*#__PURE__*/_jsx(Text, {
+                    font: "headline",
+                    style: {
+                      flex: 1
+                    },
+                    children: headline
+                  })]
+                }), /*#__PURE__*/_jsx(Text, {
+                  font: "body",
+                  paddingStart: 4,
+                  children: body
+                })]
+              }, id);
+            })
+          })]
+        }), /*#__PURE__*/_jsx(ModalFooter, {
+          direction: "vertical",
+          primaryAction: /*#__PURE__*/_jsx(Button, {
+            onPress: setVisibleToFalse,
+            children: "[Affirmative CTA]"
+          }),
+          secondaryAction: /*#__PURE__*/_jsx(Button, {
+            onPress: handleSecondaryPress,
+            variant: "secondary",
+            children: "Terms and conditions"
+          })
+        })]
+      })]
+    })
+  });
+};
+export default PatternDisclosureMedFrictionScreen;

package/esm/system/__stories__/PatternError.stories.js

@@ -0,0 +1,62 @@
+import React, { useCallback, useState } from 'react';
+import { Button } from '../../buttons';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { HeroSquare } from '../../illustrations';
+import { VStack } from '../../layout';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '../../overlays';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PatternTagErrorScreen = () => {
+  const [visible, setVisible] = useState(true);
+  const setVisibleToFalse = useCallback(() => setVisible(false), []);
+  const setVisibleToTrue = useCallback(() => setVisible(true), []);
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsxs(Example, {
+      title: "Pattern - Error",
+      children: [/*#__PURE__*/_jsx(Button, {
+        onPress: setVisibleToTrue,
+        children: "View Error"
+      }), /*#__PURE__*/_jsxs(Modal, {
+        hideDividers: true,
+        accessibilityHint: "The requested page was not found. Close this dialog to continue.",
+        accessibilityLabel: "Page not found",
+        accessibilityRole: "alert",
+        onRequestClose: setVisibleToFalse,
+        visible: visible,
+        children: [/*#__PURE__*/_jsx(ModalHeader, {
+          closeAccessibilityHint: "Close this dialog to continue",
+          closeAccessibilityLabel: "Close"
+        }), /*#__PURE__*/_jsx(ModalBody, {
+          contentContainerStyle: {
+            flex: 1
+          },
+          children: /*#__PURE__*/_jsxs(VStack, {
+            alignItems: "center",
+            flexGrow: 1,
+            justifyContent: "center",
+            children: [/*#__PURE__*/_jsx(HeroSquare, {
+              name: "errorWeb404"
+            }), /*#__PURE__*/_jsx(Text, {
+              align: "center",
+              font: "title3",
+              paddingTop: 3,
+              children: "Page not found"
+            }), /*#__PURE__*/_jsx(Text, {
+              align: "center",
+              color: "fgMuted",
+              font: "body",
+              paddingTop: 1,
+              children: "Sorry we couldn't find what you were looking for."
+            })]
+          })
+        }), /*#__PURE__*/_jsx(ModalFooter, {
+          primaryAction: /*#__PURE__*/_jsx(Button, {
+            onPress: setVisibleToFalse,
+            children: "Back to Coinbase"
+          })
+        })]
+      })]
+    })
+  });
+};
+export default PatternTagErrorScreen;

package/esm/system/__stories__/Pressable.stories.js

@@ -0,0 +1,175 @@
+import React from 'react';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { VStack } from '../../layout';
+import { Box } from '../../layout/Box';
+import { Text } from '../../typography/Text';
+import { Pressable } from '../Pressable';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PressableScreen = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsxs(Example, {
+      title: "Pressable",
+      children: [/*#__PURE__*/_jsx(Box, {
+        padding: 1,
+        children: /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          background: "bg",
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Default background"
+          })
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        background: "bgOverlay",
+        padding: 1,
+        children: /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          background: "bgAlternate",
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Other background"
+          })
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        padding: 1,
+        children: /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          background: "bg",
+          borderColor: "bgPrimary",
+          borderRadius: 400,
+          borderWidth: 100,
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "With border"
+          })
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        padding: 1,
+        children: /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          background: "bgPrimary",
+          borderRadius: 400,
+          borderWidth: 100,
+          children: /*#__PURE__*/_jsx(Text, {
+            color: "fgInverse",
+            font: "body",
+            children: "Primary"
+          })
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        padding: 1,
+        children: /*#__PURE__*/_jsx(Pressable, {
+          loading: true,
+          accessibilityRole: "button",
+          background: "bgPrimary",
+          borderRadius: 400,
+          borderWidth: 100,
+          children: /*#__PURE__*/_jsx(Text, {
+            color: "fgInverse",
+            font: "body",
+            children: "Primary + Loading"
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      title: "Pressable (opacity only)",
+      children: [/*#__PURE__*/_jsx(Box, {
+        padding: 1,
+        children: /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          background: "transparent",
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Default background"
+          })
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        background: "bgOverlay",
+        padding: 1,
+        children: /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          background: "transparent",
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Other background"
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      title: "Pressable transparentWhileInactive",
+      children: [/*#__PURE__*/_jsx(Box, {
+        padding: 1,
+        children: /*#__PURE__*/_jsx(Pressable, {
+          transparentWhileInactive: true,
+          accessibilityRole: "button",
+          background: "bgPrimary",
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Default background"
+          })
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        background: "bgOverlay",
+        padding: 1,
+        children: /*#__PURE__*/_jsx(Pressable, {
+          transparentWhileInactive: true,
+          accessibilityRole: "button",
+          background: "bgPrimary",
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Other background"
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Pressable variants",
+      children: /*#__PURE__*/_jsx(VStack, {
+        gap: 2,
+        children: Object.entries(theme.color).map(_ref => {
+          let [color, value] = _ref;
+          let textColor = getAccessibleColor({
+            background: value
+          });
+          if (color === 'currentColor') textColor = theme.activeColorScheme === 'dark' ? '#ffffff' : '#000000';
+          return /*#__PURE__*/_jsx(Pressable, {
+            accessibilityRole: "button",
+            background: color,
+            children: /*#__PURE__*/_jsx(Text, {
+              dangerouslySetColor: textColor,
+              font: "body",
+              padding: 1,
+              children: color
+            })
+          }, color);
+        })
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Pressable variants with disabled",
+      children: /*#__PURE__*/_jsx(VStack, {
+        gap: 2,
+        children: Object.entries(theme.color).map(_ref2 => {
+          let [color, value] = _ref2;
+          let textColor = getAccessibleColor({
+            background: value
+          });
+          if (color === 'currentColor') textColor = theme.activeColorScheme === 'dark' ? '#ffffff' : '#000000';
+          return /*#__PURE__*/_jsx(Pressable, {
+            disabled: true,
+            accessibilityRole: "button",
+            background: color,
+            children: /*#__PURE__*/_jsx(Text, {
+              dangerouslySetColor: textColor,
+              font: "body",
+              padding: 1,
+              children: color
+            })
+          }, color);
+        })
+      })
+    })]
+  });
+};
+export default PressableScreen;

package/esm/system/__stories__/PressableOpacity.stories.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Icon } from '../../icons/Icon';
+import { PressableOpacity } from '../PressableOpacity';
+import { jsx as _jsx } from "react/jsx-runtime";
+function onPress(event) {
+  console.log('Pressed', event.type || 'GestureResponderEvent');
+}
+const PressableOpacityScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "PressableOpacity",
+      children: /*#__PURE__*/_jsx(PressableOpacity, {
+        hitSlop: 8,
+        onPress: onPress,
+        style: {
+          alignItems: 'center',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          height: 40,
+          width: 40
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          active: true,
+          color: "fg",
+          name: "bell",
+          size: "s"
+        })
+      })
+    })
+  });
+};
+export default PressableOpacityScreen;