fluent-styles 1.54.0 → 1.55.0

package/src/emptyState/index.tsx

@@ -0,0 +1,287 @@
+/**
+ * StyledEmptyState
+ *
+ * A data-empty / zero-state display with:
+ * - 5 variants: default | card | minimal | illustrated | action-focused
+ * - Illustration slot (emoji, icon, or custom ReactNode)
+ * - Primary + secondary action buttons
+ * - Animated entrance (fade + slide-up)
+ * - Compact mode for inline use
+ * - Full colour token overrides
+ *
+ * Rules:
+ * - Stack / StyledText / StyledPressable / StyledCard — no bare View/Text
+ * - No StyleSheet.create
+ * - Colours from theme.colors / palettes
+ * - Children typed as CompatNode
+ */
+
+import React, { useEffect, useRef, type ReactNode } from 'react'
+import { Animated } from 'react-native'
+import { Stack, StyledText, StyledPressable, StyledCard, theme, palettes } from 'fluent-styles'
+
+// ─── CompatNode ───────────────────────────────────────────────────────────────
+type CompatNode = ReactNode
+
+// ─── Tokens ───────────────────────────────────────────────────────────────────
+export interface EmptyStateColors {
+  background:       string
+  illustrationBg:   string
+  title:            string
+  description:      string
+  primaryBg:        string
+  primaryText:      string
+  primaryBorder:    string
+  secondaryBg:      string
+  secondaryText:    string
+  secondaryBorder:  string
+  border:           string
+}
+
+const DEFAULT_COLORS: EmptyStateColors = {
+  background:       'transparent',
+  illustrationBg:   theme.colors.gray[100],
+  title:            theme.colors.gray[900],
+  description:      theme.colors.gray[400],
+  primaryBg:        theme.colors.gray[900],
+  primaryText:      palettes.white,
+  primaryBorder:    theme.colors.gray[900],
+  secondaryBg:      'transparent',
+  secondaryText:    theme.colors.gray[700],
+  secondaryBorder:  theme.colors.gray[200],
+  border:           theme.colors.gray[100],
+}
+
+// ─── Action ───────────────────────────────────────────────────────────────────
+export interface EmptyStateAction {
+  label:    string
+  onPress:  () => void
+  icon?:    CompatNode
+  variant?: 'primary' | 'secondary'
+}
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+export type EmptyStateVariant = 'default' | 'card' | 'minimal' | 'illustrated' | 'action'
+
+export interface StyledEmptyStateProps {
+  variant?:      EmptyStateVariant
+  /** Emoji string, icon component, or any ReactNode */
+  illustration?: CompatNode
+  title?:        string
+  description?:  string
+  actions?:      EmptyStateAction[]
+  /** Compact horizontal layout */
+  compact?:      boolean
+  animated?:     boolean
+  colors?:       Partial<EmptyStateColors>
+  /** Padding around the whole container */
+  padding?:      number
+  children?:     CompatNode
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+export const StyledEmptyState: React.FC<StyledEmptyStateProps> = ({
+  variant     = 'default',
+  illustration,
+  title,
+  description,
+  actions     = [],
+  compact     = false,
+  animated    = true,
+  colors: overrides,
+  padding     = 32,
+  children,
+}) => {
+  const c = { ...DEFAULT_COLORS, ...overrides }
+
+  const fadeAnim   = useRef(new Animated.Value(animated ? 0 : 1)).current
+  const slideAnim  = useRef(new Animated.Value(animated ? 16 : 0)).current
+
+  useEffect(() => {
+    if (!animated) return
+    Animated.parallel([
+      Animated.timing(fadeAnim,  { toValue: 1, duration: 380, delay: 80, useNativeDriver: true }),
+      Animated.timing(slideAnim, { toValue: 0, duration: 340, delay: 80, useNativeDriver: true }),
+    ]).start()
+  }, [])
+
+  // ── Illustration area ────────────────────────────────────────────────────
+  const renderIllustration = () => {
+    if (!illustration && variant !== 'illustrated') return null
+
+    const isEmoji = typeof illustration === 'string'
+
+    if (variant === 'minimal') {
+      return (
+        <StyledText fontSize={compact ? 28 : 40} textAlign="center">
+          {isEmoji ? illustration : '◌'}
+        </StyledText>
+      )
+    }
+
+    if (variant === 'illustrated') {
+      return (
+        <Stack
+          width={compact ? 56 : 96}
+          height={compact ? 56 : 96}
+          borderRadius={compact ? 28 : 48}
+          backgroundColor={c.illustrationBg}
+          alignItems="center"
+          justifyContent="center"
+        >
+          {isEmoji
+            ? <StyledText fontSize={compact ? 24 : 40}>{illustration}</StyledText>
+            : illustration ?? <StyledText fontSize={32}>📭</StyledText>
+          }
+        </Stack>
+      )
+    }
+
+    // default / card / action
+    return (
+      <Stack
+        width={compact ? 48 : 80}
+        height={compact ? 48 : 80}
+        borderRadius={compact ? 24 : 40}
+        backgroundColor={c.illustrationBg}
+        alignItems="center"
+        justifyContent="center"
+      >
+        {isEmoji
+          ? <StyledText fontSize={compact ? 20 : 36}>{illustration}</StyledText>
+          : illustration
+        }
+      </Stack>
+    )
+  }
+
+  // ── Action buttons ───────────────────────────────────────────────────────
+  const renderActions = () => {
+    if (actions.length === 0) return null
+    return (
+      <Stack
+        horizontal={compact || actions.length > 1}
+        gap={10}
+        marginTop={compact ? 0 : 4}
+        flexWrap="wrap"
+        justifyContent={compact ? 'flex-start' : 'center'}
+      >
+        {actions.map((action, idx) => {
+          const isPrimary = action.variant === 'primary' || idx === 0
+          return (
+            <StyledPressable
+              key={action.label}
+              onPress={action.onPress}
+              flexDirection='row'
+              alignItems="center"
+              gap={6}
+              paddingHorizontal={18}
+              paddingVertical={10}
+              borderRadius={10}
+              backgroundColor={isPrimary ? c.primaryBg : c.secondaryBg}
+              borderWidth={1}
+              borderColor={isPrimary ? c.primaryBorder : c.secondaryBorder}
+            >
+              {action.icon && <Stack>{action.icon}</Stack>}
+              <StyledText
+                fontSize={14}
+                fontWeight="600"
+                color={isPrimary ? c.primaryText : c.secondaryText}
+              >
+                {action.label}
+              </StyledText>
+            </StyledPressable>
+          )
+        })}
+      </Stack>
+    )
+  }
+
+  // ── Text block ───────────────────────────────────────────────────────────
+  const renderText = () => (
+    <Stack gap={6} flex={compact ? 1 : undefined} alignItems={compact ? 'flex-start' : 'center'}>
+      {title && (
+        <StyledText
+          fontSize={compact ? 15 : 18}
+          fontWeight="700"
+          color={c.title}
+          textAlign={compact ? 'left' : 'center'}
+        >
+          {title}
+        </StyledText>
+      )}
+      {description && (
+        <StyledText
+          fontSize={compact ? 13 : 14}
+          color={c.description}
+          textAlign={compact ? 'left' : 'center'}
+          lineHeight={20}
+        >
+          {description}
+        </StyledText>
+      )}
+    </Stack>
+  )
+
+  // ── Inner content ────────────────────────────────────────────────────────
+  const inner = (
+    <Animated.View
+      style={{
+        opacity:   fadeAnim,
+        transform: [{ translateY: slideAnim }],
+        width:     '100%',
+      }}
+    >
+      <Stack
+        horizontal={compact}
+        alignItems="center"
+        gap={compact ? 14 : 16}
+        padding={padding}
+        backgroundColor={variant === 'card' ? undefined : c.background}
+      >
+        {renderIllustration()}
+        <Stack
+          gap={compact ? 8 : 12}
+          alignItems={compact ? 'flex-start' : 'center'}
+          flex={compact ? 1 : undefined}
+        >
+          {renderText()}
+          {!compact && renderActions()}
+          {children}
+        </Stack>
+        {compact && renderActions()}
+      </Stack>
+    </Animated.View>
+  )
+
+  if (variant === 'card') {
+    return (
+      <StyledCard
+        shadow="light"
+        borderRadius={16}
+        backgroundColor={c.background === 'transparent' ? palettes.white : c.background}
+        overflow="hidden"
+      >
+        {inner}
+      </StyledCard>
+    )
+  }
+
+  if (variant === 'illustrated') {
+    return (
+      <Stack
+        borderRadius={16}
+        borderWidth={1}
+        borderColor={c.border}
+        overflow="hidden"
+        backgroundColor={c.background}
+      >
+        {inner}
+      </Stack>
+    )
+  }
+
+  return inner
+}
+
+export default StyledEmptyState

package/src/header/index.tsx

@@ -0,0 +1,217 @@
+import React from "react";
+import {
+  useWindowDimensions,
+  View,
+  ViewProps,
+  ViewStyle,
+  Platform,
+} from "react-native";
+import { styled } from "../utiles/styled";
+import { getStatusBarHeight } from "../utiles/statusBar";
+import { Stack } from "../stack";
+import StatusBar, { StatusBarProps } from "./statusBar";
+import { StyleShape, ShapeProps } from "../shape";
+import { StyledText, StyledTextProps } from "../text";
+import { ChevronLeft } from "../icons";
+import { theme } from "../utiles/theme";
+
+// Types
+export interface BackArrowProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  onPress?: () => void;
+}
+
+export interface HeaderProps extends ViewProps, ViewStyle {
+  showBackArrow?: boolean;
+  title?: string;
+  titleProps?: StyledTextProps;
+  titleAlignment?: "left" | "center" | "right";
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  backArrowProps?: BackArrowProps;
+  shapeProps?: ShapeProps;
+  onBackPress?: () => void;
+  showStatusBar?: boolean;
+  statusBarProps?: StatusBarProps;
+  skipStatusBarOnAndroid?: boolean;
+  skipStatusBarOnIOS?: boolean;
+}
+
+export interface FullHeaderProps extends ViewProps, ViewStyle {
+  children?: React.ReactNode;
+  statusBarProps?: StatusBarProps;
+  skipStatusBarOnAndroid?: boolean;
+  skipStatusBarOnIOS?: boolean;
+}
+
+// Styled Components
+const StyledHeaderContainer = styled<ViewProps & ViewStyle>(View, {
+  base: {
+    position: "relative",
+    flexDirection: "row",
+    alignItems: "center",
+   justifyContent: "space-between",
+    height: Platform.select({
+      ios: 44,
+      android: 56,
+      default: 56,
+    }),
+  },
+});
+
+// Full Header Component
+const FullHeader = React.forwardRef<
+  React.ComponentPropsWithRef<typeof StyledHeaderContainer>,
+  FullHeaderProps
+>(
+  (
+    {
+      children,
+      statusBarProps,
+      skipStatusBarOnAndroid = true,
+      skipStatusBarOnIOS = true,
+      ...rest
+    },
+    ref,
+  ) => {
+    const { width } = useWindowDimensions();
+
+    return (
+      <Stack vertical>
+        <StatusBar {...statusBarProps} />
+        <StyledHeaderContainer
+          ref={ref}
+          width={width}
+          marginTop={getStatusBarHeight({
+           skipAndroid:  skipStatusBarOnAndroid,
+           skipIos: skipStatusBarOnIOS,
+          })}
+          {...rest}
+        >
+          {children}
+        </StyledHeaderContainer>
+      </Stack>
+    );
+  },
+);
+
+// Main Header Component
+const HeaderComponent = React.forwardRef<
+  React.ComponentPropsWithRef<typeof StyledHeaderContainer>,
+  HeaderProps
+>(
+  (
+    {
+      showBackArrow,
+      backArrowProps,
+      showStatusBar = true,
+      onBackPress,
+      title,
+      titleAlignment = "left",
+      titleProps,
+      leftIcon,
+      rightIcon,
+      shapeProps,
+      statusBarProps,
+      skipStatusBarOnAndroid = true,
+      skipStatusBarOnIOS = true,
+      ...rest
+    },
+    ref,
+  ) => {
+    const renderLeftSection = () => {
+      if (titleAlignment !== "left") return null;
+      return (
+        <Stack
+          flex={titleAlignment === "left" ? 2 : 1}
+          alignItems={"center" }
+          justifyContent={showBackArrow ? "flex-start" : "flex-start"}
+          horizontal
+        >
+          {showBackArrow && (
+            <StyleShape cycle {...shapeProps}>
+              <ChevronLeft
+                size={32}
+                color={theme.colors.gray[1]}
+                onPress={onBackPress}
+                {...backArrowProps}
+              />
+            </StyleShape>
+          )}
+
+          {leftIcon}
+
+          {titleAlignment === "left" && title && (
+            <StyledText marginLeft={showBackArrow ? 24 : 0} {...titleProps}>
+              {title}
+            </StyledText>
+          )}
+        </Stack>
+      );
+    };
+
+    const renderCenterSection = () => {
+      if (titleAlignment !== "center" || !title) return null;
+      return (
+        <Stack
+          flex={titleAlignment === "center" ? 8 : 1}
+          flexWrap="nowrap"
+          alignItems="center"
+        >
+          {titleAlignment === "center" && title && (
+            <StyledText {...titleProps}>{title}</StyledText>
+          )}
+        </Stack>
+      );
+    };
+
+    const renderRightSection = () => {
+      if (!rightIcon) return null;
+      return (
+        <Stack
+          flex={1}
+          backgroundColor={theme.colors.gray[1]}
+          alignItems="flex-end"
+        >
+          {rightIcon}
+        </Stack>
+      );
+    };
+
+    return (
+      <Stack vertical>
+        <StatusBar {...statusBarProps} />
+        <StyledHeaderContainer
+          ref={ref}
+          marginTop={getStatusBarHeight({
+            skipAndroid: skipStatusBarOnAndroid,
+            skipIos: skipStatusBarOnIOS,
+          })}
+          {...rest}
+        >
+          {renderLeftSection()}
+          {renderCenterSection()}
+          {renderRightSection()}
+        </StyledHeaderContainer>
+      </Stack>
+    );
+  },
+);
+
+// Component Composition
+interface HeaderComponent
+  extends React.ForwardRefExoticComponent<
+    HeaderProps & React.RefAttributes<View>
+  > {
+  Full: typeof FullHeader;
+}
+
+const StyledHeader = HeaderComponent as HeaderComponent;
+
+StyledHeader.Full = FullHeader;
+StyledHeader.Full.displayName = "StyledHeader.Full";
+StyledHeader.displayName = "StyledHeader";
+
+export { StyledHeader };

package/src/header/statusBar/index.tsx

@@ -0,0 +1,11 @@
+
+import React, { memo } from 'react'
+import type { StatusBarProps } from 'react-native'
+import { StatusBar } from 'react-native'
+
+const StyledStatusBar: React.FC<StatusBarProps> = props => {
+  return ( <StatusBar {...props} barStyle={'dark-content'} backgroundColor="transparent" translucent />)
+}
+
+export { StatusBarProps }; 
+export default memo(StyledStatusBar)

package/src/icons/backArrow.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { createIcon } from '../utiles/createIcon'
+import { StyleShape } from '../shape'
+
+const BackArrow = createIcon(
+  ({ size, color, strokeWidth }, props) => (
+    <StyleShape cycle>
+      <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>
+    </StyleShape>
+  )
+)
+BackArrow.displayName = 'BackArrow'
+export { BackArrow }

package/src/icons/bellFill.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { createIcon } from '../utiles/createIcon'
+import { StyleShape } from '../shape'
+
+const BellFill = createIcon(
+  ({ size, color, strokeWidth }, props) => (
+    <StyleShape cycle>
+      <Svg width={size} height={size} viewBox="0 0 24 24" {...props}>
+        <Path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill={color} />
+        <Path d="M13.73 21a2 2 0 0 1-3.46 0" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+      </Svg>
+    </StyleShape>
+  )
+)
+
+BellFill.displayName = 'BellFill'
+
+export { BellFill }

package/src/icons/bellOutline.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { createIcon } from '../utiles/createIcon'
+import { StyleShape } from '../shape'
+
+const BellOutline = createIcon(
+  ({ size, color, strokeWidth }, props) => (
+    <StyleShape cycle>
+      <Svg width={size} height={size} viewBox="0 0 24 24" {...props}>
+        <Path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+        <Path d="M13.73 21a2 2 0 0 1-3.46 0" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+      </Svg>
+    </StyleShape>
+  )
+)
+
+BellOutline.displayName = 'BellOutline'
+export { BellOutline }

package/src/icons/checkmark.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { createIcon } from '../utiles/createIcon'
+import { StyleShape } from '../shape'
+
+const Checkmark = createIcon(
+  ({ size, color, strokeWidth }, props) => (
+    <StyleShape cycle>
+      <Svg width={size} height={size} viewBox="0 0 24 24" {...props}>
+        <Path d="M20 6L9 17l-5-5" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+      </Svg>
+    </StyleShape>
+  )
+)
+
+Checkmark.displayName = 'Checkmark'
+
+export { Checkmark }

package/src/icons/delete.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { createIcon } from '../utiles/createIcon'
+import { StyleShape } from '../shape'
+
+const Delete = createIcon(
+  ({ size, color, strokeWidth }, props) => (
+    <StyleShape cycle>
+      <Svg width={size} height={size} viewBox="0 0 24 24" {...props}>
+        <Path d="M3 6h18" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" />
+        <Path d="M8 6V4h8v2" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+        <Path d="M19 6l-1 14H6L5 6" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+        <Path d="M10 11v6M14 11v6" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" />
+      </Svg>
+    </StyleShape>
+  )
+)
+Delete.displayName = 'Delete'
+export { Delete }

package/src/icons/downChevron.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { createIcon } from '../utiles/createIcon'
+import { StyleShape } from '../shape'
+
+const ChevronDown = createIcon(
+  ({ size, color, strokeWidth }, props) => (
+    <StyleShape cycle>
+      <Svg width={size} height={size} viewBox="0 0 24 24" {...props}>
+        <Path d="M6 9l6 6 6-6" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+      </Svg>
+    </StyleShape>
+  )
+)
+
+ChevronDown.displayName = 'ChevronDown'
+
+export { ChevronDown }

package/src/icons/error.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Svg, { Path, Circle } from 'react-native-svg'
+import { createIcon } from '../utiles/createIcon'
+import { StyleShape } from '../shape'
+
+const Error = createIcon(
+  ({ size, color, strokeWidth }, props) => (
+    <StyleShape cycle>
+      <Svg width={size} height={size} viewBox="0 0 24 24" {...props}>
+        <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth={strokeWidth} fill="none" />
+        <Path d="M15 9l-6 6M9 9l6 6" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" />
+      </Svg>
+    </StyleShape>
+  )
+)
+Error.displayName = 'Error'
+export { Error }

package/src/icons/forwardArrow.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { createIcon } from '../utiles/createIcon'
+import { StyleShape } from '../shape'
+
+const ForwardArrow = createIcon(
+  ({ size, color, strokeWidth }, props) => (
+    <StyleShape cycle>
+      <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>
+    </StyleShape>
+  )
+)
+
+ForwardArrow.displayName = 'ForwardArrow'
+
+export { ForwardArrow }

package/src/icons/index.ts

@@ -0,0 +1,15 @@
+export { BackArrow } from './backArrow'
+export { ForwardArrow } from './forwardArrow'
+export { ChevronLeft } from './leftChevron'
+export { ChevronRight } from './rightChevron'
+export { ChevronUp } from './upChevron'
+export { ChevronDown } from './downChevron'
+export { Checkmark } from './checkmark'
+export { BellFill } from './bellFill'
+export { BellOutline } from './bellOutline'
+export { Save } from './save'
+export { Error } from './error'
+export { Success } from './success'
+export { Delete } from './delete'
+export { Info } from './info'
+export { Warning } from './warning'