svemac-ui 

A high-fidelity macOS component library for Svelte 5, built with Tailwind CSS. Designed for developers who want to create authentic, premium desktop-style web applications with zero compromise on aesthetics.

✨ Features

• 💎 Authentic Design: Precise dimensions, typography, and glassmorphism (backdrop blurs) matching macOS Monterey/Ventura/Sonoma.
• 🌓 Dynamic Interactivity: Built-in dark mode support, traffic light hover states, and smooth spring-based transitions.
• ⚡ Svelte 5 Powered: Engineered with the latest Svelte snippets and runes for maximum performance and a modern developer experience.
• 🎨 Tailwind CSS: Easy to customize while staying true to the system design language.
• 🧩 Atomic Architecture: 50+ components from basic Atoms to complex Organisms like Desktop and TitleBar.

🚀 Installation

Install the package via your favorite package manager:

pnpm add svemac-ui
# or
npm install svemac-ui

🛠 Usage

Integrating svemac-ui into your Svelte 5 application is simple:

<script>
  import { TitleBar, Toolbar, PushButton, SegmentedControl } from 'svemac-ui';
</script>

<div class="macos-window">
  <TitleBar title="My Application" active={true} showNavigation={true}>
    <Toolbar align="center">
      <SegmentedControl 
        options={[
          { label: 'Files', value: 'files' },
          { label: 'Photos', value: 'photos' }
        ]} 
        value="files"
      />
    </Toolbar>
    
    <Toolbar align="right">
      <PushButton variant="secondary" label="Share" />
    </Toolbar>
  </TitleBar>
  
  <main class="content">
    <!-- Your application content -->
  </main>
</div>

<style>
  .macos-window {
    width: 800px;
    height: 600px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  }
</style>

🧱 Components Showcase

svemac-ui provides a rich set of components classified by Atomic Design principles:

Organisms

• TitleBar: Unified and centered window headers.
• MenuBar: System-wide top navigation bar.
• Dock: Dynamic application launcher with magnification.
• Desktop: Full environment runner with wallpaper support.
• Table: High-performance data tables with macOS styling.

Molecules

• TrafficLights: Functional window controls (Close, Minimize, Zoom).
• Sidebar: Authentic folder and navigation sidebars.
• SaveDialog: Standard system dialog layouts.
• Notification: Native-style alert banners.

Atoms

• PushButton: Standard, Primary, and Destructive variants.
• SegmentedControl: Pill-shaped toggle groups.
• SearchField: Glassmorphic search inputs with clear actions.
• Menu / MenuItem: Contextual and application menus.
• Slider / Switch / Stepper: Fine-grained input controls.

🎨 Design Principles

Our components strictly adhere to the macOS Human Interface Guidelines (HIG):

• Glassmorphism: Using backdrop-filter: blur(30px) and semi-transparent backgrounds.
• Typography: Optimized for SF Pro (system fonts) with precise weight mapping (semibold 590).
• Transitions: Using ease-in-out and spring physics for a "responsive and alive" feel.

👩‍💻 Development

If you want to contribute or explore the library locally:

1. Clone & Install:

   git clone https://github.com/thanhtran/svemac-ui.git
   pnpm install

2. Explore Storybook:

   pnpm run storybook

3. Build the Lib:

   pnpm run build

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.