@shipfox/react-ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,69 @@
+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 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,
+    },
+  },
+);
+
+export function IconButton({
+  className,
+  variant,
+  size,
+  radius,
+  muted,
+  asChild = false,
+  children,
+  icon,
+  ...props
+}: ComponentProps<'button'> &
+  VariantProps<typeof iconButtonVariants> & {
+    asChild?: boolean;
+    icon?: IconName;
+  }) {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      data-slot="icon-button"
+      className={cn(iconButtonVariants({variant, size, radius, muted}), className)}
+      {...props}
+    >
+      {icon ? <Icon name={icon} /> : children}
+    </Comp>
+  );
+}

package/src/components/button/index.ts

@@ -0,0 +1,3 @@
+export * from './button';
+export * from './button-link';
+export * from './icon-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>
+  );
+}

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

@@ -0,0 +1,375 @@
+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: '#'},
+            {label: 'Privacy Policy', href: '#'},
+          ]}
+        />
+        <CheckboxLinks
+          id="checkbox-links-checked"
+          label="Accept policies"
+          links={[
+            {label: 'Terms of use', href: '#'},
+            {label: 'Privacy Policy', href: '#'},
+          ]}
+          checked
+        />
+      </div>
+    </div>
+  ),
+};