@compsych-ui-components/react-native 4.0.0 → 4.0.13

package/src/components/Checkbox/index.js

@@ -0,0 +1,196 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Checkbox", {
+    enumerable: true,
+    get: function() {
+        return Checkbox;
+    }
+});
+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;
+}
+function Checkbox({ checked: checkedProp, defaultChecked = false, onChange, size = 'md', label, description, disabled = false, invalid = false, style }) {
+    const { colorRoles: cr, dimensions: dim, typeScale: ts } = (0, _theme.useTheme)();
+    const [internalChecked, setInternalChecked] = (0, _react.useState)(defaultChecked);
+    const SIZE_TOKENS = (0, _react.useMemo)(()=>({
+            sm: {
+                box: 20,
+                hitArea: 36,
+                fontSize: ts.bodySmall.sysFontSize,
+                lineHeight: ts.bodySmall.sysLineHeight,
+                iconSize: 13
+            },
+            md: {
+                box: 24,
+                hitArea: 40,
+                fontSize: ts.bodyMedium.sysFontSize,
+                lineHeight: ts.bodyMedium.sysLineHeight,
+                iconSize: 16
+            }
+        }), [
+        ts
+    ]);
+    const isControlled = checkedProp !== undefined;
+    const checkedState = isControlled ? checkedProp : internalChecked;
+    const isChecked = checkedState === true;
+    const isIndeterminate = checkedState === 'indeterminate';
+    const isSelected = isChecked || isIndeterminate;
+    const s = SIZE_TOKENS[size];
+    function handlePress() {
+        if (disabled) return;
+        // Indeterminate → true on activation (matches HTML spec)
+        const next = checkedState === true ? false : true;
+        if (!isControlled) setInternalChecked(next);
+        onChange?.(next);
+    }
+    const borderColor = invalid ? cr.error.sysError : isSelected ? 'transparent' : cr.outline.sysOutlineFixed;
+    const boxBg = isSelected ? invalid ? cr.error.sysError : cr.accent.primary.sysPrimary : 'transparent';
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+        onPress: handlePress,
+        accessibilityRole: "checkbox",
+        accessibilityLabel: label,
+        accessibilityState: {
+            checked: isIndeterminate ? 'mixed' : isChecked,
+            disabled
+        },
+        style: ()=>[
+                styles.root,
+                disabled && styles.disabled,
+                style
+            ],
+        children: ({ pressed })=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                        style: [
+                            styles.hitArea,
+                            {
+                                width: s.hitArea,
+                                height: s.hitArea,
+                                borderRadius: s.hitArea / 2,
+                                backgroundColor: pressed && !disabled ? cr.transparent.neutral.sysBlack10 : 'transparent'
+                            }
+                        ],
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                            style: {
+                                width: s.box,
+                                height: s.box,
+                                borderRadius: dim.borderRadius.sysRadiusXs,
+                                borderWidth: isSelected ? 0 : dim.borderWidth.sysStrokeMedium,
+                                borderColor,
+                                backgroundColor: boxBg,
+                                alignItems: 'center',
+                                justifyContent: 'center'
+                            },
+                            children: [
+                                isChecked && !isIndeterminate && /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                                    name: "checkmark",
+                                    size: s.iconSize,
+                                    color: cr.accent.primary.sysOnPrimary
+                                }),
+                                isIndeterminate && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                                    style: {
+                                        width: s.box * 0.5,
+                                        height: 2,
+                                        borderRadius: 1,
+                                        backgroundColor: cr.accent.primary.sysOnPrimary
+                                    }
+                                })
+                            ]
+                        })
+                    }),
+                    (label || description) && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+                        style: [
+                            styles.textBlock,
+                            {
+                                gap: 2
+                            }
+                        ],
+                        children: [
+                            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                                style: {
+                                    color: cr.surface.surface.sysOnSurface,
+                                    fontSize: s.fontSize,
+                                    lineHeight: s.lineHeight,
+                                    includeFontPadding: false
+                                },
+                                children: label
+                            }),
+                            description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                                style: {
+                                    color: cr.surface.surface.sysOnSurfaceVariant,
+                                    fontSize: s.fontSize - 2,
+                                    lineHeight: s.lineHeight - 2,
+                                    includeFontPadding: false
+                                },
+                                children: description
+                            })
+                        ]
+                    })
+                ]
+            })
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    root: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    hitArea: {
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    textBlock: {
+        flex: 1,
+        flexDirection: 'column'
+    },
+    disabled: {
+        opacity: 0.48
+    }
+});
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { useMemo, useState } 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 CheckboxSize = 'sm' | 'md';\r\nexport type CheckboxCheckedState = boolean | 'indeterminate';\r\n\r\nexport interface CheckboxProps {\r\n  checked?: CheckboxCheckedState;\r\n  defaultChecked?: boolean;\r\n  onChange?: (checked: boolean) => void;\r\n  size?: CheckboxSize;\r\n  label?: string;\r\n  description?: string;\r\n  disabled?: boolean;\r\n  invalid?: boolean;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function Checkbox({\r\n  checked: checkedProp,\r\n  defaultChecked = false,\r\n  onChange,\r\n  size = 'md',\r\n  label,\r\n  description,\r\n  disabled = false,\r\n  invalid = false,\r\n  style,\r\n}: CheckboxProps) {\r\n  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n  const [internalChecked, setInternalChecked] =\r\n    useState<boolean>(defaultChecked);\r\n\r\n  const SIZE_TOKENS = useMemo(\r\n    () => ({\r\n      sm: {\r\n        box: 20,\r\n        hitArea: 36,\r\n        fontSize: ts.bodySmall.sysFontSize,\r\n        lineHeight: ts.bodySmall.sysLineHeight,\r\n        iconSize: 13,\r\n      },\r\n      md: {\r\n        box: 24,\r\n        hitArea: 40,\r\n        fontSize: ts.bodyMedium.sysFontSize,\r\n        lineHeight: ts.bodyMedium.sysLineHeight,\r\n        iconSize: 16,\r\n      },\r\n    }),\r\n    [ts],\r\n  );\r\n\r\n  const isControlled = checkedProp !== undefined;\r\n  const checkedState: CheckboxCheckedState = isControlled\r\n    ? checkedProp\r\n    : internalChecked;\r\n\r\n  const isChecked = checkedState === true;\r\n  const isIndeterminate = checkedState === 'indeterminate';\r\n  const isSelected = isChecked || isIndeterminate;\r\n\r\n  const s = SIZE_TOKENS[size];\r\n  function handlePress() {\r\n    if (disabled) return;\r\n    // Indeterminate → true on activation (matches HTML spec)\r\n    const next = checkedState === true ? false : true;\r\n    if (!isControlled) setInternalChecked(next);\r\n    onChange?.(next);\r\n  }\r\n\r\n  const borderColor = invalid\r\n    ? cr.error.sysError\r\n    : isSelected\r\n      ? 'transparent'\r\n      : cr.outline.sysOutlineFixed;\r\n\r\n  const boxBg = isSelected\r\n    ? invalid\r\n      ? cr.error.sysError\r\n      : cr.accent.primary.sysPrimary\r\n    : 'transparent';\r\n\r\n  return (\r\n    <Pressable\r\n      onPress={handlePress}\r\n      accessibilityRole=\"checkbox\"\r\n      accessibilityLabel={label}\r\n      accessibilityState={{\r\n        checked: isIndeterminate ? 'mixed' : isChecked,\r\n        disabled,\r\n      }}\r\n      style={() => [styles.root, disabled && styles.disabled, style]}\r\n    >\r\n      {({ pressed }: { pressed: boolean }) => (\r\n        <>\r\n          {/* Hit-area / state-layer circle */}\r\n          <View\r\n            style={[\r\n              styles.hitArea,\r\n              {\r\n                width: s.hitArea,\r\n                height: s.hitArea,\r\n                borderRadius: s.hitArea / 2,\r\n                backgroundColor:\r\n                  pressed && !disabled\r\n                    ? cr.transparent.neutral.sysBlack10\r\n                    : 'transparent',\r\n              },\r\n            ]}\r\n          >\r\n            {/* Checkbox box */}\r\n            <View\r\n              style={{\r\n                width: s.box,\r\n                height: s.box,\r\n                borderRadius: dim.borderRadius.sysRadiusXs,\r\n                borderWidth: isSelected ? 0 : dim.borderWidth.sysStrokeMedium,\r\n                borderColor,\r\n                backgroundColor: boxBg,\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n              }}\r\n            >\r\n              {isChecked && !isIndeterminate && (\r\n                <Ionicons\r\n                  name=\"checkmark\"\r\n                  size={s.iconSize}\r\n                  color={cr.accent.primary.sysOnPrimary}\r\n                />\r\n              )}\r\n              {isIndeterminate && (\r\n                <View\r\n                  style={{\r\n                    width: s.box * 0.5,\r\n                    height: 2,\r\n                    borderRadius: 1,\r\n                    backgroundColor: cr.accent.primary.sysOnPrimary,\r\n                  }}\r\n                />\r\n              )}\r\n            </View>\r\n          </View>\r\n\r\n          {(label || description) && (\r\n            <View style={[styles.textBlock, { gap: 2 }]}>\r\n              {label && (\r\n                <Text\r\n                  style={{\r\n                    color: cr.surface.surface.sysOnSurface,\r\n                    fontSize: s.fontSize,\r\n                    lineHeight: s.lineHeight,\r\n                    includeFontPadding: false,\r\n                  }}\r\n                >\r\n                  {label}\r\n                </Text>\r\n              )}\r\n              {description && (\r\n                <Text\r\n                  style={{\r\n                    color: cr.surface.surface.sysOnSurfaceVariant,\r\n                    fontSize: s.fontSize - 2,\r\n                    lineHeight: s.lineHeight - 2,\r\n                    includeFontPadding: false,\r\n                  }}\r\n                >\r\n                  {description}\r\n                </Text>\r\n              )}\r\n            </View>\r\n          )}\r\n        </>\r\n      )}\r\n    </Pressable>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  root: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n  },\r\n  hitArea: {\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  textBlock: {\r\n    flex: 1,\r\n    flexDirection: 'column',\r\n  },\r\n  disabled: {\r\n    opacity: 0.48,\r\n  },\r\n});\r\n"],"names":["Checkbox","checked","checkedProp","defaultChecked","onChange","size","label","description","disabled","invalid","style","colorRoles","cr","dimensions","dim","typeScale","ts","useTheme","internalChecked","setInternalChecked","useState","SIZE_TOKENS","useMemo","sm","box","hitArea","fontSize","bodySmall","sysFontSize","lineHeight","sysLineHeight","iconSize","md","bodyMedium","isControlled","undefined","checkedState","isChecked","isIndeterminate","isSelected","s","handlePress","next","borderColor","error","sysError","outline","sysOutlineFixed","boxBg","accent","primary","sysPrimary","Pressable","onPress","accessibilityRole","accessibilityLabel","accessibilityState","styles","root","pressed","View","width","height","borderRadius","backgroundColor","transparent","neutral","sysBlack10","sysRadiusXs","borderWidth","sysStrokeMedium","alignItems","justifyContent","Ionicons","name","color","sysOnPrimary","textBlock","gap","Text","surface","sysOnSurface","includeFontPadding","sysOnSurfaceVariant","StyleSheet","create","flexDirection","flex","opacity"],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type ChipSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ChipUsage = 'neutral' | 'informative' | 'positive' | 'danger' | 'warning';
+export interface ChipProps {
+    label: string;
+    size?: ChipSize;
+    usage?: ChipUsage;
+    /** Optional icon rendered before the label */
+    leadingIcon?: React.ReactNode;
+    /** Renders a close button — fires onDismiss when tapped */
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    /** Renders a small count badge after the label */
+    badge?: number | string;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Chip({ label, size, usage, leadingIcon, dismissible, onDismiss, badge, style, }: ChipProps): React.JSX.Element;

package/src/components/Chip/index.js

@@ -0,0 +1,280 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Chip", {
+    enumerable: true,
+    get: function() {
+        return Chip;
+    }
+});
+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;
+}
+function getUsageColors(usage, cr) {
+    switch(usage){
+        case 'neutral':
+            return {
+                bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                text: cr.surface.surface.sysOnSurface,
+                closeBg: cr.surface.surfaceContainer.sysSurfaceContainerLow,
+                badgeBg: cr.surface.surfaceContainer.sysSurfaceContainer,
+                badgeText: cr.surface.surface.sysOnSurface,
+                elevated: true
+            };
+        case 'informative':
+            return {
+                bg: cr.custom.info.sysInfo,
+                text: cr.accent.primary.sysOnPrimary,
+                closeBg: cr.transparent.neutral.sysWhite20,
+                badgeBg: cr.transparent.neutral.sysWhite20,
+                badgeText: cr.custom.info.sysOnInfo,
+                elevated: false
+            };
+        case 'positive':
+            return {
+                bg: cr.custom.success.sysSuccess,
+                text: cr.custom.success.sysOnSuccess,
+                closeBg: cr.transparent.neutral.sysWhite20,
+                badgeBg: cr.transparent.neutral.sysWhite20,
+                badgeText: cr.custom.success.sysOnSuccess,
+                elevated: false
+            };
+        case 'danger':
+            return {
+                bg: cr.error.sysError,
+                text: cr.error.sysOnError,
+                closeBg: cr.transparent.neutral.sysWhite20,
+                badgeBg: cr.transparent.neutral.sysWhite20,
+                badgeText: cr.error.sysOnError,
+                elevated: false
+            };
+        case 'warning':
+            return {
+                bg: cr.custom.warning.sysWarning,
+                text: cr.custom.warning.sysOnWarning,
+                closeBg: cr.transparent.neutral.sysWhite20,
+                badgeBg: cr.transparent.neutral.sysWhite20,
+                badgeText: cr.custom.warning.sysOnWarning,
+                elevated: false
+            };
+    }
+}
+function Chip({ label, size = 'md', usage = 'neutral', leadingIcon, dismissible = false, onDismiss, badge, style }) {
+    const { colorRoles: cr, dimensions: dim, typeScale: ts } = (0, _theme.useTheme)();
+    const SIZE_TOKENS = (0, _react.useMemo)(()=>({
+            sm: {
+                height: 20,
+                paddingH: dim.spacing.padding.sysPadding8,
+                paddingV: dim.spacing.padding.sysPadding4,
+                gap: dim.spacing.padding.sysPadding4,
+                fontSize: ts.labelSmall.sysFontSize,
+                lineHeight: ts.labelSmall.sysLineHeight,
+                letterSpacing: ts.labelSmall.sysTracking,
+                iconSize: 16,
+                closeBtnSize: 16,
+                closeIconSize: 12,
+                badgeSize: 16,
+                badgeFontSize: ts.labelSmall.sysFontSize,
+                badgeLineHeight: ts.labelSmall.sysLineHeight
+            },
+            md: {
+                height: 24,
+                paddingH: dim.spacing.padding.sysPadding12,
+                paddingV: dim.spacing.padding.sysPadding4,
+                gap: dim.spacing.padding.sysPadding4,
+                fontSize: ts.labelMedium.sysFontSize,
+                lineHeight: ts.labelMedium.sysLineHeight,
+                letterSpacing: ts.labelMedium.sysTracking,
+                iconSize: 16,
+                closeBtnSize: 16,
+                closeIconSize: 12,
+                badgeSize: 16,
+                badgeFontSize: ts.labelSmall.sysFontSize,
+                badgeLineHeight: ts.labelSmall.sysLineHeight
+            },
+            lg: {
+                height: 32,
+                paddingH: dim.spacing.padding.sysPadding16,
+                paddingV: dim.spacing.padding.sysPadding4,
+                gap: dim.spacing.padding.sysPadding8,
+                fontSize: ts.labelMedium.sysFontSize,
+                lineHeight: ts.labelMedium.sysLineHeight,
+                letterSpacing: ts.labelMedium.sysTracking,
+                iconSize: 20,
+                closeBtnSize: 20,
+                closeIconSize: 16,
+                badgeSize: 20,
+                badgeFontSize: ts.labelSmall.sysFontSize,
+                badgeLineHeight: ts.labelSmall.sysLineHeight
+            },
+            xl: {
+                height: 40,
+                paddingH: dim.spacing.padding.sysPadding16,
+                paddingV: dim.spacing.padding.sysPadding8,
+                gap: dim.spacing.padding.sysPadding8,
+                fontSize: ts.bodyMedium.sysFontSize,
+                lineHeight: ts.bodyMedium.sysLineHeight,
+                letterSpacing: ts.bodyMedium.sysTracking,
+                iconSize: 20,
+                closeBtnSize: 24,
+                closeIconSize: 16,
+                badgeSize: 24,
+                badgeFontSize: ts.labelMedium.sysFontSize,
+                badgeLineHeight: ts.labelMedium.sysLineHeight
+            }
+        }), [
+        dim,
+        ts
+    ]);
+    const s = SIZE_TOKENS[size];
+    const c = getUsageColors(usage, cr);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+        accessible: true,
+        accessibilityRole: "none",
+        accessibilityLabel: badge !== undefined ? `${label}, ${badge}` : label,
+        style: [
+            styles.root,
+            {
+                height: s.height,
+                paddingHorizontal: s.paddingH,
+                paddingVertical: s.paddingV,
+                gap: s.gap,
+                backgroundColor: c.bg
+            },
+            c.elevated && styles.elevated,
+            style
+        ],
+        children: [
+            leadingIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                style: {
+                    width: s.iconSize,
+                    height: s.iconSize,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexShrink: 0
+                },
+                children: leadingIcon
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                style: {
+                    color: c.text,
+                    fontSize: s.fontSize,
+                    lineHeight: s.lineHeight,
+                    letterSpacing: s.letterSpacing,
+                    includeFontPadding: false
+                },
+                numberOfLines: 1,
+                children: label
+            }),
+            badge !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                style: {
+                    width: s.badgeSize,
+                    height: s.badgeSize,
+                    borderRadius: s.badgeSize / 2,
+                    backgroundColor: c.badgeBg,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexShrink: 0
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Text, {
+                    style: {
+                        color: c.badgeText,
+                        fontSize: s.badgeFontSize,
+                        lineHeight: s.badgeLineHeight,
+                        includeFontPadding: false,
+                        fontWeight: '500'
+                    },
+                    children: badge
+                })
+            }),
+            dismissible && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+                onPress: onDismiss,
+                accessibilityRole: "button",
+                accessibilityLabel: "Dismiss",
+                hitSlop: 4,
+                style: ({ pressed })=>({
+                        width: s.closeBtnSize,
+                        height: s.closeBtnSize,
+                        borderRadius: s.closeBtnSize / 2,
+                        backgroundColor: pressed ? cr.transparent.neutral.sysBlack10 : c.closeBg,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        flexShrink: 0,
+                        overflow: 'hidden'
+                    }),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                    name: "close",
+                    size: s.closeIconSize,
+                    color: c.text
+                })
+            })
+        ]
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    root: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        borderRadius: 9999,
+        overflow: 'hidden'
+    },
+    elevated: {
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 2,
+        // overflow must be visible for shadow on iOS — override here
+        overflow: 'visible'
+    }
+});
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/Chip/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 ChipSize = 'sm' | 'md' | 'lg' | 'xl';\r\nexport type ChipUsage =\r\n  | 'neutral'\r\n  | 'informative'\r\n  | 'positive'\r\n  | 'danger'\r\n  | 'warning';\r\n\r\nexport interface ChipProps {\r\n  label: string;\r\n  size?: ChipSize;\r\n  usage?: ChipUsage;\r\n  /** Optional icon rendered before the label */\r\n  leadingIcon?: React.ReactNode;\r\n  /** Renders a close button — fires onDismiss when tapped */\r\n  dismissible?: boolean;\r\n  onDismiss?: () => void;\r\n  /** Renders a small count badge after the label */\r\n  badge?: number | string;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\n// ── Usage/color types ─────────────────────────────────────────────────────────\r\n\r\ntype UsageColors = {\r\n  bg: string;\r\n  text: string;\r\n  closeBg: string;\r\n  badgeBg: string;\r\n  badgeText: string;\r\n  /** true → render elevation shadow */\r\n  elevated: boolean;\r\n};\r\n\r\ntype ColorRoles = ReturnType<typeof useTheme>['colorRoles'];\r\n\r\nfunction getUsageColors(usage: ChipUsage, cr: ColorRoles): UsageColors {\r\n  switch (usage) {\r\n    case 'neutral':\r\n      return {\r\n        bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n        text: cr.surface.surface.sysOnSurface,\r\n        closeBg: cr.surface.surfaceContainer.sysSurfaceContainerLow,\r\n        badgeBg: cr.surface.surfaceContainer.sysSurfaceContainer,\r\n        badgeText: cr.surface.surface.sysOnSurface,\r\n        elevated: true,\r\n      };\r\n    case 'informative':\r\n      return {\r\n        bg: cr.custom.info.sysInfo,\r\n        text: cr.accent.primary.sysOnPrimary,\r\n        closeBg: cr.transparent.neutral.sysWhite20,\r\n        badgeBg: cr.transparent.neutral.sysWhite20,\r\n        badgeText: cr.custom.info.sysOnInfo,\r\n        elevated: false,\r\n      };\r\n    case 'positive':\r\n      return {\r\n        bg: cr.custom.success.sysSuccess,\r\n        text: cr.custom.success.sysOnSuccess,\r\n        closeBg: cr.transparent.neutral.sysWhite20,\r\n        badgeBg: cr.transparent.neutral.sysWhite20,\r\n        badgeText: cr.custom.success.sysOnSuccess,\r\n        elevated: false,\r\n      };\r\n    case 'danger':\r\n      return {\r\n        bg: cr.error.sysError,\r\n        text: cr.error.sysOnError,\r\n        closeBg: cr.transparent.neutral.sysWhite20,\r\n        badgeBg: cr.transparent.neutral.sysWhite20,\r\n        badgeText: cr.error.sysOnError,\r\n        elevated: false,\r\n      };\r\n    case 'warning':\r\n      return {\r\n        bg: cr.custom.warning.sysWarning,\r\n        text: cr.custom.warning.sysOnWarning,\r\n        closeBg: cr.transparent.neutral.sysWhite20,\r\n        badgeBg: cr.transparent.neutral.sysWhite20,\r\n        badgeText: cr.custom.warning.sysOnWarning,\r\n        elevated: false,\r\n      };\r\n  }\r\n}\r\n\r\n// ── Component ─────────────────────────────────────────────────────────────────\r\n\r\nexport function Chip({\r\n  label,\r\n  size = 'md',\r\n  usage = 'neutral',\r\n  leadingIcon,\r\n  dismissible = false,\r\n  onDismiss,\r\n  badge,\r\n  style,\r\n}: ChipProps) {\r\n  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();\r\n\r\n  const SIZE_TOKENS = useMemo(\r\n    () => ({\r\n      sm: {\r\n        height: 20,\r\n        paddingH: dim.spacing.padding.sysPadding8,\r\n        paddingV: dim.spacing.padding.sysPadding4,\r\n        gap: dim.spacing.padding.sysPadding4,\r\n        fontSize: ts.labelSmall.sysFontSize,\r\n        lineHeight: ts.labelSmall.sysLineHeight,\r\n        letterSpacing: ts.labelSmall.sysTracking,\r\n        iconSize: 16,\r\n        closeBtnSize: 16,\r\n        closeIconSize: 12,\r\n        badgeSize: 16,\r\n        badgeFontSize: ts.labelSmall.sysFontSize,\r\n        badgeLineHeight: ts.labelSmall.sysLineHeight,\r\n      },\r\n      md: {\r\n        height: 24,\r\n        paddingH: dim.spacing.padding.sysPadding12,\r\n        paddingV: dim.spacing.padding.sysPadding4,\r\n        gap: dim.spacing.padding.sysPadding4,\r\n        fontSize: ts.labelMedium.sysFontSize,\r\n        lineHeight: ts.labelMedium.sysLineHeight,\r\n        letterSpacing: ts.labelMedium.sysTracking,\r\n        iconSize: 16,\r\n        closeBtnSize: 16,\r\n        closeIconSize: 12,\r\n        badgeSize: 16,\r\n        badgeFontSize: ts.labelSmall.sysFontSize,\r\n        badgeLineHeight: ts.labelSmall.sysLineHeight,\r\n      },\r\n      lg: {\r\n        height: 32,\r\n        paddingH: dim.spacing.padding.sysPadding16,\r\n        paddingV: dim.spacing.padding.sysPadding4,\r\n        gap: dim.spacing.padding.sysPadding8,\r\n        fontSize: ts.labelMedium.sysFontSize,\r\n        lineHeight: ts.labelMedium.sysLineHeight,\r\n        letterSpacing: ts.labelMedium.sysTracking,\r\n        iconSize: 20,\r\n        closeBtnSize: 20,\r\n        closeIconSize: 16,\r\n        badgeSize: 20,\r\n        badgeFontSize: ts.labelSmall.sysFontSize,\r\n        badgeLineHeight: ts.labelSmall.sysLineHeight,\r\n      },\r\n      xl: {\r\n        height: 40,\r\n        paddingH: dim.spacing.padding.sysPadding16,\r\n        paddingV: dim.spacing.padding.sysPadding8,\r\n        gap: dim.spacing.padding.sysPadding8,\r\n        fontSize: ts.bodyMedium.sysFontSize,\r\n        lineHeight: ts.bodyMedium.sysLineHeight,\r\n        letterSpacing: ts.bodyMedium.sysTracking,\r\n        iconSize: 20,\r\n        closeBtnSize: 24,\r\n        closeIconSize: 16,\r\n        badgeSize: 24,\r\n        badgeFontSize: ts.labelMedium.sysFontSize,\r\n        badgeLineHeight: ts.labelMedium.sysLineHeight,\r\n      },\r\n    }),\r\n    [dim, ts],\r\n  );\r\n\r\n  const s = SIZE_TOKENS[size];\r\n  const c = getUsageColors(usage, cr);\r\n\r\n  return (\r\n    <View\r\n      accessible\r\n      accessibilityRole=\"none\"\r\n      accessibilityLabel={badge !== undefined ? `${label}, ${badge}` : label}\r\n      style={[\r\n        styles.root,\r\n        {\r\n          height: s.height,\r\n          paddingHorizontal: s.paddingH,\r\n          paddingVertical: s.paddingV,\r\n          gap: s.gap,\r\n          backgroundColor: c.bg,\r\n        },\r\n        c.elevated && styles.elevated,\r\n        style,\r\n      ]}\r\n    >\r\n      {/* Leading icon */}\r\n      {leadingIcon && (\r\n        <View\r\n          style={{\r\n            width: s.iconSize,\r\n            height: s.iconSize,\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            flexShrink: 0,\r\n          }}\r\n        >\r\n          {leadingIcon}\r\n        </View>\r\n      )}\r\n\r\n      {/* Label */}\r\n      <Text\r\n        style={{\r\n          color: c.text,\r\n          fontSize: s.fontSize,\r\n          lineHeight: s.lineHeight,\r\n          letterSpacing: s.letterSpacing,\r\n          includeFontPadding: false,\r\n        }}\r\n        numberOfLines={1}\r\n      >\r\n        {label}\r\n      </Text>\r\n\r\n      {/* Badge */}\r\n      {badge !== undefined && (\r\n        <View\r\n          style={{\r\n            width: s.badgeSize,\r\n            height: s.badgeSize,\r\n            borderRadius: s.badgeSize / 2,\r\n            backgroundColor: c.badgeBg,\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            flexShrink: 0,\r\n          }}\r\n        >\r\n          <Text\r\n            style={{\r\n              color: c.badgeText,\r\n              fontSize: s.badgeFontSize,\r\n              lineHeight: s.badgeLineHeight,\r\n              includeFontPadding: false,\r\n              fontWeight: '500',\r\n            }}\r\n          >\r\n            {badge}\r\n          </Text>\r\n        </View>\r\n      )}\r\n\r\n      {/* Dismiss button */}\r\n      {dismissible && (\r\n        <Pressable\r\n          onPress={onDismiss}\r\n          accessibilityRole=\"button\"\r\n          accessibilityLabel=\"Dismiss\"\r\n          hitSlop={4}\r\n          style={({ pressed }) => ({\r\n            width: s.closeBtnSize,\r\n            height: s.closeBtnSize,\r\n            borderRadius: s.closeBtnSize / 2,\r\n            backgroundColor: pressed\r\n              ? cr.transparent.neutral.sysBlack10\r\n              : c.closeBg,\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            flexShrink: 0,\r\n            overflow: 'hidden',\r\n          })}\r\n        >\r\n          <Ionicons name=\"close\" size={s.closeIconSize} color={c.text} />\r\n        </Pressable>\r\n      )}\r\n    </View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  root: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n    alignSelf: 'flex-start',\r\n    borderRadius: 9999,\r\n    overflow: 'hidden',\r\n  },\r\n  elevated: {\r\n    shadowColor: '#000',\r\n    shadowOffset: { width: 0, height: 2 },\r\n    shadowOpacity: 0.1,\r\n    shadowRadius: 8,\r\n    elevation: 2,\r\n    // overflow must be visible for shadow on iOS — override here\r\n    overflow: 'visible',\r\n  },\r\n});\r\n"],"names":["Chip","getUsageColors","usage","cr","bg","surface","surfaceContainer","sysSurfaceContainerLowest","text","sysOnSurface","closeBg","sysSurfaceContainerLow","badgeBg","sysSurfaceContainer","badgeText","elevated","custom","info","sysInfo","accent","primary","sysOnPrimary","transparent","neutral","sysWhite20","sysOnInfo","success","sysSuccess","sysOnSuccess","error","sysError","sysOnError","warning","sysWarning","sysOnWarning","label","size","leadingIcon","dismissible","onDismiss","badge","style","colorRoles","dimensions","dim","typeScale","ts","useTheme","SIZE_TOKENS","useMemo","sm","height","paddingH","spacing","padding","sysPadding8","paddingV","sysPadding4","gap","fontSize","labelSmall","sysFontSize","lineHeight","sysLineHeight","letterSpacing","sysTracking","iconSize","closeBtnSize","closeIconSize","badgeSize","badgeFontSize","badgeLineHeight","md","sysPadding12","labelMedium","lg","sysPadding16","xl","bodyMedium","s","c","View","accessible","accessibilityRole","accessibilityLabel","undefined","styles","root","paddingHorizontal","paddingVertical","backgroundColor","width","alignItems","justifyContent","flexShrink","Text","color","includeFontPadding","numberOfLines","borderRadius","fontWeight","Pressable","onPress","hitSlop","pressed","sysBlack10","overflow","Ionicons","name","StyleSheet","create","flexDirection","alignSelf","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation"],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type DividerVariant = 'horizontal' | 'vertical';
+export type DividerWeight = 'thin' | 'thick';
+export interface DividerProps {
+    variant?: DividerVariant;
+    weight?: DividerWeight;
+    dashed?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Divider({ variant, weight, dashed, style, }: DividerProps): React.JSX.Element;

package/src/components/Divider/index.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Divider", {
+    enumerable: true,
+    get: function() {
+        return Divider;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _reactnative = require("react-native");
+const _theme = require("../../theme");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function Divider({ variant = 'horizontal', weight = 'thin', dashed = false, style }) {
+    const { colorRoles: cr, dimensions: dim } = (0, _theme.useTheme)();
+    const thickness = weight === 'thin' ? dim.borderWidth.sysStrokeThin : dim.borderWidth.sysStrokeThick;
+    const color = cr.outline.sysOutlineVariant;
+    if (variant === 'horizontal') {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+            style: [
+                {
+                    // Zero height — the line is drawn as a top border
+                    height: 0,
+                    // Stretch to fill parent width
+                    alignSelf: 'stretch',
+                    borderTopWidth: thickness,
+                    borderTopColor: color,
+                    borderStyle: dashed ? 'dashed' : 'solid'
+                },
+                style
+            ],
+            accessible: false
+        });
+    }
+    // Vertical
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+        style: [
+            {
+                // Zero width — the line is drawn as a left border
+                width: 0,
+                // Stretch to fill parent height
+                alignSelf: 'stretch',
+                borderLeftWidth: thickness,
+                borderLeftColor: color,
+                borderStyle: dashed ? 'dashed' : 'solid'
+            },
+            style
+        ],
+        accessible: false
+    });
+}
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/Divider/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nimport { StyleProp, View, ViewStyle } from 'react-native';\r\n\r\nimport { useTheme } from '../../theme';\r\n\r\nexport type DividerVariant = 'horizontal' | 'vertical';\r\nexport type DividerWeight = 'thin' | 'thick';\r\n\r\nexport interface DividerProps {\r\n  variant?: DividerVariant;\r\n  weight?: DividerWeight;\r\n  dashed?: boolean;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function Divider({\r\n  variant = 'horizontal',\r\n  weight = 'thin',\r\n  dashed = false,\r\n  style,\r\n}: DividerProps) {\r\n  const { colorRoles: cr, dimensions: dim } = useTheme();\r\n\r\n  const thickness =\r\n    weight === 'thin'\r\n      ? dim.borderWidth.sysStrokeThin\r\n      : dim.borderWidth.sysStrokeThick;\r\n\r\n  const color = cr.outline.sysOutlineVariant;\r\n\r\n  if (variant === 'horizontal') {\r\n    return (\r\n      <View\r\n        style={[\r\n          {\r\n            // Zero height — the line is drawn as a top border\r\n            height: 0,\r\n            // Stretch to fill parent width\r\n            alignSelf: 'stretch',\r\n            borderTopWidth: thickness,\r\n            borderTopColor: color,\r\n            borderStyle: dashed ? 'dashed' : 'solid',\r\n          },\r\n          style,\r\n        ]}\r\n        accessible={false}\r\n      />\r\n    );\r\n  }\r\n\r\n  // Vertical\r\n  return (\r\n    <View\r\n      style={[\r\n        {\r\n          // Zero width — the line is drawn as a left border\r\n          width: 0,\r\n          // Stretch to fill parent height\r\n          alignSelf: 'stretch',\r\n          borderLeftWidth: thickness,\r\n          borderLeftColor: color,\r\n          borderStyle: dashed ? 'dashed' : 'solid',\r\n        },\r\n        style,\r\n      ]}\r\n      accessible={false}\r\n    />\r\n  );\r\n}\r\n"],"names":["Divider","variant","weight","dashed","style","colorRoles","cr","dimensions","dim","useTheme","thickness","borderWidth","sysStrokeThin","sysStrokeThick","color","outline","sysOutlineVariant","View","height","alignSelf","borderTopWidth","borderTopColor","borderStyle","accessible","width","borderLeftWidth","borderLeftColor"],"mappings":";;;;+BAgBgBA;;;eAAAA;;;;8DAhBE;6BAEyB;uBAElB;;;;;;AAYlB,SAASA,QAAQ,EACtBC,UAAU,YAAY,EACtBC,SAAS,MAAM,EACfC,SAAS,KAAK,EACdC,KAAK,EACQ;IACb,MAAM,EAAEC,YAAYC,EAAE,EAAEC,YAAYC,GAAG,EAAE,GAAGC,IAAAA,eAAQ;IAEpD,MAAMC,YACJR,WAAW,SACPM,IAAIG,WAAW,CAACC,aAAa,GAC7BJ,IAAIG,WAAW,CAACE,cAAc;IAEpC,MAAMC,QAAQR,GAAGS,OAAO,CAACC,iBAAiB;IAE1C,IAAIf,YAAY,cAAc;QAC5B,qBACE,qBAACgB,iBAAI;YACHb,OAAO;gBACL;oBACE,kDAAkD;oBAClDc,QAAQ;oBACR,+BAA+B;oBAC/BC,WAAW;oBACXC,gBAAgBV;oBAChBW,gBAAgBP;oBAChBQ,aAAanB,SAAS,WAAW;gBACnC;gBACAC;aACD;YACDmB,YAAY;;IAGlB;IAEA,WAAW;IACX,qBACE,qBAACN,iBAAI;QACHb,OAAO;YACL;gBACE,kDAAkD;gBAClDoB,OAAO;gBACP,gCAAgC;gBAChCL,WAAW;gBACXM,iBAAiBf;gBACjBgB,iBAAiBZ;gBACjBQ,aAAanB,SAAS,WAAW;YACnC;YACAC;SACD;QACDmB,YAAY;;AAGlB"}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export type EmptyStateStyle = 'icon' | 'illustration';
+export type EmptyStateViewport = 'desktop' | 'mobile';
+export interface EmptyStateProps {
+    /** Visual style of the graphic area */
+    style?: EmptyStateStyle;
+    /** desktop = larger type + 60px icon circle; mobile = smaller type + 48px circle */
+    viewport?: EmptyStateViewport;
+    /** Heading text (default: "No results") */
+    title?: string;
+    /** Body copy below the title */
+    description?: string;
+    /** Hide the description even when `description` is provided */
+    showDescription?: boolean;
+    /** Custom icon rendered inside the icon circle (icon style only) */
+    icon?: React.ReactNode;
+    /** Label for the optional action button */
+    actionLabel?: string;
+    onAction?: () => void;
+    /** Whether the action button is shown (default: true when actionLabel is set) */
+    showAction?: boolean;
+    containerStyle?: StyleProp<ViewStyle>;
+}
+export declare function EmptyState({ style, viewport, title, description, showDescription, icon, actionLabel, onAction, showAction, containerStyle, }: EmptyStateProps): React.JSX.Element;