@himakarinv/nativex 1.0.0

package/src/components/Offcanvas/index.ts

@@ -0,0 +1,13 @@
+export {
+  Offcanvas,
+  OffcanvasSize,
+  OffcanvasPosition,
+  DEFAULT_OFFCANVAS_SIZE,
+  offcanvasOpenOptions,
+} from './Offcanvas';
+export type {
+  OffcanvasProps,
+  OffcanvasFooterButton,
+  OffcanvasOpenConfig,
+  OffcanvasBackdrop,
+} from './Offcanvas';

package/src/components/PageHeader/PageHeader.tsx

@@ -0,0 +1,128 @@
+import type { ReactNode } from 'react';
+import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { borders, colors, spacing, typography } from '../../theme';
+
+export const PageHeaderSize = {
+  Small: 'sm',
+  Medium: 'md',
+  Large: 'lg',
+} as const;
+
+export type PageHeaderSize = (typeof PageHeaderSize)[keyof typeof PageHeaderSize];
+
+export type PageHeaderProps = {
+  title?: string;
+  subtitle?: string;
+  showDivider?: boolean;
+  size?: PageHeaderSize;
+  sticky?: boolean;
+  actions?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+const SIZE_PAD: Record<PageHeaderSize, { paddingVertical: number; paddingHorizontal: number; marginBottom: number }> =
+  {
+    sm: {
+      paddingVertical: spacing.sm,
+      paddingHorizontal: spacing.lg,
+      marginBottom: spacing.xl,
+    },
+    md: {
+      paddingVertical: spacing.md,
+      paddingHorizontal: spacing.lg,
+      marginBottom: spacing['3xl'],
+    },
+    lg: {
+      paddingVertical: spacing.lg,
+      paddingHorizontal: spacing.lg,
+      marginBottom: spacing['4xl'],
+    },
+  };
+
+export function PageHeader({
+  title,
+  subtitle,
+  showDivider = true,
+  size = PageHeaderSize.Medium,
+  sticky = false,
+  actions,
+  style,
+}: PageHeaderProps) {
+  const pad = SIZE_PAD[size];
+  const hasActions = Boolean(actions);
+
+  return (
+    <View
+      accessibilityRole="header"
+      style={[
+        styles.host,
+        { paddingVertical: pad.paddingVertical, paddingHorizontal: pad.paddingHorizontal, marginBottom: pad.marginBottom },
+        showDivider && styles.divider,
+        sticky && styles.sticky,
+        style,
+      ]}>
+      <View style={styles.row}>
+        {title ? (
+          <View style={styles.titleWrap}>
+            <Text style={styles.title}>{title}</Text>
+            {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
+          </View>
+        ) : (
+          <View style={styles.titleWrap} />
+        )}
+
+        {hasActions ? <View style={styles.actions}>{actions}</View> : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    width: '100%',
+    backgroundColor: colors.white,
+  },
+  row: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing.md,
+  },
+  divider: {
+    borderBottomWidth: borders.width.thin,
+    borderBottomColor: colors.borderSubtle,
+    borderStyle: borders.style.solid,
+  },
+  sticky: {
+    zIndex: 100,
+  },
+  titleWrap: {
+    flex: 1,
+    minWidth: 0,
+    gap: spacing.xs,
+  },
+  title: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.lg,
+    fontWeight: typography.fontWeight.bold,
+    lineHeight: Math.round(typography.fontSize.lg * typography.lineHeight.tight),
+    color: colors.text.strong,
+  },
+  subtitle: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.regular,
+    lineHeight: Math.round(typography.fontSize.sm * typography.lineHeight.normal),
+    color: colors.text.muted,
+  },
+  actions: {
+    flexDirection: 'row',
+    flexShrink: 0,
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: spacing.sm,
+  },
+});

package/src/components/PageHeader/index.ts

@@ -0,0 +1,2 @@
+export { PageHeader, PageHeaderSize } from './PageHeader';
+export type { PageHeaderProps } from './PageHeader';

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,540 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { borders, button as buttonTokens, colors, radius, spacing, typography } from '../../theme';
+import { Button, ButtonSize, ButtonVariant } from '../Button';
+import { Icon, IconName } from '../Icon';
+
+export const PaginationVariant = {
+  NumberedLink: 'numbered-link',
+  NumberedButton: 'numbered-button',
+  Segmented: 'segmented',
+  Simple: 'simple',
+  SimpleIcon: 'simple-icon',
+} as const;
+
+export type PaginationVariant = (typeof PaginationVariant)[keyof typeof PaginationVariant];
+
+export const SimpleLayout = {
+  InfoLeft: 'info-left',
+  InfoRight: 'info-right',
+  InfoCenter: 'info-center',
+} as const;
+
+export type SimpleLayout = (typeof SimpleLayout)[keyof typeof SimpleLayout];
+
+export const PageNumberShape = {
+  Circle: 'circle',
+  Square: 'square',
+} as const;
+
+export type PageNumberShape = (typeof PageNumberShape)[keyof typeof PageNumberShape];
+
+export const ArrowStyle = {
+  Plain: 'plain',
+  Outlined: 'outlined',
+} as const;
+
+export type ArrowStyle = (typeof ArrowStyle)[keyof typeof ArrowStyle];
+
+export type PaginationProps = {
+  page?: number;
+  pageSize?: number;
+  collectionSize?: number;
+  maxPages?: number;
+  variant?: PaginationVariant;
+  simpleLayout?: SimpleLayout;
+  pageNumberShape?: PageNumberShape;
+  arrowStyle?: ArrowStyle;
+  segmentedNavIconOnly?: boolean;
+  onPageChange?: (page: number) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const PREVIOUS_LABEL = 'Previous';
+const NEXT_LABEL = 'Next';
+const NAV_ICON_SIZE = 14;
+const PAGE_HIT = buttonTokens.minTouch;
+
+type PageSlot = { kind: 'page'; page: number } | { kind: 'ellipsis'; key: string };
+
+function totalPages(collectionSize: number, pageSize: number) {
+  return Math.max(1, Math.ceil(Math.max(1, collectionSize) / Math.max(1, pageSize)));
+}
+
+function clampPage(page: number, last: number) {
+  return Math.min(last, Math.max(1, Math.floor(page)));
+}
+
+function buildSlots(current: number, last: number, maxPages: number): PageSlot[] {
+  const windowSize = Math.max(1, Math.floor(maxPages));
+  if (last <= windowSize) {
+    return Array.from({ length: last }, (_, index) => ({ kind: 'page' as const, page: index + 1 }));
+  }
+  const half = Math.floor((windowSize - 1) / 2);
+  let start = Math.max(1, current - half);
+  let end = Math.min(last, start + windowSize - 1);
+  start = Math.max(1, end - windowSize + 1);
+  const slots: PageSlot[] = [];
+  if (start > 1) {
+    slots.push({ kind: 'ellipsis', key: 'start' });
+  }
+  for (let page = start; page <= end; page += 1) {
+    slots.push({ kind: 'page', page });
+  }
+  if (end < last) {
+    slots.push({ kind: 'ellipsis', key: 'end' });
+  }
+  return slots;
+}
+
+function barJustify(layout: SimpleLayout): ViewStyle['justifyContent'] {
+  if (layout === SimpleLayout.InfoLeft) {
+    return 'flex-start';
+  }
+  if (layout === SimpleLayout.InfoRight) {
+    return 'flex-end';
+  }
+  return 'center';
+}
+
+export function Pagination({
+  page = 1,
+  pageSize = 10,
+  collectionSize = 100,
+  maxPages = 5,
+  variant = PaginationVariant.NumberedLink,
+  simpleLayout = SimpleLayout.InfoCenter,
+  pageNumberShape = PageNumberShape.Circle,
+  arrowStyle = ArrowStyle.Plain,
+  segmentedNavIconOnly = false,
+  onPageChange,
+  style,
+}: PaginationProps) {
+  const last = totalPages(collectionSize, pageSize);
+  const [current, setCurrent] = useState(() => clampPage(page, last));
+
+  useEffect(() => {
+    setCurrent(clampPage(page, last));
+  }, [page, last]);
+
+  const slots = useMemo(() => buildSlots(current, last, maxPages), [current, last, maxPages]);
+  const isFirst = current <= 1;
+  const isLast = current >= last;
+  const pageInfo = `Page ${current} of ${last}`;
+  const showNavLabels = variant !== PaginationVariant.Segmented || !segmentedNavIconOnly;
+  const isSegmented = variant === PaginationVariant.Segmented;
+  const isNumbered =
+    variant === PaginationVariant.NumberedLink || variant === PaginationVariant.NumberedButton;
+
+  function goTo(next: number) {
+    const safe = clampPage(next, last);
+    if (safe === current) {
+      return;
+    }
+    setCurrent(safe);
+    onPageChange?.(safe);
+  }
+
+  const numbered = isNumbered || isSegmented ? (
+    <View
+      style={[
+        isSegmented && styles.segmentedAlign,
+        isSegmented && { justifyContent: barJustify(simpleLayout) },
+      ]}>
+      <View style={[styles.numberedRow, isSegmented && styles.segmentedFrame]}>
+        <NavControl
+          direction="prev"
+          disabled={isFirst}
+          showLabel={showNavLabels}
+          numberedButton={variant === PaginationVariant.NumberedButton}
+          segmented={isSegmented}
+          onPress={() => goTo(current - 1)}
+        />
+        {isSegmented ? (
+          <View style={styles.segmentedPages}>
+            {slots.map((slot) =>
+              slot.kind === 'ellipsis' ? (
+                <SegmentCell key={slot.key} label="…" disabled />
+              ) : (
+                <SegmentCell
+                  key={slot.page}
+                  label={String(slot.page)}
+                  active={slot.page === current}
+                  onPress={() => goTo(slot.page)}
+                />
+              ),
+            )}
+          </View>
+        ) : (
+          <ScrollView
+            horizontal
+            bounces={false}
+            showsHorizontalScrollIndicator={false}
+            style={styles.pagesScroller}
+            contentContainerStyle={[styles.pagesContent, { justifyContent: barJustify(simpleLayout) }]}>
+            {slots.map((slot) =>
+              slot.kind === 'ellipsis' ? (
+                <Text key={slot.key} style={styles.ellipsis}>
+                  …
+                </Text>
+              ) : (
+                <PageNumber
+                  key={slot.page}
+                  page={slot.page}
+                  active={slot.page === current}
+                  shape={pageNumberShape}
+                  onPress={() => goTo(slot.page)}
+                />
+              ),
+            )}
+          </ScrollView>
+        )}
+        <NavControl
+          direction="next"
+          disabled={isLast}
+          showLabel={showNavLabels}
+          numberedButton={variant === PaginationVariant.NumberedButton}
+          segmented={isSegmented}
+          onPress={() => goTo(current + 1)}
+        />
+      </View>
+    </View>
+  ) : null;
+
+  return (
+    <View accessibilityLabel="Pagination" style={[styles.host, style]}>
+      {numbered}
+
+      {variant === PaginationVariant.Simple ? (
+        <View
+          style={[
+            styles.simpleRow,
+            simpleLayout === SimpleLayout.InfoCenter && styles.simpleCenter,
+          ]}>
+          {simpleLayout === SimpleLayout.InfoLeft ? <Text style={styles.info}>{pageInfo}</Text> : null}
+          {simpleLayout === SimpleLayout.InfoCenter ? (
+            <>
+              <Button
+                label={PREVIOUS_LABEL}
+                variant={ButtonVariant.SecondaryGray}
+                size={ButtonSize.Medium}
+                disabled={isFirst}
+                onPress={() => goTo(current - 1)}
+              />
+              <Text style={[styles.info, styles.infoFlex]}>{pageInfo}</Text>
+              <Button
+                label={NEXT_LABEL}
+                variant={ButtonVariant.SecondaryGray}
+                size={ButtonSize.Medium}
+                disabled={isLast}
+                onPress={() => goTo(current + 1)}
+              />
+            </>
+          ) : (
+            <View style={styles.simpleControls}>
+              <Button
+                label={PREVIOUS_LABEL}
+                variant={ButtonVariant.SecondaryGray}
+                size={ButtonSize.Medium}
+                disabled={isFirst}
+                onPress={() => goTo(current - 1)}
+              />
+              <Button
+                label={NEXT_LABEL}
+                variant={ButtonVariant.SecondaryGray}
+                size={ButtonSize.Medium}
+                disabled={isLast}
+                onPress={() => goTo(current + 1)}
+              />
+            </View>
+          )}
+          {simpleLayout === SimpleLayout.InfoRight ? <Text style={styles.info}>{pageInfo}</Text> : null}
+        </View>
+      ) : null}
+
+      {variant === PaginationVariant.SimpleIcon ? (
+        <View style={[styles.iconNavHost, { justifyContent: barJustify(simpleLayout) }]}>
+          <View style={styles.iconNav}>
+            <Button
+              variant={arrowStyle === ArrowStyle.Outlined ? ButtonVariant.SecondaryGray : ButtonVariant.TertiaryGray}
+              size={arrowStyle === ArrowStyle.Outlined ? ButtonSize.Medium : ButtonSize.Small}
+              iconName={IconName.LeftArrow}
+              disabled={isFirst}
+              accessibilityLabel="Previous page"
+              onPress={() => goTo(current - 1)}
+            />
+            <Text style={styles.info}>{pageInfo}</Text>
+            <Button
+              variant={arrowStyle === ArrowStyle.Outlined ? ButtonVariant.SecondaryGray : ButtonVariant.TertiaryGray}
+              size={arrowStyle === ArrowStyle.Outlined ? ButtonSize.Medium : ButtonSize.Small}
+              iconName={IconName.RightArrow}
+              disabled={isLast}
+              accessibilityLabel="Next page"
+              onPress={() => goTo(current + 1)}
+            />
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function NavControl({
+  direction,
+  disabled,
+  showLabel,
+  numberedButton,
+  segmented,
+  onPress,
+}: {
+  direction: 'prev' | 'next';
+  disabled: boolean;
+  showLabel: boolean;
+  numberedButton: boolean;
+  segmented: boolean;
+  onPress: () => void;
+}) {
+  const isPrev = direction === 'prev';
+  const label = isPrev ? PREVIOUS_LABEL : NEXT_LABEL;
+  const icon = isPrev ? IconName.LeftArrow : IconName.RightArrow;
+  const color = disabled ? colors.pagination.disabled : colors.pagination.navText;
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={isPrev ? 'Previous page' : 'Next page'}
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      hitSlop={spacing.sm}
+      onPress={onPress}
+      style={[
+        styles.navLink,
+        numberedButton && styles.navLinkButton,
+        segmented && styles.navLinkSegmented,
+        segmented && direction === 'next' && styles.navLinkSegmentedLast,
+        !showLabel && styles.navLinkIconOnly,
+      ]}>
+      {isPrev ? <Icon name={icon} size={NAV_ICON_SIZE} color={color} decorative /> : null}
+      {showLabel ? <Text style={[styles.navLabel, { color }]}>{label}</Text> : null}
+      {!isPrev ? <Icon name={icon} size={NAV_ICON_SIZE} color={color} decorative /> : null}
+    </Pressable>
+  );
+}
+
+function PageNumber({
+  page,
+  active,
+  shape,
+  onPress,
+}: {
+  page: number;
+  active: boolean;
+  shape: PageNumberShape;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={`Page ${page}`}
+      accessibilityState={{ selected: active }}
+      onPress={onPress}
+      hitSlop={spacing.sm}
+      style={[
+        styles.pageHit,
+        shape === PageNumberShape.Circle ? styles.pageCircle : styles.pageSquare,
+        active && styles.pageActive,
+      ]}>
+      <Text style={[styles.pageLabel, active && styles.pageLabelActive]}>{page}</Text>
+    </Pressable>
+  );
+}
+
+function SegmentCell({
+  label,
+  active = false,
+  disabled = false,
+  onPress,
+}: {
+  label: string;
+  active?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+}) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label === '…' ? 'More pages' : `Page ${label}`}
+      accessibilityState={{ selected: active, disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      style={[styles.segmentCell, active && styles.segmentCellActive]}>
+      <Text style={[styles.segmentLabel, active && styles.segmentLabelActive]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    width: '100%',
+    paddingVertical: spacing.md,
+  },
+  numberedRow: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  pagesScroller: {
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+  pagesContent: {
+    flexGrow: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.sm,
+  },
+  segmentedAlign: {
+    width: '100%',
+    flexDirection: 'row',
+  },
+  navLink: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 0,
+    gap: spacing.sm,
+    minHeight: PAGE_HIT,
+    paddingHorizontal: spacing.xs,
+  },
+  navLinkButton: {
+    paddingHorizontal: spacing.base,
+    backgroundColor: colors.pagination.background,
+    borderWidth: borders.width.thin,
+    borderColor: colors.pagination.border,
+    borderRadius: radius.sm,
+  },
+  navLinkSegmented: {
+    paddingHorizontal: spacing.md,
+    minHeight: spacing['4xl'] + spacing.sm,
+    borderRightWidth: borders.width.thin,
+    borderRightColor: colors.pagination.segmentedDivider,
+  },
+  navLinkSegmentedLast: {
+    borderRightWidth: borders.width.none,
+  },
+  navLinkIconOnly: {
+    paddingHorizontal: spacing.sm,
+  },
+  navLabel: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.large,
+  },
+  pageHit: {
+    width: spacing['5xl'],
+    height: spacing['5xl'],
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pageCircle: {
+    borderRadius: radius.full,
+  },
+  pageSquare: {
+    borderRadius: radius.md,
+  },
+  pageActive: {
+    backgroundColor: colors.pagination.activeBg,
+  },
+  pageLabel: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.large,
+    color: colors.pagination.inactiveNumber,
+  },
+  pageLabelActive: {
+    color: colors.primary.darker,
+  },
+  ellipsis: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.large,
+    color: colors.pagination.inactiveNumber,
+    paddingHorizontal: spacing.xs,
+  },
+  segmentedFrame: {
+    alignSelf: 'center',
+    alignItems: 'stretch',
+    width: 'auto',
+    maxWidth: '100%',
+    gap: spacing.none,
+    borderWidth: borders.width.thin,
+    borderColor: colors.pagination.segmentedDivider,
+    borderRadius: radius.md,
+    overflow: 'hidden',
+    backgroundColor: colors.pagination.background,
+  },
+  segmentedPages: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+  },
+  segmentCell: {
+    minWidth: spacing['4xl'] + spacing.sm,
+    minHeight: spacing['4xl'] + spacing.sm,
+    paddingHorizontal: spacing.sm,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRightWidth: borders.width.thin,
+    borderRightColor: colors.pagination.segmentedDivider,
+    backgroundColor: colors.pagination.background,
+  },
+  segmentCellActive: {
+    backgroundColor: colors.pagination.segmentedActiveBg,
+  },
+  segmentLabel: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.large,
+    color: colors.pagination.segmentedNumber,
+  },
+  segmentLabelActive: {
+    color: colors.pagination.segmentedActiveText,
+  },
+  simpleRow: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing.base,
+  },
+  simpleCenter: {
+    justifyContent: 'space-between',
+  },
+  simpleControls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  iconNavHost: {
+    width: '100%',
+    flexDirection: 'row',
+  },
+  iconNav: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.base,
+    maxWidth: '100%',
+  },
+  info: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.large,
+    color: colors.pagination.button,
+    paddingHorizontal: spacing.md,
+  },
+  infoFlex: {
+    flex: 1,
+    textAlign: 'center',
+  },
+});

package/src/components/Pagination/index.ts

@@ -0,0 +1,8 @@
+export {
+  Pagination,
+  PaginationVariant,
+  SimpleLayout,
+  PageNumberShape,
+  ArrowStyle,
+} from './Pagination';
+export type { PaginationProps } from './Pagination';