golia-expo-utils 1.0.0

package/.eslintrc.js

@@ -0,0 +1,62 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: ['expo', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended'],
+  ignorePatterns: [
+    '**/node_modules/*',
+    '**/build/*',
+    '**/dist/*',
+    '**/plugin/build/*',
+    '**/ios/*',
+    '**/android/*',
+    '**/*.config.js',
+  ],
+  plugins: ['perfectionist', 'unused-imports'],
+  root: true,
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    'import/no-duplicates': 'off',
+    'import/no-unresolved': 'off',
+    'no-extend-native': 'off',
+    'no-unused-vars': 'off',
+    'perfectionist/sort-classes': [
+      'error',
+      { groups: ['property', 'method', 'unknown'], order: 'asc', type: 'natural' },
+    ],
+    'perfectionist/sort-imports': [
+      'error',
+      {
+        groups: [
+          'side-effect',
+          'style',
+          'type',
+          ['builtin', 'external'],
+          ['internal', 'tsconfig-path'],
+          ['parent', 'sibling', 'index'],
+          'unknown',
+        ],
+        internalPattern: ['^~/.+', '^@/.+'],
+        order: 'asc',
+        type: 'natural',
+      },
+    ],
+    'perfectionist/sort-interfaces': [
+      'error',
+      { groups: ['member', 'method', 'unknown'], order: 'asc', type: 'natural' },
+    ],
+    'perfectionist/sort-objects': [
+      'error',
+      { groups: ['property', 'method', 'unknown'], order: 'asc', type: 'natural' },
+    ],
+    'react/display-name': 'off',
+    'react/jsx-curly-brace-presence': ['error', { children: 'never', props: 'never' }],
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'unused-imports/no-unused-imports': 'error',
+    'unused-imports/no-unused-vars': [
+      'error',
+      { args: 'after-used', argsIgnorePattern: '^_', vars: 'all', varsIgnorePattern: '^_' },
+    ],
+  },
+  settings: { react: { version: 'detect' } },
+}

package/README.md

@@ -0,0 +1,166 @@
+# golia-expo-utils
+
+[![npm version](https://img.shields.io/npm/v/golia-expo-utils.svg)](https://www.npmjs.com/package/golia-expo-utils)
+[![Expo](https://img.shields.io/badge/Expo-SDK%2054+-000.svg)](https://expo.dev)
+[![Platform](https://img.shields.io/badge/platform-android%20|%20ios-blue.svg)](https://github.com/expo/expo)
+
+A high-performance, native UI library for Expo, featuring physics-based interactions and native components.
+
+**Key Features:**
+* 🌊 **WaterView:** A 60FPS physics-based fluid interaction component (Jetpack Compose on Android / Native on iOS).
+* 🎛 **SegmentedControl:** A truly cross-platform native segmented control. On Android, it uses Jetpack Compose to perfectly mimic the iOS physical feel and visual style (sliding pill, glassmorphism).
+* 🎨 **Native Asset Generation:** Built-in Config Plugin to automatically convert SVGs to Android Vector Drawables and iOS ImageSets.
+
+---
+
+## Installation
+
+```bash
+npm install golia-expo-utils
+```
+
+**Note:** Since this library contains native code and config plugins, you **must** use [CNG (Continuous Native Generation)](https://docs.expo.dev/workflow/prebuild/) or a development build. It will not work in Expo Go.
+
+## Configuration (Required)
+
+To enable the native icon system (for SegmentedControl) and ensure Android resources are generated correctly, you must configure the plugin in your `app.json` or `app.config.js`.
+
+1. Create a folder `assets/native-icons` in your project root.
+2. Place your `.svg` icons there (e.g., `star.svg`, `bell-ring.svg`).
+3. Add the plugin to `app.json`:
+
+```json
+{
+  "expo": {
+    "plugins": [
+      [
+        "golia-expo-utils",
+        {
+          "icons": ["star", "bell-ring", "settings"]
+        }
+      ]
+    ]
+  }
+}
+
+```
+
+Run prebuild to generate native assets:
+```bash
+npx expo prebuild
+```
+
+> **Plugin Magic 🪄**: The plugin will automatically convert your SVGs into Android Vector Drawables (XML) with `tint` support (replacing `currentColor` with black) and generate `keep.xml` to prevent resource stripping in release builds.
+
+---
+
+## Usage
+
+### 1. WaterView
+
+A physics-aware interactive view.
+
+```tsx
+import { WaterView } from 'golia-expo-utils';
+
+// ... inside your component
+<WaterView style={{ width: 300, height: 300 }}>
+  <WaterView.Effect
+    size={{ width: 80, height: 80 }}
+    bgColor="#007AFF"
+    shouldSpringBack={true}
+    restrictMode="edge" // or 'center'
+    initialOffsetX={0}
+    initialOffsetY={0}
+    onMove={(e) => console.log(e.nativeEvent)}
+  />
+</WaterView>
+
+```
+
+#### Props (WaterView.Effect)
+
+| Prop                | Type                                | Default    | Description                                                               |
+|---------------------|-------------------------------------|------------|---------------------------------------------------------------------------|
+| `size`              | `{ width: number, height: number }` | `100`      | The size of the interactive ball (in points/dp).                          |
+| `bgColor`           | `string`                            | `blue`     | The color of the ball.                                                    |
+| `shouldSpringBack`  | `boolean`                           | `false`    | Whether the ball springs back to initial position after release.          |
+| `restrictMode`      | `'edge'` \| `'center'`              | `'edge'`   | `'edge'`: Ball stays inside walls. `'center'`: Ball center stops at wall. |
+| `allowX` / `allowY` | `boolean`                           | `true`     | Lock movement axis.                                                       |
+| `initialOffsetX`    | `number`                            | `0`        | Initial X position relative to center.                                    |
+| `initialOffsetY`    | `number`                            | `0`        | Initial Y position relative to center.                                    |
+| `minX` / `maxX`     | `number`                            | `null`     | Custom boundaries for X axis.                                             |
+| `minY` / `maxY`     | `number`                            | `null`     | Custom boundaries for Y axis.                                             |
+
+---
+
+### 2. ReactSegmentedControl
+
+A native segmented control that supports icons and text on both platforms.
+
+```tsx
+import { ReactSegmentedControl } from 'golia-expo-utils';
+
+// Simple usage
+<ReactSegmentedControl
+  items={['One', 'Two', 'Three']}
+  selectedIndex={0}
+  onValueChange={(event) => console.log(event.nativeEvent.index)}
+/>
+
+// With Icons (Requires plugin setup)
+<ReactSegmentedControl
+  items={[
+    { title: 'Favorites', icon: 'star' }, // 'star' must match assets/native-icons/star.svg
+    { title: 'Recents', icon: 'clock' }
+  ]}
+  activeColor="#007AFF"
+  style={{ height: 40 }}
+/>
+
+```
+
+#### Props
+
+| Prop                  | Type       | Description                                                      |
+|-----------------------|------------|------------------------------------------------------------------|
+| `items`               | `(string   | SegmentItem)[]`                                                  | Array of strings or objects `{ title: string, icon: string }`. |
+| `selectedIndex`       | `number`   | The currently selected index.                                    |
+| `onValueChange`       | `function` | Callback when selection changes. Returns `{ value, index }`.     |
+| `activeColor`         | `string`   | Color of the selected segment indicator/text.                    |
+| `textColor`           | `string`   | Color of the unselected text.                                    |
+| `ctrlBackgroundColor` | `string`   | Background color of the control track.                           |
+| `autoWidth`           | `boolean`  | If true, segments width is determined by content size.           |
+| `hapticEnabled`       | `boolean`  | Whether to trigger haptic feedback on selection (Default: true). |
+| `enabled`             | `boolean`  | Whether the control is interactive.                              |
+
+---
+
+## Technical Details
+
+### Android Implementation
+
+* **WaterView**: Built with **Jetpack Compose**. Uses `graphicsLayer` for GPU-accelerated rendering and custom gesture detectors for low-latency, 60FPS physics interactions.
+* **SegmentedControl**: Built with **Jetpack Compose**. Instead of using standard Material components, this is a fully custom implementation that replicates the **iOS look and feel** (sliding animations, spring physics, glassmorphism) using Compose's animation and drawing APIs.
+
+### iOS Implementation
+
+* **WaterView**: Built with UIKit and native physics engine.
+* **SegmentedControl**: Custom implementation wrapping `UISegmentedControl` with image composition support.
+
+---
+
+## Troubleshooting
+
+**Icons not showing on Android?**
+
+1. Ensure your SVG is in `assets/native-icons/`.
+2. Ensure the filename is in `app.json` plugin config.
+3. Run `npx expo prebuild --clean --platform android` to regenerate resources.
+4. The plugin automatically converts `currentColor` to `#000000` to allow native tinting. Ensure your SVG is valid.
+
+---
+
+## License
+
+MIT

package/android/.gradle/buildOutputCleanup/cache.properties

@@ -0,0 +1,2 @@
+#Mon Jan 12 17:53:59 JST 2026
+gradle.version=9.0-milestone-1

package/android/.gradle/config.properties

@@ -0,0 +1,2 @@
+#Mon Jan 12 17:53:54 JST 2026
+java.home=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home

package/android/.idea/AndroidProjectSystem.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AndroidProjectSystem">
+    <option name="providerId" value="com.android.tools.idea.GradleProjectSystem" />
+  </component>
+</project>

package/android/.idea/appInsightsSettings.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AppInsightsSettings">
+    <option name="tabSettings">
+      <map>
+        <entry key="Android Vitals">
+          <value>
+            <InsightsFilterSettings>
+              <option name="connection">
+                <ConnectionSetting>
+                  <option name="appId" value="com.focusai.app.mobile" />
+                </ConnectionSetting>
+              </option>
+              <option name="signal" value="SIGNAL_UNSPECIFIED" />
+              <option name="timeIntervalDays" value="SEVEN_DAYS" />
+              <option name="visibilityType" value="ALL" />
+            </InsightsFilterSettings>
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
+</project>