fluent-styles 1.54.0 → 1.55.0

package/lib/module/card/index.js

@@ -0,0 +1,198 @@
+"use strict";
+
+import { Platform, Pressable, View } from 'react-native';
+import { styled } from "../utiles/styled.js";
+import React from 'react';
+import { theme } from "../utiles/theme.js";
+import { Stack } from "../stack/index.js";
+import { StyledImageBackground } from "../image/index.js";
+import { viewStyleVariants } from "../utiles/viewStyleVariants.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+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
+    }
+  }),
+  lightMedium: Platform.select({
+    ios: {
+      shadowColor: theme.colors.gray[900],
+      shadowOffset: {
+        width: 0,
+        height: 2
+      },
+      shadowOpacity: 0.24,
+      shadowRadius: 2.84
+    },
+    android: {
+      elevation: 3
+    }
+  }),
+  medium: Platform.select({
+    ios: {
+      shadowColor: theme.colors.gray[900],
+      shadowOffset: {
+        width: 0,
+        height: 3
+      },
+      shadowOpacity: 0.29,
+      shadowRadius: 4.65
+    },
+    android: {
+      elevation: 7
+    }
+  }),
+  mediumDark: Platform.select({
+    ios: {
+      shadowColor: theme.colors.gray[900],
+      shadowOffset: {
+        width: 0,
+        height: 5
+      },
+      shadowOpacity: 0.36,
+      shadowRadius: 6.68
+    },
+    android: {
+      elevation: 10
+    }
+  }),
+  dark: Platform.select({
+    ios: {
+      shadowColor: theme.colors.gray[900],
+      shadowOffset: {
+        width: 0,
+        height: 7
+      },
+      shadowOpacity: 0.41,
+      shadowRadius: 9.11
+    },
+    android: {
+      elevation: 14
+    }
+  }),
+  veryDark: Platform.select({
+    ios: {
+      shadowColor: theme.colors.gray[900],
+      shadowOffset: {
+        width: 0,
+        height: 10
+      },
+      shadowOpacity: 0.5,
+      shadowRadius: 13.34
+    },
+    android: {
+      elevation: 20
+    }
+  })
+};
+/**
+ * Base Card component with shadow support
+ * Flexible layout container with optional shadow variants
+ */
+const CardBase = styled(View, {
+  base: {
+    flexDirection: 'column',
+    borderRadius: 8
+  },
+  variants: {
+    ...viewStyleVariants,
+    shadow: {
+      light: shadow.light,
+      lightMedium: shadow.lightMedium,
+      medium: shadow.medium,
+      mediumDark: shadow.mediumDark,
+      dark: shadow.dark,
+      veryDark: shadow.veryDark
+    }
+  }
+});
+
+/**
+ * Wrapper component for Card with optional pressable support
+ * Flexible layout container with shadow variants
+ * Can be wrapped in Pressable for interactive behavior
+ */
+const CardComponent = /*#__PURE__*/React.forwardRef(({
+  children,
+  pressable = false,
+  pressableProps,
+  ...rest
+}, ref) => {
+  const cardContent = /*#__PURE__*/_jsx(CardBase, {
+    ref: ref,
+    ...rest,
+    children: children
+  });
+  if (pressable && pressableProps) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      ...pressableProps,
+      children: cardContent
+    });
+  }
+  return cardContent;
+});
+const StyledHeader = /*#__PURE__*/React.forwardRef(({
+  children,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/_jsx(Stack, {
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.gray[100],
+    ref: ref,
+    ...rest,
+    children: children
+  });
+});
+StyledHeader.displayName = 'StyledHeader';
+const StyledImage = /*#__PURE__*/React.forwardRef(({
+  children,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/_jsx(StyledImageBackground, {
+    ref: ref,
+    ...rest,
+    children: children
+  });
+});
+StyledImage.displayName = 'StyledImage';
+const StyledContent = /*#__PURE__*/React.forwardRef(({
+  children,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/_jsx(Stack, {
+    ref: ref,
+    ...rest,
+    children: children
+  });
+});
+StyledContent.displayName = 'StyledContent';
+const StyledFooter = /*#__PURE__*/React.forwardRef(({
+  children,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/_jsx(Stack, {
+    borderTopWidth: 1,
+    borderTopColor: theme.colors.gray[100],
+    ref: ref,
+    ...rest,
+    children: children
+  });
+});
+StyledFooter.displayName = 'StyledFooter';
+const StyledCard = CardComponent;
+StyledCard.Header = StyledHeader;
+StyledCard.Footer = StyledFooter;
+StyledCard.Image = StyledImage;
+StyledCard.Content = StyledContent;
+StyledCard.displayName = 'StyledCard';
+export { StyledCard, StyledHeader, StyledContent, StyledFooter, shadow };
+//# sourceMappingURL=index.js.map

package/lib/module/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Platform","Pressable","View","styled","React","theme","Stack","StyledImageBackground","viewStyleVariants","jsx","_jsx","shadow","light","select","ios","shadowColor","colors","gray","shadowOffset","width","height","shadowOpacity","shadowRadius","android","elevation","lightMedium","medium","mediumDark","dark","veryDark","CardBase","base","flexDirection","borderRadius","variants","CardComponent","forwardRef","children","pressable","pressableProps","rest","ref","cardContent","StyledHeader","borderBottomWidth","borderBottomColor","displayName","StyledImage","StyledContent","StyledFooter","borderTopWidth","borderTopColor","StyledCard","Header","Footer","Image","Content"],"sourceRoot":"../../../src","sources":["card/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/checkBox/index.js

@@ -0,0 +1,86 @@
+"use strict";
+
+import React, { forwardRef, useState, useEffect } from "react";
+import { TouchableOpacity } from "react-native";
+import { theme } from "../utiles/theme.js";
+import { styled } from "../utiles/styled.js";
+import { viewStyleVariants } from "../utiles/viewStyleVariants.js";
+import { Checkmark } from "../icons/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const CheckBoxBase = styled(TouchableOpacity, {
+  base: {
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column"
+  },
+  variants: {
+    ...viewStyleVariants,
+    disabled: {
+      true: {
+        opacity: 0.6,
+        backgroundColor: theme.colors.gray[400],
+        borderColor: theme.colors.gray[400]
+      },
+      false: {}
+    },
+    checkedColor: color => {
+      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 = 24) => ({
+      width: size,
+      height: size
+    })
+  }
+});
+const StyledCheckBox = /*#__PURE__*/forwardRef(({
+  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 /*#__PURE__*/_jsx(CheckBoxBase, {
+    ref: ref,
+    checked: internalChecked,
+    checkedColor: checkedColor,
+    uncheckedColor: uncheckedColor,
+    size: size,
+    disabled: disabled,
+    onPress: handlePress,
+    ...rest,
+    children: internalChecked && /*#__PURE__*/_jsx(Checkmark, {
+      size: iconSize,
+      color: checkMarkColor,
+      ...iconProps
+    })
+  });
+});
+StyledCheckBox.displayName = "StyledCheckBox";
+export { StyledCheckBox };
+//# sourceMappingURL=index.js.map

package/lib/module/checkBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","useState","useEffect","TouchableOpacity","theme","styled","viewStyleVariants","Checkmark","jsx","_jsx","CheckBoxBase","base","justifyContent","alignItems","flexDirection","variants","disabled","true","opacity","backgroundColor","colors","gray","borderColor","false","checkedColor","color","width","height","borderWidth","borderRadius","size","StyledCheckBox","checked","onCheck","uncheckedColor","checkMarkColor","iconProps","iconSize","rest","ref","internalChecked","setInternalChecked","handlePress","newChecked","onPress","children","displayName"],"sourceRoot":"../../../src","sources":["checkBox/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/chips/index.js

@@ -0,0 +1,232 @@
+"use strict";
+
+/**
+ * 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 ────────────────────────────────────────────────────────────────────
+
+// leading ReactNode icon + label
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ─── Size tokens ──────────────────────────────────────────────────────────────
+
+const SIZE = {
+  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 = ({
+  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 = 'transparent';
+  let chipBorder = 'transparent';
+  let borderWidth = 0;
+  let labelColor = 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' ? /*#__PURE__*/_jsx(StyledText, {
+    style: {
+      fontSize: S.iconSize + 2,
+      marginRight: 5
+    },
+    children: isSelected ? '❤️' : '🤍'
+  }) : null;
+
+  // ── Checkmark for outlined / ingredient / smooth ─────────────────────────
+  const checkIcon = showCheck && isSelected && (variant === 'outlined' || variant === 'ingredient' || variant === 'smooth' || variant === 'filled') ? /*#__PURE__*/_jsx(Icon, {
+    name: "check",
+    size: S.checkSize,
+    color: labelColor,
+    style: {
+      marginRight: 4
+    }
+  }) : null;
+  return /*#__PURE__*/_jsx(StyledPressable, {
+    onPress: handlePress,
+    paddingHorizontal: S.paddingH,
+    paddingVertical: S.paddingV,
+    borderRadius: rx,
+    backgroundColor: chipBg,
+    borderWidth: borderWidth,
+    borderColor: chipBorder,
+    opacity: opacity,
+    alignSelf: "flex-start",
+    children: /*#__PURE__*/_jsxs(Stack, {
+      horizontal: true,
+      alignItems: "center",
+      gap: 4,
+      children: [checkIcon, heartIcon, !checkIcon && !heartIcon && icon ? icon : null, /*#__PURE__*/_jsx(StyledText, {
+        fontSize: S.fontSize,
+        fontWeight: isSelected ? theme.fontWeight.semiBold : theme.fontWeight.normal,
+        color: labelColor,
+        children: label
+      })]
+    })
+  });
+};
+export default StyledChip;
+//# sourceMappingURL=index.js.map

package/lib/module/chips/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Icon","Stack","StyledText","StyledPressable","theme","palettes","jsx","_jsx","jsxs","_jsxs","SIZE","sm","paddingH","paddingV","fontSize","iconSize","radius","checkSize","md","lg","StyledChip","label","variant","size","selected","controlledSelected","defaultSelected","onPress","color","bgColor","icon","showCheck","disabled","borderRadius","borderRadiusOverride","internalSelected","setInternalSelected","isControlled","undefined","isSelected","S","rx","handlePress","next","chipBg","chipBorder","borderWidth","labelColor","colors","gray","opacity","accentColor","white","pink","heartIcon","style","marginRight","children","checkIcon","name","paddingHorizontal","paddingVertical","backgroundColor","borderColor","alignSelf","horizontal","alignItems","gap","fontWeight","semiBold","normal"],"sourceRoot":"../../../src","sources":["chips/index.tsx"],"mappings":"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","ignoreList":[]}