@nori-ui/core 0.0.5 → 1.0.2

package/dist/components/FloatButton/index.cjs

@@ -0,0 +1,1254 @@
+'use strict';
+
+var React = require('react');
+var reactNative = require('react-native');
+var jsxRuntime = require('nativewind/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var isDev = process.env.NODE_ENV !== "production";
+var SafeAreaInsetsContext = /* @__PURE__ */ React__namespace.createContext(null);
+if (isDev) {
+  SafeAreaInsetsContext.displayName = "SafeAreaInsetsContext";
+}
+var SafeAreaFrameContext = /* @__PURE__ */ React__namespace.createContext(null);
+if (isDev) {
+  SafeAreaFrameContext.displayName = "SafeAreaFrameContext";
+}
+reactNative.StyleSheet.create({
+  fill: {
+    flex: 1
+  }
+});
+SafeAreaInsetsContext.Consumer;
+
+// src/i18n/default-dictionary.ts
+var defaultDictionary = {
+  // generic / shared
+  "common.cancel": "Cancel",
+  "common.confirm": "Confirm",
+  "common.close": "Close",
+  "common.back": "Back",
+  "common.loading": "Loading",
+  "common.error": "Something went wrong",
+  "common.retry": "Try again",
+  // breadcrumb
+  "breadcrumb.ariaLabel": "Breadcrumb",
+  "breadcrumb.expandLabel": "Show full path",
+  "breadcrumb.ellipsisLabel": "More",
+  "breadcrumb.currentPageLabel": "Current page",
+  "breadcrumb.siblingMenuLabel": "Open sibling pages",
+  // pagination
+  "pagination.ariaLabel": "Pagination",
+  "pagination.previous": "Previous page",
+  "pagination.next": "Next page",
+  "pagination.first": "First page",
+  "pagination.last": "Last page",
+  "pagination.ellipsis": "More pages",
+  "pagination.currentPage": "Current page",
+  "pagination.gotoPage": "Go to page {{page}}",
+  "pagination.range": "Showing {{from}}\u2013{{to}} of {{total}}",
+  "pagination.pageOf": "Page {{page}} of {{total}}",
+  "pagination.pageSizeLabel": "Items per page",
+  "pagination.jumperLabel": "Go to page",
+  "pagination.jumperPlaceholder": "#",
+  // floatButton
+  "floatButton.backToTop": "Back to top",
+  // calendar
+  "calendar.header.previous": "Previous",
+  "calendar.header.next": "Next",
+  "calendar.header.openMonthView": "Open month picker",
+  "calendar.header.openYearView": "Open year picker",
+  "calendar.header.openDayView": "Open day picker",
+  "calendar.today": "Today",
+  "calendar.clear": "Clear",
+  // button
+  "button.loadingLabel": "Loading",
+  // input
+  "input.clear": "Clear",
+  "input.passwordShow": "Show password",
+  "input.passwordHide": "Hide password",
+  // checkbox / switch
+  "checkbox.checked": "Checked",
+  "checkbox.unchecked": "Unchecked",
+  "switch.on": "On",
+  "switch.off": "Off"
+};
+
+// src/i18n/resolve.ts
+function resolveI18n(input, defaults) {
+  if (typeof input === "function") {
+    return (keyOrKeys, options) => input(keyOrKeys, options);
+  }
+  const dict = input ?? {};
+  return (keyOrKeys, options) => {
+    const keys = Array.isArray(keyOrKeys) ? keyOrKeys : [keyOrKeys];
+    for (const rawKey of keys) {
+      const key = pluralize(rawKey, options?.count);
+      const template = dict[key] ?? defaults[key];
+      if (template !== void 0) {
+        return interpolate(template, options);
+      }
+    }
+    const lastKey = keys[keys.length - 1];
+    if (options?.defaultValue !== void 0) {
+      return interpolate(options.defaultValue, options);
+    }
+    return lastKey ?? "";
+  };
+}
+__name(resolveI18n, "resolveI18n");
+function pluralize(key, count) {
+  if (count === void 0) {
+    return key;
+  }
+  if (count === 1) {
+    return `${key}_one`;
+  }
+  return `${key}_other`;
+}
+__name(pluralize, "pluralize");
+function interpolate(template, options) {
+  if (!options) {
+    return template;
+  }
+  return template.replace(/\{\{\s*([A-Za-z0-9_.-]+)\s*\}\}/g, (_match, name) => {
+    const value = options[name];
+    return value === void 0 || value === null ? "" : String(value);
+  });
+}
+__name(interpolate, "interpolate");
+var defaultValue = {
+  t: resolveI18n(void 0, defaultDictionary)
+};
+var I18nContext = React.createContext(defaultValue);
+I18nContext.displayName = "I18nContext";
+
+// src/i18n/use-translation.ts
+function useTranslation() {
+  return React.useContext(I18nContext);
+}
+__name(useTranslation, "useTranslation");
+
+// ../tokens/build/theme.ts
+var theme = {
+  color: {
+    danger: "#ef4444",
+    info: "#3b82f6",
+    neutral: {
+      "100": "#f4f4f5",
+      "200": "#e4e4e7",
+      "300": "#d4d4d8",
+      "400": "#a1a1aa",
+      "50": "#fafafa",
+      "500": "#71717a",
+      "600": "#52525b",
+      "700": "#3f3f46",
+      "800": "#27272a",
+      "900": "#18181b"
+    },
+    primary: {
+      "100": "#ccfbf1",
+      "200": "#99f6e4",
+      "300": "#5eead4",
+      "400": "#2dd4bf",
+      "50": "#f0fdfa",
+      "500": "#14b8a6",
+      "600": "#0d9488",
+      "700": "#0f766e",
+      "800": "#115e59",
+      "900": "#134e4a"
+    },
+    success: "#22c55e",
+    warning: "#f59e0b"
+  },
+  fontFamily: {
+    body: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    display: "ui-serif, Georgia, 'Times New Roman', serif",
+    mono: "ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace"
+  },
+  fontSize: {
+    "2xl": "24px",
+    "3xl": "30px",
+    "4xl": "36px",
+    lg: "18px",
+    md: "16px",
+    sm: "14px",
+    xl: "20px",
+    xs: "12px"
+  },
+  fontWeight: {
+    bold: "700",
+    medium: "500",
+    regular: "400",
+    semibold: "600"
+  },
+  lineHeight: {
+    normal: "1.4",
+    relaxed: "1.6",
+    tight: "1.2"
+  },
+  radius: {
+    "2xl": "16px",
+    full: "9999px",
+    lg: "8px",
+    md: "6px",
+    none: "0px",
+    sm: "4px",
+    xl: "12px"
+  },
+  semantic: {
+    background: {
+      default: "#fafafa",
+      elevated: "#ffffff",
+      subtle: "#f4f4f5"
+    },
+    border: {
+      default: "#e4e4e7",
+      strong: "#d4d4d8"
+    },
+    interactive: {
+      destructive: "#ef4444",
+      primary: "#0d9488",
+      primaryHover: "#0f766e",
+      primaryPressed: "#115e59"
+    },
+    text: {
+      default: "#18181b",
+      inverted: "#fafafa",
+      muted: "#52525b"
+    }
+  },
+  shadow: {
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+  },
+  spacing: {
+    "0": "0px",
+    "1": "4px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "2": "8px",
+    "20": "80px",
+    "24": "96px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px"
+  }
+};
+var themeDark = {
+  color: {
+    danger: "#ef4444",
+    info: "#3b82f6",
+    neutral: {
+      "100": "#f4f4f5",
+      "200": "#e4e4e7",
+      "300": "#d4d4d8",
+      "400": "#a1a1aa",
+      "50": "#fafafa",
+      "500": "#71717a",
+      "600": "#52525b",
+      "700": "#3f3f46",
+      "800": "#27272a",
+      "900": "#18181b"
+    },
+    primary: {
+      "100": "#ccfbf1",
+      "200": "#99f6e4",
+      "300": "#5eead4",
+      "400": "#2dd4bf",
+      "50": "#f0fdfa",
+      "500": "#14b8a6",
+      "600": "#0d9488",
+      "700": "#0f766e",
+      "800": "#115e59",
+      "900": "#134e4a"
+    },
+    success: "#22c55e",
+    warning: "#f59e0b"
+  },
+  fontFamily: {
+    body: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    display: "ui-serif, Georgia, 'Times New Roman', serif",
+    mono: "ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace"
+  },
+  fontSize: {
+    "2xl": "24px",
+    "3xl": "30px",
+    "4xl": "36px",
+    lg: "18px",
+    md: "16px",
+    sm: "14px",
+    xl: "20px",
+    xs: "12px"
+  },
+  fontWeight: {
+    bold: "700",
+    medium: "500",
+    regular: "400",
+    semibold: "600"
+  },
+  lineHeight: {
+    normal: "1.4",
+    relaxed: "1.6",
+    tight: "1.2"
+  },
+  radius: {
+    "2xl": "16px",
+    full: "9999px",
+    lg: "8px",
+    md: "6px",
+    none: "0px",
+    sm: "4px",
+    xl: "12px"
+  },
+  semantic: {
+    background: {
+      default: "#18181b",
+      elevated: "#3f3f46",
+      subtle: "#27272a"
+    },
+    border: {
+      default: "#3f3f46",
+      strong: "#52525b"
+    },
+    interactive: {
+      destructive: "#ef4444",
+      primary: "#2dd4bf",
+      primaryHover: "#5eead4",
+      primaryPressed: "#99f6e4"
+    },
+    text: {
+      default: "#fafafa",
+      inverted: "#18181b",
+      muted: "#a1a1aa"
+    }
+  },
+  shadow: {
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+  },
+  spacing: {
+    "0": "0px",
+    "1": "4px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "2": "8px",
+    "20": "80px",
+    "24": "96px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px"
+  }
+};
+var defaultTheme = {
+  light: theme,
+  dark: themeDark
+};
+var ThemeContext = React.createContext(defaultTheme);
+ThemeContext.displayName = "ThemeContext";
+var ColorSchemeOverrideContext = React.createContext(null);
+ColorSchemeOverrideContext.displayName = "ColorSchemeOverrideContext";
+var isWeb = reactNative.Platform.OS === "web";
+function readWebScheme() {
+  if (typeof document === "undefined") {
+    return "light";
+  }
+  const root = document.documentElement;
+  if (root.classList.contains("dark")) {
+    return "dark";
+  }
+  if (root.getAttribute("data-theme") === "dark") {
+    return "dark";
+  }
+  return "light";
+}
+__name(readWebScheme, "readWebScheme");
+function useColorScheme() {
+  const override = React.useContext(ColorSchemeOverrideContext);
+  const [scheme, setScheme] = React.useState(() => {
+    if (isWeb) {
+      return readWebScheme();
+    }
+    return reactNative.Appearance.getColorScheme() ?? "light";
+  });
+  React.useEffect(() => {
+    if (isWeb) {
+      const root = document.documentElement;
+      const update = /* @__PURE__ */ __name(() => setScheme(readWebScheme()), "update");
+      const observer = new MutationObserver(update);
+      observer.observe(root, { attributes: true, attributeFilter: ["class", "data-theme"] });
+      update();
+      return () => observer.disconnect();
+    }
+    const sub = reactNative.Appearance.addChangeListener(({ colorScheme }) => {
+      setScheme(colorScheme ?? "light");
+    });
+    return () => sub.remove();
+  }, []);
+  return override ?? scheme;
+}
+__name(useColorScheme, "useColorScheme");
+
+// src/theme/use-theme-colors.ts
+function useThemeColors() {
+  const scheme = useColorScheme();
+  const themePair = React.useContext(ThemeContext);
+  return scheme === "dark" ? themePair.dark : themePair.light;
+}
+__name(useThemeColors, "useThemeColors");
+var isWeb2 = reactNative.Platform.OS === "web";
+var make = /* @__PURE__ */ __name(({ path, glyph }) => /* @__PURE__ */ __name(function PlaceholderIcon({ size = 20, color = "currentColor" }) {
+  const colors = useThemeColors();
+  if (isWeb2) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: path })
+      }
+    );
+  }
+  const resolvedColor = color === "currentColor" ? colors.semantic.text.default : color;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: { fontSize: size, lineHeight: size, color: resolvedColor },
+      children: glyph
+    }
+  );
+}, "PlaceholderIcon"), "make");
+var defaultSemanticIcons = {
+  checkmark: make({ path: "M20 6 9 17l-5-5", glyph: "\u2713" }),
+  close: make({ path: "M18 6 6 18 M6 6l12 12", glyph: "\u2715" }),
+  eye: make({
+    path: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z",
+    glyph: "\u{1F441}"
+  }),
+  eyeOff: make({
+    path: "M17.94 17.94A10 10 0 0 1 2 12s3.5-7 10-7c2 0 3.8.6 5.4 1.5 M1 1l22 22",
+    glyph: "\u{1F648}"
+  }),
+  chevronDown: make({ path: "m6 9 6 6 6-6", glyph: "\u2304" }),
+  chevronUp: make({ path: "m18 15-6-6-6 6", glyph: "\u2303" }),
+  alertTriangle: make({
+    path: "M12 9v4 M12 17h.01 M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z",
+    glyph: "\u26A0"
+  }),
+  info: make({
+    path: "M12 8h.01 M11 12h1v4h1 M12 22C6.48 22 2 17.52 2 12 2 6.48 6.48 2 12 2c5.52 0 10 4.48 10 10 0 5.52-4.48 10-10 10z",
+    glyph: "\u24D8"
+  }),
+  check: make({ path: "M20 6 9 17l-5-5", glyph: "\u2713" }),
+  x: make({ path: "M18 6 6 18 M6 6l12 12", glyph: "\u2715" })
+};
+
+// src/theme/px.ts
+function px(value) {
+  if (typeof value === "number") {
+    return value;
+  }
+  const n = Number.parseFloat(value);
+  return Number.isFinite(n) ? n : 0;
+}
+__name(px, "px");
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  const out = [];
+  for (const input of inputs) {
+    append(out, input);
+  }
+  return out.join(" ");
+}
+__name(cn, "cn");
+function append(out, input) {
+  if (!input) {
+    return;
+  }
+  if (typeof input === "string") {
+    if (input.length > 0) {
+      out.push(input);
+    }
+    return;
+  }
+  if (typeof input === "number") {
+    return;
+  }
+  if (Array.isArray(input)) {
+    for (const inner of input) {
+      append(out, inner);
+    }
+    return;
+  }
+  if (typeof input === "object") {
+    for (const key of Object.keys(input)) {
+      if (input[key]) {
+        out.push(key);
+      }
+    }
+  }
+}
+__name(append, "append");
+var BASE_CONTAINER_LAYOUT = {
+  alignSelf: "flex-start",
+  flexDirection: "row",
+  alignItems: "center",
+  paddingVertical: 2,
+  // component-density literal — not from theme (no 2px spacing token)
+  borderWidth: 1,
+  borderColor: "transparent"
+};
+var Badge = /* @__PURE__ */ __name(({ tone = "neutral", appearance = "soft", children, className, testID }) => {
+  const colors = useThemeColors();
+  const isDark = useColorScheme() === "dark";
+  const invertedText = colors.semantic.text.inverted;
+  let palette;
+  if (tone === "neutral") {
+    palette = {
+      soft: isDark ? { bg: colors.color.neutral["800"], fg: colors.color.neutral["100"] } : { bg: colors.color.neutral["100"], fg: colors.color.neutral["700"] },
+      solid: {
+        bg: isDark ? colors.color.neutral["200"] : colors.color.neutral["700"],
+        fg: isDark ? colors.color.neutral["900"] : invertedText
+      },
+      outline: {
+        border: isDark ? colors.color.neutral["600"] : colors.color.neutral["300"],
+        fg: isDark ? colors.color.neutral["100"] : colors.color.neutral["700"]
+      }
+    };
+  } else if (tone === "primary") {
+    palette = {
+      soft: isDark ? { bg: colors.color.primary["900"], fg: colors.color.primary["200"] } : { bg: colors.color.primary["100"], fg: colors.color.primary["800"] },
+      solid: {
+        bg: isDark ? colors.color.primary["400"] : colors.color.primary["600"],
+        fg: isDark ? colors.color.primary["900"] : invertedText
+      },
+      outline: {
+        border: isDark ? colors.color.primary["400"] : colors.color.primary["300"],
+        fg: isDark ? colors.color.primary["200"] : colors.color.primary["700"]
+      }
+    };
+  } else if (tone === "success") {
+    palette = {
+      soft: isDark ? { bg: "#14532d", fg: "#bbf7d0" } : { bg: "#dcfce7", fg: "#166534" },
+      solid: { bg: colors.color.success, fg: invertedText },
+      outline: { border: colors.color.success, fg: isDark ? "#bbf7d0" : "#166534" }
+    };
+  } else if (tone === "warning") {
+    palette = {
+      soft: isDark ? { bg: "#78350f", fg: "#fde68a" } : { bg: "#fef3c7", fg: "#92400e" },
+      solid: { bg: colors.color.warning, fg: invertedText },
+      outline: { border: colors.color.warning, fg: isDark ? "#fde68a" : "#92400e" }
+    };
+  } else {
+    palette = {
+      soft: isDark ? { bg: "#7f1d1d", fg: "#fecaca" } : { bg: "#fee2e2", fg: "#991b1b" },
+      solid: { bg: colors.color.danger, fg: invertedText },
+      outline: { border: colors.color.danger, fg: isDark ? "#fecaca" : "#991b1b" }
+    };
+  }
+  const baseContainer = {
+    ...BASE_CONTAINER_LAYOUT,
+    gap: px(colors.spacing["1"]),
+    paddingHorizontal: px(colors.spacing["2"]),
+    borderRadius: px(colors.radius.full)
+  };
+  const containerStyle = (() => {
+    if (appearance === "solid") {
+      return { ...baseContainer, backgroundColor: palette.solid.bg };
+    }
+    if (appearance === "outline") {
+      return { ...baseContainer, backgroundColor: "transparent", borderColor: palette.outline.border };
+    }
+    return { ...baseContainer, backgroundColor: palette.soft.bg };
+  })();
+  const textColor = (() => {
+    if (appearance === "solid") {
+      return palette.solid.fg;
+    }
+    if (appearance === "outline") {
+      return palette.outline.fg;
+    }
+    return palette.soft.fg;
+  })();
+  const baseText = {
+    fontFamily: colors.fontFamily.body,
+    fontSize: px(colors.fontSize.xs),
+    fontWeight: colors.fontWeight.medium,
+    lineHeight: px(colors.fontSize.xs) * Number(colors.lineHeight.normal)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("inline-flex flex-row items-center gap-1 rounded-full px-2 py-0.5 border", className),
+      style: containerStyle,
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { ...baseText, color: textColor }, children })
+    }
+  );
+}, "Badge");
+var FloatButtonGroupContext = React.createContext(null);
+var SIZE_MAP = {
+  small: { diameter: 40, iconSize: 18, fontSize: 14, padX: 16 },
+  medium: { diameter: 56, iconSize: 22, fontSize: 14, padX: 20 },
+  large: { diameter: 72, iconSize: 28, fontSize: 16, padX: 28 }
+};
+var DEFAULT_OFFSET_WEB = 24;
+var DEFAULT_OFFSET_NATIVE = 16;
+var FloatButtonRoot = /* @__PURE__ */ __name((props) => {
+  const groupCtx = React.useContext(FloatButtonGroupContext);
+  const colors = useThemeColors();
+  const insets = React.useContext(SafeAreaInsetsContext) ?? { top: 0, bottom: 0};
+  const { width: viewportWidth } = reactNative.useWindowDimensions();
+  const {
+    icon,
+    label,
+    accessibilityLabel,
+    shape: shapeProp,
+    size = groupCtx ? "small" : "medium",
+    variant = "primary",
+    tooltip,
+    badge,
+    disabled = false,
+    loading = false,
+    visible = true,
+    placement = "bottom-right",
+    positioning = "fixed",
+    offset,
+    respectSafeArea = false,
+    href,
+    dir = "ltr",
+    onLongPress,
+    className,
+    testID,
+    children,
+    onPress,
+    onClick,
+    "aria-haspopup": ariaHasPopup,
+    "aria-expanded": ariaExpanded
+  } = props;
+  if (process.env.NODE_ENV !== "production" && onPress && onClick) {
+    console.warn("<FloatButton>: both `onPress` and `onClick` defined \u2014 `onPress` will be used. Pick one.");
+  }
+  const onPressFn = onPress ?? onClick;
+  const shape = shapeProp ?? (label && icon ? "extended" : "circle");
+  const sizeTokens = SIZE_MAP[size];
+  const [tooltipVisible, setTooltipVisible] = React.useState(false);
+  const longPressFiredRef = React.useRef(false);
+  const handlePress = React.useCallback(
+    (event) => {
+      if (disabled || loading) {
+        return;
+      }
+      if (longPressFiredRef.current) {
+        longPressFiredRef.current = false;
+        return;
+      }
+      if (groupCtx) {
+        groupCtx.close();
+      }
+      onPressFn?.(event);
+    },
+    [disabled, loading, groupCtx, onPressFn]
+  );
+  const handleLongPress = React.useCallback(
+    (event) => {
+      if (disabled || loading) {
+        return;
+      }
+      longPressFiredRef.current = true;
+      onLongPress?.(event);
+    },
+    [disabled, loading, onLongPress]
+  );
+  const variantStyle = React.useMemo(() => resolveVariantStyle(variant, colors), [variant, colors]);
+  const positionStyle = groupCtx ? null : resolvePositionStyle({
+    placement,
+    positioning,
+    offset: offset ?? {},
+    dir,
+    insets,
+    viewportWidth,
+    respectSafeArea
+  });
+  const containerOpacity = visible ? disabled ? 0.4 : 1 : 0;
+  const isExtended = shape === "extended" && Boolean(label);
+  const containerDimensions = isExtended ? {
+    minWidth: sizeTokens.diameter,
+    height: sizeTokens.diameter,
+    paddingHorizontal: sizeTokens.padX,
+    borderRadius: sizeTokens.diameter / 2
+  } : {
+    width: sizeTokens.diameter,
+    height: sizeTokens.diameter,
+    borderRadius: shape === "square" ? px(colors.radius.lg) : sizeTokens.diameter / 2
+  };
+  const a11yLabel = accessibilityLabel ?? label ?? tooltip;
+  if (process.env.NODE_ENV !== "production" && !a11yLabel && icon) {
+    console.warn("<FloatButton>: provide `accessibilityLabel` or `label` for icon-only buttons (WCAG 2.2).");
+  }
+  const shadowStyle = React.useMemo(() => resolveShadowStyle(variant, colors), [variant, colors]);
+  const contentNode = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    loading ? /* @__PURE__ */ jsxRuntime.jsx(SmallSpinner, { color: variantStyle.fg, size: sizeTokens.iconSize }) : /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: {
+          width: sizeTokens.iconSize,
+          height: sizeTokens.iconSize,
+          alignItems: "center",
+          justifyContent: "center",
+          // Sets CSS `color` on the wrapper div under RN-Web
+          // so any nested SVG using `stroke="currentColor"`
+          // or `fill="currentColor"` inherits the variant fg.
+          // RN ignores `color` on a View (it's only valid on
+          // Text) — silently dropped on native.
+          color: variantStyle.fg
+        },
+        children: tintIcon(icon, variantStyle.fg)
+      }
+    ),
+    isExtended ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Text,
+      {
+        style: {
+          marginLeft: px(colors.spacing["2"]),
+          color: variantStyle.fg,
+          fontFamily: colors.fontFamily.body,
+          fontSize: sizeTokens.fontSize,
+          fontWeight: colors.fontWeight.medium,
+          letterSpacing: -0.1,
+          fontVariant: ["tabular-nums"]
+        },
+        numberOfLines: 1,
+        children: label
+      }
+    ) : null
+  ] });
+  const wrapperStyle = {
+    ...positionStyle ?? {},
+    opacity: containerOpacity,
+    // Web-only transitions for visibility/scale (silently dropped on native).
+    ...reactNative.Platform.OS === "web" ? {
+      transitionProperty: "opacity, transform",
+      transitionDuration: "180ms",
+      transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+      pointerEvents: visible ? "auto" : "none"
+    } : null
+  };
+  const buttonNode = /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      role: "button",
+      accessibilityRole: "button",
+      accessibilityLabel: a11yLabel,
+      "aria-label": a11yLabel,
+      disabled: disabled || loading,
+      "aria-disabled": disabled || void 0,
+      "aria-busy": loading || void 0,
+      ...ariaHasPopup !== void 0 ? { "aria-haspopup": ariaHasPopup } : {},
+      ...ariaExpanded !== void 0 ? { "aria-expanded": ariaExpanded } : {},
+      onPress: handlePress,
+      onLongPress: onLongPress ? handleLongPress : void 0,
+      onHoverIn: () => setTooltipVisible(true),
+      onHoverOut: () => setTooltipVisible(false),
+      onFocus: () => setTooltipVisible(true),
+      onBlur: () => setTooltipVisible(false),
+      style: reactNative.Platform.OS === "web" ? (state) => {
+        const { pressed, hovered } = state;
+        return {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: pressed ? variantStyle.bgPressed : hovered ? variantStyle.bgHover : variantStyle.bg,
+          ...variantStyle.borderColor ? { borderWidth: 1, borderColor: variantStyle.borderColor } : null,
+          ...containerDimensions,
+          ...shadowStyle.resting,
+          ...pressed ? { transform: [{ scale: 0.96 }], ...shadowStyle.pressed } : null,
+          ...hovered && !pressed ? { transform: [{ translateY: -1 }], ...shadowStyle.hover } : null,
+          ...{
+            transitionProperty: "background-color, box-shadow, transform",
+            transitionDuration: "150ms",
+            transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+            cursor: disabled || loading ? "not-allowed" : "pointer",
+            outlineWidth: 0
+          }
+        };
+      } : {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: variantStyle.bg,
+        ...variantStyle.borderColor ? { borderWidth: 1, borderColor: variantStyle.borderColor } : null,
+        ...containerDimensions,
+        ...shadowStyle.resting
+      },
+      children: contentNode
+    }
+  );
+  const linkedButton = href && reactNative.Platform.OS === "web" ? /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href,
+      "aria-label": a11yLabel,
+      style: { textDecoration: "none", color: "inherit", display: "inline-flex" },
+      onClick: (e) => {
+        if (onPressFn) {
+          onPressFn({
+            preventDefault: /* @__PURE__ */ __name(() => e.preventDefault(), "preventDefault")
+          });
+        }
+      },
+      children: buttonNode
+    }
+  ) : buttonNode;
+  const showTooltip = tooltip && (reactNative.Platform.OS === "web" ? tooltipVisible : groupCtx?.open ?? false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn(className), style: wrapperStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flexDirection: "row", alignItems: "center", gap: px(colors.spacing["2"]) }, children: [
+      showTooltip ? /* @__PURE__ */ jsxRuntime.jsx(TooltipChip, { text: tooltip }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { position: "relative" }, children: [
+        linkedButton,
+        badge ? /* @__PURE__ */ jsxRuntime.jsx(BadgeOverlay, { badge, size }) : null
+      ] })
+    ] }),
+    children
+  ] });
+}, "FloatButtonRoot");
+var FloatButtonGroup = /* @__PURE__ */ __name(({
+  trigger = "click",
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  direction = "up",
+  backdrop = false,
+  expandIcon,
+  collapseIcon,
+  actions,
+  children,
+  ...buttonProps
+}) => {
+  const isControlled = openProp !== void 0;
+  const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
+  const open = isControlled ? openProp : innerOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInnerOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const close = React.useCallback(() => setOpen(false), [setOpen]);
+  const toggle = React.useCallback(() => setOpen(!open), [setOpen, open]);
+  const actionItems = actions ? actions.map((action, idx) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(FloatButton, { ...action }, `fab-action-${idx}`);
+  }) : children;
+  const groupCtxValue = React.useMemo(
+    () => ({
+      open,
+      close,
+      direction,
+      insideGroup: true,
+      indexRef: { next: 0 }
+    }),
+    [open, close, direction]
+  );
+  const triggerIcon = open ? collapseIcon ?? /* @__PURE__ */ jsxRuntime.jsx(RotatedIcon, { node: expandIcon ?? buttonProps.icon }) : expandIcon ?? buttonProps.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(FloatButtonGroupContext.Provider, { value: groupCtxValue, children: [
+    backdrop && open ? /* @__PURE__ */ jsxRuntime.jsx(Backdrop, { onPress: close, positioning: buttonProps.positioning ?? "fixed" }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      GroupLayout,
+      {
+        direction,
+        placement: buttonProps.placement ?? "bottom-right",
+        positioning: buttonProps.positioning ?? "fixed",
+        offset: buttonProps.offset ?? {},
+        dir: buttonProps.dir ?? "ltr",
+        children: [
+          open ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: groupActionsLayoutStyle(direction), children: actionItems }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FloatButton,
+            {
+              ...buttonProps,
+              icon: triggerIcon,
+              ...trigger === "click" ? { onPress: toggle } : {},
+              ...trigger === "longPress" ? { onLongPress: toggle } : {},
+              "aria-haspopup": "menu",
+              "aria-expanded": open
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}, "FloatButtonGroup");
+var FloatButtonBackToTop = /* @__PURE__ */ __name(({
+  scrollRef,
+  visibilityThreshold = 400,
+  variant = "surface",
+  ...rest
+}) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = React.useState(false);
+  React.useEffect(() => {
+    if (reactNative.Platform.OS !== "web" || typeof window === "undefined") {
+      return;
+    }
+    const onScroll = /* @__PURE__ */ __name(() => setVisible(window.scrollY > visibilityThreshold), "onScroll");
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [visibilityThreshold]);
+  const onPress = React.useCallback(() => {
+    if (reactNative.Platform.OS === "web" && typeof window !== "undefined") {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+      return;
+    }
+    scrollRef?.current?.scrollTo?.({ y: 0, animated: true });
+  }, [scrollRef]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FloatButton,
+    {
+      ...rest,
+      variant,
+      visible,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(defaultSemanticIcons.chevronUp, { size: 20 }),
+      accessibilityLabel: rest.accessibilityLabel ?? t("floatButton.backToTop", { defaultValue: "Back to top" }),
+      onPress
+    }
+  );
+}, "FloatButtonBackToTop");
+var FloatButton = Object.assign(FloatButtonRoot, {
+  Group: FloatButtonGroup,
+  BackToTop: FloatButtonBackToTop
+});
+var TooltipChip = /* @__PURE__ */ __name(({ text }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: {
+        backgroundColor: colors.semantic.background.elevated,
+        borderRadius: px(colors.radius.sm) + 2,
+        borderWidth: 1,
+        borderColor: colors.semantic.border.default,
+        paddingHorizontal: px(colors.spacing["2"]),
+        paddingVertical: 4,
+        ...reactNative.Platform.OS === "web" ? { boxShadow: "0 1px 2px rgba(0,0,0,0.06)" } : null
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            color: colors.semantic.text.default,
+            fontFamily: colors.fontFamily.body,
+            fontSize: 13,
+            lineHeight: 16
+          },
+          children: text
+        }
+      )
+    }
+  );
+}, "TooltipChip");
+var BadgeOverlay = /* @__PURE__ */ __name(({ badge, size }) => {
+  const offsetTop = size === "large" ? -6 : -4;
+  const offsetRight = size === "large" ? -6 : -4;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      pointerEvents: "none",
+      style: {
+        position: "absolute",
+        top: offsetTop,
+        right: offsetRight,
+        zIndex: 1
+      },
+      children: badge.dot ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: badge.tone ?? "danger", appearance: "solid", children: " " }) : /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: badge.tone ?? "danger", appearance: "solid", children: String(badge.count ?? 0) })
+    }
+  );
+}, "BadgeOverlay");
+var SmallSpinner = /* @__PURE__ */ __name(({ color, size }) => {
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: 2,
+          borderColor: "transparent",
+          borderTopColor: color,
+          animationName: "fb-spin",
+          animationDuration: "700ms",
+          animationIterationCount: "infinite",
+          animationTimingFunction: "linear"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      style: {
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        borderWidth: 2,
+        borderColor: color,
+        opacity: 0.6
+      }
+    }
+  );
+}, "SmallSpinner");
+var Backdrop = /* @__PURE__ */ __name(({ onPress, positioning }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      onPress,
+      accessibilityLabel: "Close",
+      style: {
+        position: reactNative.Platform.OS === "web" && positioning === "fixed" ? "fixed" : "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.32)",
+        zIndex: 49
+      }
+    }
+  );
+}, "Backdrop");
+var RotatedIcon = /* @__PURE__ */ __name(({ node, color }) => {
+  const tintedNode = color && React.isValidElement(node) ? React.cloneElement(node, { color }) : node;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      style: {
+        transform: [{ rotate: "45deg" }],
+        // CSS `color` cascades to nested `currentColor` SVGs on web.
+        ...color ? { color } : null,
+        ...reactNative.Platform.OS === "web" ? {
+          transitionProperty: "transform",
+          transitionDuration: "200ms",
+          transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)"
+        } : null
+      },
+      children: tintedNode
+    }
+  );
+}, "RotatedIcon");
+var GroupLayout = /* @__PURE__ */ __name(({
+  direction,
+  placement,
+  positioning,
+  offset,
+  dir,
+  children
+}) => {
+  const insets = React.useContext(SafeAreaInsetsContext) ?? { top: 0, bottom: 0};
+  const { width: viewportWidth } = reactNative.useWindowDimensions();
+  const positionStyle = resolvePositionStyle({
+    placement,
+    positioning,
+    offset,
+    dir,
+    insets,
+    viewportWidth,
+    respectSafeArea: false
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      style: {
+        ...positionStyle,
+        flexDirection: direction === "left" || direction === "right" ? "row" : "column",
+        alignItems: direction === "left" || direction === "right" ? "center" : "flex-end",
+        justifyContent: direction === "up" ? "flex-end" : "flex-start"
+      },
+      children: direction === "up" || direction === "left" ? children : Array.isArray(children) ? [...children].reverse() : children
+    }
+  );
+}, "GroupLayout");
+function groupActionsLayoutStyle(direction) {
+  const isVertical = direction === "up" || direction === "down";
+  return {
+    flexDirection: isVertical ? "column" : "row",
+    alignItems: "flex-end",
+    gap: 12,
+    marginBottom: direction === "up" ? 12 : 0,
+    marginTop: direction === "down" ? 12 : 0,
+    marginRight: direction === "left" ? 12 : 0,
+    marginLeft: direction === "right" ? 12 : 0
+  };
+}
+__name(groupActionsLayoutStyle, "groupActionsLayoutStyle");
+function resolveVariantStyle(variant, colors) {
+  switch (variant) {
+    case "primary":
+      return {
+        bg: colors.semantic.interactive.primary,
+        bgHover: colors.semantic.interactive.primaryHover,
+        bgPressed: colors.semantic.interactive.primaryPressed,
+        fg: colors.semantic.text.inverted
+      };
+    case "secondary":
+      return {
+        bg: colors.semantic.background.subtle,
+        bgHover: colors.semantic.background.elevated,
+        bgPressed: colors.semantic.background.subtle,
+        fg: colors.semantic.text.default,
+        borderColor: colors.semantic.border.default
+      };
+    case "tertiary":
+      return {
+        bg: "transparent",
+        bgHover: withAlpha(colors.semantic.interactive.primary, 0.08),
+        bgPressed: withAlpha(colors.semantic.interactive.primary, 0.12),
+        fg: colors.semantic.interactive.primary,
+        borderColor: colors.semantic.interactive.primary
+      };
+    case "surface":
+      return {
+        bg: colors.semantic.background.elevated,
+        bgHover: colors.semantic.background.subtle,
+        bgPressed: colors.semantic.background.subtle,
+        fg: colors.semantic.text.default,
+        borderColor: colors.semantic.border.default
+      };
+  }
+}
+__name(resolveVariantStyle, "resolveVariantStyle");
+function resolveShadowStyle(variant, colors) {
+  if (reactNative.Platform.OS !== "web") {
+    return {
+      resting: {
+        shadowColor: variant === "primary" ? colors.semantic.interactive.primary : "#000",
+        shadowOffset: { width: 0, height: 6 },
+        shadowOpacity: variant === "primary" ? 0.25 : 0.12,
+        shadowRadius: 16,
+        elevation: 6
+      },
+      hover: {},
+      pressed: {
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 6,
+        elevation: 2
+      }
+    };
+  }
+  const tint = variant === "primary" ? colors.semantic.interactive.primary : "#000";
+  return {
+    resting: {
+      ...{
+        boxShadow: `0 1px 2px rgba(0,0,0,0.06), 0 8px 24px -6px ${withAlpha(tint, variant === "primary" ? 0.32 : 0.08)}`
+      }
+    },
+    hover: {
+      ...{
+        boxShadow: `0 2px 4px rgba(0,0,0,0.08), 0 12px 28px -6px ${withAlpha(tint, variant === "primary" ? 0.4 : 0.12)}`
+      }
+    },
+    pressed: {
+      ...{ boxShadow: `0 1px 2px rgba(0,0,0,0.06)` }
+    }
+  };
+}
+__name(resolveShadowStyle, "resolveShadowStyle");
+function resolvePositionStyle({
+  placement,
+  positioning = "fixed",
+  offset,
+  dir,
+  insets,
+  viewportWidth,
+  respectSafeArea
+}) {
+  const defaultOffset = reactNative.Platform.OS === "web" ? DEFAULT_OFFSET_WEB : DEFAULT_OFFSET_NATIVE;
+  const x = offset.x ?? defaultOffset;
+  const y = offset.y ?? defaultOffset;
+  const safeBottom = reactNative.Platform.OS !== "web" && respectSafeArea ? insets.bottom : 0;
+  const safeTop = reactNative.Platform.OS !== "web" && respectSafeArea ? insets.top : 0;
+  const flippedPlacement = dir === "rtl" ? placement === "bottom-right" ? "bottom-left" : placement === "bottom-left" ? "bottom-right" : placement === "top-right" ? "top-left" : "top-right" : placement;
+  const cssPosition = reactNative.Platform.OS === "web" && positioning === "fixed" ? "fixed" : "absolute";
+  const base = {
+    position: cssPosition,
+    zIndex: 50
+  };
+  switch (flippedPlacement) {
+    case "bottom-right":
+      return { ...base, bottom: y + safeBottom, right: x };
+    case "bottom-left":
+      return { ...base, bottom: y + safeBottom, left: x };
+    case "top-right":
+      return { ...base, top: y + safeTop, right: x };
+    case "top-left":
+      return { ...base, top: y + safeTop, left: x };
+  }
+  return base;
+}
+__name(resolvePositionStyle, "resolvePositionStyle");
+function tintIcon(icon, color) {
+  if (!React.isValidElement(icon)) {
+    return icon;
+  }
+  return React.cloneElement(icon, { color });
+}
+__name(tintIcon, "tintIcon");
+function withAlpha(color, alpha) {
+  if (color.startsWith("#") && (color.length === 7 || color.length === 4)) {
+    const expanded = color.length === 4 ? `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}` : color;
+    const r = Number.parseInt(expanded.slice(1, 3), 16);
+    const g = Number.parseInt(expanded.slice(3, 5), 16);
+    const b = Number.parseInt(expanded.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+  return color;
+}
+__name(withAlpha, "withAlpha");
+
+exports.FloatButton = FloatButton;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map