@nori-ui/core 0.0.5 → 1.0.2

package/dist/chunk-EWWQQ5DB.js

@@ -0,0 +1,654 @@
+import { useTranslation } from './chunk-RFW5SRZA.js';
+import { defaultSemanticIcons } from './chunk-7Z4NMNX6.js';
+import { Badge } from './chunk-3BDDPFCI.js';
+import { px } from './chunk-5A2QOOVN.js';
+import { cn } from './chunk-CHXHRJNZ.js';
+import { useThemeColors } from './chunk-R5JMDDCB.js';
+import { __name } from './chunk-WCQVDF3K.js';
+import * as React from 'react';
+import { createContext, useContext, useState, useRef, useCallback, useMemo, useEffect, isValidElement, cloneElement } from 'react';
+import { StyleSheet, useWindowDimensions, View, Text, Platform, Pressable } from 'react-native';
+import { jsxs, Fragment, jsx } from 'nativewind/jsx-runtime';
+
+var isDev = process.env.NODE_ENV !== "production";
+var SafeAreaInsetsContext = /* @__PURE__ */ React.createContext(null);
+if (isDev) {
+  SafeAreaInsetsContext.displayName = "SafeAreaInsetsContext";
+}
+var SafeAreaFrameContext = /* @__PURE__ */ React.createContext(null);
+if (isDev) {
+  SafeAreaFrameContext.displayName = "SafeAreaFrameContext";
+}
+StyleSheet.create({
+  fill: {
+    flex: 1
+  }
+});
+SafeAreaInsetsContext.Consumer;
+var FloatButtonGroupContext = 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 = useContext(FloatButtonGroupContext);
+  const colors = useThemeColors();
+  const insets = useContext(SafeAreaInsetsContext) ?? { top: 0, bottom: 0};
+  const { width: viewportWidth } = 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] = useState(false);
+  const longPressFiredRef = useRef(false);
+  const handlePress = 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 = useCallback(
+    (event) => {
+      if (disabled || loading) {
+        return;
+      }
+      longPressFiredRef.current = true;
+      onLongPress?.(event);
+    },
+    [disabled, loading, onLongPress]
+  );
+  const variantStyle = 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 = useMemo(() => resolveShadowStyle(variant, colors), [variant, colors]);
+  const contentNode = /* @__PURE__ */ jsxs(Fragment, { children: [
+    loading ? /* @__PURE__ */ jsx(SmallSpinner, { color: variantStyle.fg, size: sizeTokens.iconSize }) : /* @__PURE__ */ jsx(
+      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__ */ jsx(
+      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).
+    ...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__ */ jsx(
+    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: 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 && Platform.OS === "web" ? /* @__PURE__ */ 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 && (Platform.OS === "web" ? tooltipVisible : groupCtx?.open ?? false);
+  return /* @__PURE__ */ jsxs(View, { className: cn(className), style: wrapperStyle, children: [
+    /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: px(colors.spacing["2"]) }, children: [
+      showTooltip ? /* @__PURE__ */ jsx(TooltipChip, { text: tooltip }) : null,
+      /* @__PURE__ */ jsxs(View, { style: { position: "relative" }, children: [
+        linkedButton,
+        badge ? /* @__PURE__ */ 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] = useState(defaultOpen);
+  const open = isControlled ? openProp : innerOpen;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInnerOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const close = useCallback(() => setOpen(false), [setOpen]);
+  const toggle = useCallback(() => setOpen(!open), [setOpen, open]);
+  const actionItems = actions ? actions.map((action, idx) => {
+    return /* @__PURE__ */ jsx(FloatButton, { ...action }, `fab-action-${idx}`);
+  }) : children;
+  const groupCtxValue = useMemo(
+    () => ({
+      open,
+      close,
+      direction,
+      insideGroup: true,
+      indexRef: { next: 0 }
+    }),
+    [open, close, direction]
+  );
+  const triggerIcon = open ? collapseIcon ?? /* @__PURE__ */ jsx(RotatedIcon, { node: expandIcon ?? buttonProps.icon }) : expandIcon ?? buttonProps.icon;
+  return /* @__PURE__ */ jsxs(FloatButtonGroupContext.Provider, { value: groupCtxValue, children: [
+    backdrop && open ? /* @__PURE__ */ jsx(Backdrop, { onPress: close, positioning: buttonProps.positioning ?? "fixed" }) : null,
+    /* @__PURE__ */ jsxs(
+      GroupLayout,
+      {
+        direction,
+        placement: buttonProps.placement ?? "bottom-right",
+        positioning: buttonProps.positioning ?? "fixed",
+        offset: buttonProps.offset ?? {},
+        dir: buttonProps.dir ?? "ltr",
+        children: [
+          open ? /* @__PURE__ */ jsx(View, { style: groupActionsLayoutStyle(direction), children: actionItems }) : null,
+          /* @__PURE__ */ 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] = useState(false);
+  useEffect(() => {
+    if (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 = useCallback(() => {
+    if (Platform.OS === "web" && typeof window !== "undefined") {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+      return;
+    }
+    scrollRef?.current?.scrollTo?.({ y: 0, animated: true });
+  }, [scrollRef]);
+  return /* @__PURE__ */ jsx(
+    FloatButton,
+    {
+      ...rest,
+      variant,
+      visible,
+      icon: /* @__PURE__ */ 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__ */ jsx(
+    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,
+        ...Platform.OS === "web" ? { boxShadow: "0 1px 2px rgba(0,0,0,0.06)" } : null
+      },
+      children: /* @__PURE__ */ jsx(
+        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__ */ jsx(
+    View,
+    {
+      pointerEvents: "none",
+      style: {
+        position: "absolute",
+        top: offsetTop,
+        right: offsetRight,
+        zIndex: 1
+      },
+      children: badge.dot ? /* @__PURE__ */ jsx(Badge, { tone: badge.tone ?? "danger", appearance: "solid", children: " " }) : /* @__PURE__ */ jsx(Badge, { tone: badge.tone ?? "danger", appearance: "solid", children: String(badge.count ?? 0) })
+    }
+  );
+}, "BadgeOverlay");
+var SmallSpinner = /* @__PURE__ */ __name(({ color, size }) => {
+  if (Platform.OS === "web") {
+    return /* @__PURE__ */ jsx(
+      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__ */ jsx(
+    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__ */ jsx(
+    Pressable,
+    {
+      onPress,
+      accessibilityLabel: "Close",
+      style: {
+        position: 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 && isValidElement(node) ? cloneElement(node, { color }) : node;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: {
+        transform: [{ rotate: "45deg" }],
+        // CSS `color` cascades to nested `currentColor` SVGs on web.
+        ...color ? { color } : null,
+        ...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 = useContext(SafeAreaInsetsContext) ?? { top: 0, bottom: 0};
+  const { width: viewportWidth } = useWindowDimensions();
+  const positionStyle = resolvePositionStyle({
+    placement,
+    positioning,
+    offset,
+    dir,
+    insets,
+    viewportWidth,
+    respectSafeArea: false
+  });
+  return /* @__PURE__ */ jsx(
+    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 (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 = Platform.OS === "web" ? DEFAULT_OFFSET_WEB : DEFAULT_OFFSET_NATIVE;
+  const x = offset.x ?? defaultOffset;
+  const y = offset.y ?? defaultOffset;
+  const safeBottom = Platform.OS !== "web" && respectSafeArea ? insets.bottom : 0;
+  const safeTop = 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 = 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 (!isValidElement(icon)) {
+    return icon;
+  }
+  return 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");
+
+export { FloatButton };
+//# sourceMappingURL=chunk-EWWQQ5DB.js.map
+//# sourceMappingURL=chunk-EWWQQ5DB.js.map