@shipfox/react-ui 0.15.0 → 0.16.0

package/src/components/badge/status-badge.tsx

@@ -1,43 +0,0 @@
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-import {badgeVariants} from './badge';
-
-export type StatusBadgeProps = ComponentProps<'span'> & {
-  variant?: StatusVariant;
-  dotClassName?: string;
-};
-
-type StatusVariant = 'neutral' | 'info' | 'feature' | 'success' | 'warning' | 'error';
-
-const dotVariantStyles: Record<StatusVariant, string> = {
-  neutral: 'bg-tag-neutral-icon',
-  info: 'bg-tag-blue-icon',
-  feature: 'bg-tag-purple-icon',
-  success: 'bg-tag-success-icon',
-  warning: 'bg-tag-warning-icon',
-  error: 'bg-tag-error-icon',
-};
-
-export function StatusBadge({
-  className,
-  variant = 'neutral',
-  children,
-  dotClassName,
-  ...props
-}: StatusBadgeProps) {
-  return (
-    <span
-      className={cn(badgeVariants({variant, size: '2xs', radius: 'default'}), 'gap-6', className)}
-      {...props}
-    >
-      <span
-        className={cn(
-          'size-8.5 rounded-2 shrink-0',
-          dotVariantStyles[variant as StatusVariant],
-          dotClassName,
-        )}
-      />
-      {children}
-    </span>
-  );
-}

package/src/components/badge/user-badge.tsx

@@ -1,34 +0,0 @@
-import {Avatar} from 'components/avatar';
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-
-export type UserBadgeProps = ComponentProps<'button'> & {
-  name: string;
-  avatarSrc?: string;
-  avatarFallback?: string;
-};
-
-export function UserBadge({className, name, avatarSrc, avatarFallback, ...props}: UserBadgeProps) {
-  return (
-    <button
-      type="button"
-      className={cn(
-        'inline-flex items-center gap-6 rounded-full px-6 py-2 text-xs font-medium leading-20',
-        'bg-background-components-base hover:bg-background-components-hover active:bg-background-components-pressed',
-        'text-foreground-neutral-base transition-colors',
-        'border border-border-neutral-base-component',
-        'h-28',
-        className,
-      )}
-      {...props}
-    >
-      <Avatar
-        className="size-16 shrink-0"
-        content="image"
-        src={avatarSrc}
-        fallback={avatarFallback}
-      />
-      <span className="whitespace-nowrap">{name}</span>
-    </button>
-  );
-}

package/src/components/button/button-link.stories.tsx

@@ -1,86 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {ButtonLink} from './button-link';
-
-const meta = {
-  title: 'Components/Button/ButtonLink',
-  component: ButtonLink,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['base', 'interactive', 'muted', 'subtle'],
-    },
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'xl'],
-    },
-    underline: {control: 'boolean'},
-    asChild: {control: 'boolean'},
-  },
-  args: {
-    children: 'Label',
-    variant: 'base',
-    size: 'sm',
-    underline: false,
-    href: '#',
-  },
-} satisfies Meta<typeof ButtonLink>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Variants: Story = {
-  render: (args) => (
-    <div className="flex gap-16 items-center">
-      <ButtonLink {...args} variant="base">
-        Base
-      </ButtonLink>
-      <ButtonLink {...args} variant="interactive">
-        Interactive
-      </ButtonLink>
-      <ButtonLink {...args} variant="muted">
-        Muted
-      </ButtonLink>
-      <ButtonLink {...args} variant="subtle">
-        Subtle
-      </ButtonLink>
-    </div>
-  ),
-};
-
-export const WithUnderline: Story = {
-  render: (args) => (
-    <div className="flex gap-16 items-center">
-      <ButtonLink {...args} variant="base" underline>
-        Base
-      </ButtonLink>
-      <ButtonLink {...args} variant="interactive" underline>
-        Interactive
-      </ButtonLink>
-      <ButtonLink {...args} variant="muted" underline>
-        Muted
-      </ButtonLink>
-      <ButtonLink {...args} variant="subtle" underline>
-        Subtle
-      </ButtonLink>
-    </div>
-  ),
-};
-
-export const WithIcons: Story = {
-  render: (args) => (
-    <div className="flex gap-16 items-center">
-      <ButtonLink {...args} iconLeft="addLine">
-        Icon Left
-      </ButtonLink>
-      <ButtonLink {...args} iconRight="chevronRight">
-        Icon Right
-      </ButtonLink>
-      <ButtonLink {...args} iconLeft="addLine" iconRight="chevronRight">
-        Both Icons
-      </ButtonLink>
-    </div>
-  ),
-};

package/src/components/button/button-link.tsx

@@ -1,76 +0,0 @@
-import {Slot} from '@radix-ui/react-slot';
-import {cva, type VariantProps} from 'class-variance-authority';
-import {Icon, type IconName} from 'components/icon';
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-
-export const buttonLinkVariants = cva(
-  'inline-flex items-center justify-center gap-4 whitespace-nowrap transition-colors cursor-pointer disabled:pointer-events-none outline-none font-medium',
-  {
-    variants: {
-      variant: {
-        base: 'text-foreground-neutral-base hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',
-        interactive:
-          'text-foreground-highlight-interactive hover:text-foreground-highlight-interactive-hover focus-visible:text-foreground-highlight-interactive disabled:text-foreground-neutral-disabled',
-        muted:
-          'text-foreground-neutral-muted hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',
-        subtle:
-          'text-foreground-neutral-subtle hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',
-      },
-      size: {
-        xs: 'text-xs',
-        sm: 'text-sm',
-        md: 'text-md',
-        xl: 'text-xl',
-      },
-      underline: {
-        true: 'underline decoration-solid [text-underline-position:from-font]',
-        false: '',
-      },
-    },
-    defaultVariants: {
-      variant: 'base',
-      size: 'sm',
-      underline: false,
-    },
-  },
-);
-
-const iconSizeMap = {
-  xs: 14,
-  sm: 14,
-  md: 16,
-  xl: 20,
-} as const;
-
-export function ButtonLink({
-  className,
-  variant,
-  size = 'sm',
-  underline,
-  asChild = false,
-  children,
-  iconLeft,
-  iconRight,
-  ...props
-}: ComponentProps<'a'> &
-  VariantProps<typeof buttonLinkVariants> & {
-    asChild?: boolean;
-    iconLeft?: IconName;
-    iconRight?: IconName;
-  }) {
-  const Comp = asChild ? Slot : 'a';
-  const iconSize = iconSizeMap[size as keyof typeof iconSizeMap];
-
-  return (
-    <Comp
-      data-slot="button-link"
-      className={cn(buttonLinkVariants({variant, size, underline, className}))}
-      {...props}
-    >
-      {iconLeft && <Icon name={iconLeft} size={iconSize} />}
-      {children}
-      {iconRight && <Icon name={iconRight} size={iconSize} />}
-    </Comp>
-  );
-}

package/src/components/button/button.stories.tsx

@@ -1,138 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Code} from 'components/typography';
-import {Button} from './button';
-
-const variantOptions = [
-  'primary',
-  'secondary',
-  'danger',
-  'success',
-  'transparent',
-  'transparentMuted',
-] as const;
-const sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;
-
-const meta = {
-  title: 'Components/Button',
-  component: Button,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: variantOptions,
-    },
-    size: {
-      control: 'select',
-      options: sizeOptions,
-    },
-    asChild: {control: 'boolean'},
-    isLoading: {control: 'boolean'},
-  },
-  args: {
-    children: 'Click me',
-    variant: 'primary',
-    size: 'md',
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Variants: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-32">
-      {sizeOptions.map((size) => (
-        <table key={size} className="w-fit border-separate border-spacing-x-32 border-spacing-y-16">
-          <thead>
-            <tr>
-              <th>{size}</th>
-              <th>Default</th>
-              <th>Hover</th>
-              <th>Focus</th>
-              <th>Disabled</th>
-            </tr>
-          </thead>
-          <tbody>
-            {variantOptions.map((variant) => (
-              <tr key={variant}>
-                <td>
-                  <Code variant="label" className="text-foreground-neutral-subtle">
-                    {variant}
-                  </Code>
-                </td>
-                <td>
-                  <Button {...args} variant={variant} size={size}>
-                    Click me
-                  </Button>
-                </td>
-                <td>
-                  <Button {...args} variant={variant} className="hover" size={size}>
-                    Click me
-                  </Button>
-                </td>
-                <td>
-                  <Button {...args} variant={variant} className="focus" size={size}>
-                    Click me
-                  </Button>
-                </td>
-                <td>
-                  <Button {...args} variant={variant} disabled size={size}>
-                    Click me
-                  </Button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      ))}
-    </div>
-  ),
-};
-
-Variants.parameters = {
-  pseudo: {
-    hover: '.hover',
-    focusVisible: '.focus',
-  },
-};
-
-export const Icons: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-16">
-      <div>
-        <Button {...args} iconLeft="google">
-          Click me
-        </Button>
-      </div>
-      <div>
-        <Button {...args} iconRight="microsoft">
-          Click me
-        </Button>
-      </div>
-      <div>
-        <Button {...args} iconLeft="google" iconRight="microsoft">
-          Click me
-        </Button>
-      </div>
-    </div>
-  ),
-};
-
-export const Loading: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-16">
-      <div>
-        <Button {...args} isLoading>
-          Loading...
-        </Button>
-      </div>
-      <div>
-        <Button {...args} isLoading iconLeft="google">
-          Loading with left icon
-        </Button>
-      </div>
-    </div>
-  ),
-};

package/src/components/button/button.tsx

@@ -1,91 +0,0 @@
-import {Slot} from '@radix-ui/react-slot';
-import {cva, type VariantProps} from 'class-variance-authority';
-import {Icon, type IconName} from 'components/icon';
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-
-export const buttonVariants = cva(
-  'rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors cursor-pointer disabled:pointer-events-none shrink-0 outline-none',
-  {
-    variants: {
-      variant: {
-        primary:
-          'bg-background-button-inverted-default text-foreground-contrast-primary shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',
-        secondary:
-          'bg-background-button-neutral-default text-foreground-neutral-base shadow-button-neutral hover:bg-background-button-neutral-hover active:bg-background-button-neutral-pressed disabled:bg-background-neutral-disabled focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled disabled:shadow-none',
-        danger:
-          'bg-background-button-danger-default text-foreground-neutral-on-color shadow-button-danger hover:bg-background-button-danger-hover active:bg-background-button-danger-pressed focus-visible:shadow-button-danger-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',
-        success:
-          'bg-background-button-success-default text-foreground-neutral-on-color shadow-button-success hover:bg-background-button-success-hover active:bg-background-button-success-pressed focus-visible:shadow-button-success-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',
-        transparent:
-          'bg-background-button-transparent-default text-foreground-neutral-base hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',
-        transparentMuted:
-          'bg-background-button-transparent-default text-foreground-neutral-muted hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',
-      },
-      size: {
-        '2xs': 'h-20 px-6 text-xs gap-4',
-        xs: 'h-24 px-6 text-xs gap-4',
-        sm: 'h-28 px-8 text-sm gap-6',
-        md: 'h-32 px-10 text-md gap-8',
-        lg: 'h-36 px-12 text-lg gap-8',
-        xl: 'h-40 px-12 text-xl gap-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'primary',
-      size: 'md',
-    },
-  },
-);
-
-const iconSizeMap: Record<NonNullable<VariantProps<typeof buttonVariants>['size']>, string> = {
-  '2xs': 'size-14',
-  xs: 'size-16',
-  sm: 'size-20',
-  md: 'size-20',
-  lg: 'size-20',
-  xl: 'size-20',
-};
-
-export function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  children,
-  iconLeft,
-  iconRight,
-  isLoading = false,
-  disabled,
-  ...props
-}: ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-    iconLeft?: IconName;
-    iconRight?: IconName;
-    isLoading?: boolean;
-  }) {
-  const Comp = asChild ? Slot : 'button';
-  const resolvedSize = (size ?? 'md') as NonNullable<VariantProps<typeof buttonVariants>['size']>;
-  const iconSize = iconSizeMap[resolvedSize];
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({variant, size, className}))}
-      disabled={disabled || isLoading}
-      aria-busy={isLoading}
-      aria-live={isLoading ? 'polite' : undefined}
-      {...(asChild ? {'aria-disabled': disabled || isLoading} : {})}
-      {...props}
-    >
-      {isLoading ? (
-        <Icon name="spinner" className={iconSize} />
-      ) : (
-        iconLeft && <Icon name={iconLeft} className={iconSize} />
-      )}
-      {children}
-      {iconRight && <Icon name={iconRight} className={iconSize} />}
-    </Comp>
-  );
-}

package/src/components/button/icon-button.stories.tsx

@@ -1,228 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Code} from 'components/typography';
-import {IconButton} from './icon-button';
-
-const variantOptions = ['primary', 'transparent'] as const;
-const sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;
-const radiusOptions = ['rounded', 'full'] as const;
-
-const meta = {
-  title: 'Components/Button/IconButton',
-  component: IconButton,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: variantOptions,
-    },
-    size: {
-      control: 'select',
-      options: sizeOptions,
-    },
-    radius: {
-      control: 'select',
-      options: radiusOptions,
-    },
-    muted: {control: 'boolean'},
-    asChild: {control: 'boolean'},
-  },
-  args: {
-    icon: 'addLine',
-    variant: 'primary',
-    size: 'md',
-    radius: 'rounded',
-    muted: false,
-  },
-} satisfies Meta<typeof IconButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Variants: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-32">
-      {sizeOptions.map((size) => (
-        <div key={size} className="flex flex-col gap-16">
-          <Code variant="label" className="text-foreground-neutral-subtle">
-            Size: {size}
-          </Code>
-          {radiusOptions.map((radius) => (
-            <table
-              key={radius}
-              className="w-fit border-separate border-spacing-x-32 border-spacing-y-16"
-            >
-              <thead>
-                <tr>
-                  <th>{radius}</th>
-                  <th>Default</th>
-                  <th>Hover</th>
-                  <th>Focus</th>
-                  <th>Disabled</th>
-                </tr>
-              </thead>
-              <tbody>
-                {variantOptions.map((variant) => (
-                  <tr key={variant}>
-                    <td>
-                      <Code variant="label" className="text-foreground-neutral-subtle">
-                        {variant}
-                      </Code>
-                    </td>
-                    <td>
-                      <IconButton
-                        {...args}
-                        icon="addLine"
-                        aria-label="Add"
-                        variant={variant}
-                        size={size}
-                        radius={radius}
-                      />
-                    </td>
-                    <td>
-                      <IconButton
-                        {...args}
-                        icon="addLine"
-                        aria-label="Add"
-                        variant={variant}
-                        className="hover"
-                        size={size}
-                        radius={radius}
-                      />
-                    </td>
-                    <td>
-                      <IconButton
-                        {...args}
-                        icon="addLine"
-                        aria-label="Add"
-                        variant={variant}
-                        className="focus"
-                        size={size}
-                        radius={radius}
-                      />
-                    </td>
-                    <td>
-                      <IconButton
-                        {...args}
-                        icon="addLine"
-                        aria-label="Add"
-                        variant={variant}
-                        disabled
-                        size={size}
-                        radius={radius}
-                      />
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          ))}
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-Variants.parameters = {
-  pseudo: {
-    hover: '.hover',
-    focusVisible: '.focus',
-  },
-};
-
-export const Muted: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-16">
-      <div className="flex gap-16 items-center">
-        <Code variant="label">Normal:</Code>
-        <IconButton {...args} icon="addLine" aria-label="Add" />
-        <IconButton {...args} icon="addLine" aria-label="Add" variant="transparent" />
-      </div>
-      <div className="flex gap-16 items-center">
-        <Code variant="label">Muted:</Code>
-        <IconButton {...args} icon="addLine" aria-label="Add" muted />
-        <IconButton {...args} icon="addLine" aria-label="Add" variant="transparent" muted />
-      </div>
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  render: ({children: _children, ...args}) => (
-    <div className="flex flex-col gap-16">
-      <div className="flex gap-16 items-center">
-        <Code variant="label">Rounded:</Code>
-        {sizeOptions.map((size) => (
-          <IconButton
-            {...args}
-            key={size}
-            icon="addLine"
-            aria-label="Add"
-            size={size}
-            radius="rounded"
-          />
-        ))}
-      </div>
-      <div className="flex gap-16 items-center">
-        <Code variant="label">Full:</Code>
-        {sizeOptions.map((size) => (
-          <IconButton
-            {...args}
-            key={size}
-            icon="addLine"
-            aria-label="Add"
-            size={size}
-            radius="full"
-          />
-        ))}
-      </div>
-    </div>
-  ),
-};
-
-export const Loading: Story = {
-  render: ({children: _children, ...args}) => (
-    <div className="flex flex-col gap-32">
-      <div className="flex flex-col gap-16">
-        <Code variant="label">Loading by Size:</Code>
-        <div className="flex gap-16 items-center">
-          {sizeOptions.map((size) => (
-            <div key={size} className="flex flex-col gap-8 items-center">
-              <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-                {size}
-              </Code>
-              <IconButton {...args} icon="addLine" aria-label="Loading" size={size} isLoading />
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="flex flex-col gap-16">
-        <Code variant="label">Loading by Variant:</Code>
-        <div className="flex gap-16 items-center">
-          {variantOptions.map((variant) => (
-            <div key={variant} className="flex flex-col gap-8 items-center">
-              <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-                {variant}
-              </Code>
-              <IconButton
-                {...args}
-                icon="addLine"
-                aria-label="Loading"
-                variant={variant}
-                isLoading
-              />
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="flex flex-col gap-16">
-        <Code variant="label">Normal vs Loading:</Code>
-        <div className="flex gap-16 items-center">
-          <IconButton {...args} icon="addLine" aria-label="Add" />
-          <IconButton {...args} icon="addLine" aria-label="Loading" isLoading />
-        </div>
-      </div>
-    </div>
-  ),
-};