@tui-cruises/mein-schiff-web-react-component-library 2.0.0-rc.1

package/src/components/core/Button/Button.tsx

@@ -0,0 +1,178 @@
+import { Icon, IconName } from '../../core/Icon';
+import {
+  ButtonHTMLAttributes,
+  ForwardRefRenderFunction,
+  forwardRef,
+} from 'react';
+import { twJoin, twMerge } from 'tailwind-merge';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import { Skeleton, SkeletonTextLines } from '../../core/Skeleton';
+import { LoadingSpinner } from '../../core/LoadingSpinner';
+import { DataAttributes } from '../../../helpers/types';
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  DataAttributes & {
+    fallback?: boolean;
+    asChild?: boolean;
+    variant?: 'primary' | 'secondary';
+    on?: 'white' | 'gray' | 'ocean' | 'image';
+    iconRight?: IconName;
+    iconLeft?: IconName;
+    hasFullWidthOnMobile?: boolean;
+    indicating?: boolean;
+  };
+
+const ButtonRenderFunction: ForwardRefRenderFunction<
+  HTMLButtonElement,
+  ButtonProps
+> = (props, ref) => {
+  const {
+    asChild,
+    className,
+    variant = 'primary',
+    on = 'white',
+    iconRight,
+    iconLeft,
+    fallback,
+    children,
+    disabled: disabledArg,
+    hasFullWidthOnMobile, // @revisit
+    indicating,
+    ...rest
+  } = props;
+
+  let disabled = indicating ? true : disabledArg;
+
+  const Element = asChild ? Slot : 'button';
+
+  if (fallback) {
+    return (
+      <Element
+        ref={ref as any}
+        disabled
+        className={twJoin(
+          'inline-flex appearance-none',
+          hasFullWidthOnMobile && 'w-full sm:w-auto',
+          className?.includes('w-full') && 'w-full',
+        )}
+      >
+        <Skeleton
+          className={twJoin(
+            'inline-flex h-[2.875rem] items-center px-8',
+            hasFullWidthOnMobile && 'w-full sm:w-auto',
+            className?.includes('w-full') && 'w-full',
+          )}
+        >
+          <div
+            className={twJoin(
+              'mx-auto max-w-full',
+              hasFullWidthOnMobile ? 'w-full sm:w-[150px]' : 'w-[150px]',
+            )}
+          >
+            <SkeletonTextLines number={1} />
+          </div>
+        </Skeleton>
+      </Element>
+    );
+  }
+
+  const buttonClassNames = twMerge(
+    'relative inline-flex appearance-none items-center justify-center gap-2 rounded-md border-none px-7 py-3.5 text-lg font-semibold !leading-normal transition-all md:text-base',
+    hasFullWidthOnMobile && 'w-full sm:w-auto',
+
+    // Variants
+    variant === 'primary' && [
+      // On white (default)
+      'bg-surface-primary-100 text-marine-high-emphasis',
+      'hover:bg-surface-primary-120 group-hover/button:bg-surface-primary-120',
+      'active:bg-surface-primary-120 group-active/button:bg-surface-primary-120',
+      'disabled:bg-surface-secondary-7',
+      disabled && 'bg-surface-secondary-7',
+
+      // On gray
+      on === 'gray' && 'disabled:bg-surface-white',
+      on === 'gray' && disabled && 'bg-surface-white',
+
+      // On ocean
+      on === 'ocean' && 'bg-surface-secondary-100 text-white',
+      on === 'ocean' &&
+        'hover:bg-surface-secondary-120 group-hover/button:bg-surface-secondary-120',
+      on === 'ocean' &&
+        'active:bg-surface-secondary-120 group-active/button:bg-surface-secondary-120',
+      on === 'ocean' && 'disabled:bg-surface-secondary-7',
+      on === 'ocean' && disabled && 'bg-surface-secondary-7',
+
+      // On image
+      on === 'image' && 'bg-surface-white',
+      on === 'image' &&
+        'hover:bg-surface-secondary-7 group-hover/button:bg-surface-secondary-7',
+      on === 'image' &&
+        'active:bg-surface-secondary-7 group-active/button:bg-surface-secondary-7',
+      on === 'image' && 'disabled:bg-surface-secondary-7',
+      on === 'image' && disabled && 'bg-surface-secondary-7',
+    ],
+
+    variant === 'secondary' && [
+      'bg-transparent',
+
+      // On white (default)
+      'text-marine-high-emphasis shadow-[inset_0_0_0_2px_theme(colors.stroke.primary-100)]',
+      'hover:shadow-[inset_0_0_0_4px_theme(colors.stroke.primary-100)] group-hover/button:shadow-[inset_0_0_0_4px_theme(colors.stroke.primary-100)]',
+      'active:shadow-[inset_0_0_0_4px_theme(colors.stroke.primary-100)] group-active:shadow-[inset_0_0_0_4px_theme(colors.stroke.primary-100)]',
+      'disabled:shadow-[inset_0_0_0_2px_theme(colors.stroke.secondary-7)]',
+      disabled && 'shadow-[inset_0_0_0_2px_theme(colors.stroke.secondary-7)]',
+
+      // On gray
+      on === 'gray' &&
+        'disabled:shadow-[inset_0_0_0_2px_theme(colors.stroke.white)]',
+      on === 'gray' &&
+        disabled &&
+        'shadow-[inset_0_0_0_2px_theme(colors.stroke.white)]',
+
+      // On ocean
+      on === 'ocean' && 'shadow-[inset_0_0_0_2px_theme(colors.stroke.white)]',
+      on === 'ocean' &&
+        'hover:shadow-[inset_0_0_0_4px_theme(colors.stroke.white)] group-hover/button:shadow-[inset_0_0_0_4px_theme(colors.stroke.white)]',
+      on === 'ocean' &&
+        'active:shadow-[inset_0_0_0_4px_theme(colors.stroke.white)] group-active:shadow-[inset_0_0_0_4px_theme(colors.stroke.white)]',
+      on === 'ocean' &&
+        'disabled:shadow-[inset_0_0_0_2px_theme(colors.stroke.secondary-7)]',
+      on === 'ocean' &&
+        disabled &&
+        'shadow-[inset_0_0_0_2px_theme(colors.stroke.secondary-7)]',
+    ],
+
+    // States
+    'active:transition-none',
+    'group-active/button:transition-none',
+    'focus:outline-none focus-visible:shadow-focus-state',
+    'disabled:!pointer-events-none disabled:text-secondary-marine-48',
+    disabled && '!pointer-events-none text-secondary-marine-48',
+  );
+
+  return (
+    <Element
+      className={twJoin(buttonClassNames, className)}
+      ref={ref}
+      {...rest}
+    >
+      {iconLeft && <Icon name={iconLeft} size="xs" />}
+      <Slottable>{children ?? ' '}</Slottable>
+      {!iconLeft && iconRight && <Icon name={iconRight} size="xs" />}
+
+      {indicating && (
+        <div
+          className={twJoin(
+            'absolute inset-0 flex items-center justify-center',
+          )}
+        >
+          <LoadingSpinner size="md" />
+        </div>
+      )}
+    </Element>
+  );
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ButtonRenderFunction,
+) as typeof ButtonRenderFunction;

package/src/components/core/Button/index.ts

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

package/src/components/core/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,71 @@
+import { forwardRef, ForwardRefRenderFunction, HTMLAttributes } from 'react';
+import { twJoin } from 'tailwind-merge';
+
+/**
+ * Properties for the `ButtonGroup` component.
+ *
+ * @property {string} [className] - Additional CSS classes for custom styling.
+ * @property {'horizontal' | 'vertical' | 'horizontal-end' | 'horizontal-center'} [orientation='horizontal']
+ * - Layout orientation of the button group.
+ * @property {boolean} [disabled] - If true, disables all buttons within the group.
+ */
+export type ButtonGroupProps = HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+  orientation?:
+    | 'horizontal'
+    | 'vertical'
+    | 'horizontal-end'
+    | 'horizontal-center';
+  disabled?: boolean;
+};
+
+const ButtonGroupRenderFunction: ForwardRefRenderFunction<
+  HTMLDivElement,
+  ButtonGroupProps
+> = (props, ref) => {
+  let {
+    className,
+    orientation = 'horizontal',
+    disabled,
+    children,
+    ...rest
+  } = props;
+
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      className={twJoin(
+        'flex flex-col gap-4 sm:items-center',
+        orientation === 'vertical' ? '' : 'gap-6 sm:flex-row',
+        orientation === 'horizontal-end' && 'justify-end gap-6 sm:flex-row',
+        orientation === 'horizontal-center' &&
+          'justify-center gap-6 sm:flex-row',
+        className,
+        disabled && 'pointer-events-none',
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+/**
+ * `ButtonGroup` component for grouping multiple buttons with customizable orientation and styling.
+ *
+ * This component provides a flexible layout for organizing buttons in a horizontal, vertical, end-aligned, or center-aligned manner.
+ *
+ * - Default orientation: `horizontal`.
+ * - Disabled state applies to all child buttons, preventing user interaction.
+ *
+ * @param {ButtonGroupProps} props - Properties to configure the `ButtonGroup`.
+ * @param {React.Ref<HTMLDivElement>} ref - Reference to the button group container.
+ * @returns {JSX.Element} The rendered button group.
+ */
+const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  ButtonGroupRenderFunction,
+);
+
+ButtonGroup.displayName = 'ButtonGroup';
+
+export { ButtonGroup };

package/src/components/core/ButtonGroup/index.ts

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

package/src/components/core/Calendar/Calendar.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { DayPicker, Matcher } from 'react-day-picker';
+import { de, enGB } from 'date-fns/locale';
+
+import { twJoin } from 'tailwind-merge';
+import { Icon } from '../../core/Icon';
+import { Locale as I18nLocale } from '@tuic/i18n';
+import { TextButton } from '../../core/TextButton';
+import { differenceInMonths } from 'date-fns';
+
+export type CalendarProps = Omit<
+  React.ComponentProps<typeof DayPicker>,
+  'locale' | 'fromDate'
+> & {
+  localeCode?: I18nLocale;
+  useShowMoreButtonOnMobile?: boolean;
+  showPrevMonthsButtonLabel?: string;
+  showNextMonthsButtonLabel?: string;
+  numberOfMonthsToShowMore?: number;
+  pastIsPickable?: boolean;
+};
+
+const DEFAULT_LOCALE: I18nLocale = 'de';
+
+/**
+ * Calendar integration
+ * Based on:
+ *  - https://ui.shadcn.com/docs/components/calendar
+ *  - https://ui.shadcn.com/docs/components/date-picker
+ *  - https://react-day-picker.js.org/basics/localization
+ */
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  localeCode = DEFAULT_LOCALE,
+  useShowMoreButtonOnMobile = false,
+  showPrevMonthsButtonLabel,
+  showNextMonthsButtonLabel,
+  numberOfMonthsToShowMore = 12,
+  numberOfMonths,
+  month,
+  defaultMonth,
+  fromMonth,
+  pastIsPickable = false,
+  toMonth,
+  ...props
+}: CalendarProps) {
+  const [usedLocale, setUsedLocale] = useState<Locale | undefined>(undefined);
+  const [currentMonth, setCurrentMonth] = useState<Date | undefined>(
+    useShowMoreButtonOnMobile ? (month ?? defaultMonth) : undefined,
+  );
+  const [currentNumberOfMonths, setCurrentNumberOfMonths] = useState<
+    number | undefined
+  >(numberOfMonths);
+  const [noMoreMonthsToAddBefore, setNoMoreMonthsToAddBefore] =
+    useState<boolean>(true);
+  const [noMoreMonthsToAddNext, setNoMoreMonthsToAddNext] =
+    useState<boolean>(true);
+
+  // @todo: Refactor "show more" logic for previous and next months...
+
+  const getAmountOfPreviousMonthsToLoad = (): number => {
+    if (
+      typeof currentMonth !== 'undefined' &&
+      typeof fromMonth !== 'undefined'
+    ) {
+      const startDate = new Date('2000-01-01');
+      startDate.setFullYear(fromMonth.getFullYear());
+      startDate.setMonth(fromMonth.getMonth());
+
+      const endDate = new Date('2000-01-01');
+      endDate.setFullYear(currentMonth.getFullYear());
+      endDate.setMonth(currentMonth.getMonth());
+
+      return differenceInMonths(endDate, startDate);
+    }
+    return 0;
+  };
+
+  const showPrevMonths = () => {
+    if (noMoreMonthsToAddBefore) {
+      return;
+    }
+
+    if (typeof currentNumberOfMonths !== 'undefined') {
+      const diff = getAmountOfPreviousMonthsToLoad();
+      if (diff < 0) {
+        return;
+      }
+
+      setCurrentMonth(fromMonth);
+      setCurrentNumberOfMonths(currentNumberOfMonths + diff);
+      setNoMoreMonthsToAddBefore(true);
+    }
+  };
+
+  const getAmountOfNextMonthsToLoad = (): number => {
+    if (typeof currentMonth !== 'undefined' && typeof toMonth !== 'undefined') {
+      const startDate = new Date('2000-01-01');
+      startDate.setFullYear(currentMonth.getFullYear());
+      startDate.setMonth(currentMonth.getMonth());
+
+      const endDate = new Date('2000-01-01');
+      endDate.setFullYear(toMonth.getFullYear());
+      endDate.setMonth(toMonth.getMonth());
+
+      return differenceInMonths(endDate, startDate) + 1;
+    }
+    return 0;
+  };
+
+  const showNextMonths = () => {
+    if (noMoreMonthsToAddNext) {
+      return;
+    }
+
+    if (typeof currentNumberOfMonths !== 'undefined') {
+      const diff = getAmountOfNextMonthsToLoad();
+      if (diff < 0) {
+        return;
+      }
+
+      let monthsToAdd = numberOfMonthsToShowMore;
+      while (currentNumberOfMonths + monthsToAdd > diff && monthsToAdd > 0) {
+        monthsToAdd--;
+      }
+
+      setCurrentNumberOfMonths(currentNumberOfMonths + monthsToAdd);
+
+      if (
+        currentNumberOfMonths + monthsToAdd >= getAmountOfNextMonthsToLoad() ||
+        monthsToAdd === 0 ||
+        monthsToAdd < numberOfMonthsToShowMore
+      ) {
+        setNoMoreMonthsToAddNext(true);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (month !== undefined) {
+      setCurrentMonth(month);
+    }
+  }, [month]);
+
+  useEffect(() => {
+    switch (localeCode) {
+      case 'en':
+        setUsedLocale(enGB);
+        break;
+      case 'de':
+      default:
+        setUsedLocale(de);
+    }
+  }, [localeCode]);
+
+  useEffect(() => {
+    if (useShowMoreButtonOnMobile) {
+      if (getAmountOfPreviousMonthsToLoad() > 0) {
+        setNoMoreMonthsToAddBefore(false);
+      }
+      if (getAmountOfNextMonthsToLoad() > 0) {
+        setNoMoreMonthsToAddNext(false);
+      }
+    }
+  }, [useShowMoreButtonOnMobile]);
+
+  const disabledMatchers: Matcher[] = [];
+  const today = new Date();
+  if (currentMonth && !pastIsPickable) {
+    const firstDayOfMonth = new Date(
+      currentMonth.getFullYear(),
+      currentMonth.getMonth(),
+      1,
+    );
+    const yesterday = new Date(
+      today.getFullYear(),
+      today.getMonth(),
+      today.getDate(),
+    );
+    let currentDate = new Date(firstDayOfMonth);
+    while (currentDate < yesterday) {
+      disabledMatchers.push(new Date(currentDate));
+      currentDate.setDate(currentDate.getDate() + 1);
+    }
+  }
+
+  if (props.disabled) {
+    const disabledNormalized = Array.isArray(props.disabled)
+      ? props.disabled
+      : [props.disabled];
+    disabledMatchers.push(...disabledNormalized);
+  }
+
+  return (
+    <>
+      {useShowMoreButtonOnMobile && !noMoreMonthsToAddBefore && (
+        <div className="py-4 text-center duration-300 animate-in fade-in lg:hidden">
+          <TextButton onClick={showPrevMonths}>
+            {showPrevMonthsButtonLabel ?? 'Show previous'}
+          </TextButton>
+        </div>
+      )}
+
+      <DayPicker
+        month={currentMonth}
+        toMonth={toMonth}
+        numberOfMonths={currentNumberOfMonths}
+        showOutsideDays={showOutsideDays}
+        className={twJoin('w-full pb-3 pt-3', className)}
+        fromDate={fromMonth}
+        disabled={disabledMatchers}
+        classNames={{
+          months: 'flex flex-col lg:flex-row lg:flex-nowrap gap-8 lg:gap-4',
+          month: 'space-y-4 lg:w-1/2',
+          caption: 'flex justify-center pt-1 relative items-center',
+          caption_label: 'label-md',
+          nav: 'space-x-1 flex items-center',
+          nav_button: twJoin(
+            'flex h-11 w-1/7 flex-row items-center justify-center bg-transparent p-0 opacity-50',
+            'disabled:opacity-10',
+            'hover:opacity-100',
+            'focus:outline-none focus-visible:shadow-focus-state',
+          ),
+          nav_button_previous: twJoin(
+            'absolute left-0 pl-4',
+            useShowMoreButtonOnMobile ? 'hidden lg:block' : '!block',
+          ),
+          nav_button_next: twJoin(
+            'absolute right-0 pr-4',
+            useShowMoreButtonOnMobile ? 'hidden lg:block' : '!block',
+          ),
+          table: 'w-full border-collapse space-y-1',
+          head_row: 'flex flex-row nowrap gap-x-0.5',
+          head_cell:
+            'flex justify-center items-center w-1/7 h-11 text-marine-high-emphasis font-normal text-xs rounded-sm',
+          row: 'flex flex-row nowrap gap-x-0.5 w-full mt-0.5',
+          cell: twJoin(
+            'relative w-1/7 p-0 text-center text-xs focus-within:relative focus-within:z-20' +
+              '[&:has([aria-selected].day-range-end)]:rounded-r-lg [&:has([aria-selected])]:bg-surface-secondary-7 [&:has([aria-selected].day-outside)]:bg-surface-secondary-7',
+            props.mode === 'range'
+              ? '[&:has(>.day-range-end)]:rounded-r-lg [&:has(>.day-range-start)]:rounded-l-lg first:[&:has([aria-selected])]:rounded-l-lg last:[&:has([aria-selected])]:rounded-r-lg'
+              : '[&:has([aria-selected])]:rounded-sm',
+          ),
+          day: twJoin(
+            'h-11 w-full rounded-sm p-0 font-normal text-marine-high-emphasis aria-selected:opacity-100',
+            'hover:border-stroke-primary-100 hover:bg-surface-primary-60 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-secondary-marine-48',
+            'active:border-stroke-primary-100 active:bg-surface-primary-60',
+            'focus:outline-none focus-visible:shadow-focus-state',
+          ),
+          day_range_start:
+            'day-range-start bg-surface-primary-100 hover:bg-surface-primary-120 active:bg-surface-primary-120 focus:bg-surface-primary-100 text-marine-high-emphasis rounded-l-lg rounded-r-none',
+          day_range_end:
+            'day-range-end bg-surface-primary-100 hover:bg-surface-primary-120 active:bg-surface-primary-120 focus:bg-surface-primary-100 text-marine-high-emphasis rounded-r-lg',
+          day_range_middle:
+            'aria-selected:bg-surface-primary-60 aria-selected:text-marine-high-emphasis',
+          day_selected: twJoin(
+            'rounded-none bg-surface-primary-100 text-marine-high-emphasis',
+            'hover:bg-surface-primary-120 hover:text-marine-high-emphasis',
+            'active:bg-surface-primary-120 active:text-marine-high-emphasis',
+            'focus:bg-surface-primary-120 focus:text-marine-high-emphasis',
+          ),
+          day_outside:
+            'day-outside text-secondary-marine-48 aria-selected:bg-surface-secondary-7 relative aria-selected:text-secondary-marine-48',
+          day_disabled: 'text-secondary-marine-48',
+          day_hidden: 'invisible',
+          ...classNames,
+        }}
+        components={{
+          IconLeft: ({ ...props }) => (
+            <Icon className="-ml-2 h-5 w-5" name="nav-arrow-left" size="lg" />
+          ),
+          IconRight: ({ ...props }) => (
+            <Icon
+              className="-mr-2 ml-auto h-5 w-5"
+              name="nav-arrow-right"
+              size="lg"
+            />
+          ),
+        }}
+        locale={usedLocale}
+        {...props}
+      />
+
+      {useShowMoreButtonOnMobile && !noMoreMonthsToAddNext && (
+        <div className="py-4 text-center duration-300 animate-in fade-in lg:hidden">
+          <TextButton onClick={showNextMonths}>
+            {showNextMonthsButtonLabel ?? 'Show more'}
+          </TextButton>
+        </div>
+      )}
+    </>
+  );
+}
+
+Calendar.displayName = 'Calendar';
+
+export { Calendar };

package/src/components/core/Calendar/index.ts

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

package/src/components/core/Checkbox/Checkbox.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import type { ForwardRefRenderFunction, InputHTMLAttributes } from 'react';
+import { Icon } from '../../core/Icon';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { twJoin } from 'tailwind-merge';
+
+type BaseProps = {
+  checked?: boolean | 'indeterminate';
+  defaultChecked?: boolean | 'indeterminate';
+  invalid?: string;
+};
+
+export type CheckboxProps = BaseProps &
+  Omit<InputHTMLAttributes<HTMLInputElement>, keyof BaseProps | 'type'>;
+
+const CheckboxRenderFunction: ForwardRefRenderFunction<
+  HTMLInputElement | null,
+  CheckboxProps
+> = ({ checked, defaultChecked, invalid, ...rest }, forwardedRef) => {
+  const ref = useRef<HTMLInputElement | null>(null);
+  const checkedProp = checked === 'indeterminate' ? false : checked;
+  const defaultCheckedProp =
+    defaultChecked === 'indeterminate' ? false : defaultChecked;
+
+  const comparableChecked =
+    typeof checked !== 'undefined' ? checked : defaultChecked;
+
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    forwardedRef,
+    () => ref.current,
+  );
+
+  useEffect(() => {
+    if (comparableChecked !== 'indeterminate') {
+      return;
+    }
+
+    if (!ref || !('current' in ref) || !ref.current) {
+      return;
+    }
+
+    ref.current.indeterminate = true;
+  }, [ref, comparableChecked]);
+
+  useEffect(() => {
+    ref.current?.setCustomValidity(invalid ?? '');
+  }, [ref, invalid]);
+
+  const iconWrapperClassName = 'hidden absolute inset-0 pointer-events-none';
+  const iconClassName = 'w-full h-full';
+
+  return (
+    <span className="relative inline-block h-8 w-8 flex-shrink-0 md:h-6 md:w-6">
+      <input
+        {...rest}
+        className={twJoin(
+          'peer absolute inset-0 h-8 w-8 appearance-none rounded-sm md:h-6 md:w-6',
+          'before:absolute before:inset-0 before:rounded-sm before:border before:border-stroke-primary-100',
+          'checked:before:border-transparent checked:before:bg-surface-primary-100',
+          'indeterminate:before:border-transparent indeterminate:before:bg-surface-primary-100',
+          'invalid:before:border-stroke-error-100',
+          'hover:cursor-pointer hover:bg-surface-secondary-7',
+          'focus:outline-none focus-visible:shadow-focus-state',
+          'disabled:before:border-stroke-secondary-40 disabled:hover:cursor-not-allowed disabled:hover:bg-transparent',
+        )}
+        type="checkbox"
+        defaultChecked={defaultCheckedProp}
+        checked={checkedProp}
+        ref={ref}
+      />
+      <span
+        className={`${iconWrapperClassName} text-white peer-indeterminate:inline-block`}
+      >
+        <Icon name="minus" size="md" className={iconClassName} />
+      </span>
+      <span
+        className={`${iconWrapperClassName} text-marine-high-emphasis peer-checked:inline-block`}
+      >
+        <Icon name="check" size="md" className={iconClassName} />
+      </span>
+    </span>
+  );
+};
+
+/**
+ * Checkboxes let users select one or more items from a list, or turn an item on or off.
+ *
+ * ## Indeterminate (Partial) Checkboxes
+ *
+ * To set a checkbox to an indeterminate state, provide `indeterminate` as the value of `defaultChecked` or `checked`. Keep in mind, that technically the checkbox is unchecked while `indeterminate`.
+ *
+ * ```tsx
+ * <Checkbox defaultChecked="indeterminate" />
+ * ```
+ *
+ * ## Invalid Checkboxes (Checkboxes with Errors)
+ *
+ * Provide an error message in the `invalid` attribute to mark the checkbox as errored.
+ *
+ * ```tsx
+ * <Checkbox invalid="You need to accept our ToS." />
+ * ```
+ */
+export const Checkbox = forwardRef<HTMLInputElement | null, CheckboxProps>(
+  CheckboxRenderFunction,
+);

package/src/components/core/Checkbox/index.ts

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