@shipfox/react-ui 0.3.0 → 0.4.0

package/src/components/badge/badge.tsx

@@ -0,0 +1,147 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,4 @@
+export {Badge, type BadgeProps, type BadgeVariant, badgeVariants} from './badge';
+export {IconBadge, type IconBadgeProps, type IconBadgeVariant} from './icon-badge';
+export {StatusBadge, type StatusBadgeProps} from './status-badge';
+export {UserBadge, type UserBadgeProps} from './user-badge';

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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,34 @@
+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.tsx → button/button.tsx}

@@ -1,8 +1,8 @@
 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';
-import {Icon, type IconName} from './icon/icon';
 
 export const buttonVariants = cva(
   'rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',

package/src/components/button/index.ts

@@ -0,0 +1 @@
+export * from './button';

package/src/components/checkbox/checkbox-label.tsx

@@ -0,0 +1,125 @@
+import {useId} from 'react';
+import {cn} from 'utils/cn';
+import {Icon} from '../icon/icon';
+import {Label} from '../label/label';
+import {Checkbox, type CheckboxProps} from './checkbox';
+
+export type CheckboxLabelProps = Omit<CheckboxProps, 'id'> & {
+  id?: string;
+  label: string;
+  optional?: boolean;
+  description?: string;
+  showInfoIcon?: boolean;
+  border?: boolean;
+  className?: string;
+  labelClassName?: string;
+  descriptionClassName?: string;
+};
+
+export function CheckboxLabel({
+  id,
+  label,
+  optional = false,
+  description,
+  showInfoIcon = false,
+  border = false,
+  className,
+  labelClassName,
+  descriptionClassName,
+  ...checkboxProps
+}: CheckboxLabelProps) {
+  const generateId = useId();
+  const checkboxId = id || generateId;
+  const isDisabled = checkboxProps.disabled ?? false;
+
+  const renderContent = (checkboxId: string) => (
+    <div className="flex flex-col gap-4 flex-1 min-w-0">
+      <div className="flex gap-4 items-center">
+        <Label
+          className={cn(
+            'text-sm leading-20 overflow-hidden text-ellipsis whitespace-nowrap',
+            isDisabled
+              ? 'font-normal text-foreground-neutral-subtle'
+              : 'font-medium text-foreground-neutral-base',
+            labelClassName,
+          )}
+          htmlFor={checkboxId}
+        >
+          {label}
+        </Label>
+        {optional && (
+          <span className="text-sm leading-20 font-regular text-foreground-neutral-muted whitespace-nowrap">
+            (Optional)
+          </span>
+        )}
+        {showInfoIcon && (
+          <Icon
+            name="info"
+            className="size-16 text-foreground-neutral-muted shrink-0"
+            aria-hidden="true"
+          />
+        )}
+      </div>
+      {description && (
+        <p
+          className={cn(
+            'text-sm leading-20',
+            isDisabled ? 'text-foreground-neutral-disabled' : 'text-foreground-neutral-subtle',
+            descriptionClassName,
+          )}
+        >
+          {description}
+        </p>
+      )}
+    </div>
+  );
+
+  if (border) {
+    return (
+      <Label
+        htmlFor={checkboxId}
+        className={cn(
+          // Base container styles with border
+          'flex items-start gap-10 rounded-8 p-8 transition-all duration-100',
+          // Unchecked state - default
+          'bg-checkbox-unchecked-bg shadow-checkbox-unchecked',
+          // Unchecked state - hover
+          'hover:bg-checkbox-unchecked-bg-hover',
+          // Unchecked state - focus
+          'has-data-[state=unchecked]:focus-visible:shadow-border-interactive-with-active',
+          // Checked state - default
+          'has-data-[state=checked]:bg-background-neutral-base has-data-[state=checked]:shadow-checkbox-checked',
+          // Checked state - hover
+          'has-data-[state=checked]:hover:bg-background-neutral-hover',
+          // Checked state - focus
+          'has-data-[state=checked]:focus-visible:shadow-checkbox-checked-focus',
+          // Indeterminate state - default
+          'has-data-[state=indeterminate]:bg-background-neutral-base has-data-[state=indeterminate]:shadow-checkbox-indeterminate',
+          // Indeterminate state - hover
+          'has-data-[state=indeterminate]:hover:bg-background-neutral-hover',
+          // Indeterminate state - focus
+          'has-data-[state=indeterminate]:focus-visible:shadow-checkbox-indeterminate-focus',
+          // Disabled state
+          isDisabled && 'opacity-50 cursor-not-allowed',
+          !isDisabled && 'cursor-pointer',
+          className,
+        )}
+      >
+        <span className="p-4">
+          <Checkbox id={checkboxId} {...checkboxProps} />
+        </span>
+        {renderContent(checkboxId)}
+      </Label>
+    );
+  }
+
+  // Without border variant
+  return (
+    <div className={cn('flex items-start gap-10', className)}>
+      <span className="p-2">
+        <Checkbox id={checkboxId} {...checkboxProps} />
+      </span>
+      {renderContent(checkboxId)}
+    </div>
+  );
+}

package/src/components/checkbox/checkbox-links.tsx

@@ -0,0 +1,90 @@
+import {Label} from 'components/label';
+import {type ReactNode, useId} from 'react';
+import {cn} from 'utils/cn';
+import {Checkbox, type CheckboxProps} from './checkbox';
+
+export type CheckboxLink = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+export type CheckboxLinksProps = Omit<CheckboxProps, 'id'> & {
+  id?: string;
+  label: string;
+  links: CheckboxLink[];
+  separator?: ReactNode;
+  className?: string;
+  labelClassName?: string;
+  linkClassName?: string;
+};
+
+export function CheckboxLinks({
+  id,
+  label,
+  links,
+  separator,
+  className,
+  labelClassName,
+  linkClassName,
+  ...checkboxProps
+}: CheckboxLinksProps) {
+  const generateId = useId();
+  const checkboxId = id || generateId;
+  const isDisabled = checkboxProps.disabled ?? false;
+  const defaultSeparator = (
+    <span className="size-3 rounded-full bg-foreground-neutral-muted" aria-hidden="true" />
+  );
+
+  return (
+    <div className={cn('flex gap-10 items-start', className)}>
+      <span className="p-2">
+        <Checkbox id={checkboxId} {...checkboxProps} />
+      </span>
+      <div className="flex flex-col gap-4 items-start flex-1">
+        <Label
+          htmlFor={checkboxId}
+          className={cn(
+            'text-sm leading-20 font-medium text-foreground-neutral-base',
+            isDisabled && 'cursor-not-allowed opacity-50',
+            labelClassName,
+          )}
+        >
+          {label}
+        </Label>
+        <div className="flex gap-6 items-center">
+          {links.map((link, index) => (
+            <div key={link.label} className="flex gap-6 items-center">
+              {link.href ? (
+                <a
+                  href={link.href}
+                  onClick={link.onClick}
+                  className={cn(
+                    'text-sm leading-20 font-medium text-foreground-highlight-interactive',
+                    'hover:text-foreground-highlight-interactive-hover',
+                    linkClassName,
+                  )}
+                >
+                  {link.label}
+                </a>
+              ) : (
+                <button
+                  type="button"
+                  onClick={link.onClick}
+                  className={cn(
+                    'text-sm leading-20 font-medium text-foreground-highlight-interactive',
+                    'hover:text-foreground-highlight-interactive-hover',
+                    linkClassName,
+                  )}
+                >
+                  {link.label}
+                </button>
+              )}
+              {index < links.length - 1 && (separator ?? defaultSeparator)}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}