@casinogate/ui 0.0.3

package/README.md

@@ -0,0 +1,171 @@
+# @cg/ui
+
+A modern, type-safe UI component library built with Svelte 5, TypeScript, and TailwindCSS. Designed for building beautiful, accessible, and performant user interfaces.
+
+## ✨ Features
+
+- 🚀 **Svelte 5** - Built with the latest Svelte features including runes and modern APIs
+- 📝 **TypeScript** - Fully typed with comprehensive type definitions
+- 🎨 **TailwindCSS** - Utility-first styling with custom design tokens
+- ♿ **Accessible** - Built on top of [bits-ui](https://bits-ui.com) for robust accessibility
+- 🎭 **Variants** - Flexible styling with [tailwind-variants](https://www.tailwind-variants.org/)
+- 📚 **Storybook** - Comprehensive component documentation and examples
+- 🔧 **Developer-friendly** - Excellent IntelliSense and autocompletion support
+
+## 📦 Installation
+
+```bash
+# Using pnpm (recommended)
+pnpm add @cg/ui
+
+# Using npm
+npm install @cg/ui
+
+# Using yarn
+yarn add @cg/ui
+```
+
+### Peer Dependencies
+
+Make sure you have Svelte 5 installed:
+
+```bash
+pnpm add svelte@^5.0.0
+```
+
+## 🎨 Styling & Customization
+
+### Using Tailwind Variants
+
+Components are built with `tailwind-variants` for powerful styling:
+
+```svelte
+<script>
+  import { Button } from '@cg/ui';
+
+  // Access the styles function directly
+  const customButtonStyles = Button.styles({
+    variant: 'primary',
+    size: 'lg',
+    // Override with custom classes
+    class: 'my-custom-class',
+  });
+</script>
+
+<button class={customButtonStyles.root()}> Custom Styled Button </button>
+```
+
+### CSS Custom Properties
+
+Components support CSS custom properties for theming:
+
+```css
+:root {
+  --color-primary: #3b82f6;
+  --color-secondary: #6b7280;
+  /* Override default colors */
+}
+```
+
+### Custom Classes
+
+Add custom classes using the `class` prop:
+
+```svelte
+<Button class="my-4 transition-transform hover:scale-105">Custom Button</Button>
+```
+
+## 🔧 Development
+
+### Prerequisites
+
+- Node.js >= 22.14.0
+- pnpm >= 9.5.0
+
+### Setup
+
+```bash
+# Clone and install dependencies
+git clone <repo-url>
+cd cg-components/packages/cg-ui
+pnpm install
+```
+
+### Available Scripts
+
+```bash
+# Development
+pnpm dev                    # Start development server
+pnpm storybook              # Start Storybook
+
+# Building
+pnpm build                  # Build the library
+pnpm prepack                # Prepare for publishing
+
+# Quality Assurance
+pnpm check                  # Type checking
+pnpm check:watch            # Type checking in watch mode
+pnpm lint                   # Lint code
+pnpm format                 # Format code
+
+# Documentation
+pnpm build-storybook        # Build Storybook for deployment
+```
+
+### Project Structure
+
+```
+packages/cg-ui/
+├── src/
+│   ├── components/         # UI components
+│   │   └── button/
+│   │       ├── button.component.svelte
+│   │       └── index.ts
+│   ├── internal/           # Internal utilities
+│   │   ├── types/          # TypeScript type definitions
+│   │   └── utils/          # Utility functions
+│   ├── stories/            # Storybook stories
+│   ├── assets/             # CSS and static assets
+│   └── index.ts            # Main export file
+├── dist/                   # Built output (generated)
+├── build/                  # SvelteKit build output
+└── storybook-static/       # Built Storybook (generated)
+```
+
+## 📚 Documentation
+
+- **Storybook**: Run `pnpm storybook` to explore components interactively
+- **Type Definitions**: Comprehensive TypeScript definitions included
+- **Examples**: Check the `src/stories/` directory for usage examples
+
+## 🤝 Contributing
+
+1. **Create a new component** in `src/components/`
+2. **Add TypeScript types** and exports
+3. **Create Storybook stories** in `src/stories/`
+4. **Write tests** (coming soon)
+5. **Update documentation**
+
+### Component Development Guidelines
+
+1. **Accessibility First**: Use bits-ui primitives when possible
+2. **Type Safety**: Provide comprehensive TypeScript definitions
+3. **Consistent API**: Follow established patterns from existing components
+4. **Documentation**: Every component should have Storybook stories
+5. **Styling**: Use tailwind-variants for flexible styling options
+
+## 📄 License
+
+ISC
+
+## 🔗 Links
+
+- [Svelte 5 Documentation](https://svelte.dev/docs/svelte/overview)
+- [TailwindCSS](https://tailwindcss.com/)
+- [bits-ui](https://bits-ui.com/) - Accessible component primitives
+- [tailwind-variants](https://www.tailwind-variants.org/) - Styling utilities
+- [Storybook](https://storybook.js.org/) - Component documentation
+
+---
+
+Made with ❤️ by the CG team

package/dist/app.d.ts

@@ -0,0 +1,15 @@
+import './poppanator/sveltekit-svg/dist/svg.d.ts';
+
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {};

package/dist/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div>%sveltekit.body%</div>
+	</body>
+</html>