@shipfox/react-ui 0.15.0 → 0.16.0

package/src/components/badge/badge.stories.tsx

@@ -1,468 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Code} from 'components/typography';
-import React from 'react';
-import {Badge, IconBadge, StatusBadge, UserBadge} from '.';
-
-const meta = {
-  title: 'Components/Badge',
-  component: Badge,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const AllVariants: Story = {
-  render: () => (
-    <div className="flex flex-col gap-32">
-      {/* STATUS BADGE */}
-      <div>
-        <Code variant="label" className="mb-16">
-          Status Badge
-        </Code>
-        <div className="flex gap-16">
-          <StatusBadge variant="neutral">Badge</StatusBadge>
-          <StatusBadge variant="info">Badge</StatusBadge>
-          <StatusBadge variant="feature">Badge</StatusBadge>
-          <StatusBadge variant="success" dotClassName="size-5 rounded-full">
-            Badge
-          </StatusBadge>
-          <StatusBadge variant="warning">Badge</StatusBadge>
-          <StatusBadge variant="error">Badge</StatusBadge>
-        </div>
-      </div>
-
-      {/* USER BADGE */}
-      <div>
-        <Code variant="label" className="mb-16">
-          User Badge
-        </Code>
-        <div className="flex gap-16">
-          <UserBadge
-            name="Thierry Abalea"
-            avatarSrc="https://avatars.githubusercontent.com/u/1290899?v=4"
-          />
-          <UserBadge
-            name="Kyle Nguyen"
-            avatarSrc="https://avatars.githubusercontent.com/u/89263955?v=4"
-          />
-          <UserBadge
-            name="Noe Charmet"
-            avatarSrc="https://avatars.githubusercontent.com/u/59678972?v=4"
-          />
-        </div>
-      </div>
-
-      {/* ICON BADGE */}
-      <div>
-        <Code variant="label" className="mb-16">
-          Icon Badge
-        </Code>
-        <div className="flex gap-16">
-          <IconBadge variant="neutral" name="homeSmile" />
-          <IconBadge variant="info" name="homeSmile" />
-          <IconBadge variant="feature" name="homeSmile" />
-          <IconBadge variant="success" name="homeSmile" />
-          <IconBadge variant="primary" name="homeSmile" />
-          <IconBadge variant="error" name="homeSmile" />
-        </div>
-      </div>
-
-      {/* BADGE - 2XS SIZE */}
-      <div>
-        <Code variant="label" className="mb-16">
-          Badge - 2XS Size
-        </Code>
-        <div className="flex flex-col gap-16">
-          {/* Base */}
-          <div className="flex gap-16">
-            <Badge variant="neutral" size="2xs">
-              Badge
-            </Badge>
-            <Badge variant="info" size="2xs">
-              Badge
-            </Badge>
-            <Badge variant="feature" size="2xs">
-              Badge
-            </Badge>
-            <Badge variant="success" size="2xs">
-              Badge
-            </Badge>
-            <Badge variant="warning" size="2xs">
-              Badge
-            </Badge>
-            <Badge variant="error" size="2xs">
-              Badge
-            </Badge>
-          </div>
-
-          {/* With Right Icon */}
-          <div className="flex gap-16">
-            <Badge variant="neutral" size="2xs" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="info" size="2xs" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="feature" size="2xs" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="success" size="2xs" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="warning" size="2xs" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="error" size="2xs" iconRight="close">
-              Badge
-            </Badge>
-          </div>
-
-          {/* With Left Icon */}
-          <div className="flex gap-16">
-            <Badge variant="neutral" size="2xs" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="info" size="2xs" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="feature" size="2xs" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="success" size="2xs" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="warning" size="2xs" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="error" size="2xs" iconLeft="close">
-              Badge
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      {/* BADGE - XS SIZE */}
-      <div>
-        <Code variant="label" className="mb-16">
-          Badge - XS Size
-        </Code>
-        <div className="flex flex-col gap-16">
-          {/* Base */}
-          <div className="flex gap-16">
-            <Badge variant="neutral" size="xs">
-              Badge
-            </Badge>
-            <Badge variant="info" size="xs">
-              Badge
-            </Badge>
-            <Badge variant="feature" size="xs">
-              Badge
-            </Badge>
-            <Badge variant="success" size="xs">
-              Badge
-            </Badge>
-            <Badge variant="warning" size="xs">
-              Badge
-            </Badge>
-            <Badge variant="error" size="xs">
-              Badge
-            </Badge>
-          </div>
-
-          {/* With Right Icon */}
-          <div className="flex gap-16">
-            <Badge variant="neutral" size="xs" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="info" size="xs" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="feature" size="xs" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="success" size="xs" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="warning" size="xs" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="error" size="xs" iconRight="close">
-              Badge
-            </Badge>
-          </div>
-
-          {/* With Left Icon */}
-          <div className="flex gap-16">
-            <Badge variant="neutral" size="xs" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="info" size="xs" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="feature" size="xs" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="success" size="xs" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="warning" size="xs" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="error" size="xs" iconLeft="close">
-              Badge
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      {/* BADGE - ROUNDED */}
-      <div>
-        <Code variant="label" className="mb-16">
-          Badge - Rounded
-        </Code>
-        <div className="flex flex-col gap-16">
-          {/* Base - 2XS */}
-          <div className="flex gap-16">
-            <Badge variant="neutral" size="2xs" radius="rounded">
-              Badge
-            </Badge>
-            <Badge variant="info" size="2xs" radius="rounded">
-              Badge
-            </Badge>
-            <Badge variant="feature" size="2xs" radius="rounded">
-              Badge
-            </Badge>
-            <Badge variant="success" size="2xs" radius="rounded">
-              Badge
-            </Badge>
-            <Badge variant="warning" size="2xs" radius="rounded">
-              Badge
-            </Badge>
-            <Badge variant="error" size="2xs" radius="rounded">
-              Badge
-            </Badge>
-          </div>
-
-          {/* Base - XS */}
-          <div className="flex gap-16">
-            <Badge variant="neutral" size="xs" radius="rounded">
-              Badge
-            </Badge>
-            <Badge variant="info" size="xs" radius="rounded">
-              Badge
-            </Badge>
-            <Badge variant="feature" size="xs" radius="rounded">
-              Badge
-            </Badge>
-            <Badge variant="success" size="xs" radius="rounded">
-              Badge
-            </Badge>
-            <Badge variant="warning" size="xs" radius="rounded">
-              Badge
-            </Badge>
-            <Badge variant="error" size="xs" radius="rounded">
-              Badge
-            </Badge>
-          </div>
-
-          {/* With Right Icon - 2XS */}
-          <div className="flex gap-16">
-            <Badge variant="neutral" size="2xs" radius="rounded" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="info" size="2xs" radius="rounded" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="feature" size="2xs" radius="rounded" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="success" size="2xs" radius="rounded" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="warning" size="2xs" radius="rounded" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="error" size="2xs" radius="rounded" iconRight="close">
-              Badge
-            </Badge>
-          </div>
-
-          {/* With Right Icon - XS */}
-          <div className="flex gap-16">
-            <Badge variant="neutral" size="xs" radius="rounded" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="info" size="xs" radius="rounded" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="feature" size="xs" radius="rounded" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="success" size="xs" radius="rounded" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="warning" size="xs" radius="rounded" iconRight="close">
-              Badge
-            </Badge>
-            <Badge variant="error" size="xs" radius="rounded" iconRight="close">
-              Badge
-            </Badge>
-          </div>
-
-          {/* With Left Icon - 2XS */}
-          <div className="flex gap-16">
-            <Badge variant="neutral" size="2xs" radius="rounded" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="info" size="2xs" radius="rounded" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="feature" size="2xs" radius="rounded" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="success" size="2xs" radius="rounded" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="warning" size="2xs" radius="rounded" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="error" size="2xs" radius="rounded" iconLeft="close">
-              Badge
-            </Badge>
-          </div>
-
-          {/* With Left Icon - XS */}
-          <div className="flex gap-16">
-            <Badge variant="neutral" size="xs" radius="rounded" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="info" size="xs" radius="rounded" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="feature" size="xs" radius="rounded" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="success" size="xs" radius="rounded" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="warning" size="xs" radius="rounded" iconLeft="close">
-              Badge
-            </Badge>
-            <Badge variant="error" size="xs" radius="rounded" iconLeft="close">
-              Badge
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      {/* BETA BADGE */}
-      <div>
-        <Code variant="label" className="mb-16">
-          Beta Badge
-        </Code>
-        <div className="flex gap-16">
-          <Badge variant="info" size="2xs" radius="rounded">
-            Beta
-          </Badge>
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// Interactive badges with click handlers
-function InteractiveBadgesComponent() {
-  const [tags, setTags] = React.useState(['React', 'TypeScript', 'Next.js', 'Tailwind']);
-
-  const removeTag = (tagToRemove: string) => {
-    setTags(tags.filter((tag) => tag !== tagToRemove));
-  };
-
-  return (
-    <div className="flex flex-col gap-32">
-      {/* Removable tags */}
-      <div>
-        <Code variant="label" className="mb-16">
-          Interactive Badges - Removable Tags
-        </Code>
-        <div className="flex flex-wrap gap-8">
-          {tags.map((tag) => (
-            <Badge
-              key={tag}
-              variant="neutral"
-              size="xs"
-              radius="rounded"
-              iconRight="close"
-              onIconRightClick={() => removeTag(tag)}
-              iconRightAriaLabel={`Remove ${tag} tag`}
-            >
-              {tag}
-            </Badge>
-          ))}
-        </div>
-      </div>
-
-      {/* Different variants with interactive icons */}
-      <div>
-        <Code variant="label" className="mb-16">
-          Interactive Badges - Different Variants
-        </Code>
-        <div className="flex flex-wrap gap-8">
-          <Badge
-            variant="success"
-            size="xs"
-            iconRight="close"
-            onIconRightClick={() => alert('Success badge clicked!')}
-            iconRightAriaLabel="Remove success badge"
-          >
-            Completed
-          </Badge>
-          <Badge
-            variant="warning"
-            size="xs"
-            iconRight="close"
-            onIconRightClick={() => alert('Warning badge clicked!')}
-            iconRightAriaLabel="Remove warning badge"
-          >
-            Pending
-          </Badge>
-          <Badge
-            variant="error"
-            size="xs"
-            iconRight="close"
-            onIconRightClick={() => alert('Error badge clicked!')}
-            iconRightAriaLabel="Remove error badge"
-          >
-            Failed
-          </Badge>
-        </div>
-      </div>
-
-      {/* Non-interactive icons (static) */}
-      <div>
-        <Code variant="label" className="mb-16">
-          Static Icons (Non-interactive)
-        </Code>
-        <div className="flex flex-wrap gap-8">
-          <Badge variant="info" size="xs" iconLeft="info">
-            Information
-          </Badge>
-          <Badge variant="success" size="xs" iconLeft="check">
-            Verified
-          </Badge>
-          <Badge variant="feature" size="xs" iconLeft="money">
-            Premium
-          </Badge>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export const InteractiveBadges: Story = {
-  render: () => <InteractiveBadgesComponent />,
-};

package/src/components/badge/badge.tsx

@@ -1,147 +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 badgeVariants = cva(
-  'inline-flex select-none items-center justify-center font-medium transition-colors shrink-0 leading-20',
-  {
-    variants: {
-      variant: {
-        neutral:
-          'bg-tag-neutral-bg text-tag-neutral-text border border-tag-neutral-border hover:bg-tag-neutral-bg-hover',
-        info: 'bg-tag-blue-bg text-tag-blue-text border border-tag-blue-border hover:bg-tag-blue-bg-hover',
-        feature:
-          'bg-tag-purple-bg text-tag-purple-text border border-tag-purple-border hover:bg-tag-purple-bg-hover',
-        success:
-          'bg-tag-success-bg text-tag-success-text border border-tag-success-border hover:bg-tag-success-bg-hover',
-        warning:
-          'bg-tag-warning-bg text-tag-warning-text border border-tag-warning-border hover:bg-tag-warning-bg-hover',
-        error:
-          'bg-tag-error-bg text-tag-error-text border border-tag-error-border hover:bg-tag-error-bg-hover',
-      },
-      size: {
-        '2xs': 'h-20 px-6 text-xs gap-4',
-        xs: 'h-24 px-8 text-xs gap-6',
-      },
-      radius: {
-        default: 'rounded-6',
-        rounded: 'rounded-full',
-      },
-    },
-    defaultVariants: {
-      variant: 'neutral',
-      size: '2xs',
-      radius: 'default',
-    },
-  },
-);
-
-export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
-
-type BaseBadgeProps = ComponentProps<'span'> &
-  VariantProps<typeof badgeVariants> & {
-    asChild?: boolean;
-  };
-
-type BadgePropsWithLeftClick = BaseBadgeProps & {
-  iconLeft: IconName;
-  onIconLeftClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  iconLeftAriaLabel: string;
-  iconRight?: IconName;
-  onIconRightClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  iconRightAriaLabel?: string;
-};
-
-type BadgePropsWithRightClick = BaseBadgeProps & {
-  iconRight: IconName;
-  onIconRightClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  iconRightAriaLabel: string;
-  iconLeft?: IconName;
-  onIconLeftClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  iconLeftAriaLabel?: string;
-};
-
-type BadgePropsWithBothClicks = BaseBadgeProps & {
-  iconLeft: IconName;
-  onIconLeftClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  iconLeftAriaLabel: string;
-  iconRight: IconName;
-  onIconRightClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  iconRightAriaLabel: string;
-};
-
-type BadgePropsWithoutClicks = BaseBadgeProps & {
-  iconLeft?: IconName;
-  iconRight?: IconName;
-  onIconLeftClick?: never;
-  onIconRightClick?: never;
-  iconLeftAriaLabel?: never;
-  iconRightAriaLabel?: never;
-};
-
-export type BadgeProps =
-  | BadgePropsWithLeftClick
-  | BadgePropsWithRightClick
-  | BadgePropsWithBothClicks
-  | BadgePropsWithoutClicks;
-
-export function Badge({
-  className,
-  variant,
-  size,
-  radius,
-  asChild = false,
-  children,
-  iconLeft,
-  iconRight,
-  onIconLeftClick,
-  onIconRightClick,
-  iconLeftAriaLabel,
-  iconRightAriaLabel,
-  ...props
-}: BadgeProps) {
-  const Comp = asChild ? Slot : 'span';
-
-  const renderIcon = (
-    iconName: IconName,
-    position: 'left' | 'right',
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void,
-    ariaLabel?: string,
-  ) => {
-    const isInteractive = Boolean(onClick);
-
-    if (isInteractive) {
-      if (!ariaLabel) {
-        // biome-ignore lint/suspicious/noConsole: Development warning for accessibility
-        console.warn(
-          `Badge: Missing aria-label for interactive ${position} icon. Please provide icon${position === 'left' ? 'Left' : 'Right'}AriaLabel prop.`,
-        );
-
-        return null;
-      }
-
-      return (
-        <button
-          type="button"
-          onClick={onClick}
-          className="inline-flex items-center justify-center transition-colors shrink-0 hover:opacity-70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-500"
-          aria-label={ariaLabel}
-        >
-          <Icon name={iconName} className="size-12" />
-        </button>
-      );
-    }
-
-    return <Icon name={iconName} className="size-12" />;
-  };
-
-  return (
-    <Comp className={cn(badgeVariants({variant, size, radius}), className)} {...props}>
-      {iconLeft && renderIcon(iconLeft, 'left', onIconLeftClick, iconLeftAriaLabel)}
-      {children}
-      {iconRight && renderIcon(iconRight, 'right', onIconRightClick, iconRightAriaLabel)}
-    </Comp>
-  );
-}

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

@@ -1,43 +0,0 @@
-import {Icon, type IconName} from 'components/icon';
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-
-export type IconBadgeVariant = 'neutral' | 'info' | 'feature' | 'success' | 'primary' | 'error';
-
-export type IconBadgeProps = ComponentProps<'span'> & {
-  variant?: IconBadgeVariant;
-  name?: IconName;
-};
-
-const variantStyles: Record<IconBadgeVariant, string> = {
-  neutral: 'bg-tag-neutral-bg border-tag-neutral-border',
-  info: 'bg-tag-blue-bg border-tag-blue-border',
-  feature: 'bg-tag-purple-bg border-tag-purple-border',
-  success: 'bg-tag-success-bg border-tag-success-border',
-  primary: 'bg-tag-warning-bg border-tag-warning-border',
-  error: 'bg-tag-error-bg border-tag-error-border',
-};
-
-const iconColorStyles: Record<IconBadgeVariant, string> = {
-  neutral: 'text-tag-neutral-icon',
-  info: 'text-tag-blue-icon',
-  feature: 'text-tag-purple-icon',
-  success: 'text-tag-success-icon',
-  primary: 'text-tag-warning-icon',
-  error: 'text-tag-error-icon',
-};
-
-export function IconBadge({className, variant = 'neutral', name, ...props}: IconBadgeProps) {
-  return (
-    <span
-      className={cn(
-        'inline-flex size-20 items-center justify-center rounded-6 border',
-        variantStyles[variant],
-        className,
-      )}
-      {...props}
-    >
-      {name && <Icon name={name} className={cn('shrink-0', iconColorStyles[variant])} size={12} />}
-    </span>
-  );
-}

package/src/components/badge/index.ts

@@ -1,4 +0,0 @@
-export * from './badge';
-export * from './icon-badge';
-export * from './status-badge';
-export * from './user-badge';