@onlynative/components 0.1.0-alpha.0

package/dist/layout/index.d.ts

@@ -0,0 +1,98 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { StyleProp, ViewStyle, ViewProps, FlexAlignType } from 'react-native';
+import { Edge } from 'react-native-safe-area-context';
+import { Theme } from '@onlynative/core';
+
+interface LayoutProps extends PropsWithChildren {
+    /**
+     * When `true`, removes all safe area insets for full-screen layout.
+     * @default false
+     */
+    immersive?: boolean;
+    /** Explicit set of safe-area edges to apply. Overrides `immersive` when provided. */
+    edges?: Edge[];
+    /** Additional styles applied to the SafeAreaView container. */
+    style?: StyleProp<ViewStyle>;
+}
+declare function Layout({ immersive, edges, children, style }: LayoutProps): react_jsx_runtime.JSX.Element;
+
+/** A theme spacing token name or a raw numeric value in dp. */
+type SpacingValue = keyof Theme['spacing'] | number;
+interface BoxProps extends ViewProps {
+    /** Padding on all sides */
+    p?: SpacingValue;
+    /** Horizontal padding (paddingStart + paddingEnd) */
+    px?: SpacingValue;
+    /** Vertical padding (paddingTop + paddingBottom) */
+    py?: SpacingValue;
+    /** Padding top */
+    pt?: SpacingValue;
+    /** Padding bottom */
+    pb?: SpacingValue;
+    /** Padding start (left in LTR, right in RTL) */
+    ps?: SpacingValue;
+    /** Padding end (right in LTR, left in RTL) */
+    pe?: SpacingValue;
+    /** Margin on all sides */
+    m?: SpacingValue;
+    /** Horizontal margin (marginStart + marginEnd) */
+    mx?: SpacingValue;
+    /** Vertical margin (marginTop + marginBottom) */
+    my?: SpacingValue;
+    /** Margin top */
+    mt?: SpacingValue;
+    /** Margin bottom */
+    mb?: SpacingValue;
+    /** Margin start */
+    ms?: SpacingValue;
+    /** Margin end */
+    me?: SpacingValue;
+    /** Gap between children */
+    gap?: SpacingValue;
+    /** Row gap between children */
+    rowGap?: SpacingValue;
+    /** Column gap between children */
+    columnGap?: SpacingValue;
+    /** Flex value */
+    flex?: number;
+    /** Align items along the cross axis */
+    align?: FlexAlignType;
+    /** Justify content along the main axis */
+    justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+    /** Background color */
+    bg?: string;
+}
+interface RowProps extends BoxProps {
+    /**
+     * Whether children should wrap to the next line when they overflow.
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Reverses the layout direction (`row-reverse`).
+     * @default false
+     */
+    inverted?: boolean;
+}
+interface ColumnProps extends BoxProps {
+    /**
+     * Reverses the layout direction (`column-reverse`).
+     * @default false
+     */
+    inverted?: boolean;
+}
+interface GridProps extends RowProps {
+    /** Number of equal-width columns. */
+    columns: number;
+}
+
+declare function Box({ p, px, py, pt, pb, ps, pe, m, mx, my, mt, mb, ms, me, gap, rowGap, columnGap, flex, align, justify, bg, style, ...viewProps }: BoxProps): react_jsx_runtime.JSX.Element;
+
+declare function Column({ inverted, style, ...boxProps }: ColumnProps): react_jsx_runtime.JSX.Element;
+
+declare function Grid({ columns, gap, columnGap, rowGap, children, style, ...rowProps }: GridProps): react_jsx_runtime.JSX.Element;
+
+declare function Row({ wrap, inverted, style, ...boxProps }: RowProps): react_jsx_runtime.JSX.Element;
+
+export { Box, type BoxProps, Column, type ColumnProps, Grid, type GridProps, Layout, type LayoutProps, Row, type RowProps, type SpacingValue };

package/dist/layout/index.js

@@ -0,0 +1,282 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/layout/index.ts
+var layout_exports = {};
+__export(layout_exports, {
+  Box: () => Box,
+  Column: () => Column,
+  Grid: () => Grid,
+  Layout: () => Layout,
+  Row: () => Row
+});
+module.exports = __toCommonJS(layout_exports);
+
+// src/layout/Layout.tsx
+var import_react = require("react");
+var import_react_native = require("react-native");
+var import_react_native_safe_area_context = require("react-native-safe-area-context");
+var import_core = require("@onlynative/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultEdges = ["bottom"];
+function resolveEdges(immersive, edges) {
+  if (edges) {
+    return edges;
+  }
+  if (immersive) {
+    return [];
+  }
+  return defaultEdges;
+}
+var styles = import_react_native.StyleSheet.create({
+  root: {
+    flex: 1
+  }
+});
+function removeBackgroundColor(style) {
+  if (!style) {
+    return void 0;
+  }
+  const flattenedStyle = import_react_native.StyleSheet.flatten(style);
+  if (!flattenedStyle || flattenedStyle.backgroundColor === void 0) {
+    return style;
+  }
+  const styleWithoutBackground = { ...flattenedStyle };
+  delete styleWithoutBackground.backgroundColor;
+  return styleWithoutBackground;
+}
+function Layout({ immersive, edges, children, style }) {
+  const theme = (0, import_core.useTheme)();
+  const themeBackgroundStyle = (0, import_react.useMemo)(
+    () => ({ backgroundColor: theme.colors.background }),
+    [theme.colors.background]
+  );
+  const styleWithoutBackground = (0, import_react.useMemo)(
+    () => removeBackgroundColor(style),
+    [style]
+  );
+  const safeAreaEdges = (0, import_react.useMemo)(
+    () => resolveEdges(immersive, edges),
+    [immersive, edges]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native_safe_area_context.SafeAreaView,
+    {
+      style: [styles.root, themeBackgroundStyle, styleWithoutBackground],
+      edges: safeAreaEdges,
+      children
+    }
+  );
+}
+
+// src/layout/Box.tsx
+var import_react2 = require("react");
+var import_react_native2 = require("react-native");
+var import_core2 = require("@onlynative/core");
+
+// src/layout/resolveSpacing.ts
+function resolveSpacing(spacing, value) {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return value;
+  return spacing[value];
+}
+
+// src/layout/Box.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Box({
+  p,
+  px,
+  py,
+  pt,
+  pb,
+  ps,
+  pe,
+  m,
+  mx,
+  my,
+  mt,
+  mb,
+  ms,
+  me,
+  gap,
+  rowGap,
+  columnGap,
+  flex,
+  align,
+  justify,
+  bg,
+  style,
+  ...viewProps
+}) {
+  const { spacing } = (0, import_core2.useTheme)();
+  const layoutStyle = (0, import_react2.useMemo)(() => {
+    const s = (v) => resolveSpacing(spacing, v);
+    return {
+      ...p !== void 0 && { padding: s(p) },
+      ...px !== void 0 && {
+        paddingStart: s(px),
+        paddingEnd: s(px)
+      },
+      ...py !== void 0 && {
+        paddingTop: s(py),
+        paddingBottom: s(py)
+      },
+      ...pt !== void 0 && { paddingTop: s(pt) },
+      ...pb !== void 0 && { paddingBottom: s(pb) },
+      ...ps !== void 0 && { paddingStart: s(ps) },
+      ...pe !== void 0 && { paddingEnd: s(pe) },
+      ...m !== void 0 && { margin: s(m) },
+      ...mx !== void 0 && {
+        marginStart: s(mx),
+        marginEnd: s(mx)
+      },
+      ...my !== void 0 && {
+        marginTop: s(my),
+        marginBottom: s(my)
+      },
+      ...mt !== void 0 && { marginTop: s(mt) },
+      ...mb !== void 0 && { marginBottom: s(mb) },
+      ...ms !== void 0 && { marginStart: s(ms) },
+      ...me !== void 0 && { marginEnd: s(me) },
+      ...gap !== void 0 && { gap: s(gap) },
+      ...rowGap !== void 0 && { rowGap: s(rowGap) },
+      ...columnGap !== void 0 && { columnGap: s(columnGap) },
+      ...flex !== void 0 && { flex },
+      ...align !== void 0 && { alignItems: align },
+      ...justify !== void 0 && { justifyContent: justify },
+      ...bg !== void 0 && { backgroundColor: bg }
+    };
+  }, [
+    spacing,
+    p,
+    px,
+    py,
+    pt,
+    pb,
+    ps,
+    pe,
+    m,
+    mx,
+    my,
+    mt,
+    mb,
+    ms,
+    me,
+    gap,
+    rowGap,
+    columnGap,
+    flex,
+    align,
+    justify,
+    bg
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { ...viewProps, style: [layoutStyle, style] });
+}
+
+// src/layout/Column.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Column({ inverted = false, style, ...boxProps }) {
+  const directionStyle = (0, import_react3.useMemo)(
+    () => ({
+      flexDirection: inverted ? "column-reverse" : "column"
+    }),
+    [inverted]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box, { ...boxProps, style: [directionStyle, style] });
+}
+
+// src/layout/Grid.tsx
+var import_react5 = __toESM(require("react"));
+var import_react_native3 = require("react-native");
+var import_core3 = require("@onlynative/core");
+
+// src/layout/Row.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Row({
+  wrap = false,
+  inverted = false,
+  style,
+  ...boxProps
+}) {
+  const directionStyle = (0, import_react4.useMemo)(
+    () => ({
+      flexDirection: inverted ? "row-reverse" : "row",
+      ...wrap && { flexWrap: "wrap" }
+    }),
+    [wrap, inverted]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { ...boxProps, style: [directionStyle, style] });
+}
+
+// src/layout/Grid.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Grid({
+  columns,
+  gap,
+  columnGap,
+  rowGap,
+  children,
+  style,
+  ...rowProps
+}) {
+  const { spacing } = (0, import_core3.useTheme)();
+  const resolvedColumnGap = resolveSpacing(spacing, columnGap != null ? columnGap : gap);
+  const resolvedRowGap = resolveSpacing(spacing, rowGap != null ? rowGap : gap);
+  const halfGap = resolvedColumnGap ? resolvedColumnGap / 2 : 0;
+  const cellStyle = (0, import_react5.useMemo)(
+    () => ({
+      flexBasis: `${100 / columns}%`,
+      flexShrink: 1,
+      paddingLeft: halfGap,
+      paddingRight: halfGap
+    }),
+    [columns, halfGap]
+  );
+  const rowStyle = (0, import_react5.useMemo)(
+    () => ({
+      marginLeft: -halfGap,
+      marginRight: -halfGap
+    }),
+    [halfGap]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { wrap: true, rowGap: resolvedRowGap, ...rowProps, style: [rowStyle, style], children: import_react5.default.Children.map(
+    children,
+    (child) => child != null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native3.View, { style: cellStyle, children: child }) : null
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Box,
+  Column,
+  Grid,
+  Layout,
+  Row
+});

package/dist/list/index.d.ts

@@ -0,0 +1,60 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { ViewProps, StyleProp, ViewStyle } from 'react-native';
+
+interface ListProps extends ViewProps {
+    /** Content rendered inside the list container. */
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/** Number of text lines the item displays, used to determine minimum height. */
+type ListItemLines = 1 | 2 | 3;
+interface ListItemProps extends ViewProps {
+    /** Primary text displayed on the list item. */
+    headlineText: string;
+    /** Secondary text displayed below the headline. */
+    supportingText?: string;
+    /** Text displayed above the headline (e.g. category label). */
+    overlineText?: string;
+    /** Short text displayed at the trailing edge (e.g. "100+", timestamp). */
+    trailingSupportingText?: string;
+    /** Content rendered before the text block (icon, avatar, image, checkbox). */
+    leadingContent?: ReactNode;
+    /** Content rendered after the text block (icon, switch, checkbox). */
+    trailingContent?: ReactNode;
+    /** When provided, the item becomes interactive (Pressable). Omit to render as a plain View. */
+    onPress?: () => void;
+    /**
+     * Disables the press interaction and reduces opacity. Only effective when `onPress` is provided.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Override the container (background) color.
+     * State-layer colors (hover, press) are derived automatically.
+     */
+    containerColor?: string;
+    /**
+     * Maximum number of lines for supportingText before truncating.
+     * @default 1
+     */
+    supportingTextNumberOfLines?: number;
+    style?: StyleProp<ViewStyle>;
+}
+interface ListDividerProps extends ViewProps {
+    /**
+     * When true, adds a leading inset so the divider aligns with text
+     * that follows a leading icon (56dp from the start edge).
+     * @default false
+     */
+    inset?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+
+declare function List({ children, style, ...props }: ListProps): react_jsx_runtime.JSX.Element;
+
+declare function ListItem({ headlineText, supportingText, overlineText, trailingSupportingText, leadingContent, trailingContent, onPress, disabled, containerColor, supportingTextNumberOfLines, style, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
+
+declare function ListDivider({ inset, style, ...props }: ListDividerProps): react_jsx_runtime.JSX.Element;
+
+export { List, ListDivider, type ListDividerProps, ListItem, type ListItemLines, type ListItemProps, type ListProps };