@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-DYBH2I6W.js

@@ -0,0 +1 @@
+

package/dist/chunk-DZ255O2F.js

@@ -0,0 +1 @@
+

package/dist/chunk-E35BPSGW.js

@@ -0,0 +1 @@
+

package/dist/chunk-EJBDRVIH.js

@@ -0,0 +1,166 @@
+import { ContextMenuOverlay } from './chunk-PZXZJBMP.js';
+import { expandedProps } from './chunk-RQ3HASCC.js';
+import { Button } from './chunk-3ARE4TES.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, View, Pressable } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function useChevronColors(variant, disabled) {
+  const theme = useLoamTheme();
+  if (disabled) return { bg: theme.color.surface3, fg: theme.color.text3 };
+  switch (variant) {
+    case "primary":
+      return { bg: theme.color.accent, fg: theme.color.accentInk };
+    case "tonal":
+      return { bg: theme.color.accentSoft, fg: theme.color.accentOnSoft };
+    case "outline":
+      return { bg: "transparent", fg: theme.color.text, border: theme.color.borderStrong };
+  }
+}
+function SplitButton({
+  children,
+  onPress,
+  items,
+  variant = "primary",
+  size = "md",
+  leadingIcon,
+  disabled = false,
+  loading = false,
+  menuLabel = "More actions",
+  motion = "full"
+}) {
+  const theme = useLoamTheme();
+  const isDisabled = disabled || loading;
+  const { styles } = useStyles(sheet, { size });
+  const colors = useChevronColors(variant, isDisabled);
+  const [open, setOpen] = React.useState(false);
+  const [anchor, setAnchor] = React.useState(null);
+  const anchorRef = React.useRef(null);
+  const slop = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
+  const pressEnabled = motion === "full";
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const spring = (to) => {
+    if (!pressEnabled) return;
+    Animated.spring(scale, {
+      toValue: to,
+      useNativeDriver: true,
+      speed: 40,
+      bounciness: 6
+    }).start();
+  };
+  const openMenu = () => {
+    if (isDisabled) return;
+    const node = anchorRef.current;
+    if (node && typeof node.measureInWindow === "function") {
+      node.measureInWindow((x, y, width, height) => setAnchor({ x, y, width, height }));
+    }
+    setOpen(true);
+  };
+  const menuItems = React.useMemo(
+    () => items.map((item, i) => ({
+      key: String(i),
+      label: item.label,
+      icon: item.icon,
+      destructive: item.danger,
+      onSelect: item.onSelect
+    })),
+    [items]
+  );
+  return /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+    /* @__PURE__ */ jsx(View, { style: styles.primary, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant,
+        size,
+        leadingIcon,
+        loading,
+        disabled,
+        onPress,
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsx(View, { style: styles.divider }),
+    /* @__PURE__ */ jsx(View, { ref: anchorRef, collapsable: false, children: /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: menuLabel,
+        accessibilityState: { disabled: isDisabled, expanded: open },
+        ...expandedProps(open),
+        disabled: isDisabled,
+        onPress: openMenu,
+        onPressIn: () => spring(0.97),
+        onPressOut: () => spring(1),
+        hitSlop: { top: slop, bottom: slop, left: slop, right: slop },
+        children: /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [
+              styles.chevron,
+              { backgroundColor: colors.bg },
+              colors.border ? { borderWidth: theme.borderWidth.thin, borderColor: colors.border } : null,
+              { transform: [{ scale }, { rotate: open ? "180deg" : "0deg" }] }
+            ],
+            children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.ctl.icon[size], color: colors.fg })
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      ContextMenuOverlay,
+      {
+        open,
+        onClose: () => setOpen(false),
+        items: menuItems,
+        anchor,
+        accessibilityLabel: menuLabel
+      }
+    )
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  row: {
+    flexDirection: "row",
+    alignSelf: "flex-start",
+    alignItems: "stretch"
+  },
+  // The primary segment butts flush against the seam; its leading corners keep
+  // the ramp radius (via Button).
+  primary: { alignSelf: "stretch" },
+  divider: {
+    alignSelf: "stretch",
+    width: theme.borderWidth.hair,
+    backgroundColor: theme.color.border
+  },
+  chevron: {
+    alignItems: "center",
+    justifyContent: "center",
+    // Only the trailing end rounds; the seam side stays square.
+    variants: {
+      size: {
+        sm: {
+          height: theme.ctl.sm,
+          width: theme.ctl.sm,
+          borderTopEndRadius: theme.ctl.r.sm,
+          borderBottomEndRadius: theme.ctl.r.sm
+        },
+        md: {
+          height: theme.ctl.md,
+          width: theme.ctl.md,
+          borderTopEndRadius: theme.ctl.r.md,
+          borderBottomEndRadius: theme.ctl.r.md
+        },
+        lg: {
+          height: theme.ctl.lg,
+          width: theme.ctl.lg,
+          borderTopEndRadius: theme.ctl.r.lg,
+          borderBottomEndRadius: theme.ctl.r.lg
+        }
+      }
+    }
+  }
+}));
+
+export { SplitButton };

package/dist/chunk-F43NP42L.js

@@ -0,0 +1 @@
+