@sudobility/components-rn 1.0.18 → 1.0.19

package/dist/ui/AspectFitView/AspectFitView.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export interface AspectFitViewProps {
+    /** Aspect ratio as width / height (e.g. 16/9) */
+    aspectRatio: number;
+    /** Content to render inside the aspect ratio container */
+    children: React.ReactNode;
+    /** Additional className for the outer container */
+    className?: string;
+    /** Additional className for the inner aspect ratio box */
+    innerClassName?: string;
+}
+/**
+ * AspectFitView - A container that maintains a fixed aspect ratio using AspectFit behavior.
+ *
+ * The inner box scales to be as large as possible while fitting entirely within
+ * the parent, constrained by both width and height. Content that overflows
+ * the box is scrollable. The box is horizontally centered.
+ *
+ * @example
+ * ```tsx
+ * <AspectFitView aspectRatio={16 / 9}>
+ *   <MyContent />
+ * </AspectFitView>
+ * ```
+ */
+export declare const AspectFitView: React.FC<AspectFitViewProps>;
+//# sourceMappingURL=AspectFitView.d.ts.map

package/dist/ui/AspectFitView/AspectFitView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AspectFitView.d.ts","sourceRoot":"","sources":["../../../src/ui/AspectFitView/AspectFitView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,kBAAkB;IACjC,iDAAiD;IACjD,WAAW,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2CtD,CAAC"}

package/dist/ui/AspectFitView/index.d.ts

@@ -0,0 +1,2 @@
+export { AspectFitView, type AspectFitViewProps } from './AspectFitView';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/AspectFitView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/AspectFitView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/components-rn",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "React Native UI components and design system - Ported from @sudobility/components",
   "type": "module",
   "main": "dist/index.js",

package/src/index.ts

@@ -75,6 +75,7 @@ export * from './ui/NavigationList';
 // UI Components - Patterns
 export * from './ui/Dropdown';
 export * from './ui/AspectRatio';
+export * from './ui/AspectFitView';
 export * from './ui/QuickActions';
 export * from './ui/EmptyState';
 

package/src/ui/AspectFitView/AspectFitView.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { View, ScrollView } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface AspectFitViewProps {
+  /** Aspect ratio as width / height (e.g. 16/9) */
+  aspectRatio: number;
+  /** Content to render inside the aspect ratio container */
+  children: React.ReactNode;
+  /** Additional className for the outer container */
+  className?: string;
+  /** Additional className for the inner aspect ratio box */
+  innerClassName?: string;
+}
+
+/**
+ * AspectFitView - A container that maintains a fixed aspect ratio using AspectFit behavior.
+ *
+ * The inner box scales to be as large as possible while fitting entirely within
+ * the parent, constrained by both width and height. Content that overflows
+ * the box is scrollable. The box is horizontally centered.
+ *
+ * @example
+ * ```tsx
+ * <AspectFitView aspectRatio={16 / 9}>
+ *   <MyContent />
+ * </AspectFitView>
+ * ```
+ */
+export const AspectFitView: React.FC<AspectFitViewProps> = ({
+  aspectRatio,
+  children,
+  className,
+  innerClassName,
+}) => {
+  const [size, setSize] = React.useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+
+  const onLayout = React.useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setSize({ width, height });
+  }, []);
+
+  // Calculate AspectFit dimensions
+  let innerWidth = 0;
+  let innerHeight = 0;
+  if (size) {
+    const parentRatio = size.width / size.height;
+    if (aspectRatio > parentRatio) {
+      // Width-constrained
+      innerWidth = size.width;
+      innerHeight = size.width / aspectRatio;
+    } else {
+      // Height-constrained
+      innerHeight = size.height;
+      innerWidth = size.height * aspectRatio;
+    }
+  }
+
+  return (
+    <View className={cn('flex-1', className)} onLayout={onLayout}>
+      {size && (
+        <View className={cn('items-center', innerClassName)}>
+          <ScrollView style={{ width: innerWidth, height: innerHeight }}>
+            {children}
+          </ScrollView>
+        </View>
+      )}
+    </View>
+  );
+};

package/src/ui/AspectFitView/index.ts

@@ -0,0 +1 @@
+export { AspectFitView, type AspectFitViewProps } from './AspectFitView';