@sparrowengg/twigs-mobile 0.0.4 → 0.1.1

package/lib/module/tooltip/tooltip.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Tooltip=void 0;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNative2=require("@floating-ui/react-native");var _reactNativeReanimated=require("react-native-reanimated");var _reactNativeSvg=require("react-native-svg");var _context=require("../context");var _text=require("../text");var _utils=require("../utils");var _constants=require("./constants");var _helpers=require("./helpers");var _styles=require("./styles");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="/Users/krishnank/surveysparrow/npm-package/twigs-mobile/src/tooltip/tooltip.tsx";function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap(),n=new WeakMap();return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f);}for(var _t in e)"default"!==_t&&{}.hasOwnProperty.call(e,_t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,_t))&&(i.get||i.set)?o(f,_t,i):f[_t]=e[_t]);return f;})(e,t);}var _worklet_11467105265381_init_data={code:"function tooltipTsx1(){const{opacity,translateY,translateX}=this.__closure;return{opacity:opacity.value,transform:[{translateY:translateY.value},{translateX:translateX.value}]};}",location:"/Users/krishnank/surveysparrow/npm-package/twigs-mobile/src/tooltip/tooltip.tsx",sourceMap:"{\"version\":3,\"names\":[\"tooltipTsx1\",\"opacity\",\"translateY\",\"translateX\",\"__closure\",\"value\",\"transform\"],\"sources\":[\"/Users/krishnank/surveysparrow/npm-package/twigs-mobile/src/tooltip/tooltip.tsx\"],\"mappings\":\"AAqF2C,SAAAA,YAAA,QAAAC,OAAA,CAAAC,UAAA,CAAAC,UAAA,OAAAC,SAAA,OAAO,CAC5CH,OAAO,CAAEA,OAAO,CAACI,KAAK,CACtBC,SAAS,CAAE,CAAC,CAAEJ,UAAU,CAAEA,UAAU,CAACG,KAAM,CAAC,CAAE,CAAEF,UAAU,CAAEA,UAAU,CAACE,KAAM,CAAC,CAChF,CAAC\",\"ignoreList\":[]}",version:"3.16.7"};var Tooltip=exports.Tooltip=_react.default.forwardRef(function(_ref,_ref3){var content=_ref.content,children=_ref.children,_ref$side=_ref.side,side=_ref$side===void 0?_constants.DEFAULT_SIDE:_ref$side,_ref$align=_ref.align,align=_ref$align===void 0?'center':_ref$align,controlledOpen=_ref.open,_ref$defaultOpen=_ref.defaultOpen,defaultOpen=_ref$defaultOpen===void 0?false:_ref$defaultOpen,onOpenChange=_ref.onOpenChange,_ref$sideOffset=_ref.sideOffset,sideOffset=_ref$sideOffset===void 0?_constants.DEFAULT_SIDE_OFFSET:_ref$sideOffset,_ref$autoHideDuration=_ref.autoHideDuration,autoHideDuration=_ref$autoHideDuration===void 0?0:_ref$autoHideDuration,_ref$hasArrow=_ref.hasArrow,hasArrow=_ref$hasArrow===void 0?true:_ref$hasArrow,_ref$triggerAction=_ref.triggerAction,triggerAction=_ref$triggerAction===void 0?'press':_ref$triggerAction,css=_ref.css,style=_ref.style,testID=_ref.testID,_ref$accessible=_ref.accessible,accessible=_ref$accessible===void 0?true:_ref$accessible,accessibilityLabel=_ref.accessibilityLabel,accessibilityHint=_ref.accessibilityHint,accessibilityState=_ref.accessibilityState;var theme=(0,_context.useTheme)();var isControlled=controlledOpen!==undefined;var _useState=(0,_react.useState)(defaultOpen),_useState2=(0,_slicedToArray2.default)(_useState,2),internalOpen=_useState2[0],setInternalOpen=_useState2[1];var isOpen=isControlled?controlledOpen:internalOpen;var autoHideTimerRef=(0,_react.useRef)(null);var arrowRef=(0,_react.useRef)(null);var placement=(0,_react.useMemo)(function(){return(0,_helpers.toPlacement)(side,align);},[side,align]);var arrowDims=(0,_react.useMemo)(function(){return(0,_helpers.getArrowDimensions)(side);},[side]);var middleware=(0,_react.useMemo)(function(){return[(0,_reactNative2.offset)(function(_ref2){var rects=_ref2.rects;return{mainAxis:sideOffset+(hasArrow?arrowDims.height:0),crossAxis:(0,_helpers.getCrossAxisOffset)(side,align,side==='left'||side==='right'?rects.reference.height:rects.reference.width)};}),(0,_reactNative2.flip)(),(0,_reactNative2.shift)({padding:8})].concat((0,_toConsumableArray2.default)(hasArrow?[(0,_reactNative2.arrow)({element:arrowRef})]:[]));},[sideOffset,hasArrow,arrowDims.height,side,align]);var _useFloating=(0,_reactNative2.useFloating)({sameScrollView:false,placement:placement,middleware:middleware}),refs=_useFloating.refs,floatingStyles=_useFloating.floatingStyles,middlewareData=_useFloating.middlewareData;var opacity=(0,_reactNativeReanimated.useSharedValue)(0);var translateY=(0,_reactNativeReanimated.useSharedValue)(side==='bottom'?-4:side==='top'?4:0);var translateX=(0,_reactNativeReanimated.useSharedValue)(side==='right'?-4:side==='left'?4:0);var animatedStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _e=[new global.Error(),-4,-27];var tooltipTsx1=function tooltipTsx1(){return{opacity:opacity.value,transform:[{translateY:translateY.value},{translateX:translateX.value}]};};tooltipTsx1.__closure={opacity:opacity,translateY:translateY,translateX:translateX};tooltipTsx1.__workletHash=11467105265381;tooltipTsx1.__initData=_worklet_11467105265381_init_data;tooltipTsx1.__stackDetails=_e;return tooltipTsx1;}());(0,_react.useEffect)(function(){if(isOpen){opacity.value=(0,_reactNativeReanimated.withTiming)(1,{duration:_constants.ANIMATION_DURATION});translateY.value=(0,_reactNativeReanimated.withTiming)(0,{duration:_constants.ANIMATION_DURATION});translateX.value=(0,_reactNativeReanimated.withTiming)(0,{duration:_constants.ANIMATION_DURATION});}else{opacity.value=(0,_reactNativeReanimated.withTiming)(0,{duration:_constants.ANIMATION_DURATION});}},[isOpen,opacity,translateY,translateX]);(0,_react.useEffect)(function(){if(isOpen&&autoHideDuration>0){autoHideTimerRef.current=setTimeout(function(){handleClose();},autoHideDuration);}return function(){if(autoHideTimerRef.current){clearTimeout(autoHideTimerRef.current);autoHideTimerRef.current=null;}};},[isOpen,autoHideDuration]);var handleOpen=(0,_react.useCallback)(function(){if(!isControlled)setInternalOpen(true);onOpenChange==null||onOpenChange(true);},[isControlled,onOpenChange]);var handleClose=(0,_react.useCallback)(function(){if(!isControlled)setInternalOpen(false);onOpenChange==null||onOpenChange(false);},[isControlled,onOpenChange]);var handleToggle=(0,_react.useCallback)(function(){if(isOpen){handleClose();}else{handleOpen();}},[isOpen,handleClose,handleOpen]);var contentStyle=(0,_react.useMemo)(function(){return(0,_helpers.getContentStyles)(theme);},[theme]);var textStyle=(0,_react.useMemo)(function(){return(0,_helpers.getTextStyles)(theme);},[theme]);var triggerProps=(0,_react.useMemo)(function(){if(triggerAction==='longPress'){return{onLongPress:handleToggle};}return{onPress:handleToggle};},[triggerAction,handleToggle]);var arrowPathD=(0,_react.useMemo)(function(){return(0,_helpers.getArrowPath)(side);},[side]);var arrowPositionStyle=(0,_react.useMemo)(function(){return(0,_helpers.getArrowPositionStyle)(side,align,arrowDims,middlewareData.arrow);},[side,align,arrowDims,middlewareData.arrow]);if(!content)return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:children});return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,Object.assign({ref:refs.setReference,collapsable:false},triggerProps,{accessible:true,accessibilityHint:accessibilityHint!=null?accessibilityHint:'Tap to show tooltip',testID:testID?`${testID}-trigger`:undefined,children:(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",children:children})})),(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:isOpen,transparent:true,animationType:"none",onRequestClose:handleClose,statusBarTranslucent:true,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_styles.styles.overlay,children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_styles.styles.backdropPressable,onPress:handleClose,accessible:false}),(0,_jsxRuntime.jsx)(_reactNative.View,{ref:function ref(node){refs.setFloating(node);if(typeof _ref3==='function'){_ref3(node);}else if(_ref3){_ref3.current=node;}},collapsable:false,style:[_styles.styles.contentWrapper,floatingStyles],testID:testID,accessible:accessible,accessibilityRole:"none",accessibilityLabel:accessibilityLabel!=null?accessibilityLabel:typeof content==='string'?content:undefined,accessibilityState:accessibilityState,accessibilityLiveRegion:"polite",children:(0,_jsxRuntime.jsxs)(_utils.AnimatedView,{style:[animatedStyle,css,style],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:contentStyle,children:typeof content==='string'?(0,_jsxRuntime.jsx)(_text.Text,{style:textStyle,children:content}):content}),hasArrow&&(0,_jsxRuntime.jsx)(_reactNative.View,{ref:arrowRef,style:[_styles.styles.arrowContainer,arrowPositionStyle],collapsable:false,children:(0,_jsxRuntime.jsx)(_reactNativeSvg.Svg,{width:arrowDims.width,height:arrowDims.height,viewBox:`0 0 ${arrowDims.width} ${arrowDims.height}`,children:(0,_jsxRuntime.jsx)(_reactNativeSvg.Path,{d:arrowPathD,fill:theme.colors.neutral900})})})]})})]})})]});});Tooltip.displayName='Tooltip';

package/lib/module/tooltip/types.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});

package/lib/module/utils/index.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.createTextStyle=exports.colorOpacity=exports.AnimatedView=void 0;exports.getBottomSheetTextInput=getBottomSheetTextInput;exports.resolvePadding=exports.resolveMargin=void 0;var _reactNativeReanimated=_interopRequireDefault(require("react-native-reanimated"));var AnimatedView=exports.AnimatedView=_reactNativeReanimated.default.View;var resolveMargin=exports.resolveMargin=function resolveMargin(props){var _ref,_ref2,_props$marginTop,_ref3,_ref4,_props$marginBottom,_ref5,_ref6,_props$marginLeft,_ref7,_ref8,_props$marginRight;var defaultSpacing=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;return{top:(_ref=(_ref2=(_props$marginTop=props.marginTop)!=null?_props$marginTop:props.marginVertical)!=null?_ref2:props.margin)!=null?_ref:defaultSpacing,bottom:(_ref3=(_ref4=(_props$marginBottom=props.marginBottom)!=null?_props$marginBottom:props.marginVertical)!=null?_ref4:props.margin)!=null?_ref3:defaultSpacing,left:(_ref5=(_ref6=(_props$marginLeft=props.marginLeft)!=null?_props$marginLeft:props.marginHorizontal)!=null?_ref6:props.margin)!=null?_ref5:defaultSpacing,right:(_ref7=(_ref8=(_props$marginRight=props.marginRight)!=null?_props$marginRight:props.marginHorizontal)!=null?_ref8:props.margin)!=null?_ref7:defaultSpacing};};var resolvePadding=exports.resolvePadding=function resolvePadding(props){var _ref9,_ref0,_props$paddingTop,_ref1,_ref10,_props$paddingBottom,_ref11,_ref12,_props$paddingLeft,_ref13,_ref14,_props$paddingRight;var defaultSpacing=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;return{top:(_ref9=(_ref0=(_props$paddingTop=props.paddingTop)!=null?_props$paddingTop:props.paddingVertical)!=null?_ref0:props.padding)!=null?_ref9:defaultSpacing,bottom:(_ref1=(_ref10=(_props$paddingBottom=props.paddingBottom)!=null?_props$paddingBottom:props.paddingVertical)!=null?_ref10:props.padding)!=null?_ref1:defaultSpacing,left:(_ref11=(_ref12=(_props$paddingLeft=props.paddingLeft)!=null?_props$paddingLeft:props.paddingHorizontal)!=null?_ref12:props.padding)!=null?_ref11:defaultSpacing,right:(_ref13=(_ref14=(_props$paddingRight=props.paddingRight)!=null?_props$paddingRight:props.paddingHorizontal)!=null?_ref14:props.padding)!=null?_ref13:defaultSpacing};};var colorOpacity=exports.colorOpacity=function colorOpacity(color,opacity){var raw=color.replace(/^#/,'');var base;if(raw.length===8){base=raw.slice(0,6);}else if(raw.length===4){base=raw.slice(0,3);}else{base=raw;}var fullHex=base.length===3?base.split('').map(function(c){return c+c;}).join(''):base;var alpha=Math.round(Math.min(1,Math.max(0,opacity))*255).toString(16).padStart(2,'0').toUpperCase();return`#${fullHex}${alpha}`;};var createTextStyle=exports.createTextStyle=function createTextStyle(fontFamily,fontWeight){var style={fontFamily:fontFamily};if(fontFamily==='System'&&fontWeight){style.fontWeight=fontWeight;}return style;};var _BottomSheetTextInput;function getBottomSheetTextInput(){if(!_BottomSheetTextInput){_BottomSheetTextInput=require('@gorhom/bottom-sheet').BottomSheetTextInput;}return _BottomSheetTextInput;}

package/lib/typescript/alert/alert.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { AlertProps } from './types';
+/** Contextual feedback banner with status icon, content, and optional close action. */
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<View>>;
+//# sourceMappingURL=alert.d.ts.map

package/lib/typescript/alert/constants.d.ts

@@ -0,0 +1,18 @@
+import type { AlertStatus } from './types';
+export declare const ALERT_BORDER_WIDTH = 1;
+export declare const ALERT_PADDING_LEFT = 11;
+export declare const ALERT_PADDING_RIGHT = 7;
+export declare const ALERT_PADDING_VERTICAL = 7;
+export declare const ALERT_GAP = 8;
+export declare const ALERT_BORDER_RADIUS = 8;
+export declare const ALERT_FONT_SIZE = 14;
+export declare const ALERT_LINE_HEIGHT = 20;
+export declare const ALERT_ICON_SIZE = 20;
+export declare const ALERT_CLOSE_ICON_SIZE = 16;
+export declare const ALERT_MIN_HEIGHT = 40;
+export declare const ALERT_TEXT_COLOR = "neutral900";
+export declare const DEFAULT_STATUS: AlertStatus;
+export declare const STATUS_BG_COLORS: Record<AlertStatus, string>;
+export declare const STATUS_BORDER_COLORS: Record<AlertStatus, string>;
+export declare const STATUS_ICON_COLORS: Record<AlertStatus, string>;
+//# sourceMappingURL=constants.d.ts.map

package/lib/typescript/alert/helpers.d.ts

@@ -0,0 +1,7 @@
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { TwigsTheme } from '../theme';
+import type { AlertStatus } from './types';
+export declare function getStatusContainerStyles(theme: TwigsTheme, status: AlertStatus): ViewStyle;
+export declare function getIconColor(theme: TwigsTheme, status: AlertStatus): string;
+export declare function getTextStyles(theme: TwigsTheme): TextStyle;
+//# sourceMappingURL=helpers.d.ts.map

package/lib/typescript/alert/icons.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+interface IconProps {
+    size: number;
+    color: string;
+}
+/** Default info icon */
+export declare const InfoIcon: ({ size, color }: IconProps) => React.JSX.Element;
+/** Default success icon */
+export declare const SuccessIcon: ({ size, color }: IconProps) => React.JSX.Element;
+/** Default warning icon */
+export declare const WarningIcon: ({ size, color }: IconProps) => React.JSX.Element;
+/** Default error icon */
+export declare const ErrorIcon: ({ size, color }: IconProps) => React.JSX.Element;
+/** Close icon */
+export declare const CloseIcon: ({ size, color }: IconProps) => React.JSX.Element;
+/** Map status to default icon component */
+export declare const STATUS_ICONS: {
+    default: ({ size, color }: IconProps) => React.JSX.Element;
+    info: ({ size, color }: IconProps) => React.JSX.Element;
+    success: ({ size, color }: IconProps) => React.JSX.Element;
+    warning: ({ size, color }: IconProps) => React.JSX.Element;
+    error: ({ size, color }: IconProps) => React.JSX.Element;
+};
+export {};
+//# sourceMappingURL=icons.d.ts.map

package/lib/typescript/alert/index.d.ts

@@ -0,0 +1,3 @@
+export { Alert } from './alert';
+export type { AlertProps, AlertStatus } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/alert/styles.d.ts

@@ -0,0 +1,25 @@
+export declare const styles: {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+        paddingLeft: number;
+        paddingRight: number;
+        paddingVertical: number;
+        gap: number;
+        borderRadius: number;
+        overflow: "hidden";
+        minHeight: number;
+    };
+    iconContainer: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    contentContainer: {
+        flex: number;
+    };
+    closeButton: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+};
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/alert/types.d.ts

@@ -0,0 +1,20 @@
+import type { ViewProps } from 'react-native';
+import type { CommonStyleProps, BaseAccessibilityProps } from '../utils';
+export type AlertStatus = 'default' | 'info' | 'success' | 'warning' | 'error';
+/**
+ * Props for the Alert component.
+ * Displays contextual feedback messages with status indicators and optional close functionality.
+ */
+export interface AlertProps extends Omit<ViewProps, 'style'>, CommonStyleProps, BaseAccessibilityProps {
+    /** The status/type of alert which determines colors and icon */
+    status?: AlertStatus;
+    /** Custom icon to display. If not provided, a default icon based on status is shown */
+    icon?: React.ReactElement;
+    /** Whether the alert can be dismissed */
+    closable?: boolean;
+    /** Callback when the close button is pressed */
+    onClose?: () => void;
+    /** The alert content */
+    children: React.ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/avatar/avatar-group.constants.d.ts

@@ -0,0 +1,18 @@
+import type { AvatarSize, AvatarSizeProp } from './types';
+export interface AvatarGroupSizeConfig {
+    /** Negative margin overlap between avatars (dp). */
+    overlap: number;
+    /** White border width around each avatar (dp). */
+    borderWidth: number;
+    /** Font size for the overflow "+N" label (dp). */
+    overlayFontSize: number;
+    /** Line height for the overflow "+N" label (dp). */
+    overlayLineHeight: number;
+    /** Letter spacing for the overflow "+N" label. */
+    overlayLetterSpacing: number;
+}
+export declare const DEFAULT_AVATAR_GROUP_LIMIT = 0;
+export declare const DEFAULT_AVATAR_GROUP_SIZE: AvatarSizeProp;
+export declare const DEFAULT_AVATAR_GROUP_ROUNDED: AvatarSize;
+export declare const AVATAR_GROUP_SIZE_CONFIG: Record<AvatarSizeProp, AvatarGroupSizeConfig>;
+//# sourceMappingURL=avatar-group.constants.d.ts.map

package/lib/typescript/avatar/avatar-group.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { AvatarGroupProps } from './avatar-group.types';
+/** Overlapping avatar stack with optional "+N" overflow indicator. */
+export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<View>>;
+//# sourceMappingURL=avatar-group.d.ts.map

package/lib/typescript/avatar/avatar-group.helpers.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { TwigsTheme } from '../theme';
+import type { AvatarGroupProps } from './avatar-group.types';
+import type { AvatarProps, AvatarSize, AvatarSizeProp } from './types';
+export declare const isAvatarElement: (child: React.ReactNode) => child is React.ReactElement<AvatarProps>;
+export declare const getAvatarChildren: (children: AvatarGroupProps["children"]) => React.ReactElement<AvatarProps>[];
+/** Dynamic wrapper style for each avatar item in the group. */
+export declare const getAvatarGroupItemStyles: (theme: TwigsTheme, size: AvatarSizeProp, rounded: AvatarSize, isFirst: boolean) => ViewStyle;
+/** Typography for the overflow label rendered on top of the last avatar. */
+export declare const getAvatarGroupOverlayTextStyles: (size: AvatarSizeProp) => TextStyle;
+//# sourceMappingURL=avatar-group.helpers.d.ts.map

package/lib/typescript/avatar/avatar-group.styles.d.ts

@@ -0,0 +1,20 @@
+export declare const avatarGroupStyles: {
+    group: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    item: {
+        zIndex: number;
+        overflow: "hidden";
+    };
+    overflowOverlay: {
+        alignItems: "center";
+        justifyContent: "center";
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    };
+};
+//# sourceMappingURL=avatar-group.styles.d.ts.map

package/lib/typescript/avatar/avatar-group.types.d.ts

@@ -0,0 +1,18 @@
+import type { ReactElement } from 'react';
+import type { ViewProps } from 'react-native';
+import type { BaseAccessibilityProps, CommonStyleProps } from '../utils';
+import type { AvatarProps, AvatarSize, AvatarSizeProp } from './types';
+/** Props for the AvatarGroup component. */
+export interface AvatarGroupProps extends Omit<ViewProps, 'style' | 'children'>, CommonStyleProps, BaseAccessibilityProps {
+    /** Maximum number of avatars to show before rendering a "+N" overflow avatar. */
+    limit?: number | null;
+    /** Custom label for the overflow avatar. Defaults to "+N". */
+    limitExceededLabel?: string;
+    /** Size applied to all avatars in the group unless overridden by child props. */
+    size?: AvatarSizeProp;
+    /** Border radius variant applied to all avatars in the group unless overridden by child props. */
+    rounded?: AvatarSize;
+    /** Avatar children to render in the group. */
+    children: ReactElement<AvatarProps> | ReactElement<AvatarProps>[];
+}
+//# sourceMappingURL=avatar-group.types.d.ts.map

package/lib/typescript/avatar/avatar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { AvatarProps } from './types';
+/** Displays a user avatar with image, initials fallback, or anonymous placeholder. */
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<View>>;
+//# sourceMappingURL=avatar.d.ts.map

package/lib/typescript/avatar/constants.d.ts

@@ -0,0 +1,10 @@
+import type { AvatarSize, AvatarSizeProp } from './types';
+export declare const AVATAR_DIMENSIONS: Record<AvatarSizeProp, {
+    width: number;
+    height: number;
+}>;
+export declare const AVATAR_FONT_SIZES: Record<AvatarSizeProp, number>;
+export declare const AVATAR_ANONYMOUS_BORDER_WIDTHS: Record<AvatarSizeProp, number>;
+export declare const AVATAR_BORDER_RADII: Record<AvatarSize, number>;
+export declare const DEFAULT_AVATAR_NAME = "?";
+//# sourceMappingURL=constants.d.ts.map

package/lib/typescript/avatar/helpers.d.ts

@@ -0,0 +1,6 @@
+import type { AvatarSize } from './types';
+/** Border radius for a given rounded variant. */
+export declare const getAvatarBorderRadius: (rounded: AvatarSize) => number;
+/** Extract initials from a full name (first + last). */
+export declare const getFallbackInitials: (name: string) => string;
+//# sourceMappingURL=helpers.d.ts.map

package/lib/typescript/avatar/index.d.ts

@@ -0,0 +1,5 @@
+export { Avatar } from './avatar';
+export { AvatarGroup } from './avatar-group';
+export type { AvatarProps, AvatarSize, AvatarSizeProp } from './types';
+export type { AvatarGroupProps } from './avatar-group.types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/avatar/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const avatarStyles: {
+    avatarBase: {
+        alignItems: "center";
+        justifyContent: "center";
+        overflow: "hidden";
+        position: "relative";
+    };
+};
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/avatar/types.d.ts

@@ -0,0 +1,27 @@
+import type { ViewProps } from 'react-native';
+import type { CommonStyleProps, BaseAccessibilityProps } from '../utils';
+export type AvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+export type AvatarSizeProp = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export interface AvatarProps extends Omit<ViewProps, 'style'>, CommonStyleProps, BaseAccessibilityProps {
+    /** URL of the avatar image. Falls back to initials when absent or on load failure. */
+    imageSrc?: string;
+    /** Full name used to derive initials and the default accessibilityLabel. */
+    name?: string;
+    /** Override color for the initials text. */
+    textColor?: string;
+    /** Override font size for the initials text. */
+    textSize?: number;
+    /** Override background color for the initials fallback. */
+    backgroundColor?: string;
+    /** Explicit width in dp (overrides the size preset). */
+    width?: number;
+    /** Explicit height in dp (overrides the size preset). */
+    height?: number;
+    /** Border radius variant. @default 'full' */
+    rounded?: AvatarSize;
+    /** Size preset controlling width, height, and font size. @default 'md' */
+    size?: AvatarSizeProp;
+    /** When true, renders an anonymous "?" fallback with a dashed border. */
+    isAnonymous?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/badge/badge.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { BadgeProps } from './types';
+/** Compact pill-shaped element for labels, tags, and status indicators. */
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<View>>;
+//# sourceMappingURL=badge.d.ts.map

package/lib/typescript/badge/constants.d.ts

@@ -0,0 +1,21 @@
+import type { BadgeSize, BadgeColor, BadgeRounded } from './types';
+interface SizeConfig {
+    height: number;
+    paddingHorizontal: number;
+    fontSize: number;
+    lineHeight: number;
+    iconSize: number;
+    gap: number;
+}
+export declare const SIZE_CONFIG: Record<BadgeSize, SizeConfig>;
+export declare const ROUNDED_RADII: Record<BadgeRounded, number>;
+/** `null` means the background is computed at runtime (e.g. primary uses an alpha overlay). */
+export declare const COLOR_BG_MAP: Record<BadgeColor, string | null>;
+export declare const PRIMARY_BG_OPACITY = 0.08;
+export declare const COLOR_TEXT_MAP: Record<BadgeColor, string>;
+export declare const COLOR_BORDER_MAP: Record<BadgeColor, string | null>;
+export declare const DEFAULT_SIZE: BadgeSize;
+export declare const DEFAULT_COLOR: BadgeColor;
+export declare const DEFAULT_ROUNDED: BadgeRounded;
+export {};
+//# sourceMappingURL=constants.d.ts.map

package/lib/typescript/badge/helpers.d.ts

@@ -0,0 +1,9 @@
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { TwigsTheme } from '../theme';
+import type { BadgeSize, BadgeColor, BadgeRounded } from './types';
+export declare function getSizeStyles(size: BadgeSize, rounded: BadgeRounded): ViewStyle;
+export declare function getColorStyles(theme: TwigsTheme, color: BadgeColor): ViewStyle;
+export declare function getTextStyles(theme: TwigsTheme, color: BadgeColor, size: BadgeSize): TextStyle;
+export declare function getIconSize(size: BadgeSize): number;
+export declare function getIconColor(theme: TwigsTheme, color: BadgeColor): string;
+//# sourceMappingURL=helpers.d.ts.map

package/lib/typescript/badge/index.d.ts

@@ -0,0 +1,3 @@
+export { Badge } from './badge';
+export type { BadgeProps, BadgeSize, BadgeColor, BadgeRounded } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/badge/styles.d.ts

@@ -0,0 +1,19 @@
+export declare const styles: {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        alignSelf: "flex-start";
+    };
+    contentWrap: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        paddingHorizontal: number;
+    };
+    sideElement: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+};
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/badge/types.d.ts

@@ -0,0 +1,24 @@
+import type { ViewProps } from 'react-native';
+import type { CommonStyleProps, BaseAccessibilityProps } from '../utils';
+export type BadgeSize = 'sm' | 'md';
+export type BadgeColor = 'default' | 'white' | 'primary' | 'secondary' | 'accent' | 'positive' | 'negative' | 'attention';
+export type BadgeRounded = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+/**
+ * Props for the Badge component.
+ * Compact pill-shaped element for labels, tags, and status indicators.
+ */
+export interface BadgeProps extends Omit<ViewProps, 'style'>, CommonStyleProps, BaseAccessibilityProps {
+    /** Size of the badge */
+    size?: BadgeSize;
+    /** Color variant */
+    color?: BadgeColor;
+    /** Border radius variant */
+    rounded?: BadgeRounded;
+    /** Element rendered before the label */
+    leftElement?: React.ReactNode;
+    /** Element rendered after the label */
+    rightElement?: React.ReactNode;
+    /** Badge content (label) */
+    children: React.ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/bottom-sheet/bottom-sheet-header.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { BottomSheetHeaderProps } from './types';
+export declare const BottomSheetHeader: React.NamedExoticComponent<BottomSheetHeaderProps>;
+//# sourceMappingURL=bottom-sheet-header.d.ts.map

package/lib/typescript/bottom-sheet/bottom-sheet-modal.d.ts

@@ -0,0 +1,6 @@
+import { BottomSheetModal as GorhomBottomSheetModal } from '@gorhom/bottom-sheet';
+import React from 'react';
+import type { BottomSheetModalProps } from './types';
+/** Modal variant of BottomSheet that presents on top of a backdrop overlay. */
+export declare const BottomSheetModal: React.ForwardRefExoticComponent<BottomSheetModalProps & React.RefAttributes<GorhomBottomSheetModal>>;
+//# sourceMappingURL=bottom-sheet-modal.d.ts.map

package/lib/typescript/bottom-sheet/bottom-sheet.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { BottomSheetProps } from './types';
+/** Themed wrapper around @gorhom/bottom-sheet with a built-in drag handle and optional title. */
+export declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<import("@gorhom/bottom-sheet/lib/typescript/types").BottomSheetMethods>>;
+//# sourceMappingURL=bottom-sheet.d.ts.map

package/lib/typescript/bottom-sheet/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const HANDLE_PADDING_TOP = 8;
+export declare const HANDLE_PADDING_BOTTOM = 12;
+export declare const HANDLE_PADDING_HORIZONTAL = 16;
+export declare const HANDLE_BORDER_WIDTH = 1;
+export declare const INDICATOR_WIDTH = 50;
+export declare const HEADER_TITLE_PADDING_TOP = 8;
+export declare const SHEET_BORDER_RADIUS = 16;
+export declare const SHEET_BORDER_WIDTH = 1;
+export declare const SHEET_BOTTOM_PADDING = 8;
+//# sourceMappingURL=constants.d.ts.map

package/lib/typescript/bottom-sheet/index.d.ts

@@ -0,0 +1,7 @@
+export { BottomSheet } from './bottom-sheet';
+export { BottomSheetModal } from './bottom-sheet-modal';
+export { BottomSheetHeader } from './bottom-sheet-header';
+export type { BottomSheetProps, BottomSheetModalProps, BottomSheetHeaderProps } from './types';
+export { BottomSheetView, BottomSheetScrollView, BottomSheetSectionList, BottomSheetFlatList, BottomSheetVirtualizedList, BottomSheetTextInput, BottomSheetHandle, BottomSheetBackdrop, BottomSheetFooter, BottomSheetFooterContainer, BottomSheetModalProvider, BottomSheetDraggableView, useBottomSheet, useBottomSheetModal, useBottomSheetSpringConfigs, useBottomSheetTimingConfigs, useBottomSheetInternal, useBottomSheetModalInternal, useScrollEventsHandlersDefault, useGestureEventsHandlersDefault, useBottomSheetGestureHandlers, useScrollHandler, useScrollableSetter, useBottomSheetScrollableCreator, createBottomSheetScrollableComponent, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback, enableLogging, } from '@gorhom/bottom-sheet';
+export type { BottomSheetHandleProps, BottomSheetBackgroundProps, BottomSheetBackdropProps, BottomSheetFooterProps, BottomSheetFlatListMethods, BottomSheetScrollViewMethods, BottomSheetSectionListMethods, BottomSheetVirtualizedListMethods, BottomSheetScrollableProps, ScrollEventsHandlersHookType, GestureEventsHandlersHookType, ScrollEventHandlerCallbackType, GestureEventHandlerCallbackType, } from '@gorhom/bottom-sheet';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/bottom-sheet/styles.d.ts

@@ -0,0 +1,11 @@
+import { ViewStyle, StyleProp } from 'react-native';
+import type { AnimateStyle } from 'react-native-reanimated';
+import type { TwigsTheme } from '../theme';
+/**
+ * Gorhom BottomSheet expects an animated-compatible style type.
+ * We narrow the allowed keys to avoid conflicts with internal layout props.
+ */
+export type AnimatedViewStyle = StyleProp<AnimateStyle<Omit<ViewStyle, 'left' | 'right' | 'top' | 'bottom' | 'position' | 'opacity' | 'flexDirection' | 'transform'>>>;
+/** Default container style shared by BottomSheet and BottomSheetModal. */
+export declare const getDefaultSheetStyle: (theme: TwigsTheme, safeAreaBottomInset: number, overrides?: ViewStyle) => AnimatedViewStyle;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/bottom-sheet/types.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import { BottomSheetProps as GorhomBottomSheetProps, BottomSheetModalProps as GorhomBottomSheetModalProps } from '@gorhom/bottom-sheet';
+/** Themed wrapper around @gorhom/bottom-sheet with a built-in header. */
+export interface BottomSheetProps extends Omit<GorhomBottomSheetProps, 'style' | 'handleStyle' | 'handleIndicatorStyle' | 'handleComponent'> {
+    /** Optional title displayed in the sheet header. */
+    title?: string;
+    style?: ViewStyle;
+    handleStyle?: ViewStyle;
+    handleIndicatorStyle?: ViewStyle;
+    headerStyle?: ViewStyle;
+}
+/** Modal variant of BottomSheet that presents on top of a backdrop. */
+export interface BottomSheetModalProps extends Omit<GorhomBottomSheetModalProps, 'children' | 'style' | 'handleStyle' | 'handleIndicatorStyle' | 'handleComponent'> {
+    /** Optional title displayed in the sheet header. */
+    title?: string;
+    children?: ReactNode;
+    style?: ViewStyle;
+    handleStyle?: ViewStyle;
+    handleIndicatorStyle?: ViewStyle;
+    headerStyle?: ViewStyle;
+    /** Backdrop press behavior: 'none', 'close', 'collapse', or a snap point index. */
+    pressBehavior?: 'none' | 'close' | 'collapse' | number;
+}
+/** Props for the themed BottomSheet drag handle and optional title row. */
+export interface BottomSheetHeaderProps {
+    animatedIndex: SharedValue<number>;
+    animatedPosition: SharedValue<number>;
+    title?: string;
+    style?: StyleProp<ViewStyle>;
+    indicatorStyle?: StyleProp<ViewStyle>;
+    headerStyle?: ViewStyle;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/box/box.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { BoxProps } from './types';
+/** Basic layout container with margin and padding shorthand props. */
+export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<View>>;
+//# sourceMappingURL=box.d.ts.map

package/lib/typescript/box/index.d.ts

@@ -0,0 +1,3 @@
+export { Box } from './box';
+export type { BoxProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/box/types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+import { MarginProps, PaddingProps, CommonStyleProps, BaseAccessibilityProps } from '../utils';
+/** Props for the Box layout container. */
+export interface BoxProps extends Omit<ViewProps, 'style'>, MarginProps, PaddingProps, CommonStyleProps, BaseAccessibilityProps {
+    children?: ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/button/button.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { ButtonProps } from './types';
+/**
+ * Pressable button with multiple size, color, and variant presets.
+ * Supports loading state, left/right icons, and icon-only mode.
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<View>>;
+//# sourceMappingURL=button.d.ts.map

package/lib/typescript/button/constants.d.ts

@@ -0,0 +1,30 @@
+import type { ButtonSize, ButtonVariant } from './types';
+export interface SizeConfig {
+    paddingHorizontal: number;
+    height: number;
+    width: number | 'auto';
+    borderRadius: number;
+    fontSize: number;
+    iconSize: number;
+    labelPaddingHorizontal: number;
+}
+export interface ColorConfig {
+    background: string;
+    text: string;
+    pressedBackground: string;
+    pressedText: string;
+    border?: string;
+    pressedBorder?: string;
+}
+export interface ColorConfigMap {
+    [key: string]: {
+        [variant in ButtonVariant]: ColorConfig;
+    };
+}
+export declare const getButtonSizeConfig: (size: ButtonSize, isIcon: boolean) => SizeConfig;
+export declare const ICON_SIZES: Record<ButtonSize, number>;
+export declare const ICON_ONLY_SIZES: Record<ButtonSize, number>;
+export declare const ICON_SPACING: Record<ButtonSize, number>;
+export declare const LINE_LOADER_WIDTH_MAP: Record<ButtonSize, number>;
+export declare const OUTLINE_BORDER_WIDTH: Record<ButtonSize, number>;
+//# sourceMappingURL=constants.d.ts.map

package/lib/typescript/button/helpers.d.ts

@@ -0,0 +1,39 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { TwigsTheme } from '../theme';
+import type { LoaderColor, LineLoaderSize, CircleLoaderSize } from '../loader';
+import type { ButtonSize, ButtonColor, ButtonVariant } from './types';
+export declare const getSizeStyles: (size: ButtonSize, isIcon: boolean) => ViewStyle;
+export declare const getColorStyles: (color: ButtonColor, variant: ButtonVariant, theme: TwigsTheme) => ViewStyle;
+export declare const getButtonStyles: ({ size, color, variant, isIcon, theme, }: {
+    size: ButtonSize;
+    color: ButtonColor;
+    variant: ButtonVariant;
+    isIcon: boolean;
+    theme: TwigsTheme;
+}) => ViewStyle;
+export declare const getTextColor: (color: ButtonColor, variant: ButtonVariant, theme: TwigsTheme) => string;
+export declare const getPressedTextColor: (color: ButtonColor, variant: ButtonVariant, theme: TwigsTheme) => string;
+export declare const getButtonTextStyles: ({ size, color, variant, theme, pressed, }: {
+    size: ButtonSize;
+    color: ButtonColor;
+    variant: ButtonVariant;
+    theme: TwigsTheme;
+    pressed?: boolean;
+}) => TextStyle;
+export declare const getIconSize: (size: ButtonSize, position: "left" | "right" | "center") => number;
+export declare const getIconContainerStyles: ({ position, size, }: {
+    position: "left" | "right" | "center";
+    size: ButtonSize;
+}) => ViewStyle;
+/**
+ * Maps a button color+variant combination to the appropriate LoaderColor.
+ * Uses a compound key lookup first (e.g. 'primary-solid' → 'bright'),
+ * then falls back to a simple color→loader mapping.
+ */
+export declare const getLoaderColorFromButton: (color: ButtonColor, variant: ButtonVariant) => LoaderColor;
+export declare const getLineLoaderSizeFromButton: (size: ButtonSize) => LineLoaderSize;
+export declare const getLineLoaderWidthFromButton: (size: ButtonSize) => number;
+export declare const getCircleLoaderSizeFromButton: (size: ButtonSize) => CircleLoaderSize;
+export declare const getPressedStyle: (color: ButtonColor, variant: ButtonVariant, theme: TwigsTheme) => ViewStyle;
+export declare const getButtonLoaderMargin: (size: ButtonSize) => number;
+//# sourceMappingURL=helpers.d.ts.map

package/lib/typescript/button/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './button';
+export type { ButtonProps, ButtonSize, ButtonColor, ButtonVariant } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/button/styles.d.ts

@@ -0,0 +1,12 @@
+export declare const buttonStyles: {
+    buttonBase: {
+        borderRadius: number;
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    buttonDisabled: {
+        opacity: number;
+    };
+};
+//# sourceMappingURL=styles.d.ts.map