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

package/dist/chunk-NKB7BZYK.js

@@ -0,0 +1,167 @@
+import { Sheet } from './chunk-ZVFE5QGU.js';
+import { expandedProps } from './chunk-RQ3HASCC.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Pressable, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function Picker({
+  items,
+  value,
+  onValueChange,
+  placeholder = "Select\u2026",
+  title,
+  disabled = false,
+  size = "md",
+  accessibilityLabel
+}) {
+  const [open, setOpen] = React.useState(false);
+  const theme = useLoamTheme();
+  const selected = items.find((item) => item.value === value);
+  const isPlaceholder = selected == null;
+  const displayText = selected?.label ?? placeholder;
+  const { styles } = useStyles(sheet, { size, disabled, placeholder: isPlaceholder });
+  const iconSize = theme.ctl.icon[size];
+  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
+  const handleSelect = (next) => {
+    haptics.impact("light");
+    onValueChange?.(next);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: accessibilityLabel ?? displayText,
+        accessibilityState: { disabled, expanded: open },
+        ...expandedProps(open),
+        disabled,
+        onPress: disabled ? void 0 : () => setOpen(true),
+        hitSlop: { top: slopY, bottom: slopY },
+        style: styles.trigger,
+        children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.value, numberOfLines: 1, children: displayText }),
+          /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: iconSize, color: theme.color.text3 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Sheet, { open, onClose: () => setOpen(false), title, children: items.map((item) => {
+      const isSelected = item.value === value;
+      return /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: item.label,
+          accessibilityState: { selected: isSelected },
+          onPress: () => handleSelect(item.value),
+          style: ({ pressed }) => [
+            styles.option,
+            isSelected ? styles.optionSelected : null,
+            pressed ? styles.optionPressed : null
+          ],
+          children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles.optionLabel, isSelected ? styles.optionLabelSelected : null], children: item.label }),
+            isSelected ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.md, color: theme.color.accentOnSoft }) : null
+          ]
+        },
+        item.value
+      );
+    }) })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: theme.color.surface2,
+    // The reference draws a `1.5px` field edge — the static `w2` weight.
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.borderStrong,
+    variants: {
+      // Height, padding, gap and corner radius all resolve from one control-size
+      // tier (26 / 30 / 36 / 44), matching {@link Input}.
+      size: {
+        xs: {
+          height: theme.ctl.xs,
+          paddingHorizontal: theme.ctl.px.xs,
+          gap: theme.ctl.gap.xs,
+          borderRadius: theme.ctl.r.xs
+        },
+        sm: {
+          height: theme.ctl.sm,
+          paddingHorizontal: theme.ctl.px.sm,
+          gap: theme.ctl.gap.sm,
+          borderRadius: theme.ctl.r.sm
+        },
+        md: {
+          height: theme.ctl.md,
+          paddingHorizontal: theme.ctl.px.md,
+          gap: theme.ctl.gap.md,
+          borderRadius: theme.ctl.r.md
+        },
+        lg: {
+          height: theme.ctl.lg,
+          paddingHorizontal: theme.ctl.px.lg,
+          gap: theme.ctl.gap.lg,
+          borderRadius: theme.ctl.r.lg
+        }
+      },
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
+  value: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    variants: {
+      size: {
+        xs: { fontSize: theme.fontSize[14] },
+        sm: { fontSize: theme.fontSize[14] },
+        md: { fontSize: theme.fontSize[16] },
+        lg: { fontSize: theme.fontSize[16] }
+      },
+      placeholder: {
+        true: { color: theme.color.text3 },
+        false: { color: theme.color.text }
+      }
+    }
+  },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.space[48],
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s2,
+    borderRadius: theme.radius.md,
+    // Every row carries the edge weight so selecting one does not shift the text.
+    borderWidth: theme.borderWidth.base,
+    borderColor: "transparent"
+  },
+  // The reference's selection band: an `accentSoft` `radius.md` plate behind the
+  // centred option. `-soft` tints collapse at high contrast, so it carries the
+  // matching tone edge.
+  optionSelected: {
+    backgroundColor: theme.color.accentSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent
+  },
+  optionPressed: { backgroundColor: theme.color.surface2 },
+  optionLabel: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[16],
+    color: theme.color.text2
+  },
+  optionLabelSelected: {
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.accentOnSoft
+  }
+}));
+
+export { Picker };