@ornikar/bumper 3.14.1 → 4.0.0

package/src/system/{actions/IconButton/IconButton.tsx → buttons/ButtonIcon/ButtonIcon.tsx}

@@ -5,16 +5,16 @@ import type { ViewProps } from '../../core/primitives/View';
 import type { PropsToTamaguiVariants, TamaguiMediaProps } from '../../types';
 import { InternalButton } from '../Button/Button';
 import { ButtonBadge } from '../Button/components/ButtonBadge';
-import { ButtonIcon } from '../Button/components/ButtonIcon';
+import { ButtonIcon as ButtonIconCompound } from '../Button/components/ButtonIcon';
 import { context } from '../Button/context';
 import type { ButtonWithoutMediaProps } from '../Button/types';
 
-export interface IconButtonWithoutMediaProps extends Except<ButtonWithoutMediaProps, 'stretch'> {}
+export interface ButtonIconWithoutMediaProps extends Except<ButtonWithoutMediaProps, 'stretch'> {}
 
-export type IconButtonProps = TamaguiMediaProps<IconButtonWithoutMediaProps>;
+export type ButtonIconProps = TamaguiMediaProps<ButtonIconWithoutMediaProps>;
 
-export const InternalIconButtonFrame = styled(InternalButton, {
-  name: 'IconButton',
+export const InternalButtonIconFrame = styled(InternalButton, {
+  name: 'ButtonIcon',
   context,
 
   variants: {
@@ -32,14 +32,14 @@ export const InternalIconButtonFrame = styled(InternalButton, {
         height: 48,
       },
     },
-  } as const satisfies PropsToTamaguiVariants<IconButtonWithoutMediaProps, ViewProps>,
+  } as const satisfies PropsToTamaguiVariants<ButtonIconWithoutMediaProps, ViewProps>,
 });
 
-function InternalIconButton(props: IconButtonProps): ReactNode {
-  return <InternalIconButtonFrame {...props} />;
+function InternalButtonIcon(props: ButtonIconProps): ReactNode {
+  return <InternalButtonIconFrame {...props} />;
 }
 
-export const IconButton = withStaticProperties(InternalIconButton, {
-  Icon: ButtonIcon,
+export const ButtonIcon = withStaticProperties(InternalButtonIcon, {
+  Icon: ButtonIconCompound,
   Badge: ButtonBadge,
 });

package/src/system/{actions/IconButton/__snapshots__/IconButton.features.stories.tsx.snap → buttons/ButtonIcon/__snapshots__/ButtonIcon.features.stories.tsx.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Bumper/Actions/IconButton/Features Disabled 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features Disabled 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -248,7 +248,7 @@ exports[`Bumper/Actions/IconButton/Features Disabled 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/IconButton/Features Loading 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features Loading 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -1206,7 +1206,7 @@ exports[`Bumper/Actions/IconButton/Features Loading 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/IconButton/Features OnContrasted 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features OnContrasted 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -1520,7 +1520,7 @@ exports[`Bumper/Actions/IconButton/Features OnContrasted 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/IconButton/Features Responsive 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features Responsive 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -1597,7 +1597,7 @@ exports[`Bumper/Actions/IconButton/Features Responsive 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/IconButton/Features Sizes 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features Sizes 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -1746,7 +1746,7 @@ exports[`Bumper/Actions/IconButton/Features Sizes 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/IconButton/Features StateFocusVisible 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features StateFocusVisible 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -2020,7 +2020,7 @@ exports[`Bumper/Actions/IconButton/Features StateFocusVisible 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/IconButton/Features StateHover 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features StateHover 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -2294,7 +2294,7 @@ exports[`Bumper/Actions/IconButton/Features StateHover 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/IconButton/Features StatePress 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features StatePress 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -2568,7 +2568,7 @@ exports[`Bumper/Actions/IconButton/Features StatePress 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/IconButton/Features Types 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features Types 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -2842,7 +2842,7 @@ exports[`Bumper/Actions/IconButton/Features Types 1`] = `
 </RNCSafeAreaProvider>
 `;
 
-exports[`Bumper/Actions/IconButton/Features WithBadge 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features WithBadge 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={

package/src/system/{actions/IconButton/__snapshots__/IconButton.stories.tsx.snap → buttons/ButtonIcon/__snapshots__/ButtonIcon.stories.tsx.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Bumper/Actions/IconButton Default 1`] = `
+exports[`Bumper/Buttons/ButtonIcon Default 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={

package/src/system/{actions/IconButton/__snapshots_web__/IconButton.features.stories.tsx.snap → buttons/ButtonIcon/__snapshots_web__/ButtonIcon.features.stories.tsx.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Bumper/Actions/IconButton/Features Disabled 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features Disabled 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -92,7 +92,7 @@ exports[`Bumper/Actions/IconButton/Features Disabled 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/IconButton/Features Loading 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features Loading 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -372,7 +372,7 @@ exports[`Bumper/Actions/IconButton/Features Loading 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/IconButton/Features OnContrasted 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features OnContrasted 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -473,7 +473,7 @@ exports[`Bumper/Actions/IconButton/Features OnContrasted 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/IconButton/Features Responsive 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features Responsive 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -512,7 +512,7 @@ exports[`Bumper/Actions/IconButton/Features Responsive 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/IconButton/Features Sizes 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features Sizes 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -570,7 +570,7 @@ exports[`Bumper/Actions/IconButton/Features Sizes 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/IconButton/Features StateFocusVisible 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features StateFocusVisible 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -662,7 +662,7 @@ exports[`Bumper/Actions/IconButton/Features StateFocusVisible 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/IconButton/Features StateHover 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features StateHover 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -754,7 +754,7 @@ exports[`Bumper/Actions/IconButton/Features StateHover 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/IconButton/Features StatePress 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features StatePress 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -846,7 +846,7 @@ exports[`Bumper/Actions/IconButton/Features StatePress 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/IconButton/Features Types 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features Types 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"
@@ -934,7 +934,7 @@ exports[`Bumper/Actions/IconButton/Features Types 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Bumper/Actions/IconButton/Features WithBadge 1`] = `
+exports[`Bumper/Buttons/ButtonIcon/Features WithBadge 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"

package/src/system/{actions/IconButton/__snapshots_web__/IconButton.stories.tsx.snap → buttons/ButtonIcon/__snapshots_web__/ButtonIcon.stories.tsx.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Bumper/Actions/IconButton Default 1`] = `
+exports[`Bumper/Buttons/ButtonIcon Default 1`] = `
 <DocumentFragment>
   <div
     class="css-view-g5y9jx r-flex-13awgt0"

package/dist/definitions/system/actions/IconButton/IconButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/system/actions/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAExC,OAAO,KAAK,EAA0B,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAE7E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAE7D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAE/D,MAAM,WAAW,2BAA4B,SAAQ,MAAM,CAAC,uBAAuB,EAAE,SAAS,CAAC;CAAG;AAElG,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC,2BAA2B,CAAC,CAAC;AAE7E,eAAO,MAAM,uBAAuB;;;;;;;8CAoBlC,CAAC;AAEH,iBAAS,kBAAkB,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,CAE7D;AAED,eAAO,MAAM,UAAU;;;CAGrB,CAAC"}

package/src/system/actions/IconButton/IconButton.features.stories.tsx

@@ -1,194 +0,0 @@
-import { StarIcon } from '@ornikar/kitt-icons/ornicons';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from '../../content/typography';
-import { HStack, VStack } from '../../core/primitives/Stack';
-import { View } from '../../core/primitives/View';
-import { IconButton, InternalIconButtonFrame } from './IconButton';
-
-const meta: Meta<typeof IconButton> = {
-  title: 'Bumper/Actions/IconButton/Features',
-  component: IconButton,
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Types: Story = {
-  render: () => (
-    <HStack gap="$space.16" alignItems="center" flexWrap="wrap">
-      <IconButton type="primary">
-        <IconButton.Icon icon={<StarIcon />} />
-      </IconButton>
-      <IconButton type="secondary">
-        <IconButton.Icon icon={<StarIcon />} />
-      </IconButton>
-      <IconButton type="tertiary">
-        <IconButton.Icon icon={<StarIcon />} />
-      </IconButton>
-      <IconButton type="danger">
-        <IconButton.Icon icon={<StarIcon />} />
-      </IconButton>
-    </HStack>
-  ),
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <HStack gap="$space.16" alignItems="center">
-      <IconButton size="large">
-        <IconButton.Icon icon={<StarIcon />} />
-      </IconButton>
-      <IconButton size="small">
-        <IconButton.Icon icon={<StarIcon />} />
-      </IconButton>
-    </HStack>
-  ),
-};
-
-export const WithBadge: Story = {
-  render: () => (
-    <HStack gap="$space.16" alignItems="center">
-      <IconButton type="primary">
-        <IconButton.Icon icon={<StarIcon />} />
-        <IconButton.Badge count={3} />
-      </IconButton>
-      <IconButton type="primary">
-        <IconButton.Icon icon={<StarIcon />} />
-        <IconButton.Badge />
-      </IconButton>
-      <IconButton type="secondary">
-        <IconButton.Icon icon={<StarIcon />} />
-        <IconButton.Badge count={99} maxCount={99} />
-      </IconButton>
-    </HStack>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <HStack gap="$space.16" alignItems="center" flexWrap="wrap">
-      <IconButton disabled type="primary">
-        <IconButton.Icon icon={<StarIcon />} />
-      </IconButton>
-      <IconButton disabled type="secondary">
-        <IconButton.Icon icon={<StarIcon />} />
-      </IconButton>
-      <IconButton disabled type="tertiary">
-        <IconButton.Icon icon={<StarIcon />} />
-      </IconButton>
-      <IconButton disabled type="danger">
-        <IconButton.Icon icon={<StarIcon />} />
-      </IconButton>
-    </HStack>
-  ),
-};
-
-export const Loading: Story = {
-  render: () => (
-    <HStack gap="$space.16" alignItems="center" flexWrap="wrap">
-      <IconButton isLoading type="primary">
-        <IconButton.Icon icon={<StarIcon />} />
-      </IconButton>
-      <IconButton isLoading type="secondary">
-        <IconButton.Icon icon={<StarIcon />} />
-      </IconButton>
-      <IconButton isLoading type="tertiary">
-        <IconButton.Icon icon={<StarIcon />} />
-      </IconButton>
-      <IconButton isLoading type="danger">
-        <IconButton.Icon icon={<StarIcon />} />
-      </IconButton>
-    </HStack>
-  ),
-};
-
-export const OnContrasted: Story = {
-  render: () => (
-    <View backgroundColor="$bg.accent.default" padding="$space.16" borderRadius="$radius.m">
-      <VStack gap="$space.16">
-        <Typography.Text variant="label-l" color="$content.base.onContrasted.hi">
-          On contrasted background
-        </Typography.Text>
-        <HStack gap="$space.16" alignItems="center" flexWrap="wrap">
-          <IconButton isOnContrasted type="primary">
-            <IconButton.Icon icon={<StarIcon />} />
-          </IconButton>
-          <IconButton isOnContrasted type="secondary">
-            <IconButton.Icon icon={<StarIcon />} />
-          </IconButton>
-          <IconButton isOnContrasted type="tertiary">
-            <IconButton.Icon icon={<StarIcon />} />
-          </IconButton>
-          <IconButton isOnContrasted type="danger">
-            <IconButton.Icon icon={<StarIcon />} />
-          </IconButton>
-        </HStack>
-      </VStack>
-    </View>
-  ),
-};
-
-export const StateHover: Story = {
-  render: () => (
-    <HStack gap="$space.16" alignItems="center" flexWrap="wrap">
-      <InternalIconButtonFrame type="primary" forceStyle="hover">
-        <IconButton.Icon icon={<StarIcon />} />
-      </InternalIconButtonFrame>
-      <InternalIconButtonFrame type="secondary" forceStyle="hover">
-        <IconButton.Icon icon={<StarIcon />} />
-      </InternalIconButtonFrame>
-      <InternalIconButtonFrame type="tertiary" forceStyle="hover">
-        <IconButton.Icon icon={<StarIcon />} />
-      </InternalIconButtonFrame>
-      <InternalIconButtonFrame type="danger" forceStyle="hover">
-        <IconButton.Icon icon={<StarIcon />} />
-      </InternalIconButtonFrame>
-    </HStack>
-  ),
-};
-
-export const StatePress: Story = {
-  render: () => (
-    <HStack gap="$space.16" alignItems="center" flexWrap="wrap">
-      <InternalIconButtonFrame type="primary" forceStyle="press">
-        <IconButton.Icon icon={<StarIcon />} />
-      </InternalIconButtonFrame>
-      <InternalIconButtonFrame type="secondary" forceStyle="press">
-        <IconButton.Icon icon={<StarIcon />} />
-      </InternalIconButtonFrame>
-      <InternalIconButtonFrame type="tertiary" forceStyle="press">
-        <IconButton.Icon icon={<StarIcon />} />
-      </InternalIconButtonFrame>
-      <InternalIconButtonFrame type="danger" forceStyle="press">
-        <IconButton.Icon icon={<StarIcon />} />
-      </InternalIconButtonFrame>
-    </HStack>
-  ),
-};
-
-export const StateFocusVisible: Story = {
-  render: () => (
-    <HStack gap="$space.16" alignItems="center" flexWrap="wrap">
-      <InternalIconButtonFrame type="primary" forceStyle="focusVisible">
-        <IconButton.Icon icon={<StarIcon />} />
-      </InternalIconButtonFrame>
-      <InternalIconButtonFrame type="secondary" forceStyle="focusVisible">
-        <IconButton.Icon icon={<StarIcon />} />
-      </InternalIconButtonFrame>
-      <InternalIconButtonFrame type="tertiary" forceStyle="focusVisible">
-        <IconButton.Icon icon={<StarIcon />} />
-      </InternalIconButtonFrame>
-      <InternalIconButtonFrame type="danger" forceStyle="focusVisible">
-        <IconButton.Icon icon={<StarIcon />} />
-      </InternalIconButtonFrame>
-    </HStack>
-  ),
-};
-
-export const Responsive: Story = {
-  render: () => (
-    <IconButton size="small" $medium={{ size: 'large' }}>
-      <IconButton.Icon icon={<StarIcon />} />
-    </IconButton>
-  ),
-};