@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-TFHI5XDR.js

@@ -0,0 +1,610 @@
+import { Checkbox } from './chunk-KNILMM4H.js';
+import { Banner } from './chunk-WVVD3XOV.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { announce } from './chunk-W23G6JLF.js';
+import { FieldMessage } from './chunk-BTRMA7GC.js';
+import { useInputPlatform } from './chunk-KXLDK6HB.js';
+import { fieldSurfaceFill } from './chunk-43K3BLXV.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, AppState, View, Text, Pressable, ActivityIndicator } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  reveal: "Reveal",
+  hide: "Hide",
+  copy: "Copy",
+  checking: "Checking your identity\u2026",
+  hidesAgain: "Hides again in 30 s",
+  copied: "Copied. Clears from the clipboard in 60 s.",
+  expired: "Expired",
+  expiresIn: "Expires in {time}",
+  acknowledge: "I\u2019ve stored this key somewhere safe",
+  oneTimeWarning: "You won\u2019t see this key again. Copy it now.",
+  done: "Done",
+  used: "Used",
+  copyAll: "Copy all",
+  download: "Download .txt",
+  print: "Print"
+};
+var SECRET_CLIPBOARD_TTL = 6e4;
+function maskSecret(value, keepStart = 8, keepEnd = 4) {
+  if (value.length <= keepStart + keepEnd) return "\u2022".repeat(Math.max(value.length, 8));
+  return `${value.slice(0, keepStart)}${"\u2022".repeat(8)}${value.slice(-keepEnd)}`;
+}
+var ACTION_TIER = { lg: "md", md: "sm", sm: "xs", xs: "xs" };
+function SecretField({
+  value,
+  label,
+  hint,
+  surface = "filled",
+  size = "lg",
+  keepStart = 8,
+  keepEnd = 4,
+  onReveal,
+  onCopy,
+  revealed: revealedProp,
+  onRevealedChange,
+  autoHide = 3e4,
+  copyOnly,
+  disabledReason,
+  platform,
+  error,
+  success,
+  motion = "full",
+  labels: labelsProp,
+  testID
+}) {
+  const os = useInputPlatform(platform);
+  const { styles } = useStyles(sheet, { os });
+  const theme = useLoamTheme();
+  const labels = useLabels("secretFieldNative", DEFAULT_LABELS, labelsProp);
+  const [revealedState, setRevealedState] = React.useState(false);
+  const revealed = revealedProp ?? revealedState;
+  const [checking, setChecking] = React.useState(false);
+  const [copied, setCopied] = React.useState(false);
+  const disabled = !!disabledReason;
+  const level = useResolvedMotion(motion, "secret-field");
+  const pop = React.useRef(new Animated.Value(1)).current;
+  const invalid = error !== void 0 && error !== false;
+  const setRevealed = React.useCallback(
+    (next) => {
+      if (revealedProp === void 0) setRevealedState(next);
+      onRevealedChange?.(next);
+    },
+    [revealedProp, onRevealedChange]
+  );
+  const hideRef = React.useRef(() => setRevealed(false));
+  hideRef.current = () => setRevealed(false);
+  React.useEffect(() => {
+    if (!revealed) return;
+    const timer = autoHide > 0 ? setTimeout(() => hideRef.current(), autoHide) : void 0;
+    const sub = AppState.addEventListener("change", (s) => s !== "active" && hideRef.current());
+    return () => {
+      clearTimeout(timer);
+      sub.remove();
+    };
+  }, [revealed, autoHide]);
+  React.useEffect(() => {
+    if (!copied) return;
+    const t = setTimeout(() => setCopied(false), 3e3);
+    return () => clearTimeout(t);
+  }, [copied]);
+  const reveal = async () => {
+    if (revealed) return setRevealed(false);
+    if (!onReveal) return setRevealed(true);
+    setChecking(true);
+    try {
+      if (await onReveal()) setRevealed(true);
+    } finally {
+      setChecking(false);
+    }
+  };
+  const copy = () => {
+    onCopy?.(value, { localOnly: true, expiresIn: SECRET_CLIPBOARD_TTL, sensitive: true });
+    setCopied(true);
+    announce(labels.copied);
+    if (level === "full") {
+      pop.setValue(0.6);
+      Animated.spring(pop, {
+        ...springConfig(theme, "de"),
+        toValue: 1,
+        useNativeDriver: true
+      }).start();
+    }
+  };
+  const shown = copyOnly || revealed ? value : maskSecret(value, keepStart, keepEnd);
+  const hintText = disabledReason ? disabledReason : checking ? labels.checking : copied ? labels.copied : revealed && !copyOnly ? labels.hidesAgain : hint;
+  const glyph = theme.icon.md;
+  const actionTier = ACTION_TIER[size];
+  const actionBox = {
+    width: theme.ctl[actionTier],
+    height: theme.ctl[actionTier],
+    borderRadius: theme.ctl.r[actionTier]
+  };
+  const slop = os === "android" ? (theme.space[48] - theme.space[36]) / 2 : void 0;
+  return /* @__PURE__ */ jsxs(View, { style: styles.container, children: [
+    label != null && /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }),
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        testID,
+        style: [
+          styles.shell,
+          {
+            height: theme.ctl[size],
+            borderRadius: theme.ctl.r[size]
+          },
+          { backgroundColor: fieldSurfaceFill(theme, surface) },
+          invalid && { borderColor: theme.edge.danger },
+          success && !invalid && { borderColor: theme.edge.good }
+        ],
+        ...invalid ? { "aria-invalid": true } : null,
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              testID: testID ? `${testID}-value` : void 0,
+              style: styles.value,
+              numberOfLines: 1,
+              ellipsizeMode: "middle",
+              accessibilityLabel: revealed || copyOnly ? void 0 : label,
+              children: shown
+            }
+          ),
+          !copyOnly && /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: revealed ? labels.hide : labels.reveal,
+              accessibilityState: {
+                selected: revealed,
+                disabled: disabled || checking,
+                busy: checking
+              },
+              disabled: disabled || checking,
+              hitSlop: slop,
+              onPress: () => void reveal(),
+              style: ({ pressed }) => [
+                styles.action,
+                actionBox,
+                revealed && { backgroundColor: theme.state.selected },
+                pressed && { backgroundColor: theme.state.pressed },
+                disabled && { opacity: theme.state.disabledOpacity }
+              ],
+              children: checking ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.color.accentStrong }) : /* @__PURE__ */ jsx(Icon, { name: revealed ? "eye-off" : "eye", size: glyph, color: theme.color.text2 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.copy,
+              accessibilityState: { disabled },
+              disabled,
+              hitSlop: slop,
+              onPress: copy,
+              style: ({ pressed }) => [
+                styles.action,
+                actionBox,
+                pressed && { backgroundColor: theme.state.pressed },
+                disabled && { opacity: theme.state.disabledOpacity }
+              ],
+              children: /* @__PURE__ */ jsx(Animated.View, { style: { transform: [{ scale: copied ? pop : 1 }] }, children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: copied ? "check" : "copy",
+                  size: glyph,
+                  color: copied ? theme.color.good : theme.color.text2
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    ),
+    typeof error === "string" && error && !disabledReason ? /* @__PURE__ */ jsx(View, { accessibilityRole: "alert", children: /* @__PURE__ */ jsx(FieldMessage, { invalid: true, children: error }) }) : hintText != null && /* @__PURE__ */ jsx(Text, { accessibilityLiveRegion: "polite", style: styles.hint, children: hintText })
+  ] });
+}
+var CODE_FONT = { sm: 22, md: 28, lg: 32 };
+function clock(s) {
+  const v = Math.max(0, Math.ceil(s));
+  return `${Math.floor(v / 60)}:${String(v % 60).padStart(2, "0")}`;
+}
+function CodeDisplay({
+  code,
+  group = 3,
+  expiresIn,
+  lifetime = 60,
+  expired,
+  onCopy,
+  size = "md",
+  surface,
+  error,
+  disabled,
+  readOnly,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet, { os: "ios" });
+  const theme = useLoamTheme();
+  const labels = useLabels("secretFieldNative", DEFAULT_LABELS, labelsProp);
+  const shown = code.replace(new RegExp(`(.{${group}})(?=.)`, "g"), "$1 ");
+  const invalid = error !== void 0 && error !== false;
+  return /* @__PURE__ */ jsxs(View, { style: styles.codeWrap, children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [
+          styles.code,
+          surface && { backgroundColor: fieldSurfaceFill(theme, surface) },
+          invalid && {
+            borderWidth: theme.borderWidth.thick,
+            borderColor: theme.edge.danger
+          },
+          disabled && { opacity: theme.state.disabledOpacity }
+        ],
+        ...invalid ? { "aria-invalid": true } : null,
+        ...disabled ? { "aria-disabled": true } : null,
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                styles.codeText,
+                {
+                  fontSize: theme.fontSize[CODE_FONT[size]],
+                  letterSpacing: theme.fontSize[CODE_FONT[size]] * 0.06
+                },
+                expired && styles.codeExpired
+              ],
+              children: shown
+            }
+          ),
+          expired ? /* @__PURE__ */ jsx(View, { style: styles.badge, children: /* @__PURE__ */ jsx(Text, { style: styles.badgeText, children: labels.expired }) }) : onCopy && !readOnly ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.copy,
+              accessibilityState: { disabled: !!disabled },
+              disabled,
+              onPress: () => onCopy(code),
+              style: ({ pressed }) => [
+                styles.action,
+                pressed && { backgroundColor: theme.state.pressed }
+              ],
+              children: /* @__PURE__ */ jsx(Icon, { name: "copy", size: theme.icon.md, color: theme.color.text2 })
+            }
+          ) : null
+        ]
+      }
+    ),
+    typeof error === "string" && error ? /* @__PURE__ */ jsx(View, { accessibilityRole: "alert", children: /* @__PURE__ */ jsx(FieldMessage, { invalid: true, children: error }) }) : null,
+    expiresIn != null && !expired && /* @__PURE__ */ jsxs(View, { style: styles.expiry, children: [
+      /* @__PURE__ */ jsx(View, { style: styles.bar, children: /* @__PURE__ */ jsx(
+        View,
+        {
+          style: [styles.barFill, { width: `${Math.min(100, expiresIn / lifetime * 100)}%` }]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Text, { accessibilityRole: "timer", style: styles.expiryText, children: labels.expiresIn.replace("{time}", clock(expiresIn)) })
+    ] })
+  ] });
+}
+function OneTimeSecret({
+  value,
+  title,
+  label,
+  onDone,
+  onCopy,
+  density,
+  size,
+  surface,
+  error,
+  readOnly = false,
+  loading = false,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const { styles } = useStyles(sheet, { os: "ios" });
+  const theme = useLoamTheme();
+  const labels = useLabels("secretFieldNative", DEFAULT_LABELS, labelsProp);
+  const [acked, setAcked] = React.useState(false);
+  const [copied, setCopied] = React.useState(false);
+  const locked = !(acked || copied) || readOnly;
+  const gap = density === "compact" ? theme.space.s3 : density === "comfortable" ? theme.space.s5 : theme.space.s4;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      accessibilityState: { busy: loading },
+      style: [styles.oneTime, { gap }, style],
+      children: [
+        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.title, children: title }),
+        /* @__PURE__ */ jsx(Banner, { tone: "warn", message: labels.oneTimeWarning }),
+        loading ? /* @__PURE__ */ jsxs(View, { testID: testID ? `${testID}-loading` : void 0, style: styles.loadingBox, children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: theme.space[120] }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.ctl[size ?? "md"] })
+        ] }) : /* @__PURE__ */ jsx(
+          SecretField,
+          {
+            value,
+            label,
+            copyOnly: true,
+            size: size ?? "md",
+            surface,
+            error,
+            onCopy: (v, o) => {
+              setCopied(true);
+              onCopy?.(v, o);
+            },
+            labels: labelsProp
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            size: "sm",
+            label: labels.acknowledge,
+            checked: acked,
+            disabled: readOnly,
+            onCheckedChange: setAcked
+          }
+        ),
+        /* @__PURE__ */ jsx(View, { style: styles.doneRow, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "primary",
+            size: size ?? "md",
+            softDisabled: locked,
+            onPress: () => !locked && onDone(),
+            children: labels.done
+          }
+        ) })
+      ]
+    }
+  );
+}
+function RecoveryCodes({
+  codes,
+  fileName = "recovery-codes.txt",
+  onPrint,
+  onCopy,
+  onDownload,
+  size = "md",
+  surface = "raised",
+  error = false,
+  disabled = false,
+  readOnly = false,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const { styles } = useStyles(sheet, { os: "ios" });
+  const theme = useLoamTheme();
+  const labels = useLabels("secretFieldNative", DEFAULT_LABELS, labelsProp);
+  const items = codes.map((c) => typeof c === "string" ? { code: c } : c);
+  const text = items.map((c) => c.code).join("\n");
+  const invalid = error !== void 0 && error !== null && error !== false;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      accessibilityState: { disabled },
+      style: [styles.recovery, disabled && { opacity: theme.state.disabledOpacity }, style],
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.recoveryList,
+              { backgroundColor: fieldSurfaceFill(theme, surface) },
+              invalid && { borderColor: theme.edge.danger }
+            ],
+            ...invalid ? { "aria-invalid": true } : null,
+            children: items.map((c, i) => /* @__PURE__ */ jsxs(View, { style: styles.recoveryItem, children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: [
+                    styles.recoveryText,
+                    styles.recoveryIndex,
+                    { fontSize: theme.fontSize[RECOVERY_FONT[size]] }
+                  ],
+                  children: i + 1
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: [
+                    styles.recoveryText,
+                    { fontSize: theme.fontSize[RECOVERY_FONT[size]] },
+                    c.used && styles.recoveryUsed
+                  ],
+                  children: c.code
+                }
+              ),
+              c.used && /* @__PURE__ */ jsx(View, { style: styles.badge, children: /* @__PURE__ */ jsx(Text, { style: styles.badgeText, children: labels.used }) })
+            ] }, c.code))
+          }
+        ),
+        typeof error === "string" && error ? /* @__PURE__ */ jsx(View, { accessibilityRole: "alert", children: /* @__PURE__ */ jsx(FieldMessage, { invalid: true, children: error }) }) : null,
+        /* @__PURE__ */ jsxs(View, { style: styles.recoveryActions, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              leadingIcon: "copy",
+              disabled,
+              onPress: () => onCopy?.(text, { localOnly: true, expiresIn: SECRET_CLIPBOARD_TTL, sensitive: true }),
+              children: labels.copyAll
+            }
+          ),
+          onDownload && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              leadingIcon: "download",
+              disabled: disabled || readOnly,
+              onPress: () => onDownload(text, fileName),
+              children: labels.download
+            }
+          ),
+          onPrint && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              leadingIcon: "print",
+              disabled: disabled || readOnly,
+              onPress: onPrint,
+              children: labels.print
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var RECOVERY_FONT = { sm: 13, md: 14, lg: 16 };
+var sheet = createStyleSheet((theme) => ({
+  oneTime: {},
+  title: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[18],
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text
+  },
+  loadingBox: { gap: theme.space.s2 },
+  doneRow: { flexDirection: "row", justifyContent: "flex-end" },
+  recovery: { gap: theme.space.s3 },
+  recoveryList: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: theme.space.s4,
+    rowGap: theme.space.s2,
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  recoveryItem: {
+    width: "45%",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  recoveryText: {
+    fontFamily: theme.font.mono,
+    fontWeight: theme.fontWeight.medium,
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text
+  },
+  recoveryIndex: { color: theme.color.text3, minWidth: theme.space[14] },
+  recoveryUsed: { color: theme.color.text3, textDecorationLine: "line-through" },
+  recoveryActions: { flexDirection: "row", flexWrap: "wrap", gap: theme.space.s2 },
+  container: { gap: theme.space[6] },
+  label: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    variants: {
+      os: {
+        ios: { fontSize: theme.fontSize[13], fontWeight: theme.fontWeight.semibold },
+        android: { fontSize: theme.fontSize[14], fontWeight: theme.fontWeight.medium }
+      }
+    }
+  },
+  shell: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: theme.ctl.lg,
+    paddingStart: theme.space.s3,
+    paddingEnd: theme.space[4],
+    gap: theme.space[2],
+    borderRadius: theme.ctl.r.lg,
+    backgroundColor: theme.color.surface2,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.borderStrong
+  },
+  value: {
+    flex: 1,
+    fontFamily: theme.font.mono,
+    fontWeight: theme.fontWeight.regular,
+    color: theme.color.text,
+    variants: {
+      os: {
+        ios: { fontSize: theme.fontSize[15] },
+        android: { fontSize: theme.fontSize[14] }
+      }
+    }
+  },
+  action: {
+    width: theme.space[36],
+    height: theme.space[36],
+    borderRadius: theme.ctl.r.md,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  hint: { fontFamily: theme.font.sans, fontSize: theme.fontSize[12], color: theme.color.text3 },
+  codeWrap: { gap: theme.space.s2, alignSelf: "flex-start" },
+  code: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    paddingVertical: theme.space.s3,
+    paddingStart: theme.space.s4,
+    paddingEnd: theme.space.s2,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface2
+  },
+  codeText: {
+    fontFamily: theme.font.mono,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[28],
+    letterSpacing: theme.fontSize[28] * 0.06,
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text
+  },
+  codeExpired: { color: theme.color.text3 },
+  badge: {
+    height: theme.space[20],
+    paddingHorizontal: theme.space.s2,
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface2,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.neutral
+  },
+  badgeText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text2
+  },
+  expiry: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  bar: {
+    width: theme.space[120],
+    height: theme.space[4],
+    borderRadius: theme.space[2],
+    overflow: "hidden",
+    backgroundColor: theme.color.surface3
+  },
+  barFill: { height: "100%", backgroundColor: theme.color.accentStrong },
+  expiryText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text2
+  }
+}));
+
+export { CodeDisplay, OneTimeSecret, RecoveryCodes, SECRET_CLIPBOARD_TTL, SecretField, maskSecret };

package/dist/chunk-TH4PW2WU.js

@@ -0,0 +1,17 @@
+import { Platform } from 'react-native';
+
+// src/lib/state-layout.ts
+function isAndroidIdiom(theme, platform) {
+  if (platform) return platform === "android";
+  if (Platform.OS === "android") return true;
+  if (Platform.OS === "ios") return false;
+  return theme.platform === "Android";
+}
+function stateLayout(theme, layout, platform) {
+  const android = isAndroidIdiom(theme, platform);
+  const full = layout === "fullScreen";
+  const title = android ? full ? { fontSize: theme.fontSize[24], lineHeight: theme.space[32], fontWeight: theme.fontWeight.regular } : { fontSize: theme.fontSize[16], lineHeight: theme.space[24], fontWeight: theme.fontWeight.medium } : full ? { fontSize: theme.fontSize[22], lineHeight: theme.space[28], fontWeight: theme.fontWeight.bold } : { fontSize: theme.fontSize[17], lineHeight: theme.space[22], fontWeight: theme.fontWeight.semibold };
+  return { tile: full ? "hero" : "lg", button: full ? "lg" : "md", title };
+}
+
+export { isAndroidIdiom, stateLayout };

package/dist/chunk-TTQ24HQX.js

@@ -0,0 +1,12 @@
+// src/lib/clipboard.ts
+var registered = null;
+function setClipboard(clipboard) {
+  registered = clipboard;
+}
+function getClipboard() {
+  if (registered) return registered;
+  const nav = globalThis.navigator;
+  return nav?.clipboard ?? null;
+}
+
+export { getClipboard, setClipboard };

package/dist/chunk-TUACVJNG.js

@@ -0,0 +1,12 @@
+// src/lib/align.ts
+var FLEX_ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch"
+};
+function alignItemsStyle(align) {
+  return align ? { alignItems: FLEX_ALIGN[align] } : null;
+}
+
+export { alignItemsStyle };