@12-apps/ui 1.3.1 → 1.4.1

package/src/components/form/InputOTP/InputOTP.tsx

@@ -1,231 +1,84 @@
-import type { Theme } from '@mui/material';
-import { alpha, Box, TextField } from '@mui/material';
+import { Box, TextField } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import React, { forwardRef, useEffect,useRef, useState } from 'react';
+import React, { forwardRef } from 'react';
 
-import type { InputOTPProps } from './InputOTP.types';
-
-const getColorFromTheme = (theme: Theme, color: string) => {
-  if (color === 'neutral') {
-    return {
-      main: theme.palette.grey[700],
-      dark: theme.palette.grey[800],
-      light: theme.palette.grey[500],
-      contrastText: '#fff',
-    };
-  }
-
-  const colorMap: Record<
-    string,
-    { main: string; dark?: string; light?: string; contrastText?: string }
-  > = {
-    primary: theme.palette.primary,
-    secondary: theme.palette.secondary,
-    success: theme.palette.success,
-    warning: theme.palette.warning,
-    danger: theme.palette.error,
-  };
-
-  const palette = colorMap[color] || theme.palette.primary;
+import { withDefaults } from '../../../utils/withDefaults';
 
-  // Ensure palette has required properties
-  return {
-    main: palette?.main || theme.palette.primary.main,
-    dark: palette?.dark || palette?.main || theme.palette.primary.dark,
-    light: palette?.light || palette?.main || theme.palette.primary.light,
-    contrastText: palette?.contrastText || '#fff',
-  };
-};
+import { useOtpDigits } from './InputOTP.hooks';
+import { otpSlotSx } from './InputOTP.styles';
+import type { OtpSlotFlags } from './InputOTP.styles';
+import type { InputOTPProps } from './InputOTP.types';
 
 const StyledOTPInput = styled(TextField, {
   shouldForwardProp: (prop) =>
     !['customColor', 'customSize', 'glass', 'gradient'].includes(prop as string),
-})<{
-  customColor?: string;
-  customSize?: string;
-  glass?: boolean;
-  gradient?: boolean;
-}>(({ theme, customColor = 'primary', customSize = 'md', glass, gradient }) => {
-  const colorPalette = getColorFromTheme(theme, customColor);
-
-  const sizeMap = {
-    xs: { width: '32px', height: '32px', fontSize: '0.75rem' },
-    sm: { width: '40px', height: '40px', fontSize: '0.875rem' },
-    md: { width: '48px', height: '48px', fontSize: '1rem' },
-    lg: { width: '56px', height: '56px', fontSize: '1.125rem' },
-    xl: { width: '64px', height: '64px', fontSize: '1.25rem' },
-  };
-
-  const currentSize = sizeMap[customSize as keyof typeof sizeMap];
-
-  return {
-    width: currentSize.width,
-    height: currentSize.height,
-
-    '& .MuiOutlinedInput-root': {
-      width: currentSize.width,
-      height: currentSize.height,
-      fontSize: currentSize.fontSize,
-      fontWeight: 600,
-      textAlign: 'center',
-      borderRadius: theme.spacing(1),
-
-      ...(glass && {
-        backgroundColor: alpha(theme.palette.background.paper, 0.1),
-        backdropFilter: 'blur(20px)',
-        '& fieldset': {
-          border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-        },
-      }),
-
-      ...(gradient && {
-        '&.Mui-focused fieldset': {
-          background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light})`,
-          borderWidth: '2px',
-        },
-      }),
-
-      '& input': {
-        textAlign: 'center',
-        padding: 0,
-        fontWeight: 'inherit',
-      },
-
-      '&:hover fieldset': {
-        borderColor: colorPalette.main,
-      },
-
-      '&.Mui-focused fieldset': {
-        borderColor: colorPalette.main,
-        borderWidth: '2px',
-      },
-    },
-  };
+})<OtpSlotFlags>(({ theme, ...flags }) => ({ ...otpSlotSx(theme, flags) }));
+
+const DEFAULTS = {
+  variant: 'numeric',
+  color: 'primary',
+  size: 'md',
+  length: 6,
+  value: '',
+  glass: false,
+  gradient: false,
+  autoFocus: false,
+  error: false,
+  disabled: false,
+} satisfies Partial<InputOTPProps>;
+
+type ResolvedProps = InputOTPProps & Required<Pick<InputOTPProps, keyof typeof DEFAULTS>>;
+
+export const InputOTP = forwardRef<HTMLDivElement, InputOTPProps>((props, ref) => {
+  const {
+    variant, color, size, length, value, onChange, onComplete,
+    glass, gradient, autoFocus, error, disabled, dataTestId,
+    ...rest
+  } = withDefaults(props, DEFAULTS) as ResolvedProps;
+
+  const { digits, inputRefs, handleInputChange, handleKeyDown, handlePaste } = useOtpDigits({
+    variant,
+    length,
+    value,
+    onChange,
+    onComplete,
+  });
+
+  return (
+    <Box
+      ref={ref}
+      data-testid={dataTestId}
+      sx={{ display: 'flex', gap: 1, justifyContent: 'center', alignItems: 'center' }}
+      {...rest}
+    >
+      {digits.map((digit, index) => (
+        <StyledOTPInput
+          key={index}
+          ref={(el: HTMLDivElement | null) => {
+            inputRefs.current[index] = el?.querySelector('input') || null;
+          }}
+          customColor={color}
+          customSize={size}
+          glass={glass}
+          gradient={gradient}
+          // `masked` keeps the digit in state and shows a bullet in its place.
+          value={variant === 'masked' ? (digit ? '•' : '') : digit}
+          onChange={(e) => handleInputChange(index, e.target.value)}
+          onKeyDown={(e) => handleKeyDown(index, e)}
+          // Only the first slot takes a paste; it fills the rest itself.
+          onPaste={index === 0 ? handlePaste : undefined}
+          autoFocus={autoFocus && index === 0}
+          error={error}
+          disabled={disabled}
+          inputProps={{
+            maxLength: 1,
+            style: { textAlign: 'center' },
+            'data-testid': dataTestId ? `${dataTestId}-slot-${index}` : undefined,
+          }}
+        />
+      ))}
+    </Box>
+  );
 });
 
-export const InputOTP = forwardRef<HTMLDivElement, InputOTPProps>(
-  (
-    {
-      variant = 'numeric',
-      color = 'primary',
-      size = 'md',
-      length = 6,
-      value = '',
-      onChange,
-      onComplete,
-      glass = false,
-      gradient = false,
-      autoFocus = false,
-      error = false,
-      disabled = false,
-      dataTestId,
-      ...props
-    },
-    ref,
-  ) => {
-    const [digits, setDigits] = useState<string[]>(Array(length).fill(''));
-    const inputRefs = useRef<(globalThis.HTMLInputElement | null)[]>([]);
-
-    useEffect(() => {
-      const newDigits = value.split('').slice(0, length);
-      while (newDigits.length < length) {
-        newDigits.push('');
-      }
-      setDigits(newDigits);
-    }, [value, length]);
-
-    const handleInputChange = (index: number, inputValue: string) => {
-      if (variant === 'numeric' && !/^\d*$/.test(inputValue)) return;
-      if (variant === 'alphanumeric' && !/^[a-zA-Z0-9]*$/.test(inputValue)) return;
-
-      const newDigits = [...digits];
-      newDigits[index] = inputValue.slice(-1); // Take only the last character
-      setDigits(newDigits);
-
-      const newValue = newDigits.join('');
-      onChange?.(newValue);
-
-      if (inputValue && index < length - 1) {
-        inputRefs.current[index + 1]?.focus();
-      }
-
-      if (newValue.length === length) {
-        onComplete?.(newValue);
-      }
-    };
-
-    const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
-      if (e.key === 'Backspace' && !digits[index] && index > 0) {
-        inputRefs.current[index - 1]?.focus();
-      }
-
-      if (e.key === 'ArrowLeft' && index > 0) {
-        inputRefs.current[index - 1]?.focus();
-      }
-
-      if (e.key === 'ArrowRight' && index < length - 1) {
-        inputRefs.current[index + 1]?.focus();
-      }
-    };
-
-    const handlePaste = (e: React.ClipboardEvent) => {
-      e.preventDefault();
-      const pastedData = e.clipboardData.getData('text').slice(0, length);
-
-      if (variant === 'numeric' && !/^\d+$/.test(pastedData)) return;
-      if (variant === 'alphanumeric' && !/^[a-zA-Z0-9]+$/.test(pastedData)) return;
-
-      const newDigits = pastedData.split('');
-      while (newDigits.length < length) {
-        newDigits.push('');
-      }
-      setDigits(newDigits.slice(0, length));
-      onChange?.(pastedData);
-
-      if (pastedData.length === length) {
-        onComplete?.(pastedData);
-      }
-    };
-
-    return (
-      <Box
-        ref={ref}
-        data-testid={dataTestId}
-        sx={{
-          display: 'flex',
-          gap: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-        {...props}
-      >
-        {digits.map((digit, index) => (
-          <StyledOTPInput
-            key={index}
-            ref={(el: HTMLDivElement | null) => {
-              inputRefs.current[index] = el?.querySelector('input') || null;
-            }}
-            customColor={color}
-            customSize={size}
-            glass={glass}
-            gradient={gradient}
-            value={variant === 'masked' ? (digit ? '•' : '') : digit}
-            onChange={(e) => handleInputChange(index, e.target.value)}
-            onKeyDown={(e) => handleKeyDown(index, e)}
-            onPaste={index === 0 ? handlePaste : undefined}
-            autoFocus={autoFocus && index === 0}
-            error={error}
-            disabled={disabled}
-            inputProps={{
-              maxLength: 1,
-              style: { textAlign: 'center' },
-              'data-testid': dataTestId ? `${dataTestId}-slot-${index}` : undefined,
-            }}
-          />
-        ))}
-      </Box>
-    );
-  },
-);
-
 InputOTP.displayName = 'InputOTP';

package/src/components/form/Label/Label.parts.tsx

@@ -0,0 +1,75 @@
+import { Box, CircularProgress, useTheme } from '@mui/material';
+import React from 'react';
+
+import type { LabelProps } from './Label.types';
+
+/** The required marker, on whichever side the caller asked for. */
+export const Asterisk: React.FC<{ placement: NonNullable<LabelProps['asteriskPlacement']> }> = ({
+  placement,
+}) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      component="span"
+      sx={{
+        color: theme.palette.error.main,
+        marginLeft: placement === 'end' ? theme.spacing(0.5) : 0,
+        marginRight: placement === 'start' ? theme.spacing(0.5) : 0,
+      }}
+    >
+      *
+    </Box>
+  );
+};
+
+export const LabelIcon: React.FC<{ icon: React.ReactNode }> = ({ icon }) => (
+  <Box component="span" sx={{ display: 'inline-flex', alignItems: 'center', fontSize: 'inherit' }}>
+    {icon}
+  </Box>
+);
+
+/** Sized to the label's own font so it sits on the text baseline. */
+export const LabelSpinner: React.FC<{ fontSize?: CSSStyleDeclaration['fontSize']; color: string }> = ({
+  fontSize,
+  color,
+}) => {
+  const theme = useTheme();
+
+  return <CircularProgress size={fontSize} sx={{ color, marginLeft: theme.spacing(0.5) }} />;
+};
+
+export interface LabelBodyProps {
+  children: React.ReactNode;
+  required: boolean;
+  asteriskPlacement: NonNullable<LabelProps['asteriskPlacement']>;
+  icon?: React.ReactNode;
+  iconPosition: NonNullable<LabelProps['iconPosition']>;
+  loading: boolean;
+  fontSize?: string;
+  color: string;
+}
+
+/**
+ * The run inside the label: the required marker and the icon on whichever side
+ * each was asked for, the text, and the spinner after it all.
+ */
+export const LabelBody: React.FC<LabelBodyProps> = ({
+  children,
+  required,
+  asteriskPlacement,
+  icon,
+  iconPosition,
+  loading,
+  fontSize,
+  color,
+}) => (
+  <>
+    {required && asteriskPlacement === 'start' && <Asterisk placement={asteriskPlacement} />}
+    {icon && iconPosition === 'start' && <LabelIcon icon={icon} />}
+    {children}
+    {icon && iconPosition === 'end' && <LabelIcon icon={icon} />}
+    {required && asteriskPlacement === 'end' && <Asterisk placement={asteriskPlacement} />}
+    {loading && <LabelSpinner fontSize={fontSize} color={color} />}
+  </>
+);

package/src/components/form/Label/Label.styles.ts

@@ -0,0 +1,206 @@
+import { alpha } from '@mui/material';
+import type { CSSObject, Theme } from '@mui/material';
+
+import type { LabelProps } from './Label.types';
+
+type Size = NonNullable<LabelProps['size']>;
+type Variant = NonNullable<LabelProps['variant']>;
+type Weight = NonNullable<LabelProps['weight']>;
+
+const SIZES: Record<Size, (theme: Theme) => CSSObject> = {
+  xs: (theme) => ({ fontSize: '0.75rem', lineHeight: 1.2, padding: theme.spacing(0.25, 0.5) }),
+  sm: (theme) => ({ fontSize: '0.875rem', lineHeight: 1.3, padding: theme.spacing(0.5, 0.75) }),
+  md: (theme) => ({ fontSize: '1rem', lineHeight: 1.5, padding: theme.spacing(0.75, 1) }),
+  lg: (theme) => ({ fontSize: '1.125rem', lineHeight: 1.6, padding: theme.spacing(1, 1.25) }),
+  xl: (theme) => ({ fontSize: '1.25rem', lineHeight: 1.7, padding: theme.spacing(1.25, 1.5) }),
+};
+
+export const sizeStyles = (theme: Theme, size: Size): CSSObject => (SIZES[size] ?? SIZES.md)(theme);
+
+const WEIGHTS: Record<Weight, number> = {
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+};
+
+const fontWeight = (weight: Weight) => WEIGHTS[weight] ?? WEIGHTS.regular;
+
+export interface LabelStyleFlags {
+  variant: Variant;
+  size: Size;
+  color: NonNullable<LabelProps['color']>;
+  weight: Weight;
+  transform: NonNullable<LabelProps['transform']>;
+  align: NonNullable<LabelProps['align']>;
+  error: boolean;
+  disabled: boolean;
+  glow: boolean;
+  pulse: boolean;
+  ripple: boolean;
+  srOnly: boolean;
+  nowrap: boolean;
+  truncate: boolean;
+  clickable: boolean;
+}
+
+/**
+ * The text colour, which error and disabled override before the palette is
+ * consulted at all. Resolved once and threaded through — the variant styles
+ * read it up to four times each.
+ */
+export const textColor = (theme: Theme, flags: LabelStyleFlags): string => {
+  if (flags.error) return theme.palette.error.main;
+  if (flags.disabled) return theme.palette.text.disabled;
+  if (flags.color === 'default') return theme.palette.text.primary;
+  return theme.palette[flags.color].main;
+};
+
+/** The ripple that expands from the centre on press, for clickable labels. */
+const rippleStyles = (theme: Theme): CSSObject => ({
+  overflow: 'hidden',
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    width: 0,
+    height: 0,
+    borderRadius: '50%',
+    backgroundColor: alpha(theme.palette.primary.main, 0.3),
+    transform: 'translate(-50%, -50%)',
+    transition: 'width 0.6s, height 0.6s',
+  },
+  '&:active::after': { width: '300%', height: '300%' },
+});
+
+interface SurfaceInput {
+  theme: Theme;
+  flags: LabelStyleFlags;
+  /** The resolved text colour, or the primary accent when it resolves to none. */
+  accent: string;
+}
+
+/**
+ * Each variant's own additions. Every arm previously re-spread the same base,
+ * glow, pulse and ripple objects and re-derived the colour for each use; the
+ * shared prefix is applied once by `labelStyles`.
+ *
+ * The hover rules are only attached when the label is clickable, which is what
+ * the `onClick ? {…} : {}` in every arm was saying.
+ */
+const SURFACES: Record<Variant, (input: SurfaceInput) => CSSObject> = {
+  filled: ({ theme, flags, accent }) => ({
+    backgroundColor: alpha(accent, 0.1),
+    borderRadius: theme.spacing(0.5),
+    '&:hover': flags.clickable ? { backgroundColor: alpha(accent, 0.15) } : {},
+  }),
+
+  outlined: ({ theme, flags, accent }) => ({
+    border: `1px solid ${alpha(accent, 0.5)}`,
+    borderRadius: theme.spacing(0.5),
+    '&:hover': flags.clickable
+      ? { borderColor: accent, backgroundColor: alpha(accent, 0.05) }
+      : {},
+  }),
+
+  glass: ({ theme, flags }) => ({
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: 'blur(10px)',
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    borderRadius: theme.spacing(0.5),
+    '&:hover': flags.clickable
+      ? {
+          backgroundColor: alpha(theme.palette.background.paper, 0.15),
+          borderColor: alpha(theme.palette.primary.main, 0.3),
+        }
+      : {},
+  }),
+
+  gradient: ({ theme, flags }) => {
+    const key = flags.color === 'default' ? 'primary' : flags.color;
+    // The gradient paints the glyphs themselves rather than the box behind them.
+    const clip = {
+      WebkitBackgroundClip: 'text',
+      WebkitTextFillColor: 'transparent',
+      backgroundClip: 'text',
+    };
+
+    return {
+      background: `linear-gradient(135deg, ${theme.palette[key].light}, ${theme.palette[key].main})`,
+      ...clip,
+      '&:hover': flags.clickable
+        ? {
+            background: `linear-gradient(135deg, ${theme.palette[key].main}, ${theme.palette[key].dark})`,
+            ...clip,
+          }
+        : {},
+    };
+  },
+
+  minimal: ({ theme, flags }) => ({
+    padding: 0,
+    '&:hover': flags.clickable ? { color: theme.palette.primary.main } : {},
+  }),
+
+  default: () => ({}),
+};
+
+/** How the text sits: its alignment, weight, casing and overflow behaviour. */
+const textLayout = (theme: Theme, flags: LabelStyleFlags): CSSObject => {
+  const { srOnly, clickable, align, weight, transform, nowrap, truncate } = flags;
+
+  return {
+    display: srOnly ? 'none' : 'inline-flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
+    transition: theme.transitions.create(['all'], {
+      duration: theme.transitions.duration.standard,
+    }),
+    cursor: clickable ? 'pointer' : 'default',
+    textAlign: align,
+    fontWeight: fontWeight(weight),
+    textTransform: transform,
+    whiteSpace: nowrap ? 'nowrap' : 'normal',
+    overflow: truncate ? 'hidden' : 'visible',
+    textOverflow: truncate ? 'ellipsis' : 'clip',
+    position: 'relative' as const,
+  };
+};
+
+export const labelStyles = (theme: Theme, flags: LabelStyleFlags): CSSObject => {
+  const { variant, size, clickable } = flags;
+  const color = textColor(theme, flags);
+  const accent = color || theme.palette.primary.main;
+
+  return {
+    ...textLayout(theme, flags),
+    ...sizeStyles(theme, size),
+    color,
+    ...(flags.glow && { textShadow: `0 0 10px ${alpha(accent, 0.5)}` }),
+    ...(flags.pulse && {
+      animation: 'pulse 2s infinite',
+      '@keyframes pulse': {
+        '0%': { opacity: 1 },
+        '50%': { opacity: 0.6 },
+        '100%': { opacity: 1 },
+      },
+    }),
+    ...(flags.ripple && clickable && rippleStyles(theme)),
+    ...(SURFACES[variant] ?? SURFACES.default)({ theme, flags, accent }),
+  };
+};
+
+/** Visually hidden but still read aloud, for the `srOnly` label. */
+export const SR_ONLY_SX: CSSObject = {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+};