@ryanhelsing/ry-ui 1.0.1 → 1.0.2

package/README.md

@@ -19,6 +19,8 @@ ry-ui normalizes this. No decisions to make. No architecture to debate. An LLM c
 
 - [ ] 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,
 
+- [ ] This is a theme on its own: https://codepen.io/oathanrex/pen/EayVMqZ
+
 - [ ] 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 )
 - [ ] cross-platform transpiler - Swift/SwiftUI (see `docs/arch/cross-platform-transpiler.md`)
 - [ ] animation system with GSAP (see `docs/plans/animation-system.md`)

package/USING_CDN.md

@@ -388,3 +388,204 @@ ry-ui targets ES2022 and modern browsers:
 - Safari 15.4+
 
 No IE11 support. No polyfills included.
+
+---
+
+## LLM Quick Reference
+
+Every component with copy-paste examples.
+
+### Layout (CSS-only, no JS)
+```html
+<ry-page>
+  <ry-header sticky>Header</ry-header>
+  <ry-main>
+    <ry-section>Content</ry-section>
+  </ry-main>
+  <ry-footer>Footer</ry-footer>
+</ry-page>
+
+<ry-grid cols="3">
+  <div>1</div><div>2</div><div>3</div>
+</ry-grid>
+
+<ry-stack>Vertical stack</ry-stack>
+<ry-cluster>Horizontal cluster</ry-cluster>
+<ry-card>Card container</ry-card>
+<ry-divider></ry-divider>
+```
+
+### Button
+```html
+<ry-button>Default</ry-button>
+<ry-button variant="primary">Primary</ry-button>
+<ry-button variant="secondary">Secondary</ry-button>
+<ry-button variant="danger">Danger</ry-button>
+<ry-button disabled>Disabled</ry-button>
+<ry-button modal="modal-id">Opens modal</ry-button>
+<ry-button drawer="drawer-id">Opens drawer</ry-button>
+```
+
+### Modal
+```html
+<ry-button modal="my-modal">Open</ry-button>
+<ry-modal id="my-modal" title="Title">
+  Content here
+  <div slot="footer"><ry-button>Close</ry-button></div>
+</ry-modal>
+```
+
+### Drawer
+```html
+<ry-button drawer="my-drawer">Open</ry-button>
+<ry-drawer id="my-drawer" side="left" title="Menu">
+  <!-- side: left | right | bottom -->
+  Drawer content
+</ry-drawer>
+```
+
+### Accordion
+```html
+<ry-accordion multiple>
+  <!-- multiple: allow many open at once -->
+  <ry-accordion-item title="Section 1" open>Content 1</ry-accordion-item>
+  <ry-accordion-item title="Section 2">Content 2</ry-accordion-item>
+</ry-accordion>
+```
+
+### Tabs
+```html
+<ry-tabs>
+  <ry-tab title="Tab 1" active>Content 1</ry-tab>
+  <ry-tab title="Tab 2">Content 2</ry-tab>
+</ry-tabs>
+```
+
+### Dropdown
+```html
+<ry-dropdown>
+  <ry-button slot="trigger">Menu</ry-button>
+  <ry-menu>
+    <ry-menu-item>Item 1</ry-menu-item>
+    <ry-menu-item>Item 2</ry-menu-item>
+  </ry-menu>
+</ry-dropdown>
+```
+
+### Select
+```html
+<ry-select placeholder="Choose..." name="field" value="preselected">
+  <ry-option value="a">Option A</ry-option>
+  <ry-option value="b" disabled>Option B</ry-option>
+</ry-select>
+```
+
+### Switch
+```html
+<ry-switch name="notifications" checked></ry-switch>
+<ry-switch disabled></ry-switch>
+```
+
+### Field (form wrapper)
+```html
+<ry-field label="Email">
+  <input type="email" name="email">
+</ry-field>
+```
+
+### Tooltip
+```html
+<ry-tooltip content="Help text" position="top">
+  <!-- position: top | bottom | left | right -->
+  <span>Hover me</span>
+</ry-tooltip>
+```
+
+### Alert
+```html
+<ry-alert type="info">Info message</ry-alert>
+<ry-alert type="success">Success!</ry-alert>
+<ry-alert type="warning">Warning!</ry-alert>
+<ry-alert type="danger" dismissible>Error (can dismiss)</ry-alert>
+```
+
+### Badge
+```html
+<ry-badge>Default</ry-badge>
+<ry-badge variant="success">Active</ry-badge>
+```
+
+### Toast (JS only)
+```javascript
+RyToast.success('Saved!');
+RyToast.error('Failed!');
+RyToast.info('FYI');
+RyToast.warning('Careful!');
+RyToast.show({ message: 'Custom', variant: 'info', duration: 5000 });
+```
+
+### Slider
+```html
+<ry-slider min="0" max="100" value="50" step="1"></ry-slider>
+<ry-slider range start="20" end="80"></ry-slider>
+<ry-slider labeled tooltip vertical></ry-slider>
+```
+
+### Knob
+```html
+<ry-knob min="0" max="100" value="50" label="Volume"></ry-knob>
+<ry-knob labels="Off,Low,Med,High" step="1"></ry-knob>
+```
+
+### Color Picker
+```html
+<ry-color-picker value="#ff0000" format="hex"></ry-color-picker>
+<ry-color-picker opacity inline swatches="#f00;#0f0;#00f"></ry-color-picker>
+
+<ry-color-input value="#ff0000" placeholder="Pick color"></ry-color-input>
+```
+
+### Toggle Button (radio group)
+```html
+<ry-toggle-button name="align" value="left" pressed>Left</ry-toggle-button>
+<ry-toggle-button name="align" value="center">Center</ry-toggle-button>
+<ry-toggle-button name="align" value="right">Right</ry-toggle-button>
+```
+
+### Icon
+```html
+<ry-icon name="check" size="24" label="Checkmark"></ry-icon>
+```
+
+### Code Block
+```html
+<ry-code language="js" title="Example" line-numbers>
+const x = 1;
+</ry-code>
+<!-- language: js | css | html | json | text -->
+```
+
+### Theme Toggle
+```html
+<ry-theme-toggle themes="light,dark,ocean"></ry-theme-toggle>
+```
+
+### Events (all components)
+```javascript
+// All events prefixed with ry:
+element.addEventListener('ry:change', (e) => console.log(e.detail));
+element.addEventListener('ry:open', () => {});
+element.addEventListener('ry:close', () => {});
+```
+
+### Programmatic Control
+```javascript
+// Most components have open/close/toggle methods
+document.querySelector('ry-modal').open();
+document.querySelector('ry-modal').close();
+document.querySelector('ry-drawer').toggle();
+
+// Get/set values
+document.querySelector('ry-select').value = 'new-value';
+document.querySelector('ry-slider').value;
+```

package/dist/components/ry-dropdown.d.ts.map

@@ -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"}
+{"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

@@ -14,7 +14,7 @@
  *     </accordion>
  *   </template>
  *   <!-- Optional: JS usage examples in collapsible section -->
- *   <script slot="js">
+ *   <script slot="js" type="text/plain">
  *     // Listen for changes
  *     element.addEventListener('ry:change', (e) => {
  *       console.log(e.detail.value);

package/dist/components/ry-gradient-picker.d.ts

@@ -0,0 +1,39 @@
+/**
+ * <ry-gradient-picker>
+ *
+ * Gradient editor with draggable color stops, type toggle, and inline color picker.
+ * Supports linear and radial gradients with unlimited stops.
+ *
+ * Usage:
+ * <ry-gradient-picker value="linear-gradient(90deg, #ff0000 0%, #0000ff 100%)"></ry-gradient-picker>
+ * <ry-gradient-picker value="radial-gradient(circle, #ff0000 0%, #00ff00 50%, #0000ff 100%)"></ry-gradient-picker>
+ */
+import { RyElement } from '../core/ry-element.js';
+export interface GradientStop {
+    id: string;
+    color: string;
+    position: number;
+}
+export type GradientType = 'solid' | 'linear' | 'radial';
+export type RadialShape = 'circle' | 'ellipse';
+export declare class RyGradientPicker extends RyElement {
+    #private;
+    static observedAttributes: readonly ["value", "disabled", "output"];
+    setup(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get value(): string;
+    set value(val: string);
+    get type(): GradientType;
+    set type(val: GradientType);
+    get angle(): number;
+    set angle(val: number);
+    get shape(): RadialShape;
+    set shape(val: RadialShape);
+    get stops(): GradientStop[];
+    get selectedStop(): GradientStop | null;
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    addStop(color: string, position: number): void;
+    removeStop(id: string): boolean;
+}
+//# sourceMappingURL=ry-gradient-picker.d.ts.map

package/dist/components/ry-gradient-picker.d.ts.map

@@ -0,0 +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

@@ -0,0 +1,30 @@
+/**
+ * <ry-number-select>
+ *
+ * Numeric input with buttons, drag, keyboard, wheel, and optional typing.
+ *
+ * Usage:
+ * <ry-number-select min="0" max="100" value="50" step="1"></ry-number-select>
+ * <ry-number-select min="0" max="10" step="0.5" arrows="end" editable></ry-number-select>
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyNumberSelect extends RyElement {
+    #private;
+    static observedAttributes: readonly ["min", "max", "step", "value", "disabled", "arrows", "icons", "drag", "editable", "wrap", "label", "prefix", "suffix"];
+    setup(): void;
+    get value(): number;
+    set value(val: number);
+    get min(): number;
+    set min(val: number);
+    get max(): number;
+    set max(val: number);
+    get step(): number;
+    set step(val: number);
+    get drag(): 'x' | 'y' | 'none';
+    set drag(val: 'x' | 'y' | 'none');
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    teardown(): void;
+}
+//# sourceMappingURL=ry-number-select.d.ts.map

package/dist/components/ry-number-select.d.ts.map

@@ -0,0 +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"}

package/dist/components/ry-tree.d.ts

@@ -0,0 +1,41 @@
+/**
+ * <ry-tree>
+ *
+ * Tree view with CSS-only expand/collapse using hidden checkboxes
+ * and grid-template-rows animation. Supports drag-and-drop rearranging
+ * and JSON serialization.
+ *
+ * Usage:
+ * <ry-tree>
+ *   <ry-tree-item label="src" open>
+ *     <ry-tree-item label="app" open>
+ *       <ry-tree-item label="layout.tsx"></ry-tree-item>
+ *     </ry-tree-item>
+ *   </ry-tree-item>
+ * </ry-tree>
+ *
+ * Drag and drop:
+ * <ry-tree draggable>...</ry-tree>
+ *
+ * JS uses data-ry-target for queries, CSS uses .ry-tree__* for styling.
+ */
+import { RyElement } from '../core/ry-element.js';
+export interface TreeNode {
+    label: string;
+    children?: TreeNode[];
+    open?: boolean;
+    selected?: boolean;
+}
+export declare class RyTree extends RyElement {
+    #private;
+    setup(): void;
+    /** Serialize the current tree state to JSON. */
+    toJSON(): TreeNode[];
+    /** Alias for toJSON(). */
+    get value(): TreeNode[];
+    /** Create a tree element from JSON data. */
+    static from(data: TreeNode[]): RyTree;
+}
+export declare class RyTreeItem extends RyElement {
+}
+//# sourceMappingURL=ry-tree.d.ts.map

package/dist/components/ry-tree.d.ts.map

@@ -0,0 +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"}

package/dist/core/ry-icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ry-icons.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAmFH;;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"}
+{"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"}

package/dist/core/ry-transform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ry-transform.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAwCH;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAgBxC"}
+{"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"}