fluent-styles 1.54.0 → 1.55.0

package/src/searchBar/index.tsx

@@ -0,0 +1,383 @@
+/**
+ * StyledSearchBar
+ *
+ * A polished animated search input with:
+ * - 4 variants: outline | filled | ghost | floating
+ * - 3 sizes: sm | md | lg
+ * - Animated focus ring & clear button
+ * - Optional left icon / right action slot
+ * - Suggestion list with keyboard-aware dismiss
+ * - Cancel button (mobile pattern)
+ * - Voice / filter button slots
+ * - Full colour token overrides
+ *
+ * Rules:
+ * - Uses Stack, StyledText, StyledPressable — no bare View/Text
+ * - No StyleSheet.create — flat style props only
+ * - All colours from theme.colors / palettes
+ * - Children typed as CompatNode
+ */
+
+import React, {
+  useRef,
+  useState,
+  useCallback,
+  type ReactNode,
+} from 'react'
+import {
+  Animated,
+  TextInput,
+  Keyboard,
+  type TextInputProps,
+  type ColorValue,
+} from 'react-native'
+import { Stack, StyledText, StyledPressable, theme, palettes } from 'fluent-styles'
+
+// ─── CompatNode ──────────────────────────────────────────────────────────────
+type CompatNode = ReactNode
+
+// ─── Tokens ──────────────────────────────────────────────────────────────────
+export interface SearchBarColors {
+  background:      string
+  border:          string
+  focusBorder:     string
+  placeholder:     string
+  text:            string
+  icon:            string
+  clearBg:         string
+  clearIcon:       string
+  cancelText:      string
+  suggestionBg:    string
+  suggestionText:  string
+  suggestionBorder: string
+  divider:         string
+}
+
+const DEFAULT_COLORS: SearchBarColors = {
+  background:      theme.colors.gray[100],
+  border:          theme.colors.gray[200],
+  focusBorder:     theme.colors.gray[900],
+  placeholder:     theme.colors.gray[400],
+  text:            theme.colors.gray[900],
+  icon:            theme.colors.gray[400],
+  clearBg:         theme.colors.gray[300],
+  clearIcon:       theme.colors.gray[600],
+  cancelText:      theme.colors.gray[900],
+  suggestionBg:    palettes.white,
+  suggestionText:  theme.colors.gray[800],
+  suggestionBorder: theme.colors.gray[100],
+  divider:         theme.colors.gray[100],
+}
+
+// ─── Size presets ─────────────────────────────────────────────────────────────
+const SIZE: Record<SearchBarSize, { height: number; fontSize: number; iconSize: number; borderRadius: number; px: number }> = {
+  sm: { height: 36, fontSize: 13, iconSize: 14, borderRadius: 10, px: 10 },
+  md: { height: 44, fontSize: 15, iconSize: 16, borderRadius: 12, px: 14 },
+  lg: { height: 52, fontSize: 17, iconSize: 18, borderRadius: 14, px: 16 },
+}
+
+// ─── Suggestion item ──────────────────────────────────────────────────────────
+export interface SearchSuggestion {
+  id:       string
+  label:    string
+  subtitle?: string
+  icon?:    CompatNode
+}
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+export type SearchBarVariant = 'outline' | 'filled' | 'ghost' | 'floating'
+export type SearchBarSize    = 'sm' | 'md' | 'lg'
+
+export interface StyledSearchBarProps extends Omit<TextInputProps, 'style'> {
+  variant?:          SearchBarVariant
+  size?:             SearchBarSize
+  placeholder?:      string
+  value?:            string
+  onChangeText?:     (text: string) => void
+  onSubmit?:         (text: string) => void
+  onCancel?:         () => void
+  onClear?:          () => void
+  showCancel?:       boolean
+  cancelLabel?:      string
+  leftIcon?:         CompatNode
+  rightAction?:      CompatNode
+  suggestions?:      SearchSuggestion[]
+  onSuggestionPress?: (item: SearchSuggestion) => void
+  loading?:          boolean
+  disabled?:         boolean
+  autoFocus?:        boolean
+  colors?:           Partial<SearchBarColors>
+  /** borderRadius override */
+  borderRadius?:     number
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+export const StyledSearchBar: React.FC<StyledSearchBarProps> = ({
+  variant       = 'filled',
+  size          = 'md',
+  placeholder   = 'Search…',
+  value,
+  onChangeText,
+  onSubmit,
+  onCancel,
+  onClear,
+  showCancel    = false,
+  cancelLabel   = 'Cancel',
+  leftIcon,
+  rightAction,
+  suggestions   = [],
+  onSuggestionPress,
+  loading       = false,
+  disabled      = false,
+  autoFocus     = false,
+  colors: colorOverrides,
+  borderRadius: radiusOverride,
+  ...rest
+}) => {
+  const c     = { ...DEFAULT_COLORS, ...colorOverrides }
+  const s     = SIZE[size]
+  const br    = radiusOverride ?? s.borderRadius
+
+  const [focused,      setFocused]      = useState(false)
+  const [internalVal,  setInternalVal]  = useState('')
+  const inputRef  = useRef<TextInput>(null)
+  const focusAnim = useRef(new Animated.Value(0)).current
+
+  const currentValue = value !== undefined ? value : internalVal
+
+  // focus animation
+  const animateFocus = useCallback((toValue: number) => {
+    Animated.timing(focusAnim, {
+      toValue,
+      duration: 180,
+      useNativeDriver: false,
+    }).start()
+  }, [focusAnim])
+
+  const handleFocus = () => {
+    setFocused(true)
+    animateFocus(1)
+  }
+
+  const handleBlur = () => {
+    setFocused(false)
+    animateFocus(0)
+  }
+
+  const handleChange = (text: string) => {
+    if (value === undefined) setInternalVal(text)
+    onChangeText?.(text)
+  }
+
+  const handleClear = () => {
+    if (value === undefined) setInternalVal('')
+    onChangeText?.('')
+    onClear?.()
+    inputRef.current?.focus()
+  }
+
+  const handleCancel = () => {
+    if (value === undefined) setInternalVal('')
+    onChangeText?.('')
+    Keyboard.dismiss()
+    onCancel?.()
+  }
+
+  const handleSubmit = () => {
+    onSubmit?.(currentValue)
+    Keyboard.dismiss()
+  }
+
+  // ── Border colour interpolation ───────────────────────────────────────────
+  const borderColor = focusAnim.interpolate({
+    inputRange:  [0, 1],
+    outputRange: [c.border, c.focusBorder],
+  })
+
+  // ── Variant styles ────────────────────────────────────────────────────────
+  const variantStyle = (): {
+    bg: string; borderWidth: number; borderColor: ColorValue | Animated.AnimatedInterpolation<string>; shadow?: boolean
+  } => {
+    switch (variant) {
+      case 'outline':
+        return { bg: palettes.white, borderWidth: 1.5, borderColor }
+      case 'ghost':
+        return { bg: 'transparent', borderWidth: 0, borderColor: 'transparent' }
+      case 'floating':
+        return { bg: palettes.white, borderWidth: 0, borderColor: 'transparent', shadow: true }
+      case 'filled':
+      default:
+        return {
+          bg: focused ? palettes.white : c.background,
+          borderWidth: 1.5,
+          borderColor: focused ? c.focusBorder : 'transparent',
+        }
+    }
+  }
+
+  const vs = variantStyle()
+
+  // ── Default search icon ───────────────────────────────────────────────────
+  const defaultLeftIcon = (
+    <StyledText fontSize={s.iconSize} color={focused ? c.focusBorder : c.icon}>
+      🔍
+    </StyledText>
+  )
+
+  const showSuggestions = focused && suggestions.length > 0
+
+  return (
+    <Stack gap={0}>
+      {/* Row: input + cancel */}
+      <Stack horizontal alignItems="center" gap={10}>
+
+        {/* Input wrapper */}
+        <Stack flex={1}>
+          <Animated.View
+            style={{
+              flexDirection:   'row',
+              alignItems:      'center',
+              height:          s.height,
+              borderRadius:    br,
+              backgroundColor: vs.bg,
+              borderWidth:     vs.borderWidth,
+              borderColor:     vs.borderColor as ColorValue,
+              paddingHorizontal: s.px,
+              gap:             8,
+              opacity:         disabled ? 0.5 : 1,
+              ...(vs.shadow ? {
+                shadowColor:   '#000',
+                shadowOffset:  { width: 0, height: 2 },
+                shadowOpacity: 0.08,
+                shadowRadius:  8,
+                elevation:     3,
+              } : {}),
+            }}
+          >
+            {/* Left icon */}
+            <Stack alignItems="center" justifyContent="center">
+              {leftIcon ?? defaultLeftIcon}
+            </Stack>
+
+            {/* TextInput */}
+            <TextInput
+              ref={inputRef}
+              value={currentValue}
+              onChangeText={handleChange}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              onSubmitEditing={handleSubmit}
+              placeholder={placeholder}
+              placeholderTextColor={c.placeholder}
+              returnKeyType="search"
+              autoFocus={autoFocus}
+              editable={!disabled}
+              style={{
+                flex:            1,
+                fontSize:        s.fontSize,
+                color:           c.text,
+                padding:         0,
+                margin:          0,
+              }}
+              {...rest}
+            />
+
+            {/* Loading spinner (simple dots) */}
+            {loading && (
+              <Stack alignItems="center" justifyContent="center" width={20}>
+                <StyledText fontSize={12} color={c.icon}>···</StyledText>
+              </Stack>
+            )}
+
+            {/* Clear button */}
+            {!loading && currentValue.length > 0 && (
+              <StyledPressable
+                onPress={handleClear}
+                width={18}
+                height={18}
+                borderRadius={9}
+                backgroundColor={c.clearBg}
+                alignItems="center"
+                justifyContent="center"
+              >
+                <StyledText fontSize={10} color={c.clearIcon} fontWeight="700">✕</StyledText>
+              </StyledPressable>
+            )}
+
+            {/* Right action slot */}
+            {!loading && currentValue.length === 0 && rightAction && (
+              <Stack alignItems="center" justifyContent="center">
+                {rightAction}
+              </Stack>
+            )}
+          </Animated.View>
+        </Stack>
+
+        {/* Cancel button */}
+        {showCancel && (focused || currentValue.length > 0) && (
+          <StyledPressable onPress={handleCancel} paddingVertical={6} paddingHorizontal={4}>
+            <StyledText fontSize={s.fontSize} color={c.cancelText} fontWeight="600">
+              {cancelLabel}
+            </StyledText>
+          </StyledPressable>
+        )}
+      </Stack>
+
+      {/* Suggestions dropdown */}
+      {showSuggestions && (
+        <Stack
+          marginTop={6}
+          borderRadius={br}
+          backgroundColor={c.suggestionBg}
+          borderWidth={1}
+          borderColor={c.suggestionBorder}
+          overflow="hidden"
+          style={{
+            shadowColor:   '#000',
+            shadowOffset:  { width: 0, height: 4 },
+            shadowOpacity: 0.10,
+            shadowRadius:  12,
+            elevation:     5,
+          }}
+        >
+          {suggestions.map((item, idx) => (
+            <Stack key={item.id}>
+              <StyledPressable
+                onPress={() => {
+                  onSuggestionPress?.(item)
+                  if (value === undefined) setInternalVal(item.label)
+                  onChangeText?.(item.label)
+                }}
+                paddingHorizontal={s.px}
+                paddingVertical={10}
+                flexDirection='row'
+                alignItems="center"
+                gap={10}
+              >
+                {item.icon && (
+                  <Stack width={24} alignItems="center">{item.icon}</Stack>
+                )}
+                <Stack flex={1} gap={1}>
+                  <StyledText fontSize={s.fontSize - 1} fontWeight="600" color={c.suggestionText}>
+                    {item.label}
+                  </StyledText>
+                  {item.subtitle && (
+                    <StyledText fontSize={s.fontSize - 3} color={c.placeholder}>
+                      {item.subtitle}
+                    </StyledText>
+                  )}
+                </Stack>
+                <StyledText fontSize={11} color={c.icon}>↗</StyledText>
+              </StyledPressable>
+              {idx < suggestions.length - 1 && (
+                <Stack height={1} backgroundColor={c.divider} marginHorizontal={s.px} />
+              )}
+            </Stack>
+          ))}
+        </Stack>
+      )}
+    </Stack>
+  )
+}
+
+export default StyledSearchBar

package/src/seperator/index.tsx

@@ -0,0 +1,59 @@
+import { theme } from "../utiles/theme";
+import { Stack, StackProps } from "../stack";
+import { StyledText } from "../text";
+import React from "react";
+
+interface SeperatorProps extends StackProps {
+    leftLabel: string;
+    leftLabelProps?: React.ComponentProps<typeof StyledText>;
+    rightLabel?: string;
+    rightLabelProps?: React.ComponentProps<typeof StyledText>;
+}
+
+const StyledSeperator = React.forwardRef<
+    React.ComponentRef<typeof Stack>,
+    SeperatorProps
+>(
+    (
+        { leftLabel, leftLabelProps, rightLabel, rightLabelProps, ...rest },
+        ref,
+    ) => {
+        return (
+            <Stack
+                horizontal
+                justifyContent="space-between"
+                alignItems="center"
+                ref={ref}
+                {...rest}
+            >
+                <StyledText
+                    marginHorizontal={4}
+                    fontSize={theme.fontSize.medium}
+                    fontWeight={theme.fontWeight.semiBold}
+                    color={theme.colors.gray[500]}
+                    {...leftLabelProps}
+                >
+                    {leftLabel}
+                </StyledText>
+                {
+                    rightLabel && (
+                        <StyledText
+                            marginHorizontal={4}
+                            fontSize={theme.fontSize.small}
+                            fontWeight={theme.fontWeight.normal}
+                            color={theme.colors.gray[500]}
+                            {...rightLabelProps}
+                        >
+                            {rightLabel}
+                        </StyledText>
+                    )   
+                }
+            </Stack>
+        );
+    },
+);
+
+StyledSeperator.displayName = "StyledSeperator";
+
+export { StyledSeperator };
+export type { SeperatorProps };

package/src/services/index.ts

@@ -0,0 +1,149 @@
+/**
+ * Imperative portal services — usable from outside the React tree.
+ * Prerequisite: wrap your app root with `<GlobalPortalProvider>`.
+ */
+
+import React from 'react'
+import { portal }                           from '../portal/PortalInstance'
+import { Toast, ToastProps }  from '../toast'
+import { Notification, NotificationProps }  from '../notification'
+import { Loader, LoaderProps }              from '../loading/loader'
+import { Dialogue, DialogueAction, DialogueProps } from '../dialog/dialogue'
+import { ActionSheet, ActionSheetProps }    from '../actionSheet'
+
+// ─── Shared helper ────────────────────────────────────────────────────────────
+
+function mountWithAutoDismiss(
+  createElement: (onDismiss: () => void) => React.ReactNode,
+  options: Parameters<typeof portal.show>[1],
+): number {
+  const idBox = { current: -1 }
+  idBox.current = portal.show(
+    createElement(() => portal.hide(idBox.current)),
+    options,
+  )
+  return idBox.current
+}
+
+// ─── Toast ────────────────────────────────────────────────────────────────────
+
+export type ToastOptions = Omit<ToastProps, 'onDismiss'>
+
+export const toastService = {
+  show: (options: ToastOptions): number =>
+    mountWithAutoDismiss(
+      onDismiss => React.createElement(Toast, { ...options, onDismiss }),
+      { position: 'top', offset: { x: 0, y: 56 } },
+    ),
+  success: (message: string, description?: string): number =>
+    toastService.show({ message, description, variant: 'success' }),
+  error: (message: string, description?: string): number =>
+    toastService.show({ message, description, variant: 'error' }),
+  warning: (message: string, description?: string): number =>
+    toastService.show({ message, description, variant: 'warning' }),
+  info: (message: string, description?: string): number =>
+    toastService.show({ message, description, variant: 'info' }),
+  dismiss: (id: number): void => portal.hide(id),
+}
+
+// ─── Notification ─────────────────────────────────────────────────────────────
+
+export type NotificationOptions = Omit<NotificationProps, 'onDismiss'>
+
+export const notificationService = {
+  show: (options: NotificationOptions): number =>
+    mountWithAutoDismiss(
+      onDismiss => React.createElement(Notification, { ...options, onDismiss }),
+      { position: 'top-right', offset: { x: 16, y: 56 } },
+    ),
+  dismiss: (id: number): void => portal.hide(id),
+}
+
+// ─── Loader ───────────────────────────────────────────────────────────────────
+
+export type LoaderOptions = LoaderProps
+
+export const loaderService = {
+  show: (options: LoaderOptions = {}): number =>
+    portal.show(
+      React.createElement(Loader, { ...options, overlay: options.overlay ?? true }),
+      { position: 'center' },
+    ),
+  hide: (id: number): void => portal.hide(id),
+  wrap: async <T>(fn: () => Promise<T>, options: LoaderOptions = {}): Promise<T> => {
+    const id = loaderService.show(options)
+    try { return await fn() } finally { loaderService.hide(id) }
+  },
+}
+
+// ─── Dialogue ─────────────────────────────────────────────────────────────────
+
+export type DialogueOptions = Omit<DialogueProps, 'onDismiss'> & { actions?: DialogueAction[] }
+
+export type ConfirmOptions = {
+  title:         string
+  message?:      string
+  icon?:         string
+  confirmLabel?: string
+  cancelLabel?:  string
+  destructive?:  boolean
+  theme?:        DialogueProps['theme']
+  colors?:       DialogueProps['colors']
+}
+
+function showDialogue(options: DialogueOptions): number {
+  const idBox         = { current: -1 }
+  const handleDismiss  = () => portal.hide(idBox.current)
+  const handleBackdrop = () => portal.hide(idBox.current)
+  idBox.current = portal.show(
+    React.createElement(Dialogue, {
+      ...options,
+      actions:   options.actions ?? [{ label: 'OK', onPress: () => {} }],
+      onDismiss: handleDismiss,
+    }),
+    { position: 'center', backdrop: true, onBackdropPress: handleBackdrop },
+  )
+  return idBox.current
+}
+
+export const dialogueService = {
+  show:    (options: DialogueOptions): number => showDialogue(options),
+  dismiss: (id: number): void => portal.hide(id),
+  confirm: (options: ConfirmOptions): Promise<boolean> =>
+    new Promise(resolve => {
+      showDialogue({
+        title: options.title, message: options.message, icon: options.icon,
+        theme: options.theme, colors: options.colors,
+        actions: [
+          { label: options.cancelLabel  ?? 'Cancel',  variant: 'secondary',                                    onPress: () => resolve(false) },
+          { label: options.confirmLabel ?? 'Confirm', variant: options.destructive ? 'destructive' : 'primary', onPress: () => resolve(true) },
+        ],
+      })
+    }),
+  alert: (title: string, message?: string, icon?: string): Promise<void> =>
+    new Promise(resolve => {
+      showDialogue({ title, message, icon, actions: [{ label: 'OK', variant: 'primary', onPress: resolve }] })
+    }),
+}
+
+// ─── Action Sheet ─────────────────────────────────────────────────────────────
+
+export type ActionSheetOptions = Omit<ActionSheetProps, 'onDismiss'>
+
+function showActionSheet(options: ActionSheetOptions): number {
+  const idBox         = { current: -1 }
+  const handleDismiss  = () => portal.hide(idBox.current)
+  const handleBackdrop = () => portal.hide(idBox.current)
+  idBox.current = portal.show(
+    React.createElement(ActionSheet, { ...options, onDismiss: handleDismiss }),
+    { position: 'bottom', backdrop: true, onBackdropPress: handleBackdrop },
+  )
+  return idBox.current
+}
+
+export const actionSheetService = {
+  show:    (options: ActionSheetOptions): number => showActionSheet(options),
+  present: (children: React.ReactNode, options: Omit<ActionSheetOptions, 'children'> = {}): number =>
+    showActionSheet({ ...options, children }),
+  dismiss: (id: number): void => portal.hide(id),
+}

package/src/shape/index.tsx

@@ -0,0 +1,38 @@
+
+import { View, ViewProps, ViewStyle } from 'react-native';
+import { styled } from '../utiles/styled';
+
+type ShapeVariants = {
+    cycle?: boolean | [boolean, ViewStyle];
+    size?: string | number | [string | number, ViewStyle];
+};
+
+type ShapeProps = ShapeVariants & ViewProps & ViewStyle;
+
+const StyleShape = styled<ShapeProps>(View, {
+    base: {
+        position: 'relative',
+    } as ViewStyle,
+    variants: {
+        cycle: {
+            true: {
+                borderRadius: 50,
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+                borderWidth: 0,
+            } as ViewStyle,
+            false: {} as ViewStyle,
+        },
+        size: (size: string | number) => {
+            const selected = size ?? 0;
+            if (isNaN(Number(selected))) {
+                throw new Error('Invalid size value');
+            }
+            return { height: Number(selected), width: Number(selected) };
+        },
+    } as any
+});
+
+export { StyleShape };
+export type { ShapeProps };