mautourco-components 0.1.1

package/src/components/atoms/Tab/Tab.css

@@ -0,0 +1,147 @@
+.tab {
+  --tab-width: var(--tab-inline-lg-width, 124rem);
+  --tab-height: var(--tab-inline-lg-height, 78rem);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: calc(var(--tab-width) / 16);
+  height: calc(var(--tab-height) / 16);
+  gap: calc(var(--tab-spacing-container-gap, 0) / 16);
+  padding-top: calc(var(--tab-spacing-container-padding-y, 8rem) / 16);
+  padding-bottom: calc(var(--tab-spacing-container-padding-y, 8rem) / 16);
+  padding-left: calc(var(--tab-spacing-container-padding-x, 8rem) / 16);
+  padding-right: calc(var(--tab-spacing-container-padding-x, 8rem) / 16);
+  border: none;
+  border-radius: calc(var(--tab-border-radius-default, 0) / 16);
+  border-bottom-style: solid;
+  border-bottom-width: calc(var(--tab-border-width-default, 4rem) / 16);
+  border-bottom-color: var(--tab-color-normal-default-border, #e5e5e5);
+  background-color: var(--tab-color-normal-default-background, #ffffff);
+  color: var(--color-text-state-default, #737373);
+  opacity: calc(var(--opacity-opacity-100, 100) / 100);
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    transform 0.15s ease-in-out;
+}
+
+.tab:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 calc(2rem / 16)
+    var(--tab-color-normal-focused-border, #e5e5e5);
+  background-color: var(--tab-color-normal-focused-background, #ffffff);
+}
+
+.tab:hover:not(:disabled):not(.tab--active) {
+  background-color: var(--tab-color-normal-hover-background, #ededed);
+  border-bottom-color: var(--tab-color-normal-hover-border, #e5e5e5);
+  color: var(--color-text-state-hover, #404040);
+}
+
+.tab:active:not(:disabled):not(.tab--active) {
+  background-color: var(--tab-color-normal-pressed-background, #d9d9d9);
+  border-bottom-color: var(--tab-color-normal-pressed-border, #e5e5e5);
+  transform: translateY(calc(1rem / 16 * 1));
+  color: var(--color-text-state-hover, #404040);
+}
+
+.tab--active {
+  background-color: var(--tab-color-active-default-background, #ffffff);
+  border-bottom-color: var(--tab-color-active-default-border, #0f7173);
+  color: var(--color-text-state-filled, #262626);
+}
+
+.tab--active:hover:not(:disabled) {
+  border-bottom-color: var(--tab-color-active-hover-border, #115b5e);
+  background-color: var(--tab-color-active-hover-background, #ffffff);
+}
+
+.tab--active:active:not(:disabled) {
+  border-bottom-color: var(--tab-color-active-pressed-border, #042c2f);
+  background-color: var(--tab-color-active-pressed-background, #ffffff);
+}
+
+.tab--active:focus-visible {
+  box-shadow: 0 0 0 calc(2rem / 16)
+    var(--tab-color-active-focused-border, #042c2f);
+  background-color: var(--tab-color-active-focused-background, #ffffff);
+}
+
+.tab--disabled,
+.tab:disabled {
+  cursor: not-allowed;
+  color: var(--color-text-state-disabled, #a3a3a3);
+  background-color: var(--tab-color-normal-default-background, #ffffff);
+  border-bottom-color: var(--tab-color-normal-default-border, #e5e5e5);
+  opacity: 1;
+}
+
+.tab__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.tab--variant-inline.tab--size-lg {
+  --tab-width: var(--tab-inline-lg-width, 124rem);
+  --tab-height: var(--tab-inline-lg-height, 78rem);
+}
+
+.tab--variant-inline.tab--size-sm {
+  --tab-width: var(--tab-inline-sm-width, 115rem);
+  --tab-height: var(--tab-inline-sm-height, 56rem);
+}
+
+.tab--variant-outline.tab--size-sm {
+  --tab-width: var(--tab-outline-sm-width, 119rem);
+  --tab-height: var(--tab-outline-sm-height, 56rem);
+  border-bottom-color: var(--tab-color-active-default-border, #0f7173);
+}
+
+.tab--variant-outline.tab--size-lg {
+  --tab-width: var(--tab-outline-lg-width, 129rem);
+  --tab-height: var(--tab-outline-lg-height, 78rem);
+  border-bottom-color: var(--tab-color-active-default-border, #0f7173);
+}
+
+.tab--variant-outline {
+  background-color: var(--tab-color-active-default-background, #ffffff);
+}
+
+.tab--variant-outline:hover:not(:disabled):not(.tab--active),
+.tab--variant-outline:active:not(:disabled):not(.tab--active) {
+  background-color: var(--tab-color-active-hover-background, #ffffff);
+}
+
+.tab--variant-outline.tab--size-sm:hover:not(:disabled):not(.tab--active) {
+  border-bottom-color: var(--tab-color-active-hover-border, #115b5e);
+}
+
+.tab--variant-outline.tab--size-sm:active:not(:disabled):not(.tab--active) {
+  border-bottom-color: var(--tab-color-active-pressed-border, #042c2f);
+}
+
+.tab--variant-outline.tab--size-lg:hover:not(:disabled):not(.tab--active) {
+  border-bottom-color: var(--tab-color-active-hover-border, #115b5e);
+}
+
+.tab--variant-outline.tab--size-lg:active:not(:disabled):not(.tab--active) {
+  border-bottom-color: var(--tab-color-active-pressed-border, #042c2f);
+}
+
+.tab--variant-outline.tab--size-sm:focus-visible {
+  outline: none;
+  box-shadow: none;
+  --tab-width: var(--tab-outline-sm-focus-width, 121rem);
+  --tab-height: var(--tab-outline-sm-focus-height, 59rem);
+  border-radius: calc(var(--border-radius-rounded-sm, 4rem) / 16);
+  border-top: calc(var(--border-border, 1rem) / 16)
+    solid var(--color-atoll-green-800, #0f7173);
+}
+

package/src/components/atoms/Tab/Tab.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Text } from '../Typography/Typography';
+import './Tab.css';
+
+type TextComponentProps = React.ComponentProps<typeof Text>;
+
+export interface TabProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  /** Textual content rendered inside the tab */
+  children: React.ReactNode;
+  /** Whether the tab is currently active */
+  isActive?: boolean;
+  /** Visual style family for the tab */
+  variant?: 'inline' | 'outline';
+  /** Size token used by the selected variant */
+  size?: 'sm' | 'lg';
+  /** Typography variant when the tab is active */
+  activeTextVariant?: TextComponentProps['variant'];
+  /** Typography variant when the tab is inactive */
+  inactiveTextVariant?: TextComponentProps['variant'];
+  /** Typography size applied to the tab label */
+  textSize?: TextComponentProps['size'];
+}
+
+const Tab = React.forwardRef<HTMLButtonElement, TabProps>(
+  (
+    {
+      children,
+      isActive = false,
+      disabled = false,
+      className = '',
+      variant = 'inline',
+      size = 'lg',
+      activeTextVariant,
+      inactiveTextVariant,
+      textSize,
+      ...rest
+    },
+    ref
+  ) => {
+    const { role: roleProp, type: typeProp, ...buttonRest } = rest;
+
+    const tabClasses = [
+      'tab',
+      `tab--variant-${variant}`,
+      `tab--size-${size}`,
+      isActive ? 'tab--active' : '',
+      disabled ? 'tab--disabled' : '',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const defaultTypographyVariant = variant === 'outline' ? 'bold' : 'regular';
+    const resolvedActiveTextVariant = activeTextVariant ?? defaultTypographyVariant;
+    const resolvedInactiveTextVariant =
+      inactiveTextVariant ?? defaultTypographyVariant;
+    const resolvedVariant = isActive
+      ? resolvedActiveTextVariant
+      : resolvedInactiveTextVariant;
+    const resolvedTextSize =
+      textSize ??
+      (variant === 'outline'
+        ? 'base'
+        : size === 'lg'
+          ? 'lg'
+          : 'base');
+
+    return (
+      <button
+        {...buttonRest}
+        ref={ref}
+        type={typeProp ?? 'button'}
+        role={roleProp ?? 'tab'}
+        aria-selected={isActive}
+        aria-disabled={disabled || undefined}
+        disabled={disabled}
+        className={tabClasses}
+      >
+        <Text
+          as="span"
+          size={resolvedTextSize}
+          variant={resolvedVariant}
+          className="tab__label"
+        >
+          {children}
+        </Text>
+      </button>
+    );
+  }
+);
+
+Tab.displayName = 'Tab';
+
+export default Tab;
+

package/src/components/atoms/Typography/Typography.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+
+type BodyTokenSize = 'xs' | 'sm' | 'md' | 'lg';
+type BodySizeInput = BodyTokenSize | 'base' | 'xl';
+type Variant = 'light' | 'regular' | 'medium' | 'bold' | 'black';
+type Leading = 'none' | '4' | '5' | '6' | '7';
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+interface BaseProps {
+  variant?: Variant;
+  leading?: Leading;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: React.MouseEventHandler<Element>;
+}
+
+interface HeadingProps extends BaseProps {
+  level?: HeadingLevel;
+  as?: keyof React.JSX.IntrinsicElements;
+}
+
+interface TextProps extends BaseProps {
+  size?: BodySizeInput;
+  as?: keyof React.JSX.IntrinsicElements;
+}
+
+const headingTokenClass: Record<HeadingLevel, string> = {
+  1: 'heading-3xl',
+  2: 'heading-2xl',
+  3: 'heading-xl',
+  4: 'heading-lg',
+  5: 'heading-md',
+  6: 'heading-sm',
+};
+
+const leadingFallback: Record<Leading, string> = {
+  none: 'leading-none',
+  '4': 'leading-4',
+  '5': 'leading-5',
+  '6': 'leading-6',
+  '7': 'leading-7',
+};
+
+const bodySizeAlias: Record<BodySizeInput, BodyTokenSize> = {
+  xs: 'xs',
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  base: 'md',
+  xl: 'lg',
+};
+
+const defaultBodyLeading: Record<BodyTokenSize, Leading> = {
+  xs: '5',
+  sm: '6',
+  md: '6',
+  lg: '7',
+};
+
+const tokenBodyLeadings: Record<BodyTokenSize, Array<'leading-none' | 'leading-4' | 'leading-5' | 'leading-6' | 'leading-7'>> = {
+  xs: ['leading-5', 'leading-4', 'leading-none'],
+  sm: ['leading-6', 'leading-5', 'leading-none'],
+  md: ['leading-6', 'leading-7', 'leading-none'],
+  lg: ['leading-7', 'leading-6', 'leading-none'],
+};
+
+const mapLeadingToToken = (leading: Leading): 'leading-none' | 'leading-4' | 'leading-5' | 'leading-6' | 'leading-7' => {
+  if (leading === 'none') return 'leading-none';
+  return `leading-${leading}` as 'leading-4' | 'leading-5' | 'leading-6' | 'leading-7';
+};
+
+const getBodyClass = (
+  size: BodyTokenSize,
+  leading?: Leading
+): { className: string; lineHeightHandled: boolean } => {
+  const availableLeadings = tokenBodyLeadings[size];
+  const desiredLeading = leading ? mapLeadingToToken(leading) : mapLeadingToToken(defaultBodyLeading[size]);
+
+  const resolvedLeading = availableLeadings.includes(desiredLeading)
+    ? desiredLeading
+    : availableLeadings[0];
+
+  return {
+    className: `body-${size}-${resolvedLeading}`,
+    lineHeightHandled: desiredLeading === resolvedLeading,
+  };
+};
+
+const buildVariantClass = (base: string, variant: Variant): string | undefined => {
+  if (!base) return undefined;
+  return `${base}--${variant}`;
+};
+
+
+export const Heading: React.FC<HeadingProps> = ({
+  level = 2,
+  variant = 'bold',
+  leading,
+  as,
+  className = '',
+  children,
+  onClick,
+}) => {
+  const Tag = as || (`h${level}` as keyof React.JSX.IntrinsicElements);
+  const baseClass = headingTokenClass[level] ?? headingTokenClass[2];
+  const variantClass = buildVariantClass(baseClass, variant);
+
+  const classes = [
+    baseClass,
+    variantClass,
+    leading ? leadingFallback[leading] : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <Tag className={classes} onClick={onClick}>
+      {children}
+    </Tag>
+  );
+};
+
+
+export const Text: React.FC<TextProps> = ({
+  size = 'md',
+  variant = 'regular',
+  leading,
+  as,
+  className = '',
+  children,
+  onClick,
+}) => {
+  const Tag = as || 'p';
+  const normalizedSize = bodySizeAlias[size];
+  const { className: baseClass, lineHeightHandled } = getBodyClass(normalizedSize, leading);
+  const variantClass = buildVariantClass(baseClass, variant);
+
+  const classes = [
+    baseClass,
+    variantClass,
+    leading && !lineHeightHandled ? leadingFallback[leading] : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <Tag className={classes} onClick={onClick}>
+      {children}
+    </Tag>
+  );
+};

package/src/components/molecules/MultiSelectDropdown/MultiSelectDropdown.tsx

@@ -0,0 +1,245 @@
+import React, { useState, useRef, useEffect } from 'react';
+import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
+import Input from '../../atoms/Inputs/Input/Input';
+import Checkbox from '../../atoms/Checkbox/Checkbox';
+import SelectedValue from '../../atoms/SelectedValue/SelectedValue';
+import { Text } from '../../atoms/Typography/Typography';
+
+export interface MultiSelectOption {
+  id: string;
+  label: string;
+  disabled?: boolean;
+  imageUrl?: string;
+}
+
+export interface MultiSelectGroup {
+  id: string;
+  label: string;
+  options: MultiSelectOption[];
+  imageUrl?: string;
+}
+
+export interface MultiSelectDropdownProps {
+  options: MultiSelectOption[];
+  selectedValues: string[];
+  placeholder?: string;
+  onSelectionChange: (selectedIds: string[]) => void;
+  disabled?: boolean;
+  error?: boolean;
+  className?: string;
+  maxDisplayedChips?: number;
+  selectedValueVariant?: 'filled' | 'text';
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  groups?: MultiSelectGroup[];
+}
+
+const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
+  options,
+  selectedValues,
+  placeholder = 'Select items',
+  onSelectionChange,
+  disabled = false,
+  error = false,
+  className = '',
+  maxDisplayedChips = 3,
+  selectedValueVariant = 'filled',
+  searchable = false,
+  searchPlaceholder = 'Search',
+  groups
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const handleToggleDropdown = () => {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  const handleOptionToggle = (optionId: string) => {
+    if (disabled) return;
+
+    const isSelected = selectedValues.includes(optionId);
+    let newSelectedValues: string[];
+
+    if (isSelected) {
+      newSelectedValues = selectedValues.filter(id => id !== optionId);
+    } else {
+      newSelectedValues = [...selectedValues, optionId];
+    }
+
+
+    onSelectionChange(newSelectedValues);
+  };
+
+  const handleRemoveChip = (optionId: string) => {
+    if (disabled) return;
+    
+    const newSelectedValues = selectedValues.filter(id => id !== optionId);
+    onSelectionChange(newSelectedValues);
+  };
+
+
+  const getSelectedOptions = () => {
+    return options.filter(option => selectedValues.includes(option.id));
+  };
+  const getFilteredOptions = () => {
+    if (!searchable || query.trim() === '') return options;
+    const q = query.toLowerCase();
+    return options.filter(o => o.label.toLowerCase().includes(q));
+  };
+
+
+  const getDisplayedChips = () => {
+    const selectedOptions = getSelectedOptions();
+    return selectedOptions.slice(0, maxDisplayedChips);
+  };
+
+  const getHiddenCount = () => {
+    return Math.max(0, selectedValues.length - maxDisplayedChips);
+  };
+
+  const getDropdownState = () => {
+    if (disabled) return 'disabled';
+    if (error) return 'error';
+    if (selectedValues.length > 0) return 'selected';
+    return 'default';
+  };
+
+  return (
+    <div ref={dropdownRef} className={`multiselect-dropdown ${className}`}>
+      <div className="multiselect-dropdown__input-container">
+        <DropdownInput
+          placeholder={selectedValues.length === 0 ? placeholder : ''}
+          state={getDropdownState()}
+          onClick={handleToggleDropdown}
+          className="multiselect-dropdown__input"
+        />
+        
+        {/* Display selected chips */}
+        {selectedValues.length > 0 && (
+          <div className="multiselect-dropdown__chips">
+            {getDisplayedChips().map((option) => (
+              <SelectedValue
+                key={option.id}
+                value={option.label}
+                onRemove={() => handleRemoveChip(option.id)}
+                className="multiselect-dropdown__chip"
+                size="xs"
+                iconSize="xs"
+                variant={selectedValueVariant}
+              />
+            ))}
+            {getHiddenCount() > 0 && (
+              <div className="multiselect-dropdown__hidden-count">
+                +{getHiddenCount()}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {isOpen && (
+        <div className="multiselect-dropdown__panel">
+          <div className="multiselect-dropdown__menu">
+            {searchable && (
+              <div className="multiselect-dropdown__search">
+                <Input
+                  placeholder={searchPlaceholder}
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  icon="search"
+                  iconPosition="trailing"
+                />
+              </div>
+            )}
+            <div className="multiselect-dropdown__options">
+              {groups && groups.length > 0 ? (
+                groups.map((group) => (
+                  <div key={group.id} className="multiselect-dropdown__group">
+                    <div className="multiselect-dropdown__group-header">
+                      {group.imageUrl && (
+                        <span className="multiselect-dropdown__group-icon" aria-hidden="true">
+                          <img src={group.imageUrl} alt="" />
+                        </span>
+                      )}
+                      <Text size="sm" variant="medium">{group.label}</Text>
+                    </div>
+                    <div className="multiselect-dropdown__group-options">
+                      {getFilteredOptions()
+                        .filter(o => group.options.some(go => go.id === o.id))
+                        .map((option) => (
+                          <div key={option.id} className="multiselect-dropdown__option">
+                            <Checkbox
+                              checked={selectedValues.includes(option.id)}
+                              disabled={option.disabled || disabled}
+                              label={option.label}
+                              leadingContent={option.imageUrl ? (
+                                <span className="multiselect-dropdown__option-icon" aria-hidden="true">
+                                  <img src={option.imageUrl} alt="" />
+                                </span>
+                              ) : undefined}
+                              onChange={(checked) => {
+                                if (checked !== selectedValues.includes(option.id)) {
+                                  handleOptionToggle(option.id);
+                                }
+                              }}
+                            />
+                          </div>
+                        ))}
+                    </div>
+                  </div>
+                ))
+              ) : (
+                getFilteredOptions().map((option) => (
+                  <div key={option.id} className="multiselect-dropdown__option">
+                    <Checkbox
+                      checked={selectedValues.includes(option.id)}
+                      disabled={option.disabled || disabled}
+                      label={option.label}
+                      leadingContent={option.imageUrl ? (
+                        <span className="multiselect-dropdown__option-icon" aria-hidden="true">
+                          <img src={option.imageUrl} alt="" />
+                        </span>
+                      ) : undefined}
+                      onChange={(checked) => {
+                        if (checked !== selectedValues.includes(option.id)) {
+                          handleOptionToggle(option.id);
+                        }
+                      }}
+                    />
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+
+          {/* Footer with count (outside the menu container) */}
+          <div className="multiselect-dropdown__footer">
+            <Text size="sm" variant="regular" leading="5" className="multiselect-dropdown__footer-text">
+              {selectedValues.length} item selected
+            </Text>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MultiSelectDropdown;

package/src/components/molecules/UserCard/UserCard.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { UserCard } from './UserCard';
+
+const meta = {
+  title: 'Molecules/UserCard',
+  component: UserCard,
+  argTypes: {
+    onSelectAgency: { action: 'agency selected' },
+  }
+} satisfies Meta<typeof UserCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args:{
+    user: {
+      name: "John Doe",
+      agency: "Beachcomber SA",
+      isAdmin: true,
+    },
+    agencies: [
+      { id: 1, name: "Beachcomber SA", localisation: "Mauritius" },
+      { id: 2, name: "Sun Resorts", localisation: "Maldives" },
+      { id: 3, name: "Tropical Escapes", localisation: "Seychelles" },
+    ],
+    selectedAgency: { id: 1, name: "Beachcomber SA", localisation: "Mauritius" },
+  },
+  render: (args) => (
+    <div className='flex justify-center w-full'>
+      <UserCard {...args} />
+    </div>
+),
+};