@ornikar/bumper 2.5.1-canary.9789a78a274b9d336c93fc42d4a6561d0d61ff73.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "2.5.1-canary.9789a78a274b9d336c93fc42d4a6561d0d61ff73.0",
+  "version": "2.6.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",

package/src/components/primitives/Pressable.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { Typography } from '../typography/Typograhy';
+import type { CenterProps } from './Center';
+import { Center } from './Center';
+import { Pressable } from './Pressable';
+
+export default {
+  title: 'bumper/Primitives',
+  component: Center,
+} satisfies Meta<CenterProps>;
+
+export const PressableStory: StoryFn<typeof Pressable> = () => (
+  <Pressable
+    as={Center}
+    marginTop="$space.16"
+    padding="$space.24"
+    backgroundColor="$bg.accent.default"
+    pressStyle={{ opacity: 0.7 }}
+    onPress={() => null}
+  >
+    <Typography.Text color="$content.base.onContrasted.hi">Click me</Typography.Text>
+  </Pressable>
+);
+
+PressableStory.storyName = 'Pressable';

package/src/components/primitives/Pressable.tsx

@@ -0,0 +1,35 @@
+import type { GetProps, TamaguiComponent } from '@tamagui/core';
+import { View, styled } from '@tamagui/core';
+import type { ReactNode } from 'react';
+import type { Except } from 'type-fest';
+
+export type PressableProps<C extends TamaguiComponent = typeof View> = {
+  /**
+   * The Tamagui component to render as (`View`, `Stack`, etc.).
+   *
+   * @default View
+   */
+  as?: C;
+} & Except<GetProps<C>, 'as'>;
+
+/**
+ * A polymorphic Pressable component that can render as any Tamagui primitive.
+ *
+ * @example
+ * <Pressable onPress={() => {}} />
+ *
+ * @example
+ * <Pressable
+ *   as={HStack}
+ *   onPress={() => {}}
+ * />
+ */
+export function Pressable<C extends TamaguiComponent = typeof View>({ as, ...rest }: PressableProps<C>): ReactNode {
+  const Component = styled(as ?? View, {
+    name: 'Pressable',
+    role: 'button',
+    cursor: 'pointer',
+  });
+
+  return <Component {...(rest as GetProps<C>)} />;
+}

package/src/components/primitives/__snapshots__/Pressable.stories.tsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`bumper/Primitives Pressable 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="button"
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#563B56",
+        "justifyContent": "center",
+        "marginTop": 16,
+        "opacity": 1,
+        "paddingBottom": 24,
+        "paddingLeft": 24,
+        "paddingRight": 24,
+        "paddingTop": 24,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "#ffffff",
+          "fontFamily": "GTStandard",
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Click me
+    </Text>
+  </View>
+</RNCSafeAreaProvider>
+`;

package/src/components/primitives/__snapshots_web__/Pressable.stories.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`bumper/Primitives Pressable 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_Pressable _opacity-0active-0--7 _display-flex _flexDirection-column _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _justifyContent-center _alignItems-center _cursor-pointer _marginTop-t-space-spa1366020313 _paddingTop-t-space-spa1366020284 _paddingRight-t-space-spa1366020284 _paddingBottom-t-space-spa1366020284 _paddingLeft-t-space-spa1366020284 _backgroundColor-bg--accent-1633109644"
+            role="button"
+            tabindex="0"
+          >
+            <span
+              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family _color-content--ba254712717"
+              data-disable-theme="true"
+            >
+              Click me
+            </span>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/index.ts

@@ -4,6 +4,8 @@ export { BumperProvider } from './core/BumperProvider';
 // Primitives
 export type { CenterProps } from './components/primitives/Center';
 export { Center } from './components/primitives/Center';
+export type { PressableProps } from './components/primitives/Pressable';
+export { Pressable } from './components/primitives/Pressable';
 export type { HStackProps, StackProps, VStackProps } from './components/primitives/Stack';
 export { HStack, Stack, VStack } from './components/primitives/Stack';
 export type { ViewProps } from './components/primitives/View';