@dailyautomations/ui 1.1.0 → 1.4.0

package/CHANGELOG.md

@@ -0,0 +1,100 @@
+# Changelog
+
+All notable changes to `@dailyautomations/ui` will be documented in this file.
+
+## [1.2.0] - 2025-01-30
+
+### Breaking Changes
+
+**Tailwind v4 Migration** - This release adopts Tailwind CSS v4's CSS-first configuration.
+
+#### What Changed
+
+| Before (v3) | After (v4) |
+|-------------|------------|
+| `@tailwind base/components/utilities` | `@import "tailwindcss"` |
+| Theme defined in `tailwind.config.ts` via preset | Theme defined in CSS via `@theme inline` |
+| Required `presets: [dailyPreset]` in config | No config needed - just import CSS |
+
+#### Migration Required
+
+If upgrading from v1.1.x, you must update your setup:
+
+**Old setup (v3):**
+```typescript
+// tailwind.config.ts
+import dailyPreset from "@dailyautomations/ui/tailwind-preset"
+
+export default {
+  presets: [dailyPreset],
+  content: [...]
+}
+```
+
+```css
+/* globals.css */
+@import "@dailyautomations/ui/styles/variables.css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+**New setup (v4):**
+```css
+/* globals.css - this is all you need */
+@import "tailwindcss";
+@import "@dailyautomations/ui/styles/globals.css";
+```
+
+```typescript
+// tailwind.config.ts - simplified, no preset needed
+export default {
+  content: [...]
+}
+```
+
+See [MIGRATION.md](./MIGRATION.md) for detailed upgrade instructions.
+
+### Added
+
+- `src/styles/globals.css` - Complete v4 setup with `@theme inline` directive
+- `src/styles/theme.css` - Standalone theme block for custom CSS setups
+- `./styles/theme.css` export in package.json
+
+### Changed
+
+- `tailwind-preset` export now shows deprecation warning (still works for v3)
+- Updated README.md with v4 setup as primary, v3 as legacy
+- Updated INSTALLATION.md with v4 instructions
+
+### Deprecated
+
+- `@dailyautomations/ui/tailwind-preset` - Use CSS imports for v4 projects
+
+---
+
+## [1.1.0] - 2025-01-29
+
+### Added
+
+- Page templates and examples
+- Initial component library release
+
+## [1.0.1] - 2025-01-28
+
+### Fixed
+
+- Package publishing configuration
+
+## [1.0.0] - 2025-01-28
+
+### Added
+
+- Initial release
+- Button, Card, Input, Label, Checkbox components
+- Dialog, Select, Tabs, Toast (Radix-based)
+- Skeleton, Spinner feedback components
+- Animation variants for framer-motion
+- useToast hook
+- Tailwind preset with CSS variable-based theming
+- Purple/orange dark theme system

package/INSTALLATION.md

@@ -0,0 +1,238 @@
+# @dailyautomations/ui Installation Guide
+
+## Quick Start (Tailwind v4)
+
+### 1. Install Package
+
+```bash
+npm install @dailyautomations/ui
+```
+
+Or if using this as a local workspace package:
+
+```json
+{
+  "dependencies": {
+    "@dailyautomations/ui": "workspace:*"
+  }
+}
+```
+
+### 2. Install Peer Dependencies
+
+```bash
+npm install tailwindcss@^4.0.0 react @radix-ui/react-slot
+```
+
+### 3. Import Styles
+
+In your `app/globals.css` or main CSS entry point:
+
+```css
+@import "tailwindcss";
+@import "@dailyautomations/ui/styles/globals.css";
+```
+
+This single import provides:
+- All CSS custom properties (colors, radius, etc.)
+- `@theme inline` directive for Tailwind v4
+- Base layer styles
+- Keyframe animations
+
+### 4. Use the Utilities
+
+```tsx
+import { cn } from "@dailyautomations/ui/utils"
+
+export function MyComponent() {
+  return (
+    <div className={cn(
+      "bg-primary text-primary-foreground",
+      "px-4 py-2 rounded-lg",
+      "hover:bg-primary-hover"
+    )}>
+      Purple Button
+    </div>
+  )
+}
+```
+
+## Alternative: Separate Imports
+
+If you need more control over the CSS structure:
+
+```css
+@import "tailwindcss";
+@import "@dailyautomations/ui/styles/variables.css";
+
+/* Copy from @dailyautomations/ui/styles/theme.css */
+@theme inline {
+  --color-primary: rgb(var(--primary));
+  --color-primary-foreground: rgb(var(--primary-foreground));
+  /* ... full theme definition */
+}
+
+@layer base {
+  * { border-color: rgb(var(--border)); }
+  body {
+    background-color: rgb(var(--background));
+    color: rgb(var(--foreground));
+  }
+}
+```
+
+## Dark Mode Setup
+
+### Next.js with next-themes
+
+```bash
+npm install next-themes
+```
+
+```tsx
+// app/providers.tsx
+"use client"
+
+import { ThemeProvider } from "next-themes"
+
+export function Providers({ children }) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+      {children}
+    </ThemeProvider>
+  )
+}
+
+// app/layout.tsx
+import { Providers } from "./providers"
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
+```
+
+### Dark Mode Toggle Component
+
+```tsx
+"use client"
+
+import { useTheme } from "next-themes"
+import { cn } from "@dailyautomations/ui/utils"
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <button
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      className={cn(
+        "px-4 py-2 rounded-lg",
+        "bg-secondary text-secondary-foreground",
+        "hover:bg-accent hover:text-accent-foreground"
+      )}
+    >
+      {theme === "dark" ? "🌞" : "🌙"}
+    </button>
+  )
+}
+```
+
+## Customizing the Theme
+
+### Override Radius
+
+```css
+/* globals.css - after imports */
+:root {
+  --radius: 0.5rem; /* Default is 0.625rem */
+}
+```
+
+### Override Colors
+
+```css
+/* globals.css - after imports */
+:root {
+  --primary: 37 99 235; /* Override to blue-600 */
+}
+```
+
+## Troubleshooting
+
+### "Cannot find module" Error
+
+Ensure you're using the correct import paths:
+
+```typescript
+// ✅ Correct
+import { cn } from "@dailyautomations/ui/utils"
+
+// ❌ Wrong
+import { cn } from "@dailyautomations/ui/lib/utils"
+```
+
+### CSS Variables Not Working
+
+Make sure you've imported globals.css:
+
+```css
+@import "@dailyautomations/ui/styles/globals.css";
+```
+
+### TypeScript Errors
+
+Ensure TypeScript can find the types:
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  }
+}
+```
+
+### Tailwind Classes Not Applying
+
+1. Ensure you're using Tailwind v4
+2. Check that globals.css is imported in your CSS entry point
+3. Restart your dev server
+4. Clear framework cache (e.g., `rm -rf .next`)
+
+## Verification
+
+Test your setup:
+
+```tsx
+// app/page.tsx
+import { cn } from "@dailyautomations/ui/utils"
+
+export default function Home() {
+  return (
+    <div className="p-8 space-y-4">
+      <div className={cn(
+        "bg-primary text-primary-foreground p-4 rounded-lg"
+      )}>
+        Primary (Purple)
+      </div>
+      <div className="bg-accent text-accent-foreground p-4 rounded-lg">
+        Accent (Orange)
+      </div>
+      <div className="bg-success text-success-foreground p-4 rounded-lg">
+        Success
+      </div>
+      <div className="bg-error text-error-foreground p-4 rounded-lg">
+        Error
+      </div>
+    </div>
+  )
+}
+```
+
+If you see colored boxes with the correct theme colors, you're ready to go!

package/MIGRATION.md

@@ -0,0 +1,207 @@
+# Migration Guide
+
+## Upgrading to v1.2.0 (Tailwind v4)
+
+Version 1.2.0 adopts Tailwind CSS v4's CSS-first configuration. This is a **breaking change** that requires updating your project setup.
+
+### Why This Change?
+
+Tailwind v4 moves configuration from JavaScript to CSS using the `@theme` directive. Benefits:
+- Simpler setup (just import CSS)
+- Better IDE support for theme values
+- Faster builds
+- No config file needed for theming
+
+### Prerequisites
+
+Ensure you have Tailwind CSS v4 installed:
+
+```bash
+npm install tailwindcss@^4.0.0
+```
+
+### Step-by-Step Migration
+
+#### Step 1: Update Your CSS Entry Point
+
+**Before (v3):**
+```css
+/* app/globals.css */
+@import "@dailyautomations/ui/styles/variables.css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+**After (v4):**
+```css
+/* app/globals.css */
+@import "tailwindcss";
+@import "@dailyautomations/ui/styles/globals.css";
+```
+
+That's it for most projects. The new `globals.css` includes:
+- All CSS custom properties (colors, radius, etc.)
+- `@theme inline` directive that registers colors with Tailwind
+- Base layer styles
+- Keyframe animations
+
+#### Step 2: Simplify tailwind.config.ts
+
+**Before (v3):**
+```typescript
+import type { Config } from "tailwindcss"
+import dailyPreset from "@dailyautomations/ui/tailwind-preset"
+
+const config: Config = {
+  presets: [dailyPreset],
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@dailyautomations/ui/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+}
+
+export default config
+```
+
+**After (v4):**
+```typescript
+import type { Config } from "tailwindcss"
+
+const config: Config = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    // Note: UI package content scanning may not be needed in v4
+  ],
+}
+
+export default config
+```
+
+The `presets` line is no longer needed - theme values come from CSS.
+
+#### Step 3: Verify Your Setup
+
+Create a test component:
+
+```tsx
+export function ThemeTest() {
+  return (
+    <div className="p-8 space-y-4 bg-background">
+      <div className="bg-primary text-primary-foreground p-4 rounded-lg">
+        Primary (Purple)
+      </div>
+      <div className="bg-accent text-accent-foreground p-4 rounded-lg">
+        Accent (Orange)
+      </div>
+      <div className="bg-card text-card-foreground p-4 rounded-lg border">
+        Card
+      </div>
+    </div>
+  )
+}
+```
+
+If colors render correctly, migration is complete.
+
+### Troubleshooting
+
+#### Colors Not Working
+
+**Symptom:** `bg-primary` shows no color or wrong color.
+
+**Solution:** Ensure imports are in the correct order:
+```css
+@import "tailwindcss";
+@import "@dailyautomations/ui/styles/globals.css";
+```
+
+The `@theme` directive must come after `@import "tailwindcss"`.
+
+#### Build Errors About @theme
+
+**Symptom:** `Unknown at-rule @theme` error.
+
+**Solution:** Update to Tailwind v4:
+```bash
+npm install tailwindcss@^4.0.0 @tailwindcss/postcss@^4.0.0
+```
+
+#### TypeScript Errors for Preset Import
+
+**Symptom:** TypeScript can't find `@dailyautomations/ui/tailwind-preset`.
+
+**Solution:** The preset still exists for v3 compatibility, but you don't need it for v4. Remove the import.
+
+#### Next.js Cache Issues
+
+**Symptom:** Old styles persist after migration.
+
+**Solution:** Clear the cache:
+```bash
+rm -rf .next
+npm run dev
+```
+
+### Staying on Tailwind v3
+
+If you can't upgrade to Tailwind v4 yet, the old setup still works:
+
+```typescript
+// tailwind.config.ts
+import dailyPreset from "@dailyautomations/ui/tailwind-preset"
+
+export default {
+  presets: [dailyPreset], // Shows deprecation warning but works
+  content: [...]
+}
+```
+
+```css
+/* globals.css */
+@import "@dailyautomations/ui/styles/variables.css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Note: The preset shows a deprecation warning. Plan to migrate to v4 when possible.
+
+### Custom Theme Setup
+
+If you need to customize the theme or can't import `globals.css` directly:
+
+```css
+@import "tailwindcss";
+@import "@dailyautomations/ui/styles/variables.css";
+
+/* Copy the @theme block from @dailyautomations/ui/styles/theme.css */
+@theme inline {
+  --color-primary: rgb(var(--primary));
+  --color-primary-foreground: rgb(var(--primary-foreground));
+  /* ... see theme.css for complete list */
+}
+
+/* Override specific colors after the theme block */
+:root {
+  --primary: 37 99 235; /* Change primary to blue */
+}
+```
+
+### What's New in globals.css
+
+The new `globals.css` provides everything in one import:
+
+| Feature | Description |
+|---------|-------------|
+| `@import "tailwindcss"` | Tailwind base styles |
+| `@import "./variables.css"` | CSS custom properties |
+| `@theme inline { ... }` | Registers colors/radius with Tailwind |
+| `@keyframes` | Dialog and fade animations |
+| `@layer base` | Default border color, body styles |
+
+### Questions?
+
+If you encounter issues not covered here, check:
+- [README.md](./README.md) - Full setup documentation
+- [INSTALLATION.md](./INSTALLATION.md) - Detailed installation guide

package/README.md

@@ -11,41 +11,26 @@ npm install @dailyautomations/ui
 ## Peer Dependencies
 
 ```bash
-npm install react react-dom tailwindcss @radix-ui/react-slot @radix-ui/react-dialog @radix-ui/react-select @radix-ui/react-checkbox @radix-ui/react-label @radix-ui/react-tabs @radix-ui/react-toast
+npm install react react-dom tailwindcss@^4.0.0 @radix-ui/react-slot @radix-ui/react-dialog @radix-ui/react-select @radix-ui/react-checkbox @radix-ui/react-label @radix-ui/react-tabs @radix-ui/react-toast
 ```
 
-## Setup
+## Setup (Tailwind v4)
 
-### 1. Import the CSS variables
+### 1. Import the styles in your CSS
 
-In your root layout or global CSS:
+In your `app/globals.css` or main CSS file:
 
 ```css
-@import "@dailyautomations/ui/styles/variables.css";
+@import "tailwindcss";
 @import "@dailyautomations/ui/styles/globals.css";
 ```
 
-### 2. Configure Tailwind
-
-In your `tailwind.config.ts`:
-
-```typescript
-import type { Config } from "tailwindcss"
-import dailyPreset from "@dailyautomations/ui/tailwind-preset"
-
-const config: Config = {
-  presets: [dailyPreset],
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/@dailyautomations/ui/dist/**/*.{js,ts,jsx,tsx}",
-  ],
-  // Your custom config...
-}
-
-export default config
-```
+That's it! The `globals.css` includes:
+- CSS variables for all theme colors
+- `@theme inline` directive for Tailwind v4
+- Base styles and keyframe animations
 
-### 3. Use components and utilities
+### 2. Use components and utilities
 
 ```typescript
 import { Button, Card, Input, Label } from "@dailyautomations/ui"
@@ -67,28 +52,72 @@ function MyComponent() {
 }
 ```
 
+## Alternative: Custom CSS Setup
+
+If you need more control over your CSS structure, import the pieces separately:
+
+```css
+@import "tailwindcss";
+@import "@dailyautomations/ui/styles/variables.css";
+
+/* Copy @theme block from @dailyautomations/ui/styles/theme.css */
+@theme inline {
+  --color-primary: rgb(var(--primary));
+  /* ... see theme.css for full list */
+}
+```
+
+## Legacy Setup (Tailwind v3)
+
+For Tailwind v3 projects, use the preset approach:
+
+```typescript
+// tailwind.config.ts
+import type { Config } from "tailwindcss"
+import dailyPreset from "@dailyautomations/ui/tailwind-preset"
+
+const config: Config = {
+  presets: [dailyPreset],
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@dailyautomations/ui/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+}
+
+export default config
+```
+
+And import the CSS:
+
+```css
+@import "@dailyautomations/ui/styles/variables.css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
 ## Theme Colors
 
 ### Primary (Purple - Brand Identity)
-- `bg-purple-500` - #8B5CF6
-- `text-purple-400` - Secondary text, links
-- `border-purple-500` - Focus states
+- `bg-primary` - #8B5CF6
+- `text-primary-foreground` - White text on primary
+- `bg-primary-hover` - Hover state
 
 ### Accent (Orange - CTAs)
-- `bg-orange-500` - #F97316 (Primary buttons)
-- `bg-orange-400` - Hover state
-- `bg-orange-600` - Active state
+- `bg-accent` - #F97316 (Primary buttons)
+- `bg-accent-hover` - Hover state
+- `bg-accent-active` - Active state
 
 ### Background (Dark)
-- `bg-[#0F0F14]` - Page background
-- `bg-zinc-900` - Cards, surfaces
-- `bg-zinc-800` - Elevated surfaces
+- `bg-background` - #0F0F14 (Page background)
+- `bg-card` - Card surfaces
+- `bg-popover` - Elevated surfaces
 
 ### Semantic Colors
-- Success: Green (`bg-green-950`, `text-green-400`)
-- Error: Red (`bg-red-950`, `text-red-400`)
-- Warning: Amber (`bg-amber-950`, `text-amber-400`)
-- Info: Purple (`bg-purple-950`, `text-purple-400`)
+- Success: `bg-success`, `text-success-foreground`
+- Error: `bg-error`, `text-error-foreground`
+- Warning: `bg-warning`, `text-warning-foreground`
+- Info: `bg-info`, `text-info-foreground`
 
 ## Components
 

package/dist/components/common/button.js

@@ -2,15 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn";
-const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold transition-all disabled:pointer-events-none disabled:opacity-40 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-purple-500/50 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0F0F14]", {
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold transition-all disabled:pointer-events-none disabled:opacity-40 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background", {
     variants: {
         variant: {
-            default: "bg-orange-500 text-white hover:bg-orange-400 active:bg-orange-600",
-            secondary: "bg-purple-500 text-white hover:bg-purple-400 active:bg-purple-600",
-            outline: "border-2 border-purple-500 text-purple-400 bg-transparent hover:bg-purple-500/10",
-            ghost: "text-purple-400 hover:bg-purple-500/10 hover:text-purple-300",
+            default: "bg-accent text-white hover:brightness-110 active:brightness-90",
+            secondary: "bg-primary text-white hover:brightness-110 active:brightness-90",
+            outline: "border-2 border-primary text-primary bg-transparent hover:bg-primary/10",
+            ghost: "text-primary hover:bg-primary/10 hover:brightness-110",
             destructive: "bg-red-600 text-white hover:bg-red-500 active:bg-red-700",
-            link: "text-purple-400 underline-offset-4 hover:underline hover:text-purple-300",
+            link: "text-primary underline-offset-4 hover:underline hover:brightness-110",
         },
         size: {
             default: "h-10 px-5 py-2",