@12-apps/ui 1.4.0 → 1.4.1

package/src/components/data-display/Carousel/Carousel.slide.tsx

@@ -0,0 +1,190 @@
+import { Box, Paper, Typography, useTheme } from '@mui/material';
+import React from 'react';
+
+import type { CarouselItem, CarouselProps } from './Carousel.types';
+
+export interface CarouselSlideProps {
+  item: CarouselItem;
+  index: number;
+  isActive: boolean;
+  variant: NonNullable<CarouselProps['variant']>;
+  clickable: boolean;
+  onSelect: (item: CarouselItem, index: number) => void;
+}
+
+/**
+ * A slide's caption. Over an image it is white with a shadow so it stays legible
+ * against whatever the photograph happens to be; on a bare surface it uses the
+ * ordinary text colours.
+ */
+const SlideCaption: React.FC<Pick<CarouselItem, 'title' | 'description' | 'content' | 'image'>> = ({
+  title,
+  description,
+  content,
+  image,
+}) => (
+  <Box sx={{ position: 'relative', zIndex: 1, textAlign: 'center', p: 3 }}>
+    {title && (
+      <Typography
+        variant="h5"
+        sx={{
+          color: image ? 'white' : 'text.primary',
+          textShadow: image ? '0 2px 4px rgba(0,0,0,0.5)' : 'none',
+          mb: 1,
+        }}
+      >
+        {title}
+      </Typography>
+    )}
+
+    {description && (
+      <Typography
+        variant="body1"
+        sx={{
+          color: image ? 'white' : 'text.secondary',
+          textShadow: image ? '0 1px 2px rgba(0,0,0,0.5)' : 'none',
+        }}
+      >
+        {description}
+      </Typography>
+    )}
+
+    {content}
+  </Box>
+);
+
+export const CarouselSlide: React.FC<CarouselSlideProps> = ({
+  item,
+  index,
+  isActive,
+  variant,
+  clickable,
+  onSelect,
+}) => {
+  const theme = useTheme();
+
+  const content = (
+    <Box
+      sx={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        cursor: clickable ? 'pointer' : 'default',
+        position: 'relative',
+      }}
+      onClick={() => onSelect(item, index)}
+    >
+      {item.image && (
+        <Box
+          component="img"
+          src={item.image}
+          alt={item.alt || item.title}
+          sx={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+          }}
+        />
+      )}
+
+      <SlideCaption
+        title={item.title}
+        description={item.description}
+        content={item.content}
+        image={item.image}
+      />
+    </Box>
+  );
+
+  // The cards variant gives each slide its own raised surface, and lifts the
+  // active one further so the stack reads as a deck rather than a strip.
+  if (variant === 'cards') {
+    return (
+      <Paper
+        elevation={isActive ? 8 : 2}
+        sx={{
+          width: '100%',
+          height: '100%',
+          overflow: 'hidden',
+          transform: isActive ? 'scale(1)' : 'scale(0.9)',
+          transition: theme.transitions.create(['transform', 'box-shadow']),
+        }}
+      >
+        {content}
+      </Paper>
+    );
+  }
+
+  return content;
+};
+
+export interface CarouselTrackProps {
+  items: CarouselItem[];
+  activeIndex: number;
+  variant: NonNullable<CarouselProps['variant']>;
+  animation: NonNullable<CarouselProps['animation']>;
+  transition: React.ElementType;
+  clickable: boolean;
+  onSelect: (item: CarouselItem, index: number) => void;
+}
+
+/**
+ * The slides themselves. Every slide stays mounted and absolutely positioned so
+ * the transition has both the outgoing and incoming one to work with; `display`
+ * is what actually hides the rest.
+ */
+export const CarouselTrack: React.FC<CarouselTrackProps> = ({
+  items,
+  activeIndex,
+  variant,
+  animation,
+  transition: Transition,
+  clickable,
+  onSelect,
+}) => (
+  <Box
+    data-testid="carousel-track"
+    sx={{
+      width: '100%',
+      height: '100%',
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+    }}
+  >
+    {items.map((item, index) => (
+      <Transition
+        key={item.id}
+        in={index === activeIndex}
+        timeout={600}
+        {...(animation === 'flip' && { direction: 'left' as const })}
+      >
+        <Box
+          data-testid={`carousel-slide-${index}`}
+          data-active={index === activeIndex}
+          sx={{
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            display: index === activeIndex ? 'block' : 'none',
+          }}
+        >
+          <CarouselSlide
+            item={item}
+            index={index}
+            isActive={index === activeIndex}
+            variant={variant}
+            clickable={clickable}
+            onSelect={onSelect}
+          />
+        </Box>
+      </Transition>
+    ))}
+  </Box>
+);

package/src/components/data-display/Carousel/Carousel.styles.ts

@@ -0,0 +1,86 @@
+import { alpha } from '@mui/material';
+import type { CSSObject, Theme } from '@mui/material';
+
+import type { CarouselProps } from './Carousel.types';
+
+type Variant = NonNullable<CarouselProps['variant']>;
+type Size = NonNullable<CarouselProps['size']>;
+type Color = NonNullable<CarouselProps['color']>;
+
+const SIZES: Record<Size, { height: number; fontSize: string }> = {
+  xs: { height: 200, fontSize: '0.75rem' },
+  sm: { height: 300, fontSize: '0.875rem' },
+  md: { height: 400, fontSize: '1rem' },
+  lg: { height: 500, fontSize: '1.125rem' },
+  xl: { height: 600, fontSize: '1.25rem' },
+};
+
+const sizeStyles = (size: Size) => SIZES[size] ?? SIZES.md;
+
+interface ContainerStyleInput {
+  theme: Theme;
+  variant: Variant;
+  size: Size;
+  color: Color;
+  height: number | string;
+  width: number | string;
+  glow: boolean;
+  pulse: boolean;
+  glass: boolean;
+  gradient: boolean;
+}
+
+/**
+ * Each variant's own additions to the shared frame. The old switch re-spread the
+ * same base, glow and pulse objects in all six arms before adding these; only
+ * these differ, so the shared prefix is applied once by `containerStyles`.
+ */
+const SURFACES: Record<Variant, (input: ContainerStyleInput) => CSSObject> = {
+  glass: ({ theme, color, glass }) => ({
+    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.9),
+    backdropFilter: 'blur(20px)',
+    border: `1px solid ${alpha(theme.palette[color].main, 0.2)}`,
+  }),
+
+  gradient: ({ theme, color, gradient }) => ({
+    background: gradient
+      ? `linear-gradient(135deg, ${alpha(theme.palette[color].light, 0.1)}, ${alpha(theme.palette[color].dark, 0.1)})`
+      : 'transparent',
+  }),
+
+  elevated: ({ theme }) => ({ boxShadow: theme.shadows[8] }),
+
+  minimal: () => ({ border: 'none', boxShadow: 'none' }),
+
+  cards: ({ theme }) => ({ padding: theme.spacing(2) }),
+
+  default: () => ({}),
+};
+
+export const containerStyles = (input: ContainerStyleInput): CSSObject => {
+  const { theme, variant, size, color, height, width, glow, pulse } = input;
+  const accent = theme.palette[color].main;
+
+  return {
+    position: 'relative' as const,
+    width,
+    // A numeric height is taken literally; anything else falls back to the size
+    // preset, since a percentage cannot resolve against an unsized parent here.
+    height: typeof height === 'number' ? height : sizeStyles(size).height,
+    overflow: 'hidden',
+    borderRadius: theme.spacing(1),
+    transition: theme.transitions.create(['all'], {
+      duration: theme.transitions.duration.standard,
+    }),
+    ...(glow && { boxShadow: `0 0 30px ${alpha(accent, 0.4)}` }),
+    ...(pulse && {
+      animation: 'pulse 2s infinite',
+      '@keyframes pulse': {
+        '0%': { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },
+        '70%': { boxShadow: `0 0 0 20px ${alpha(accent, 0)}` },
+        '100%': { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` },
+      },
+    }),
+    ...(SURFACES[variant] ?? SURFACES.default)(input),
+  };
+};