fluent-styles 1.54.0 → 1.55.0

package/src/button/index.tsx

@@ -0,0 +1,335 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  TouchableOpacityProps,
+  ActivityIndicator,
+} from 'react-native';
+import { styled }                  from '../utiles/styled';
+import { ViewStyle } from '../utiles/viewStyleProps';
+import { viewStyleStringVariants, viewStyleVariants } from '../utiles/viewStyleVariants';
+import { StyledText }              from '../text';
+import { theme }                   from '../utiles/theme';
+
+// ─── Variant shape ────────────────────────────────────────────────────────────
+
+type ButtonVariants = {
+  // ── Appearance ────────────────────────────────────────────────────────────
+  /** Solid filled — cyan background. */
+  primary?:   boolean
+  /** Solid filled — indigo background. */
+  secondary?: boolean
+  /** White background, dark border. */
+  outline?:   boolean
+  /** Transparent, no border, label only. */
+  ghost?:     boolean
+  /** Transparent, no padding, inline text link. */
+  link?:      boolean
+  /** Danger / destructive action — red fill. */
+  danger?:    boolean
+  /** Success action — green fill. */
+  success?:   boolean
+  /** Warning — amber fill. */
+  warning?:   boolean
+  /** White card surface, top + side borders, no bottom (for dropdowns). */
+  dropdown?:  boolean
+  /** Greyed-out, non-interactive. */
+  disabled?:  boolean
+  // ── Shape ─────────────────────────────────────────────────────────────────
+  /** Fully circular pill (default). */
+  pill?:      boolean
+  /** Slightly rounded rectangle. */
+  rounded?:   boolean
+  /** No border radius — sharp corners. */
+  square?:    boolean
+  // ── Size ──────────────────────────────────────────────────────────────────
+  xs?:        boolean
+  sm?:        boolean
+  md?:        boolean  // default
+  lg?:        boolean
+  xl?:        boolean
+  // ── Layout ────────────────────────────────────────────────────────────────
+  /** Button shrinks to fit its content instead of flex: 1. */
+  compact?:   boolean
+  /** Full-width block button. */
+  block?:     boolean
+  /** Icon-only circular button. */
+  icon?:      boolean
+} & typeof viewStyleStringVariants
+
+type ButtonProps = { variant?: ButtonVariants } & TouchableOpacityProps & ViewStyle
+
+export interface StyledButtonProps extends ButtonProps {
+  children?:   React.ReactNode
+  // Convenience flat props (same as wrapping in variant object)
+  primary?:    boolean
+  secondary?:  boolean
+  outline?:    boolean
+  ghost?:      boolean
+  link?:       boolean
+  danger?:     boolean
+  success?:    boolean
+  warning?:    boolean
+  dropdown?:   boolean
+  disabled?:   boolean
+  pill?:       boolean
+  rounded?:    boolean
+  square?:     boolean
+  xs?:         boolean
+  sm?:         boolean
+  md?:         boolean
+  lg?:         boolean
+  xl?:         boolean
+  compact?:    boolean
+  block?:      boolean
+  icon?:       boolean
+  // Extra
+  /** Show an activity-indicator spinner and block presses. */
+  loading?:    boolean
+  /** Icon element rendered before the label. */
+  leftIcon?:   React.ReactNode
+  /** Icon element rendered after the label. */
+  rightIcon?:  React.ReactNode
+}
+
+interface RefExoticComponent
+  extends React.ForwardRefExoticComponent<
+    StyledButtonProps & React.RefAttributes<React.ComponentRef<typeof ButtonBase>>
+  > {
+  Text: typeof StyledText
+}
+
+// ─── Base styled component ────────────────────────────────────────────────────
+
+const ButtonBase = styled<ButtonProps>(TouchableOpacity, {
+  base: {
+    position:         'relative',
+    alignItems:       'center',
+    justifyContent:   'center',
+    flexDirection:    'row',
+    gap:              6,
+    borderRadius:     999,      // pill by default
+    paddingHorizontal: 20,
+    paddingVertical:   10,
+    flex:             1,
+    borderWidth:     0,
+  } as ViewStyle,
+
+  variants: {
+    // ── Forward all generic style props ─────────────────────────────────────
+    ...viewStyleVariants,
+    ...viewStyleStringVariants,
+
+    // ── Appearance ───────────────────────────────────────────────────────────
+
+    primary: {
+      true: {
+        backgroundColor: theme.colors.cyan[500],
+        borderWidth:     0,
+      } as ViewStyle,
+    },
+
+    secondary: {
+      true: {
+        backgroundColor: theme.colors.indigo[500],
+        borderWidth:     0,
+      } as ViewStyle,
+    },
+
+    outline: {
+      true: {
+        backgroundColor: theme.colors.transparent,
+        borderWidth:     1.5,
+        borderColor:     theme.colors.gray[300],
+      } as ViewStyle,
+    },
+
+    ghost: {
+      true: {
+        backgroundColor: theme.colors.transparent,
+        borderWidth:     0,
+      } as ViewStyle,
+    },
+
+    link: {
+      true: {
+        backgroundColor: theme.colors.transparent,
+        borderWidth:       0,
+      } as ViewStyle,
+    },
+
+    danger: {
+      true: {
+        backgroundColor: theme.colors.red[500],
+        borderWidth:     0,
+      } as ViewStyle,
+    },
+
+    success: {
+      true: {
+        backgroundColor: theme.colors.green[500],
+        borderWidth:     0,
+      } as ViewStyle,
+    },
+
+    warning: {
+      true: {
+        backgroundColor: theme.colors.amber[400],
+        borderWidth:     0,
+      } as ViewStyle,
+    },
+
+    dropdown: {
+      true: {
+        backgroundColor:  theme.colors.white,
+        borderLeftWidth:  1,
+        borderTopWidth:   1,
+        borderRightWidth: 1,
+        borderBottomWidth: 0,
+        borderColor:      theme.colors.gray[200],
+        borderRadius:     0,
+      } as ViewStyle,
+    },
+
+    disabled: {
+      true: {
+        backgroundColor: theme.colors.gray[100],
+        borderWidth:     0,
+        opacity:         0.6,
+      } as ViewStyle,
+    },
+
+    // ── Shape ────────────────────────────────────────────────────────────────
+
+    pill: {
+      true: { borderRadius: 999, borderWidth: 0 } as ViewStyle,
+    },
+
+    rounded: {
+      true: { borderRadius: 12, borderWidth: 0 } as ViewStyle,
+    },
+
+    square: {
+      true: { borderRadius: 0, borderWidth: 0 } as ViewStyle,
+    },
+
+    // ── Size ─────────────────────────────────────────────────────────────────
+
+    xs: {
+      true: {
+        paddingHorizontal: 10,
+        paddingVertical:   4,
+        borderWidth: 0,
+      } as ViewStyle,
+    },
+
+    sm: {
+      true: {
+        paddingHorizontal: 14,
+        paddingVertical:   6,
+        borderWidth: 0,
+      } as ViewStyle,
+    },
+
+    md: {
+      true: {
+        paddingHorizontal: 20,
+        paddingVertical:   10,
+      } as ViewStyle,
+    },
+
+    lg: {
+      true: {
+        paddingHorizontal: 28,
+        paddingVertical:   14,
+        borderWidth: 0,
+      } as ViewStyle,
+    },
+
+    xl: {
+      true: {
+        paddingHorizontal: 36,
+        paddingVertical:   18,
+        borderWidth: 0,
+      } as ViewStyle,
+    },
+
+    // ── Layout ────────────────────────────────────────────────────────────────
+
+    compact: {
+      true: {
+        flex:      0,
+        alignSelf: 'flex-start',
+      } as ViewStyle,
+    },
+
+    block: {
+      true: {
+        flex:      1,
+        alignSelf: 'stretch',
+      } as ViewStyle,
+    },
+
+    icon: {
+      true: {
+        width:             44,
+        height:            44,
+        borderRadius:      22,
+        padding:           0,
+        paddingHorizontal: 0,
+        paddingVertical:   0,
+        flex:              0,
+      } as ViewStyle,
+    },
+  },
+});
+
+// ─── Spinner colour helper ────────────────────────────────────────────────────
+
+function spinnerColor(props: StyledButtonProps): string {
+  if (props.outline || props.ghost) return theme.colors.gray[600]
+  return theme.colors.white
+}
+
+// ─── Button ──────────────────────────────────────────────────────────────────
+
+const Button = React.forwardRef<
+  React.ComponentPropsWithRef<typeof ButtonBase>,
+  StyledButtonProps
+>(({ children, loading, leftIcon, rightIcon, disabled, ...rest }, ref) => {
+  const isDisabled = disabled || loading
+
+  return (
+    <ButtonBase
+      ref={ref}
+      disabled={isDisabled || undefined}  // passes disabled variant styling
+      activeOpacity={isDisabled ? 1 : 0.72}
+      {...rest}
+    >
+      {/* Left icon slot */}
+      {!loading && leftIcon ? leftIcon : null}
+
+      {/* Spinner replaces left icon while loading */}
+      {loading ? (
+        <ActivityIndicator
+          size="small"
+          color={spinnerColor(rest as StyledButtonProps)}
+          style={{ marginRight: children ? 4 : 0 }}
+        />
+      ) : null}
+
+      {typeof children === 'string' ? (
+        <StyledText>{children}</StyledText>
+      ) : children}
+
+      {/* Right icon slot */}
+      {!loading && rightIcon ? rightIcon : null}
+    </ButtonBase>
+  )
+})
+
+Button.displayName = 'StyledButton'
+
+const StyledButton = Button as RefExoticComponent
+StyledButton.Text = StyledText
+
+export { StyledButton }

package/src/card/index.tsx

@@ -0,0 +1,220 @@
+
+import { Platform, Pressable, PressableProps, View, ViewProps, ViewStyle } from 'react-native';
+import { styled } from '../utiles/styled';
+import React from 'react';
+import { theme } from '../utiles/theme';
+import { Stack, StackProps } from '../stack';
+import { StyledImageBackground, StyledImageBackgroundProps } from '../image';
+import { viewStyleVariants } from '../utiles/viewStyleVariants';
+
+const shadow = {
+  light: Platform.select({
+    ios: {
+      shadowColor: theme.colors.gray[400],
+      shadowOffset: { width: 1, height: 1 },
+      shadowOpacity: 0.2,
+      shadowRadius: 2.22,
+    },
+    android: {
+      elevation: 1,
+    },
+  }) as ViewStyle,
+  lightMedium: Platform.select({
+    ios: {
+      shadowColor: theme.colors.gray[900],
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.24,
+      shadowRadius: 2.84,
+    },
+    android: {
+      elevation: 3,
+    },
+  }) as ViewStyle,
+  medium: Platform.select({
+    ios: {
+      shadowColor: theme.colors.gray[900],
+      shadowOffset: { width: 0, height: 3 },
+      shadowOpacity: 0.29,
+      shadowRadius: 4.65,
+    },
+    android: {
+      elevation: 7,
+    },
+  }) as ViewStyle,
+  mediumDark: Platform.select({
+    ios: {
+      shadowColor: theme.colors.gray[900],
+      shadowOffset: { width: 0, height: 5 },
+      shadowOpacity: 0.36,
+      shadowRadius: 6.68,
+    },
+    android: {
+      elevation: 10,
+    },
+  }) as ViewStyle,
+  dark: Platform.select({
+    ios: {
+      shadowColor: theme.colors.gray[900],
+      shadowOffset: { width: 0, height: 7 },
+      shadowOpacity: 0.41,
+      shadowRadius: 9.11,
+    },
+    android: {
+      elevation: 14,
+    },
+  }) as ViewStyle,
+  veryDark: Platform.select({
+    ios: {
+      shadowColor: theme.colors.gray[900],
+      shadowOffset: { width: 0, height: 10 },
+      shadowOpacity: 0.5,
+      shadowRadius: 13.34,
+    },
+    android: {
+      elevation: 20,
+    },
+  }) as ViewStyle,
+};
+
+type ShadowLevel = keyof typeof shadow;
+
+type CardVariants = {
+  shadow?: ShadowLevel;
+};
+
+type CardComponentProps = CardVariants & ViewProps & ViewStyle;
+
+interface StyledCardProps extends CardComponentProps {
+  children?: React.ReactNode;
+  pressable?: boolean;
+  pressableProps?: Omit<PressableProps, 'children'>;
+}
+
+/**
+ * Base Card component with shadow support
+ * Flexible layout container with optional shadow variants
+ */
+const CardBase = styled<CardComponentProps>(View, {
+  base: {
+    flexDirection: 'column',
+    borderRadius: 8,
+  } as ViewStyle,
+  variants: {
+    ...viewStyleVariants,
+    shadow: {
+      light: shadow.light,
+      lightMedium: shadow.lightMedium,
+      medium: shadow.medium,
+      mediumDark: shadow.mediumDark,
+      dark: shadow.dark,
+      veryDark: shadow.veryDark,
+    } as any,
+  },
+});
+
+/**
+ * Wrapper component for Card with optional pressable support
+ * Flexible layout container with shadow variants
+ * Can be wrapped in Pressable for interactive behavior
+ */
+const CardComponent = React.forwardRef<React.ComponentRef<typeof CardBase>, StyledCardProps>(
+  (
+    {
+      children,
+      pressable = false,
+      pressableProps,
+      ...rest
+    },
+    ref
+  ) => {
+    const cardContent = (
+      <CardBase ref={ref} {...rest}>
+        {children}
+      </CardBase>
+    );
+
+    if (pressable && pressableProps) {
+      return <Pressable {...pressableProps}>{cardContent}</Pressable>;
+    }
+
+    return cardContent;
+  }
+);
+
+interface HeaderProps extends StackProps {
+  children: React.ReactNode;
+}
+
+const StyledHeader = React.forwardRef<React.ComponentRef<typeof Stack>, HeaderProps>(({ children, ...rest }, ref) => {
+  return (
+    <Stack borderBottomWidth={1} borderBottomColor={theme.colors.gray[100]} ref={ref} {...rest}>
+      {children}
+    </Stack>
+  );
+});
+
+StyledHeader.displayName = 'StyledHeader';
+
+interface ImageProps extends StyledImageBackgroundProps {
+  children?: React.ReactNode;
+}
+
+const StyledImage = React.forwardRef<React.ComponentRef<typeof StyledImageBackground>, ImageProps>(({ children, ...rest }, ref) => {
+  return (
+    <StyledImageBackground ref={ref} {...rest}>
+      {children}
+    </StyledImageBackground>
+  );
+});
+
+StyledImage.displayName = 'StyledImage';
+
+interface ContentProps extends StackProps {
+  children: React.ReactNode;
+}
+
+const StyledContent= React.forwardRef<React.ComponentRef<typeof Stack>, ContentProps>(({ children, ...rest }, ref) => {
+  return (
+    <Stack ref={ref} {...rest}>
+      {children}
+    </Stack>
+  );
+});
+
+StyledContent.displayName = 'StyledContent';
+
+interface FooterProps extends StackProps {
+  children: React.ReactNode;
+}
+
+const StyledFooter = React.forwardRef<React.ComponentRef<typeof Stack>, FooterProps>(({ children, ...rest }, ref) => {
+  return (
+    <Stack borderTopWidth={1} borderTopColor={theme.colors.gray[100]} ref={ref} {...rest}>
+      {children}
+    </Stack>
+  );
+});
+
+
+StyledFooter.displayName = 'StyledFooter';
+
+interface Card extends React.ForwardRefExoticComponent<
+  StyledCardProps & React.RefAttributes<React.ComponentRef<typeof CardBase>>
+> {
+  Header: typeof StyledHeader;
+  Footer: typeof StyledFooter;
+  Image: typeof StyledImage;
+  Content: typeof StyledContent;
+}
+
+const StyledCard = CardComponent as Card;
+StyledCard.Header = StyledHeader;
+StyledCard.Footer = StyledFooter;
+StyledCard.Image = StyledImage;
+StyledCard.Content = StyledContent;
+
+StyledCard.displayName = 'StyledCard';
+
+
+export { StyledCard, StyledHeader, StyledContent, StyledFooter, shadow };
+export type { CardVariants, CardComponentProps, StyledCardProps, ShadowLevel };

package/src/checkBox/index.tsx

@@ -0,0 +1,137 @@
+import React, { forwardRef, useState, useEffect } from "react";
+import {
+    TouchableOpacity,
+    TouchableOpacityProps,
+    ViewStyle,
+} from "react-native";
+import { theme } from "../utiles/theme";
+import { styled } from "../utiles/styled";
+import { viewStyleVariants } from "../utiles/viewStyleVariants";
+import { ViewStyleProps } from "../utiles/viewStyleProps";
+import { Checkmark } from "../icons";
+
+type VariantProps = {
+    checked?: boolean;
+    disabled?: boolean;
+    checkedColor?: string;
+    uncheckedColor?: string;
+    borderColor?: string;
+    checkMarkColor?: string;
+    size?: number;
+};
+
+type CheckBoxProps = VariantProps & ViewStyleProps & TouchableOpacityProps;
+
+interface StyledCheckBoxProps extends CheckBoxProps {
+
+    checked?: boolean;
+    onCheck?: (checked: boolean) => void;
+
+    // Styling
+    checkedColor?: string;
+    uncheckedColor?: string;
+    borderColor?: string;
+    checkMarkColor?: string;
+
+    // Sizing
+    size?: number;
+
+    // State
+    disabled?: boolean;
+
+    // Icon customization
+    iconProps?: any;
+    iconSize?: number;
+}
+
+const CheckBoxBase = styled<CheckBoxProps>(TouchableOpacity, {
+    base: {
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+    } as ViewStyle,
+    variants: {
+        ...viewStyleVariants,
+        disabled: {
+            true: {
+                opacity: 0.6,
+                backgroundColor: theme.colors.gray[400],
+                borderColor: theme.colors.gray[400],
+            },
+            false: {},
+        },
+        checkedColor: (color: string) => {
+            if (!color)
+                return {
+                    backgroundColor: theme.colors.gray[500],
+                    borderColor: theme.colors.gray[500],
+                    width: 24,
+                    height: 24,
+                    borderWidth: 2,
+                    borderRadius: 4,
+                };
+            return {
+                backgroundColor: color,
+                borderColor: color,
+            };
+        },
+        size: (size: number = 24) => ({
+            width: size,
+            height: size,
+        }),
+    } as any,
+});
+
+const StyledCheckBox = forwardRef<
+    React.ComponentRef<typeof CheckBoxBase>,
+    StyledCheckBoxProps
+>(
+    (
+        {
+            checked = false,
+            onCheck,
+            checkedColor,
+            uncheckedColor,
+            checkMarkColor = theme.colors.gray[400],
+            size = 24,
+            disabled = false,
+            iconProps,
+            iconSize = size * 0.6,
+            ...rest
+        },
+        ref,
+    ) => {
+        const [internalChecked, setInternalChecked] = useState(checked);
+
+        useEffect(() => {
+            setInternalChecked(checked);
+        }, [checked]);
+        
+        const handlePress = () => {
+            if (disabled) return;
+            const newChecked = !internalChecked;
+            setInternalChecked(newChecked);
+            onCheck && onCheck(newChecked);
+        };
+
+        return (
+            <CheckBoxBase
+                ref={ref}
+                checked={internalChecked}
+                checkedColor={checkedColor}
+                uncheckedColor={uncheckedColor}
+                size={size}
+                disabled={disabled}
+                onPress={handlePress}
+                {...rest}
+            >
+                {internalChecked && (
+                    <Checkmark size={iconSize} color={checkMarkColor} {...iconProps} />
+                )}
+            </CheckBoxBase>
+        );
+    },
+);
+
+StyledCheckBox.displayName = "StyledCheckBox";
+export { StyledCheckBox, type StyledCheckBoxProps };