mautourco-components 0.2.5 → 0.2.8

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

@@ -1,153 +1,180 @@
-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>
-  );
-};
+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;
+type TextColor = 
+  | 'default' 
+  | 'accent' 
+  | 'subtle' 
+  | 'light' 
+  | 'brand' 
+  | 'inverted'
+  | 'state-default'
+  | 'state-hover'
+  | 'state-filled'
+  | 'state-disabled'
+  | 'state-error'
+  | 'state-success';
+
+interface BaseProps {
+  variant?: Variant;
+  leading?: Leading;
+  color?: TextColor;
+  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}`;
+};
+
+const getColorStyle = (color?: TextColor): React.CSSProperties => {
+  if (!color) return {};
+  return {
+    color: `var(--color-text-${color}, inherit)`,
+  };
+};
+
+
+export const Heading: React.FC<HeadingProps> = ({
+  level = 2,
+  variant = 'bold',
+  leading,
+  color,
+  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(' ');
+
+  const colorStyle = getColorStyle(color);
+
+  return (
+    <Tag className={classes} style={colorStyle} onClick={onClick}>
+      {children}
+    </Tag>
+  );
+};
+
+
+export const Text: React.FC<TextProps> = ({
+  size = 'md',
+  variant = 'regular',
+  leading,
+  color,
+  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(' ');
+
+  const colorStyle = getColorStyle(color);
+
+  return (
+    <Tag className={classes} style={colorStyle} onClick={onClick}>
+      {children}
+    </Tag>
+  );
+};

package/src/components/molecules/Calendar/CalendarInput.tsx

@@ -1,135 +1,135 @@
-import React, { useState } from "react";
-import Icon from "../../atoms/Icon/Icon";
-
-export interface CalendarInputProps {
-  /** Placeholder text */
-  placeholder?: string;
-  /** Selected date value (formatted as string) */
-  value?: string;
-  /** State of the input: default, active, typing, disabled, success, error */
-  state?: "default" | "active" | "typing" | "disabled" | "success" | "error";
-  /** Helper/support text below input */
-  /** Whether the input is disabled */
-  disabled?: boolean;
-  /** Callback when the input is clicked */
-  onClick?: () => void;
-  /** Callback when calendar icon is clicked */
-  onCalendarClick?: () => void;
-  /** Callback when input value changes */
-  onChange?: (value: string) => void;
-  /** Callback when input gains focus */
-  onFocus?: () => void;
-  /** Callback when input loses focus */
-  onBlur?: () => void;
-  /** Additional CSS classes */
-  className?: string;
-  /** Whether the calendar icon has full bg*/
-  iconBGFull?: boolean;
-  /** Position of the calendar icon: left or right */
-  iconPosition?: "left" | "right";
-  /** Show chevron on the right when icon is on the left */
-  showChevron?: boolean;
-  /** Whether the calendar popover is open */
-  isOpen?: boolean;
-}
-
-const CalendarInput: React.FC<CalendarInputProps> = ({
-  placeholder = "Select date",
-  value = "",
-  state = "default",
-  disabled = false,
-  onClick,
-  onCalendarClick,
-  onChange,
-  onFocus,
-  onBlur,
-  className = "",
-  iconBGFull = true,
-  iconPosition = "right",
-  showChevron = false,
-  isOpen = false,
-}) => {
-  const [isFocused, setIsFocused] = useState(false);
-  const [localValue, setLocalValue] = useState(value);
-  const [isTyping, setIsTyping] = useState(false);
-
-  const finalState = disabled ? "disabled" : state;
-  const displayState =
-    isFocused && isTyping ? "typing" : isFocused ? "active" : finalState;
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
-    setLocalValue(newValue);
-    setIsTyping(true);
-    onChange?.(newValue);
-  };
-
-  const handleFocus = () => {
-    setIsFocused(true);
-    onFocus?.();
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-    setIsTyping(false);
-    onBlur?.();
-  };
-
-  const handleCalendarClick = () => {
-    if (!disabled) {
-      onCalendarClick?.();
-    }
-  };
-
-  // keep localValue in sync when parent changes `value` (controlled)
-  React.useEffect(() => {
-    setLocalValue(value);
-  }, [value]);
-
-  const iconButton = (
-    <button
-      type="button"
-      className={`calendar-input__icon-button ${iconBGFull ? " calendar-input__icon-button--full-bg" : ""} calendar-input__icon-button--${iconPosition}`}
-      onClick={handleCalendarClick}
-      disabled={disabled}
-      aria-label="Open calendar picker"
-      title="Select date"
-    >
-      <Icon name="calendar" size="sm" className="calendar-input__icon" />
-    </button>
-  );
-
-  return (
-    <div
-      className={`calendar-input calendar-input--${displayState} calendar-input--icon-${iconPosition} ${className}`.trim()}
-      data-node-id="3425:11289"
-      onClick={onClick}
-    >
-      {iconPosition === "left" && iconButton}
-      
-      <div className="calendar-input__input-wrapper">
-        <input
-          type="text"
-          className="calendar-input__field"
-          placeholder={placeholder}
-          value={localValue || placeholder}
-          disabled={disabled}
-          onChange={handleInputChange}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          readOnly={true}
-          aria-label={"Select date"}
-        />
-        {iconPosition === "left" && showChevron && (
-          <div className={`calendar-input__chevron ${isOpen ? 'calendar-input__chevron--open' : ''}`}>
-            <Icon name={"chevron-down"} size="sm" />
-          </div>
-        )}
-      </div>
-
-      {iconPosition === "right" && iconButton}
-    </div>
-  );
-};
-
-export default CalendarInput;
+import React, { useState } from "react";
+import Icon from "../../atoms/Icon/Icon";
+
+export interface CalendarInputProps {
+  /** Placeholder text */
+  placeholder?: string;
+  /** Selected date value (formatted as string) */
+  value?: string;
+  /** State of the input: default, active, typing, disabled, success, error */
+  state?: "default" | "active" | "typing" | "disabled" | "success" | "error";
+  /** Helper/support text below input */
+  /** Whether the input is disabled */
+  disabled?: boolean;
+  /** Callback when the input is clicked */
+  onClick?: () => void;
+  /** Callback when calendar icon is clicked */
+  onCalendarClick?: () => void;
+  /** Callback when input value changes */
+  onChange?: (value: string) => void;
+  /** Callback when input gains focus */
+  onFocus?: () => void;
+  /** Callback when input loses focus */
+  onBlur?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+  /** Whether the calendar icon has full bg*/
+  iconBGFull?: boolean;
+  /** Position of the calendar icon: left or right */
+  iconPosition?: "left" | "right";
+  /** Show chevron on the right when icon is on the left */
+  showChevron?: boolean;
+  /** Whether the calendar popover is open */
+  isOpen?: boolean;
+}
+
+const CalendarInput: React.FC<CalendarInputProps> = ({
+  placeholder = "Select date",
+  value = "",
+  state = "default",
+  disabled = false,
+  onClick,
+  onCalendarClick,
+  onChange,
+  onFocus,
+  onBlur,
+  className = "",
+  iconBGFull = true,
+  iconPosition = "right",
+  showChevron = false,
+  isOpen = false,
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [localValue, setLocalValue] = useState(value);
+  const [isTyping, setIsTyping] = useState(false);
+
+  const finalState = disabled ? "disabled" : state;
+  const displayState =
+    isFocused && isTyping ? "typing" : isFocused ? "active" : finalState;
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setLocalValue(newValue);
+    setIsTyping(true);
+    onChange?.(newValue);
+  };
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus?.();
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    setIsTyping(false);
+    onBlur?.();
+  };
+
+  const handleCalendarClick = () => {
+    if (!disabled) {
+      onCalendarClick?.();
+    }
+  };
+
+  // keep localValue in sync when parent changes `value` (controlled)
+  React.useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  const iconButton = (
+    <button
+      type="button"
+      className={`calendar-input__icon-button ${iconBGFull ? " calendar-input__icon-button--full-bg" : ""} calendar-input__icon-button--${iconPosition}`}
+      onClick={handleCalendarClick}
+      disabled={disabled}
+      aria-label="Open calendar picker"
+      title="Select date"
+    >
+      <Icon name="calendar" size="sm" className="calendar-input__icon" />
+    </button>
+  );
+
+  return (
+    <div
+      className={`calendar-input calendar-input--${displayState} calendar-input--icon-${iconPosition} ${className}`.trim()}
+      data-node-id="3425:11289"
+      onClick={onClick}
+    >
+      {iconPosition === "left" && iconButton}
+      
+      <div className="calendar-input__input-wrapper">
+        <input
+          type="text"
+          className="calendar-input__field"
+          placeholder={placeholder}
+          value={localValue || placeholder}
+          disabled={disabled}
+          onChange={handleInputChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          readOnly={true}
+          aria-label={"Select date"}
+        />
+        {iconPosition === "left" && showChevron && (
+          <div className={`calendar-input__chevron ${isOpen ? 'calendar-input__chevron--open' : ''}`}>
+            <Icon name={"chevron-down"} size="sm" />
+          </div>
+        )}
+      </div>
+
+      {iconPosition === "right" && iconButton}
+    </div>
+  );
+};
+
+export default CalendarInput;