@chrryai/chrry 1.1.78

package/icons/README.md

@@ -0,0 +1,150 @@
+# Platform-Aware Icon System
+
+1. Smart Meeting Scheduler 🗓️
+   Ask: "Schedule a team standup meeting tomorrow at 10 AM for 30 minutes with the title 'Daily Sync' and invite emma.brown@google.com"
+
+Why it's impressive: Shows AI understanding multiple parameters (time, duration, title, attendees) and creating a complete calendar event in one command.
+
+2. Conflict Detector ⚠️
+   Ask: "Do I have any meetings between 2 PM and 5 PM today? If yes, can you reschedule my 3 PM call to tomorrow same time?"
+
+Why it's impressive: Demonstrates AI reading calendar, detecting conflicts, and proactively suggesting/making changes.
+
+3. Weekly Overview 📊
+   Ask: "What's my schedule for this week? Highlight any back-to-back meetings and suggest breaks I should add."
+
+Why it's impressive: Shows AI analyzing patterns, providing insights, and making smart recommendations for work-life balance.
+
+4. Natural Language Event Creation 🎯
+   Ask: "Block my calendar every Friday afternoon from 2-5 PM for the next month as 'Focus Time - No Meetings' and mark it as busy"
+
+Why it's impressive: Demonstrates recurring event creation, natural language understanding, and calendar blocking strategy - perfect for productivity.
+
+Pro tip for video: Start with #4 (most impressive), then show #1 (practical), then #3 (analytical), and end with #2 (problem-solving). This creates a compelling narrative from "wow" to "useful" to "intelligent."
+
+This directory contains a platform-aware icon system that automatically uses the correct icon library based on the execution environment.
+
+## 🎯 Features
+
+- **Automatic Platform Detection**: Uses `lucide-react` for web and `lucide-react-native` for native
+- **Single Import Path**: Import from `chrry/icons` regardless of platform
+- **Type-Safe**: Full TypeScript support with `IconProps`
+- **Zero Configuration**: React Native Metro and Next.js handle it automatically
+
+## 📦 Usage
+
+```typescript
+import { Star, Heart, Settings, Menu } from 'chrry/icons'
+
+function MyComponent() {
+  return (
+    <div>
+      <Star size={24} color="gold" />
+      <Heart size={24} color="red" />
+      <Settings size={24} />
+    </div>
+  )
+}
+```
+
+## 🔧 How It Works
+
+The system uses platform-specific file extensions that bundlers automatically resolve:
+
+### File Structure
+
+```
+icons/
+  ├── index.tsx         # Default (web) - used by Next.js
+  ├── index.web.tsx     # Web-specific exports (lucide-react)
+  └── index.native.tsx  # Native-specific exports (lucide-react-native)
+```
+
+### Platform Resolution
+
+- **Next.js**: Uses `index.tsx` → `index.web.tsx` → `lucide-react`
+- **React Native Metro**: Uses `index.native.tsx` → `lucide-react-native`
+
+This approach ensures:
+
+- ✅ No React Native dependencies in web builds
+- ✅ Proper native icons on ios/Android
+- ✅ Single import path for all platforms
+
+## 🎨 Available Icons
+
+All Lucide icons are available with consistent naming:
+
+- `Star`, `Heart`, `Menu`, `Settings`
+- `CircleX` (mapped from `X`)
+- `CircleArrowLeft` (mapped from `ArrowLeft`)
+- `ImageIcon` (mapped from `Image`)
+- `VideoIcon` (mapped from `Video`)
+- `FileIcon` (mapped from `File`)
+- `TextIcon` (mapped from `Text`)
+- And 100+ more...
+
+## 🔄 Migration from Tamagui
+
+If you're migrating from `@tamagui/lucide-icons`:
+
+```typescript
+// Before
+import { Star, Heart } from "@tamagui/lucide-icons"
+
+// After
+import { Star, Heart } from "./icons"
+```
+
+Run the replacement script:
+
+```bash
+cd packages/ui
+chmod +x replace-icons.sh
+./replace-icons.sh
+```
+
+## 🚀 Benefits
+
+1. **No React Native Dependencies on Web**: Avoids `react-native-svg` build errors in Next.js
+2. **True Cross-Platform**: Works seamlessly on web, ios, Android, and browser extensions
+3. **Automatic Resolution**: Bundlers handle platform detection at build time
+4. **Type Safety**: Full TypeScript support with proper types for each platform
+
+## 📝 Adding New Icons
+
+All Lucide icons are automatically available via `export *`. Just import and use:
+
+```typescript
+import { NewIcon } from 'chrry/icons'
+
+// Works immediately if the icon exists in lucide-react/lucide-react-native
+<NewIcon size={24} />
+```
+
+No manual exports needed!
+
+## 🐛 Troubleshooting
+
+### TypeScript errors about missing icons
+
+- Make sure both `lucide-react` and `lucide-react-native` are installed
+- Run `npm install` in the `packages/ui` directory
+
+### Icons not rendering on web
+
+- Verify the icon exists in `lucide-react`
+- Check the import path: `from 'chrry/icons'`
+- Clear Next.js cache: `rm -rf .next && npm run dev`
+
+### Icons not rendering on native
+
+- Verify the icon exists in `lucide-react-native`
+- Check that Metro bundler is resolving `index.native.tsx`
+- Clear Metro cache: `npm start -- --reset-cache`
+
+### Build errors about react-native-svg
+
+- This should not happen with the new structure
+- Verify `index.tsx` exports from `./index.web` (not direct lucide-react-native import)
+- Ensure Next.js is not trying to bundle native files

package/package.json

@@ -0,0 +1,118 @@
+{
+  "name": "@chrryai/chrry",
+  "version": "1.1.78",
+  "description": "A modern, cross-platform UI library for React, React Native, and Next.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./*": "./*"
+  },
+  "files": [
+    "dist",
+    "**/*.css",
+    "**/*.scss",
+    "README.md"
+  ],
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chrryai/chrry.git"
+  },
+  "keywords": [
+    "react",
+    "react-native",
+    "nextjs",
+    "ui",
+    "components",
+    "cross-platform",
+    "typescript"
+  ],
+  "author": "Iliyan Velinov",
+  "license": "AGPL-3.0",
+  "bugs": {
+    "url": "https://github.com/chrryai/chrry/issues"
+  },
+  "homepage": "https://chrry.dev",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint . --max-warnings 1500",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
+    "@types/node": "^22.15.3",
+    "@types/react": "19.1.12",
+    "eslint": "^9.34.0",
+    "tsup": "^8.0.0",
+    "typescript": "5.8.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@lobehub/icons": "^2.23.0",
+    "@react-native-community/netinfo": "^11.4.1",
+    "@react-spring/native": "^10.0.3",
+    "@react-spring/web": "^10.0.3",
+    "@stripe/stripe-js": "^7.7.0",
+    "@tanstack/react-query": "^5.83.0",
+    "@types/chrome": "^0.1.1",
+    "@types/nprogress": "^0.2.3",
+    "@types/react-dom": "19.1.1",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/sanitize-html": "^2.16.0",
+    "@uidotdev/usehooks": "^2.4.1",
+    "ai": "^5.0.0",
+    "antd": "^5.26.7",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "emoji-picker-react": "^4.14.0",
+    "i18next": "^25.3.4",
+    "javascript-time-ago": "^2.5.11",
+    "lucide-react": "^0.534.0",
+    "lucide-react-native": "^0.462.0",
+    "markdown-to-jsx": "^7.7.13",
+    "next-auth": "^4.24.11",
+    "next-themes": "^0.4.6",
+    "nextjs-toploader": "^3.8.16",
+    "nprogress": "^0.2.0",
+    "react": "^19.1.1",
+    "react-audio-play": "^1.0.4",
+    "react-big-calendar": "^1.19.4",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^19.1.1",
+    "react-hook-form": "^7.63.0",
+    "react-hot-toast": "^2.5.2",
+    "react-i18next": "^15.6.1",
+    "react-icons": "^5.5.0",
+    "react-intersection-observer": "^9.16.0",
+    "react-markdown": "^10.1.0",
+    "react-native-reanimated": "^4.1.3",
+    "react-select": "^5.10.2",
+    "react-syntax-highlighter": "^15.6.1",
+    "react-use-cookie": "^1.6.1",
+    "remark-gfm": "^4.0.1",
+    "sanitize-html": "^2.17.0",
+    "sass": "^1.90.0",
+    "superjson": "^2.2.2",
+    "use-debounce": "^10.0.5",
+    "usehooks-ts": "^3.1.1",
+    "zod": "^4.1.11"
+  }
+}

package/styles/view-transitions.css

@@ -0,0 +1,207 @@
+/* View Transitions API - Optimized for in-page transitions */
+
+/* ============================================
+   DEFAULT: Smooth page transitions
+   Desktop: Slide up/down
+   Mobile: Slide left/right
+   ============================================ */
+
+/* Desktop: Smooth slide-up animation for page changes */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 0.3s;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+::view-transition-old(root) {
+  animation-name: slide-down;
+}
+
+::view-transition-new(root) {
+  animation-name: slide-up;
+}
+
+/* Mobile: Slide aside (left/right) for more natural mobile feel */
+@media (max-width: 768px) {
+  ::view-transition-old(root) {
+    animation-name: slide-to-left;
+  }
+
+  ::view-transition-new(root) {
+    animation-name: slide-from-right;
+  }
+}
+
+/* ============================================
+   KEYFRAMES - Reusable animations
+   ============================================ */
+
+@keyframes fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes scale-up {
+  from {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+}
+
+@keyframes scale-down {
+  to {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-down {
+  to {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-to-left {
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-from-right {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+/* ============================================
+   IN-PAGE TRANSITIONS (Always enabled)
+   ============================================ */
+
+@media (prefers-reduced-motion: no-preference) {
+  /* App image - smooth morph transition */
+  ::view-transition-old(app-image),
+  ::view-transition-new(app-image) {
+    animation-duration: 0.4s;
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: clip;
+    mix-blend-mode: normal;
+  }
+
+  ::view-transition-old(app-image) {
+    animation-name: scale-down;
+  }
+
+  ::view-transition-new(app-image) {
+    animation-name: scale-up;
+  }
+
+  /* App title - smooth slide and fade */
+  ::view-transition-old(app-title),
+  ::view-transition-new(app-title) {
+    animation-duration: 0.35s;
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  ::view-transition-old(app-title) {
+    animation-name: slide-down;
+  }
+
+  ::view-transition-new(app-title) {
+    animation-name: slide-up;
+  }
+
+  /* Image enlargement - smooth scale transition */
+  ::view-transition-old(image-enlarge),
+  ::view-transition-new(image-enlarge) {
+    animation-duration: 0.3s;
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: clip;
+  }
+
+  ::view-transition-old(image-enlarge) {
+    animation-name: scale-down;
+  }
+
+  ::view-transition-new(image-enlarge) {
+    animation-name: scale-up;
+  }
+
+  /* Modal/Dialog transitions */
+  ::view-transition-old(modal),
+  ::view-transition-new(modal) {
+    animation-duration: 0.25s;
+    animation-timing-function: ease-in-out;
+  }
+
+  ::view-transition-old(modal) {
+    animation-name: fade-out;
+  }
+
+  ::view-transition-new(modal) {
+    animation-name: scale-up;
+  }
+
+  /* Content sections - subtle fade */
+  ::view-transition-old(content-section),
+  ::view-transition-new(content-section) {
+    animation-duration: 0.2s;
+    animation-timing-function: ease-in-out;
+  }
+
+  ::view-transition-old(content-section) {
+    animation-name: fade-out;
+  }
+
+  ::view-transition-new(content-section) {
+    animation-name: fade-in;
+  }
+}
+
+/* ============================================
+   OPTIONAL: Enable full-page transitions
+   Add .page-transitions class to <html> or <body>
+   ============================================ */
+
+.page-transitions {
+  @media (prefers-reduced-motion: no-preference) {
+    ::view-transition-old(root),
+    ::view-transition-new(root) {
+      animation-duration: 0.2s;
+      animation-timing-function: ease-in-out;
+    }
+
+    ::view-transition-old(root) {
+      animation-name: fade-out;
+    }
+
+    ::view-transition-new(root) {
+      animation-name: fade-in;
+    }
+
+    /* Main content with page transitions enabled */
+    ::view-transition-old(main-content) {
+      animation: fade-out 0.15s ease-out;
+    }
+
+    ::view-transition-new(main-content) {
+      animation: fade-in 0.2s ease-in;
+    }
+  }
+}

package/toRem.scss

@@ -0,0 +1,6 @@
+@use "sass:math";
+
+@function toRem($value) {
+  $remValue: math.div($value, 16) + rem;
+  @return $remValue;
+}

package/utils.module.scss

@@ -0,0 +1,116 @@
+@use "./toRem.scss";
+
+// Utility classes for cross-platform styling
+.button {
+  padding: toRem.toRem(8) toRem.toRem(12);
+  background-color: var(--link-color);
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+  box-shadow: var(--shadow);
+  font-size: toRem.toRem(14);
+  line-height: 1.15;
+
+  &:hover {
+    background-color: var(--accent-5);
+    color: #fff;
+  }
+
+  &:active {
+    transform: translateY(toRem.toRem(1.2));
+  }
+
+  &:disabled {
+    cursor: default;
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+}
+
+.link {
+  text-decoration: none;
+  color: var(--accent-6);
+  cursor: pointer;
+  background-color: transparent;
+  box-shadow: none;
+  padding: 0;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+
+  &:hover {
+    text-decoration: none;
+    color: var(--accent-5);
+    background-color: transparent;
+  }
+
+  &:active {
+    transform: translateY(toRem.toRem(1.2));
+  }
+}
+
+.small {
+  padding: toRem.toRem(5.6) toRem.toRem(8.8);
+  font-size: toRem.toRem(14);
+}
+
+.xSmall {
+  padding: toRem.toRem(4) toRem.toRem(7.2);
+  font-size: toRem.toRem(12);
+}
+
+.large {
+  padding: toRem.toRem(8) toRem.toRem(20);
+  font-size: toRem.toRem(16);
+}
+
+.transparent {
+  background-color: var(--background);
+  color: var(--foreground);
+  border: toRem.toRem(1) solid var(--shade-2);
+  box-shadow: none;
+
+  &:hover {
+    background-color: var(--shade-1);
+    color: var(--foreground);
+  }
+}
+
+.inverted {
+  background-color: var(--foreground);
+  color: var(--background);
+  border: toRem.toRem(1) solid var(--shade-2);
+  box-shadow: none;
+
+  &:hover {
+    background-color: var(--shade-7);
+    color: var(--background);
+  }
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: toRem.toRem(5);
+  flex-wrap: wrap;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: toRem.toRem(5);
+}
+
+.left {
+  margin-right: auto;
+}
+
+.right {
+  margin-left: auto;
+}

package/utils.scss

@@ -0,0 +1,88 @@
+@use "./toRem.scss";
+
+@function toRem($value) {
+  $remValue: math.div($value, 16) + rem;
+  @return $remValue;
+}
+
+@mixin respect-reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+@keyframes slideLeft {
+  from {
+    opacity: 0;
+    transform: translateX(toRem.toRem(-20)); /* Start slightly left */
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0); /* End at original position */
+  }
+}
+
+@keyframes slideRight {
+  from {
+    opacity: 0;
+    transform: translateX(toRem.toRem(20)); /* Start slightly right */
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0); /* End at original position */
+  }
+}
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(toRem.toRem(20)); /* Start slightly below */
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0); /* End at original position */
+  }
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.9);
+    opacity: 0.7;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.9);
+    opacity: 0.7;
+  }
+}
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+@keyframes wiggle {
+  0%,
+  100% {
+    transform: rotate(-5deg);
+  }
+  50% {
+    transform: rotate(5deg);
+  }
+}