@stachelock/ui 0.1.0

package/README.md

@@ -0,0 +1,304 @@
+# @stachelock/ui
+
+A comprehensive, tree-shakeable Vue 3 TypeScript UI component library built with Tailwind CSS. Designed for modern web applications with a focus on developer experience, accessibility, and performance.
+
+## ✨ Features
+
+- 🌲 **Tree-shakeable**: Import only what you need
+- 🎨 **Tailwind CSS**: Built with utility-first CSS framework
+- 🔧 **TypeScript**: Full TypeScript support with comprehensive types
+- ♿ **Accessible**: WCAG compliant components with proper ARIA support
+- 🎯 **Composables**: Powerful Vue 3 composables for common patterns
+- 🎨 **Theming**: Consistent design system with customizable themes
+- 📱 **Responsive**: Mobile-first responsive design
+- ⚡ **Performance**: Optimized bundle sizes and lazy loading
+- 🧪 **Tested**: Comprehensive test coverage
+- 📖 **Documented**: Storybook documentation and examples
+
+## 📦 Installation
+
+```bash
+npm install @stachelock/ui
+```
+
+### Peer Dependencies
+
+Make sure you have the required peer dependencies installed:
+
+```bash
+npm install vue@^3.3.0 tailwindcss@^3.4.0
+```
+
+## 🚀 Quick Start
+
+### 1. Import Styles
+
+Import the CSS in your main entry file:
+
+```typescript
+// main.ts
+import '@stachelock/ui/style.css'
+```
+
+### 2. Configure Tailwind CSS
+
+Add our Tailwind config to your `tailwind.config.js`:
+
+```javascript
+// tailwind.config.js
+import stachelockConfig from '@stachelock/ui/tailwind.config.js'
+
+export default {
+  // Merge with our config or extend it
+  presets: [stachelockConfig],
+  content: [
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+    './node_modules/@stachelock/ui/**/*.{vue,js,ts,jsx,tsx}',
+  ],
+  // Your custom config here...
+}
+```
+
+### 3. Use Components
+
+#### Individual Imports (Recommended)
+
+```vue
+<template>
+  <div>
+    <Button @button-click="handleClick" theme="primary" size="md">
+      Click me!
+    </Button>
+    
+    <TextInput
+      name="email"
+      label="Email Address"
+      type="email"
+      v-model:value="email"
+      :rules="emailValidation"
+      placeholder="Enter your email"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Button, TextInput } from '@stachelock/ui'
+import { string } from 'yup'
+
+const email = ref('')
+
+const emailValidation = string()
+  .email('Please enter a valid email')
+  .required('Email is required')
+
+const handleClick = () => {
+  console.log('Button clicked!')
+}
+</script>
+```
+
+#### Global Installation
+
+```typescript
+// main.ts
+import { createApp } from 'vue'
+import StachelockUI from '@stachelock/ui'
+import '@stachelock/ui/style.css'
+
+const app = createApp(App)
+
+// Install all components globally
+app.use(StachelockUI, { 
+  installAll: true 
+})
+
+// Or install specific components
+app.use(StachelockUI, { 
+  components: ['Button', 'TextInput'] 
+})
+
+app.mount('#app')
+```
+
+## 🧩 Components
+
+### Buttons
+
+```vue
+<template>
+  <!-- Basic Button -->
+  <Button theme="primary" size="md">Primary Button</Button>
+  
+  <!-- Loading Button -->
+  <Button :loading="isLoading" @button-click="submit">
+    Submit
+  </Button>
+  
+  <!-- Icon Button -->
+  <Button theme="secondary" size="sm">
+    <template #leading-icon>
+      <PlusIcon class="sl-h-4 sl-w-4" />
+    </template>
+    Add Item
+  </Button>
+</template>
+```
+
+### Form Inputs
+
+```vue
+<template>
+  <!-- Text Input with Validation -->
+  <TextInput
+    name="username"
+    label="Username"
+    v-model:value="form.username"
+    :rules="usernameRules"
+    placeholder="Enter username"
+  />
+  
+  <!-- Input with Prefix -->
+  <TextInput
+    name="website"
+    label="Website"
+    v-model:value="form.website"
+  >
+    <template #prefix>
+      <span class="sl-text-gray-500">https://</span>
+    </template>
+  </TextInput>
+</template>
+```
+
+### Loading States
+
+```vue
+<template>
+  <!-- Spinner -->
+  <Loading theme="primary" size="md" />
+  
+  <!-- Loading Overlay -->
+  <Loading overlay text="Loading data..." />
+</template>
+```
+
+## 🎨 Theming
+
+Components support multiple themes out of the box:
+
+- `primary` - Your brand primary color (default: Stachelock blue)
+- `secondary` - Secondary gray theme
+- `success` - Green theme for success states
+- `warning` - Yellow theme for warnings
+- `danger` - Red theme for destructive actions
+- `ghost` - Transparent theme
+
+```vue
+<template>
+  <Button theme="success">Success</Button>
+  <Button theme="danger" outlined>Delete</Button>
+</template>
+```
+
+## 🔧 Composables
+
+### useFormValidation
+
+Powerful form validation with Yup integration:
+
+```typescript
+import { useFormValidation } from '@stachelock/ui'
+import { object, string } from 'yup'
+
+const schema = object({
+  name: string().required('Name is required'),
+  email: string().email().required('Email is required'),
+})
+
+const {
+  getFieldProps,
+  handleSubmit,
+  isValid,
+  values,
+  errors
+} = useFormValidation({
+  schema,
+  initialValues: { name: '', email: '' }
+})
+
+// In template
+const nameProps = getFieldProps('name')
+const emailProps = getFieldProps('email')
+
+const onSubmit = handleSubmit(async (values) => {
+  console.log('Form submitted:', values)
+})
+```
+
+### useModal
+
+Modal state management with accessibility:
+
+```typescript
+import { useModal } from '@stachelock/ui'
+
+const {
+  isOpen,
+  open,
+  close,
+  modalRef
+} = useModal()
+```
+
+## 🎯 CSS Prefix
+
+All CSS classes are prefixed with `sl-` to avoid conflicts with your existing styles:
+
+```css
+.sl-button { ... }
+.sl-text-input { ... }
+.sl-form { ... }
+```
+
+## 🧪 Testing
+
+Components are thoroughly tested. To run tests:
+
+```bash
+npm test
+```
+
+## 📚 Documentation
+
+Visit our [Storybook documentation](https://stachelock.github.io/ui) for interactive examples and API documentation.
+
+## 🤝 Contributing
+
+Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.
+
+## 📝 License
+
+MIT License - see [LICENSE](LICENSE) file for details.
+
+## 🔗 Links
+
+- [Documentation](https://stachelock.github.io/ui)
+- [GitHub Repository](https://github.com/stachelock/ui)
+- [NPM Package](https://www.npmjs.com/package/@stachelock/ui)
+- [Issue Tracker](https://github.com/stachelock/ui/issues)
+
+## 📊 Bundle Size
+
+This library is designed to be tree-shakeable. When you import individual components, only the necessary code is included in your bundle:
+
+| Component | Gzipped Size |
+|-----------|--------------|
+| Button  | ~2.1kb       |
+| TextInput | ~3.2kb     |
+| Loading | ~1.1kb       |
+
+Full library (all components): ~8.5kb gzipped
+
+---
+
+Built with ❤️ by the Stachelock team

package/dist/CheckboxInput-rWkcde69.js

@@ -0,0 +1,5 @@
+import { CheckboxInput as o } from "./index.js";
+export {
+  o as default
+};
+//# sourceMappingURL=CheckboxInput-rWkcde69.js.map

package/dist/CheckboxInput-rWkcde69.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxInput-rWkcde69.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/ComboboxInput-B98P_8CZ.js

@@ -0,0 +1,5 @@
+import { ComboboxInput as a } from "./index.js";
+export {
+  a as default
+};
+//# sourceMappingURL=ComboboxInput-B98P_8CZ.js.map

package/dist/ComboboxInput-B98P_8CZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxInput-B98P_8CZ.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/SelectInput-B5liNv7H.js

@@ -0,0 +1,5 @@
+import { SelectInput as a } from "./index.js";
+export {
+  a as default
+};
+//# sourceMappingURL=SelectInput-B5liNv7H.js.map

package/dist/SelectInput-B5liNv7H.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput-B5liNv7H.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/SwitchInput-D1k9O8gn.js

@@ -0,0 +1,5 @@
+import { SwitchInput as a } from "./index.js";
+export {
+  a as default
+};
+//# sourceMappingURL=SwitchInput-D1k9O8gn.js.map

package/dist/SwitchInput-D1k9O8gn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchInput-D1k9O8gn.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/TextAreaInput-Di6Kstic.js

@@ -0,0 +1,5 @@
+import { TextAreaInput as t } from "./index.js";
+export {
+  t as default
+};
+//# sourceMappingURL=TextAreaInput-Di6Kstic.js.map

package/dist/TextAreaInput-Di6Kstic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaInput-Di6Kstic.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/UiLoading-BuzCrLqO.js

@@ -0,0 +1,5 @@
+import { Loading as o } from "./index.js";
+export {
+  o as default
+};
+//# sourceMappingURL=UiLoading-BuzCrLqO.js.map

package/dist/UiLoading-BuzCrLqO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiLoading-BuzCrLqO.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './src/index'
+import StachelockUI from './src/index'
+export default StachelockUI