@opndev/react-native-events 0.0.13 → 0.0.14

package/Changes

@@ -1,5 +1,10 @@
 Revision history for @opndev/opndev-react-native-events
 
+0.0.14       2026-06-26 04:53:23Z
+
+  * Add Panel instead of a Tile, Tiles are more buttony thing. Panels are
+    panels. ha.
+
 0.0.13       2026-06-26 03:59:55Z
 
   * Update news item segment to be included as a widget.

package/lib/components/panel.jsx

@@ -0,0 +1,65 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
+import React from 'react';
+import { View, Pressable, StyleSheet } from 'react-native';
+
+const defaultStyle = StyleSheet.create({
+  surface: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  content: {
+    padding: 16,
+  },
+});
+
+/**
+ * Panel
+ *
+ * Simple rounded-corner surface that sizes to its content. Unlike
+ * Tile (built for a centered icon+label grid cell with flex: 1),
+ * Panel imposes no layout assumptions on its children at all — no
+ * forced centering, no forced flex sizing — so content-driven
+ * widgets (lists, text blocks, NewsWidget, etc.) render exactly as
+ * they would un-wrapped, just inside a rounded/backgrounded card.
+ *
+ * @param {object} props
+ * @param {React.ReactNode} props.children
+ * @param {string} [props.backgroundColor]
+ * @param {Function} [props.onPress] If provided, the whole panel becomes pressable.
+ * @param {object} [props.style] Style for the outer rounded surface.
+ * @param {object} [props.contentStyle] Style for the inner content wrapper (default padding: 16).
+ *
+ * @returns {JSX.Element}
+ */
+export default function Panel({
+  children,
+  backgroundColor,
+  onPress,
+  style,
+  contentStyle,
+}) {
+  const surfaceStyle = [
+    defaultStyle.surface,
+    backgroundColor ? { backgroundColor } : null,
+    style,
+  ];
+
+  const content = (
+    <View style={[defaultStyle.content, contentStyle]}>
+      {children}
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable onPress={onPress} style={surfaceStyle}>
+        {content}
+      </Pressable>
+    );
+  }
+
+  return <View style={surfaceStyle}>{content}</View>;
+}

package/lib/components.js

@@ -11,6 +11,7 @@ export { default as Tile } from './components/tile.jsx';
 export { default as GradientTile } from './components/gradient-tile.jsx';
 export { default as QRCodeForm } from './components/qr-code-form.jsx';
 export { default as ScaledLogo } from './components/scaled-logo.jsx';
+export { default as Panel } from './components/panel.jsx';
 
 export { openUrl, openApp, openExternal } from './utils/launch.js';
 

package/lib/index.js

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
 
-const VERSION = "0.0.13";
+const VERSION = "0.0.14";
 
 // TODO: @opndev/util?
 export { formatPrice } from './utils/format-price.js';

package/lib/widgets/news-widget.jsx

@@ -1,3 +1,7 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesleys@opperschaap.net>
+//
+// SPDX-License-Identifier: GPL-3.0-or-later WITH LicenseRef-OPNDEV-exceptions
+
 import React, {
   forwardRef,
   useEffect,
@@ -22,6 +26,12 @@ const defaultStyle = StyleSheet.create({
   title: {
     fontWeight: '700',
   },
+  divider: {
+    height: 1,
+    backgroundColor: 'rgba(0,0,0,0.15)',
+    marginTop: 4,
+    marginBottom: 4,
+  },
   item: {
     flexDirection: 'row',
     gap: 8,
@@ -59,6 +69,8 @@ const defaultStyle = StyleSheet.create({
  * @param {string} [props.bearerToken]
  * @param {number} [props.limit] Max items shown. Defaults to 4.
  * @param {string} [props.title] Defaults to 'News'.
+ * @param {boolean} [props.showDivider] Thin line under the title, like 'News' / '-----'. Defaults to true. Ignored if title is falsy.
+ * @param {object} [props.dividerStyle]
  * @param {React.ComponentType} [props.TextComponent] Defaults to Text.
  * @param {Function} [props.onPressItem]
  * @param {number} [props.refreshIntervalMs] Defaults to 15 minutes.
@@ -79,6 +91,8 @@ const NewsWidget = forwardRef(function NewsWidget(
     bearerToken,
     limit = 4,
     title = 'News',
+    showDivider = true,
+    dividerStyle,
     TextComponent = Text,
     onPressItem,
     refreshIntervalMs = 15 * 60 * 1000,
@@ -142,6 +156,10 @@ const NewsWidget = forwardRef(function NewsWidget(
         </TextComponent>
       ) : null}
 
+      {title && showDivider ? (
+        <View style={[defaultStyle.divider, dividerStyle]} />
+      ) : null}
+
       {loading ? <ActivityIndicator /> : null}
 
       {!loading && error ? (
@@ -169,3 +187,4 @@ const NewsWidget = forwardRef(function NewsWidget(
 });
 
 export default NewsWidget;
+

package/package.json

@@ -34,5 +34,5 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "0.0.13"
+  "version": "0.0.14"
 }