achery-ui 0.17.1 → 0.18.0

package/dist/native/index.cjs

@@ -5868,6 +5868,125 @@ var StyleSheet3 = {
     bottom: 0
   }
 };
+var ADAPTIVE_PANEL_BREAKPOINT = 900;
+var AdaptivePanel = ({
+  open,
+  onClose,
+  title,
+  showClose = false,
+  children,
+  width = 340,
+  side = "right",
+  breakpoint = ADAPTIVE_PANEL_BREAKPOINT,
+  maxContentHeight,
+  avoidKeyboard = true,
+  style
+}) => {
+  const { tokens: tokens$1 } = useTheme();
+  const { width: windowWidth } = reactNative.useWindowDimensions();
+  const docked = windowWidth >= breakpoint;
+  if (!docked) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BottomSheet,
+      {
+        open,
+        onClose,
+        showClose,
+        avoidKeyboard,
+        ...title !== void 0 && { title },
+        ...maxContentHeight !== void 0 && { maxContentHeight },
+        ...style !== void 0 && { style },
+        children
+      }
+    );
+  }
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: [
+        {
+          width,
+          flexShrink: 0,
+          backgroundColor: tokens$1.surface,
+          // The rule sits on the edge facing the content it displaces.
+          borderLeftWidth: side === "right" ? 2 : 0,
+          borderRightWidth: side === "left" ? 2 : 0,
+          borderLeftColor: tokens$1.border,
+          borderRightColor: tokens$1.border
+        },
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          reactNative.View,
+          {
+            style: {
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+              paddingHorizontal: tokens.spacing.sp6,
+              paddingVertical: tokens.spacing.sp4,
+              borderBottomWidth: 1,
+              borderBottomColor: tokens$1.borderMute,
+              minHeight: 44
+            },
+            children: [
+              title ? /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.Text,
+                {
+                  style: {
+                    fontSize: 10,
+                    fontWeight: tokens.fontWeights.semibold.toString(),
+                    letterSpacing: 1.6,
+                    textTransform: "uppercase",
+                    color: tokens$1.fg3
+                  },
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.TouchableOpacity,
+                {
+                  onPress: onClose,
+                  hitSlop: { top: 12, bottom: 12, left: 12, right: 12 },
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Close",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    reactNative.Text,
+                    {
+                      style: {
+                        fontSize: 11,
+                        fontWeight: tokens.fontWeights.semibold.toString(),
+                        letterSpacing: 0.5,
+                        color: tokens$1.fg3,
+                        textTransform: "uppercase"
+                      },
+                      children: "\u2715"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.ScrollView,
+          {
+            style: { flex: 1 },
+            showsVerticalScrollIndicator: false,
+            keyboardShouldPersistTaps: "handled",
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+var useIsPanelDocked = (breakpoint = ADAPTIVE_PANEL_BREAKPOINT) => {
+  const { width } = reactNative.useWindowDimensions();
+  return width >= breakpoint;
+};
 var BAR_HEIGHT = 56;
 var MAX_VISIBLE = 4;
 var BottomTabBar = ({
@@ -6156,6 +6275,8 @@ var styles = reactNative.StyleSheet.create({
   suggestion: { borderWidth: 1, paddingHorizontal: 8, paddingVertical: 4 }
 });
 
+exports.ADAPTIVE_PANEL_BREAKPOINT = ADAPTIVE_PANEL_BREAKPOINT;
+exports.AdaptivePanel = AdaptivePanel;
 exports.Badge = Badge;
 exports.BottomSheet = BottomSheet;
 exports.BottomTabBar = BottomTabBar;
@@ -6188,6 +6309,7 @@ exports.Toggle = Toggle;
 exports.glyphCategory = glyphCategory;
 exports.glyphLabel = glyphLabel;
 exports.searchGlyphs = searchGlyphs;
+exports.useIsPanelDocked = useIsPanelDocked;
 exports.useTheme = useTheme;
 exports.useToast = useToast;
 //# sourceMappingURL=index.cjs.map