@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-EJBDRVIH.js → chunk-VSSTWLC5.js}

@@ -1,15 +1,25 @@
-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 { ListRow } from './chunk-JA6TK7H2.js';
+import { ContextMenuOverlay } from './chunk-7CGJBQUA.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.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();
+var DEFAULT_LABELS = {
+  menu: "More actions"
+};
+var NO_ITEMS = [];
+function useChevronColors(variant, danger, disabled) {
+  const theme = useLoamTheme("split-button");
   if (disabled) return { bg: theme.color.surface3, fg: theme.color.text3 };
+  if (danger) {
+    return variant === "primary" ? { bg: theme.color.danger, fg: theme.color.dangerInk } : variant === "tonal" ? { bg: theme.color.dangerSoft, fg: theme.color.dangerOnSoft } : { bg: "transparent", fg: theme.color.danger, border: theme.color.danger };
+  }
   switch (variant) {
     case "primary":
       return { bg: theme.color.accent, fg: theme.color.accentInk };
@@ -22,19 +32,29 @@ function useChevronColors(variant, disabled) {
 function SplitButton({
   children,
   onPress,
-  items,
+  items = NO_ITEMS,
   variant = "primary",
-  size = "md",
+  size: sizeProp = "md",
   leadingIcon,
+  trailingIcon,
+  tone = "accent",
+  density = "comfortable",
+  presentation = "anchored",
   disabled = false,
   loading = false,
-  menuLabel = "More actions",
-  motion = "full"
+  menuLabel: menuLabelProp,
+  motion = "full",
+  fullWidth = false,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("split-button");
+  const labels = useLabels("splitButton", DEFAULT_LABELS, labelsProp);
+  const menuLabel = menuLabelProp ?? labels.menu;
+  const size = density === "compact" ? sizeProp === "lg" ? "md" : "sm" : sizeProp;
+  const danger = tone === "danger";
   const isDisabled = disabled || loading;
   const { styles } = useStyles(sheet, { size });
-  const colors = useChevronColors(variant, isDisabled);
+  const colors = useChevronColors(variant, danger, isDisabled);
   const [open, setOpen] = React.useState(false);
   const [anchor, setAnchor] = React.useState(null);
   const anchorRef = React.useRef(null);
@@ -64,17 +84,20 @@ function SplitButton({
       label: item.label,
       icon: item.icon,
       destructive: item.danger,
+      checked: item.selected,
       onSelect: item.onSelect
     })),
     [items]
   );
-  return /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
-    /* @__PURE__ */ jsx(View, { style: styles.primary, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(View, { style: [styles.row, fullWidth ? styles.rowFull : null], children: [
+    /* @__PURE__ */ jsx(View, { style: [styles.primary, fullWidth ? styles.primaryFull : null], children: /* @__PURE__ */ jsx(
       Button,
       {
-        variant,
+        fullWidth,
+        variant: danger && variant === "primary" ? "danger" : variant,
         size,
         leadingIcon,
+        trailingIcon,
         loading,
         disabled,
         onPress,
@@ -108,7 +131,27 @@ function SplitButton({
         )
       }
     ) }),
-    /* @__PURE__ */ jsx(
+    presentation === "sheet" ? /* @__PURE__ */ jsx(Sheet, { open, onClose: () => setOpen(false), title: menuLabel, children: items.map((item, i) => /* @__PURE__ */ jsx(
+      ListRow,
+      {
+        title: item.label,
+        leading: item.icon ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: item.icon,
+            size: theme.icon.md,
+            color: item.danger ? theme.color.danger : theme.color.text2
+          }
+        ) : void 0,
+        trailing: item.selected ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.md, color: theme.color.accentStrong }) : void 0,
+        accessibilityLabel: item.label,
+        onPress: () => {
+          setOpen(false);
+          item.onSelect();
+        }
+      },
+      i
+    )) }) : /* @__PURE__ */ jsx(
       ContextMenuOverlay,
       {
         open,
@@ -129,6 +172,8 @@ var sheet = createStyleSheet((theme) => ({
   // The primary segment butts flush against the seam; its leading corners keep
   // the ramp radius (via Button).
   primary: { alignSelf: "stretch" },
+  rowFull: { alignSelf: "stretch" },
+  primaryFull: { flex: 1 },
   divider: {
     alignSelf: "stretch",
     width: theme.borderWidth.hair,