@ryanhelsing/ry-ui 1.0.0 → 1.0.2

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.
Files changed (24) hide show
  1. package/README.md +2 -0
  2. package/USING_CDN.md +591 -0
  3. package/dist/components/ry-dropdown.d.ts.map +1 -1
  4. package/dist/components/ry-example.d.ts +7 -0
  5. package/dist/components/ry-example.d.ts.map +1 -1
  6. package/dist/components/ry-gradient-picker.d.ts +39 -0
  7. package/dist/components/ry-gradient-picker.d.ts.map +1 -0
  8. package/dist/components/ry-number-select.d.ts +30 -0
  9. package/dist/components/ry-number-select.d.ts.map +1 -0
  10. package/dist/components/ry-tree.d.ts +41 -0
  11. package/dist/components/ry-tree.d.ts.map +1 -0
  12. package/dist/core/ry-icons.d.ts.map +1 -1
  13. package/dist/core/ry-transform.d.ts.map +1 -1
  14. package/dist/css/ry-structure.css +484 -1
  15. package/dist/css/ry-theme.css +365 -0
  16. package/dist/css/ry-ui.css +151 -6
  17. package/dist/ry-ui.d.ts +5 -0
  18. package/dist/ry-ui.d.ts.map +1 -1
  19. package/dist/ry-ui.js +1391 -441
  20. package/dist/ry-ui.js.map +1 -1
  21. package/dist/themes/dark.css +92 -0
  22. package/dist/themes/light.css +38 -0
  23. package/dist/themes/ocean.css +48 -0
  24. package/package.json +6 -4
package/README.md CHANGED
@@ -19,6 +19,8 @@ ry-ui normalizes this. No decisions to make. No architecture to debate. An LLM c
19
19
 
20
20
  - [ ] Slider, Knob, Menu, Placeholder, Step/Wizard, Loader/Progress, Breadcrumb, Comment/Feed, Statistic/Graph, Hero, Calendar, Rating , Search, Shape, Sticky, color-picker, dialog/alert, tree, carousel, qr-code, diff, split-panel, format-bytes-number-currency(rails things), mutation-observer and resize observer,
21
21
 
22
+ - [ ] This is a theme on its own: https://codepen.io/oathanrex/pen/EayVMqZ
23
+
22
24
  - [ ] bring in examples and extract and normalize - Flat Clean (accord/tailwind) / Flat Fun Waves (zevo) / Game (mario/astrobot/stardew/animal crossing) / Brute (square game) / Skeuomorphic / Glass ( dark and light, color sets 1,2,3 )
23
25
  - [ ] cross-platform transpiler - Swift/SwiftUI (see `docs/arch/cross-platform-transpiler.md`)
24
26
  - [ ] animation system with GSAP (see `docs/plans/animation-system.md`)
package/USING_CDN.md ADDED
@@ -0,0 +1,591 @@
1
+ # Using ry-ui via CDN
2
+
3
+ ## Quick Start
4
+
5
+ ```html
6
+ <!DOCTYPE html>
7
+ <html lang="en" data-ry-theme="light">
8
+ <head>
9
+ <meta charset="UTF-8">
10
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
+ <link rel="stylesheet" href="https://unpkg.com/@ryanhelsing/ry-ui/dist/css/ry-ui.css">
12
+ </head>
13
+ <body>
14
+ <ry-button>Hello World</ry-button>
15
+
16
+ <script type="module" src="https://unpkg.com/@ryanhelsing/ry-ui/dist/ry-ui.js"></script>
17
+ </body>
18
+ </html>
19
+ ```
20
+
21
+ ## CDN URLs
22
+
23
+ The package is available via unpkg and jsdelivr:
24
+
25
+ **unpkg:**
26
+ ```
27
+ https://unpkg.com/@ryanhelsing/ry-ui/dist/ry-ui.js
28
+ https://unpkg.com/@ryanhelsing/ry-ui/dist/css/ry-ui.css
29
+ ```
30
+
31
+ **jsdelivr:**
32
+ ```
33
+ https://cdn.jsdelivr.net/npm/@ryanhelsing/ry-ui/dist/ry-ui.js
34
+ https://cdn.jsdelivr.net/npm/@ryanhelsing/ry-ui/dist/css/ry-ui.css
35
+ ```
36
+
37
+ ## Element Syntax: Prefixed vs Wrapper
38
+
39
+ CDN users should use **prefixed elements** (`<ry-button>`, `<ry-modal>`, etc.):
40
+
41
+ ```html
42
+ <ry-button variant="primary">Click me</ry-button>
43
+
44
+ <ry-modal id="demo" title="Hello">
45
+ Modal content here
46
+ </ry-modal>
47
+
48
+ <ry-accordion>
49
+ <ry-accordion-item title="First" open>Content</ry-accordion-item>
50
+ <ry-accordion-item title="Second">More content</ry-accordion-item>
51
+ </ry-accordion>
52
+ ```
53
+
54
+ ### The `<ry>` Wrapper (Optional)
55
+
56
+ The kitchen sink demo uses a clean syntax wrapper that transforms unprefixed tags:
57
+
58
+ ```html
59
+ <ry>
60
+ <button>Becomes ry-button</button>
61
+ <modal id="demo">Becomes ry-modal</modal>
62
+ </ry>
63
+ ```
64
+
65
+ This works via CDN too, but **prefixed elements are recommended** because:
66
+ - No transformation step needed
67
+ - Works immediately as the page loads
68
+ - More explicit about what components are being used
69
+ - Better IDE/editor support
70
+
71
+ The `<ry>` wrapper runs automatically when ry-ui.js loads. Both syntaxes work together:
72
+
73
+ ```html
74
+ <ry>
75
+ <accordion>
76
+ <ry-accordion-item>Prefixed - unchanged</ry-accordion-item>
77
+ <accordion-item>Unprefixed - gets transformed</accordion-item>
78
+ </accordion>
79
+ </ry>
80
+ ```
81
+
82
+ ## Themes
83
+
84
+ The base CSS includes light theme values. Set the theme via `data-ry-theme`:
85
+
86
+ ```html
87
+ <html data-ry-theme="light">
88
+ ```
89
+
90
+ ### Using Dark Theme
91
+
92
+ Load the dark theme CSS alongside the main bundle:
93
+
94
+ ```html
95
+ <link rel="stylesheet" href="https://unpkg.com/@ryanhelsing/ry-ui/dist/css/ry-ui.css">
96
+ <link rel="stylesheet" href="https://unpkg.com/@ryanhelsing/ry-ui/dist/themes/dark.css">
97
+ ```
98
+
99
+ Then set the theme:
100
+
101
+ ```html
102
+ <html data-ry-theme="dark">
103
+ ```
104
+
105
+ ### Available Themes
106
+
107
+ | Theme | URL |
108
+ |-------|-----|
109
+ | Light | `dist/themes/light.css` |
110
+ | Dark | `dist/themes/dark.css` |
111
+ | Ocean | `dist/themes/ocean.css` |
112
+
113
+ Load whichever themes you need:
114
+
115
+ ```html
116
+ <!-- Load both light and dark for theme switching -->
117
+ <link rel="stylesheet" href="https://unpkg.com/@ryanhelsing/ry-ui/dist/css/ry-ui.css">
118
+ <link rel="stylesheet" href="https://unpkg.com/@ryanhelsing/ry-ui/dist/themes/light.css">
119
+ <link rel="stylesheet" href="https://unpkg.com/@ryanhelsing/ry-ui/dist/themes/dark.css">
120
+ ```
121
+
122
+ ### Theme Toggle Component
123
+
124
+ ```html
125
+ <ry-theme-toggle themes="light,dark"></ry-theme-toggle>
126
+ ```
127
+
128
+ This component:
129
+ - Cycles through specified themes on click
130
+ - Sets `data-ry-theme` on the `<html>` element
131
+ - Emits `ry:theme-change` events
132
+
133
+ ```javascript
134
+ document.addEventListener('ry:theme-change', (e) => {
135
+ console.log('Theme changed to:', e.detail.theme);
136
+ });
137
+ ```
138
+
139
+ ### Switching Themes Programmatically
140
+
141
+ ```javascript
142
+ // Set theme
143
+ document.documentElement.dataset.ryTheme = 'dark';
144
+
145
+ // Get current theme
146
+ const current = document.documentElement.dataset.ryTheme;
147
+ ```
148
+
149
+ ## CSS Loading Options
150
+
151
+ ### Option 1: Full Bundle (Simplest)
152
+
153
+ ```html
154
+ <link rel="stylesheet" href="https://unpkg.com/@ryanhelsing/ry-ui/dist/css/ry-ui.css">
155
+ ```
156
+
157
+ Contains tokens + structure + theme. Works out of the box.
158
+
159
+ ### Option 2: Custom Theme (Full Control)
160
+
161
+ Load structure without default theme, then add your own:
162
+
163
+ ```html
164
+ <!-- Required: tokens -->
165
+ <link rel="stylesheet" href="https://unpkg.com/@ryanhelsing/ry-ui/dist/css/ry-tokens.css">
166
+ <!-- Required: structure (layout, no colors) -->
167
+ <link rel="stylesheet" href="https://unpkg.com/@ryanhelsing/ry-ui/dist/css/ry-structure.css">
168
+ <!-- Your custom theme -->
169
+ <link rel="stylesheet" href="/your-theme.css">
170
+ ```
171
+
172
+ Structure CSS contains only layout properties (display, flex, positioning, sizing). No colors, shadows, or borders. Your theme provides all visual styling.
173
+
174
+ ### Option 3: Override Tokens Only
175
+
176
+ Use the full bundle but override specific tokens:
177
+
178
+ ```html
179
+ <link rel="stylesheet" href="https://unpkg.com/@ryanhelsing/ry-ui/dist/css/ry-ui.css">
180
+ <style>
181
+ :root {
182
+ --ry-color-primary: #e11d48;
183
+ --ry-color-primary-hover: #be123c;
184
+ --ry-radius-md: 0;
185
+ --ry-radius-lg: 0;
186
+ }
187
+ </style>
188
+ ```
189
+
190
+ ## Available CSS Files
191
+
192
+ **Main files** (`dist/css/`):
193
+
194
+ | File | Size | Purpose |
195
+ |------|------|---------|
196
+ | `ry-ui.css` | 68KB | Complete bundle (tokens + structure + theme) |
197
+ | `ry-tokens.css` | 6KB | CSS custom properties only |
198
+ | `ry-structure.css` | 51KB | Layout/behavior (no visual styling) |
199
+ | `ry-theme.css` | 47KB | Visual styling (colors, shadows, borders) |
200
+
201
+ **Theme files** (`dist/themes/`):
202
+
203
+ | File | Purpose |
204
+ |------|---------|
205
+ | `light.css` | Light theme overrides (code syntax, etc.) |
206
+ | `dark.css` | Dark theme (dark backgrounds, light text) |
207
+ | `ocean.css` | Ocean theme (blue-tinted, cyan accents) |
208
+
209
+ ## CSS Tokens Reference
210
+
211
+ All styling uses CSS custom properties. Override any of these:
212
+
213
+ ### Colors
214
+ ```css
215
+ --ry-color-primary
216
+ --ry-color-primary-hover
217
+ --ry-color-primary-active
218
+ --ry-color-secondary
219
+ --ry-color-success
220
+ --ry-color-warning
221
+ --ry-color-danger
222
+ --ry-color-info
223
+ --ry-color-text
224
+ --ry-color-text-muted
225
+ --ry-color-text-inverse
226
+ --ry-color-bg
227
+ --ry-color-bg-subtle
228
+ --ry-color-bg-muted
229
+ --ry-color-border
230
+ --ry-color-border-strong
231
+ --ry-color-overlay
232
+ ```
233
+
234
+ ### Typography
235
+ ```css
236
+ --ry-font-sans
237
+ --ry-font-mono
238
+ --ry-text-xs through --ry-text-4xl
239
+ --ry-font-normal (400)
240
+ --ry-font-medium (500)
241
+ --ry-font-semibold (600)
242
+ --ry-font-bold (700)
243
+ ```
244
+
245
+ ### Spacing
246
+ ```css
247
+ --ry-space-1 through --ry-space-20 /* 0.25rem to 5rem */
248
+ ```
249
+
250
+ ### Borders & Shadows
251
+ ```css
252
+ --ry-radius-none through --ry-radius-full
253
+ --ry-shadow-sm, --ry-shadow-md, --ry-shadow-lg, --ry-shadow-xl
254
+ --ry-focus-ring
255
+ ```
256
+
257
+ ### Timing
258
+ ```css
259
+ --ry-duration-fast (100ms)
260
+ --ry-duration-normal (200ms)
261
+ --ry-duration-slow (300ms)
262
+ --ry-ease
263
+ ```
264
+
265
+ ## Component Examples
266
+
267
+ ### Button
268
+ ```html
269
+ <ry-button>Default</ry-button>
270
+ <ry-button variant="primary">Primary</ry-button>
271
+ <ry-button variant="secondary">Secondary</ry-button>
272
+ <ry-button variant="danger">Danger</ry-button>
273
+ <ry-button disabled>Disabled</ry-button>
274
+ ```
275
+
276
+ ### Modal
277
+ ```html
278
+ <ry-button modal="my-modal">Open Modal</ry-button>
279
+
280
+ <ry-modal id="my-modal" title="Modal Title">
281
+ <p>Modal content goes here.</p>
282
+ </ry-modal>
283
+ ```
284
+
285
+ ### Drawer
286
+ ```html
287
+ <ry-button drawer="my-drawer">Open Drawer</ry-button>
288
+
289
+ <ry-drawer id="my-drawer" side="left" title="Menu">
290
+ <nav>Navigation items...</nav>
291
+ </ry-drawer>
292
+ ```
293
+
294
+ ### Tabs
295
+ ```html
296
+ <ry-tabs>
297
+ <ry-tab title="First" active>First tab content</ry-tab>
298
+ <ry-tab title="Second">Second tab content</ry-tab>
299
+ <ry-tab title="Third">Third tab content</ry-tab>
300
+ </ry-tabs>
301
+ ```
302
+
303
+ ### Accordion
304
+ ```html
305
+ <ry-accordion>
306
+ <ry-accordion-item title="Section One" open>
307
+ Content for section one.
308
+ </ry-accordion-item>
309
+ <ry-accordion-item title="Section Two">
310
+ Content for section two.
311
+ </ry-accordion-item>
312
+ </ry-accordion>
313
+ ```
314
+
315
+ ### Select
316
+ ```html
317
+ <ry-select placeholder="Choose country" name="country">
318
+ <ry-option value="us">United States</ry-option>
319
+ <ry-option value="uk">United Kingdom</ry-option>
320
+ <ry-option value="ca">Canada</ry-option>
321
+ </ry-select>
322
+ ```
323
+
324
+ ### Toast (Programmatic)
325
+ ```html
326
+ <script type="module">
327
+ // Global access
328
+ RyToast.success('Saved successfully!');
329
+ RyToast.error('Something went wrong');
330
+ RyToast.info('FYI...');
331
+ RyToast.warning('Be careful');
332
+ </script>
333
+ ```
334
+
335
+ ### Alert
336
+ ```html
337
+ <ry-alert type="info">Information message</ry-alert>
338
+ <ry-alert type="success">Success message</ry-alert>
339
+ <ry-alert type="warning">Warning message</ry-alert>
340
+ <ry-alert type="danger">Error message</ry-alert>
341
+ ```
342
+
343
+ ## Full Example
344
+
345
+ ```html
346
+ <!DOCTYPE html>
347
+ <html lang="en" data-ry-theme="light">
348
+ <head>
349
+ <meta charset="UTF-8">
350
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
351
+ <title>My App</title>
352
+ <!-- Base CSS -->
353
+ <link rel="stylesheet" href="https://unpkg.com/@ryanhelsing/ry-ui/dist/css/ry-ui.css">
354
+ <!-- Themes for switching -->
355
+ <link rel="stylesheet" href="https://unpkg.com/@ryanhelsing/ry-ui/dist/themes/light.css">
356
+ <link rel="stylesheet" href="https://unpkg.com/@ryanhelsing/ry-ui/dist/themes/dark.css">
357
+ </head>
358
+ <body style="background: var(--ry-color-bg); color: var(--ry-color-text);">
359
+
360
+ <ry-page>
361
+ <ry-header>
362
+ <strong>My App</strong>
363
+ <ry-theme-toggle themes="light,dark"></ry-theme-toggle>
364
+ </ry-header>
365
+
366
+ <ry-main>
367
+ <ry-section>
368
+ <h1>Welcome</h1>
369
+ <ry-button variant="primary" modal="demo">Open Modal</ry-button>
370
+ </ry-section>
371
+ </ry-main>
372
+
373
+ <ry-modal id="demo" title="Hello">
374
+ <p>This is a modal dialog.</p>
375
+ </ry-modal>
376
+ </ry-page>
377
+
378
+ <script type="module" src="https://unpkg.com/@ryanhelsing/ry-ui/dist/ry-ui.js"></script>
379
+ </body>
380
+ </html>
381
+ ```
382
+
383
+ ## Browser Support
384
+
385
+ ry-ui targets ES2022 and modern browsers:
386
+ - Chrome/Edge 94+
387
+ - Firefox 93+
388
+ - Safari 15.4+
389
+
390
+ No IE11 support. No polyfills included.
391
+
392
+ ---
393
+
394
+ ## LLM Quick Reference
395
+
396
+ Every component with copy-paste examples.
397
+
398
+ ### Layout (CSS-only, no JS)
399
+ ```html
400
+ <ry-page>
401
+ <ry-header sticky>Header</ry-header>
402
+ <ry-main>
403
+ <ry-section>Content</ry-section>
404
+ </ry-main>
405
+ <ry-footer>Footer</ry-footer>
406
+ </ry-page>
407
+
408
+ <ry-grid cols="3">
409
+ <div>1</div><div>2</div><div>3</div>
410
+ </ry-grid>
411
+
412
+ <ry-stack>Vertical stack</ry-stack>
413
+ <ry-cluster>Horizontal cluster</ry-cluster>
414
+ <ry-card>Card container</ry-card>
415
+ <ry-divider></ry-divider>
416
+ ```
417
+
418
+ ### Button
419
+ ```html
420
+ <ry-button>Default</ry-button>
421
+ <ry-button variant="primary">Primary</ry-button>
422
+ <ry-button variant="secondary">Secondary</ry-button>
423
+ <ry-button variant="danger">Danger</ry-button>
424
+ <ry-button disabled>Disabled</ry-button>
425
+ <ry-button modal="modal-id">Opens modal</ry-button>
426
+ <ry-button drawer="drawer-id">Opens drawer</ry-button>
427
+ ```
428
+
429
+ ### Modal
430
+ ```html
431
+ <ry-button modal="my-modal">Open</ry-button>
432
+ <ry-modal id="my-modal" title="Title">
433
+ Content here
434
+ <div slot="footer"><ry-button>Close</ry-button></div>
435
+ </ry-modal>
436
+ ```
437
+
438
+ ### Drawer
439
+ ```html
440
+ <ry-button drawer="my-drawer">Open</ry-button>
441
+ <ry-drawer id="my-drawer" side="left" title="Menu">
442
+ <!-- side: left | right | bottom -->
443
+ Drawer content
444
+ </ry-drawer>
445
+ ```
446
+
447
+ ### Accordion
448
+ ```html
449
+ <ry-accordion multiple>
450
+ <!-- multiple: allow many open at once -->
451
+ <ry-accordion-item title="Section 1" open>Content 1</ry-accordion-item>
452
+ <ry-accordion-item title="Section 2">Content 2</ry-accordion-item>
453
+ </ry-accordion>
454
+ ```
455
+
456
+ ### Tabs
457
+ ```html
458
+ <ry-tabs>
459
+ <ry-tab title="Tab 1" active>Content 1</ry-tab>
460
+ <ry-tab title="Tab 2">Content 2</ry-tab>
461
+ </ry-tabs>
462
+ ```
463
+
464
+ ### Dropdown
465
+ ```html
466
+ <ry-dropdown>
467
+ <ry-button slot="trigger">Menu</ry-button>
468
+ <ry-menu>
469
+ <ry-menu-item>Item 1</ry-menu-item>
470
+ <ry-menu-item>Item 2</ry-menu-item>
471
+ </ry-menu>
472
+ </ry-dropdown>
473
+ ```
474
+
475
+ ### Select
476
+ ```html
477
+ <ry-select placeholder="Choose..." name="field" value="preselected">
478
+ <ry-option value="a">Option A</ry-option>
479
+ <ry-option value="b" disabled>Option B</ry-option>
480
+ </ry-select>
481
+ ```
482
+
483
+ ### Switch
484
+ ```html
485
+ <ry-switch name="notifications" checked></ry-switch>
486
+ <ry-switch disabled></ry-switch>
487
+ ```
488
+
489
+ ### Field (form wrapper)
490
+ ```html
491
+ <ry-field label="Email">
492
+ <input type="email" name="email">
493
+ </ry-field>
494
+ ```
495
+
496
+ ### Tooltip
497
+ ```html
498
+ <ry-tooltip content="Help text" position="top">
499
+ <!-- position: top | bottom | left | right -->
500
+ <span>Hover me</span>
501
+ </ry-tooltip>
502
+ ```
503
+
504
+ ### Alert
505
+ ```html
506
+ <ry-alert type="info">Info message</ry-alert>
507
+ <ry-alert type="success">Success!</ry-alert>
508
+ <ry-alert type="warning">Warning!</ry-alert>
509
+ <ry-alert type="danger" dismissible>Error (can dismiss)</ry-alert>
510
+ ```
511
+
512
+ ### Badge
513
+ ```html
514
+ <ry-badge>Default</ry-badge>
515
+ <ry-badge variant="success">Active</ry-badge>
516
+ ```
517
+
518
+ ### Toast (JS only)
519
+ ```javascript
520
+ RyToast.success('Saved!');
521
+ RyToast.error('Failed!');
522
+ RyToast.info('FYI');
523
+ RyToast.warning('Careful!');
524
+ RyToast.show({ message: 'Custom', variant: 'info', duration: 5000 });
525
+ ```
526
+
527
+ ### Slider
528
+ ```html
529
+ <ry-slider min="0" max="100" value="50" step="1"></ry-slider>
530
+ <ry-slider range start="20" end="80"></ry-slider>
531
+ <ry-slider labeled tooltip vertical></ry-slider>
532
+ ```
533
+
534
+ ### Knob
535
+ ```html
536
+ <ry-knob min="0" max="100" value="50" label="Volume"></ry-knob>
537
+ <ry-knob labels="Off,Low,Med,High" step="1"></ry-knob>
538
+ ```
539
+
540
+ ### Color Picker
541
+ ```html
542
+ <ry-color-picker value="#ff0000" format="hex"></ry-color-picker>
543
+ <ry-color-picker opacity inline swatches="#f00;#0f0;#00f"></ry-color-picker>
544
+
545
+ <ry-color-input value="#ff0000" placeholder="Pick color"></ry-color-input>
546
+ ```
547
+
548
+ ### Toggle Button (radio group)
549
+ ```html
550
+ <ry-toggle-button name="align" value="left" pressed>Left</ry-toggle-button>
551
+ <ry-toggle-button name="align" value="center">Center</ry-toggle-button>
552
+ <ry-toggle-button name="align" value="right">Right</ry-toggle-button>
553
+ ```
554
+
555
+ ### Icon
556
+ ```html
557
+ <ry-icon name="check" size="24" label="Checkmark"></ry-icon>
558
+ ```
559
+
560
+ ### Code Block
561
+ ```html
562
+ <ry-code language="js" title="Example" line-numbers>
563
+ const x = 1;
564
+ </ry-code>
565
+ <!-- language: js | css | html | json | text -->
566
+ ```
567
+
568
+ ### Theme Toggle
569
+ ```html
570
+ <ry-theme-toggle themes="light,dark,ocean"></ry-theme-toggle>
571
+ ```
572
+
573
+ ### Events (all components)
574
+ ```javascript
575
+ // All events prefixed with ry:
576
+ element.addEventListener('ry:change', (e) => console.log(e.detail));
577
+ element.addEventListener('ry:open', () => {});
578
+ element.addEventListener('ry:close', () => {});
579
+ ```
580
+
581
+ ### Programmatic Control
582
+ ```javascript
583
+ // Most components have open/close/toggle methods
584
+ document.querySelector('ry-modal').open();
585
+ document.querySelector('ry-modal').close();
586
+ document.querySelector('ry-drawer').toggle();
587
+
588
+ // Get/set values
589
+ document.querySelector('ry-select').value = 'new-value';
590
+ document.querySelector('ry-slider').value;
591
+ ```
package/dist/components/ry-dropdown.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ry-dropdown.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-dropdown.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,UAAW,SAAQ,SAAS;;IACvC,KAAK,IAAI,IAAI;IAmFb,IAAI,IAAI,IAAI;IAgBZ,KAAK,IAAI,IAAI;IAUb,MAAM,IAAI,IAAI;CAOf"}
1
+ {"version":3,"file":"ry-dropdown.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-dropdown.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,UAAW,SAAQ,SAAS;;IACvC,KAAK,IAAI,IAAI;IAmFb,IAAI,IAAI,IAAI;IAkBZ,KAAK,IAAI,IAAI;IA2Bb,MAAM,IAAI,IAAI;CAOf"}
package/dist/components/ry-example.d.ts CHANGED
@@ -13,6 +13,13 @@
13
13
  * </accordion-item>
14
14
  * </accordion>
15
15
  * </template>
16
+ * <!-- Optional: JS usage examples in collapsible section -->
17
+ * <script slot="js" type="text/plain">
18
+ * // Listen for changes
19
+ * element.addEventListener('ry:change', (e) => {
20
+ * console.log(e.detail.value);
21
+ * });
22
+ * </script>
16
23
  * </ry-example>
17
24
  */
18
25
  import { RyElement } from '../core/ry-element.js';
package/dist/components/ry-example.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ry-example.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-example.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,qBAAa,SAAU,SAAQ,SAAS;;IACtC,KAAK,IAAI,IAAI;CA8Dd"}
1
+ {"version":3,"file":"ry-example.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-example.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,qBAAa,SAAU,SAAQ,SAAS;;IACtC,KAAK,IAAI,IAAI;CA0Gd"}
package/dist/components/ry-gradient-picker.d.ts ADDED
@@ -0,0 +1,39 @@
1
+ /**
2
+ * <ry-gradient-picker>
3
+ *
4
+ * Gradient editor with draggable color stops, type toggle, and inline color picker.
5
+ * Supports linear and radial gradients with unlimited stops.
6
+ *
7
+ * Usage:
8
+ * <ry-gradient-picker value="linear-gradient(90deg, #ff0000 0%, #0000ff 100%)"></ry-gradient-picker>
9
+ * <ry-gradient-picker value="radial-gradient(circle, #ff0000 0%, #00ff00 50%, #0000ff 100%)"></ry-gradient-picker>
10
+ */
11
+ import { RyElement } from '../core/ry-element.js';
12
+ export interface GradientStop {
13
+ id: string;
14
+ color: string;
15
+ position: number;
16
+ }
17
+ export type GradientType = 'solid' | 'linear' | 'radial';
18
+ export type RadialShape = 'circle' | 'ellipse';
19
+ export declare class RyGradientPicker extends RyElement {
20
+ #private;
21
+ static observedAttributes: readonly ["value", "disabled", "output"];
22
+ setup(): void;
23
+ attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
24
+ get value(): string;
25
+ set value(val: string);
26
+ get type(): GradientType;
27
+ set type(val: GradientType);
28
+ get angle(): number;
29
+ set angle(val: number);
30
+ get shape(): RadialShape;
31
+ set shape(val: RadialShape);
32
+ get stops(): GradientStop[];
33
+ get selectedStop(): GradientStop | null;
34
+ get disabled(): boolean;
35
+ set disabled(val: boolean);
36
+ addStop(color: string, position: number): void;
37
+ removeStop(id: string): boolean;
38
+ }
39
+ //# sourceMappingURL=ry-gradient-picker.d.ts.map
package/dist/components/ry-gradient-picker.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ry-gradient-picker.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-gradient-picker.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAQlD,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACzD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;AAuF/C,qBAAa,gBAAiB,SAAQ,SAAS;;IAkB7C,MAAM,CAAC,kBAAkB,2CAA4C;IAErE,KAAK,IAAI,IAAI;IA8rBb,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAgB9F,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAMpB;IAED,IAAI,IAAI,IAAI,YAAY,CAEvB;IAED,IAAI,IAAI,CAAC,GAAG,EAAE,YAAY,EAEzB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAKpB;IAED,IAAI,KAAK,IAAI,WAAW,CAEvB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,WAAW,EAEzB;IAED,IAAI,KAAK,IAAI,YAAY,EAAE,CAE1B;IAED,IAAI,YAAY,IAAI,YAAY,GAAG,IAAI,CAGtC;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAMxB;IAED,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAO9C,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;CAShC"}
package/dist/components/ry-number-select.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ /**
2
+ * <ry-number-select>
3
+ *
4
+ * Numeric input with buttons, drag, keyboard, wheel, and optional typing.
5
+ *
6
+ * Usage:
7
+ * <ry-number-select min="0" max="100" value="50" step="1"></ry-number-select>
8
+ * <ry-number-select min="0" max="10" step="0.5" arrows="end" editable></ry-number-select>
9
+ */
10
+ import { RyElement } from '../core/ry-element.js';
11
+ export declare class RyNumberSelect extends RyElement {
12
+ #private;
13
+ static observedAttributes: readonly ["min", "max", "step", "value", "disabled", "arrows", "icons", "drag", "editable", "wrap", "label", "prefix", "suffix"];
14
+ setup(): void;
15
+ get value(): number;
16
+ set value(val: number);
17
+ get min(): number;
18
+ set min(val: number);
19
+ get max(): number;
20
+ set max(val: number);
21
+ get step(): number;
22
+ set step(val: number);
23
+ get drag(): 'x' | 'y' | 'none';
24
+ set drag(val: 'x' | 'y' | 'none');
25
+ get disabled(): boolean;
26
+ set disabled(val: boolean);
27
+ attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
28
+ teardown(): void;
29
+ }
30
+ //# sourceMappingURL=ry-number-select.d.ts.map