@demlanide/react-lucky-components 0.1.0

package/README.md

@@ -0,0 +1,184 @@
+# @demlanide/react-lucky-components
+
+Styled React Native components extracted for reuse: **ListCell**, **Tabs** (floating glass tab bar), and tab icons. Built for Expo / React Native with TypeScript.
+
+## Contents
+
+- **ListCell** – Versatile list-cell row with two trailing modes: **switch** (animated toggle) and **navigation** (detail text + chevron). Also works as a standalone toggle when no title is provided.
+- **Tabs** – Bottom tab navigator with frosted-glass pill design; uses `@react-navigation/bottom-tabs` with a custom tab bar.
+- **Tab icons** – `GroupTabIcon`, `ActivityTabIcon`, `AccountTabIcon` (SVG).
+- **useFloatingTabBarScrollPadding** – Hook for scroll padding above the floating tab bar.
+
+## Install
+
+In your React Native / Expo app:
+
+```bash
+npm install @demlanide/react-lucky-components
+```
+
+Peer dependencies (install if not already present):
+
+- `react`, `react-native`
+- `@react-navigation/bottom-tabs`
+- `expo-blur`
+- `react-native-reanimated`
+- `react-native-safe-area-context`
+- `react-native-svg`
+
+## Usage
+
+### ListCell
+
+```tsx
+import { ListCell } from '@demlanide/react-lucky-components';
+
+// Standalone toggle (no title)
+<ListCell value={on} onValueChange={setOn} />
+
+// List cell with switch trailing (default)
+<ListCell
+  value={notifications}
+  onValueChange={setNotifications}
+  title="Notifications"
+  subtitle="About transactions, debt, new expenses"
+/>
+
+// Navigation with detail text + chevron
+<ListCell
+  trailing="navigation"
+  title="Preferred Currency"
+  detail="£ · GBR"
+  onPress={() => navigation.navigate('Currency')}
+/>
+
+// Navigation with chevron only
+<ListCell
+  trailing="navigation"
+  title="Policies and terms"
+  onPress={() => navigation.navigate('Policies')}
+/>
+```
+
+> **Migration note:** `Switch` is still exported as an alias for backward
+> compatibility. New code should use `ListCell`.
+
+### Tabs
+
+```tsx
+import {
+  Tabs,
+  GroupTabIcon,
+  ActivityTabIcon,
+  AccountTabIcon,
+  useFloatingTabBarScrollPadding,
+} from '@demlanide/react-lucky-components';
+import type { TabItem } from '@demlanide/react-lucky-components';
+
+const tabs: TabItem[] = [
+  {
+    name: 'Groups',
+    label: 'Group',
+    component: GroupsScreen,
+    icon: ({ color, size }) => <GroupTabIcon color={color} size={size} />,
+  },
+  {
+    name: 'Activity',
+    label: 'Activity',
+    component: ActivityScreen,
+    icon: ({ color, size }) => <ActivityTabIcon color={color} size={size} />,
+  },
+  {
+    name: 'Account',
+    label: 'Account',
+    component: AccountScreen,
+    icon: ({ color, size }) => <AccountTabIcon color={color} size={size} />,
+  },
+];
+
+function App() {
+  return <Tabs tabs={tabs} initialTab="Groups" />;
+}
+
+// In a tab root screen with ScrollView:
+function AccountScreen() {
+  const paddingBottom = useFloatingTabBarScrollPadding();
+  return (
+    <ScrollView contentContainerStyle={{ paddingBottom }}>
+      {/* ... */}
+    </ScrollView>
+  );
+}
+```
+
+### Theming
+
+Components use a small built-in theme (`colors.primary`, `colors.gray300`, etc.). Override via props where supported (e.g. `activeTintColor`, `inactiveTintColor` on `Tabs`; `activeTrackColor`, `inactiveTrackColor`, `thumbColor` on `ListCell`). The package also exports `colors` and `typography` from `./theme` if you need them.
+
+## Repo setup: вынести в отдельный GitHub и публикация в npm
+
+### 1. Вынести в отдельный репозиторий
+
+1. Создай новый репозиторий на GitHub (например `your-username/react-native-components`).
+2. Скопируй **содержимое** папки `packages/react-native-components` в **корень** нового репо (чтобы в корне лежали `package.json`, `src/`, `README.md`, `.storybook/`, `tsconfig.json`, `tsconfig.build.json`). Папку `node_modules` и `dist` копировать не нужно.
+3. В новом репо в `package.json`:
+   - поменяй `"name"` на свой scope или имя (например `"@your-username/react-native-components"` или `"react-native-glass-tabs"`);
+   - в `"repository"` укажи URL нового репо.
+
+### 2. Сборка и публикация в npm
+
+В корне нового репо:
+
+```bash
+npm install
+npm run build    # собирает dist/ (JS + .d.ts)
+npm publish      # для публичного пакета
+# или npm publish --access public   если имя со scope (@username/...)
+```
+
+Перед первым `npm publish` нужно залогиниться: `npm login`.  
+В npm уходит только то, что указано в `"files": ["dist", "README.md"]` — то есть собранный код и README; исходники и Storybook в пакет не попадают.
+
+### 3. Подключить пакет обратно в split-buddy
+
+**Вариант A — пакет опубликован в npm**
+
+В `mobile/package.json` добавь зависимость:
+
+```json
+"@your-username/react-native-components": "^0.1.0"
+```
+
+Потом замени импорты с `components-pack` на пакет, например:
+
+- `from '../../components-pack/Tabs'` → `from '@your-username/react-native-components'`
+- `from '../../components-pack'` (Switch) → `from '@your-username/react-native-components'`
+
+Папку/алиас `src/components-pack` в mobile можно удалить (если там только реэкспорт из этого пакета).
+
+**Вариант B — разработка до публикации (локально или с GitHub)**
+
+Локальная папка (путь относительно `mobile/`):
+
+```json
+"@your-username/react-native-components": "file:../path/to/react-native-components"
+```
+
+Или с GitHub (пока не опубликовал в npm):
+
+```json
+"@your-username/react-native-components": "github:your-username/react-native-components#main"
+```
+
+После смены зависимости выполни в `mobile/`: `npm install`. Если используешь локальный `file:`, после правок в библиотеке нужно в ней запускать `npm run build`, чтобы обновился `dist/`.
+
+## Scripts
+
+- `npm run type-check` – проверка типов (без сборки).
+- `npm run build` – сборка в `dist/` (JS + декларации). Запускается автоматически перед `npm publish` (`prepublishOnly`).
+- `npm run storybook` – Storybook в браузере (порт 6006).
+- `npm run build-storybook` – статическая сборка Storybook в `storybook-static/`.
+
+## License
+
+MIT

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,3 @@
+import type { AlertProps } from './types';
+export declare function Alert({ title, description, emoji, image, style, titleStyle, descriptionStyle, type, }: AlertProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Alert.d.ts.map

package/dist/Alert/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,WAAW,EACX,KAAK,EACL,KAAK,EACL,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,IAAa,GACd,EAAE,UAAU,2CA6BZ"}

package/dist/Alert/Alert.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image } from 'react-native';
+import { ALERT_TOKENS } from './constants';
+import { AlertCard, AlertWrapper, ContentContainer, DescriptionText, EmojiContainer, EmojiText, ImageContainer, TitleText, } from './styles';
+export function Alert({ title, description, emoji, image, style, titleStyle, descriptionStyle, type = 'info', }) {
+    return (_jsxs(AlertWrapper, { style: style, children: [_jsx(AlertCard, { type: type, children: _jsxs(ContentContainer, { children: [title != null && (_jsx(TitleText, { style: titleStyle, children: title })), description != null && (_jsx(DescriptionText, { style: descriptionStyle, children: description }))] }) }), emoji != null && (_jsx(EmojiContainer, { style: { transform: [{ rotate: ALERT_TOKENS.emoji.rotation }] }, children: _jsx(EmojiText, { children: emoji }) })), image != null && (_jsx(ImageContainer, { children: _jsx(Image, { source: image, style: { width: 85, height: 85 } }) }))] }));
+}

package/dist/Alert/constants.d.ts

@@ -0,0 +1,38 @@
+export declare const ALERT_TOKENS: {
+    readonly borderRadius: 24;
+    readonly padding: 20;
+    readonly titleDescriptionGap: 2;
+    readonly backgroundColor: "#E1EEFF";
+    readonly backgroundColorError: "#FFE2D5";
+    readonly shadowColor: "#FFFFFF";
+    readonly shadowOffset: {
+        readonly width: 0;
+        readonly height: 4;
+    };
+    readonly shadowOpacity: 1;
+    readonly shadowRadius: 20;
+    readonly elevation: 4;
+    readonly emoji: {
+        readonly fontSize: 58;
+        readonly lineHeight: 70;
+        readonly rotation: "16.92deg";
+        readonly topOffset: -27;
+        readonly rightOffset: -12;
+    };
+    readonly titleTypography: {
+        readonly fontFamily: "SF Pro";
+        readonly fontSize: 16;
+        readonly fontWeight: "500";
+        readonly lineHeight: 21;
+        readonly letterSpacing: -0.31;
+    };
+    readonly descriptionTypography: {
+        readonly fontFamily: "SF Pro";
+        readonly fontSize: 16;
+        readonly fontWeight: "400";
+        readonly lineHeight: 21;
+        readonly letterSpacing: -0.31;
+    };
+    readonly textColor: "#262626";
+};
+//# sourceMappingURL=constants.d.ts.map

package/dist/Alert/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/Alert/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCf,CAAC"}

package/dist/Alert/constants.js

@@ -0,0 +1,34 @@
+export const ALERT_TOKENS = {
+    borderRadius: 24,
+    padding: 20,
+    titleDescriptionGap: 2,
+    backgroundColor: '#E1EEFF',
+    backgroundColorError: '#FFE2D5',
+    shadowColor: '#FFFFFF',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 1,
+    shadowRadius: 20,
+    elevation: 4,
+    emoji: {
+        fontSize: 58,
+        lineHeight: 70,
+        rotation: '16.92deg',
+        topOffset: -27,
+        rightOffset: -12,
+    },
+    titleTypography: {
+        fontFamily: 'SF Pro',
+        fontSize: 16,
+        fontWeight: '500',
+        lineHeight: 21,
+        letterSpacing: -0.31,
+    },
+    descriptionTypography: {
+        fontFamily: 'SF Pro',
+        fontSize: 16,
+        fontWeight: '400',
+        lineHeight: 21,
+        letterSpacing: -0.31,
+    },
+    textColor: '#262626',
+};

package/dist/Alert/index.d.ts

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

package/dist/Alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/Alert/index.js

@@ -0,0 +1 @@
+export { Alert } from './Alert';

package/dist/Alert/styles.d.ts

@@ -0,0 +1,11 @@
+export declare const AlertWrapper: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const AlertCard: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps, {
+    type: 'info' | 'error';
+}>>;
+export declare const ContentContainer: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const TitleText: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;
+export declare const DescriptionText: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;
+export declare const EmojiContainer: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const EmojiText: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;
+export declare const ImageContainer: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/Alert/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Alert/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,+KAExB,CAAC;AAEF,eAAO,MAAM,SAAS;UAAuB,MAAM,GAAG,OAAO;GAU5D,CAAC;AAEF,eAAO,MAAM,gBAAgB,+KAE5B,CAAC;AAEF,eAAO,MAAM,SAAS,+KAOrB,CAAC;AAEF,eAAO,MAAM,eAAe,+KAO3B,CAAC;AAEF,eAAO,MAAM,cAAc,+KAI1B,CAAC;AAEF,eAAO,MAAM,SAAS,+KAGrB,CAAC;AAEF,eAAO,MAAM,cAAc,+KAI1B,CAAC"}

package/dist/Alert/styles.js

@@ -0,0 +1,49 @@
+import styled from 'styled-components/native';
+import { ALERT_TOKENS } from './constants';
+export const AlertWrapper = styled.View `
+  position: relative;
+`;
+export const AlertCard = styled.View `
+  background-color: ${({ type }) => type === 'info' ? ALERT_TOKENS.backgroundColor : ALERT_TOKENS.backgroundColorError};
+  border-radius: ${ALERT_TOKENS.borderRadius}px;
+  padding: ${ALERT_TOKENS.padding}px;
+  shadow-color: ${ALERT_TOKENS.shadowColor};
+  shadow-offset: ${ALERT_TOKENS.shadowOffset.width}px ${ALERT_TOKENS.shadowOffset.height}px;
+  shadow-opacity: ${ALERT_TOKENS.shadowOpacity};
+  shadow-radius: ${ALERT_TOKENS.shadowRadius}px;
+  elevation: ${ALERT_TOKENS.elevation};
+  overflow: visible;
+`;
+export const ContentContainer = styled.View `
+  gap: ${ALERT_TOKENS.titleDescriptionGap}px;
+`;
+export const TitleText = styled.Text `
+  font-family: ${ALERT_TOKENS.titleTypography.fontFamily};
+  font-size: ${ALERT_TOKENS.titleTypography.fontSize}px;
+  font-weight: ${ALERT_TOKENS.titleTypography.fontWeight};
+  line-height: ${ALERT_TOKENS.titleTypography.lineHeight}px;
+  letter-spacing: ${ALERT_TOKENS.titleTypography.letterSpacing}px;
+  color: ${ALERT_TOKENS.textColor};
+`;
+export const DescriptionText = styled.Text `
+  font-family: ${ALERT_TOKENS.descriptionTypography.fontFamily};
+  font-size: ${ALERT_TOKENS.descriptionTypography.fontSize}px;
+  font-weight: ${ALERT_TOKENS.descriptionTypography.fontWeight};
+  line-height: ${ALERT_TOKENS.descriptionTypography.lineHeight}px;
+  letter-spacing: ${ALERT_TOKENS.descriptionTypography.letterSpacing}px;
+  color: ${ALERT_TOKENS.textColor};
+`;
+export const EmojiContainer = styled.View `
+  position: absolute;
+  top: ${ALERT_TOKENS.emoji.topOffset}px;
+  right: ${ALERT_TOKENS.emoji.rightOffset}px;
+`;
+export const EmojiText = styled.Text `
+  font-size: ${ALERT_TOKENS.emoji.fontSize}px;
+  line-height: ${ALERT_TOKENS.emoji.lineHeight}px;
+`;
+export const ImageContainer = styled.View `
+  position: absolute;
+  top: -45px;
+  right: ${ALERT_TOKENS.emoji.rightOffset}px;
+`;

package/dist/Alert/types.d.ts

@@ -0,0 +1,20 @@
+import type { ImageSourcePropType, StyleProp, TextStyle, ViewStyle } from 'react-native';
+export interface AlertProps {
+    /** Primary heading text */
+    title?: string;
+    /** Secondary descriptive text shown below the title */
+    description?: string;
+    /** Decorative emoji displayed at the top-right corner of the card */
+    emoji?: string;
+    /** Optional image source */
+    image?: ImageSourcePropType;
+    /** Optional container style overrides */
+    style?: StyleProp<ViewStyle>;
+    /** Optional title text style overrides */
+    titleStyle?: StyleProp<TextStyle>;
+    /** Optional description text style overrides */
+    descriptionStyle?: StyleProp<TextStyle>;
+    /** Optional type of alert */
+    type?: 'info' | 'error';
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/Alert/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Alert/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzF,MAAM,WAAW,UAAU;IACzB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,yCAAyC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,0CAA0C;IAC1C,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACzB"}

package/dist/Alert/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Avatar/Avatar.d.ts

@@ -0,0 +1,3 @@
+import { AvatarProps } from './types';
+export declare function Avatar({ imageSource, name, email, size, style, backgroundColor, textColor, noDetails, shapes, onPhotoChange, testID, accessibilityLabel, }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAQtC,wBAAgB,MAAM,CAAC,EACrB,WAAW,EACX,IAAI,EACJ,KAAK,EACL,IAA0B,EAC1B,KAAK,EACL,eAA0C,EAC1C,SAA8B,EAC9B,SAAiB,EACjB,MAAM,EACN,aAAa,EACb,MAAM,EACN,kBAAkB,GACnB,EAAE,WAAW,2CA6Gb"}

package/dist/Avatar/Avatar.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Pressable } from 'react-native';
+import { AvatarContent, AvatarEmail, AvatarImage, AvatarInitials, AvatarName, AvatarNameContainer, BottomLeftShape, Container, EditBadge, TopRightShape, Wrapper, } from './styles';
+import { getAvatarInitials, EditPhotoIcon, pickFromGallery, takePhoto } from './utilities';
+import rombShape from './Shapes/romb.png';
+import { AVATAR_COLORS, DEFAULT_AVATAR_SIZE } from './consts';
+export function Avatar({ imageSource, name, email, size = DEFAULT_AVATAR_SIZE, style, backgroundColor = AVATAR_COLORS.background, textColor = AVATAR_COLORS.text, noDetails = false, shapes, onPhotoChange, testID, accessibilityLabel, }) {
+    const label = accessibilityLabel ?? (name ? `${name} avatar` : 'User avatar');
+    const editBadgeSize = 20;
+    const shapesMap = {
+        romb: rombShape,
+    };
+    const shapesNode = shapes && (_jsxs(_Fragment, { children: [_jsx(TopRightShape, { source: shapesMap[shapes], accessible: false, importantForAccessibility: "no-hide-descendants" }), _jsx(BottomLeftShape, { source: shapesMap[shapes], accessible: false, importantForAccessibility: "no-hide-descendants" })] }));
+    const avatarContentNode = (_jsx(AvatarContent, { size: size, backgroundColor: backgroundColor, borderColor: AVATAR_COLORS.border, children: imageSource ? (_jsx(AvatarImage, { source: imageSource, size: size })) : (_jsx(AvatarInitials, { size: size, textColor: textColor, children: getAvatarInitials(name) })) }));
+    const handleEditPhoto = () => {
+        if (!onPhotoChange)
+            return;
+        Alert.alert('Profile photo', 'Choose an option', [
+            {
+                text: 'Choose from gallery',
+                onPress: () => pickFromGallery(onPhotoChange),
+            },
+            {
+                text: 'Take photo',
+                onPress: () => takePhoto(onPhotoChange),
+            },
+            { text: 'Cancel', style: 'cancel' },
+        ]);
+    };
+    const avatarNode = (_jsxs(Container, { testID: testID, accessibilityRole: "image", accessibilityLabel: label, size: size, children: [shapesNode, avatarContentNode, onPhotoChange && (_jsx(EditBadge, { as: Pressable, onPress: handleEditPhoto, size: editBadgeSize, accessible: true, accessibilityRole: "button", accessibilityLabel: "Edit profile photo", importantForAccessibility: "no-hide-descendants", testID: "edit-avatar-button", backgroundColor: AVATAR_COLORS.editBadgeBackground, borderColor: AVATAR_COLORS.border, children: _jsx(EditPhotoIcon, { size: editBadgeSize, color: AVATAR_COLORS.editBadgeIcon }) }))] }));
+    const nameNode = (_jsxs(AvatarNameContainer, { children: [name && (_jsx(AvatarName, { numberOfLines: 1, children: name })), email && (_jsx(AvatarEmail, { numberOfLines: 1, children: email }))] }));
+    return (_jsxs(Wrapper, { style: style, children: [avatarNode, !noDetails && nameNode] }));
+}

package/dist/Avatar/Shapes/.map.json

@@ -0,0 +1,42 @@
+{
+  "name": "Shapes",
+  "path": "react-lucky-components/src/Avatar/Shapes",
+  "description": "Folder containing related project files for this area.",
+  "generatedAt": "2026-03-02T00:41:04.006Z",
+  "scope": {
+    "recursive": true,
+    "excludedDirectories": [
+      "node_modules",
+      "Pods",
+      "dist",
+      "storybook-static",
+      "build",
+      "coverage",
+      ".git",
+      ".next",
+      ".expo",
+      ".turbo",
+      ".gradle",
+      "DerivedData"
+    ]
+  },
+  "entries": [
+    {
+      "name": "map.json",
+      "path": "react-lucky-components/src/Avatar/Shapes/map.json",
+      "type": "file",
+      "extension": ".json",
+      "generated": true,
+      "description": "Directory map generated by Codex for this folder."
+    },
+    {
+      "name": "romb.png",
+      "path": "react-lucky-components/src/Avatar/Shapes/romb.png",
+      "type": "file",
+      "lastModified": "2026-02-14T04:46:29.289Z",
+      "extension": ".png",
+      "sizeBytes": 154445,
+      "description": "Image asset used by UI or documentation."
+    }
+  ]
+}

package/dist/Avatar/consts.d.ts

@@ -0,0 +1,21 @@
+export declare const DEFAULT_EDIT_PHOTO_COPY: {
+    alertTitle: string;
+    alertMessage: string;
+    galleryLabel: string;
+    takePhotoLabel: string;
+    cancelLabel: string;
+    permissionLibrary: string;
+    permissionCamera: string;
+    errorSelect: string;
+    errorCapture: string;
+};
+export declare const DEFAULT_AVATAR_SIZE = 40;
+export declare const FALLBACK_INITIALS = "?";
+export declare const AVATAR_COLORS: {
+    readonly background: "#E5E5EA";
+    readonly text: "#1C1C1E";
+    readonly border: "#FFFFFF";
+    readonly editBadgeBackground: "#2C2C2C";
+    readonly editBadgeIcon: "#FFFFFF";
+};
+//# sourceMappingURL=consts.d.ts.map

package/dist/Avatar/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../src/Avatar/consts.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB;;;;;;;;;;CAUnC,CAAC;AAEF,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAErC,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC"}

package/dist/Avatar/consts.js

@@ -0,0 +1,20 @@
+export const DEFAULT_EDIT_PHOTO_COPY = {
+    alertTitle: 'Profile photo',
+    alertMessage: 'Choose an option',
+    galleryLabel: 'Choose from gallery',
+    takePhotoLabel: 'Take photo',
+    cancelLabel: 'Cancel',
+    permissionLibrary: 'Please allow access to your photo library to choose a profile photo.',
+    permissionCamera: 'Please allow camera access to take a profile photo.',
+    errorSelect: 'Failed to select photo. Please try again.',
+    errorCapture: 'Failed to capture photo. Please try again.',
+};
+export const DEFAULT_AVATAR_SIZE = 40;
+export const FALLBACK_INITIALS = '?';
+export const AVATAR_COLORS = {
+    background: '#E5E5EA',
+    text: '#1C1C1E',
+    border: '#FFFFFF',
+    editBadgeBackground: '#2C2C2C',
+    editBadgeIcon: '#FFFFFF',
+};

package/dist/Avatar/index.d.ts

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

package/dist/Avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/dist/Avatar/index.js

@@ -0,0 +1 @@
+export { Avatar } from './Avatar';

package/dist/Avatar/styles.d.ts

@@ -0,0 +1,27 @@
+export declare const Wrapper: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const Container: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps, {
+    size: number;
+}>>;
+export declare const TopRightShape: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ImageProps, never>>;
+export declare const BottomLeftShape: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ImageProps, never>>;
+export declare const AvatarContent: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps, {
+    size: number;
+    backgroundColor: string;
+    borderColor: string;
+}>>;
+export declare const AvatarImage: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<import("react-native").ImageProps, {
+    size: number;
+}>>;
+export declare const AvatarInitials: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<import("react-native").TextProps, {
+    size: number;
+    textColor: string;
+}>>;
+export declare const EditBadge: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps, {
+    size: number;
+    backgroundColor: string;
+    borderColor: string;
+}>>;
+export declare const AvatarNameContainer: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").ViewProps, never>>;
+export declare const AvatarName: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;
+export declare const AvatarEmail: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<import("react-native").TextProps, never>>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/Avatar/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Avatar/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,+KAEnB,CAAC;AAEF,eAAO,MAAM,SAAS;UAAuB,MAAM;GAIlD,CAAC;AAEF,eAAO,MAAM,aAAa,gLAOzB,CAAC;AAEF,eAAO,MAAM,eAAe,gLAO3B,CAAC;AAEF,eAAO,MAAM,aAAa;UAAuB,MAAM;qBAAmB,MAAM;iBAAe,MAAM;GAQpG,CAAC;AAEF,eAAO,MAAM,WAAW;UAAwB,MAAM;GAGrD,CAAC;AAEF,eAAO,MAAM,cAAc;UAAuB,MAAM;eAAa,MAAM;GAM1E,CAAC;AAEF,eAAO,MAAM,SAAS;UAAuB,MAAM;qBAAmB,MAAM;iBAAe,MAAM;GAYhG,CAAC;AAEF,eAAO,MAAM,mBAAmB,+KAE/B,CAAC;AAEF,eAAO,MAAM,UAAU,+KAUtB,CAAC;AAEF,eAAO,MAAM,WAAW,+KASvB,CAAC"}

package/dist/Avatar/styles.js

@@ -0,0 +1,83 @@
+import styled from 'styled-components/native';
+import { typography } from '../theme';
+export const Wrapper = styled.View `
+  align-items: center;
+`;
+export const Container = styled.View `
+  position: relative;
+  width: ${({ size }) => `${size}px`};
+  height: ${({ size }) => `${size}px`};
+`;
+export const TopRightShape = styled.Image `
+  position: absolute;
+  width: 108px;
+  height: 109px;
+  top: -36px;
+  right: -35px;
+  z-index: 10;
+`;
+export const BottomLeftShape = styled.Image `
+  position: absolute;
+  width: 88px;
+  height: 89px;
+  left: -13px;
+  bottom: -13px;
+  z-index: 10;
+`;
+export const AvatarContent = styled.View `
+  width: ${({ size }) => `${size}px`};
+  height: ${({ size }) => `${size}px`};
+  border-radius: ${({ size }) => `${size / 2}px`};
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  border-width: 1px;
+  border-color: ${({ borderColor }) => borderColor};
+  overflow: hidden;
+`;
+export const AvatarImage = styled.Image `
+  width: ${({ size }) => `${size}px`};
+  height: ${({ size }) => `${size}px`};
+`;
+export const AvatarInitials = styled.Text `
+  font-size: ${({ size }) => `${Math.max(12, Math.floor(size * 0.4))}px`};
+  color: ${({ textColor }) => textColor};
+  font-weight: ${typography.fontWeight.semibold};
+  text-align: center;
+  line-height: ${({ size }) => `${size}px`};
+`;
+export const EditBadge = styled.View `
+  border-radius: 100%;
+  right: 10px;
+  bottom: 10px;
+  padding: 12px;
+  position: absolute;
+  z-index: 2;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  border-width: 1px;
+  border-color: ${({ borderColor }) => borderColor};
+`;
+export const AvatarNameContainer = styled.View `
+  margin-top: 16px;
+`;
+export const AvatarName = styled.Text `
+  overflow: hidden;
+  color: #2C2C2C;
+  text-overflow: ellipsis;
+  text-align: center;
+  font-family: "SF Pro";
+  font-size: 32px;
+  font-weight: 590;
+  letter-spacing: 0.16px;
+  margin-bottom: 4px;
+`;
+export const AvatarEmail = styled.Text `
+  overflow: hidden;
+  color: #738295;
+  text-align: center;
+  text-overflow: ellipsis;
+  font-family: "SF Pro";
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0.08px;
+`;