@compsych-ui-components/react-native 4.0.4 → 4.0.14

package/src/components/Pagination/index.js

@@ -0,0 +1,322 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Pagination", {
+    enumerable: true,
+    get: function() {
+        return Pagination;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactnative = require("react-native");
+const _vectoricons = require("@expo/vector-icons");
+const _theme = require("../../theme");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+// ── Pagination range logic ────────────────────────────────────────────────────
+function buildPageRange(total, current, siblings) {
+    // Always show: 1, last, current, siblings
+    const range = [];
+    if (total <= 1) return [
+        1
+    ];
+    const left = Math.max(2, current - siblings);
+    const right = Math.min(total - 1, current + siblings);
+    // First page
+    range.push(1);
+    // Left ellipsis
+    if (left > 2) range.push('...');
+    // Middle range
+    for(let i = left; i <= right; i++)range.push(i);
+    // Right ellipsis
+    if (right < total - 1) range.push('...');
+    // Last page
+    if (total > 1) range.push(total);
+    return range;
+}
+// ── Active ring wrapper ───────────────────────────────────────────────────────
+// Mirrors the 4px padding + sysPrimary08 background pattern from Input.
+const RING_SIZE = 4;
+function PageItem({ s, page, isActive, onPress, cr }) {
+    const borderWidth = isActive ? 1.5 : 0;
+    const borderColor = isActive ? cr.accent.primary.sysPrimary : 'transparent';
+    const textColor = isActive ? cr.custom.info.sysOnInfoContainer : cr.surface.surface.sysOnSurface;
+    const fontWeight = isActive ? s.activeWeight : s.inactiveWeight;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+        onPress: onPress,
+        accessibilityRole: "button",
+        accessibilityLabel: `Page ${page}`,
+        accessibilityState: {
+            selected: isActive
+        },
+        children: ({ pressed })=>// Ring wrapper — always RING_SIZE padding for layout stability;
+            // background only when active (or focused — handled via pressed state here)
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                style: {
+                    padding: RING_SIZE,
+                    borderRadius: s.itemSize / 2 + RING_SIZE,
+                    backgroundColor: isActive ? cr.transparent.primary.sysPrimary08 : 'transparent'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                    style: {
+                        width: s.itemSize,
+                        height: s.itemSize,
+                        borderRadius: s.itemSize / 2,
+                        borderWidth,
+                        borderColor,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        backgroundColor: pressed && !isActive ? cr.transparent.neutral.sysBlack10 : 'transparent'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                        style: {
+                            fontSize: s.fontSize,
+                            lineHeight: s.lineHeight,
+                            fontWeight,
+                            color: textColor,
+                            includeFontPadding: false
+                        },
+                        children: page
+                    })
+                })
+            })
+    });
+}
+function EllipsisItem({ s, cr }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+        accessible: true,
+        accessibilityLabel: "More pages",
+        style: {
+            width: s.itemSize + RING_SIZE * 2,
+            height: s.itemSize + RING_SIZE * 2,
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+            style: {
+                fontSize: s.fontSize,
+                lineHeight: s.lineHeight,
+                fontWeight: s.inactiveWeight,
+                color: cr.surface.surface.sysOnSurfaceVariant,
+                includeFontPadding: false
+            },
+            children: "…"
+        })
+    });
+}
+function NavButton({ s, direction, disabled, onPress, cr }) {
+    const iconName = direction === 'prev' ? 'chevron-back' : 'chevron-forward';
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+        onPress: disabled ? undefined : onPress,
+        accessibilityRole: "button",
+        accessibilityLabel: direction === 'prev' ? 'Previous page' : 'Next page',
+        accessibilityState: {
+            disabled
+        },
+        style: {
+            opacity: disabled ? 0.38 : 1
+        },
+        children: ({ pressed })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                style: {
+                    width: s.itemSize,
+                    height: s.itemSize,
+                    borderRadius: s.itemSize / 2,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: pressed && !disabled ? cr.transparent.neutral.sysBlack10 : 'transparent'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                    name: iconName,
+                    size: s.iconSize,
+                    color: cr.surface.surface.sysOnSurface
+                })
+            })
+    });
+}
+function Pagination({ size = 'lg', totalPages, currentPage, onPageChange, siblingCount = 1, compact = false, style }) {
+    const { colorRoles: cr, dimensions: dim, typeScale: ts } = (0, _theme.useTheme)();
+    const sizeTokens = (0, _react.useMemo)(()=>({
+            sm: {
+                itemSize: 32,
+                iconSize: 20,
+                fontSize: ts.labelMedium.sysFontSize,
+                lineHeight: ts.labelMedium.sysLineHeight,
+                activeWeight: '500',
+                inactiveWeight: '400',
+                gap: dim.spacing.padding.sysPadding8,
+                // Pill container: sm has NO outer pill
+                hasPill: false,
+                pillPaddingH: 0,
+                pillPaddingV: 0,
+                pillGap: dim.spacing.padding.sysPadding8
+            },
+            lg: {
+                itemSize: 40,
+                iconSize: 24,
+                fontSize: ts.labelLarge.sysFontSize,
+                lineHeight: ts.labelLarge.sysLineHeight,
+                activeWeight: '500',
+                inactiveWeight: '400',
+                gap: dim.spacing.padding.sysPadding16,
+                // Pill container: lg wraps in pill border
+                hasPill: true,
+                pillPaddingH: dim.spacing.padding.sysPadding12,
+                pillPaddingV: dim.spacing.padding.sysPadding8,
+                pillGap: dim.spacing.padding.sysPadding16
+            }
+        }), [
+        ts,
+        dim
+    ]);
+    const s = sizeTokens[size];
+    const pages = buildPageRange(totalPages, currentPage, siblingCount);
+    const prevDisabled = currentPage <= 1;
+    const nextDisabled = currentPage >= totalPages;
+    // ── Compact (prev + next only) ────────────────────────────────────────────
+    const content = compact ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+        style: [
+            styles.inner,
+            {
+                gap: dim.spacing.padding.sysPadding4
+            }
+        ],
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(NavButton, {
+                s: s,
+                direction: "prev",
+                disabled: prevDisabled,
+                onPress: ()=>onPageChange(currentPage - 1),
+                cr: cr
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(NavButton, {
+                s: s,
+                direction: "next",
+                disabled: nextDisabled,
+                onPress: ()=>onPageChange(currentPage + 1),
+                cr: cr
+            })
+        ]
+    }) : // ── Full paginator ────────────────────────────────────────────────────
+    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+        style: [
+            styles.inner,
+            {
+                gap: s.gap
+            }
+        ],
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(NavButton, {
+                s: s,
+                direction: "prev",
+                disabled: prevDisabled,
+                onPress: ()=>onPageChange(currentPage - 1),
+                cr: cr
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                style: [
+                    styles.pages,
+                    {
+                        gap: s.hasPill ? 0 : s.gap
+                    }
+                ],
+                children: pages.map((p, i)=>p === '...' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(EllipsisItem, {
+                        s: s,
+                        cr: cr
+                    }, `ellipsis-${i}`) : /*#__PURE__*/ (0, _jsxruntime.jsx)(PageItem, {
+                        s: s,
+                        page: p,
+                        isActive: p === currentPage,
+                        onPress: ()=>onPageChange(p),
+                        cr: cr
+                    }, p))
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(NavButton, {
+                s: s,
+                direction: "next",
+                disabled: nextDisabled,
+                onPress: ()=>onPageChange(currentPage + 1),
+                cr: cr
+            })
+        ]
+    });
+    // ── Pill wrapper (lg only) ────────────────────────────────────────────────
+    if (s.hasPill) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+            style: [
+                styles.pill,
+                {
+                    paddingHorizontal: s.pillPaddingH,
+                    paddingVertical: s.pillPaddingV,
+                    backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                    borderColor: cr.outline.sysOutline,
+                    borderWidth: dim.borderWidth.sysStrokeThin
+                },
+                style
+            ],
+            children: content
+        });
+    }
+    // sm — wrap content in a View so style can be applied
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+        style: style,
+        children: content
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    pill: {
+        alignSelf: 'flex-start',
+        borderRadius: 9999,
+        overflow: 'hidden'
+    },
+    inner: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    pages: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/src/components/Pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/Pagination/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport {\r\n  Pressable,\r\n  StyleProp,\r\n  StyleSheet,\r\n  Text,\r\n  View,\r\n  ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { Ionicons } from '@expo/vector-icons';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport type PaginationSize = 'sm' | 'lg';\r\n\r\n// Shared token shape so sub-components accept either size\r\ntype SizeTokens = {\r\n  itemSize: number;\r\n  iconSize: number;\r\n  fontSize: number;\r\n  lineHeight: number;\r\n  activeWeight: '500';\r\n  inactiveWeight: '400';\r\n  gap: number;\r\n  hasPill: boolean;\r\n  pillPaddingH: number;\r\n  pillPaddingV: number;\r\n  pillGap: number;\r\n};\r\n\r\nexport interface PaginationProps {\r\n  size?: PaginationSize;\r\n  totalPages: number;\r\n  currentPage: number;\r\n  onPageChange: (page: number) => void;\r\n  /** How many page numbers to show on each side of the current page */\r\n  siblingCount?: number;\r\n  /** On mobile/compact layouts — renders only prev + next arrows (no page numbers) */\r\n  compact?: boolean;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\n// ── Pagination range logic ────────────────────────────────────────────────────\r\n\r\nfunction buildPageRange(\r\n  total: number,\r\n  current: number,\r\n  siblings: number,\r\n): (number | '...')[] {\r\n  // Always show: 1, last, current, siblings\r\n  const range: (number | '...')[] = [];\r\n\r\n  if (total <= 1) return [1];\r\n\r\n  const left = Math.max(2, current - siblings);\r\n  const right = Math.min(total - 1, current + siblings);\r\n\r\n  // First page\r\n  range.push(1);\r\n\r\n  // Left ellipsis\r\n  if (left > 2) range.push('...');\r\n\r\n  // Middle range\r\n  for (let i = left; i <= right; i++) range.push(i);\r\n\r\n  // Right ellipsis\r\n  if (right < total - 1) range.push('...');\r\n\r\n  // Last page\r\n  if (total > 1) range.push(total);\r\n\r\n  return range;\r\n}\r\n\r\n// ── Active ring wrapper ───────────────────────────────────────────────────────\r\n// Mirrors the 4px padding + sysPrimary08 background pattern from Input.\r\n\r\nconst RING_SIZE = 4;\r\n\r\n// ── Page item ────────────────────────────────────────────────────────────────\r\n\r\ninterface PageItemProps {\r\n  s: SizeTokens;\r\n  page: number;\r\n  isActive: boolean;\r\n  onPress: () => void;\r\n  cr: ReturnType<typeof useTheme>['colorRoles'];\r\n}\r\n\r\nfunction PageItem({ s, page, isActive, onPress, cr }: PageItemProps) {\r\n  const borderWidth = isActive ? 1.5 : 0;\r\n  const borderColor = isActive ? cr.accent.primary.sysPrimary : 'transparent';\r\n  const textColor = isActive\r\n    ? cr.custom.info.sysOnInfoContainer\r\n    : cr.surface.surface.sysOnSurface;\r\n  const fontWeight = isActive ? s.activeWeight : s.inactiveWeight;\r\n\r\n  return (\r\n    <Pressable\r\n      onPress={onPress}\r\n      accessibilityRole=\"button\"\r\n      accessibilityLabel={`Page ${page}`}\r\n      accessibilityState={{ selected: isActive }}\r\n    >\r\n      {({ pressed }: { pressed: boolean }) => (\r\n        // Ring wrapper — always RING_SIZE padding for layout stability;\r\n        // background only when active (or focused — handled via pressed state here)\r\n        <View\r\n          style={{\r\n            padding: RING_SIZE,\r\n            borderRadius: s.itemSize / 2 + RING_SIZE,\r\n            backgroundColor: isActive\r\n              ? cr.transparent.primary.sysPrimary08\r\n              : 'transparent',\r\n          }}\r\n        >\r\n          <View\r\n            style={{\r\n              width: s.itemSize,\r\n              height: s.itemSize,\r\n              borderRadius: s.itemSize / 2,\r\n              borderWidth,\r\n              borderColor,\r\n              alignItems: 'center',\r\n              justifyContent: 'center',\r\n              backgroundColor:\r\n                pressed && !isActive\r\n                  ? cr.transparent.neutral.sysBlack10\r\n                  : 'transparent',\r\n            }}\r\n          >\r\n            <Text\r\n              style={{\r\n                fontSize: s.fontSize,\r\n                lineHeight: s.lineHeight,\r\n                fontWeight,\r\n                color: textColor,\r\n                includeFontPadding: false,\r\n              }}\r\n            >\r\n              {page}\r\n            </Text>\r\n          </View>\r\n        </View>\r\n      )}\r\n    </Pressable>\r\n  );\r\n}\r\n\r\n// ── Ellipsis item ─────────────────────────────────────────────────────────────\r\n\r\ninterface EllipsisItemProps {\r\n  s: SizeTokens;\r\n  cr: ReturnType<typeof useTheme>['colorRoles'];\r\n}\r\n\r\nfunction EllipsisItem({ s, cr }: EllipsisItemProps) {\r\n  return (\r\n    <View\r\n      accessible\r\n      accessibilityLabel=\"More pages\"\r\n      style={{\r\n        width: s.itemSize + RING_SIZE * 2,\r\n        height: s.itemSize + RING_SIZE * 2,\r\n        alignItems: 'center',\r\n        justifyContent: 'center',\r\n      }}\r\n    >\r\n      <Text\r\n        style={{\r\n          fontSize: s.fontSize,\r\n          lineHeight: s.lineHeight,\r\n          fontWeight: s.inactiveWeight,\r\n          color: cr.surface.surface.sysOnSurfaceVariant,\r\n          includeFontPadding: false,\r\n        }}\r\n      >\r\n        …\r\n      </Text>\r\n    </View>\r\n  );\r\n}\r\n\r\n// ── Prev / Next button ────────────────────────────────────────────────────────\r\n\r\ninterface NavButtonProps {\r\n  s: SizeTokens;\r\n  direction: 'prev' | 'next';\r\n  disabled: boolean;\r\n  onPress: () => void;\r\n  cr: ReturnType<typeof useTheme>['colorRoles'];\r\n}\r\n\r\nfunction NavButton({ s, direction, disabled, onPress, cr }: NavButtonProps) {\r\n  const iconName = direction === 'prev' ? 'chevron-back' : 'chevron-forward';\r\n\r\n  return (\r\n    <Pressable\r\n      onPress={disabled ? undefined : onPress}\r\n      accessibilityRole=\"button\"\r\n      accessibilityLabel={direction === 'prev' ? 'Previous page' : 'Next page'}\r\n      accessibilityState={{ disabled }}\r\n      style={{ opacity: disabled ? 0.38 : 1 }}\r\n    >\r\n      {({ pressed }: { pressed: boolean }) => (\r\n        <View\r\n          style={{\r\n            width: s.itemSize,\r\n            height: s.itemSize,\r\n            borderRadius: s.itemSize / 2,\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            backgroundColor:\r\n              pressed && !disabled\r\n                ? cr.transparent.neutral.sysBlack10\r\n                : 'transparent',\r\n          }}\r\n        >\r\n          <Ionicons\r\n            name={iconName}\r\n            size={s.iconSize}\r\n            color={cr.surface.surface.sysOnSurface}\r\n          />\r\n        </View>\r\n      )}\r\n    </Pressable>\r\n  );\r\n}\r\n\r\n// ── Main component ────────────────────────────────────────────────────────────\r\n\r\nexport function Pagination({\r\n  size = 'lg',\r\n  totalPages,\r\n  currentPage,\r\n  onPageChange,\r\n  siblingCount = 1,\r\n  compact = false,\r\n  style,\r\n}: PaginationProps) {\r\n  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n\r\n  const sizeTokens = useMemo(\r\n    () => ({\r\n      sm: {\r\n        itemSize: 32,\r\n        iconSize: 20,\r\n        fontSize: ts.labelMedium.sysFontSize,\r\n        lineHeight: ts.labelMedium.sysLineHeight,\r\n        activeWeight: '500' as const,\r\n        inactiveWeight: '400' as const,\r\n        gap: dim.spacing.padding.sysPadding8,\r\n        // Pill container: sm has NO outer pill\r\n        hasPill: false,\r\n        pillPaddingH: 0,\r\n        pillPaddingV: 0,\r\n        pillGap: dim.spacing.padding.sysPadding8,\r\n      },\r\n      lg: {\r\n        itemSize: 40,\r\n        iconSize: 24,\r\n        fontSize: ts.labelLarge.sysFontSize,\r\n        lineHeight: ts.labelLarge.sysLineHeight,\r\n        activeWeight: '500' as const,\r\n        inactiveWeight: '400' as const,\r\n        gap: dim.spacing.padding.sysPadding16,\r\n        // Pill container: lg wraps in pill border\r\n        hasPill: true,\r\n        pillPaddingH: dim.spacing.padding.sysPadding12,\r\n        pillPaddingV: dim.spacing.padding.sysPadding8,\r\n        pillGap: dim.spacing.padding.sysPadding16,\r\n      },\r\n    }),\r\n    [ts, dim],\r\n  );\r\n\r\n  const s = sizeTokens[size];\r\n  const pages = buildPageRange(totalPages, currentPage, siblingCount);\r\n\r\n  const prevDisabled = currentPage <= 1;\r\n  const nextDisabled = currentPage >= totalPages;\r\n\r\n  // ── Compact (prev + next only) ────────────────────────────────────────────\r\n  const content = compact ? (\r\n    <View style={[styles.inner, { gap: dim.spacing.padding.sysPadding4 }]}>\r\n      <NavButton\r\n        s={s}\r\n        direction=\"prev\"\r\n        disabled={prevDisabled}\r\n        onPress={() => onPageChange(currentPage - 1)}\r\n        cr={cr}\r\n      />\r\n      <NavButton\r\n        s={s}\r\n        direction=\"next\"\r\n        disabled={nextDisabled}\r\n        onPress={() => onPageChange(currentPage + 1)}\r\n        cr={cr}\r\n      />\r\n    </View>\r\n  ) : (\r\n    // ── Full paginator ────────────────────────────────────────────────────\r\n    <View style={[styles.inner, { gap: s.gap }]}>\r\n      <NavButton\r\n        s={s}\r\n        direction=\"prev\"\r\n        disabled={prevDisabled}\r\n        onPress={() => onPageChange(currentPage - 1)}\r\n        cr={cr}\r\n      />\r\n\r\n      <View style={[styles.pages, { gap: s.hasPill ? 0 : s.gap }]}>\r\n        {pages.map((p, i) =>\r\n          p === '...' ? (\r\n            <EllipsisItem key={`ellipsis-${i}`} s={s} cr={cr} />\r\n          ) : (\r\n            <PageItem\r\n              key={p}\r\n              s={s}\r\n              page={p}\r\n              isActive={p === currentPage}\r\n              onPress={() => onPageChange(p)}\r\n              cr={cr}\r\n            />\r\n          ),\r\n        )}\r\n      </View>\r\n\r\n      <NavButton\r\n        s={s}\r\n        direction=\"next\"\r\n        disabled={nextDisabled}\r\n        onPress={() => onPageChange(currentPage + 1)}\r\n        cr={cr}\r\n      />\r\n    </View>\r\n  );\r\n\r\n  // ── Pill wrapper (lg only) ────────────────────────────────────────────────\r\n  if (s.hasPill) {\r\n    return (\r\n      <View\r\n        style={[\r\n          styles.pill,\r\n          {\r\n            paddingHorizontal: s.pillPaddingH,\r\n            paddingVertical: s.pillPaddingV,\r\n            backgroundColor:\r\n              cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n            borderColor: cr.outline.sysOutline,\r\n            borderWidth: dim.borderWidth.sysStrokeThin,\r\n          },\r\n          style,\r\n        ]}\r\n      >\r\n        {content}\r\n      </View>\r\n    );\r\n  }\r\n\r\n  // sm — wrap content in a View so style can be applied\r\n  return <View style={style}>{content}</View>;\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  pill: {\r\n    alignSelf: 'flex-start',\r\n    borderRadius: 9999,\r\n    overflow: 'hidden',\r\n  },\r\n  inner: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n  },\r\n  pages: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n  },\r\n});\r\n"],"names":["Pagination","buildPageRange","total","current","siblings","range","left","Math","max","right","min","push","i","RING_SIZE","PageItem","s","page","isActive","onPress","cr","borderWidth","borderColor","accent","primary","sysPrimary","textColor","custom","info","sysOnInfoContainer","surface","sysOnSurface","fontWeight","activeWeight","inactiveWeight","Pressable","accessibilityRole","accessibilityLabel","accessibilityState","selected","pressed","View","style","padding","borderRadius","itemSize","backgroundColor","transparent","sysPrimary08","width","height","alignItems","justifyContent","neutral","sysBlack10","Text","fontSize","lineHeight","color","includeFontPadding","EllipsisItem","accessible","sysOnSurfaceVariant","NavButton","direction","disabled","iconName","undefined","opacity","Ionicons","name","size","iconSize","totalPages","currentPage","onPageChange","siblingCount","compact","colorRoles","dimensions","dim","typeScale","ts","useTheme","sizeTokens","useMemo","sm","labelMedium","sysFontSize","sysLineHeight","gap","spacing","sysPadding8","hasPill","pillPaddingH","pillPaddingV","pillGap","lg","labelLarge","sysPadding16","sysPadding12","pages","prevDisabled","nextDisabled","content","styles","inner","sysPadding4","map","p","pill","paddingHorizontal","paddingVertical","surfaceContainer","sysSurfaceContainerLowest","outline","sysOutline","sysStrokeThin","StyleSheet","create","alignSelf","overflow","flexDirection"],"mappings":"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"}

package/src/components/PlanCard/index.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface PlanCardItemData {
+    id: string;
+    title: string;
+    subtitle?: string;
+    checked?: boolean;
+    onToggle?: () => void;
+    onAudio?: () => void;
+    onOpen?: () => void;
+}
+interface DropdownItemProps extends PlanCardItemData {
+    showDivider?: boolean;
+}
+export declare function PlanCardDropdownItem({ title, subtitle, checked, onToggle, onAudio, onOpen, showDivider, }: DropdownItemProps): React.JSX.Element;
+export interface PlanCardProps {
+    title: string;
+    icon?: React.ReactNode;
+    tag?: string;
+    items?: PlanCardItemData[];
+    expanded?: boolean;
+    onToggle?: () => void;
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function PlanCard({ title, icon, tag, items, expanded, onToggle, children, style, }: PlanCardProps): React.JSX.Element;
+export {};