@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-6RZM7RP2.js

@@ -0,0 +1,520 @@
+import { useDelayedLoading } from './chunk-KRBUZV45.js';
+import { EmptyState } from './chunk-QJMMM4RC.js';
+import { Picker } from './chunk-MCOZJWPU.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { SegmentedControl } from './chunk-NZG75DGA.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useResolvedMotion, motionTiming } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { StyleSheet, LayoutAnimation, BackHandler, PanResponder, View, Pressable, Text, ScrollView, useWindowDimensions } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles, themes, themeName } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  device: { phone: "Phone", tablet: "Tablet", desktop: "Desktop", none: "Viewport" },
+  caption: (d, w, h, pct) => `${d} \xB7 ${w} \xD7 ${h} \xB7 ${pct} %`,
+  groupName: (d, w, h, pct) => `${d} preview, ${w} by ${h}, ${pct} percent`,
+  windowTitle: "Preview",
+  loading: "Loading preview",
+  errorTitle: "Preview didn\u2019t load",
+  retry: "Retry",
+  deviceLabel: "Device",
+  size: "Size",
+  custom: "Custom",
+  rotate: "Rotate",
+  rotateDisabled: "Desktop has one orientation",
+  zoom: "Zoom",
+  fit: "Fit",
+  contentTheme: "Content theme",
+  theme: { light: "Light", dark: "Dark" }
+};
+var DEVICE_VIEWPORT = {
+  phone: { width: 390, height: 844 },
+  tablet: { width: 820, height: 1180 },
+  desktop: { width: 1280, height: 800 },
+  none: { width: 390, height: 844 }
+};
+var DEVICE_PRESETS = {
+  phone: [
+    { width: 360, height: 780 },
+    { width: 390, height: 844 },
+    { width: 430, height: 932 }
+  ],
+  tablet: [
+    { width: 768, height: 1024 },
+    { width: 820, height: 1180 },
+    { width: 1024, height: 1366 }
+  ],
+  desktop: [
+    { width: 1280, height: 800 },
+    { width: 1440, height: 900 }
+  ]
+};
+var BODY = {
+  phone: { bezel: 12, r: 56, screenR: 44 },
+  tablet: { bezel: 20, r: 40, screenR: 20 },
+  desktop: { bezel: 0, r: 12, screenR: 0 },
+  none: { bezel: 0, r: 12, screenR: 12 }
+};
+var BAND = 36;
+function deviceSafeArea(device, os, orientation) {
+  if (device === "phone") {
+    if (orientation === "landscape") return { top: 0, bottom: 21 };
+    return os === "android" ? { top: 36, bottom: 24 } : { top: 47, bottom: 34 };
+  }
+  if (device === "tablet") return { top: 32, bottom: 20 };
+  return { top: 0, bottom: 0 };
+}
+function fitScale(frame, avail) {
+  const w = avail.width > 0 ? avail.width / frame.width : 1;
+  const h = avail.height > 0 ? avail.height / frame.height : Infinity;
+  return Math.max(0.05, Math.min(1, w, h));
+}
+var DeviceSafeAreaContext = React.createContext({
+  top: 0,
+  bottom: 0
+});
+var DeviceContentThemeContext = React.createContext(void 0);
+function DeviceFrame({
+  device = "phone",
+  os: osProp,
+  viewport: viewportProp,
+  orientation = "portrait",
+  zoom = "fit",
+  onZoomChange,
+  contentTheme,
+  statusBar = true,
+  interactive = true,
+  loading = false,
+  error,
+  onRetry,
+  caption = true,
+  fullScreen = false,
+  onExitFullScreen,
+  children,
+  labels: labelsProp,
+  testID,
+  motion = "full"
+}) {
+  const labels = useLabels("deviceFrame", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("device-frame");
+  const { styles } = useStyles(sheet);
+  const os = osProp ?? (device === "desktop" ? "macos" : "ios");
+  const desktop = device === "desktop";
+  const base = viewportProp ?? DEVICE_VIEWPORT[device];
+  const landscape = orientation === "landscape" && !desktop;
+  const vp = landscape ? { width: base.height, height: base.width } : base;
+  const body = BODY[device];
+  const band = desktop ? BAND : 0;
+  const outer = { width: vp.width + body.bezel * 2, height: vp.height + body.bezel * 2 + band };
+  const mobile = device === "phone" || device === "tablet" ? device : null;
+  const showStatus = statusBar && (device === "phone" ? !landscape : device === "tablet");
+  const safe = deviceSafeArea(device, os, orientation);
+  const [avail, setAvail] = React.useState({ width: 0, height: 0 });
+  const pad = theme.space[24];
+  const onLayout = (e) => {
+    const { width, height } = e.nativeEvent.layout;
+    setAvail({
+      width: Math.max(0, width - pad * 2),
+      height: Math.max(0, height - pad * 2 - (caption ? theme.space[24] : 0))
+    });
+  };
+  const scale = zoom === "fit" ? fitScale(outer, avail) : zoom;
+  const percent = Math.round(scale * 100);
+  const name = labels.device[device];
+  const showLoading = useDelayedLoading(loading, 300);
+  const level = useResolvedMotion(motion, "device-frame");
+  const lastFit = React.useRef(`${scale}|${landscape}`);
+  React.useLayoutEffect(() => {
+    const key = `${scale}|${landscape}`;
+    if (lastFit.current === key) return;
+    lastFit.current = key;
+    if (level === "none") return;
+    LayoutAnimation.configureNext({
+      duration: level === "full" ? theme.duration.base : motionTiming(level).duration,
+      update: { type: "easeInEaseOut" }
+    });
+  }, [scale, landscape, level, theme.duration.base]);
+  React.useEffect(() => {
+    if (!fullScreen || !onExitFullScreen) return void 0;
+    const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+      onExitFullScreen();
+      return true;
+    });
+    return () => sub.remove();
+  }, [fullScreen, onExitFullScreen]);
+  const hasError = error !== void 0 && error !== false;
+  const scaleRef = React.useRef(scale);
+  scaleRef.current = scale;
+  const pinch = React.useRef(null);
+  const lastTap = React.useRef(0);
+  const responder = React.useMemo(
+    () => (
+      // eslint-disable-next-line loam/no-pan-responder -- no gesture-handler dependency
+      PanResponder.create({
+        onMoveShouldSetPanResponderCapture: (e) => e.nativeEvent.touches.length === 2,
+        onPanResponderMove: (e) => {
+          const t = e.nativeEvent.touches;
+          if (t.length !== 2 || !onZoomChange) return;
+          const d = Math.hypot(t[0].pageX - t[1].pageX, t[0].pageY - t[1].pageY);
+          if (!pinch.current) pinch.current = { d0: d, s0: scaleRef.current };
+          const next = Math.min(2, Math.max(0.1, pinch.current.s0 * d / pinch.current.d0));
+          onZoomChange(Math.round(next * 100) / 100);
+        },
+        onPanResponderRelease: () => {
+          pinch.current = null;
+        },
+        onPanResponderTerminate: () => {
+          pinch.current = null;
+        }
+      })
+    ),
+    [onZoomChange]
+  );
+  const onFrameTap = () => {
+    const now = Date.now();
+    if (now - lastTap.current < 300 && onZoomChange) {
+      onZoomChange(zoom === "fit" ? 1 : "fit");
+      lastTap.current = 0;
+    } else lastTap.current = now;
+  };
+  const content = contentTheme ? themes[themeName("loam", contentTheme === "dark" ? "Dark" : "Light")] : void 0;
+  const ink = content?.color.text ?? theme.color.text;
+  const screenBg = content?.color.bg ?? theme.color.bg;
+  const overlay = {
+    top: (body.bezel + band) * scale,
+    left: body.bezel * scale,
+    right: body.bezel * scale,
+    bottom: body.bezel * scale,
+    borderRadius: body.screenR * scale
+  };
+  const frame = /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "none",
+      accessibilityLabel: labels.groupName(name, vp.width, vp.height, percent),
+      style: { width: outer.width * scale, height: outer.height * scale },
+      ...responder.panHandlers,
+      children: [
+        /* @__PURE__ */ jsx(Pressable, { onPress: onFrameTap, accessible: false, style: { flex: 1 }, children: /* @__PURE__ */ jsxs(
+          View,
+          {
+            testID: testID ? `${testID}-body` : void 0,
+            style: [
+              styles.body,
+              {
+                width: outer.width,
+                height: outer.height,
+                padding: body.bezel,
+                borderRadius: body.r,
+                backgroundColor: desktop ? theme.color.surface : device === "none" ? "transparent" : theme.color.surface3,
+                transform: [
+                  { translateX: -outer.width * (1 - scale) / 2 },
+                  { translateY: -outer.height * (1 - scale) / 2 },
+                  { scale }
+                ]
+              },
+              device === "none" ? null : styles.edge
+            ],
+            children: [
+              desktop ? /* @__PURE__ */ jsxs(View, { style: styles.band, children: [
+                os === "windows" ? null : /* @__PURE__ */ jsx(View, { style: styles.lights, children: [theme.color.danger, theme.color.warn, theme.color.good].map((c, i) => /* @__PURE__ */ jsx(View, { style: [styles.light, { backgroundColor: c }] }, i)) }),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    numberOfLines: 1,
+                    style: [styles.bandTitle, os === "windows" ? styles.bandTitleWin : null],
+                    children: labels.windowTitle
+                  }
+                ),
+                os === "windows" ? /* @__PURE__ */ jsx(View, { style: styles.captions, children: ["\u2014", "\u25A2", "\u2715"].map((g) => /* @__PURE__ */ jsx(Text, { style: styles.caption46, children: g }, g)) }) : null
+              ] }) : null,
+              /* @__PURE__ */ jsxs(
+                View,
+                {
+                  testID: testID ? `${testID}-screen` : void 0,
+                  pointerEvents: interactive ? "auto" : "none",
+                  style: [
+                    styles.screen,
+                    {
+                      width: vp.width,
+                      height: vp.height,
+                      borderRadius: desktop ? 0 : body.screenR,
+                      backgroundColor: screenBg
+                    },
+                    device === "none" ? styles.edge : null
+                  ],
+                  children: [
+                    showStatus && mobile ? /* @__PURE__ */ jsxs(
+                      View,
+                      {
+                        style: [
+                          styles.status,
+                          os === "android" ? { height: device === "phone" ? 36 : 32, paddingHorizontal: 24 } : {
+                            height: device === "phone" ? 47 : 32,
+                            paddingHorizontal: device === "phone" ? 32 : 24
+                          }
+                        ],
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Text,
+                            {
+                              style: {
+                                color: ink,
+                                fontSize: theme.fontSize[os === "android" ? 14 : 17],
+                                fontWeight: os === "android" ? theme.fontWeight.medium : theme.fontWeight.semibold
+                              },
+                              children: "9:41"
+                            }
+                          ),
+                          os === "android" && device === "phone" ? /* @__PURE__ */ jsx(View, { style: [styles.punch, { backgroundColor: ink }] }) : null,
+                          /* @__PURE__ */ jsx(
+                            View,
+                            {
+                              style: [
+                                os === "android" ? { width: 12, height: 18, borderRadius: 2 } : { width: 27, height: 13, borderRadius: 4 },
+                                { borderWidth: 1.5, borderColor: ink }
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx(DeviceContentThemeContext.Provider, { value: content, children: /* @__PURE__ */ jsx(DeviceSafeAreaContext.Provider, { value: safe, children: /* @__PURE__ */ jsx(View, { style: styles.content, children }) }) }),
+                    mobile ? /* @__PURE__ */ jsx(
+                      View,
+                      {
+                        style: [
+                          styles.home,
+                          { height: os === "android" ? 24 : device === "tablet" ? 20 : 34 }
+                        ],
+                        children: /* @__PURE__ */ jsx(
+                          View,
+                          {
+                            style: [
+                              os === "android" ? { width: 108, height: 4, borderRadius: 2 } : { width: device === "tablet" ? 200 : 134, height: 5, borderRadius: 3 },
+                              { backgroundColor: ink }
+                            ]
+                          }
+                        )
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            ]
+          }
+        ) }),
+        showLoading && !hasError ? /* @__PURE__ */ jsxs(View, { style: [styles.layer, overlay], children: [
+          /* @__PURE__ */ jsx(Spinner, { size: "md", labels: { loading: labels.loading }, motion: level }),
+          /* @__PURE__ */ jsx(Text, { style: styles.loadingText, importantForAccessibility: "no", children: labels.loading })
+        ] }) : null,
+        hasError ? /* @__PURE__ */ jsx(View, { style: [styles.layer, overlay], accessibilityRole: "alert", children: /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            variant: "error",
+            icon: "alert-triangle",
+            title: labels.errorTitle,
+            description: typeof error === "string" ? error : void 0,
+            actionLabel: onRetry ? labels.retry : void 0,
+            onAction: onRetry
+          }
+        ) }) : null
+      ]
+    }
+  );
+  const fixed = zoom !== "fit";
+  const inner = /* @__PURE__ */ jsxs(View, { style: [styles.inner, fixed ? null : { flex: 1 }], children: [
+    frame,
+    caption ? /* @__PURE__ */ jsx(Text, { style: styles.captionText, importantForAccessibility: "no-hide-descendants", children: labels.caption(name, vp.width, vp.height, percent) }) : null
+  ] });
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      testID,
+      style: [styles.stage, fullScreen ? styles.full : null],
+      onLayout,
+      children: fixed ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, contentContainerStyle: { flexGrow: 1 }, children: /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: { flexGrow: 1 }, children: inner }) }) : inner
+    }
+  );
+}
+function DeviceFrameToolbar({
+  device,
+  onDeviceChange,
+  viewport,
+  onViewportChange,
+  orientation = "portrait",
+  onOrientationChange,
+  zoom = "fit",
+  onZoomChange,
+  contentTheme = "light",
+  onContentThemeChange,
+  hide = [],
+  labels: labelsProp
+}) {
+  const labels = useLabels("deviceFrame", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet);
+  const { width } = useWindowDimensions();
+  const phoneHost = width < 600;
+  const vp = viewport ?? DEVICE_VIEWPORT[device];
+  const key = (v) => `${v.width}x${v.height}`;
+  const presets = DEVICE_PRESETS[device];
+  const sizeValue = presets.some((p) => key(p) === key(vp)) ? key(vp) : "custom";
+  const shown = (c) => !hide.includes(c);
+  const zoomItems = phoneHost ? [{ value: "fit", label: labels.fit }] : [
+    { value: "fit", label: labels.fit },
+    ...[0.5, 0.75, 1].map((z) => ({ value: String(z), label: `${z * 100} %` }))
+  ];
+  return /* @__PURE__ */ jsxs(View, { accessibilityRole: "toolbar", style: styles.toolbar, children: [
+    shown("device") ? /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        size: "lg",
+        accessibilityLabel: labels.deviceLabel,
+        value: device,
+        onValueChange: (v) => onDeviceChange?.(v),
+        items: ["phone", "tablet", "desktop"].map((d) => ({
+          value: d,
+          label: labels.device[d]
+        }))
+      }
+    ) : null,
+    shown("size") ? /* @__PURE__ */ jsx(
+      Picker,
+      {
+        size: "lg",
+        accessibilityLabel: labels.size,
+        title: labels.size,
+        value: sizeValue,
+        onValueChange: (v) => {
+          if (v === "custom") return onViewportChange?.("custom");
+          const p = presets.find((x) => key(x) === v);
+          if (p) onViewportChange?.(p);
+        },
+        items: [
+          ...presets.map((p) => ({ value: key(p), label: `${p.width} \xD7 ${p.height}` })),
+          { value: "custom", label: labels.custom }
+        ]
+      }
+    ) : null,
+    shown("rotate") ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "lg",
+        leadingIcon: "rotate-ccw",
+        accessibilityLabel: labels.rotate,
+        softDisabled: device === "desktop",
+        disabledReason: device === "desktop" ? labels.rotateDisabled : void 0,
+        onPress: () => onOrientationChange?.(orientation === "portrait" ? "landscape" : "portrait")
+      }
+    ) : null,
+    shown("zoom") ? /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        size: "lg",
+        accessibilityLabel: labels.zoom,
+        value: String(zoom),
+        onValueChange: (v) => onZoomChange?.(v === "fit" ? "fit" : Number(v)),
+        items: zoomItems
+      }
+    ) : null,
+    shown("theme") ? /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        size: "lg",
+        accessibilityLabel: labels.contentTheme,
+        value: contentTheme,
+        onValueChange: (v) => onContentThemeChange?.(v),
+        items: [
+          { value: "light", label: labels.theme.light },
+          { value: "dark", label: labels.theme.dark }
+        ]
+      }
+    ) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  stage: {
+    flex: 1,
+    overflow: "hidden",
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface2
+  },
+  full: { ...StyleSheet.absoluteFillObject, borderRadius: 0, zIndex: theme.z.overlay },
+  inner: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space[12],
+    padding: theme.space[24]
+  },
+  body: { position: "absolute", left: 0, top: 0, overflow: "hidden", ...theme.shadow.lg },
+  edge: { borderWidth: theme.borderWidth.base, borderColor: theme.color.borderStrong },
+  band: {
+    height: BAND,
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: theme.color.surface2,
+    borderBottomWidth: theme.borderWidth.hair,
+    borderBottomColor: theme.color.border
+  },
+  lights: { flexDirection: "row", gap: theme.space[8], paddingHorizontal: theme.space[12] },
+  light: { width: theme.space[12], height: theme.space[12], borderRadius: theme.radius.full },
+  bandTitle: {
+    flex: 1,
+    textAlign: "center",
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text2
+  },
+  bandTitleWin: { textAlign: "left", paddingStart: theme.space[16] },
+  captions: { flexDirection: "row", alignSelf: "stretch" },
+  caption46: {
+    width: 46,
+    textAlign: "center",
+    lineHeight: BAND,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text
+  },
+  screen: { overflow: "hidden" },
+  status: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
+  punch: {
+    position: "absolute",
+    left: "50%",
+    top: 10,
+    width: 14,
+    height: 14,
+    marginLeft: -7,
+    borderRadius: 7
+  },
+  content: { flex: 1 },
+  home: { alignItems: "center", justifyContent: "center" },
+  layer: {
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+    padding: theme.space[12],
+    overflow: "hidden",
+    backgroundColor: theme.color.surface
+  },
+  loadingText: {
+    textAlign: "center",
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text2
+  },
+  captionText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text2
+  },
+  toolbar: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: theme.space[8] }
+}));
+
+export { DEVICE_PRESETS, DEVICE_VIEWPORT, DeviceContentThemeContext, DeviceFrame, DeviceFrameToolbar, DeviceSafeAreaContext };

package/dist/{chunk-JJLPBRVZ.js → chunk-75BDCC7K.js}

@@ -13,6 +13,7 @@ function ScrollArea({
   maxHeight,
   maxWidth,
   motion: motionProp = "full",
+  align = "start",
   accessibilityLabel
 }) {
   const motion = useResolvedMotion(motionProp, "scroll-area");
@@ -54,6 +55,7 @@ function ScrollArea({
       onContentSizeChange,
       onScroll: fade ? onScroll : void 0,
       scrollEventThrottle: 16,
+      contentContainerStyle: align === "start" ? void 0 : horizontal ? { flexGrow: 1, justifyContent: align === "center" ? "center" : "flex-end" } : { alignItems: align === "center" ? "center" : "flex-end" },
       children: orientation === "both" ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: true, focusable: true, children }) : children
     }
   );