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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "2.8.0",
+  "version": "2.8.1-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",
@@ -28,7 +28,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.0",
-    "@tamagui/core": "1.144.2"
+    "@ornikar/kitt-icons": "14.3.2-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0",
+    "@tamagui/core": "1.144.2",
+    "@tamagui/image": "1.144.2",
+    "@tamagui/scroll-view": "1.144.2"
   },
   "peerDependencies": {
     "@storybook/preview-api": ">=8.6.15",
@@ -49,8 +52,9 @@
   },
   "devDependencies": {
     "@babel/core": "7.27.1",
+    "@phosphor-icons/core": "2.1.1",
     "@testing-library/dom": "10.4.1",
-    "@testing-library/react": "16.3.1",
+    "@testing-library/react": "16.3.2",
     "@testing-library/react-native": "13.3.3",
     "@types/react": "18.3.27",
     "react": "18.3.1",

package/src/index.ts

@@ -4,8 +4,12 @@ export { BumperProvider } from './system/core/provider/BumperProvider';
 // Primitives
 export type { CenterProps } from './system/core/primitives/Center';
 export { Center } from './system/core/primitives/Center';
+export type { ImageProps } from './system/core/primitives/Image/Image';
+export { Image } from './system/core/primitives/Image/Image';
 export type { PressableProps } from './system/core/primitives/Pressable';
 export { Pressable } from './system/core/primitives/Pressable';
+export type { ScrollViewProps } from './system/core/primitives/ScrollView/ScrollView';
+export { ScrollView } from './system/core/primitives/ScrollView/ScrollView';
 export type { HStackProps, StackProps, VStackProps } from './system/core/primitives/Stack';
 export { HStack, Stack, VStack } from './system/core/primitives/Stack';
 export type { ViewProps } from './system/core/primitives/View';
@@ -14,6 +18,7 @@ export { View } from './system/core/primitives/View';
 // Typography
 export type { TypographyTextProps } from './system/content/typography/Typography';
 export { Typography } from './system/content/typography/Typography';
+export type { TypographyIconProps } from './system/content/typography/TypographyIcon';
 
 // Breakpoints
 export { useBreakpointValue } from './system/core/breakpoints/hooks/useBreakpointValue';

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

@@ -0,0 +1,116 @@
+import {
+  CheckCircleRegularIcon,
+  InfoRegularIcon,
+  StarRegularIcon,
+  WarningRegularIcon,
+} 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 { Icon } from './Icon';
+
+const meta: Meta<typeof Icon> = {
+  title: 'Bumper/Content/Icon/Features',
+  component: Icon,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Sizes: Story = {
+  render: () => (
+    <HStack gap="$space.16" alignItems="center">
+      <VStack alignItems="center" gap="$space.8">
+        <Icon icon={<StarRegularIcon />} size="$size.16" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          16
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <Icon icon={<StarRegularIcon />} size="$size.20" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          20
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <Icon icon={<StarRegularIcon />} size="$size.24" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          24
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <Icon icon={<StarRegularIcon />} size="$size.32" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          32
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <Icon icon={<StarRegularIcon />} size="$size.48" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          48
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <Icon icon={<StarRegularIcon />} size="$size.64" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          64
+        </Typography.Text>
+      </VStack>
+    </HStack>
+  ),
+};
+
+export const Colors: Story = {
+  render: () => (
+    <HStack gap="$space.16" alignItems="center">
+      <VStack alignItems="center" gap="$space.8">
+        <Icon icon={<StarRegularIcon />} size="$size.24" color="$content.base.hi" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          base.hi
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <Icon icon={<StarRegularIcon />} size="$size.24" color="$content.base.mid" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          base.mid
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <Icon icon={<StarRegularIcon />} size="$size.24" color="$content.base.low" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          base.low
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <Icon icon={<StarRegularIcon />} size="$size.24" color="$content.accent" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          accent
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <Icon icon={<CheckCircleRegularIcon />} size="$size.24" color="$content.success" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          success
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <Icon icon={<WarningRegularIcon />} size="$size.24" color="$content.warning" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          warning
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <Icon icon={<WarningRegularIcon />} size="$size.24" color="$content.danger" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          danger
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <Icon icon={<InfoRegularIcon />} size="$size.24" color="$content.info" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          info
+        </Typography.Text>
+      </VStack>
+    </HStack>
+  ),
+};

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

@@ -0,0 +1,44 @@
+import { StarRegularIcon } from '@ornikar/kitt-icons/phosphor';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from './Icon';
+
+const meta: Meta<typeof Icon> = {
+  title: 'Bumper/Content/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)',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: <StarRegularIcon />,
+    size: '$size.20',
+    color: '$content.base.hi',
+  },
+};

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

@@ -0,0 +1,43 @@
+import type { ColorTokens, GetProps, WithMediaProps } from '@tamagui/core';
+import { View, styled, useStyle } from '@tamagui/core';
+import type { ReactElement, ReactNode } from 'react';
+import { cloneElement } from 'react';
+
+const IconContainer = styled(View, {
+  name: 'Icon',
+  variants: {
+    size: {
+      '...size': (size, { tokens }) => {
+        return {
+          width: tokens.size[size],
+          height: tokens.size[size],
+        };
+      },
+    },
+  } as const,
+});
+
+type IconContainerProps = GetProps<typeof IconContainer>;
+
+interface InternalIconProps {
+  icon: ReactElement;
+  color?: ColorTokens;
+  size?: IconContainerProps['size'];
+  testID?: IconContainerProps['testID'];
+  /** @ignore */
+  alignSelf?: IconContainerProps['alignSelf'];
+}
+
+export type IconProps = InternalIconProps & WithMediaProps<InternalIconProps>;
+
+export function Icon({ icon, color = '$content.base.hi', size = '$size.20', testID, alignSelf }: IconProps): ReactNode {
+  const style = useStyle({ color });
+
+  const clonedIcon = cloneElement(icon, { color: style.color });
+
+  return (
+    <IconContainer size={size} testID={testID} alignSelf={alignSelf}>
+      {clonedIcon}
+    </IconContainer>
+  );
+}