@ryanhelsing/ry-ui 1.0.2 → 1.0.3

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 (51) hide show
  1. package/AGENTS.md +56 -0
  2. package/README.md +26 -1
  3. package/dist/components/ry-carousel.d.ts +21 -0
  4. package/dist/components/ry-carousel.d.ts.map +1 -0
  5. package/dist/components/ry-feature.d.ts +21 -0
  6. package/dist/components/ry-feature.d.ts.map +1 -0
  7. package/dist/components/ry-hero.d.ts +16 -0
  8. package/dist/components/ry-hero.d.ts.map +1 -0
  9. package/dist/components/ry-number-select.d.ts.map +1 -1
  10. package/dist/components/ry-pricing.d.ts +21 -0
  11. package/dist/components/ry-pricing.d.ts.map +1 -0
  12. package/dist/components/ry-select.d.ts +8 -1
  13. package/dist/components/ry-select.d.ts.map +1 -1
  14. package/dist/components/ry-stat.d.ts +17 -0
  15. package/dist/components/ry-stat.d.ts.map +1 -0
  16. package/dist/components/ry-tag-input.d.ts +18 -0
  17. package/dist/components/ry-tag-input.d.ts.map +1 -0
  18. package/dist/components/ry-tag.d.ts +19 -0
  19. package/dist/components/ry-tag.d.ts.map +1 -0
  20. package/dist/core/ry-transform.d.ts.map +1 -1
  21. package/dist/css/ry-structure.css +620 -148
  22. package/dist/css/ry-theme.css +456 -180
  23. package/dist/css/ry-tokens.css +112 -24
  24. package/dist/css/ry-ui.css +4708 -1059
  25. package/dist/ry-ui.d.ts +7 -0
  26. package/dist/ry-ui.d.ts.map +1 -1
  27. package/dist/ry-ui.js +1071 -713
  28. package/dist/ry-ui.js.map +1 -1
  29. package/dist/themes/dark.css +7 -90
  30. package/dist/themes/light.css +6 -35
  31. package/dist/themes/ocean.css +22 -26
  32. package/docs/components/accordion.md +31 -0
  33. package/docs/components/button.md +65 -0
  34. package/docs/components/color.md +84 -0
  35. package/docs/components/display.md +69 -0
  36. package/docs/components/drawer.md +36 -0
  37. package/docs/components/dropdown.md +33 -0
  38. package/docs/components/forms.md +86 -0
  39. package/docs/components/knob.md +42 -0
  40. package/docs/components/layout.md +189 -0
  41. package/docs/components/modal.md +38 -0
  42. package/docs/components/number-select.md +42 -0
  43. package/docs/components/slider.md +48 -0
  44. package/docs/components/tabs.md +30 -0
  45. package/docs/components/theme-toggle.md +36 -0
  46. package/docs/components/toast.md +27 -0
  47. package/docs/components/tooltip.md +14 -0
  48. package/docs/components/tree.md +46 -0
  49. package/docs/theming.md +182 -0
  50. package/package.json +5 -3
  51. package/USING_CDN.md +0 -591
package/AGENTS.md ADDED
@@ -0,0 +1,56 @@
1
+ # AGENTS.md — ry-ui
2
+
3
+ > Web components. No framework. Light DOM. CSS is the source of truth.
4
+
5
+ ## Setup
6
+
7
+ ```html
8
+ <link rel="stylesheet" href="https://unpkg.com/@ryanhelsing/ry-ui/css/ry-ui.css">
9
+ <script type="module" src="https://unpkg.com/@ryanhelsing/ry-ui"></script>
10
+ ```
11
+
12
+ Theme: `<html data-ry-theme="light">` — light | dark
13
+
14
+ ## Concepts
15
+
16
+ - **Light DOM** — no shadow DOM, your CSS just works
17
+ - **Clean syntax** — `<ry><stack><card>Hi</card></stack></ry>` (drops `ry-` prefix inside `<ry>`)
18
+ - **Tokens** — all visuals via `--ry-*` CSS custom properties, override to customize
19
+ - **Structure vs Theme** — load `ry-structure.css` alone + your own theme for full control
20
+ - **Events** — all prefixed `ry:` — `ry:change`, `ry:input`, `ry:open`, `ry:close`, `ry:toggle`, `ry:select`, `ry:move`
21
+
22
+ ## Components
23
+
24
+ | Category | Components |
25
+ |----------|-----------|
26
+ | **Layout** | page, header, main, footer, section, aside, grid, stack, cluster, split, center, card, nav, logo, actions, divider |
27
+ | **Overlays** | modal, drawer, dropdown, tooltip, toast |
28
+ | **Forms** | field, select, switch, toggle-button, checkbox/radio (native) |
29
+ | **Values** | slider, knob, number-select, color-picker, color-input, gradient-picker |
30
+ | **Display** | badge, alert, icon, code, table (native), tree |
31
+ | **Utility** | theme-toggle |
32
+
33
+ ## Docs
34
+
35
+ Pull the page you need for full attributes, events, JS API, and examples:
36
+
37
+ | Doc | What's in it |
38
+ |-----|-------------|
39
+ | [docs/components/layout.md](docs/components/layout.md) | page, header, main, footer, section, aside, grid, stack, cluster, split, center, card, nav, logo, actions, divider |
40
+ | [docs/components/button.md](docs/components/button.md) | button, toggle-button |
41
+ | [docs/components/accordion.md](docs/components/accordion.md) | accordion, accordion-item |
42
+ | [docs/components/tabs.md](docs/components/tabs.md) | tabs, tab |
43
+ | [docs/components/modal.md](docs/components/modal.md) | modal |
44
+ | [docs/components/drawer.md](docs/components/drawer.md) | drawer |
45
+ | [docs/components/dropdown.md](docs/components/dropdown.md) | dropdown, menu, menu-item |
46
+ | [docs/components/tooltip.md](docs/components/tooltip.md) | tooltip |
47
+ | [docs/components/toast.md](docs/components/toast.md) | toast (programmatic) |
48
+ | [docs/components/forms.md](docs/components/forms.md) | field, select, switch, checkbox, radio |
49
+ | [docs/components/slider.md](docs/components/slider.md) | slider |
50
+ | [docs/components/knob.md](docs/components/knob.md) | knob |
51
+ | [docs/components/number-select.md](docs/components/number-select.md) | number-select |
52
+ | [docs/components/color.md](docs/components/color.md) | color-picker, color-input, gradient-picker |
53
+ | [docs/components/tree.md](docs/components/tree.md) | tree, tree-item |
54
+ | [docs/components/display.md](docs/components/display.md) | badge, alert, icon, code, table |
55
+ | [docs/components/theme-toggle.md](docs/components/theme-toggle.md) | theme-toggle |
56
+ | [docs/theming.md](docs/theming.md) | tokens, custom themes, structure-only loading |
package/README.md CHANGED
@@ -17,7 +17,18 @@ ry-ui normalizes this. No decisions to make. No architecture to debate. An LLM c
17
17
  - [x] separate the css minimal structure from the theme
18
18
  - [x] separate the component behavior from the design (see `docs/arch/behavior-style-separation.md`)
19
19
 
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,
20
+ ### Next Up — Missing Primitives That Block Real Apps
21
+
22
+ - [ ] **Table / Data Grid** — sorting, column resize, virtual scrolling for large datasets. Highest-value missing component for any dashboard.
23
+ - [ ] **Form** — form orchestration around existing inputs. Validation, error states, submit handling, field grouping.
24
+ - [ ] **Menu / Context Menu** — right-click menus, nested submenus. Required for any desktop-targeting app.
25
+ - [ ] **Command Palette** — Cmd+K pattern. Table stakes for power-user apps and ry-os.
26
+ - [ ] **Toast stacking** — ry-toast exists but needs positioning, stacking multiple toasts, auto-dismiss timers, queue behavior.
27
+ - [ ] **Breadcrumb, Pagination, Stepper** — navigation patterns for any multi-page app.
28
+
29
+ ### Backlog
30
+
31
+ - [ ] Placeholder, Step/Wizard, Loader/Progress, Comment/Feed, Statistic/Graph, Hero, Calendar, Rating, Search, Shape, Sticky, dialog/alert, carousel, qr-code, diff, split-panel, format-bytes-number-currency, mutation-observer and resize observer
21
32
 
22
33
  - [ ] This is a theme on its own: https://codepen.io/oathanrex/pen/EayVMqZ
23
34
 
@@ -25,6 +36,7 @@ ry-ui normalizes this. No decisions to make. No architecture to debate. An LLM c
25
36
  - [ ] cross-platform transpiler - Swift/SwiftUI (see `docs/arch/cross-platform-transpiler.md`)
26
37
  - [ ] animation system with GSAP (see `docs/plans/animation-system.md`)
27
38
  - [ ] could use to write apps on ry-os lol.. rust based linux DE with html/js/css -> Dioxus -> rust apps / with an llm on device
39
+ - [ ] https://github.com/GrapheneOS — hardened Android, good reference for security-first OS/DE design patterns
28
40
 
29
41
  ## Quick Start
30
42
 
@@ -152,6 +164,19 @@ npm run build # Production build
152
164
  npm run typecheck
153
165
  ```
154
166
 
167
+ ## Publishing
168
+
169
+ ```bash
170
+ nvm use 22
171
+ npm login
172
+ npm run build
173
+ git add -A && git commit -m "new build"
174
+ npm version patch # or minor, major
175
+ npm publish --access public
176
+ ```
177
+
178
+ Automatically available on CDN via [unpkg](https://unpkg.com/@ryanhelsing/ry-ui/) and [jsdelivr](https://cdn.jsdelivr.net/npm/@ryanhelsing/ry-ui/).
179
+
155
180
  ## TypeScript Philosophy
156
181
 
157
182
  ry-ui is written in strict TypeScript with a "vanilla-first" approach:
package/dist/components/ry-carousel.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * <ry-carousel>
3
+ *
4
+ * Content slider with autoplay, touch/swipe, dots, arrows, keyboard nav.
5
+ *
6
+ * Usage:
7
+ * <ry-carousel autoplay interval="5000" dots arrows loop>
8
+ * <div>Slide 1</div>
9
+ * <div>Slide 2</div>
10
+ * </ry-carousel>
11
+ */
12
+ import { RyElement } from '../core/ry-element.js';
13
+ export declare class RyCarousel extends RyElement {
14
+ #private;
15
+ setup(): void;
16
+ goTo(index: number): void;
17
+ next(): void;
18
+ prev(): void;
19
+ teardown(): void;
20
+ }
21
+ //# sourceMappingURL=ry-carousel.d.ts.map
package/dist/components/ry-carousel.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ry-carousel.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-carousel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,qBAAa,UAAW,SAAQ,SAAS;;IAOvC,KAAK,IAAI,IAAI;IAgJb,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IA6BzB,IAAI,IAAI,IAAI;IAIZ,IAAI,IAAI,IAAI;IAIZ,QAAQ,IAAI,IAAI;CAGjB"}
package/dist/components/ry-feature.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * <ry-feature> + <ry-feature-grid>
3
+ *
4
+ * Feature card with icon + responsive grid.
5
+ *
6
+ * Usage:
7
+ * <ry-feature-grid cols="3">
8
+ * <ry-feature icon="settings">
9
+ * <h3>Easy Setup</h3>
10
+ * <p>One line to get started.</p>
11
+ * </ry-feature>
12
+ * </ry-feature-grid>
13
+ */
14
+ import { RyElement } from '../core/ry-element.js';
15
+ export declare class RyFeature extends RyElement {
16
+ #private;
17
+ setup(): void;
18
+ }
19
+ export declare class RyFeatureGrid extends RyElement {
20
+ }
21
+ //# sourceMappingURL=ry-feature.d.ts.map
package/dist/components/ry-feature.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ry-feature.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-feature.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,qBAAa,SAAU,SAAQ,SAAS;;IACtC,KAAK,IAAI,IAAI;CAmBd;AAED,qBAAa,aAAc,SAAQ,SAAS;CAAG"}
package/dist/components/ry-hero.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ /**
2
+ * <ry-hero>
3
+ *
4
+ * Hero section component (mostly CSS-only).
5
+ *
6
+ * Usage:
7
+ * <ry-hero align="center">
8
+ * <h1>Build apps faster</h1>
9
+ * <p>Framework-agnostic components.</p>
10
+ * <ry-cluster><ry-button>Get Started</ry-button></ry-cluster>
11
+ * </ry-hero>
12
+ */
13
+ import { RyElement } from '../core/ry-element.js';
14
+ export declare class RyHero extends RyElement {
15
+ }
16
+ //# sourceMappingURL=ry-hero.d.ts.map
package/dist/components/ry-hero.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ry-hero.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-hero.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,MAAO,SAAQ,SAAS;CAAG"}
package/dist/components/ry-number-select.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ry-number-select.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-number-select.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAMlD,qBAAa,cAAe,SAAQ,SAAS;;IAgB3C,MAAM,CAAC,kBAAkB,mIAAoI;IAE7J,KAAK,IAAI,IAAI;IAicb,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAEpB;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,GAAG,EAAE,MAAM,EAElB;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,GAAG,EAAE,MAAM,EAElB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAEnB;IAED,IAAI,IAAI,IAAI,GAAG,GAAG,GAAG,GAAG,MAAM,CAE7B;IACD,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,MAAM,EAE/B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAGxB;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAO9F,QAAQ,IAAI,IAAI;CAGjB"}
1
+ {"version":3,"file":"ry-number-select.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-number-select.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAMlD,qBAAa,cAAe,SAAQ,SAAS;;IAgB3C,MAAM,CAAC,kBAAkB,mIAAoI;IAE7J,KAAK,IAAI,IAAI;IA0cb,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAEpB;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,GAAG,EAAE,MAAM,EAElB;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,GAAG,EAAE,MAAM,EAElB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAEnB;IAED,IAAI,IAAI,IAAI,GAAG,GAAG,GAAG,GAAG,MAAM,CAE7B;IACD,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,MAAM,EAE/B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAGxB;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAO9F,QAAQ,IAAI,IAAI;CAGjB"}
package/dist/components/ry-pricing.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * <ry-pricing> + <ry-pricing-card>
3
+ *
4
+ * Pricing section with featured card variant.
5
+ *
6
+ * Usage:
7
+ * <ry-pricing>
8
+ * <ry-pricing-card featured>
9
+ * <h3>Pro</h3>
10
+ * <div slot="price">$29<span>/mo</span></div>
11
+ * <ul><li>Feature 1</li></ul>
12
+ * <ry-button>Choose Pro</ry-button>
13
+ * </ry-pricing-card>
14
+ * </ry-pricing>
15
+ */
16
+ import { RyElement } from '../core/ry-element.js';
17
+ export declare class RyPricing extends RyElement {
18
+ }
19
+ export declare class RyPricingCard extends RyElement {
20
+ }
21
+ //# sourceMappingURL=ry-pricing.d.ts.map
package/dist/components/ry-pricing.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ry-pricing.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-pricing.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,SAAU,SAAQ,SAAS;CAAG;AAC3C,qBAAa,aAAc,SAAQ,SAAS;CAAG"}
package/dist/components/ry-select.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * <ry-select>
3
3
  *
4
- * Custom select dropdown component.
4
+ * Custom select dropdown component with optional multi-select.
5
5
  *
6
6
  * Usage:
7
7
  * <ry-select placeholder="Choose country" name="country">
@@ -10,6 +10,12 @@
10
10
  * <ry-option value="ca" disabled>Canada</ry-option>
11
11
  * </ry-select>
12
12
  *
13
+ * Multi-select:
14
+ * <ry-select multiple clearable placeholder="Choose...">
15
+ * <ry-option value="us">United States</ry-option>
16
+ * <ry-option value="uk">United Kingdom</ry-option>
17
+ * </ry-select>
18
+ *
13
19
  * JS uses data-ry-target for queries, CSS uses classes for styling.
14
20
  */
15
21
  import { RyElement } from '../core/ry-element.js';
@@ -24,6 +30,7 @@ export declare class RySelect extends RyElement {
24
30
  toggle(): void;
25
31
  get value(): string;
26
32
  set value(val: string);
33
+ get values(): string[];
27
34
  teardown(): void;
28
35
  }
29
36
  //# sourceMappingURL=ry-select.d.ts.map
package/dist/components/ry-select.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ry-select.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-select.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAgB,MAAM,aAAa,CAAC;AAI9D,qBAAa,QAAS,SAAQ,SAAS;;IAOrC,QAAQ,EAAE,YAAY,EAAE,CAAM;IAE9B,MAAM,CAAC,kBAAkB,iCAAkC;IAE3D,KAAK,IAAI,IAAI;IA6Qb,IAAI,IAAI,IAAI;IA+CZ,KAAK,IAAI,IAAI;IAmBb,MAAM,IAAI,IAAI;IAQd,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAKpB;IAED,QAAQ,IAAI,IAAI;CAKjB"}
1
+ {"version":3,"file":"ry-select.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-select.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAgB,MAAM,aAAa,CAAC;AAI9D,qBAAa,QAAS,SAAQ,SAAS;;IAQrC,QAAQ,EAAE,YAAY,EAAE,CAAM;IAM9B,MAAM,CAAC,kBAAkB,iCAAkC;IAE3D,KAAK,IAAI,IAAI;IA0Zb,IAAI,IAAI,IAAI;IAmDZ,KAAK,IAAI,IAAI;IAmBb,MAAM,IAAI,IAAI;IAQd,IAAI,KAAK,IAAI,MAAM,CAKlB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAgBpB;IAED,IAAI,MAAM,IAAI,MAAM,EAAE,CAErB;IAED,QAAQ,IAAI,IAAI;CAKjB"}
package/dist/components/ry-stat.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ /**
2
+ * <ry-stat>
3
+ *
4
+ * KPI / statistic display with optional trend arrow.
5
+ *
6
+ * Usage:
7
+ * <ry-stat trend="up">
8
+ * <span slot="value">2,847</span>
9
+ * <span slot="label">Active Users</span>
10
+ * </ry-stat>
11
+ */
12
+ import { RyElement } from '../core/ry-element.js';
13
+ export declare class RyStat extends RyElement {
14
+ #private;
15
+ setup(): void;
16
+ }
17
+ //# sourceMappingURL=ry-stat.d.ts.map
package/dist/components/ry-stat.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ry-stat.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-stat.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,qBAAa,MAAO,SAAQ,SAAS;;IACnC,KAAK,IAAI,IAAI;CAyBd"}
package/dist/components/ry-tag-input.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ /**
2
+ * <ry-tag-input>
3
+ *
4
+ * Free-form tag entry with delimiter splitting and paste support.
5
+ *
6
+ * Usage:
7
+ * <ry-tag-input placeholder="Add tags..." delimiter="," max-tags="5" name="tags" value="js,ts,css"></ry-tag-input>
8
+ *
9
+ * Events: ry:change, ry:add, ry:remove
10
+ */
11
+ import { RyElement } from '../core/ry-element.js';
12
+ export declare class RyTagInput extends RyElement {
13
+ #private;
14
+ setup(): void;
15
+ get value(): string;
16
+ get values(): string[];
17
+ }
18
+ //# sourceMappingURL=ry-tag-input.d.ts.map
package/dist/components/ry-tag-input.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ry-tag-input.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-tag-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,UAAW,SAAQ,SAAS;;IAGvC,KAAK,IAAI,IAAI;IAmIb,IAAI,KAAK,IAAI,MAAM,CAGlB;IAED,IAAI,MAAM,IAAI,MAAM,EAAE,CAErB;CACF"}
package/dist/components/ry-tag.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ /**
2
+ * <ry-tag>
3
+ *
4
+ * Removable pill/tag component.
5
+ *
6
+ * Usage:
7
+ * <ry-tag>Default</ry-tag>
8
+ * <ry-tag variant="primary" removable>Removable</ry-tag>
9
+ * <ry-tag size="sm" removable data-value="js">JavaScript</ry-tag>
10
+ *
11
+ * JS uses data-ry-target for queries, CSS uses classes for styling.
12
+ */
13
+ import { RyElement } from '../core/ry-element.js';
14
+ export declare class RyTag extends RyElement {
15
+ #private;
16
+ setup(): void;
17
+ get label(): string;
18
+ }
19
+ //# sourceMappingURL=ry-tag.d.ts.map
package/dist/components/ry-tag.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ry-tag.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-tag.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,qBAAa,KAAM,SAAQ,SAAS;;IAClC,KAAK,IAAI,IAAI;IA+Bb,IAAI,KAAK,IAAI,MAAM,CAElB;CACF"}
package/dist/core/ry-transform.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ry-transform.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AA4CH;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAgBxC"}
1
+ {"version":3,"file":"ry-transform.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAqDH;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAgBxC"}