fluent-styles 1.53.0 → 1.55.0

package/src/timeline/index.tsx

@@ -0,0 +1,374 @@
+/**
+ * StyledTimeline.tsx
+ * ──────────────────
+ * A fully reusable, data-driven vertical timeline component for fluent-styles.
+ *
+ * Features:
+ *  • Accepts JSON data OR React children (or both)
+ *  • Animated dot entrance on mount
+ *  • Customisable dot size, colour, line style, connector colour
+ *  • Time label column on the left (start + end)
+ *  • Right content slot: any ReactNode per item
+ *  • Variants: default · compact · spacious
+ *  • Full TypeScript props
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import {
+  Stack,
+  StyledText,
+  StyledPressable,
+  theme,
+  palettes,
+} from 'fluent-styles';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type TimelineVariant = 'default' | 'compact' | 'spacious';
+export type TimelineDotShape = 'circle' | 'filled' | 'ring';
+
+export interface TimelineItem {
+  /** Unique key for this entry */
+  id: string;
+  /** Primary time label (e.g. "11:35") */
+  time: string;
+  /** Secondary time label shown below primary (e.g. "13:05") */
+  endTime?: string;
+  /**
+   * Arbitrary content rendered to the right of the timeline.
+   * If provided, `renderItem` and the data fields below are ignored.
+   */
+  content?: React.ReactNode;
+  // ── Convenience data fields (used by default renderItem) ──
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  /** Any extra data you want to pass through */
+  meta?: Record<string, unknown>;
+}
+
+export interface StyledTimelineColors {
+  /** Vertical connector line. Default: theme.colors.gray[200] */
+  line?: string;
+  /** Default dot fill/stroke. Default: '#8bc34a' */
+  dot?: string;
+  /** Dot border (for 'ring' shape). Default: palettes.white */
+  dotBorder?: string;
+  /** Time text colour. Default: theme.colors.gray[900] */
+  timeText?: string;
+  /** Secondary time (endTime) colour. Default: theme.colors.gray[400] */
+  endTimeText?: string;
+}
+
+export interface StyledTimelineProps {
+  /**
+   * Array of timeline entries.
+   * Each item must have `id` and `time`.
+   * Provide `content` for fully custom rendering, or use convenience fields.
+   */
+  items?: TimelineItem[];
+
+  /**
+   * Custom render function per item.
+   * Receives the item and its index.
+   * Takes priority over `item.content` and the default renderer.
+   */
+  renderItem?: (item: TimelineItem, index: number) => React.ReactNode;
+
+  /**
+   * React children are appended after `items` in the timeline.
+   * Each direct child is treated as a standalone timeline entry
+   * WITHOUT a time label — useful for one-off custom nodes.
+   */
+  children?: React.ReactNode;
+
+  /** Visual density. Default: 'default' */
+  variant?: TimelineVariant;
+
+  /** Dot shape. Default: 'filled' */
+  dotShape?: TimelineDotShape;
+
+  /** Dot diameter in px. Default: 10 */
+  dotSize?: number;
+
+  /** Width of the time label column. Default: 56 */
+  timeColumnWidth?: number;
+
+  /** Gap between the time column and the content area. Default: 16 */
+  timeGap?: number;
+
+  /** Whether to animate dots on mount. Default: true */
+  animated?: boolean;
+
+  /** Colour overrides */
+  colors?: StyledTimelineColors;
+
+  /** Called when an item is pressed (only fires if item has no custom onPress) */
+  onItemPress?: (item: TimelineItem) => void;
+}
+
+// ─── Size tokens ──────────────────────────────────────────────────────────────
+
+const VARIANT_GAP: Record<TimelineVariant, number> = {
+  compact:  12,
+  default:  20,
+  spacious: 32,
+};
+
+// ─── Animated dot ─────────────────────────────────────────────────────────────
+
+const TimelineDot: React.FC<{
+  size: number;
+  color: string;
+  borderColor: string;
+  shape: TimelineDotShape;
+  animated: boolean;
+  delay: number;
+}> = ({ size, color, borderColor, shape, animated: anim, delay }) => {
+  const scale = useRef(new Animated.Value(anim ? 0 : 1)).current;
+
+  useEffect(() => {
+    if (!anim) return;
+    Animated.timing(scale, {
+      toValue:         1,
+      duration:        300,
+      delay,
+      easing:          Easing.out(Easing.back(1.8)),
+      useNativeDriver: true,
+    }).start();
+  }, []);
+
+  const inner =
+    shape === 'circle' ? (
+      <Stack
+        width={size}
+        height={size}
+        borderRadius={size / 2}
+        backgroundColor="transparent"
+        borderWidth={2}
+        borderColor={color}
+      />
+    ) : shape === 'ring' ? (
+      <Stack
+        width={size}
+        height={size}
+        borderRadius={size / 2}
+        backgroundColor={borderColor}
+        borderWidth={2.5}
+        borderColor={color}
+      />
+    ) : (
+      // filled (default)
+      <Stack
+        width={size}
+        height={size}
+        borderRadius={size / 2}
+        backgroundColor={color}
+      />
+    );
+
+  return (
+    <Animated.View style={{ transform: [{ scale }] }}>
+      {inner}
+    </Animated.View>
+  );
+};
+
+// ─── Default item renderer ────────────────────────────────────────────────────
+
+const DefaultItemContent: React.FC<{ item: TimelineItem }> = ({ item }) => (
+  <Stack flex={1} gap={4}>
+    {item.title && (
+      <StyledText
+        fontSize={theme.fontSize.normal}
+        fontWeight={theme.fontWeight.semiBold}
+        color={theme.colors.gray[900]}
+      >
+        {item.title}
+      </StyledText>
+    )}
+    {item.subtitle && (
+      <StyledText fontSize={theme.fontSize.small} color={theme.colors.gray[500]}>
+        {item.subtitle}
+      </StyledText>
+    )}
+    {item.description && (
+      <StyledText fontSize={theme.fontSize.small} color={theme.colors.gray[400]}>
+        {item.description}
+      </StyledText>
+    )}
+  </Stack>
+);
+
+// ─── StyledTimeline ───────────────────────────────────────────────────────────
+
+/**
+ * StyledTimeline — vertical data-driven timeline for fluent-styles apps.
+ *
+ * @example JSON-driven (minimal)
+ * ```tsx
+ * <StyledTimeline
+ *   items={[
+ *     { id: '1', time: '09:00', title: 'Morning Run',    subtitle: 'Cardio · 5km'  },
+ *     { id: '2', time: '11:30', title: 'Strength Class', subtitle: 'Upper body'    },
+ *     { id: '3', time: '14:00', title: 'Yoga',           subtitle: 'Recovery'      },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Custom renderItem
+ * ```tsx
+ * <StyledTimeline
+ *   items={workoutItems}
+ *   renderItem={(item) => <WorkoutCard item={item} />}
+ * />
+ * ```
+ *
+ * @example Mixed: data + inline children
+ * ```tsx
+ * <StyledTimeline items={scheduleItems}>
+ *   <NoteCard note="Don't forget to hydrate!" />
+ * </StyledTimeline>
+ * ```
+ *
+ * @example Custom colours
+ * ```tsx
+ * <StyledTimeline
+ *   items={items}
+ *   colors={{ dot: '#2196f3', line: '#bbdefb' }}
+ *   dotShape="ring"
+ *   variant="spacious"
+ * />
+ * ```
+ */
+export const StyledTimeline: React.FC<StyledTimelineProps> = ({
+  items = [],
+  renderItem,
+  children,
+  variant           = 'default',
+  dotShape          = 'filled',
+  dotSize           = 10,
+  timeColumnWidth   = 56,
+  timeGap           = 16,
+  animated          = true,
+  colors: colorsProp,
+  onItemPress,
+}) => {
+  const C = {
+    line:        colorsProp?.line        ?? theme.colors.gray[200],
+    dot:         colorsProp?.dot         ?? '#8bc34a',
+    dotBorder:   colorsProp?.dotBorder   ?? palettes.white,
+    timeText:    colorsProp?.timeText    ?? theme.colors.gray[900],
+    endTimeText: colorsProp?.endTimeText ?? theme.colors.gray[400],
+  };
+
+  const gap         = VARIANT_GAP[variant];
+  const childArray  = React.Children.toArray(children);
+
+  // Convert children into pseudo-items so they render in the same loop
+  const childItems: TimelineItem[] = childArray.map((child, i) => ({
+    id:      `__child_${i}`,
+    time:    '',
+    content: child as React.ReactNode,
+  }));
+
+  const allItems = [...items, ...childItems];
+
+  // ── Row height measurement for line drawing ──────────────────────────────
+  // We use a simple layout: each row renders into a measured Stack.
+  // The connector line is drawn as a fixed-width left column overlay.
+
+  return (
+    <Stack>
+      {allItems.map((item, index) => {
+        const isLast   = index === allItems.length - 1;
+        const hasTime  = !!item.time;
+
+        // Resolve content
+        const resolvedContent = item.content
+          ? item.content
+          : renderItem
+          ? renderItem(item, index)
+          : <DefaultItemContent item={item} />;
+
+        return (
+          <Stack key={item.id} horizontal alignItems="stretch">
+
+            {/* ── Left: time + connector ── */}
+            <Stack width={timeColumnWidth} alignItems="flex-end" paddingRight={12}>
+
+              {/* Time labels */}
+              <Stack alignItems="flex-end" gap={2} paddingTop={2}>
+                {hasTime && (
+                  <StyledText
+                    fontSize={theme.fontSize.normal}
+                    fontWeight={theme.fontWeight.semiBold}
+                    color={C.timeText}
+                    numberOfLines={1}
+                  >
+                    {item.time}
+                  </StyledText>
+                )}
+                {item.endTime && (
+                  <StyledText
+                    fontSize={theme.fontSize.small}
+                    color={C.endTimeText}
+                    numberOfLines={1}
+                  >
+                    {item.endTime}
+                  </StyledText>
+                )}
+              </Stack>
+            </Stack>
+
+            {/* ── Centre: dot + vertical line ── */}
+            <Stack alignItems="center" width={dotSize + 12}>
+
+              {/* Dot */}
+              <Stack paddingTop={4}>
+                <TimelineDot
+                  size={dotSize}
+                  color={C.dot}
+                  borderColor={C.dotBorder}
+                  shape={dotShape}
+                  animated={animated}
+                  delay={index * 60}
+                />
+              </Stack>
+
+              {/* Connector line below the dot */}
+              {!isLast && (
+                <Stack
+                  flex={1}
+                  width={1.5}
+                  backgroundColor={C.line}
+                  marginTop={4}
+                  marginBottom={0}
+                  style={{ minHeight: gap }}
+                />
+              )}
+            </Stack>
+
+            {/* ── Right: content ── */}
+            <Stack
+              flex={1}
+              paddingLeft={timeGap}
+              paddingBottom={isLast ? 0 : gap}
+            >
+              <StyledPressable
+                onPress={() => onItemPress?.(item)}
+                style={{ flex: 1 }}
+              >
+                {resolvedContent}
+              </StyledPressable>
+            </Stack>
+
+          </Stack>
+        );
+      })}
+    </Stack>
+  );
+};
+
+export default StyledTimeline;

package/src/toast/index.tsx

@@ -0,0 +1,172 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import {
+  Animated,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  useColorScheme,
+  View,
+} from 'react-native'
+import {
+  ComponentTheme,
+  resolveTheme,
+  ToastColors,
+  TOAST_DARK,
+  TOAST_LIGHT,
+} from '../utiles/theme'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info'
+
+export type ToastProps = {
+  message:      string
+  description?: string
+  variant?:     ToastVariant
+  /** Auto-dismiss after ms. Pass `0` to disable. Default: 3500. */
+  duration?:    number
+  /** Called after the exit animation completes — used by the hook to unmount. */
+  onDismiss?:   () => void
+  /**
+   * Color scheme. `'dark'` (default) | `'light'` | `'system'`.
+   */
+  theme?:       ComponentTheme
+  /**
+   * Fine-grained token overrides on top of the active theme.
+   * @example
+   * ```tsx
+   * toast.show({ variant: 'success', theme: 'light', colors: { successBorder: '#059669' } })
+   * ```
+   */
+  colors?:      Partial<ToastColors>
+}
+
+// ─── Icon map ─────────────────────────────────────────────────────────────────
+
+const VARIANT_ICON: Record<ToastVariant, string> = {
+  success: '✓',
+  error:   '✕',
+  warning: '!',
+  info:    'i',
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export const Toast: React.FC<ToastProps> = ({
+  message,
+  description,
+  variant      = 'info',
+  duration     = 3500,
+  onDismiss,
+  theme        = 'dark',
+  colors: colorOverrides,
+}) => {
+  const deviceScheme = useColorScheme()
+
+  const colors = useMemo<ToastColors>(() => {
+    const base = resolveTheme(theme, deviceScheme) === 'light' ? TOAST_LIGHT : TOAST_DARK
+    return colorOverrides ? { ...base, ...colorOverrides } : base
+  }, [theme, deviceScheme, colorOverrides])
+
+  // Resolved per-variant tokens
+  const bg     = colors[`${variant}Bg`     as keyof ToastColors] as string
+  const border = colors[`${variant}Border` as keyof ToastColors] as string
+  const label  = colors[`${variant}Label`  as keyof ToastColors] as string
+  const icon   = VARIANT_ICON[variant]
+
+  // ── Animation ────────────────────────────────────────────────────────────
+  const translateY   = useRef(new Animated.Value(-20)).current
+  const opacity      = useRef(new Animated.Value(0)).current
+  const isDismissing = useRef(false)
+
+  const onDismissRef = useRef(onDismiss)
+  useEffect(() => { onDismissRef.current = onDismiss }, [onDismiss])
+
+  const dismiss = useCallback(() => {
+    if (isDismissing.current) return
+    isDismissing.current = true
+    Animated.parallel([
+      Animated.timing(translateY, { toValue: -20, duration: 220, useNativeDriver: true }),
+      Animated.timing(opacity,    { toValue: 0,   duration: 220, useNativeDriver: true }),
+    ]).start(() => onDismissRef.current?.())
+  }, [translateY, opacity])
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.spring(translateY, { toValue: 0, useNativeDriver: true, damping: 18, stiffness: 200 }),
+      Animated.timing(opacity,    { toValue: 1, duration: 200, useNativeDriver: true }),
+    ]).start()
+    if (duration > 0) {
+      const t = setTimeout(dismiss, duration)
+      return () => clearTimeout(t)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // ── Render ───────────────────────────────────────────────────────────────
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        { backgroundColor: bg, borderColor: border, opacity, transform: [{ translateY }] },
+      ]}
+    >
+      {/* Icon badge */}
+      <View style={[styles.iconBadge, { borderColor: border }]}>
+        <Text style={[styles.iconText, { color: label }]}>{icon}</Text>
+      </View>
+
+      {/* Text */}
+      <View style={styles.textBlock}>
+        <Text style={[styles.message, { color: label }]}>{message}</Text>
+        {description ? (
+          <Text style={[styles.description, { color: colors.description }]}>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+
+      {/* Close */}
+      <TouchableOpacity onPress={dismiss} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+        <Text style={[styles.close, { color: colors.closeIcon }]}>✕</Text>
+      </TouchableOpacity>
+    </Animated.View>
+  )
+}
+
+// ─── Styles (layout only) ─────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection:     'row',
+    alignItems:        'center',
+    borderWidth:       1,
+    borderRadius:      10,
+    paddingHorizontal: 14,
+    paddingVertical:   12,
+    gap:               12,
+    minWidth:          280,
+    maxWidth:          360,
+    shadowColor:       '#000',
+    shadowOffset:      { width: 0, height: 8 },
+    shadowOpacity:     0.2,
+    shadowRadius:      16,
+    elevation:         8,
+  },
+  iconBadge: {
+    width:          28,
+    height:         28,
+    borderRadius:   14,
+    borderWidth:    1.5,
+    alignItems:     'center',
+    justifyContent: 'center',
+  },
+  iconText:    { fontSize: 13, fontWeight: '700' },
+  textBlock:   { flex: 1, gap: 2 },
+  message:     { fontSize: 14, fontWeight: '600', letterSpacing: 0.1 },
+  description: { fontSize: 12, lineHeight: 16 },
+  close:       { fontSize: 12, fontWeight: '600' },
+})
+
+export { TOAST_DARK, TOAST_LIGHT }
+export type { ToastColors }

package/src/toast/useToast.tsx

@@ -0,0 +1,93 @@
+import { useCallback, useRef } from 'react'
+import React from 'react'
+import { usePortal } from '../portal/PortalContext'
+import { Toast, ToastProps, ToastVariant } from './'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type ShowOptions = Omit<ToastProps, 'onDismiss'>
+
+type ToastAPI = {
+  show:    (options: ShowOptions) => number
+  success: (message: string, description?: string) => number
+  error:   (message: string, description?: string) => number
+  warning: (message: string, description?: string) => number
+  info:    (message: string, description?: string) => number
+  dismiss: (id: number) => void
+  dismissAll: () => void
+}
+
+// ─── Hook ─────────────────────────────────────────────────────────────────────
+
+/**
+ * Declarative toast hook — requires a `PortalManager` ancestor.
+ *
+ * @example
+ * ```tsx
+ * const toast = useToast()
+ *
+ * // Convenience shortcuts
+ * toast.success('Profile saved')
+ * toast.error('Upload failed', 'Max file size is 5 MB')
+ *
+ * // Full control
+ * const id = toast.show({ message: 'Processing…', duration: 0, variant: 'info' })
+ * // Later:
+ * toast.dismiss(id)
+ * ```
+ */
+export function useToast(): ToastAPI {
+  const { mount, unmount } = usePortal()
+  // Track all active ids so dismissAll() works
+  const activeIds = useRef<Set<number>>(new Set())
+
+  const show = useCallback(
+    (options: ShowOptions): number => {
+      let id: number
+
+      const handleDismiss = () => {
+        unmount(id)
+        activeIds.current.delete(id)
+      }
+
+      id = mount(
+        <Toast {...options} onDismiss={handleDismiss} />,
+        { position: 'top', offset: { x: 0, y: 56 } },
+      )
+
+      activeIds.current.add(id)
+      return id
+    },
+    [mount, unmount],
+  )
+
+  const shortcut = useCallback(
+    (variant: ToastVariant) =>
+      (message: string, description?: string): number =>
+        show({ message, description, variant }),
+    [show],
+  )
+
+  const dismiss = useCallback(
+    (id: number) => {
+      unmount(id)
+      activeIds.current.delete(id)
+    },
+    [unmount],
+  )
+
+  const dismissAll = useCallback(() => {
+    activeIds.current.forEach(id => unmount(id))
+    activeIds.current.clear()
+  }, [unmount])
+
+  return {
+    show,
+    success: shortcut('success'),
+    error:   shortcut('error'),
+    warning: shortcut('warning'),
+    info:    shortcut('info'),
+    dismiss,
+    dismissAll,
+  }
+}

package/src/utiles/createIcon.ts

@@ -0,0 +1,44 @@
+import React from 'react'
+
+/**
+ * Creates a reusable icon component with standardised size, color, and strokeWidth props.
+ *
+ * @template P - Additional props passed through to the underlying Svg element
+ *
+ * @param {IconRenderer<P>} renderer - A render function that receives resolved icon props
+ *   and any extra SVG props, and returns a React element containing the Svg markup.
+ *
+ * @returns {React.FC<IconProps & P>} A React functional component that accepts:
+ *   - `size`        {number}  Width and height in dp. Default: `24`
+ *   - `color`       {string}  Stroke (and optional fill) color. Default: `"currentColor"`
+ *   - `strokeWidth` {number}  Stroke thickness in SVG units. Default: `1.5`
+ *   - `...props`    {P}       Any additional props forwarded to the Svg element
+ *
+ * @example
+ * const BackArrow = createIcon(({ size, color, strokeWidth }, props) => (
+ *   <Svg width={size} height={size} viewBox="0 0 24 24" {...props}>
+ *     <Path d="M19 12H5"      stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" fill="none" />
+ *     <Path d="M12 19l-7-7 7-7" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+ *   </Svg>
+ * ))
+ *
+ * // Usage
+ * <BackArrow size={20} color={theme.text} strokeWidth={2} />
+ */
+
+type IconProps = {
+  size?: number
+  color?: string
+  strokeWidth?: number
+  [key: string]: any
+}
+
+type IconRenderer = (props: IconProps, svgProps: any) => React.ReactElement
+
+export function createIcon(renderer: IconRenderer) {
+  const Icon = ({ size = 24, color = 'currentColor', strokeWidth = 1.5, ...props }: IconProps) => {
+    return renderer({ size, color, strokeWidth }, props)
+  }
+  Icon.displayName = 'Icon'
+  return Icon
+}