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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nuszpl Botond
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,56 @@
-# Temporary Holding Version
+<p align="center">
+  <a href="https://loam.btndprojects.com"><img src="https://loam.btndprojects.com/apple-touch-icon.png" width="64" height="64" alt="Loam"></a>
+</p>
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<h1 align="center">@btndprojects/loam-ui-native</h1>
+
+<p align="center">The Loam React Native component library — native primitives themed with Unistyles from the same tokens as the web.</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@btndprojects/loam-ui-native"><img src="https://img.shields.io/npm/v/@btndprojects/loam-ui-native?color=c0563a&label=npm" alt="npm version"></a>
+  <a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-3d7a48" alt="MIT license"></a>
+  <a href="https://loam.btndprojects.com"><img src="https://img.shields.io/badge/docs-loam.btndprojects.com-8c3a25" alt="Documentation"></a>
+</p>
+
+The same component vocabulary as [`@btndprojects/loam-ui-web`](https://www.npmjs.com/package/@btndprojects/loam-ui-web), built for phones: platform-aware metrics on iOS and Android, native gestures, safe areas, haptics and dynamic type.
+
+## Install
+
+```sh
+npm install @btndprojects/loam-ui-native @btndprojects/loam-theme-native @btndprojects/loam-tokens
+npm install react-native-unistyles react-native-svg
+```
+
+## Usage
+
+Wrap the app in `LoamProvider`, then use the components:
+
+```tsx
+import { LoamProvider } from '@btndprojects/loam-theme-native';
+import { Button, Card, ListRow } from '@btndprojects/loam-ui-native';
+
+export default function App() {
+  return (
+    <LoamProvider preset="aurora" mode="Dark">
+      <Card>
+        <ListRow title="Notifications" subtitle="Push, email and SMS alerts" />
+        <Button onPress={() => {}}>Save</Button>
+      </Card>
+    </LoamProvider>
+  );
+}
+```
+
+## Documentation
+
+Guides, live examples and the full API are on **[loam.btndprojects.com](https://loam.btndprojects.com)** — start with [Components (switch the platform to iOS or Android)](https://loam.btndprojects.com/#/components/button).
+
+## Related packages
+
+- [`@btndprojects/loam-theme-native`](https://www.npmjs.com/package/@btndprojects/loam-theme-native) — the Unistyles theme provider
+- [`@btndprojects/loam-tokens`](https://www.npmjs.com/package/@btndprojects/loam-tokens) — the design tokens and presets
+- [`@btndprojects/loam-ui-web`](https://www.npmjs.com/package/@btndprojects/loam-ui-web) — the same components for the web
+
+## License
+
+MIT © Nuszpl Botond

package/dist/accordion/index.js

@@ -0,0 +1,3 @@
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../chunk-BEDBFJND.js';
+import '../chunk-RQ3HASCC.js';
+import '../chunk-TKVFVF5D.js';

package/dist/adaptive/index.js

@@ -0,0 +1,2 @@
+export { AdaptiveNav, AdaptiveShell, FORM_FACTORS, FORM_FACTOR_SPECS, HINGE_GUTTER_WIDTH, NAV_RAIL_WIDTH, SplitView, adaptivePadding, classifyFormFactor, useFormFactor } from '../chunk-GNNJ4GCC.js';
+import '../chunk-TKVFVF5D.js';

package/dist/alert/index.js

@@ -0,0 +1,3 @@
+import '../chunk-2WUTXHMU.js';
+export { Alert } from '../chunk-OETCUXQP.js';
+import '../chunk-TKVFVF5D.js';

package/dist/analyzer/index.js

@@ -0,0 +1,6 @@
+export { Analyzer, CameraSurface, CaptureFlash, PreviewSlot, QueueBadge } from '../chunk-S7F6XLTK.js';
+import '../chunk-BV3B2HYZ.js';
+export { PLACEHOLDER_LABEL, PlaceholderFeed, SubjectPlate } from '../chunk-LAECSR4H.js';
+import '../chunk-RW6ZL2FQ.js';
+import '../chunk-6N33LFQA.js';
+import '../chunk-TKVFVF5D.js';

package/dist/announcement/index.js

@@ -0,0 +1,6 @@
+export { AnnouncementBar, AnnouncementHighlights, AnnouncementModal } from '../chunk-RJQOOHT2.js';
+import '../chunk-OPXFZ4Y5.js';
+import '../chunk-3ARE4TES.js';
+import '../chunk-AWJOCGFZ.js';
+import '../chunk-NY2U3PBI.js';
+import '../chunk-TKVFVF5D.js';

package/dist/audio-player/index.js

@@ -0,0 +1,3 @@
+export { AudioMiniBar, AudioPlayerCollapsible, AudioSheet } from '../chunk-2GK6PHGE.js';
+import '../chunk-6N33LFQA.js';
+import '../chunk-TKVFVF5D.js';

package/dist/avatar/index.js

@@ -0,0 +1,3 @@
+import '../chunk-Y5CSSPV4.js';
+export { Avatar, AvatarGroup, hashToChartIndex, initialsFromName } from '../chunk-QDYDBCFP.js';
+import '../chunk-TKVFVF5D.js';

package/dist/avatar-group/index.js

@@ -0,0 +1,3 @@
+export { AvatarStack } from '../chunk-DHWADYZX.js';
+import '../chunk-QDYDBCFP.js';
+import '../chunk-TKVFVF5D.js';

package/dist/badge/index.js

@@ -0,0 +1,5 @@
+import '../chunk-JTRJJLKL.js';
+export { Badge } from '../chunk-SBMNWWBV.js';
+import '../chunk-CUMUNPXY.js';
+import '../chunk-6N33LFQA.js';
+import '../chunk-TKVFVF5D.js';

package/dist/banner/index.js

@@ -0,0 +1,2 @@
+export { Banner, SystemBanner } from '../chunk-SYNOJOQO.js';
+import '../chunk-TKVFVF5D.js';

package/dist/board/index.js

@@ -0,0 +1,7 @@
+export { Board } from '../chunk-VEAYTRPX.js';
+import '../chunk-WS56BL3D.js';
+import '../chunk-KMI5ML5I.js';
+import '../chunk-O7AE6DAF.js';
+import '../chunk-RIBDXGUG.js';
+import '../chunk-RQ3HASCC.js';
+import '../chunk-TKVFVF5D.js';

package/dist/button/index.js

@@ -0,0 +1,5 @@
+import '../chunk-JDEOITQ2.js';
+export { Button } from '../chunk-3ARE4TES.js';
+import '../chunk-AWJOCGFZ.js';
+import '../chunk-NY2U3PBI.js';
+import '../chunk-TKVFVF5D.js';

package/dist/camera-permission/index.js

@@ -0,0 +1,13 @@
+export { CameraDenied, PermissionPrimer as CameraPermissionPrimer, CameraPermissionScreen, CameraUnavailable, CaptureDone } from '../chunk-2A5NIQAK.js';
+import '../chunk-N32RGOA5.js';
+import '../chunk-SBMNWWBV.js';
+import '../chunk-CUMUNPXY.js';
+import '../chunk-KMI5ML5I.js';
+import '../chunk-O7AE6DAF.js';
+import '../chunk-RIBDXGUG.js';
+import '../chunk-RW6ZL2FQ.js';
+import '../chunk-3ARE4TES.js';
+import '../chunk-AWJOCGFZ.js';
+import '../chunk-NY2U3PBI.js';
+import '../chunk-6N33LFQA.js';
+import '../chunk-TKVFVF5D.js';

package/dist/capture-result/index.js

@@ -0,0 +1,18 @@
+export { AnalysisProgress, CapturePreview, CodeResult, FROZEN_PHASES, FailureCard, FieldsResult, PanelsResult, ResultCard, ResultSheet, RetakeBar, ScanSweep, SpeciesResult, StageBadge, StageRow, VerdictResult } from '../chunk-423B7SPN.js';
+import '../chunk-VQHPQEUH.js';
+import '../chunk-TUTI5HOZ.js';
+import '../chunk-ITTYJZWX.js';
+import '../chunk-3NMD74ZU.js';
+export { ConfidenceBadge, PhaseAnnouncement } from '../chunk-N32RGOA5.js';
+import '../chunk-SBMNWWBV.js';
+import '../chunk-CUMUNPXY.js';
+import '../chunk-KMI5ML5I.js';
+import '../chunk-O7AE6DAF.js';
+import '../chunk-RIBDXGUG.js';
+import '../chunk-LAECSR4H.js';
+import '../chunk-RW6ZL2FQ.js';
+import '../chunk-3ARE4TES.js';
+import '../chunk-AWJOCGFZ.js';
+import '../chunk-NY2U3PBI.js';
+import '../chunk-6N33LFQA.js';
+import '../chunk-TKVFVF5D.js';

package/dist/card/index.js

@@ -0,0 +1,4 @@
+import '../chunk-WS56BL3D.js';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle } from '../chunk-KMI5ML5I.js';
+import '../chunk-O7AE6DAF.js';
+import '../chunk-RIBDXGUG.js';

package/dist/card-form/index.js

@@ -0,0 +1,10 @@
+export { CardForm, CardNumberField, CvcField, ExpiryField, ExpiryHint, validateCard } from '../chunk-O4AEHWII.js';
+import '../chunk-PUPM2YGF.js';
+import '../chunk-JXJB2X6M.js';
+import '../chunk-ITTYJZWX.js';
+import '../chunk-3NMD74ZU.js';
+import '../chunk-SBMNWWBV.js';
+import '../chunk-CUMUNPXY.js';
+import '../chunk-NY2U3PBI.js';
+import '../chunk-6N33LFQA.js';
+import '../chunk-TKVFVF5D.js';

package/dist/carousel/index.js

@@ -0,0 +1,2 @@
+export { Carousel } from '../chunk-VCDBXW5H.js';
+import '../chunk-6N33LFQA.js';

package/dist/chart/index.js

@@ -0,0 +1,6 @@
+export { Chart, ChartDataTable, SceneDefsNodes, SceneNodes, nativeChartPalette } from '../chunk-7O2FMUPT.js';
+import '../chunk-RIBDXGUG.js';
+import '../chunk-3ARE4TES.js';
+import '../chunk-AWJOCGFZ.js';
+import '../chunk-NY2U3PBI.js';
+import '../chunk-TKVFVF5D.js';

package/dist/charts/index.js

@@ -0,0 +1,7 @@
+export { BarChart, ChartFrame, Donut, RingChart, Sparkline, StackedBar, StatCard } from '../chunk-IIQTAY3J.js';
+import '../chunk-RIBDXGUG.js';
+import '../chunk-3ARE4TES.js';
+import '../chunk-AWJOCGFZ.js';
+import '../chunk-NY2U3PBI.js';
+import '../chunk-6N33LFQA.js';
+import '../chunk-TKVFVF5D.js';

package/dist/checkbox/index.js

@@ -0,0 +1,7 @@
+import '../chunk-GNZ56EUI.js';
+export { Checkbox } from '../chunk-JXJB2X6M.js';
+import '../chunk-ITTYJZWX.js';
+import '../chunk-3NMD74ZU.js';
+import '../chunk-NY2U3PBI.js';
+import '../chunk-6N33LFQA.js';
+import '../chunk-TKVFVF5D.js';

package/dist/checklist/index.js

@@ -0,0 +1,10 @@
+export { Checklist, ChecklistLauncher, ChecklistProgress, ChecklistRow } from '../chunk-LRJNDEIA.js';
+import '../chunk-JUAMLEHX.js';
+import '../chunk-2ZZ7TDJ4.js';
+import '../chunk-YLLCXTMC.js';
+import '../chunk-CUMUNPXY.js';
+import '../chunk-3ARE4TES.js';
+import '../chunk-AWJOCGFZ.js';
+import '../chunk-NY2U3PBI.js';
+import '../chunk-6N33LFQA.js';
+import '../chunk-TKVFVF5D.js';

package/dist/checkout/index.js

@@ -0,0 +1,13 @@
+export { CheckoutSheet, CollapsedSummaryBar, OrderSummary, PayButton, summaryIcon } from '../chunk-GDKZTW34.js';
+export { MandateNotice, SecurePayLabel, TRUST_INLINE, TRUST_ROW, TrustRow } from '../chunk-7CFF4HXS.js';
+import '../chunk-VBOXAEPI.js';
+import '../chunk-ZVFE5QGU.js';
+import '../chunk-ITTYJZWX.js';
+import '../chunk-3NMD74ZU.js';
+import '../chunk-RQ3HASCC.js';
+import '../chunk-OPXFZ4Y5.js';
+import '../chunk-3ARE4TES.js';
+import '../chunk-AWJOCGFZ.js';
+import '../chunk-NY2U3PBI.js';
+import '../chunk-6N33LFQA.js';
+import '../chunk-TKVFVF5D.js';

package/dist/chip/index.js

@@ -0,0 +1,7 @@
+import '../chunk-N5ZNE2YE.js';
+export { Chip } from '../chunk-AI4DWZCD.js';
+import '../chunk-ITTYJZWX.js';
+import '../chunk-3NMD74ZU.js';
+import '../chunk-NY2U3PBI.js';
+import '../chunk-6N33LFQA.js';
+import '../chunk-TKVFVF5D.js';

package/dist/chunk-223Q2T2Q.js

@@ -0,0 +1,229 @@
+import { isConnectorTraversed, resolveStepState, NODE_STATE_ICON } from './chunk-YLLCXTMC.js';
+import { Button } from './chunk-3ARE4TES.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, View, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function clamp(n, lo, hi) {
+  return Math.min(hi, Math.max(lo, n));
+}
+function useDotForeground(done, active) {
+  const theme = useLoamTheme();
+  if (done) return theme.color.goodInk;
+  if (active) return theme.color.accentOnSoft;
+  return theme.color.text3;
+}
+function StepDot({
+  index,
+  current,
+  title
+}) {
+  const stepState = resolveStepState(index, current);
+  const done = stepState === "done";
+  const active = stepState === "working";
+  const { styles } = useStyles(sheet, { state: done ? "done" : active ? "active" : "upcoming" });
+  const theme = useLoamTheme();
+  const fg = useDotForeground(done, active);
+  const currentAttr = active ? { "aria-current": "step" } : {};
+  return /* @__PURE__ */ jsxs(View, { style: styles.dotCol, children: [
+    /* @__PURE__ */ jsx(View, { style: styles.dot, ...currentAttr, children: done ? /* @__PURE__ */ jsx(Icon, { name: NODE_STATE_ICON.done, size: theme.icon.sm, color: fg }) : /* @__PURE__ */ jsx(Text, { style: [styles.dotNum, { color: fg }], children: index + 1 }) }),
+    title ? /* @__PURE__ */ jsx(Text, { numberOfLines: 2, style: [styles.dotLabel, { color: index <= current ? void 0 : fg }], children: title }) : null
+  ] });
+}
+function Wizard({
+  steps,
+  step,
+  defaultStep = 0,
+  onStepChange,
+  onFinish,
+  backLabel = "Back",
+  nextLabel = "Next",
+  finishLabel = "Finish",
+  motion = "full"
+}) {
+  const isControlled = step !== void 0;
+  const last = Math.max(0, steps.length - 1);
+  const [internal, setInternal] = React.useState(() => clamp(defaultStep, 0, last));
+  const current = clamp(isControlled ? step : internal, 0, last);
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const activeStep = steps[current];
+  const isFirst = current <= 0;
+  const isLast = current >= last;
+  const prev = React.useRef(current);
+  const opacity = React.useRef(new Animated.Value(1)).current;
+  const translateX = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    if (motion === "none") {
+      prev.current = current;
+      opacity.setValue(1);
+      translateX.setValue(0);
+      return;
+    }
+    const reduced = motion === "reduced" || theme.reduceMotion;
+    const direction = current >= prev.current ? 1 : -1;
+    prev.current = current;
+    opacity.setValue(0);
+    translateX.setValue(reduced ? 0 : direction * theme.space.s4);
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: theme.duration.base,
+        useNativeDriver: true
+      }),
+      // The slide is travel — dropped under reduced motion, kept at `full`.
+      ...reduced ? [] : [
+        Animated.spring(translateX, {
+          toValue: 0,
+          useNativeDriver: true,
+          speed: 18,
+          bounciness: 6
+        })
+      ]
+    ]).start();
+  }, [current, motion, opacity, translateX, theme.reduceMotion, theme.duration.base, theme.space.s4]);
+  const goTo = (next) => {
+    const clamped = clamp(next, 0, last);
+    if (clamped === current) return;
+    if (!isControlled) setInternal(clamped);
+    onStepChange?.(clamped);
+  };
+  const onNext = () => {
+    if (isLast) onFinish?.();
+    else goTo(current + 1);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.container, children: [
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: styles.rail,
+        accessibilityRole: "progressbar",
+        accessibilityLabel: `Step ${current + 1} of ${steps.length}${activeStep?.title ? `: ${activeStep.title}` : ""}`,
+        accessibilityValue: { min: 1, max: steps.length, now: current + 1 },
+        "aria-valuemin": 1,
+        "aria-valuemax": steps.length,
+        "aria-valuenow": current + 1,
+        children: steps.map((s, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          i > 0 ? (
+            // The connector carries the state: solid in the done tone once the
+            // step it leaves has been traversed, muted otherwise — the shared
+            // rule, and the same green the completed dots now use.
+            /* @__PURE__ */ jsx(
+              View,
+              {
+                style: [
+                  styles.line,
+                  {
+                    backgroundColor: isConnectorTraversed(resolveStepState(i - 1, current)) ? theme.color.good : theme.color.surface3
+                  }
+                ]
+              }
+            )
+          ) : null,
+          /* @__PURE__ */ jsx(StepDot, { index: i, current, title: s.title })
+        ] }, s.key))
+      }
+    ),
+    /* @__PURE__ */ jsx(Animated.View, { style: [styles.content, { opacity, transform: [{ translateX }] }], children: activeStep?.content }),
+    /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          leadingIcon: "arrow-left",
+          disabled: isFirst,
+          onPress: () => goTo(current - 1),
+          children: backLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", trailingIcon: isLast ? "check" : "arrow-right", onPress: onNext, children: isLast ? finishLabel : nextLabel })
+    ] })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  // The wizard owns its own gutter: it is a whole flow, not a control dropped
+  // into someone else's padded box, and without one the footer buttons sat flush
+  // against whatever container it was placed in.
+  container: {
+    padding: theme.space.s4,
+    gap: theme.space.s4
+  },
+  // Step titles sit *in flow* under their dot rather than absolutely positioned:
+  // an absolute label is measured against the 32pt dot, so it either overflowed
+  // into its neighbours or (once clamped) truncated to "Acc…". The connecting
+  // lines stay level with the dot centres by being offset to that centre
+  // themselves, which is why the rail aligns to `flex-start`.
+  rail: {
+    flexDirection: "row",
+    alignItems: "flex-start"
+  },
+  line: {
+    flex: 1,
+    height: theme.borderWidth.thick,
+    borderRadius: theme.radius.full,
+    marginHorizontal: theme.space.s1,
+    marginTop: theme.space.s6 / 2 - theme.borderWidth.thick / 2
+  },
+  dotCol: { alignItems: "center", flexShrink: 0, gap: theme.space.s1 },
+  dot: {
+    width: theme.space.s6,
+    height: theme.space.s6,
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      state: {
+        // `done` uses the family's done tone (`status.done` === `good`), so a
+        // completed wizard step is the same green as a `done` Timeline/Stage node
+        // and matches the web wizard — the native wizard previously diverged to
+        // `accent` (blue) here, the one inconsistency this unification resolves.
+        done: {
+          backgroundColor: theme.status.done,
+          borderWidth: theme.borderWidth.thick,
+          borderColor: theme.status.done
+        },
+        // The active step's edge is `focus.ringColor` — the only mark of "you
+        // are here" once high contrast drops the `accentSoft` fill, so it owes
+        // SC 1.4.11's 3:1, which the raw accent misses in four palettes.
+        active: {
+          backgroundColor: theme.color.accentSoft,
+          borderWidth: theme.borderWidth.thick,
+          borderColor: theme.focus.ringColor
+        },
+        upcoming: {
+          backgroundColor: theme.color.surface3,
+          borderWidth: theme.borderWidth.thick,
+          borderColor: theme.color.surface3
+        }
+      }
+    }
+  },
+  dotNum: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight
+  },
+  dotLabel: {
+    // Wide enough for a real step name, capped so a long one wraps instead of
+    // shouldering the next step out of the rail.
+    maxWidth: theme.space.s8 + theme.space.s4,
+    textAlign: "center",
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text
+  },
+  content: { gap: theme.space.s3 },
+  footer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space.s3
+  }
+}));
+
+export { Wizard };