@ornikar/bumper 2.8.1-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0 → 2.8.1-canary.1769087114.a46790da1b5b6361954b6ad25766074d3ed69784.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "2.8.1-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0",
+  "version": "2.8.1-canary.1769087114.a46790da1b5b6361954b6ad25766074d3ed69784.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.0",
-    "@ornikar/kitt-icons": "14.3.2-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0",
+    "@ornikar/kitt-icons": "^14.3.1",
     "@tamagui/core": "1.144.2",
     "@tamagui/image": "1.144.2",
     "@tamagui/scroll-view": "1.144.2"

package/src/index.ts

@@ -16,9 +16,10 @@ export type { ViewProps } from './system/core/primitives/View';
 export { View } from './system/core/primitives/View';
 
 // Typography
+export { Typography } from './system/content/typography';
 export type { TypographyTextProps } from './system/content/typography/Typography';
-export { Typography } from './system/content/typography/Typography';
 export type { TypographyIconProps } from './system/content/typography/TypographyIcon';
+export type { TypographyLinkProps } from './system/content/typography/TypographyLink';
 
 // Breakpoints
 export { useBreakpointValue } from './system/core/breakpoints/hooks/useBreakpointValue';

package/src/shared/storybook/StoryTitle.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@tamagui/core';
-import { Typography } from '../../system/content/typography/Typography';
+import { Typography } from '../../system/content/typography';
 
 export const StoryTitle = styled(Typography.Text, {
   variants: {

package/src/shared/storybook/helpers/argsHelpers.ts

@@ -0,0 +1,47 @@
+import type { ArgTypes } from '@storybook/react';
+import {
+  SEMANTIC_TOKENS_BACKGROUND,
+  SEMANTIC_TOKENS_BORDER,
+  SEMANTIC_TOKENS_CONTENT,
+} from '../../../system/core/themes/themes';
+import { radiusTokens } from '../../../system/core/tokens/radius';
+import { sizeTokens } from '../../../system/core/tokens/size';
+import { spaceTokens } from '../../../system/core/tokens/space';
+
+const getTokenKey = (name: string) => `$${name}`;
+
+export const backgroundColorArgType: ArgTypes[string] = {
+  control: 'select',
+  options: SEMANTIC_TOKENS_BACKGROUND.map(getTokenKey),
+  description: 'Background color (semantic theme token)',
+};
+
+export const spaceArgType: ArgTypes[string] = {
+  control: 'select',
+  options: Object.keys(spaceTokens).map(getTokenKey),
+  description: 'Space value (space token)',
+};
+
+export const sizeArgType: ArgTypes[string] = {
+  control: 'select',
+  options: Object.keys(sizeTokens).map(getTokenKey),
+  description: 'Size value (size token)',
+};
+
+export const radiusArgType: ArgTypes[string] = {
+  control: 'select',
+  options: Object.keys(radiusTokens).map(getTokenKey),
+  description: 'Border radius (radius token)',
+};
+
+export const contentColorArgType: ArgTypes[string] = {
+  control: 'select',
+  options: SEMANTIC_TOKENS_CONTENT.map(getTokenKey),
+  description: 'Content color (semantic theme token)',
+};
+
+export const borderColorArgType: ArgTypes[string] = {
+  control: 'select',
+  options: SEMANTIC_TOKENS_BORDER.map(getTokenKey),
+  description: 'Border color (semantic theme token)',
+};

package/src/system/content/icon/Icon.features.stories.tsx

@@ -6,7 +6,7 @@ import {
 } from '@ornikar/kitt-icons/phosphor';
 import type { Meta, StoryObj } from '@storybook/react';
 import { HStack, VStack } from '../../core/primitives/Stack';
-import { Typography } from '../typography/Typography';
+import { Typography } from '../typography';
 import { Icon } from './Icon';
 
 const meta: Meta<typeof Icon> = {

package/src/system/content/icon/Icon.stories.tsx

@@ -1,5 +1,6 @@
 import { StarRegularIcon } from '@ornikar/kitt-icons/phosphor';
 import type { Meta, StoryObj } from '@storybook/react';
+import { contentColorArgType, sizeArgType } from '../../../shared/storybook/helpers/argsHelpers';
 import { Icon } from './Icon';
 
 const meta: Meta<typeof Icon> = {
@@ -7,28 +8,8 @@ const meta: Meta<typeof Icon> = {
   component: Icon,
   tags: ['autodocs'],
   argTypes: {
-    size: {
-      control: 'select',
-      options: ['$size.16', '$size.20', '$size.24', '$size.32', '$size.48', '$size.64', '$size.80', '$size.96'],
-      description: 'Icon size (uses size tokens)',
-    },
-    color: {
-      control: 'select',
-      options: [
-        '$content.base.low',
-        '$content.base.mid',
-        '$content.base.hi',
-        '$content.accent',
-        '$content.promo',
-        '$content.info',
-        '$content.success',
-        '$content.warning',
-        '$content.danger',
-        '$content.muted',
-        '$content.disabled',
-      ],
-      description: 'Icon color (semantic theme token)',
-    },
+    size: sizeArgType,
+    color: contentColorArgType,
   },
 };
 

package/src/system/content/typography/Typography.features.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { VStack } from '../../core/primitives/Stack';
-import { Typography } from './Typography';
+import { Typography } from '.';
 
 const meta: Meta<typeof Typography.Text> = {
   title: 'Bumper/Content/Typography/Features',

package/src/system/content/typography/Typography.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from './Typography';
+import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
+import { Typography } from '.';
 
 const meta: Meta<typeof Typography.Text> = {
   title: 'Bumper/Content/Typography',
@@ -40,28 +41,7 @@ const meta: Meta<typeof Typography.Text> = {
       options: ['regular', 'semibold', 'bold'],
       description: 'Font weight (note: heading/label/content-caps variants have fixed weights)',
     },
-    color: {
-      control: 'select',
-      options: [
-        '$content.base.low',
-        '$content.base.mid',
-        '$content.base.hi',
-        '$content.base.onContrasted.low',
-        '$content.base.onContrasted.mid',
-        '$content.base.onContrasted.hi',
-        '$content.accent',
-        '$content.promo',
-        '$content.promo.onContrasted',
-        '$content.info',
-        '$content.success',
-        '$content.warning',
-        '$content.danger',
-        '$content.muted',
-        '$content.disabled',
-        '$content.disabled.onContrasted',
-      ],
-      description: 'Text color (semantic theme token)',
-    },
+    color: contentColorArgType,
   },
 };
 

package/src/system/content/typography/Typography.tsx

@@ -8,7 +8,6 @@ import type {
   HeadingFontVariants,
   LabelFontVariants,
 } from '../../core/tokens/fonts';
-import { TypographyIcon } from './TypographyIcon';
 import { getVariantAndWeightValues } from './utils/getVariantAndWeightValues';
 import {
   TypograhyColorContext,
@@ -97,7 +96,7 @@ export type TypographyTextProps =
   | OverrideTamaguiComponentProps<HeadingLabelProps>
   | OverrideTamaguiComponentProps<ContentCapsProps>;
 
-const TypographyBase = InternalTypography.styleable<TypographyTextProps, TypographyTextProps>((props, ref) => {
+export const TypographyBase = InternalTypography.styleable<TypographyTextProps, TypographyTextProps>((props, ref) => {
   const typographyVariantAncestorValue = useTypographyVariant();
   const typographyWeightAncestorValue = useTypographyWeight();
   const typographyColorAncestorValue = useTypographyColor();
@@ -147,19 +146,8 @@ const TypographyBase = InternalTypography.styleable<TypographyTextProps, Typogra
   return content;
 });
 
-const createHeading = (level: number): TamaguiComponent<TypographyTextProps> => {
+export const createHeading = (level: number): TamaguiComponent<TypographyTextProps> => {
   return TypographyBase.styleable<TypographyTextProps, TypographyTextProps>((props, ref) => {
     return <TypographyBase ref={ref} {...props} role="heading" aria-level={level} />;
   });
 };
-
-export const Typography = {
-  Text: TypographyBase,
-  Header1: createHeading(1),
-  Header2: createHeading(2),
-  Header3: createHeading(3),
-  Header4: createHeading(4),
-  Header5: createHeading(5),
-  Header6: createHeading(6),
-  Icon: TypographyIcon,
-};

package/src/system/content/typography/TypographyIcon.features.stories.tsx

@@ -6,8 +6,8 @@ import {
 } from '@ornikar/kitt-icons/phosphor';
 import type { Meta, StoryObj } from '@storybook/react';
 import { HStack, VStack } from '../../core/primitives/Stack';
-import { Typography } from './Typography';
 import { TypographyIcon } from './TypographyIcon';
+import { Typography } from '.';
 
 const meta: Meta<typeof TypographyIcon> = {
   title: 'Bumper/Content/TypographyIcon/Features',

package/src/system/content/typography/TypographyIcon.stories.tsx

@@ -1,5 +1,6 @@
 import { StarRegularIcon } from '@ornikar/kitt-icons/phosphor';
 import type { Meta, StoryObj } from '@storybook/react';
+import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
 import { TypographyIcon } from './TypographyIcon';
 
 const meta: Meta<typeof TypographyIcon> = {
@@ -17,25 +18,7 @@ const meta: Meta<typeof TypographyIcon> = {
       description: 'Icon size (uses size tokens)',
     },
     color: {
-      control: 'select',
-      options: [
-        '$content.base.low',
-        '$content.base.mid',
-        '$content.base.hi',
-        '$content.base.onContrasted.low',
-        '$content.base.onContrasted.mid',
-        '$content.base.onContrasted.hi',
-        '$content.accent',
-        '$content.promo',
-        '$content.promo.onContrasted',
-        '$content.info',
-        '$content.success',
-        '$content.warning',
-        '$content.danger',
-        '$content.muted',
-        '$content.disabled',
-        '$content.disabled.onContrasted',
-      ],
+      ...contentColorArgType,
       description: 'Icon color (semantic theme token). When omitted, inherits from parent Typography context.',
     },
   },

package/src/system/content/typography/TypographyLink.features.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { VStack } from '../../core/primitives/Stack';
+import { TypographyLink } from './TypographyLink';
+
+const meta: Meta<typeof TypographyLink> = {
+  title: 'Bumper/Content/TypographyLink/Features',
+  component: TypographyLink,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DisabledFalse: Story = {
+  args: {
+    disabled: false,
+    children: 'Enabled link (clickable with pointer cursor)',
+    onPress: () => alert('Link clicked!'),
+  },
+};
+
+export const DisabledTrue: Story = {
+  args: {
+    disabled: true,
+    children: 'Disabled link (not-allowed cursor, onPress removed)',
+    onPress: () => alert('This should not be called'),
+  },
+};
+
+export const NoUnderlineFalse: Story = {
+  args: {
+    noUnderline: false,
+    children: 'Link with underline (default)',
+    onPress: () => alert('Link clicked!'),
+  },
+};
+
+export const NoUnderlineTrue: Story = {
+  args: {
+    noUnderline: true,
+    children: 'Link without underline',
+    onPress: () => alert('Link clicked!'),
+  },
+};
+
+export const StateHover: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <TypographyLink forceStyle="hover" onPress={() => alert('Link clicked!')}>
+        Forced hover state - underline removed (hoverStyle applied)
+      </TypographyLink>
+      <TypographyLink noUnderline forceStyle="hover" onPress={() => alert('Link clicked!')}>
+        Forced hover state with noUnderline - no visual change
+      </TypographyLink>
+      <TypographyLink disabled forceStyle="hover" onPress={() => alert('Link clicked!')}>
+        Forced hover state on disabled - underline removed (hoverStyle applied)
+      </TypographyLink>
+      <TypographyLink disabled noUnderline forceStyle="hover" onPress={() => alert('Link clicked!')}>
+        Forced hover state with noUnderline on disabled - no visual change
+      </TypographyLink>
+    </VStack>
+  ),
+};

package/src/system/content/typography/TypographyLink.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
+import { TypographyLink } from './TypographyLink';
+
+const meta: Meta<typeof TypographyLink> = {
+  title: 'Bumper/Content/TypographyLink',
+  component: TypographyLink,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [
+        'heading-2xl',
+        'heading-xl',
+        'heading-l',
+        'heading-m',
+        'heading-s',
+        'heading-xs',
+        'heading-2xs',
+        'body-xl',
+        'body-l',
+        'body-m',
+        'body-s',
+        'body-xs',
+        'label-xl',
+        'label-l',
+        'label-m',
+        'label-s',
+        'content-caps-3xl',
+        'content-caps-2xl',
+        'content-caps-xl',
+        'content-caps-l',
+        'content-caps-m',
+        'content-caps-s',
+        'content-caps-xs',
+      ],
+      description: 'Typography variant (inherited from Typography.Text)',
+    },
+    weight: {
+      control: 'select',
+      options: ['regular', 'semibold', 'bold'],
+      description: 'Font weight (inherited from Typography.Text)',
+    },
+    color: contentColorArgType,
+    disabled: {
+      control: 'boolean',
+      description: 'When true, shows not-allowed cursor and disabled color',
+    },
+    noUnderline: {
+      control: 'boolean',
+      description: 'When true, removes the underline decoration',
+    },
+    onPress: {
+      description: 'Click/press handler (automatically removed when disabled=true)',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: 'body-m',
+    weight: 'regular',
+    color: '$content.accent',
+    disabled: false,
+    noUnderline: false,
+    children: 'This is a link',
+    onPress: () => alert('Link clicked!'),
+  },
+};

package/src/system/content/typography/TypographyLink.tsx

@@ -0,0 +1,38 @@
+import type { GetProps } from '@tamagui/core';
+import { styled } from '@tamagui/core';
+import { TypographyBase } from './Typography';
+
+export const TypographyLink = styled(TypographyBase, {
+  name: 'TypographyLink',
+  role: 'link',
+  variants: {
+    disabled: {
+      true: {
+        cursor: 'not-allowed',
+        onPress: undefined,
+        color: '$content.disabled',
+        hoverStyle: undefined,
+      },
+      false: {
+        cursor: 'pointer',
+        hoverStyle: {
+          textDecorationLine: 'none',
+        },
+      },
+    },
+    noUnderline: {
+      true: {
+        textDecorationLine: 'none',
+      },
+      false: {
+        textDecorationLine: 'underline',
+      },
+    },
+  } as const,
+  defaultVariants: {
+    disabled: false,
+    noUnderline: false,
+  },
+});
+
+export type TypographyLinkProps = GetProps<typeof TypographyLink>;

package/src/system/content/typography/__snapshots__/TypographyLink.features.stories.tsx.snap

@@ -0,0 +1,229 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Content/TypographyLink/Features DisabledFalse 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="link"
+    style={
+      {
+        "fontFamily": "GTStandard",
+        "textDecorationLine": "underline",
+      }
+    }
+    suppressHighlighting={true}
+  >
+    Enabled link (clickable with pointer cursor)
+  </Text>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Content/TypographyLink/Features DisabledTrue 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    role="link"
+    style={
+      {
+        "color": "#A8A8A8",
+        "fontFamily": "GTStandard",
+        "textDecorationLine": "underline",
+      }
+    }
+    suppressHighlighting={true}
+  >
+    Disabled link (not-allowed cursor, onPress removed)
+  </Text>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Content/TypographyLink/Features NoUnderlineFalse 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="link"
+    style={
+      {
+        "fontFamily": "GTStandard",
+        "textDecorationLine": "underline",
+      }
+    }
+    suppressHighlighting={true}
+  >
+    Link with underline (default)
+  </Text>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Content/TypographyLink/Features NoUnderlineTrue 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    role="link"
+    style={
+      {
+        "fontFamily": "GTStandard",
+        "textDecorationLine": "none",
+      }
+    }
+    suppressHighlighting={true}
+  >
+    Link without underline
+  </Text>
+</RNCSafeAreaProvider>
+`;
+
+exports[`Bumper/Content/TypographyLink/Features StateHover 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 16,
+      }
+    }
+  >
+    <Text
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="link"
+      style={
+        {
+          "fontFamily": "GTStandard",
+          "textDecorationLine": "none",
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Forced hover state - underline removed (hoverStyle applied)
+    </Text>
+    <Text
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      role="link"
+      style={
+        {
+          "fontFamily": "GTStandard",
+          "textDecorationLine": "none",
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Forced hover state with noUnderline - no visual change
+    </Text>
+    <Text
+      role="link"
+      style={
+        {
+          "color": "#A8A8A8",
+          "fontFamily": "GTStandard",
+          "textDecorationLine": "underline",
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Forced hover state on disabled - underline removed (hoverStyle applied)
+    </Text>
+    <Text
+      role="link"
+      style={
+        {
+          "color": "#A8A8A8",
+          "fontFamily": "GTStandard",
+          "textDecorationLine": "none",
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Forced hover state with noUnderline on disabled - no visual change
+    </Text>
+  </View>
+</RNCSafeAreaProvider>
+`;