@mhmo91/schmancy 0.5.47 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{avatar-hoEk1kwv.js → avatar-Bp8OELqy.js} +2 -7
- package/dist/avatar-Bp8OELqy.js.map +1 -0
- package/dist/{avatar-hzSHTXXv.cjs → avatar-gH9_xHZs.cjs} +2 -7
- package/dist/avatar-gH9_xHZs.cjs.map +1 -0
- package/dist/badge.cjs +1 -1
- package/dist/badge.js +1 -1
- package/dist/content-drawer.cjs +1 -1
- package/dist/content-drawer.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/nav-drawer.cjs +1 -1
- package/dist/nav-drawer.js +1 -1
- package/dist/navigation-bar.cjs +1 -1
- package/dist/navigation-bar.js +1 -1
- package/dist/teleport.cjs +1 -1
- package/dist/teleport.js +1 -1
- package/package.json +1 -1
- package/readme.md +269 -56
- package/types/src/navigation-bar/navigation-bar.d.ts +16 -2
- package/dist/avatar-hoEk1kwv.js.map +0 -1
- package/dist/avatar-hzSHTXXv.cjs.map +0 -1
package/readme.md
CHANGED
|
@@ -1,93 +1,306 @@
|
|
|
1
1
|
# Schmancy UI Library
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@mhmo91/schmancy)
|
|
4
|
+
[](https://opensource.org/licenses/Apache-2.0)
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
Schmancy is a modern, production-ready UI component library built as web components. It provides an elegant implementation of Material Design 3 (M3) with minimal deviations, powered by [Lit](https://lit.dev/), [Tailwind CSS](https://tailwindcss.com/), and [RxJS](https://rxjs.dev/).
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
**Built for developers who value:** Simplicity, type safety, reactive patterns, and accessibility.
|
|
9
|
+
|
|
10
|
+
## Key Features
|
|
11
|
+
|
|
12
|
+
- **🧩 Web Components Standard** - Framework-agnostic, works with React, Vue, Angular, or vanilla JS
|
|
13
|
+
- **🎨 Material Design 3** - Modern, cohesive design language with full theming support
|
|
14
|
+
- **⚡ Reactive & Type-Safe** - Built with TypeScript and RxJS for predictable state management
|
|
15
|
+
- **♿ Accessible by Default** - ARIA support, keyboard navigation, and screen reader compatibility
|
|
16
|
+
- **🎯 Tree-Shakeable** - Import only what you need for optimal bundle size
|
|
17
|
+
- **🛠️ Developer-Friendly** - Comprehensive TypeScript types and AI-assisted documentation
|
|
11
18
|
|
|
12
19
|
## Installation
|
|
13
20
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
```bash
|
|
17
|
-
yarn add @mhmo91/schmancy
|
|
18
|
-
```
|
|
19
|
-
use npm:
|
|
21
|
+
### Using npm
|
|
22
|
+
|
|
20
23
|
```bash
|
|
21
24
|
npm install @mhmo91/schmancy
|
|
22
25
|
```
|
|
23
26
|
|
|
24
|
-
|
|
25
|
-
Alternatively, if you're using Yarn:
|
|
27
|
+
### Using yarn
|
|
26
28
|
|
|
27
29
|
```bash
|
|
28
30
|
yarn add @mhmo91/schmancy
|
|
29
31
|
```
|
|
30
32
|
|
|
31
|
-
|
|
33
|
+
### Peer Dependencies
|
|
32
34
|
|
|
33
|
-
|
|
35
|
+
Schmancy requires Lit and Tailwind CSS as peer dependencies:
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm install lit tailwindcss
|
|
39
|
+
```
|
|
34
40
|
|
|
35
|
-
|
|
41
|
+
## Quick Start
|
|
36
42
|
|
|
37
|
-
|
|
43
|
+
### Import All Components
|
|
38
44
|
|
|
39
45
|
```javascript
|
|
40
46
|
import '@mhmo91/schmancy'
|
|
41
47
|
```
|
|
42
48
|
|
|
43
|
-
This
|
|
49
|
+
This makes all Schmancy components available throughout your application.
|
|
44
50
|
|
|
45
|
-
###
|
|
51
|
+
### Import Individual Components
|
|
46
52
|
|
|
47
|
-
|
|
53
|
+
For better tree-shaking and smaller bundle sizes:
|
|
48
54
|
|
|
49
55
|
```javascript
|
|
50
56
|
import '@mhmo91/schmancy/button'
|
|
57
|
+
import '@mhmo91/schmancy/input'
|
|
58
|
+
import '@mhmo91/schmancy/select'
|
|
51
59
|
```
|
|
52
60
|
|
|
53
|
-
|
|
61
|
+
### Basic Usage
|
|
54
62
|
|
|
55
63
|
```html
|
|
56
|
-
|
|
57
|
-
|
|
64
|
+
<!-- Buttons with variants -->
|
|
65
|
+
<schmancy-button variant="filled">Primary Action</schmancy-button>
|
|
66
|
+
<schmancy-button variant="outlined">Secondary Action</schmancy-button>
|
|
67
|
+
|
|
68
|
+
<!-- Form inputs with validation -->
|
|
69
|
+
<schmancy-input
|
|
70
|
+
label="Email"
|
|
71
|
+
type="email"
|
|
72
|
+
required
|
|
73
|
+
placeholder="you@example.com"
|
|
74
|
+
></schmancy-input>
|
|
58
75
|
|
|
59
|
-
|
|
76
|
+
<!-- Select with options -->
|
|
77
|
+
<schmancy-select label="Choose an option" value="option1">
|
|
78
|
+
<schmancy-option value="option1">Option 1</schmancy-option>
|
|
79
|
+
<schmancy-option value="option2">Option 2</schmancy-option>
|
|
80
|
+
</schmancy-select>
|
|
81
|
+
|
|
82
|
+
<!-- Surfaces with elevation -->
|
|
83
|
+
<schmancy-surface elevation="2" rounded="all" class="p-6">
|
|
84
|
+
<schmancy-typography type="headline" token="md">Card Title</schmancy-typography>
|
|
85
|
+
<schmancy-typography type="body" token="md">Card content goes here</schmancy-typography>
|
|
86
|
+
</schmancy-surface>
|
|
87
|
+
```
|
|
60
88
|
|
|
61
89
|
## Documentation
|
|
62
90
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
91
|
+
### 📚 User Documentation
|
|
92
|
+
|
|
93
|
+
- **[GitHub Wiki](https://github.com/mhmo91/schmancy/wiki)** - Comprehensive guides, examples, and API reference
|
|
94
|
+
- **[Component Demos](https://schmancy-demo.netlify.app)** - Interactive examples and live playground
|
|
95
|
+
|
|
96
|
+
### 🤖 AI-Assisted Development
|
|
97
|
+
|
|
98
|
+
The `/ai/` directory contains concise reference documentation optimized for AI assistants and LLM-based tools:
|
|
99
|
+
|
|
100
|
+
- **[AI Documentation Index](./ai/index.md)** - Overview and quick reference
|
|
101
|
+
- **[Component Relationships](./ai/component-relationships.md)** - How components work together
|
|
102
|
+
- **[Documentation Template](./ai/template.md)** - Contribution guidelines
|
|
103
|
+
|
|
104
|
+
#### Component References
|
|
105
|
+
|
|
106
|
+
<details>
|
|
107
|
+
<summary><strong>Core Components</strong></summary>
|
|
108
|
+
|
|
109
|
+
- [Animated Text](./ai/animated-text.md) - Animated text effects
|
|
110
|
+
- [Autocomplete](./ai/autocomplete.md) - Searchable input with suggestions
|
|
111
|
+
- [Avatar](./ai/avatar.md) - User profile images
|
|
112
|
+
- [Badge](./ai/badge.md) - Status indicators
|
|
113
|
+
- [Button](./ai/button.md) - Action buttons
|
|
114
|
+
- [Busy/Spinner](./ai/busy.md) - Loading indicators
|
|
115
|
+
- [Card](./ai/card.md) - Content containers
|
|
116
|
+
- [Checkbox](./ai/checkbox.md) - Checkable inputs
|
|
117
|
+
- [Chips](./ai/chips.md) - Compact selection elements
|
|
118
|
+
- [Progress](./ai/progress.md) - Progress indicators
|
|
119
|
+
</details>
|
|
120
|
+
|
|
121
|
+
<details>
|
|
122
|
+
<summary><strong>Form Elements</strong></summary>
|
|
123
|
+
|
|
124
|
+
- [Form](./ai/form.md) - Form containers with validation
|
|
125
|
+
- [Input](./ai/input.md) - Text input fields
|
|
126
|
+
- [Option](./ai/option.md) - Select/autocomplete options
|
|
127
|
+
- [Radio Group](./ai/radio-group.md) - Radio button groups
|
|
128
|
+
- [Select](./ai/select.md) - Dropdown selection
|
|
129
|
+
- [Textarea](./ai/textarea.md) - Multi-line text input
|
|
130
|
+
- [Payment Card Form](./ai/payment-card-form.md) - Credit card input
|
|
131
|
+
</details>
|
|
132
|
+
|
|
133
|
+
<details>
|
|
134
|
+
<summary><strong>Layout & Navigation</strong></summary>
|
|
135
|
+
|
|
136
|
+
- [Area](./ai/area.md) - Routing system
|
|
137
|
+
- [Content Drawer](./ai/content-drawer.md) - Sliding panels
|
|
138
|
+
- [Details](./ai/details.md) - Expandable content
|
|
139
|
+
- [Divider](./ai/divider.md) - Visual separators
|
|
140
|
+
- [Layout](./ai/layout.md) - Layout utilities (deprecated)
|
|
141
|
+
- [Navigation Bar](./ai/navigation-bar.md) - Bottom navigation
|
|
142
|
+
- [Navigation Bar Item](./ai/navigation-bar-item.md) - Navigation items
|
|
143
|
+
- [Navigation Rail](./ai/navigation-rail.md) - Side navigation
|
|
144
|
+
- [Nav Drawer](./ai/nav-drawer.md) - Navigation drawer
|
|
145
|
+
- [Sheet](./ai/sheet.md) - Bottom/side sheets
|
|
146
|
+
- [Tabs](./ai/tabs.md) - Tabbed interfaces
|
|
147
|
+
</details>
|
|
148
|
+
|
|
149
|
+
<details>
|
|
150
|
+
<summary><strong>Feedback & Overlays</strong></summary>
|
|
151
|
+
|
|
152
|
+
- [Dialog](./ai/dialog.md) - Modal dialogs
|
|
153
|
+
- [Dropdown](./ai/dropdown.md) - Floating dropdowns
|
|
154
|
+
- [Menu](./ai/menu.md) - Context menus
|
|
155
|
+
- [Notification](./ai/notification.md) - Toast notifications
|
|
156
|
+
- [Tooltip](./ai/tooltip.md) - Contextual help
|
|
157
|
+
</details>
|
|
158
|
+
|
|
159
|
+
<details>
|
|
160
|
+
<summary><strong>Data Display</strong></summary>
|
|
161
|
+
|
|
162
|
+
- [List](./ai/list.md) - Interactive lists
|
|
163
|
+
- [Table](./ai/table.md) - Data tables
|
|
164
|
+
- [Tree](./ai/tree.md) - Hierarchical views
|
|
165
|
+
- [Slider](./ai/slider.md) - Content carousels
|
|
166
|
+
- [Steps](./ai/steps.md) - Step indicators
|
|
167
|
+
</details>
|
|
168
|
+
|
|
169
|
+
<details>
|
|
170
|
+
<summary><strong>Utilities & Advanced</strong></summary>
|
|
171
|
+
|
|
172
|
+
- [Code Highlight](./ai/code-highlight.md) - Syntax highlighting
|
|
173
|
+
- [Context](./ai/context.md) - Context API
|
|
174
|
+
- [Countries](./ai/countries.md) - Country selector
|
|
175
|
+
- [Date Range](./ai/date-range.md) - Date range picker
|
|
176
|
+
- [Date Range Inline](./ai/date-range-inline.md) - Inline date picker
|
|
177
|
+
- [Delay](./ai/delay.md) - Delayed rendering
|
|
178
|
+
- [Directives](./ai/directives.md) - Lit directives
|
|
179
|
+
- [Icons](./ai/icons.md) - Material icons
|
|
180
|
+
- [Mailbox](./ai/mailbox.md) - Message inbox
|
|
181
|
+
- [Map](./ai/map.md) - Map integration
|
|
182
|
+
- [Store](./ai/store.md) - State management
|
|
183
|
+
- [Surface](./ai/surface.md) - Elevation system
|
|
184
|
+
- [Teleport](./ai/teleport.md) - FLIP animations
|
|
185
|
+
- [Theme](./ai/theme.md) - Theming system
|
|
186
|
+
- [Theme Button](./ai/theme-button.md) - Theme switcher
|
|
187
|
+
- [Timezone](./ai/timezone.md) - Timezone selector
|
|
188
|
+
- [Typography](./ai/typography.md) - Text styling
|
|
189
|
+
- [Typewriter](./ai/typewriter.md) - Typing animations
|
|
190
|
+
- [Boat](./ai/boat.md) - Advanced layout system
|
|
191
|
+
</details>
|
|
192
|
+
|
|
193
|
+
### 👨💻 Developer Guidelines
|
|
194
|
+
|
|
195
|
+
If you're contributing to or extending Schmancy, read these essential guides:
|
|
196
|
+
|
|
197
|
+
- **[CLAUDE.md](./CLAUDE.md)** - Project structure and development workflow
|
|
198
|
+
- **[src/CLAUDE.md](./src/CLAUDE.md)** - Library component patterns and architecture
|
|
199
|
+
- **[demo/CLAUDE.md](./demo/CLAUDE.md)** - Demo creation and testing patterns
|
|
200
|
+
|
|
201
|
+
## Component Overview
|
|
202
|
+
|
|
203
|
+
### Core Categories
|
|
204
|
+
|
|
205
|
+
| Category | Components | Use Cases |
|
|
206
|
+
|----------|-----------|-----------|
|
|
207
|
+
| **Buttons & Actions** | Button, Icon Button, FAB | User interactions, form submissions |
|
|
208
|
+
| **Form Inputs** | Input, Textarea, Select, Autocomplete, Checkbox, Radio Group | Data collection, user preferences |
|
|
209
|
+
| **Navigation** | Tabs, Nav Drawer, Navigation Bar, Area Router | App navigation, content organization |
|
|
210
|
+
| **Feedback** | Dialog, Notification, Tooltip, Progress, Busy | User feedback, loading states |
|
|
211
|
+
| **Layout** | Surface, Card, Divider, Content Drawer | Content structure, visual hierarchy |
|
|
212
|
+
| **Data Display** | Table, List, Tree, Typography | Data presentation, content display |
|
|
213
|
+
| **Advanced** | Theme System, Store, Context API | Theming, state management |
|
|
214
|
+
|
|
215
|
+
### Architecture Highlights
|
|
216
|
+
|
|
217
|
+
- **$LitElement Mixin** - Base class providing reactive cleanup, classMap, styleMap, and component discovery
|
|
218
|
+
- **RxJS Integration** - Built-in reactive patterns with automatic cleanup via `takeUntil(this.disconnecting)`
|
|
219
|
+
- **Context System** - Type-safe state management with `@select` decorator and compound selectors
|
|
220
|
+
- **Theme System** - Material Design 3 theming with CSS custom properties and Tailwind integration
|
|
221
|
+
- **Accessibility First** - ARIA attributes, keyboard navigation, and screen reader support built-in
|
|
222
|
+
|
|
223
|
+
## Development
|
|
224
|
+
|
|
225
|
+
### Running the Demo Site
|
|
226
|
+
|
|
227
|
+
```bash
|
|
228
|
+
yarn dev
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
This starts the development server with live reload at `http://localhost:5173`.
|
|
232
|
+
|
|
233
|
+
### Building the Library
|
|
234
|
+
|
|
235
|
+
```bash
|
|
236
|
+
yarn build
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
Compiles TypeScript and bundles the library to `/dist`.
|
|
240
|
+
|
|
241
|
+
### Running Tests
|
|
242
|
+
|
|
243
|
+
```bash
|
|
244
|
+
yarn test # Run tests once
|
|
245
|
+
yarn test:watch # Watch mode
|
|
246
|
+
yarn test:ui # Interactive UI
|
|
247
|
+
yarn test:coverage # With coverage report
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
### Project Structure
|
|
251
|
+
|
|
252
|
+
```
|
|
253
|
+
schmancy/
|
|
254
|
+
├── src/ # Library source code
|
|
255
|
+
│ ├── Button/ # Component directories
|
|
256
|
+
│ ├── Input/
|
|
257
|
+
│ └── ...
|
|
258
|
+
├── demo/ # Demo site
|
|
259
|
+
│ └── src/
|
|
260
|
+
│ └── features/ # Component demos
|
|
261
|
+
├── ai/ # AI reference docs
|
|
262
|
+
├── types/ # TypeScript definitions
|
|
263
|
+
└── dist/ # Build output
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
## Contributing
|
|
267
|
+
|
|
268
|
+
We welcome contributions! Please:
|
|
269
|
+
|
|
270
|
+
1. Read the [developer guidelines](./CLAUDE.md)
|
|
271
|
+
2. Check existing [issues](https://github.com/mhmo91/schmancy/issues)
|
|
272
|
+
3. Follow the established patterns in [src/CLAUDE.md](./src/CLAUDE.md)
|
|
273
|
+
4. Add demos following [demo/CLAUDE.md](./demo/CLAUDE.md)
|
|
274
|
+
5. Ensure tests pass and types are correct
|
|
275
|
+
6. Submit a pull request
|
|
276
|
+
|
|
277
|
+
## Browser Support
|
|
278
|
+
|
|
279
|
+
Schmancy supports all modern browsers that implement the Web Components standard:
|
|
280
|
+
|
|
281
|
+
- Chrome/Edge 90+
|
|
282
|
+
- Firefox 88+
|
|
283
|
+
- Safari 14+
|
|
284
|
+
|
|
285
|
+
## License
|
|
286
|
+
|
|
287
|
+
Apache License 2.0 - see [LICENSE](LICENSE) file for details.
|
|
288
|
+
|
|
289
|
+
## Credits
|
|
290
|
+
|
|
291
|
+
Built with:
|
|
292
|
+
- [Lit](https://lit.dev/) - Efficient web components
|
|
293
|
+
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS
|
|
294
|
+
- [RxJS](https://rxjs.dev/) - Reactive programming
|
|
295
|
+
- [Material Design 3](https://m3.material.io/) - Design system
|
|
296
|
+
|
|
297
|
+
## Links
|
|
298
|
+
|
|
299
|
+
- **npm Package**: [@mhmo91/schmancy](https://www.npmjs.com/package/@mhmo91/schmancy)
|
|
300
|
+
- **GitHub Repository**: [mhmo91/schmancy](https://github.com/mhmo91/schmancy)
|
|
301
|
+
- **Issue Tracker**: [GitHub Issues](https://github.com/mhmo91/schmancy/issues)
|
|
302
|
+
- **Documentation Wiki**: [GitHub Wiki](https://github.com/mhmo91/schmancy/wiki)
|
|
303
|
+
|
|
304
|
+
---
|
|
305
|
+
|
|
306
|
+
Made with ❤️ by [@mhmo91](https://github.com/mhmo91)
|
|
@@ -3,21 +3,35 @@ declare const SchmancyNavigationBar_base: import("../../mixins").Constructor<Cus
|
|
|
3
3
|
* `<schmancy-navigation-bar>` component
|
|
4
4
|
*
|
|
5
5
|
* A horizontal navigation component following Material Design 3 specifications.
|
|
6
|
-
* Navigation bars provide access to between 3-7 primary destinations
|
|
6
|
+
* Navigation bars provide access to between 3-7 primary destinations.
|
|
7
7
|
* Automatically hides in fullscreen mode when triggered via schmancyTheme.next({ fullscreen: true }).
|
|
8
8
|
*
|
|
9
|
+
* **IMPORTANT**: This component does not apply positioning by default. The consumer is responsible
|
|
10
|
+
* for positioning the navigation bar in their layout. For typical bottom-fixed positioning, add:
|
|
11
|
+
* `class="fixed bottom-0 left-0 right-0 z-10"` or similar CSS to position the component.
|
|
12
|
+
*
|
|
9
13
|
* @element schmancy-navigation-bar
|
|
10
14
|
* @slot - Default slot for navigation bar items
|
|
11
15
|
*
|
|
12
16
|
* @fires navigation-change - When an item is selected
|
|
13
17
|
*
|
|
14
18
|
* @example
|
|
15
|
-
*
|
|
19
|
+
* <!-- Fixed at bottom (typical usage) -->
|
|
20
|
+
* <schmancy-navigation-bar activeIndex="0" class="fixed bottom-0 left-0 right-0 z-10">
|
|
16
21
|
* <schmancy-navigation-bar-item icon="home" label="Home"></schmancy-navigation-bar-item>
|
|
17
22
|
* <schmancy-navigation-bar-item icon="search" label="Search"></schmancy-navigation-bar-item>
|
|
18
23
|
* <schmancy-navigation-bar-item icon="favorite" label="Favorites"></schmancy-navigation-bar-item>
|
|
19
24
|
* <schmancy-navigation-bar-item icon="settings" label="Settings"></schmancy-navigation-bar-item>
|
|
20
25
|
* </schmancy-navigation-bar>
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* <!-- Within a container (demo/mockup usage) -->
|
|
29
|
+
* <div class="flex flex-col h-screen">
|
|
30
|
+
* <main class="flex-1">Content</main>
|
|
31
|
+
* <schmancy-navigation-bar activeIndex="0">
|
|
32
|
+
* <schmancy-navigation-bar-item icon="home" label="Home"></schmancy-navigation-bar-item>
|
|
33
|
+
* </schmancy-navigation-bar>
|
|
34
|
+
* </div>
|
|
21
35
|
*/
|
|
22
36
|
export declare class SchmancyNavigationBar extends SchmancyNavigationBar_base {
|
|
23
37
|
/**
|