@shipfox/react-ui 0.14.0 → 0.16.0

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

@@ -1,95 +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 iconButtonVariants = cva(
-  '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-tag-neutral-icon 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',
-        transparent:
-          'bg-background-button-transparent-default text-tag-neutral-icon 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': 'w-20 h-20 text-xs',
-        xs: 'w-24 h-24 text-xs',
-        sm: 'w-28 h-28 text-sm',
-        md: 'w-32 h-32 text-md',
-        lg: 'w-36 h-36 text-lg',
-        xl: 'w-40 h-40 text-xl',
-      },
-      radius: {
-        rounded: 'rounded-6',
-        full: 'rounded-full',
-      },
-      muted: {
-        true: 'opacity-60',
-        false: '',
-      },
-    },
-    defaultVariants: {
-      variant: 'primary',
-      size: 'md',
-      radius: 'rounded',
-      muted: false,
-    },
-  },
-);
-
-const spinnerSizeMap: Record<
-  NonNullable<VariantProps<typeof iconButtonVariants>['size']>,
-  string
-> = {
-  '2xs': 'size-8',
-  xs: 'size-10',
-  sm: 'size-12',
-  md: 'size-14',
-  lg: 'size-16',
-  xl: 'size-18',
-};
-
-export function IconButton({
-  className,
-  variant,
-  size,
-  radius,
-  muted,
-  asChild = false,
-  children,
-  icon,
-  isLoading = false,
-  disabled,
-  ...props
-}: ComponentProps<'button'> &
-  VariantProps<typeof iconButtonVariants> & {
-    asChild?: boolean;
-    icon?: IconName;
-    isLoading?: boolean;
-  }) {
-  const Comp = asChild ? Slot : 'button';
-  const spinnerSize = spinnerSizeMap[size ?? 'md'];
-
-  return (
-    <Comp
-      data-slot="icon-button"
-      className={cn(iconButtonVariants({variant, size, radius, muted}), className)}
-      disabled={disabled || isLoading}
-      aria-busy={isLoading}
-      aria-live={isLoading ? 'polite' : undefined}
-      {...(asChild ? {'aria-disabled': disabled || isLoading} : {})}
-      {...props}
-    >
-      {isLoading ? (
-        <Icon name="spinner" className={spinnerSize} />
-      ) : icon ? (
-        <Icon name={icon} />
-      ) : (
-        children
-      )}
-    </Comp>
-  );
-}

package/src/components/button/index.ts

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

package/src/components/calendar/calendar.tsx

@@ -1,90 +0,0 @@
-import {Icon} from 'components/icon';
-import type {ComponentProps} from 'react';
-import {DayPicker} from 'react-day-picker';
-import {cn} from 'utils/cn';
-
-export type CalendarProps = ComponentProps<typeof DayPicker>;
-
-export function Calendar({className, classNames, showOutsideDays = true, ...props}: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn('p-16 transition-colors', className)}
-      classNames={{
-        months: 'flex flex-col sm:flex-row gap-24',
-        month: 'space-y-16 relative',
-        month_caption: 'flex items-center justify-center mb-8 px-4 relative h-32',
-        caption_label: 'text-sm font-medium text-foreground-neutral-base',
-        nav: 'flex items-center gap-4 fixed left-0 top-16 w-full z-10',
-        button_previous: cn(
-          'size-32 bg-transparent p-0 absolute left-16 top-0',
-          'inline-flex items-center justify-center rounded-6',
-          'text-foreground-neutral-base',
-          'hover:bg-background-button-transparent-hover',
-          'active:bg-background-button-transparent-pressed',
-          'transition-colors outline-none',
-          'focus-visible:shadow-border-interactive-with-active',
-          'disabled:pointer-events-none disabled:opacity-50',
-        ),
-        button_next: cn(
-          'size-32 bg-transparent p-0 absolute right-16 top-0',
-          'inline-flex items-center justify-center rounded-6',
-          'text-foreground-neutral-base',
-          'hover:bg-background-button-transparent-hover',
-          'active:bg-background-button-transparent-pressed',
-          'transition-colors outline-none',
-          'focus-visible:shadow-border-interactive-with-active',
-          'disabled:pointer-events-none disabled:opacity-50',
-        ),
-        month_grid: 'w-full border-collapse mt-8',
-        weekdays: 'flex mb-8',
-        weekday:
-          'text-foreground-neutral-subtle text-xs font-medium w-36 h-32 flex items-center justify-center',
-        week: 'flex mt-4',
-        day: cn(
-          'relative text-center size-36 p-0 text-sm font-normal [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
-          '[&:last-child[data-selected=true]_button]:rounded-r-6',
-          props.showWeekNumber
-            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-6'
-            : '[&:first-child[data-selected=true]_button]:rounded-l-6',
-        ),
-        day_button: cn(
-          'size-36 p-0 text-sm font-normal rounded-6',
-          'inline-flex items-center justify-center',
-          'hover:bg-background-button-transparent-hover',
-          'focus-visible:shadow-border-interactive-with-active',
-          'transition-colors outline-none',
-          'aria-selected:opacity-100',
-        ),
-        range_start: 'day-range-start rounded-6',
-        range_end: 'day-range-end rounded-6',
-        selected: cn(
-          'bg-foreground-highlight-interactive/80 !text-foreground-neutral-base font-medium rounded-6',
-          'hover:bg-foreground-highlight-interactive-hover/80',
-          'focus:bg-foreground-highlight-interactive/80',
-        ),
-        today: cn(
-          'bg-background-field-base text-foreground-neutral-base font-medium rounded-6',
-          'border border-border-neutral-base',
-        ),
-        outside: 'day-outside text-foreground-neutral-muted',
-        disabled: 'text-foreground-neutral-disabled opacity-30 cursor-not-allowed',
-        range_middle: cn(
-          'aria-selected:bg-foreground-highlight-interactive/10 aria-selected:text-foreground-neutral-base',
-          'rounded-none',
-          'first:rounded-l-6 first:rounded-r-none',
-          'last:rounded-r-6 last:rounded-l-none',
-        ),
-        hidden: 'invisible',
-        ...classNames,
-      }}
-      components={{
-        Chevron: ({orientation}) => {
-          const iconName = orientation === 'left' ? 'arrowLeftSLine' : 'arrowRightSLine';
-          return <Icon name={iconName} className="size-20" />;
-        },
-      }}
-      {...props}
-    />
-  );
-}

package/src/components/calendar/index.ts

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

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

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

@@ -1,92 +0,0 @@
-import {buttonLinkVariants} from 'components/button/button-link';
-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}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  onClick={link.onClick}
-                  className={cn(
-                    'text-sm leading-20 font-medium text-foreground-highlight-interactive',
-                    'hover:text-foreground-highlight-interactive-hover transition-colors',
-                    linkClassName,
-                  )}
-                >
-                  {link.label}
-                </a>
-              ) : (
-                <button
-                  type="button"
-                  onClick={link.onClick}
-                  className={cn(
-                    buttonLinkVariants({variant: 'interactive', size: 'sm'}),
-                    linkClassName,
-                  )}
-                >
-                  {link.label}
-                </button>
-              )}
-              {index < links.length - 1 && (separator ?? defaultSeparator)}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}