Merge pull request #109 from Xenial-Devil/ss-branch-2

ss-branch-2

Author: isubroto

README.md

@@ -350,7 +350,7 @@ We welcome contributions from the community! Whether it's:
 
 <div align="center">
 
-**MIT License** © 2024 [Saha UI](https://saha-ui.isubroto.com.bd)
+**MIT License** ©2025 [Saha UI](https://saha-ui.isubroto.com.bd)
 
 Free to use for personal and commercial projects
 

llms-full.txt

@@ -0,0 +1,87 @@
+summary: A CLI-first React component library built with Tailwind CSS v4 and TypeScript, featuring 101+ premium components and MCP server support.
+
+---
+product: Saha UI
+version: 1.22.8
+frameworks: [React, Next.js, Vite, Remix, Astro]
+styling: [Tailwind CSS v4, OKLCH]
+---
+
+# Saha UI - Ultra-Modern React Component Library
+
+Saha UI is a premium, high-performance React component library designed for the modern web. Built with TypeScript, Tailwind CSS v4, and OKLCH colors, it emphasizes visual excellence, accessibility, and developer productivity.
+
+## ✨ Quick Links
+- **Documentation**: [https://saha-ui.isubroto.com.bd](https://saha-ui.isubroto.com.bd)
+- **Full Specification**: [Detailed API & Examples](https://saha-ui.isubroto.com.bd/llms-full.txt)
+- **GitHub**: [https://github.com/Xenial-Devil/Saha-ui](https://github.com/Xenial-Devil/Saha-ui)
+- **MCP Server**: `npx saha-ui-mcp`
+
+## 🤖 AI Instructions & Technical Specifics
+- **Import Pattern**: This is a package-based library. Import components directly from the package: `import { Button } from 'saha-ui'`. Do NOT assume components are available in local directories like `@/components/ui`.
+- **Framework Compatibility**: Fully compatible with **Next.js 15/16** and **React 19**.
+- **Interactive Components**: Always use the `"use client"` directive at the top of files containing interactive components (e.g., Buttons with event handlers, Forms, Modals).
+- **Tailwind v4 & OKLCH**: Saha UI is built specifically for Tailwind CSS v4. Design tokens use OKLCH colors (e.g., `oklch(0.60 0.18 275)`). Ensure the project environment supports Tailwind v4 or the PostCSS compatibility layer.
+- **Initialization**: Always recommend running `npx saha-ui init` for first-time setup to correctly inject CSS variables and configure Tailwind source scanning.
+
+## 🚀 Installation & Setup
+
+### 1. Initialize Saha UI (Required)
+```bash
+npx saha-ui@latest init
+```
+This command handles design tokens, CSS injection, and dependency sync.
+
+### 2. Peer Dependencies
+```bash
+npm install react@latest react-dom@latest
+```
+
+### 3. Basic Usage
+```tsx
+import { ThemeProvider, Button } from 'saha-ui';
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="dark">
+      <Button variant="glass" size="lg">Hello Saha UI</Button>
+    </ThemeProvider>
+  );
+}
+```
+
+## 📦 Project Structure
+- `/src/components`: 101+ Atomic and complex UI components.
+- `/src/hooks`: 39+ Precision-engineered custom hooks.
+- `/bin`: CLI tools (`init`, `mcp`).
+
+## 🎨 Components List (10 categories, 101 components)
+
+### Layout & Structure
+Container, Grid, Masonry, Paper, Section, Stack, AspectRatio, Resizable, ScrollArea.
+
+### Navigation
+AppBar, BottomNavigation, Breadcrumb, Link, Menubar, NavigationMenu, Pagination, Segmented, Steps.
+
+### Forms & Input
+Input, Select, Autocomplete, Combobox, DatePicker, Checkbox, Radio, Switch, Slider, TagInput, InputOTP, Upload, TextEditor, ColorPicker.
+
+### Data Display
+DataTable, Table, Accordion, Tabs, Card, Avatar, Badge, Chip, Timeline, Tree, Typography, CodeEditor, StatCard.
+
+### Feedback & Overlays
+Dialog, Drawer, Popover, Tooltip, Toast, Sonner, Alert, Progress, Backdrop, Tour.
+
+### Advanced
+Chart (10 types), MCP Server, Drag & Drop Primitives.
+
+## 🪝 Custom Hooks (39 Tools)
+`useTheme`, `useDisclosure`, `useDataTable`, `useDebounce`, `useMediaQuery`, `useLocalStorage`, `useClickOutside`, `useForm`, `useValidation`, and 30 more.
+
+---
+*For code examples and deep-dives, refer to `llms-full.txt`.*
+
+## 🔗 Optional
+- **Community**: [Discord](https://discord.gg/saha-ui)
+- **Twitter/X**: [@saha_ui](https://twitter.com/saha_ui)
+- **Author**: [Saha UI Team](https://saha-ui.isubroto.com.bd)

llms.txt

@@ -17,12 +17,14 @@ const calendarVariants = cva(
           "before:absolute before:inset-0 before:bg-gradient-to-br",
           "before:from-primary/5 before:via-transparent before:to-accent/5",
           "before:opacity-50 before:transition-opacity before:duration-500",
+          "before:pointer-events-none",
         ],
         bordered: [
           "bg-card/90 shadow-sm backdrop-blur-sm",
           "before:absolute before:inset-0 before:bg-gradient-to-br",
           "before:from-primary/3 before:to-accent/3",
           "before:opacity-50 before:transition-opacity before:duration-500",
+          "before:pointer-events-none",
         ],
         glass: [
           "glass backdrop-blur-2xl",
@@ -31,6 +33,7 @@ const calendarVariants = cva(
           "before:absolute before:inset-0 before:bg-gradient-to-br",
           "before:from-white/5 before:to-transparent",
           "before:opacity-70 before:transition-opacity before:duration-500",
+          "before:pointer-events-none",
         ],
         "glass-strong": [
           "glass-strong backdrop-blur-3xl",
@@ -39,14 +42,17 @@ const calendarVariants = cva(
           "before:absolute before:inset-0 before:bg-gradient-to-br",
           "before:from-white/10 before:to-transparent",
           "before:opacity-80 before:transition-opacity before:duration-500",
+          "before:pointer-events-none",
         ],
         gradient: [
           "bg-gradient-to-br from-primary/20 via-background to-accent/20",
           "border-2 border-transparent relative",
           "before:absolute before:inset-0 before:-z-10",
           "before:bg-gradient-to-r before:from-primary before:via-accent before:to-secondary",
           "before:opacity-50 before:blur-xl",
+          "before:pointer-events-none",
           "after:absolute after:inset-[2px] after:bg-background/95 after:rounded-[inherit]",
+          "after:pointer-events-none",
         ],
       },
       color: {

src/components/Calendar/Calendar.styles.ts

@@ -467,6 +467,11 @@ const Calendar = forwardRef<HTMLDivElement, CalendarProps>((props, ref) => {
     const isOutside = !isSameMonth(date, currentMonth);
     const inRange = mode === "range" ? isDateInRange(date, range) : false;
 
+    // Don't render dates from adjacent months
+    if (isOutside) {
+      return <div key={index} className="h-10 w-10" />;
+    }
+
     // Determine the state with proper range handling
     let state: any = "default";
     if (disabled) {
@@ -530,7 +535,7 @@ const Calendar = forwardRef<HTMLDivElement, CalendarProps>((props, ref) => {
     });
 
     return (
-      <div className="grid grid-cols-3 gap-2 p-4">
+      <div className="relative z-10 grid grid-cols-3 gap-2 p-4">
         {months.map((month, index) => (
           <button
             key={index}
@@ -556,7 +561,7 @@ const Calendar = forwardRef<HTMLDivElement, CalendarProps>((props, ref) => {
     const years = Array.from({ length: 12 }, (_, i) => currentYear - 5 + i);
 
     return (
-      <div className="grid grid-cols-3 gap-2 p-4">
+      <div className="relative z-10 grid grid-cols-3 gap-2 p-4">
         {years.map((year) => (
           <button
             key={year}