@ornikar/bumper 3.0.3 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",

package/src/shared/storybook/StoryTitle.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@tamagui/core';
-import { Typography } from '../../system/content/typography';
+import { InternalTypography } from '../../system/content/typography/Typography';
 
-export const StoryTitle = styled(Typography.Text, {
+export const StoryTitle = styled(InternalTypography, {
   variants: {
     level: {
       1: { variant: 'heading-xl', marginBottom: '$space.8' },

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

@@ -1,6 +1,6 @@
-import type { ColorTokens, GetProps, TamaguiComponent } from '@tamagui/core';
+import type { ColorTokens, TextStyle } from '@tamagui/core';
 import { Text, styled } from '@tamagui/core';
-import { type Except } from 'type-fest';
+import type { ReactNode } from 'react';
 import type { BodyFontVariants, HeadingFontVariants, LabelFontVariants } from '../../core/tokens/GTStandardFont';
 import { CONTENT_CAPS_VARIANTS, type ContentCapsVariants } from '../../core/tokens/GTStandardNarrowFont';
 import type { FontVariants } from '../../core/tokens/fonts';
@@ -17,7 +17,31 @@ import {
   useTypographyWeight,
 } from './utils/typographyContext';
 
-const InternalTypography = styled(Text, {
+interface TypographyWithoutMediaProps {
+  color?: ColorTokens;
+  textAlign?: TextStyle['textAlign'];
+  children: ReactNode;
+}
+
+export interface BodyProps extends TypographyWithoutMediaProps {
+  variant?: BodyFontVariants;
+  weight?: 'regular' | 'bold';
+}
+export interface HeadingLabelProps extends TypographyWithoutMediaProps {
+  variant: HeadingFontVariants | LabelFontVariants;
+  weight?: 'semibold';
+}
+export interface ContentCapsProps extends TypographyWithoutMediaProps {
+  variant: ContentCapsVariants;
+  weight?: 'bold';
+}
+
+export type TypographyTextProps =
+  | TamaguiMediaProps<BodyProps>
+  | TamaguiMediaProps<HeadingLabelProps>
+  | TamaguiMediaProps<ContentCapsProps>;
+
+const InternalTypographyBase = styled(Text, {
   fontFamily: '$GTStandard',
   color: '$content.base.hi',
   '$platform-web': {
@@ -54,41 +78,7 @@ const InternalTypography = styled(Text, {
   },
 });
 
-export type InternalTypographyProps = GetProps<typeof InternalTypography>;
-
-// Remove font-related style props from InternalTypography Props
-type TypographyExcludedFontStyleProps =
-  | 'fontFamily'
-  | 'fontSize'
-  | 'lineHeight'
-  | 'fontStyle'
-  | 'fontVariant'
-  | 'fontWeight'
-  | 'color';
-
-type TypographyPropsWithoutFontStyleProps = Except<InternalTypographyProps, TypographyExcludedFontStyleProps> & {
-  color?: ColorTokens;
-};
-
-export interface BodyProps extends TypographyPropsWithoutFontStyleProps {
-  variant?: BodyFontVariants;
-  weight?: 'regular' | 'bold';
-}
-export interface HeadingLabelProps extends TypographyPropsWithoutFontStyleProps {
-  variant: HeadingFontVariants | LabelFontVariants;
-  weight?: 'semibold';
-}
-export interface ContentCapsProps extends TypographyPropsWithoutFontStyleProps {
-  variant: ContentCapsVariants;
-  weight?: 'bold';
-}
-
-export type TypographyTextProps =
-  | TamaguiMediaProps<BodyProps>
-  | TamaguiMediaProps<HeadingLabelProps>
-  | TamaguiMediaProps<ContentCapsProps>;
-
-export const TypographyBase = InternalTypography.styleable<TypographyTextProps, TypographyTextProps>((props, ref) => {
+export const InternalTypography = InternalTypographyBase.styleable<TypographyTextProps>((props, ref) => {
   const typographyVariantAncestorValue = useTypographyVariant();
   const typographyWeightAncestorValue = useTypographyWeight();
   const typographyColorAncestorValue = useTypographyColor();
@@ -103,7 +93,7 @@ export const TypographyBase = InternalTypography.styleable<TypographyTextProps,
   const color = props.color || typographyColorAncestorValue || undefined;
 
   let content = (
-    <InternalTypography
+    <InternalTypographyBase
       ref={ref}
       {...props}
       {...(color ? { color } : undefined)}
@@ -138,8 +128,13 @@ export const TypographyBase = InternalTypography.styleable<TypographyTextProps,
   return content;
 });
 
-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 function TypographyBase(props: TypographyTextProps): ReactNode {
+  return <InternalTypography {...props} />;
+}
+
+export const createHeading = (level: number): ((props: TypographyTextProps) => ReactNode) => {
+  // eslint-disable-next-line func-names
+  return function (props: TypographyTextProps): ReactNode {
+    return <InternalTypography role="heading" aria-level={level} {...props} />;
+  };
 };

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

@@ -1,8 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { VStack } from '../../core/primitives/Stack';
-import { TypographyLink } from './TypographyLink';
+import type { BodyProps } from './Typography';
+import type { TypographyLinkProps } from './TypographyLink';
+import { InternalTypographyLink, TypographyLink } from './TypographyLink';
 
-const meta: Meta<typeof TypographyLink> = {
+const meta: Meta<Extract<TypographyLinkProps, BodyProps>> = {
   title: 'Bumper/Content/TypographyLink/Features',
   component: TypographyLink,
 };
@@ -45,18 +47,18 @@ export const NoUnderlineTrue: Story = {
 export const StateHover: Story = {
   render: () => (
     <VStack gap="$space.16">
-      <TypographyLink forceStyle="hover" onPress={() => alert('Link clicked!')}>
+      <InternalTypographyLink forceStyle="hover" onPress={() => alert('Link clicked!')}>
         Forced hover state - underline removed (hoverStyle applied)
-      </TypographyLink>
-      <TypographyLink noUnderline forceStyle="hover" onPress={() => alert('Link clicked!')}>
+      </InternalTypographyLink>
+      <InternalTypographyLink noUnderline forceStyle="hover" onPress={() => alert('Link clicked!')}>
         Forced hover state with noUnderline - no visual change
-      </TypographyLink>
-      <TypographyLink disabled forceStyle="hover" onPress={() => alert('Link clicked!')}>
+      </InternalTypographyLink>
+      <InternalTypographyLink 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!')}>
+      </InternalTypographyLink>
+      <InternalTypographyLink disabled noUnderline forceStyle="hover" onPress={() => alert('Link clicked!')}>
         Forced hover state with noUnderline on disabled - no visual change
-      </TypographyLink>
+      </InternalTypographyLink>
     </VStack>
   ),
 };

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

@@ -1,8 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
+import type { BodyProps } from './Typography';
+import type { TypographyLinkProps } from './TypographyLink';
 import { TypographyLink } from './TypographyLink';
 
-const meta: Meta<typeof TypographyLink> = {
+const meta: Meta<Extract<TypographyLinkProps, BodyProps>> = {
   title: 'Bumper/Content/TypographyLink',
   component: TypographyLink,
   tags: ['autodocs'],

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

@@ -1,8 +1,18 @@
-import type { GetProps } from '@tamagui/core';
 import { styled } from '@tamagui/core';
-import { TypographyBase } from './Typography';
+import type { ReactNode } from 'react';
+import type { TamaguiMediaProps } from '../../types';
+import type { TypographyTextProps } from './Typography';
+import { InternalTypography } from './Typography';
 
-export const TypographyLink = styled(TypographyBase, {
+export interface TypographyLinkWithoutMediaProps {
+  disabled?: boolean;
+  noUnderline?: boolean;
+  onPress: () => void;
+}
+
+export type TypographyLinkProps = TypographyTextProps & TamaguiMediaProps<TypographyLinkWithoutMediaProps>;
+
+export const InternalTypographyLink = styled(InternalTypography, {
   name: 'TypographyLink',
   role: 'link',
   variants: {
@@ -35,4 +45,6 @@ export const TypographyLink = styled(TypographyBase, {
   },
 });
 
-export type TypographyLinkProps = GetProps<typeof TypographyLink>;
+export function TypographyLink(props: TypographyLinkProps): ReactNode {
+  return <InternalTypographyLink {...props} />;
+}

package/src/system/content/typography/utils/getVariantAndWeightValues.tsx

@@ -1,11 +1,11 @@
 import { BODY_VARIANTS, HEADING_VARIANTS, LABEL_VARIANTS } from '../../../core/tokens/GTStandardFont';
 import { CONTENT_CAPS_VARIANTS } from '../../../core/tokens/GTStandardNarrowFont';
 import type { FontVariants } from '../../../core/tokens/fonts';
-import type { InternalTypographyProps, TypographyTextProps } from '../Typography';
+import type { TypographyTextProps } from '../Typography';
 import type { TypographyVariantContextValue, TypographyWeightContextValue } from './typographyContext';
 
 interface VariantAndWeightValues {
-  weight: InternalTypographyProps['weight'] | undefined;
+  weight: TypographyTextProps['weight'] | undefined;
   variant: FontVariants | undefined;
 }
 

package/src/system/content/typography/utils/typographyContext.ts

@@ -1,10 +1,10 @@
+import type { ColorTokens } from '@tamagui/core';
 import { createContext, useContext } from 'react';
 import type { FontVariants } from '../../../core/tokens/fonts';
-import type { TypographyTextProps } from '../Typography';
 
 export type TypographyVariantContextValue = FontVariants | null;
 export type TypographyWeightContextValue = 'regular' | 'bold' | 'semibold' | null;
-export type TypograhyColorContextValue = TypographyTextProps['color'] | null;
+export type TypograhyColorContextValue = ColorTokens | null;
 type TypographyContextValue = boolean;
 
 export const TypographyVariantContext = createContext<TypographyVariantContextValue>(null);

package/src/system/dataDisplays/Badge/Badge.tsx

@@ -1,9 +1,21 @@
-import { styled } from '@tamagui/core';
+import { styled, useProps } from '@tamagui/core';
 import type { ReactNode } from 'react';
-import { Typography } from '../../content/typography';
+import { InternalTypography } from '../../content/typography/Typography';
 import { Center } from '../../core/primitives/Center';
 import type { TamaguiMediaProps } from '../../types';
 
+export interface BadgeWithoutMediaProps {
+  /** The count to display. If undefined, it renders as a dot. */
+  count?: number;
+  /**
+   *  Maximum count to display. Shows "{max}+" when count exceeds max.
+   *  @default 9
+   */
+  maxCount?: number;
+}
+
+export type BadgeProps = TamaguiMediaProps<BadgeWithoutMediaProps>;
+
 const DOT_SIZE = 8;
 const MIN_COUNT_WIDTH = 16;
 
@@ -24,19 +36,9 @@ const BadgeCount = styled(BadgeBase, {
   paddingHorizontal: '$space.4',
 });
 
-export interface InternalBadgeProps {
-  /** The count to display. If undefined, it renders as a dot. */
-  count?: number;
-  /**
-   *  Maximum count to display. Shows "{max}+" when count exceeds max.
-   *  @default 9
-   */
-  maxCount?: number;
-}
-
-export type BadgeProps = TamaguiMediaProps<InternalBadgeProps>;
+export function Badge(props: BadgeProps): ReactNode {
+  const { count, maxCount = 9 } = useProps(props);
 
-export function Badge({ count, maxCount = 9 }: BadgeProps): ReactNode {
   if (count === undefined) {
     return <BadgeDot />;
   }
@@ -45,7 +47,7 @@ export function Badge({ count, maxCount = 9 }: BadgeProps): ReactNode {
 
   return (
     <BadgeCount>
-      <Typography.Text
+      <InternalTypography
         variant="content-caps-xs"
         weight="bold"
         color="$content.base.onContrasted.hi"
@@ -53,7 +55,7 @@ export function Badge({ count, maxCount = 9 }: BadgeProps): ReactNode {
         paddingBottom={1}
       >
         {displayCount}
-      </Typography.Text>
+      </InternalTypography>
     </BadgeCount>
   );
 }