fluent-styles 1.53.0 → 1.55.0

package/src/chips/index.tsx

@@ -0,0 +1,293 @@
+/**
+ * StyledChip.tsx
+ * ──────────────
+ * Reusable chip/tag component for fluent-styles apps.
+ *
+ * Variants:
+ *  • outlined   — border only, no fill
+ *  • filled     — solid background
+ *  • smooth     — soft pastel fill, no border
+ *  • ingredient — neutral grey pill, toggleable selected state
+ *  • likeable   — heart icon left, pink border, toggleable liked state
+ *  • icon       — leading icon + label, optional filled active state
+ */
+
+import React, { useState } from 'react';
+import Icon from 'react-native-vector-icons/Feather';
+import {
+  Stack,
+  StyledText,
+  StyledPressable,
+  theme,
+  palettes,
+} from 'fluent-styles';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ChipVariant =
+  | 'outlined'    // border ring, transparent bg
+  | 'filled'      // solid coloured bg
+  | 'smooth'      // pastel tinted bg, no border
+  | 'ingredient'  // neutral grey pill, dark when selected
+  | 'likeable'    // pink heart icon, pink border when active
+  | 'icon';       // leading ReactNode icon + label
+
+export type ChipSize = 'sm' | 'md' | 'lg';
+
+export interface StyledChipProps {
+  /** Text label displayed inside the chip */
+  label: string;
+
+  /** Visual style. Default: 'outlined' */
+  variant?: ChipVariant;
+
+  /** Size preset. Default: 'md' */
+  size?: ChipSize;
+
+  /**
+   * Controlled selected/active state.
+   * When provided the component is controlled; omit for uncontrolled.
+   */
+  selected?: boolean;
+
+  /** Initial selected state for uncontrolled mode. Default: false */
+  defaultSelected?: boolean;
+
+  /** Called when the chip is pressed. Receives the new selected state. */
+  onPress?: (selected: boolean) => void;
+
+  /**
+   * Accent colour used for borders, text, and icon tints.
+   * Defaults per variant:
+   *  outlined   → theme.colors.gray[700]
+   *  filled     → palettes.white (text on filled bg)
+   *  smooth     → matches `bgColor` darkened automatically
+   *  ingredient → theme.colors.gray[700]
+   *  likeable   → '#e91e8c'
+   *  icon       → theme.colors.gray[700]
+   */
+  color?: string;
+
+  /**
+   * Background colour.
+   *  filled  → required for the chip colour
+   *  smooth  → sets the pastel tint
+   *  others  → typically unused
+   */
+  bgColor?: string;
+
+  /**
+   * Leading icon element (any ReactNode — Feather icon, SVG, emoji text, etc.)
+   * Shown for 'icon' variant and optionally on others.
+   */
+  icon?: React.ReactNode;
+
+  /** Show a checkmark when selected (outlined / smooth / ingredient). Default: true */
+  showCheck?: boolean;
+
+  /** Disabled state — mutes colours and disables press. Default: false */
+  disabled?: boolean;
+
+  /** Additional border radius override. Default per size. */
+  borderRadius?: number;
+}
+
+// ─── Size tokens ──────────────────────────────────────────────────────────────
+
+const SIZE: Record<ChipSize, {
+  paddingH: number;
+  paddingV: number;
+  fontSize: number;
+  iconSize: number;
+  radius:   number;
+  checkSize: number;
+}> = {
+  sm: { paddingH: 10, paddingV: 5,  fontSize: 11, iconSize: 12, radius: 20, checkSize: 11 },
+  md: { paddingH: 14, paddingV: 8,  fontSize: 13, iconSize: 14, radius: 24, checkSize: 13 },
+  lg: { paddingH: 18, paddingV: 11, fontSize: 15, iconSize: 16, radius: 28, checkSize: 15 },
+};
+
+// ─── StyledChip ───────────────────────────────────────────────────────────────
+
+/**
+ * StyledChip — multi-variant chip for fluent-styles apps.
+ *
+ * @example Outlined (uncontrolled, toggleable)
+ * ```tsx
+ * <StyledChip label="Hacktoberfest" variant="outlined" color="#4caf50" />
+ * ```
+ *
+ * @example Ingredient chip (selected)
+ * ```tsx
+ * <StyledChip label="Cinnamon" variant="ingredient" defaultSelected />
+ * ```
+ *
+ * @example Likeable chip (controlled)
+ * ```tsx
+ * <StyledChip
+ *   label="Big Data"
+ *   variant="likeable"
+ *   selected={liked}
+ *   onPress={(v) => setLiked(v)}
+ * />
+ * ```
+ *
+ * @example Icon chip (filled active)
+ * ```tsx
+ * <StyledChip
+ *   label="Social Media"
+ *   variant="icon"
+ *   icon={<Icon name="refresh-cw" size={14} color="green" />}
+ *   color="green"
+ *   bgColor="#e8f5e9"
+ * />
+ * ```
+ *
+ * @example Filled chip
+ * ```tsx
+ * <StyledChip label="Taken" variant="filled" bgColor="#e91e8c" color="#fff" />
+ * ```
+ */
+export const StyledChip: React.FC<StyledChipProps> = ({
+  label,
+  variant      = 'outlined',
+  size         = 'md',
+  selected: controlledSelected,
+  defaultSelected = false,
+  onPress,
+  color,
+  bgColor,
+  icon,
+  showCheck    = true,
+  disabled     = false,
+  borderRadius: borderRadiusOverride,
+}) => {
+  const [internalSelected, setInternalSelected] = useState(defaultSelected);
+  const isControlled = controlledSelected !== undefined;
+  const isSelected   = isControlled ? controlledSelected : internalSelected;
+
+  const S = SIZE[size];
+  const rx = borderRadiusOverride ?? S.radius;
+
+  const handlePress = () => {
+    if (disabled) return;
+    const next = !isSelected;
+    if (!isControlled) setInternalSelected(next);
+    onPress?.(next);
+  };
+
+  // ── Resolve styles per variant ───────────────────────────────────────────
+
+  let chipBg: string     = 'transparent';
+  let chipBorder: string = 'transparent';
+  let borderWidth        = 0;
+  let labelColor: string = theme.colors.gray[800];
+  let opacity            = disabled ? 0.4 : 1;
+
+  switch (variant) {
+
+    // ── Outlined ────────────────────────────────────────────────────────────
+    case 'outlined': {
+      const accentColor = color ?? theme.colors.gray[700];
+      chipBorder  = isSelected ? accentColor : accentColor;
+      borderWidth = 1.5;
+      chipBg      = isSelected ? `${accentColor}14` : 'transparent';
+      labelColor  = accentColor;
+      break;
+    }
+
+    // ── Filled ──────────────────────────────────────────────────────────────
+    case 'filled': {
+      chipBg      = bgColor ?? (isSelected ? theme.colors.gray[800] : theme.colors.gray[200]);
+      labelColor  = color   ?? (isSelected ? palettes.white : theme.colors.gray[800]);
+      borderWidth = 0;
+      break;
+    }
+
+    // ── Smooth ──────────────────────────────────────────────────────────────
+    case 'smooth': {
+      chipBg      = bgColor ?? theme.colors.gray[100];
+      labelColor  = color   ?? theme.colors.gray[700];
+      borderWidth = 0;
+      break;
+    }
+
+    // ── Ingredient ──────────────────────────────────────────────────────────
+    case 'ingredient': {
+      chipBg      = isSelected ? theme.colors.gray[700] : theme.colors.gray[100];
+      labelColor  = isSelected ? palettes.white : theme.colors.gray[800];
+      borderWidth = 0;
+      break;
+    }
+
+    // ── Likeable ────────────────────────────────────────────────────────────
+    case 'likeable': {
+      const pink  = '#e91e8c';
+      chipBg      = isSelected ? pink : 'transparent';
+      chipBorder  = pink;
+      borderWidth = 1.5;
+      labelColor  = isSelected ? palettes.white : pink;
+      break;
+    }
+
+    // ── Icon ────────────────────────────────────────────────────────────────
+    case 'icon': {
+      const accentColor = color ?? theme.colors.gray[700];
+      chipBg      = isSelected ? (bgColor ?? accentColor) : (bgColor ?? 'transparent');
+      chipBorder  = isSelected ? 'transparent' : (bgColor ?? theme.colors.gray[200]);
+      borderWidth = isSelected ? 0 : 1.2;
+      labelColor  = isSelected ? palettes.white : accentColor;
+      break;
+    }
+  }
+
+  // ── Heart icon for likeable variant ──────────────────────────────────────
+  const heartIcon = variant === 'likeable' ? (
+    <StyledText style={{ fontSize: S.iconSize + 2, marginRight: 5 }}>
+      {isSelected ? '❤️' : '🤍'}
+    </StyledText>
+  ) : null;
+
+  // ── Checkmark for outlined / ingredient / smooth ─────────────────────────
+  const checkIcon = showCheck && isSelected &&
+    (variant === 'outlined' || variant === 'ingredient' || variant === 'smooth' || variant === 'filled')
+    ? (
+      <Icon
+        name="check"
+        size={S.checkSize}
+        color={labelColor}
+        style={{ marginRight: 4 }}
+      />
+    ) : null;
+
+  return (
+    <StyledPressable
+      onPress={handlePress}
+      paddingHorizontal={S.paddingH}
+      paddingVertical={S.paddingV}
+      borderRadius={rx}
+      backgroundColor={chipBg}
+      borderWidth={borderWidth}
+      borderColor={chipBorder}
+      opacity={opacity}
+      alignSelf="flex-start"
+    >
+      <Stack horizontal alignItems="center" gap={4}>
+        {/* Leading: check or heart or custom icon */}
+        {checkIcon}
+        {heartIcon}
+        {!checkIcon && !heartIcon && icon ? icon : null}
+
+        <StyledText
+          fontSize={S.fontSize}
+          fontWeight={isSelected ? theme.fontWeight.semiBold : theme.fontWeight.normal}
+          color={labelColor}
+        >
+          {label}
+        </StyledText>
+      </Stack>
+    </StyledPressable>
+  );
+};
+
+export default StyledChip;

package/src/circularProgress/index.tsx

@@ -0,0 +1,349 @@
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react'
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+} from 'react-native'
+import Svg, { Circle, Defs, LinearGradient, Stop } from 'react-native-svg'
+
+import { Stack } from '../stack'
+import { StyledText } from '../text'
+import { theme } from '../utiles/theme'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type CircularProgressVariant =
+  | 'default'
+  | 'ghost'
+  | 'gradient'
+  | 'dashboard'
+
+export type CircularProgressSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export type CircularProgressColors = {
+  arc: string
+  track: string
+  label: string
+  sublabel: string
+  gradientFrom: string
+  gradientTo: string
+}
+
+export interface StyledCircularProgressProps {
+  value: number
+  total?: number
+
+  display?: 'percent' | 'fraction' | 'value' | 'label' | 'none'
+
+  label?: string
+  sublabel?: string
+
+  variant?: CircularProgressVariant
+  size?: CircularProgressSize
+  diameter?: number
+  strokeWidth?: number
+  lineCap?: 'round' | 'butt' | 'square'
+
+  animated?: boolean
+  duration?: number
+
+  colors?: Partial<CircularProgressColors>
+
+  /**
+   * Controls how built-in text is arranged.
+   * - 'stacked': display text first, then label / sublabel underneath
+   * - 'center': display text, label, and sublabel are centered inside the ring
+   * @default 'stacked'
+   */
+  contentPosition?: 'center' | 'stacked'
+
+  children?: React.ReactNode
+}
+
+const SIZE_MAP: Record<
+  CircularProgressSize,
+  { diameter: number; stroke: number; primaryFont: number; secondaryFont: number }
+> = {
+  xs: { diameter: 48, stroke: 4, primaryFont: 11, secondaryFont: 8 },
+  sm: { diameter: 64, stroke: 5, primaryFont: 13, secondaryFont: 9 },
+  md: { diameter: 80, stroke: 6, primaryFont: 15, secondaryFont: 10 },
+  lg: { diameter: 100, stroke: 7, primaryFont: 18, secondaryFont: 11 },
+  xl: { diameter: 128, stroke: 8, primaryFont: 22, secondaryFont: 12 },
+}
+
+const DEFAULT_COLORS: CircularProgressColors = {
+  arc: theme.colors.indigo?.[500] ?? '#6366f1',
+  track: theme.colors.gray[200],
+  label: theme.colors.gray[800],
+  sublabel: theme.colors.gray[400],
+  gradientFrom: theme.colors.violet?.[500] ?? '#8b5cf6',
+  gradientTo: theme.colors.cyan?.[400] ?? '#22d3ee',
+}
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle)
+
+export const StyledCircularProgress: React.FC<StyledCircularProgressProps> = ({
+  value,
+  total = 100,
+  display = 'percent',
+  label,
+  sublabel,
+  variant = 'default',
+  size = 'md',
+  diameter: diameterProp,
+  strokeWidth: strokeWidthProp,
+  lineCap = 'round',
+  animated = true,
+  duration = 900,
+  colors: colorOverrides,
+  contentPosition = 'stacked',
+  children,
+}) => {
+  const preset = SIZE_MAP[size]
+  const diameter = diameterProp ?? preset.diameter
+  const strokeWidth = strokeWidthProp ?? preset.stroke
+
+  const isDashboard = variant === 'dashboard'
+
+  const radius = (diameter - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const arcLength = isDashboard ? circumference / 2 : circumference
+
+  const colors: CircularProgressColors = useMemo(
+    () => (colorOverrides ? { ...DEFAULT_COLORS, ...colorOverrides } : DEFAULT_COLORS),
+    [colorOverrides]
+  )
+
+  const clamped = Math.min(Math.max(value, 0), total)
+  const fraction = total > 0 ? clamped / total : 0
+
+  const progress = useRef(new Animated.Value(animated ? 0 : fraction)).current
+
+  useEffect(() => {
+    if (!animated) {
+      progress.setValue(fraction)
+      return
+    }
+
+    Animated.timing(progress, {
+      toValue: fraction,
+      duration,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: false,
+    }).start()
+  }, [fraction, animated, duration, progress])
+
+  const strokeDashoffset = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [arcLength, 0],
+  })
+
+  const center = diameter / 2
+  const gradientId = `cpGrad-${Math.round(diameter)}-${variant}`
+
+  const centreText = useMemo(() => {
+    switch (display) {
+      case 'percent':
+        return `${Math.round(fraction * 100)}%`
+      case 'fraction':
+        return `${clamped}/${total}`
+      case 'value':
+        return String(clamped)
+      case 'label':
+        return label ?? ''
+      case 'none':
+        return null
+      default:
+        return null
+    }
+  }, [display, fraction, clamped, total, label])
+
+  const arcStroke = variant === 'gradient' ? `url(#${gradientId})` : colors.arc
+  const trackOpacity = variant === 'ghost' ? 0 : 1
+  const trackDash = isDashboard ? [arcLength, circumference - arcLength] : undefined
+
+  const dashboardTextOffset = isDashboard ? -(diameter / 4) : 0
+
+ const renderTextBlock = () => {
+  if (contentPosition === 'center') {
+    return (
+      <Stack
+        position="absolute"
+        left={strokeWidth + 6}
+        right={strokeWidth + 6}
+        top={0}
+        bottom={0}
+        alignItems="center"
+        justifyContent="center"
+        gap={1}
+        pointerEvents="none"
+      >
+        {centreText !== null && centreText !== '' && (
+          <StyledText
+            fontSize={preset.primaryFont}
+            fontWeight={theme.fontWeight.bold}
+            color={colors.label}
+            lineHeight={preset.primaryFont + 3}
+            textAlign="center"
+          >
+            {centreText}
+          </StyledText>
+        )}
+
+        {!!label && (
+          <StyledText
+            fontSize={preset.secondaryFont}
+            color={colors.sublabel}
+            lineHeight={preset.secondaryFont + 2}
+            textAlign="center"
+          >
+            {label}
+          </StyledText>
+        )}
+
+        {!!sublabel && (
+          <StyledText
+            fontSize={Math.max(preset.secondaryFont - 1, 8)}
+            color={colors.sublabel}
+            lineHeight={preset.secondaryFont + 1}
+            textAlign="center"
+          >
+            {sublabel}
+          </StyledText>
+        )}
+      </Stack>
+    )
+  }
+
+  const showSecondLine = display !== 'label' && display !== 'none' && !!label
+  const showSubLabel = !!sublabel
+
+  return (
+    <Stack
+      alignItems="center"
+      justifyContent="center"
+      gap={1}
+      marginTop={dashboardTextOffset}
+      paddingHorizontal={strokeWidth + 4}
+    >
+      {centreText !== null && centreText !== '' && (
+        <StyledText
+          fontSize={preset.primaryFont}
+          fontWeight={theme.fontWeight.bold}
+          color={colors.label}
+          lineHeight={preset.primaryFont + 3}
+          textAlign="center"
+        >
+          {centreText}
+        </StyledText>
+      )}
+
+      {showSecondLine && (
+        <StyledText
+          fontSize={preset.secondaryFont}
+          color={colors.sublabel}
+          lineHeight={preset.secondaryFont + 2}
+          textAlign="center"
+        >
+          {label}
+        </StyledText>
+      )}
+
+      {showSubLabel && !showSecondLine && (
+        <StyledText
+          fontSize={preset.secondaryFont}
+          color={colors.sublabel}
+          lineHeight={preset.secondaryFont + 2}
+          textAlign="center"
+        >
+          {sublabel}
+        </StyledText>
+      )}
+
+      {showSubLabel && showSecondLine && (
+        <StyledText
+          fontSize={Math.max(preset.secondaryFont - 1, 8)}
+          color={colors.sublabel}
+          lineHeight={preset.secondaryFont + 1}
+          textAlign="center"
+        >
+          {sublabel}
+        </StyledText>
+      )}
+    </Stack>
+  )
+}
+
+  return (
+    <Stack
+      width={diameter}
+      height={isDashboard ? diameter / 2 + strokeWidth : diameter}
+      alignItems="center"
+      justifyContent="center"
+        position="relative"
+    >
+      <Stack style={S.svg_wrap}>
+        <Svg
+          width={diameter}
+          height={diameter}
+          style={isDashboard ? { marginTop: -(diameter / 2) } : undefined}
+        >
+          {variant === 'gradient' && (
+            <Defs>
+              <LinearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
+                <Stop offset="0%" stopColor={colors.gradientFrom} />
+                <Stop offset="100%" stopColor={colors.gradientTo} />
+              </LinearGradient>
+            </Defs>
+          )}
+
+          <Circle
+            cx={center}
+            cy={center}
+            r={radius}
+            stroke={colors.track}
+            strokeWidth={strokeWidth}
+            strokeDasharray={trackDash}
+            strokeLinecap="butt"
+            fill="none"
+            opacity={trackOpacity}
+            rotation={isDashboard ? 90 : 0}
+            origin={`${center}, ${center}`}
+          />
+
+          <AnimatedCircle
+            cx={center}
+            cy={center}
+            r={radius}
+            stroke={arcStroke as any}
+            strokeWidth={strokeWidth}
+            fill="none"
+            strokeDasharray={arcLength}
+            strokeDashoffset={strokeDashoffset as any}
+            strokeLinecap={lineCap}
+            rotation={isDashboard ? 90 : -90}
+            origin={`${center}, ${center}`}
+          />
+        </Svg>
+      </Stack>
+
+      {children ? (
+        <Stack alignItems="center" justifyContent="center">
+          {children}
+        </Stack>
+      ) : (
+        renderTextBlock()
+      )}
+    </Stack>
+  )
+}
+
+const S = StyleSheet.create({
+  svg_wrap: {
+    position: 'absolute',
+  },
+})