fluent-styles 1.53.0 → 1.55.0

package/lib/module/barChart/index.js

@@ -0,0 +1,292 @@
+"use strict";
+
+import React, { useRef, useEffect, useState } from 'react';
+import { Animated, Easing, Dimensions } from 'react-native';
+import Svg, { Rect, Path, G, Defs, LinearGradient, Stop, ClipPath, Line, Text as SvgText } from 'react-native-svg';
+import { theme, palettes } from 'fluent-styles';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ─── Default colours (uses theme + palettes tokens) ───────────────────────────
+
+const buildDefaults = () => ({
+  inactiveBar: theme.colors.gray[200],
+  hatchLine: 'rgba(0,0,0,0.07)',
+  activeTop: '#d4f53c',
+  activeBottom: '#a8c820',
+  tooltipBg: theme.colors.gray[900],
+  tooltipText: palettes.white,
+  activeLabelColor: theme.colors.gray[900],
+  inactiveLabelColor: theme.colors.gray[400]
+});
+
+// ─── Internal: hatched bar ────────────────────────────────────────────────────
+
+const HatchedBar = ({
+  id,
+  x,
+  y,
+  w,
+  h,
+  rx,
+  fill,
+  hatchColor,
+  hatchSpacing,
+  showHatch
+}) => {
+  const lines = [];
+  if (showHatch) {
+    for (let off = -h; off < w + h; off += hatchSpacing) {
+      lines.push(/*#__PURE__*/_jsx(Line, {
+        x1: x + off,
+        y1: y,
+        x2: x + off + h,
+        y2: y + h,
+        stroke: hatchColor,
+        strokeWidth: "5"
+      }, off));
+    }
+  }
+  return /*#__PURE__*/_jsxs(G, {
+    children: [/*#__PURE__*/_jsx(Defs, {
+      children: /*#__PURE__*/_jsx(ClipPath, {
+        id: id,
+        children: /*#__PURE__*/_jsx(Rect, {
+          x: x,
+          y: y,
+          width: w,
+          height: h,
+          rx: rx
+        })
+      })
+    }), /*#__PURE__*/_jsx(Rect, {
+      x: x,
+      y: y,
+      width: w,
+      height: h,
+      rx: rx,
+      fill: fill
+    }), showHatch && /*#__PURE__*/_jsx(G, {
+      clipPath: `url(#${id})`,
+      children: lines
+    })]
+  });
+};
+
+// ─── Internal: tooltip ────────────────────────────────────────────────────────
+
+const Tooltip = ({
+  cx,
+  barTop,
+  label,
+  bgColor,
+  textColor
+}) => {
+  const HEIGHT = 32;
+  const boxW = Math.max(label.length * 8 + 28, 60);
+  const boxX = cx - boxW / 2;
+  const boxY = barTop - HEIGHT - 14;
+  return /*#__PURE__*/_jsxs(G, {
+    children: [/*#__PURE__*/_jsx(Rect, {
+      x: boxX,
+      y: boxY,
+      width: boxW,
+      height: HEIGHT,
+      rx: HEIGHT / 2,
+      fill: bgColor
+    }), /*#__PURE__*/_jsx(Path, {
+      d: `M ${cx - 7} ${boxY + HEIGHT} L ${cx + 7} ${boxY + HEIGHT} L ${cx} ${boxY + HEIGHT + 9}`,
+      fill: bgColor
+    }), /*#__PURE__*/_jsx(SvgText, {
+      x: cx,
+      y: boxY + HEIGHT / 2 + 5,
+      textAnchor: "middle",
+      fontSize: theme.fontSize.small,
+      fontWeight: theme.fontWeight.bold,
+      fill: textColor,
+      fontFamily: "System",
+      children: label
+    })]
+  });
+};
+
+// ─── StyledBar ────────────────────────────────────────────────────────────────
+
+/**
+ * StyledBar — production-ready animated bar chart for fluent-styles apps.
+ *
+ * @example Basic (workout, lime theme)
+ * ```tsx
+ * <StyledBar
+ *   data={[
+ *     { label: 'Mon', value: 45 },
+ *     { label: 'Tue', value: 70, active: true },
+ *     { label: 'Wed', value: 55 },
+ *   ]}
+ *   unit="min"
+ * />
+ * ```
+ *
+ * @example Inside a StyledCard with padding={20}, screen padding=20
+ * ```tsx
+ * // containerPaddingHorizontal = (screenPad + cardPad) * 2 = (20+20)*2 = 80
+ * <StyledCard padding={20}>
+ *   <StyledBar data={data} unit="kg" containerPaddingHorizontal={80} />
+ * </StyledCard>
+ * ```
+ *
+ * @example Blue water theme
+ * ```tsx
+ * <StyledBar
+ *   data={waterData}
+ *   unit="mL"
+ *   maxValue={3000}
+ *   colors={{
+ *     activeTop: palettes.blue[400],
+ *     activeBottom: palettes.blue[600],
+ *     tooltipBg: palettes.blue[900],
+ *     inactiveBar: palettes.blue[100],
+ *   }}
+ * />
+ * ```
+ */
+export const StyledBar = ({
+  data,
+  maxValue: maxValueProp,
+  width: widthProp,
+  containerPaddingHorizontal = 80,
+  height = 180,
+  barWidthRatio = 0.62,
+  labelHeight = 28,
+  showHatch = true,
+  hatchSpacing = 8,
+  tooltipLabel,
+  unit = '',
+  colors: colorsProp,
+  animated = true,
+  animationDuration = 600
+}) => {
+  const C = {
+    ...buildDefaults(),
+    ...colorsProp
+  };
+
+  // ── Width: respect container padding ──────────────────────────────────────
+  const screenW = Dimensions.get('window').width;
+  const chartW = widthProp ?? screenW - containerPaddingHorizontal;
+  const count = data.length;
+  const slotW = chartW / count;
+  const barW = slotW * barWidthRatio;
+  const barPad = (slotW - barW) / 2;
+  const rx = barW / 2;
+
+  // ── Scale ─────────────────────────────────────────────────────────────────
+  const maxValue = maxValueProp ?? Math.max(...data.map(d => d.value ?? 0), 1);
+
+  // Extra space at top for tooltip bubble
+  const tooltipReserve = 52;
+  const plotH = height;
+  const svgH = tooltipReserve + plotH + labelHeight;
+
+  // ── Active bar ────────────────────────────────────────────────────────────
+  const activeIdx = data.findIndex(d => d.active);
+  const activeDatum = activeIdx >= 0 ? data[activeIdx] : null;
+  const resolvedTooltip = tooltipLabel ?? (activeDatum?.value != null ? `${activeDatum.value}${unit ? ' ' + unit : ''}` : '');
+
+  // ── Animation ─────────────────────────────────────────────────────────────
+  const animValue = useRef(new Animated.Value(animated ? 0 : 1)).current;
+  const [progress, setProgress] = useState(animated ? 0 : 1);
+  useEffect(() => {
+    if (!animated) return;
+    const id = animValue.addListener(({
+      value
+    }) => setProgress(value));
+    Animated.timing(animValue, {
+      toValue: 1,
+      duration: animationDuration,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: false
+    }).start();
+    return () => animValue.removeListener(id);
+  }, []);
+
+  // ── Render ────────────────────────────────────────────────────────────────
+  return /*#__PURE__*/_jsxs(Svg, {
+    width: chartW,
+    height: svgH,
+    children: [data.map((d, i) => {
+      const rawH = d.value != null ? d.value / maxValue * plotH : plotH * 0.38;
+      const bh = rawH * progress;
+      const bx = i * slotW + barPad;
+      const baseline = tooltipReserve + plotH;
+      const by = baseline - bh;
+      const cx = bx + barW / 2;
+      const isActive = !!d.active;
+      const hasValue = d.value != null;
+      return /*#__PURE__*/_jsxs(G, {
+        children: [isActive ? /*#__PURE__*/_jsxs(G, {
+          children: [/*#__PURE__*/_jsx(Defs, {
+            children: /*#__PURE__*/_jsxs(LinearGradient, {
+              id: `ag${i}`,
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: "1",
+              children: [/*#__PURE__*/_jsx(Stop, {
+                offset: "0%",
+                stopColor: C.activeTop,
+                stopOpacity: "1"
+              }), /*#__PURE__*/_jsx(Stop, {
+                offset: "100%",
+                stopColor: C.activeBottom,
+                stopOpacity: "0.8"
+              })]
+            })
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: bx,
+            y: by,
+            width: barW,
+            height: bh,
+            rx: rx,
+            fill: `url(#ag${i})`
+          })]
+        }) : /*#__PURE__*/_jsx(HatchedBar, {
+          id: `hb-${i}`,
+          x: bx,
+          y: by,
+          w: barW,
+          h: bh,
+          rx: rx,
+          fill: C.inactiveBar,
+          hatchColor: C.hatchLine,
+          hatchSpacing: hatchSpacing,
+          showHatch: showHatch && hasValue
+        }), /*#__PURE__*/_jsx(SvgText, {
+          x: cx,
+          y: tooltipReserve + plotH + labelHeight - 4,
+          textAnchor: "middle",
+          fontSize: theme.fontSize.small,
+          fill: isActive ? C.activeLabelColor : C.inactiveLabelColor,
+          fontWeight: isActive ? theme.fontWeight.bold : theme.fontWeight.normal,
+          fontFamily: "System",
+          children: d.label
+        })]
+      }, `bar-${i}`);
+    }), activeIdx >= 0 && resolvedTooltip && progress > 0.4 && (() => {
+      const bx = activeIdx * slotW + barPad;
+      const cx = bx + barW / 2;
+      const rawH = (activeDatum.value ?? plotH * 0.38) / maxValue * plotH;
+      const bh = rawH * progress;
+      const barTop = tooltipReserve + plotH - bh;
+      return /*#__PURE__*/_jsx(Tooltip, {
+        cx: cx,
+        barTop: barTop,
+        label: resolvedTooltip,
+        bgColor: C.tooltipBg,
+        textColor: C.tooltipText
+      });
+    })()]
+  });
+};
+export default StyledBar;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","useEffect","useState","Animated","Easing","Dimensions","Svg","Rect","Path","G","Defs","LinearGradient","Stop","ClipPath","Line","Text","SvgText","theme","palettes","jsx","_jsx","jsxs","_jsxs","buildDefaults","inactiveBar","colors","gray","hatchLine","activeTop","activeBottom","tooltipBg","tooltipText","white","activeLabelColor","inactiveLabelColor","HatchedBar","id","x","y","w","h","rx","fill","hatchColor","hatchSpacing","showHatch","lines","off","push","x1","y1","x2","y2","stroke","strokeWidth","children","width","height","clipPath","Tooltip","cx","barTop","label","bgColor","textColor","HEIGHT","boxW","Math","max","length","boxX","boxY","d","textAnchor","fontSize","small","fontWeight","bold","fontFamily","StyledBar","data","maxValue","maxValueProp","widthProp","containerPaddingHorizontal","barWidthRatio","labelHeight","tooltipLabel","unit","colorsProp","animated","animationDuration","C","screenW","get","chartW","count","slotW","barW","barPad","map","value","tooltipReserve","plotH","svgH","activeIdx","findIndex","active","activeDatum","resolvedTooltip","animValue","Value","current","progress","setProgress","addListener","timing","toValue","duration","easing","out","cubic","useNativeDriver","start","removeListener","i","rawH","bh","bx","baseline","by","isActive","hasValue","offset","stopColor","stopOpacity","normal"],"sourceRoot":"../../../src","sources":["barChart/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/button/index.js

@@ -0,0 +1,224 @@
+"use strict";
+
+import React from 'react';
+import { TouchableOpacity, ActivityIndicator } from 'react-native';
+import { styled } from "../utiles/styled.js";
+import { viewStyleStringVariants, viewStyleVariants } from "../utiles/viewStyleVariants.js";
+import { StyledText } from "../text/index.js";
+import { theme } from "../utiles/theme.js";
+
+// ─── Variant shape ────────────────────────────────────────────────────────────
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ─── Base styled component ────────────────────────────────────────────────────
+
+const ButtonBase = styled(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
+  },
+  variants: {
+    // ── Forward all generic style props ─────────────────────────────────────
+    ...viewStyleVariants,
+    ...viewStyleStringVariants,
+    // ── Appearance ───────────────────────────────────────────────────────────
+
+    primary: {
+      true: {
+        backgroundColor: theme.colors.cyan[500],
+        borderWidth: 0
+      }
+    },
+    secondary: {
+      true: {
+        backgroundColor: theme.colors.indigo[500],
+        borderWidth: 0
+      }
+    },
+    outline: {
+      true: {
+        backgroundColor: theme.colors.transparent,
+        borderWidth: 1.5,
+        borderColor: theme.colors.gray[300]
+      }
+    },
+    ghost: {
+      true: {
+        backgroundColor: theme.colors.transparent,
+        borderWidth: 0
+      }
+    },
+    link: {
+      true: {
+        backgroundColor: theme.colors.transparent,
+        borderWidth: 0
+      }
+    },
+    danger: {
+      true: {
+        backgroundColor: theme.colors.red[500],
+        borderWidth: 0
+      }
+    },
+    success: {
+      true: {
+        backgroundColor: theme.colors.green[500],
+        borderWidth: 0
+      }
+    },
+    warning: {
+      true: {
+        backgroundColor: theme.colors.amber[400],
+        borderWidth: 0
+      }
+    },
+    dropdown: {
+      true: {
+        backgroundColor: theme.colors.white,
+        borderLeftWidth: 1,
+        borderTopWidth: 1,
+        borderRightWidth: 1,
+        borderBottomWidth: 0,
+        borderColor: theme.colors.gray[200],
+        borderRadius: 0
+      }
+    },
+    disabled: {
+      true: {
+        backgroundColor: theme.colors.gray[100],
+        borderWidth: 0,
+        opacity: 0.6
+      }
+    },
+    // ── Shape ────────────────────────────────────────────────────────────────
+
+    pill: {
+      true: {
+        borderRadius: 999,
+        borderWidth: 0
+      }
+    },
+    rounded: {
+      true: {
+        borderRadius: 12,
+        borderWidth: 0
+      }
+    },
+    square: {
+      true: {
+        borderRadius: 0,
+        borderWidth: 0
+      }
+    },
+    // ── Size ─────────────────────────────────────────────────────────────────
+
+    xs: {
+      true: {
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        borderWidth: 0
+      }
+    },
+    sm: {
+      true: {
+        paddingHorizontal: 14,
+        paddingVertical: 6,
+        borderWidth: 0
+      }
+    },
+    md: {
+      true: {
+        paddingHorizontal: 20,
+        paddingVertical: 10
+      }
+    },
+    lg: {
+      true: {
+        paddingHorizontal: 28,
+        paddingVertical: 14,
+        borderWidth: 0
+      }
+    },
+    xl: {
+      true: {
+        paddingHorizontal: 36,
+        paddingVertical: 18,
+        borderWidth: 0
+      }
+    },
+    // ── Layout ────────────────────────────────────────────────────────────────
+
+    compact: {
+      true: {
+        flex: 0,
+        alignSelf: 'flex-start'
+      }
+    },
+    block: {
+      true: {
+        flex: 1,
+        alignSelf: 'stretch'
+      }
+    },
+    icon: {
+      true: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        padding: 0,
+        paddingHorizontal: 0,
+        paddingVertical: 0,
+        flex: 0
+      }
+    }
+  }
+});
+
+// ─── Spinner colour helper ────────────────────────────────────────────────────
+
+function spinnerColor(props) {
+  if (props.outline || props.ghost) return theme.colors.gray[600];
+  return theme.colors.white;
+}
+
+// ─── Button ──────────────────────────────────────────────────────────────────
+
+const Button = /*#__PURE__*/React.forwardRef(({
+  children,
+  loading,
+  leftIcon,
+  rightIcon,
+  disabled,
+  ...rest
+}, ref) => {
+  const isDisabled = disabled || loading;
+  return /*#__PURE__*/_jsxs(ButtonBase, {
+    ref: ref,
+    disabled: isDisabled || undefined // passes disabled variant styling
+    ,
+    activeOpacity: isDisabled ? 1 : 0.72,
+    ...rest,
+    children: [!loading && leftIcon ? leftIcon : null, loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+      size: "small",
+      color: spinnerColor(rest),
+      style: {
+        marginRight: children ? 4 : 0
+      }
+    }) : null, typeof children === 'string' ? /*#__PURE__*/_jsx(StyledText, {
+      children: children
+    }) : children, !loading && rightIcon ? rightIcon : null]
+  });
+});
+Button.displayName = 'StyledButton';
+const StyledButton = Button;
+StyledButton.Text = StyledText;
+export { StyledButton };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","TouchableOpacity","ActivityIndicator","styled","viewStyleStringVariants","viewStyleVariants","StyledText","theme","jsx","_jsx","jsxs","_jsxs","ButtonBase","base","position","alignItems","justifyContent","flexDirection","gap","borderRadius","paddingHorizontal","paddingVertical","flex","borderWidth","variants","primary","true","backgroundColor","colors","cyan","secondary","indigo","outline","transparent","borderColor","gray","ghost","link","danger","red","success","green","warning","amber","dropdown","white","borderLeftWidth","borderTopWidth","borderRightWidth","borderBottomWidth","disabled","opacity","pill","rounded","square","xs","sm","md","lg","xl","compact","alignSelf","block","icon","width","height","padding","spinnerColor","props","Button","forwardRef","children","loading","leftIcon","rightIcon","rest","ref","isDisabled","undefined","activeOpacity","size","color","style","marginRight","displayName","StyledButton","Text"],"sourceRoot":"../../../src","sources":["button/index.tsx"],"mappings":"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","ignoreList":[]}