@chrryai/chrry 1.1.78

package/README.md

@@ -0,0 +1,112 @@
+# 🍒 Chrry
+
+**A modern, cross-platform UI library for React, React Native, and Next.js**
+
+Built by the team behind [Vex](https://askvex.com) - the AI assistant that helps you get things done.
+
+## ✨ Features
+
+- 🎨 **Beautiful Components** - Modern, accessible UI components
+- 📱 **Cross-Platform** - Works on Web, iOS, Android, and Browser Extensions
+- 🎯 **TypeScript First** - Full type safety out of the box
+- 🌙 **Dark Mode** - Built-in theme support
+- 🌍 **i18n Ready** - Multi-language support included
+- ⚡ **Performance** - Optimized for speed and bundle size
+- 🎭 **Customizable** - Easy to theme and extend
+
+## 🌶️ Pepper Router
+
+Chrry pairs perfectly with **[Pepper Router](https://github.com/askvex/pepper)** - our universal router with view transitions:
+
+```bash
+npm install @askvex/pepper
+```
+
+**Features:**
+
+- ⚡ Zero-latency navigation
+- 🎨 Built-in View Transitions API
+- 📱 Works in web, React Native, and browser extensions
+- 🚀 SSR-friendly
+
+[Learn more →](https://npmjs.com/package/@askvex/pepper)
+
+## 📦 Installation
+
+```bash
+npm install @askvex/chrry
+```
+
+**Note:** Chrry is published as TypeScript source. Your bundler (Next.js, Vite, etc.) will compile it.
+
+## 🚀 Quick Start
+
+```tsx
+import { Button, Modal, Chat } from "@askvex/chrry"
+import { Star, Heart } from "@askvex/chrry/icons"
+
+function App() {
+  return (
+    <div>
+      <Button>Click me</Button>
+      <Star size={24} />
+    </div>
+  )
+}
+```
+
+## 📚 Documentation
+
+Visit [chrry.dev](https://chrry.dev) for full documentation, examples, and guides.
+
+## 🛠️ Components
+
+Chrry includes 50+ production-ready components:
+
+- **Layout**: Sidebar, Menu, Modal, Skeleton
+- **Forms**: Input, Select, Checkbox, Search
+- **Data Display**: Message, Thread, Calendar, Weather
+- **Feedback**: Loading, Toast, EmptyState
+- **Navigation**: Breadcrumbs, Tabs, Pagination
+- **And many more...**
+
+## 🎨 Theming
+
+Chrry supports custom themes and dark mode out of the box:
+
+```tsx
+import { ThemeProvider } from "@askvex/chrry/context/providers"
+
+function App() {
+  return <ThemeProvider theme="dark">{/* Your app */}</ThemeProvider>
+}
+```
+
+## 🌍 Internationalization
+
+Built-in support for multiple languages:
+
+```tsx
+import { locale } from "@askvex/chrry/locales"
+
+// Supports: en, es, fr, de, ja, ko, nl, pt, tr, zh
+```
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+## 📄 License
+
+MIT © [AskVex](https://askvex.com)
+
+## 🔗 Links
+
+- [Website](https://chrry.dev)
+- [Documentation](https://chrry.dev/docs)
+- [GitHub](https://github.com/AskVex/chrry)
+- [npm](https://www.npmjs.com/package/@askvex/chrry)
+
+---
+
+**Built with ❤️ by the Vex team**

package/Search.module.scss

@@ -0,0 +1,26 @@
+@use "./toRem.scss";
+
+.searchBoxWrapper {
+  width: 100%;
+  position: relative;
+}
+
+.searchIcon {
+  position: absolute;
+  left: toRem.toRem(12);
+  top: toRem.toRem(12);
+  color: var(--shade-6);
+  width: toRem.toRem(16);
+  height: toRem.toRem(16);
+}
+
+input.search {
+  border: toRem.toRem(1) solid var(--shade-2);
+  border-radius: var(--radius);
+  padding: toRem.toRem(10) toRem.toRem(10) toRem.toRem(10) toRem.toRem(35) !important;
+  width: 100%;
+  background-color: var(--background);
+  color: var(--foreground);
+  font-size: toRem.toRem(16);
+  transition: var(--border-transition);
+}

package/Select.module.scss

@@ -0,0 +1,32 @@
+@use "./toRem.scss";
+
+.customSelect {
+  position: relative;
+  display: inline-flex;
+
+  select {
+    appearance: none;
+    -webkit-appearance: none;
+    padding: 0.5rem 2.5rem 0.5rem 0.5rem;
+    border: toRem.toRem(1) dashed var(--accent-1);
+    border-radius: var(--radius);
+    background-color: var(--background);
+    color: var(--foreground);
+    transition: var(--border-transition);
+    cursor: pointer;
+
+    &:focus,
+    &:hover,
+    &:active {
+      border-color: var(--link-color);
+      outline: var(--link-color);
+    }
+  }
+  .icon {
+    position: absolute;
+    right: toRem.toRem(10);
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+}

package/Share.module.scss

@@ -0,0 +1,84 @@
+@use "./toRem.scss";
+
+.shareModalInputContainer,
+.collaborateInputContainer {
+  display: flex;
+  gap: toRem.toRem(10);
+}
+
+.shareModalInput,
+.collaborateInput {
+  flex: 1;
+}
+
+.collaborateFooter {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: toRem.toRem(10);
+}
+
+.share {
+  font-size: toRem.toRem(12);
+  position: relative;
+  bottom: toRem.toRem(0.5);
+}
+
+.shareModalContent {
+  display: flex;
+  flex-direction: column;
+  gap: toRem.toRem(10);
+}
+
+.collaboratorEmail {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: toRem.toRem(15);
+}
+
+.shareModalDescription {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: toRem.toRem(10);
+}
+
+.collaboratorStatus {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: toRem.toRem(5);
+  svg {
+    position: relative;
+    top: toRem.toRem(1);
+  }
+}
+
+.collaborators {
+  display: flex;
+  flex-direction: column;
+  gap: toRem.toRem(10);
+  font-size: toRem.toRem(14);
+}
+
+.collaborator {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: toRem.toRem(10);
+}
+
+.collaboratorImage {
+  border-radius: 50%;
+}
+
+.collaboratorName {
+  margin-top: 0;
+}
+
+.collaboratorActions {
+  margin-left: auto;
+}

package/Sidebar.module.scss

@@ -0,0 +1,69 @@
+@use "./toRem.scss";
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  padding: toRem.toRem(10);
+}
+
+.splash {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  background: var(--background);
+  z-index: 999999;
+
+  &.hidden {
+    display: none;
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: toRem.toRem(5);
+}
+
+.content {
+  flex: 1;
+}
+
+.footer {
+  display: flex;
+  gap: toRem.toRem(5);
+}
+
+.brandContainer {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+
+  .brand {
+    font-weight: bold;
+    font-size: toRem.toRem(15);
+  }
+}
+
+.menuButton {
+  display: flex;
+}
+
+.userButton {
+  display: flex;
+}
+
+.contentHelp {
+  font-size: toRem.toRem(26);
+  font-weight: bold;
+  margin: 0;
+  margin-top: toRem.toRem(40);
+  line-height: 1.2;
+  text-align: center;
+  align-self: center;
+  justify-self: center;
+}

package/SignIn.module.scss

@@ -0,0 +1,129 @@
+@use "./toRem.scss";
+
+.container {
+  display: flex;
+  gap: toRem.toRem(10);
+  font-size: toRem.toRem(14);
+}
+
+.signInButton {
+  display: none;
+
+  @media (min-width: toRem.toRem(800)) {
+    display: flex;
+  }
+}
+
+.video {
+  width: toRem.toRem(30);
+  height: toRem.toRem(30);
+  object-fit: cover;
+  border-radius: 50%;
+  pointer-events: none; // So clicks pass through to foreground content
+}
+
+.registerButton {
+  display: flex;
+}
+
+@keyframes slideLeft {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.signInButtons {
+  display: flex;
+  flex-direction: column;
+  gap: toRem.toRem(10);
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  z-index: 1000;
+}
+
+.switchMode {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: toRem.toRem(5);
+
+  svg {
+    display: flex;
+  }
+}
+
+.googleButton {
+  gap: toRem.toRem(10);
+  border: none;
+}
+
+.modal {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  top: 0;
+  left: 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 99999;
+  position: fixed;
+  background: var(--overlay);
+}
+
+.main {
+  margin: 0 auto;
+  width: auto;
+  padding: 0 toRem.toRem(10);
+  z-index: 3;
+  position: relative;
+  flex: 1;
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  width: auto;
+
+  .inner {
+    animation: slideUp 0.4s ease forwards;
+    position: relative;
+    min-width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    align-items: center;
+    gap: toRem.toRem(20);
+  }
+
+  .appleButton,
+  .googleButton {
+    display: flex;
+    align-items: center;
+    gap: toRem.toRem(5);
+    border-radius: 13px;
+  }
+
+  .close {
+    display: flex;
+    position: absolute;
+    top: toRem.toRem(-40);
+    border: none;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(toRem.toRem(20)); /* Start slightly below */
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0); /* End at original position */
+  }
+}

package/Skeleton.module.scss

@@ -0,0 +1,232 @@
+@use "./breakpoints.scss";
+@use "./toRem.scss";
+@use "./utils.scss";
+
+.page {
+  display: flex;
+  flex-direction: row;
+  // min-height: 100vh;
+  padding-left: 0;
+  align-items: flex-start;
+  position: relative;
+
+  @media (min-width: breakpoints.$breakpoint-mobile) {
+    padding-left: 0;
+  }
+
+  @media print {
+    padding-top: 0;
+    padding-left: 0;
+    min-height: auto;
+  }
+
+  .subscribe {
+  }
+
+  @media (min-width: breakpoints.$breakpoint-desktop) {
+    &.drawerOpen {
+      padding-left: toRem.toRem(255);
+
+      .brand {
+        left: 0;
+        font-size: toRem.toRem(18);
+      }
+
+      .subscribe {
+        left: 0;
+      }
+    }
+  }
+}
+
+.blog {
+  display: none;
+
+  @media (min-width: breakpoints.$breakpoint-mobile) {
+    display: inline-flex;
+  }
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(12.5);
+}
+
+.middle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: toRem.toRem(10);
+  svg {
+    display: flex;
+  }
+
+  &.isDrawerOpen {
+    position: relative;
+  }
+
+  display: none;
+
+  &.desktop {
+    @media (min-width: breakpoints.$breakpoint-mobile) {
+      display: flex;
+    }
+  }
+
+  &.mobile {
+    position: relative;
+    margin-bottom: toRem.toRem(10);
+    @media (max-width: breakpoints.$breakpoint-mobile) {
+      display: flex;
+    }
+  }
+}
+
+.subscribeMobileWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: toRem.toRem(10);
+
+  @media (min-width: breakpoints.$breakpoint-mobile) {
+    display: none;
+  }
+}
+
+.title {
+  font-size: toRem.toRem(22.1);
+
+  @media (min-width: breakpoints.$breakpoint-mobile) {
+    font-size: toRem.toRem(26.1);
+  }
+}
+
+.loadingContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  position: relative;
+  bottom: toRem.toRem(50);
+  height: 100dvh;
+}
+
+.main {
+  padding: toRem.toRem(10);
+  padding-top: toRem.toRem(50);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100dvh;
+  &.empty {
+    padding-top: 0;
+  }
+}
+
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.brand {
+  font-weight: bold;
+  margin: 0;
+  font-size: toRem.toRem(18);
+  position: relative;
+  line-height: 1;
+  color: var(--shade-7);
+}
+
+.subscribe,
+.signIn {
+}
+
+.signIn {
+  display: none !important;
+
+  @media (min-width: breakpoints.$breakpoint-mobile) {
+    display: flex !important;
+  }
+}
+
+.hamburgerMenu {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(12.5);
+}
+
+.brandHelp {
+  text-align: center;
+  font-size: toRem.toRem(18);
+  line-height: 1.2;
+
+  @media (min-width: breakpoints.$breakpoint-mobile) {
+    font-size: toRem.toRem(24);
+  }
+}
+
+.footer {
+  width: 100%;
+
+  @media (min-width: breakpoints.$breakpoint-mobile) {
+    max-width: breakpoints.$breakpoint-mobile;
+  }
+}
+
+.hamburgerButton {
+  position: relative;
+
+  .notification {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: toRem.toRem(10);
+    height: toRem.toRem(10);
+    border-radius: 50%;
+    background-color: var(--accent-1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: toRem.toRem(12);
+    color: var(--background);
+    box-shadow: var(--shadow);
+    animation: pulse 1s ease-in-out;
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  padding: toRem.toRem(10) toRem.toRem(10);
+
+  width: calc(100%);
+  z-index: 1000;
+  background-color: var(--background-transparent);
+  backdrop-filter: blur(toRem.toRem(2.5));
+
+  @media all and (display-mode: standalone) {
+    background-color: var(--background);
+    backdrop-filter: none;
+  }
+
+  &.standalone {
+    background-color: var(--background);
+    backdrop-filter: none;
+  }
+
+  @media print {
+    display: none !important;
+  }
+
+  &.empty {
+    position: static;
+    margin: 0;
+    padding: toRem.toRem(10) 0;
+  }
+}