@dailyautomations/ui 1.0.0

package/BRAND.md

@@ -0,0 +1,543 @@
+# Daily X Brand Guidelines
+
+**Version:** 2.0.0 | **Last Updated:** 2026-01-29
+
+_Comprehensive guide to maintaining brand consistency across all Daily X products_
+
+---
+
+## Table of Contents
+
+- [Brand Identity](#brand-identity)
+- [Color Palette](#color-palette)
+- [Typography](#typography)
+- [Logo Usage](#logo-usage)
+- [Voice & Tone](#voice-tone)
+- [Component Patterns](#component-patterns)
+- [Spacing & Layout](#spacing-layout)
+- [Accessibility](#accessibility)
+- [Motion & Animation](#motion-animation)
+- [Icon System](#icon-system)
+- [Product Applications](#product-applications)
+
+---
+
+## Brand Identity
+
+### Brand Essence
+
+Daily X represents intelligent automation that simplifies complex workflows. Our brand is built on innovation, reliability, and user empowerment. We transform tedious daily tasks into streamlined, AI-powered experiences that save time and deliver results.
+
+### Brand Promise
+
+Daily automates knowledge work, transforming how teams capture, organize, and leverage information across all their projects and applications.
+
+### Brand Values
+
+| Value | Description |
+|-------|-------------|
+| **Innovation** 💡 | We push boundaries with AI technology to solve real-world problems in creative ways. |
+| **Reliability** ✔️ | Our tools consistently deliver accurate results with enterprise-grade security. |
+| **Efficiency** ⚡ | We automate repetitive tasks to save users time and boost productivity. |
+| **Intelligence** 🧠 | Our AI learns and adapts to provide increasingly personalized experiences. |
+
+### Brand Pillars
+
+**Intelligent & Adaptive**
+We understand context. Our tools learn from patterns, adapt to workflows, and anticipate needs—making intelligence feel intuitive, not overwhelming.
+
+**Transparent & Trustworthy**
+We're clear about what we do with data. No dark patterns. No confusion. Users control their information and understand how it's used.
+
+**Practical & Fast**
+We solve real problems today, not imagined ones tomorrow. Speed matters. Friction kills adoption. Every feature earns its place.
+
+### Visual Philosophy
+
+Daily's design is **bold, distinctive, and data-focused**. We use a dark foundation with vibrant purple and orange accents to stand apart from generic SaaS aesthetics. When we add visual weight, it signals importance. Color is semantic—it conveys meaning and energy.
+
+Our interfaces should feel powerful yet approachable: dark backgrounds that reduce eye strain, with purple for brand identity and orange for action. No safe blues. No generic gradients.
+
+---
+
+## Color Palette
+
+### Primary Colors
+
+| Color Name | Hex | Usage |
+|------------|-----|-------|
+| **Primary Purple** | `#8B5CF6` | Brand identity, primary elements, headings |
+| **Accent Orange** | `#F97316` | CTAs, highlights, interactive elements |
+| **Dark Background** | `#0F0F14` | Page backgrounds, cards, surfaces |
+| **Text Primary** | `#FFFFFF` | Main text on dark backgrounds |
+
+### Extended Palette
+
+| Color Name | Hex | Usage |
+|------------|-----|-------|
+| Light Purple | `#A78BFA` | Hover states, secondary text |
+| Dark Purple | `#7C3AED` | Active states, pressed buttons |
+| Light Orange | `#FB923C` | Hover states for CTAs |
+| Dark Orange | `#EA580C` | Active states for CTAs |
+
+### CSS Variables
+
+```css
+:root {
+  /* Primary */
+  --primary: #8B5CF6;
+  --primary-hover: #A78BFA;
+  --primary-active: #7C3AED;
+
+  /* Accent */
+  --accent: #F97316;
+  --accent-hover: #FB923C;
+  --accent-active: #EA580C;
+
+  /* Backgrounds */
+  --background: #0F0F14;
+  --surface: #1a1a24;
+  --surface-elevated: #252532;
+
+  /* Text */
+  --text-primary: #FFFFFF;
+  --text-secondary: #A1A1AA;
+  --text-muted: #71717A;
+
+  /* Borders */
+  --border: #27272A;
+  --border-focus: #8B5CF6;
+}
+```
+
+### Semantic Colors
+
+**Success** — Positive feedback, confirmations, completed operations
+```
+Background: #052e16
+Text:       #4ade80
+Border:     #166534
+```
+
+**Error** — Problems that need resolution, destructive actions
+```
+Background: #7f1d1d
+Text:       #f87171
+Border:     #991b1b
+```
+
+**Warning** — Caution, review required, not yet an error
+```
+Background: #78350f
+Text:       #fbbf24
+Border:     #92400e
+```
+
+**Info** — Contextual help, tips, new features
+```
+Background: #1e1b4b
+Text:       #a78bfa
+Border:     #3730a3
+```
+
+### Color Usage Guidelines
+
+#### Do's
+- ✅ Use purple as the primary brand color
+- ✅ Use orange for CTAs and highlights
+- ✅ Maintain dark backgrounds for digital products
+- ✅ Use gradients to connect purple and orange
+
+#### Don'ts
+- ❌ Don't use blue as a primary color
+- ❌ Don't alter the hex values of brand colors
+- ❌ Don't use light backgrounds for digital products
+- ❌ Don't use more than 3 colors in a single design
+
+---
+
+## Typography
+
+### Primary Font Family
+
+**Inter** is our primary typeface for all Daily X products. Its clean, modern aesthetic pairs perfectly with our brand values of innovation and efficiency.
+
+```css
+--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+--font-mono: 'JetBrains Mono', Monaco, 'Courier New', monospace;
+```
+
+### Type Scale
+
+| Level | Size | Weight | Usage |
+|-------|------|--------|-------|
+| **Display** | 48px (3rem) | 800 (ExtraBold) | Hero headlines, landing pages |
+| **H1** | 32px (2rem) | 700 (Bold) | Page titles |
+| **H2** | 24px (1.5rem) | 600 (SemiBold) | Section headers |
+| **H3** | 20px (1.25rem) | 600 (SemiBold) | Subsections |
+| **H4** | 16px (1rem) | 600 (SemiBold) | Card titles |
+| **Body** | 16px (1rem) | 400 (Regular) | Main content |
+| **Small** | 14px (0.875rem) | 400 (Regular) | Secondary text |
+| **Tiny** | 12px (0.75rem) | 400 (Regular) | Timestamps, captions |
+
+### Typography Hierarchy
+
+- **Headlines:** Use bold, oversized headlines to establish hierarchy and confidence. Headlines should be concise and impactful.
+- **Body Text:** Keep body text clean and readable with adequate line height. Use shorter paragraphs to improve scannability.
+- **UI Elements:** Use consistent font weights for buttons, labels, and navigation elements. Maintain clear visual hierarchy.
+- **Code/Technical:** Use JetBrains Mono for code snippets, technical documentation, and data displays.
+
+### Line Height
+
+- **Headings:** 1.2 (tight, confident)
+- **Body paragraphs:** 1.5 (readable, comfortable)
+- **Dense tables/lists:** 1.4 (slightly tighter than body)
+
+### Usage Rules
+
+**DO:**
+- Use H1 sparingly—usually once per page
+- Never skip heading levels (H1 → H2 → H3)
+- For long-form content, use 65-75 characters per line
+- Increase line height (1.6–1.8) for accessibility
+
+**DON'T:**
+- Use H5/H6 (use bold body text instead)
+- Mix font families per page
+- Set text smaller than 12px
+- Justify text
+
+---
+
+## Logo Usage
+
+### Logo Variations
+
+- **Primary Logo:** daily x wordmark
+- **Icon Only:** Stylized "d" mark
+- **Product Logos:** dailyreach.ai, dailyseo.ai, etc.
+
+### Logo Usage Guidelines
+
+#### Do's
+- ✅ Maintain clear space around the logo
+- ✅ Use the full-color logo on dark backgrounds
+- ✅ Scale proportionally
+- ✅ Use product-specific logos for individual products
+
+#### Don'ts
+- ❌ Don't alter the logo proportions
+- ❌ Don't change the logo colors
+- ❌ Don't add effects or shadows
+- ❌ Don't place the logo on busy backgrounds
+
+---
+
+## Voice & Tone
+
+### Brand Voice Characteristics
+
+| Quality | Description |
+|---------|-------------|
+| **Intelligent** 🧠 | We communicate with confidence and expertise, using precise language that demonstrates our AI knowledge without being overly technical. |
+| **Efficient** ⚡ | Our communication is direct and to the point. We respect our users' time by delivering clear, concise messages. |
+| **Supportive** 🛎️ | We're approachable and helpful, guiding users through complex processes with clear instructions and encouragement. |
+| **Forward-thinking** 🔮 | We communicate with optimism about the future of AI and how our tools will transform workflows for the better. |
+
+### Tone Varies by Context
+
+| Context | Tone | Example |
+|---------|------|---------|
+| Error message | Helpful, empathetic | "We couldn't save your work. Try refreshing the page—if it persists, contact support@daily.com" |
+| Success feedback | Clear, brief | "4 documents synced" |
+| Onboarding | Welcoming, confident | "You're set up. Now connect your first data source." |
+| Feature announcement | Excited, clear | "Real-time collaboration is live. Invite teammates to work together instantly." |
+| Documentation | Technical, precise | "Pass `workspaceId` as a string. Format: UUID v4." |
+| Warning/Confirmation | Direct, respectful | "This will sync 500 documents. This takes ~2 minutes. Ready?" |
+
+### Writing Guidelines
+
+#### Do's
+- ✅ Use active voice
+- ✅ Focus on benefits, not just features
+- ✅ Use simple, direct language
+- ✅ Break up long paragraphs
+- ✅ Address users as "you"
+- ✅ Use contractions ("we're", "don't", "it's")
+- ✅ Be specific: "Reduced sync time from 5 minutes to 30 seconds"
+
+#### Don'ts
+- ❌ Don't use overly technical jargon
+- ❌ Don't make exaggerated claims
+- ❌ Don't use passive voice
+- ❌ Don't be overly casual
+- ❌ Don't use multiple exclamation marks
+- ❌ Don't assume technical knowledge
+
+### Example Copy Patterns
+
+**Feature Introduction:**
+- DO: "Real-time collaboration is here. Invite teammates and watch changes appear instantly."
+- DON'T: "Collaboration functionality has been enabled for users to interact synchronously."
+
+**Error Message:**
+- DO: "Email already registered. Try logging in instead →"
+- DON'T: "Error 409: Conflict"
+
+**Button Label:**
+- DO: "Create workspace", "Sync now", "Invite teammates"
+- DON'T: "OK", "Submit", "Confirm action"
+
+---
+
+## Component Patterns
+
+### Buttons
+
+**Primary Button** — Main call-to-action
+```
+Appearance: Orange background, white text, rounded corners
+States:
+  Default:   #F97316 bg, white text
+  Hover:     #FB923C bg (lighter)
+  Active:    #EA580C bg (darker)
+  Disabled:  40% opacity
+  Loading:   Show spinner, disable click
+```
+
+**Secondary Button** — Alternative actions
+```
+Appearance: Purple background or outline
+States:
+  Default:   #8B5CF6 bg or transparent with purple border
+  Hover:     #A78BFA bg
+  Active:    #7C3AED bg
+  Disabled:  40% opacity
+```
+
+**Ghost Button** — Low-emphasis actions
+```
+Appearance: Transparent background, purple text
+States:
+  Default:   No background, purple text
+  Hover:     Subtle purple/10 background
+```
+
+**Button Sizing & Spacing**
+- **Minimum height:** 44px (touch-friendly)
+- **Padding:** 12px horizontal, 8px vertical
+- **Icon + text:** 8px gap
+- **Icon-only button:** 40x40px minimum
+- **Multiple buttons:** 8px gap between
+
+### Forms
+
+**Input Fields**
+```
+Height:       40px
+Background:   var(--surface)
+Border:       1px solid var(--border)
+Border Radius: 6px
+Focus:        Purple focus ring (2px)
+Error State:  Red border, error message below
+```
+
+**Form Best Practices:**
+- Stack inputs vertically
+- Label always above input
+- Show required fields with `*`
+- Validate on blur, not keystroke
+- Show all errors at once
+
+### Modals / Dialogs
+
+```
+Overlay:    80% black opacity
+Modal:      var(--surface) background, rounded corners
+Content:    Padding 24px
+Footer:     Border top, buttons aligned right
+Width:      90vw (max 640px)
+```
+
+### Loading States
+
+| Use Case | Pattern |
+|----------|---------|
+| Form submission | Spinner on button, disable form |
+| Page load | Skeleton screen matching layout |
+| File upload | Progress bar with % and time |
+| Background sync | Subtle indicator |
+
+### Empty States
+
+Structure:
+1. Icon (reinforces concept)
+2. Heading (what should be here?)
+3. Description (context)
+4. CTA button (how to create first item)
+
+### Toast / Notifications
+
+| Type | Color | Duration |
+|------|-------|----------|
+| Success | Green | 3 seconds |
+| Error | Red | 5 seconds |
+| Info | Purple | 4 seconds |
+| Warning | Amber | 5 seconds |
+
+Position: Top-right corner, 16px from edges
+
+---
+
+## Spacing & Layout
+
+### Spacing Scale
+
+```
+xs  = 4px    (icons, tight spacing)
+sm  = 8px    (labels, small gaps)
+md  = 16px   (default, between sections)
+lg  = 24px   (major sections)
+xl  = 32px   (page margin on desktop)
+2xl = 48px   (page sections)
+```
+
+### Grid System
+
+- **Columns:** 12-column grid
+- **Breakpoints:** 640px (sm), 768px (md), 1024px (lg), 1280px (xl)
+- **Gutter:** 16px on desktop, 12px tablet, 8px mobile
+- **Page margin:** 24px desktop, 16px tablet, 12px mobile
+
+---
+
+## Accessibility
+
+All Daily products must meet **WCAG 2.1 AA** standards.
+
+### Color Contrast
+
+- **Text vs background:** 4.5:1 minimum
+- **Large text (18pt+):** 3:1 minimum
+- **Never rely on color alone:** Always pair with icon or text
+
+### Interactive Elements
+
+- **Focus state:** Must be visible (purple outline)
+- **Focus order:** Logical reading order
+- **Keyboard accessible:** All interactive elements via Tab
+- **Touch targets:** Minimum 44x44px
+
+### Motion & Animation
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+### Testing Checklist
+
+- [ ] Keyboard only — can you navigate without mouse?
+- [ ] Screen reader — does it read logically?
+- [ ] Color contrast — all text readable?
+- [ ] Lighthouse audit — accessibility score?
+
+---
+
+## Motion & Animation
+
+### Transition Speeds
+
+- **Fast (150ms):** Hover states, small toggles
+- **Normal (300ms):** Modal open, page fade
+- **Slow (500ms):** Complex transitions (max recommended)
+
+### Easing Functions
+
+```css
+--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
+--ease-in: cubic-bezier(0.2, 0, 0.8, 0.2);
+```
+
+### Common Patterns
+
+| Animation | Duration | Easing |
+|-----------|----------|--------|
+| Button hover | 150ms | in-out |
+| Modal open | 300ms | in-out |
+| Sidebar slide | 300ms | in-out |
+| Toast appear | 200ms | in-out |
+| Toast disappear | 150ms | in |
+
+---
+
+## Icon System
+
+### Icon Sizing
+
+- Small (16px): Inline in text, breadcrumbs
+- Normal (24px): Buttons, form fields
+- Large (32px): Hero icons, empty states
+
+### Icon Accessibility
+
+**Standalone icon:**
+```html
+<button aria-label="Delete this item">
+  <Icon name="trash" aria-hidden="true" />
+</button>
+```
+
+**Icon + text:**
+```html
+<button>
+  <Icon name="download" aria-hidden="true" />
+  Download
+</button>
+```
+
+---
+
+## Product Applications
+
+Each Daily X product has its unique focus while maintaining consistent visual elements.
+
+### dailyreach.ai
+Focus on collaboration, team coordination, and LinkedIn strategy optimization. Use imagery that shows teams working together.
+
+### dailyseo.ai
+Emphasize automation, results, and SEO expertise. Use data visualizations and growth metrics in imagery.
+
+### dailydashboards.ai
+Highlight data insights, business intelligence, and decision-making. Use clean dashboard interfaces and data charts.
+
+### dailyscrape.ai
+Focus on data extraction, automation, and efficiency. Use imagery that shows data collection and transformation.
+
+### dailycoverage.ai
+Emphasize content creation, AI-generated media, and information consumption. Use podcast and audio visualizations.
+
+---
+
+> **Brand Consistency Note**
+> While each product has its unique focus and messaging, maintain consistent visual elements, color usage, and tone across all Daily X products to strengthen the overall brand identity.
+
+---
+
+## Changelog
+
+| Version | Date | Changes |
+|---------|------|---------|
+| 2.0.0 | 2026-01-29 | Major rebrand: purple/orange palette, dark theme, Inter typography, product applications |
+| 1.0.0 | 2026-01-28 | Initial brand guidelines |
+
+---
+
+## Questions?
+
+Have questions about voice, tone, or visual brand application? Contact the design team at design@daily.com.

package/README.md

@@ -0,0 +1,136 @@
+# @daily/ui
+
+Daily Platform UI component library with trust-blue theme system.
+
+## Installation
+
+```bash
+npm install @daily/ui
+```
+
+## Peer Dependencies
+
+```bash
+npm install react tailwindcss @radix-ui/react-slot
+```
+
+## Setup
+
+### 1. Import the colors CSS
+
+In your root layout or global CSS:
+
+```css
+@import "@daily/ui/tokens/colors.css";
+```
+
+### 2. Configure Tailwind
+
+In your `tailwind.config.ts`:
+
+```typescript
+import type { Config } from "tailwindcss"
+import dailyPreset from "@daily/ui/tokens/tailwind-preset"
+
+const config: Config = {
+  presets: [dailyPreset],
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@daily/ui/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  // Your custom config...
+}
+
+export default config
+```
+
+### 3. Use the utilities
+
+```typescript
+import { cn } from "@daily/ui/lib/utils"
+
+function MyComponent({ className }: { className?: string }) {
+  return (
+    <div className={cn("bg-primary text-primary-foreground p-4", className)}>
+      Trust Blue Theme
+    </div>
+  )
+}
+```
+
+## Theme Colors
+
+### Primary (Trust Blue)
+- `bg-primary` - #3b82f6 (light) / #60a5fa (dark)
+- `bg-primary-hover` - #2563eb (light) / #3b82f6 (dark)
+- `bg-primary-active` - #1d4ed8 (light) / #2563eb (dark)
+
+### Semantic
+- `bg-success` - Green
+- `bg-error` - Red
+- `bg-warning` - Amber
+- `bg-info` - Blue
+
+### Neutrals
+- `bg-background` / `text-foreground`
+- `bg-card` / `text-card-foreground`
+- `bg-muted` / `text-muted-foreground`
+- `bg-accent` / `text-accent-foreground`
+
+### Interactive
+- `border-border` - Default border color
+- `ring-ring` - Focus ring color
+- `bg-input` - Input background
+
+## Dark Mode
+
+The theme automatically supports dark mode via the `.dark` class:
+
+```tsx
+<html className="dark">
+  {/* Dark mode active */}
+</html>
+```
+
+## Spacing
+
+4px base scale: `p-1` = 4px, `p-2` = 8px, `p-4` = 16px, etc.
+
+## Border Radius
+
+Based on `--radius` CSS variable (default: 0.625rem):
+- `rounded-sm` - `--radius - 4px`
+- `rounded-md` - `--radius - 2px`
+- `rounded-lg` - `--radius`
+- `rounded-xl` - `--radius + 4px`
+- `rounded-2xl` - `--radius + 8px`
+
+## Animations
+
+Dialog/modal animations included:
+- `animate-dialog-in` / `animate-dialog-out`
+- `animate-fade-in` / `animate-fade-out`
+- `animate-slide-in-from-top/bottom/left/right`
+
+## Development
+
+```bash
+# Build
+npm run build
+
+# Watch mode
+npm run watch
+
+# Type check
+npm run typecheck
+
+# Lint
+npm run lint
+
+# Test
+npm run test
+```
+
+## License
+
+MIT

package/dist/components/alert.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const alertVariants: (props?: ({
+    variant?: "destructive" | "success" | "warning" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AlertProps extends React.ComponentProps<"div">, VariantProps<typeof alertVariants> {
+}
+declare function Alert({ className, variant, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Alert, AlertTitle, AlertDescription };
+//# sourceMappingURL=alert.d.ts.map

package/dist/components/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/components/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa;;8EAkBlB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EACjC,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAS1D;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAA"}