@ryanhelsing/ry-ui 1.0.1 → 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.
- package/AGENTS.md +56 -0
- package/README.md +28 -1
- package/dist/components/ry-carousel.d.ts +21 -0
- package/dist/components/ry-carousel.d.ts.map +1 -0
- package/dist/components/ry-dropdown.d.ts.map +1 -1
- package/dist/components/ry-example.d.ts +1 -1
- package/dist/components/ry-feature.d.ts +21 -0
- package/dist/components/ry-feature.d.ts.map +1 -0
- package/dist/components/ry-gradient-picker.d.ts +39 -0
- package/dist/components/ry-gradient-picker.d.ts.map +1 -0
- package/dist/components/ry-hero.d.ts +16 -0
- package/dist/components/ry-hero.d.ts.map +1 -0
- package/dist/components/ry-number-select.d.ts +30 -0
- package/dist/components/ry-number-select.d.ts.map +1 -0
- package/dist/components/ry-pricing.d.ts +21 -0
- package/dist/components/ry-pricing.d.ts.map +1 -0
- package/dist/components/ry-select.d.ts +8 -1
- package/dist/components/ry-select.d.ts.map +1 -1
- package/dist/components/ry-stat.d.ts +17 -0
- package/dist/components/ry-stat.d.ts.map +1 -0
- package/dist/components/ry-tag-input.d.ts +18 -0
- package/dist/components/ry-tag-input.d.ts.map +1 -0
- package/dist/components/ry-tag.d.ts +19 -0
- package/dist/components/ry-tag.d.ts.map +1 -0
- package/dist/components/ry-tree.d.ts +41 -0
- package/dist/components/ry-tree.d.ts.map +1 -0
- package/dist/core/ry-icons.d.ts.map +1 -1
- package/dist/core/ry-transform.d.ts.map +1 -1
- package/dist/css/ry-structure.css +1020 -95
- package/dist/css/ry-theme.css +772 -145
- package/dist/css/ry-tokens.css +112 -24
- package/dist/css/ry-ui.css +4713 -927
- package/dist/ry-ui.d.ts +12 -0
- package/dist/ry-ui.d.ts.map +1 -1
- package/dist/ry-ui.js +1838 -544
- package/dist/ry-ui.js.map +1 -1
- package/dist/themes/dark.css +7 -90
- package/dist/themes/light.css +6 -35
- package/dist/themes/ocean.css +22 -26
- package/docs/components/accordion.md +31 -0
- package/docs/components/button.md +65 -0
- package/docs/components/color.md +84 -0
- package/docs/components/display.md +69 -0
- package/docs/components/drawer.md +36 -0
- package/docs/components/dropdown.md +33 -0
- package/docs/components/forms.md +86 -0
- package/docs/components/knob.md +42 -0
- package/docs/components/layout.md +189 -0
- package/docs/components/modal.md +38 -0
- package/docs/components/number-select.md +42 -0
- package/docs/components/slider.md +48 -0
- package/docs/components/tabs.md +30 -0
- package/docs/components/theme-toggle.md +36 -0
- package/docs/components/toast.md +27 -0
- package/docs/components/tooltip.md +14 -0
- package/docs/components/tree.md +46 -0
- package/docs/theming.md +182 -0
- package/package.json +5 -3
- package/USING_CDN.md +0 -390
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,12 +17,26 @@ 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
|
-
|
|
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
|
|
32
|
+
|
|
33
|
+
- [ ] This is a theme on its own: https://codepen.io/oathanrex/pen/EayVMqZ
|
|
21
34
|
|
|
22
35
|
- [ ] 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
36
|
- [ ] cross-platform transpiler - Swift/SwiftUI (see `docs/arch/cross-platform-transpiler.md`)
|
|
24
37
|
- [ ] animation system with GSAP (see `docs/plans/animation-system.md`)
|
|
25
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
|
|
26
40
|
|
|
27
41
|
## Quick Start
|
|
28
42
|
|
|
@@ -150,6 +164,19 @@ npm run build # Production build
|
|
|
150
164
|
npm run typecheck
|
|
151
165
|
```
|
|
152
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
|
+
|
|
153
180
|
## TypeScript Philosophy
|
|
154
181
|
|
|
155
182
|
ry-ui is written in strict TypeScript with a "vanilla-first" approach:
|
|
@@ -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
|
|
@@ -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"}
|
|
@@ -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;
|
|
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"}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
* </accordion>
|
|
15
15
|
* </template>
|
|
16
16
|
* <!-- Optional: JS usage examples in collapsible section -->
|
|
17
|
-
* <script slot="js">
|
|
17
|
+
* <script slot="js" type="text/plain">
|
|
18
18
|
* // Listen for changes
|
|
19
19
|
* element.addEventListener('ry:change', (e) => {
|
|
20
20
|
* console.log(e.detail.value);
|
|
@@ -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
|
|
@@ -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"}
|
|
@@ -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
|
|
@@ -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"}
|
|
@@ -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
|
|
@@ -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"}
|
|
@@ -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
|
|
@@ -0,0 +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;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"}
|
|
@@ -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
|
|
@@ -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"}
|
|
@@ -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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ry-select.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-select.ts"],"names":[],"mappings":"AAAA
|
|
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"}
|
|
@@ -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
|
|
@@ -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"}
|
|
@@ -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
|
|
@@ -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"}
|
|
@@ -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
|
|
@@ -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"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* <ry-tree>
|
|
3
|
+
*
|
|
4
|
+
* Tree view with CSS-only expand/collapse using hidden checkboxes
|
|
5
|
+
* and grid-template-rows animation. Supports drag-and-drop rearranging
|
|
6
|
+
* and JSON serialization.
|
|
7
|
+
*
|
|
8
|
+
* Usage:
|
|
9
|
+
* <ry-tree>
|
|
10
|
+
* <ry-tree-item label="src" open>
|
|
11
|
+
* <ry-tree-item label="app" open>
|
|
12
|
+
* <ry-tree-item label="layout.tsx"></ry-tree-item>
|
|
13
|
+
* </ry-tree-item>
|
|
14
|
+
* </ry-tree-item>
|
|
15
|
+
* </ry-tree>
|
|
16
|
+
*
|
|
17
|
+
* Drag and drop:
|
|
18
|
+
* <ry-tree draggable>...</ry-tree>
|
|
19
|
+
*
|
|
20
|
+
* JS uses data-ry-target for queries, CSS uses .ry-tree__* for styling.
|
|
21
|
+
*/
|
|
22
|
+
import { RyElement } from '../core/ry-element.js';
|
|
23
|
+
export interface TreeNode {
|
|
24
|
+
label: string;
|
|
25
|
+
children?: TreeNode[];
|
|
26
|
+
open?: boolean;
|
|
27
|
+
selected?: boolean;
|
|
28
|
+
}
|
|
29
|
+
export declare class RyTree extends RyElement {
|
|
30
|
+
#private;
|
|
31
|
+
setup(): void;
|
|
32
|
+
/** Serialize the current tree state to JSON. */
|
|
33
|
+
toJSON(): TreeNode[];
|
|
34
|
+
/** Alias for toJSON(). */
|
|
35
|
+
get value(): TreeNode[];
|
|
36
|
+
/** Create a tree element from JSON data. */
|
|
37
|
+
static from(data: TreeNode[]): RyTree;
|
|
38
|
+
}
|
|
39
|
+
export declare class RyTreeItem extends RyElement {
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=ry-tree.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ry-tree.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-tree.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAclD,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,qBAAa,MAAO,SAAQ,SAAS;;IAWnC,KAAK,IAAI,IAAI;IAoHb,gDAAgD;IAChD,MAAM,IAAI,QAAQ,EAAE;IAMpB,0BAA0B;IAC1B,IAAI,KAAK,IAAI,QAAQ,EAAE,CAEtB;IA+BD,4CAA4C;IAC5C,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM;CAgOtC;AAED,qBAAa,UAAW,SAAQ,SAAS;CAExC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ry-icons.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;
|
|
1
|
+
{"version":3,"file":"ry-icons.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AA2GH;;GAEG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAE5D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAEpE;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,MAAM,EAAE,CAEvC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ry-transform.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;
|
|
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"}
|