@shipfox/react-ui 0.15.0 → 0.17.0

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>
-  );
-}

package/src/components/checkbox/checkbox.stories.tsx

@@ -1,391 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Code, Header} from 'components/typography';
-import {Checkbox, CheckboxLabel, CheckboxLinks} from '.';
-
-const meta = {
-  title: 'Components/Checkbox',
-  component: Checkbox,
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-    },
-    disabled: {control: 'boolean'},
-    checked: {control: 'boolean'},
-  },
-  args: {
-    size: 'md',
-    disabled: false,
-  },
-} satisfies Meta<typeof Checkbox>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-32">
-      <div className="flex flex-col gap-16">
-        <Header variant="h4">Controlled Checkbox</Header>
-        <Code variant="label" className="text-foreground-neutral-subtle">
-          Use the controls below to change the checkbox state
-        </Code>
-        <Checkbox {...args} />
-      </div>
-
-      <div className="flex flex-col gap-32">
-        <Header variant="h4">All States</Header>
-        {(['sm', 'md', 'lg'] as const).map((size) => (
-          <div key={size} className="flex flex-wrap gap-16">
-            <Header variant="h4">Size: {size}</Header>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Unchecked
-              </Code>
-              <Checkbox size={size} />
-            </div>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Checked
-              </Code>
-              <Checkbox size={size} checked />
-            </div>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Indeterminate
-              </Code>
-              <Checkbox size={size} checked="indeterminate" />
-            </div>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Disabled (Unchecked)
-              </Code>
-              <Checkbox size={size} disabled />
-            </div>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Disabled (Checked)
-              </Code>
-              <Checkbox size={size} checked disabled />
-            </div>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Focus
-              </Code>
-              <Checkbox size={size} className="focus" />
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  ),
-  parameters: {
-    pseudo: {
-      focusVisible: '.focus',
-    },
-  },
-};
-
-export const CheckboxLabelStory: StoryObj = {
-  render: () => (
-    <div className="flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base">
-      <Code variant="label" className="text-foreground-neutral-subtle">
-        CHECKBOX LABEL - WITHOUT BORDER
-      </Code>
-      <div className="flex flex-col gap-16">
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Default - Unchecked
-          </Code>
-          <CheckboxLabel
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Hover - Unchecked
-          </Code>
-          <CheckboxLabel
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            className="hover"
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Default - Checked
-          </Code>
-          <CheckboxLabel
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Hover - Checked
-          </Code>
-          <CheckboxLabel
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked
-            className="hover"
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Default - Indeterminate
-          </Code>
-          <CheckboxLabel
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked="indeterminate"
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Disabled - Checked
-          </Code>
-          <CheckboxLabel
-            label="Label"
-            checked
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            disabled
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Disabled - Unchecked
-          </Code>
-          <CheckboxLabel
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            disabled
-          />
-        </div>
-      </div>
-
-      <Code variant="label" className="text-foreground-neutral-subtle mt-32">
-        CHECKBOX LABEL - WITH BORDER
-      </Code>
-      <div className="flex flex-col gap-16">
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Default - Unchecked
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-default-unchecked"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            border
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Hover - Unchecked
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-hover-unchecked"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            border
-            className="hover"
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Focus - Unchecked
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-focus-unchecked"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            border
-            className="focus"
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Default - Checked
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-default-checked"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked
-            border
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Hover - Checked
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-hover-checked"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked
-            border
-            className="hover"
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Focus - Checked
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-focus-checked"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked
-            border
-            className="focus"
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Default - Indeterminate
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-default-indeterminate"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked="indeterminate"
-            border
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Disabled - Unchecked
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-disabled-unchecked"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            disabled
-            border
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Disabled - Checked
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-disabled-checked"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked
-            disabled
-            border
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Disabled - Indeterminate
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-disabled-indeterminate"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked="indeterminate"
-            disabled
-            border
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-CheckboxLabelStory.parameters = {
-  pseudo: {
-    hover: '.hover',
-    focusVisible: '.focus',
-  },
-};
-
-export const CheckboxLinksStory: StoryObj = {
-  args: {
-    disabled: true,
-  },
-
-  render: () => (
-    <div className="flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base">
-      <Code variant="label" className="text-foreground-neutral-subtle">
-        CHECKBOX LINKS
-      </Code>
-      <div className="flex flex-col gap-16">
-        <CheckboxLinks
-          id="checkbox-links-default"
-          label="Accept policies"
-          links={[
-            {label: 'Terms of use', href: 'https://www.shipfox.io/legal/terms-of-service'},
-            {
-              label: 'Privacy Policy',
-              onClick: () =>
-                window.open(
-                  'https://www.shipfox.io/legal/privacy-policy',
-                  '_blank',
-                  'noopener,noreferrer',
-                ),
-            },
-          ]}
-        />
-        <CheckboxLinks
-          id="checkbox-links-checked"
-          label="Accept policies"
-          links={[
-            {label: 'Terms of use', href: 'https://www.shipfox.io/legal/terms-of-service'},
-            {
-              label: 'Privacy Policy',
-              onClick: () =>
-                window.open(
-                  'https://www.shipfox.io/legal/privacy-policy',
-                  '_blank',
-                  'noopener,noreferrer',
-                ),
-            },
-          ]}
-          checked
-        />
-      </div>
-    </div>
-  ),
-};

package/src/components/checkbox/checkbox.tsx

@@ -1,71 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import {cva, type VariantProps} from 'class-variance-authority';
-import {Icon} from 'components/icon';
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-
-export const checkboxVariants = cva(
-  'peer shrink-0 border-none transition-all duration-100 outline-none cursor-pointer',
-  {
-    variants: {
-      size: {
-        sm: 'size-16',
-        md: 'size-20',
-        lg: 'size-24',
-      },
-    },
-    defaultVariants: {
-      size: 'sm',
-    },
-  },
-);
-
-export type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root> &
-  VariantProps<typeof checkboxVariants>;
-
-export function Checkbox({
-  className,
-  size,
-  checked,
-  defaultChecked,
-  onCheckedChange,
-  ...props
-}: CheckboxProps) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      checked={checked}
-      defaultChecked={defaultChecked}
-      onCheckedChange={onCheckedChange}
-      className={cn(
-        checkboxVariants({size}),
-        // Unchecked state - default
-        'rounded-4 bg-checkbox-unchecked-bg shadow-checkbox-unchecked',
-        // Unchecked state - hover
-        'hover:bg-checkbox-unchecked-bg-hover',
-        // Unchecked state - focus
-        'focus-visible:shadow-checkbox-unchecked-focus',
-        // Checked state
-        'data-[state=checked]:bg-checkbox-checked-bg data-[state=checked]:text-foreground-neutral-on-color data-[state=checked]:shadow-checkbox-checked',
-        'data-[state=checked]:hover:bg-checkbox-checked-bg-hover',
-        'data-[state=checked]:focus-visible:shadow-checkbox-checked-focus',
-        // Indeterminate state
-        'data-[state=indeterminate]:bg-checkbox-indeterminate-bg data-[state=indeterminate]:text-foreground-neutral-on-color data-[state=indeterminate]:shadow-checkbox-indeterminate',
-        'data-[state=indeterminate]:hover:bg-checkbox-indeterminate-bg-hover',
-        'data-[state=indeterminate]:focus-visible:shadow-checkbox-indeterminate-focus',
-        // Disabled state
-        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
-        {checked === 'indeterminate' ? (
-          <Icon name="subtractLine" className="size-16" aria-hidden="true" />
-        ) : (
-          <Icon name="check" className="size-16" aria-hidden="true" />
-        )}
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  );
-}

package/src/components/checkbox/index.ts

@@ -1,3 +0,0 @@
-export * from './checkbox';
-export * from './checkbox-label';
-export * from './checkbox-links';