mautourco-components 0.2.5 → 0.2.8

package/src/components/atoms/Spinner/variants/ButtonSpinner.tsx

@@ -1,37 +1,37 @@
-import React from 'react';
-import Spinner from '../Spinner';
-
-interface ButtonSpinnerProps {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  className?: string;
-  variant?: 'primary' | 'secondary' | 'white';
-}
-
-const ButtonSpinner: React.FC<ButtonSpinnerProps> = ({
-  size = 'sm',
-  className = '',
-  variant = 'white'
-}) => {
-  const getVariantClass = () => {
-    switch (variant) {
-      case 'primary':
-        return 'text-white';
-      case 'secondary':
-        return 'text-gray-600';
-      case 'white':
-        return 'text-white';
-      default:
-        return 'text-white';
-    }
-  };
-
-  return (
-    <Spinner 
-      size={size} 
-      speed="fast" 
-      className={`${getVariantClass()} ${className}`}
-    />
-  );
-};
-
-export default ButtonSpinner;
+import React from 'react';
+import Spinner from '../Spinner';
+
+interface ButtonSpinnerProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  variant?: 'primary' | 'secondary' | 'white';
+}
+
+const ButtonSpinner: React.FC<ButtonSpinnerProps> = ({
+  size = 'sm',
+  className = '',
+  variant = 'white'
+}) => {
+  const getVariantClass = () => {
+    switch (variant) {
+      case 'primary':
+        return 'text-white';
+      case 'secondary':
+        return 'text-gray-600';
+      case 'white':
+        return 'text-white';
+      default:
+        return 'text-white';
+    }
+  };
+
+  return (
+    <Spinner 
+      size={size} 
+      speed="fast" 
+      className={`${getVariantClass()} ${className}`}
+    />
+  );
+};
+
+export default ButtonSpinner;

package/src/components/atoms/Spinner/variants/LoadingSpinner.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
-import Spinner from '../Spinner';
-
-interface LoadingSpinnerProps {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  className?: string;
-}
-
-const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
-  size = 'md',
-  className = ''
-}) => {
-  return (
-    <Spinner 
-      size={size} 
-      speed="normal" 
-      className={`text-blue-500 ${className}`}
-    />
-  );
-};
-
-export default LoadingSpinner;
+import React from 'react';
+import Spinner from '../Spinner';
+
+interface LoadingSpinnerProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+}
+
+const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
+  size = 'md',
+  className = ''
+}) => {
+  return (
+    <Spinner 
+      size={size} 
+      speed="normal" 
+      className={`text-blue-500 ${className}`}
+    />
+  );
+};
+
+export default LoadingSpinner;

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

@@ -1,147 +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);
-}
-
+.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

@@ -1,96 +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;
-
+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;
+