@masumdev/rn-ui 0.1.0 → 0.1.1

package/lib/module/components/DropdownMenu.js

@@ -0,0 +1,354 @@
+"use strict";
+
+import React from "react";
+import { Dimensions, Modal, Pressable, ScrollView, StyleSheet, View } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useTheme } from "../theme/index.js";
+import { Text } from "./Text.js";
+import { renderIcon } from "./types.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DropdownMenuContext = /*#__PURE__*/React.createContext(null);
+export function useDropdownMenu() {
+  const context = React.useContext(DropdownMenuContext);
+  if (!context) {
+    throw new Error("useDropdownMenu must be used within a <DropdownMenu />");
+  }
+  return context;
+}
+export function DropdownMenu({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  children
+}) {
+  const {
+    colors
+  } = useTheme();
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const [triggerLayout, setTriggerLayout] = React.useState({
+    pageX: 0,
+    pageY: 0,
+    width: 0,
+    height: 0
+  });
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = React.useCallback(nextOpen => {
+    if (!isControlled) {
+      setUncontrolledOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  }, [isControlled, onOpenChange]);
+  return /*#__PURE__*/_jsx(DropdownMenuContext.Provider, {
+    value: {
+      open,
+      setOpen,
+      triggerLayout,
+      setTriggerLayout,
+      colors
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        alignSelf: "flex-start"
+      },
+      children: children
+    })
+  });
+}
+export function DropdownMenuTrigger({
+  children,
+  style,
+  disabled = false
+}) {
+  const {
+    open,
+    setOpen,
+    setTriggerLayout
+  } = useDropdownMenu();
+  const triggerRef = React.useRef(null);
+  const handlePress = () => {
+    if (disabled) return;
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      if (width > 0 && height > 0) {
+        setTriggerLayout({
+          pageX: x,
+          pageY: y,
+          width,
+          height
+        });
+        setOpen(!open);
+      }
+    });
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: triggerRef,
+    accessibilityRole: "button",
+    accessibilityState: {
+      expanded: open,
+      disabled
+    },
+    disabled: disabled,
+    onPress: handlePress,
+    style: style,
+    children: children
+  });
+}
+export function DropdownMenuContent({
+  children,
+  align = "start",
+  width = 200,
+  maxHeight = 280,
+  sideOffset = 6,
+  style,
+  overlayStyle,
+  modalProps
+}) {
+  const {
+    open,
+    setOpen,
+    triggerLayout,
+    colors
+  } = useDropdownMenu();
+  const {
+    components,
+    radii,
+    spacing
+  } = useTheme();
+  const progress = useSharedValue(0);
+  React.useEffect(() => {
+    progress.value = withTiming(open ? 1 : 0, {
+      duration: 150
+    });
+  }, [open, progress]);
+  const {
+    height: screenHeight,
+    width: screenWidth
+  } = Dimensions.get("window");
+  const spaceBelow = screenHeight - (triggerLayout.pageY + triggerLayout.height);
+  const renderAbove = spaceBelow < maxHeight + 40;
+  const rawLeft = align === "end" ? triggerLayout.pageX + triggerLayout.width - width : triggerLayout.pageX;
+  const left = Math.min(Math.max(spacing.sm, rawLeft), screenWidth - width - spacing.sm);
+  const positionStyle = renderAbove ? {
+    bottom: screenHeight - triggerLayout.pageY + sideOffset
+  } : {
+    top: triggerLayout.pageY + triggerLayout.height + sideOffset
+  };
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: progress.value,
+      transform: [{
+        translateY: renderAbove ? (1 - progress.value) * 8 : (1 - progress.value) * -8
+      }, {
+        scale: 0.98 + progress.value * 0.02
+      }]
+    };
+  });
+  if (!open) return null;
+  return /*#__PURE__*/_jsxs(Modal, {
+    transparent: true,
+    visible: open,
+    animationType: "none",
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
+    hardwareAccelerated: true,
+    onRequestClose: () => setOpen(false),
+    ...modalProps,
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      style: [StyleSheet.absoluteFill, overlayStyle],
+      onPress: () => setOpen(false)
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        position: "absolute",
+        left,
+        width,
+        backgroundColor: colors.surface,
+        borderWidth: components.borderWidth.strong,
+        borderColor: colors.border,
+        borderRadius: radii.lg,
+        padding: spacing.xs,
+        maxHeight,
+        overflow: "hidden"
+      }, positionStyle, animatedStyle, style],
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        keyboardShouldPersistTaps: "handled",
+        children: children
+      })
+    })]
+  });
+}
+export function DropdownMenuItem({
+  onPress,
+  children,
+  variant = "default",
+  disabled = false,
+  style
+}) {
+  const {
+    setOpen,
+    colors
+  } = useDropdownMenu();
+  const {
+    radii,
+    spacing,
+    typography
+  } = useTheme();
+  const isDestructive = variant === "destructive";
+  const textColor = disabled ? colors.textMuted : isDestructive ? colors.danger : colors.text;
+  const handlePress = () => {
+    if (disabled) return;
+    onPress?.();
+    setOpen(false);
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    disabled: disabled,
+    onPress: handlePress,
+    style: ({
+      pressed
+    }) => [{
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingVertical: spacing.sm,
+      paddingHorizontal: spacing.md,
+      borderRadius: radii.md,
+      backgroundColor: pressed ? isDestructive ? colors.dangerSoft : colors.surfaceMuted : colors.transparent,
+      opacity: disabled ? 0.5 : 1
+    }, style],
+    children: typeof children === "string" ? /*#__PURE__*/_jsx(Text, {
+      style: {
+        ...typography.bodySmall,
+        color: textColor
+      },
+      children: children
+    }) : children
+  });
+}
+function CheckIcon({
+  color
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      width: 8,
+      height: 5,
+      borderLeftWidth: 1.75,
+      borderBottomWidth: 1.75,
+      borderColor: color,
+      transform: [{
+        rotate: "-45deg"
+      }],
+      marginRight: 2
+    }
+  });
+}
+export function DropdownMenuCheckboxItem({
+  checked = false,
+  onCheckedChange,
+  children,
+  disabled = false,
+  style,
+  checkIcon
+}) {
+  const {
+    setOpen,
+    colors
+  } = useDropdownMenu();
+  const {
+    radii,
+    spacing,
+    typography
+  } = useTheme();
+  const handlePress = () => {
+    if (disabled) return;
+    onCheckedChange?.(!checked);
+    setOpen(false);
+  };
+  return /*#__PURE__*/_jsxs(Pressable, {
+    disabled: disabled,
+    onPress: handlePress,
+    style: ({
+      pressed
+    }) => [{
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingVertical: spacing.sm,
+      paddingHorizontal: spacing.md,
+      borderRadius: radii.md,
+      backgroundColor: pressed ? colors.surfaceMuted : colors.transparent,
+      opacity: disabled ? 0.5 : 1
+    }, style],
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: {
+        ...typography.bodySmall,
+        color: disabled ? colors.textMuted : colors.text,
+        flex: 1
+      },
+      children: children
+    }), checked && (checkIcon ? renderIcon(checkIcon, colors.primary, 14) : /*#__PURE__*/_jsx(CheckIcon, {
+      color: colors.primary
+    }))]
+  });
+}
+export function DropdownMenuSeparator({
+  style
+}) {
+  const {
+    colors
+  } = useDropdownMenu();
+  const {
+    spacing
+  } = useTheme();
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      height: 1,
+      backgroundColor: colors.border,
+      marginVertical: spacing.xs
+    }, style]
+  });
+}
+export function DropdownMenuLabel({
+  children,
+  style
+}) {
+  const {
+    colors
+  } = useDropdownMenu();
+  const {
+    spacing,
+    typography
+  } = useTheme();
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      paddingVertical: spacing.xs + 2,
+      paddingHorizontal: spacing.md
+    }, style],
+    children: typeof children === "string" ? /*#__PURE__*/_jsx(Text, {
+      style: {
+        ...typography.labelSmall,
+        color: colors.textMuted
+      },
+      children: children
+    }) : children
+  });
+}
+export function DropdownMenuShortcut({
+  children,
+  style
+}) {
+  const {
+    colors
+  } = useDropdownMenu();
+  const {
+    spacing,
+    typography
+  } = useTheme();
+  return /*#__PURE__*/_jsx(Text, {
+    style: [{
+      ...typography.caption,
+      color: colors.textMuted,
+      marginLeft: spacing.sm
+    }, style],
+    children: children
+  });
+}
+//# sourceMappingURL=DropdownMenu.js.map

package/lib/module/components/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Dimensions","Modal","Pressable","ScrollView","StyleSheet","View","Animated","useAnimatedStyle","useSharedValue","withTiming","useTheme","Text","renderIcon","jsx","_jsx","jsxs","_jsxs","DropdownMenuContext","createContext","useDropdownMenu","context","useContext","Error","DropdownMenu","open","controlledOpen","defaultOpen","onOpenChange","children","colors","uncontrolledOpen","setUncontrolledOpen","useState","triggerLayout","setTriggerLayout","pageX","pageY","width","height","isControlled","undefined","setOpen","useCallback","nextOpen","Provider","value","style","alignSelf","DropdownMenuTrigger","disabled","triggerRef","useRef","handlePress","current","measureInWindow","x","y","ref","accessibilityRole","accessibilityState","expanded","onPress","DropdownMenuContent","align","maxHeight","sideOffset","overlayStyle","modalProps","components","radii","spacing","progress","useEffect","duration","screenHeight","screenWidth","get","spaceBelow","renderAbove","rawLeft","left","Math","min","max","sm","positionStyle","bottom","top","animatedStyle","opacity","transform","translateY","scale","transparent","visible","animationType","statusBarTranslucent","navigationBarTranslucent","hardwareAccelerated","onRequestClose","absoluteFill","position","backgroundColor","surface","borderWidth","strong","borderColor","border","borderRadius","lg","padding","xs","overflow","keyboardShouldPersistTaps","DropdownMenuItem","variant","typography","isDestructive","textColor","textMuted","danger","text","pressed","flexDirection","alignItems","justifyContent","paddingVertical","paddingHorizontal","md","dangerSoft","surfaceMuted","bodySmall","color","CheckIcon","borderLeftWidth","borderBottomWidth","rotate","marginRight","DropdownMenuCheckboxItem","checked","onCheckedChange","checkIcon","flex","primary","DropdownMenuSeparator","marginVertical","DropdownMenuLabel","labelSmall","DropdownMenuShortcut","caption","marginLeft"],"sourceRoot":"../../../src","sources":["components/DropdownMenu.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Empty.js

@@ -0,0 +1,119 @@
+"use strict";
+
+import React from "react";
+import { View } from "react-native";
+import { useTheme } from "../theme/index.js";
+import { Text } from "./Text.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Empty({
+  bordered = false,
+  style,
+  ...props
+}) {
+  const {
+    colors,
+    components,
+    radii,
+    spacing
+  } = useTheme();
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      width: "100%",
+      minWidth: 0,
+      flexGrow: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      gap: spacing.lg,
+      borderRadius: radii.xl,
+      borderWidth: bordered ? components.borderWidth.strong : 0,
+      borderStyle: bordered ? "dashed" : "solid",
+      borderColor: bordered ? colors.border : colors.transparent,
+      padding: spacing.xxl
+    }, style],
+    ...props
+  });
+}
+export function EmptyHeader({
+  style,
+  ...props
+}) {
+  const {
+    spacing
+  } = useTheme();
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      width: "100%",
+      maxWidth: 320,
+      alignItems: "center",
+      gap: spacing.sm
+    }, style],
+    ...props
+  });
+}
+export function EmptyMedia({
+  variant = "default",
+  style,
+  ...props
+}) {
+  const {
+    colors,
+    radii,
+    spacing
+  } = useTheme();
+  const isIcon = variant === "icon";
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      marginBottom: spacing.xs,
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      width: isIcon ? 32 : undefined,
+      height: isIcon ? 32 : undefined,
+      borderRadius: isIcon ? radii.lg : undefined,
+      backgroundColor: isIcon ? colors.backgroundMuted : colors.transparent
+    }, style],
+    ...props
+  });
+}
+export function EmptyTitle({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(Text, {
+    variant: "label",
+    align: "center",
+    style: style,
+    children: children
+  });
+}
+export function EmptyDescription({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(Text, {
+    variant: "bodySmall",
+    color: "textMuted",
+    align: "center",
+    style: style,
+    children: children
+  });
+}
+export function EmptyContent({
+  style,
+  ...props
+}) {
+  const {
+    spacing
+  } = useTheme();
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      width: "100%",
+      maxWidth: 320,
+      minWidth: 0,
+      alignItems: "center",
+      gap: spacing.sm
+    }, style],
+    ...props
+  });
+}
+//# sourceMappingURL=Empty.js.map

package/lib/module/components/Empty.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","useTheme","Text","jsx","_jsx","Empty","bordered","style","props","colors","components","radii","spacing","width","minWidth","flexGrow","alignItems","justifyContent","gap","lg","borderRadius","xl","borderWidth","strong","borderStyle","borderColor","border","transparent","padding","xxl","EmptyHeader","maxWidth","sm","EmptyMedia","variant","isIcon","marginBottom","xs","flexShrink","undefined","height","backgroundColor","backgroundMuted","EmptyTitle","children","align","EmptyDescription","color","EmptyContent"],"sourceRoot":"../../../src","sources":["components/Empty.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/FloatingActionButton.js

@@ -0,0 +1,178 @@
+"use strict";
+
+import React from "react";
+import { ActivityIndicator, Pressable } from "react-native";
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
+import { useTheme } from "../theme/index.js";
+import { withAlpha } from "../utils/index.js";
+import { Text } from "./Text.js";
+import { renderIcon } from "./types.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getToneColors(tone, colors) {
+  if (tone === "primary") return {
+    base: colors.primary,
+    soft: colors.primarySoft,
+    on: colors.onPrimary
+  };
+  if (tone === "secondary") return {
+    base: colors.secondary,
+    soft: colors.secondarySoft,
+    on: colors.onSecondary
+  };
+  if (tone === "accent") return {
+    base: colors.accent,
+    soft: colors.accentSoft,
+    on: colors.onAccent
+  };
+  if (tone === "success") return {
+    base: colors.success,
+    soft: colors.successSoft,
+    on: colors.onSuccess
+  };
+  if (tone === "warning") return {
+    base: colors.warning,
+    soft: colors.warningSoft,
+    on: colors.onWarning
+  };
+  if (tone === "danger") return {
+    base: colors.danger,
+    soft: colors.dangerSoft,
+    on: colors.onDanger
+  };
+  return {
+    base: colors.info,
+    soft: colors.infoSoft,
+    on: colors.onInfo
+  };
+}
+export function FloatingActionButton({
+  icon,
+  label,
+  extended = Boolean(label),
+  size = "md",
+  tone = "primary",
+  variant = "filled",
+  placement = "bottom-end",
+  offset,
+  visible = true,
+  animated = true,
+  loading,
+  disabled,
+  fullWidth,
+  style,
+  textStyle,
+  onPressIn,
+  onPressOut,
+  ...props
+}) {
+  const {
+    colors,
+    components,
+    radii,
+    spacing,
+    typography
+  } = useTheme();
+  const [mounted, setMounted] = React.useState(visible);
+  const visibility = useSharedValue(visible ? 1 : 0);
+  const press = useSharedValue(1);
+  const isDisabled = disabled || loading;
+  const toneColors = getToneColors(tone, colors);
+  const fabTokens = components.floatingActionButton;
+  const dimension = fabTokens.size[size];
+  const iconSize = fabTokens.iconSize[size];
+  const resolvedOffset = offset ?? spacing.lg;
+  React.useEffect(() => {
+    if (visible) {
+      setMounted(true);
+    }
+    if (!animated) {
+      visibility.value = visible ? 1 : 0;
+      if (!visible) {
+        setMounted(false);
+      }
+      return;
+    }
+    visibility.value = withTiming(visible ? 1 : 0, {
+      duration: 180
+    }, finished => {
+      if (finished && !visible) {
+        runOnJS(setMounted)(false);
+      }
+    });
+  }, [animated, visible, visibility]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: visibility.value,
+    transform: [{
+      scale: press.value * (0.88 + visibility.value * 0.12)
+    }, {
+      translateY: 8 * (1 - visibility.value)
+    }]
+  }));
+  if (!mounted) {
+    return null;
+  }
+  const backgroundColor = isDisabled ? colors.disabled : variant === "filled" ? toneColors.base : variant === "soft" ? toneColors.soft : variant === "outline" ? colors.surface : colors.transparent;
+  const foregroundColor = isDisabled ? colors.disabledText : variant === "filled" ? toneColors.on : toneColors.base;
+  const borderColor = isDisabled ? colors.disabled : variant === "outline" ? withAlpha(toneColors.base, 0.42) : colors.transparent;
+  const placementStyle = placement === "none" ? {} : {
+    position: "absolute",
+    bottom: placement.startsWith("bottom") ? resolvedOffset : undefined,
+    top: placement.startsWith("top") ? resolvedOffset : undefined,
+    right: placement.endsWith("end") ? resolvedOffset : undefined,
+    left: placement.endsWith("start") ? resolvedOffset : undefined,
+    zIndex: 100
+  };
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [placementStyle, animated ? animatedStyle : undefined],
+    children: /*#__PURE__*/_jsxs(Pressable, {
+      accessibilityRole: "button",
+      disabled: isDisabled,
+      onPressIn: event => {
+        if (animated) {
+          press.value = withSpring(0.94, {
+            damping: 16,
+            stiffness: 260
+          });
+        }
+        onPressIn?.(event);
+      },
+      onPressOut: event => {
+        if (animated) {
+          press.value = withSpring(1, {
+            damping: 16,
+            stiffness: 260
+          });
+        }
+        onPressOut?.(event);
+      },
+      style: ({
+        pressed
+      }) => [{
+        minWidth: extended ? undefined : dimension,
+        width: fullWidth ? "100%" : undefined,
+        height: dimension,
+        paddingHorizontal: extended ? fabTokens.paddingX[size] : 0,
+        borderRadius: radii.full,
+        borderWidth: variant === "outline" ? components.borderWidth.strong : 0,
+        borderColor,
+        backgroundColor,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: spacing.sm,
+        opacity: !animated && pressed && !isDisabled ? 0.78 : 1
+      }, style],
+      ...props,
+      children: [loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: foregroundColor
+      }) : renderIcon(icon, foregroundColor, iconSize), extended && label ? typeof label === "string" ? /*#__PURE__*/_jsx(Text, {
+        style: [typography.label, {
+          color: foregroundColor
+        }, textStyle],
+        children: label
+      }) : label : null]
+    })
+  });
+}
+//# sourceMappingURL=FloatingActionButton.js.map