npm - @ryanhelsing/ry-ui - Versions diffs - 1.0.10 → 1.0.12 - Mend

@ryanhelsing/ry-ui 1.0.10 → 1.0.12

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 (23) hide show

package/README.dev.md +302 -0
package/README.md +460 -199
package/dist/themes/antigravity.css +56 -0
package/package.json +3 -5
package/AGENT.md +0 -492
package/AGENTS.md +0 -57
package/examples/starter-local.html +0 -252
package/examples/starter-minimal.html +0 -252
package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/LICENSE.txt +0 -21
package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/README.md +0 -7
package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/dist/index.html +0 -23
package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/dist/style.css +0 -126
package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/src/index.html +0 -5
package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/src/style.scss +0 -161
package/examples/themes/skeuomorphic/led-controls/LICENSE.txt +0 -21
package/examples/themes/skeuomorphic/led-controls/README.md +0 -7
package/examples/themes/skeuomorphic/led-controls/dist/index.html +0 -17
package/examples/themes/skeuomorphic/led-controls/dist/script.js +0 -27
package/examples/themes/skeuomorphic/led-controls/dist/style.css +0 -135
package/examples/themes/skeuomorphic/led-controls/src/index.html +0 -1
package/examples/themes/skeuomorphic/led-controls/src/script.ts +0 -59
package/examples/themes/skeuomorphic/led-controls/src/style.scss +0 -253
package/llms.txt +0 -346

package/examples/starter-local.html DELETED Viewed

@@ -1,252 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-ry-theme="light">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ry-ui Starter (Local)</title>
-  <link rel="stylesheet" href="../dist/css/ry-ui.css">
-</head>
-<body style="background: var(--ry-color-bg); color: var(--ry-color-text);">
-  <ry-page>
-    <!-- Header with nav and theme toggle -->
-    <ry-header sticky>
-      <ry-cluster>
-        <ry-logo>ry-ui starter</ry-logo>
-        <ry-divider vertical></ry-divider>
-        <ry-nav>
-          <a href="#" aria-current="page">Dashboard</a>
-          <a href="#">Settings</a>
-          <a href="#">Help</a>
-        </ry-nav>
-      </ry-cluster>
-      <ry-actions>
-        <ry-theme-toggle themes="light,dark"></ry-theme-toggle>
-        <ry-button variant="ghost" size="sm" drawer="settings-drawer">Settings</ry-button>
-        <ry-button size="sm" modal="new-project">New Project</ry-button>
-      </ry-actions>
-    </ry-header>
-    <ry-main>
-      <!-- Alert banner -->
-      <ry-section>
-        <ry-alert type="info" dismissible>
-          This is a starter template built entirely with ry-ui components. No custom CSS needed.
-        </ry-alert>
-      </ry-section>
-      <!-- Stats row -->
-      <ry-section>
-        <h2>Overview</h2>
-        <ry-grid cols="4" cols-sm="2">
-          <ry-card>
-            <ry-stat>
-              <span slot="value">1,284</span>
-              <span slot="label">Total Users</span>
-            </ry-stat>
-          </ry-card>
-          <ry-card>
-            <ry-stat>
-              <span slot="value">$12.4k</span>
-              <span slot="label">Revenue</span>
-            </ry-stat>
-          </ry-card>
-          <ry-card>
-            <ry-stat>
-              <span slot="value">98.2%</span>
-              <span slot="label">Uptime</span>
-            </ry-stat>
-          </ry-card>
-          <ry-card>
-            <ry-stat>
-              <span slot="value">42</span>
-              <span slot="label">Active Projects</span>
-            </ry-stat>
-          </ry-card>
-        </ry-grid>
-      </ry-section>
-      <!-- Tabs section -->
-      <ry-section>
-        <h2>Project Details</h2>
-        <ry-tabs>
-          <ry-tab title="Overview" active>
-            <ry-stack gap="md">
-              <p>This tab shows project overview content. All tab switching is handled by ry-ui automatically.</p>
-              <ry-grid cols="2" cols-sm="1">
-                <ry-card interactive>
-                  <h3>Frontend</h3>
-                  <p>React + TypeScript app deployed to Vercel.</p>
-                  <ry-badge variant="success">Live</ry-badge>
-                </ry-card>
-                <ry-card interactive>
-                  <h3>Backend API</h3>
-                  <p>Node.js service running on AWS Lambda.</p>
-                  <ry-badge variant="success">Live</ry-badge>
-                </ry-card>
-              </ry-grid>
-            </ry-stack>
-          </ry-tab>
-          <ry-tab title="Settings">
-            <ry-stack gap="md">
-              <ry-field label="Project Name">
-                <input type="text" value="My Dashboard" placeholder="Enter project name">
-              </ry-field>
-              <ry-field label="Region">
-                <ry-select placeholder="Select region" name="region" value="us-east">
-                  <ry-option value="us-east">US East</ry-option>
-                  <ry-option value="us-west">US West</ry-option>
-                  <ry-option value="eu-west">EU West</ry-option>
-                  <ry-option value="ap-south">Asia Pacific</ry-option>
-                </ry-select>
-              </ry-field>
-              <ry-field label="Notifications">
-                <ry-switch name="notifications" checked></ry-switch>
-              </ry-field>
-              <ry-cluster>
-                <ry-button variant="primary">Save Changes</ry-button>
-                <ry-button variant="ghost">Cancel</ry-button>
-              </ry-cluster>
-            </ry-stack>
-          </ry-tab>
-          <ry-tab title="Activity">
-            <ry-accordion>
-              <ry-accordion-item title="Deploy #42 — Production" open>
-                <p>Deployed by alice@team.com at 2:34 PM. All checks passed.</p>
-                <ry-badge variant="success">Success</ry-badge>
-              </ry-accordion-item>
-              <ry-accordion-item title="Deploy #41 — Staging">
-                <p>Deployed by bob@team.com at 1:12 PM. Warning: slow migration.</p>
-                <ry-badge variant="warning">Warning</ry-badge>
-              </ry-accordion-item>
-              <ry-accordion-item title="Deploy #40 — Production">
-                <p>Rolled back by alice@team.com at 11:05 AM.</p>
-                <ry-badge variant="danger">Rolled Back</ry-badge>
-              </ry-accordion-item>
-            </ry-accordion>
-          </ry-tab>
-        </ry-tabs>
-      </ry-section>
-      <!-- Buttons showcase -->
-      <ry-section>
-        <h2>Actions</h2>
-        <ry-cluster gap="sm">
-          <ry-button variant="primary">Primary</ry-button>
-          <ry-button variant="secondary">Secondary</ry-button>
-          <ry-button variant="outline">Outline</ry-button>
-          <ry-button variant="ghost">Ghost</ry-button>
-          <ry-button variant="danger">Danger</ry-button>
-          <ry-button variant="accent">Accent</ry-button>
-        </ry-cluster>
-        <br>
-        <ry-button-group name="view" value="grid">
-          <ry-button value="grid">Grid</ry-button>
-          <ry-button value="list">List</ry-button>
-          <ry-button value="board">Board</ry-button>
-        </ry-button-group>
-      </ry-section>
-      <!-- Dropdown + Tooltip -->
-      <ry-section>
-        <h2>Menus & Tooltips</h2>
-        <ry-cluster gap="md">
-          <ry-dropdown>
-            <ry-button slot="trigger" variant="outline">Actions Menu</ry-button>
-            <ry-menu>
-              <ry-menu-item>Edit Project</ry-menu-item>
-              <ry-menu-item>Duplicate</ry-menu-item>
-              <ry-menu-item>Archive</ry-menu-item>
-            </ry-menu>
-          </ry-dropdown>
-          <ry-tooltip content="This button sends a toast notification" position="top">
-            <ry-button variant="outline" onclick="RyToast.success('Action completed!')">
-              Try Toast
-            </ry-button>
-          </ry-tooltip>
-          <ry-tooltip content="Dangerous action — cannot be undone" position="top">
-            <ry-button variant="danger" onclick="RyToast.error('Something went wrong!')">
-              Try Error Toast
-            </ry-button>
-          </ry-tooltip>
-        </ry-cluster>
-      </ry-section>
-      <!-- Slider -->
-      <ry-section>
-        <h2>Controls</h2>
-        <ry-grid cols="2" cols-sm="1">
-          <ry-card>
-            <ry-stack gap="sm">
-              <strong>Volume</strong>
-              <ry-slider min="0" max="100" value="65" step="1" labeled></ry-slider>
-            </ry-stack>
-          </ry-card>
-          <ry-card>
-            <ry-stack gap="sm">
-              <strong>Price Range</strong>
-              <ry-slider range start="20" end="80" min="0" max="100" labeled></ry-slider>
-            </ry-stack>
-          </ry-card>
-        </ry-grid>
-      </ry-section>
-    </ry-main>
-    <ry-footer>
-      <ry-cluster>
-        <span>Built with <a href="https://github.com/ryanhelsing/ry-ui">ry-ui</a> — zero custom CSS</span>
-      </ry-cluster>
-    </ry-footer>
-  </ry-page>
-  <!-- Modal (triggered by header button) -->
-  <ry-modal id="new-project" title="Create New Project">
-    <ry-stack gap="md">
-      <ry-field label="Project Name">
-        <input type="text" placeholder="my-awesome-project">
-      </ry-field>
-      <ry-field label="Template">
-        <ry-select placeholder="Choose template" name="template">
-          <ry-option value="blank">Blank</ry-option>
-          <ry-option value="dashboard">Dashboard</ry-option>
-          <ry-option value="landing">Landing Page</ry-option>
-          <ry-option value="docs">Documentation</ry-option>
-        </ry-select>
-      </ry-field>
-      <ry-field label="Private">
-        <ry-switch name="private"></ry-switch>
-      </ry-field>
-      <ry-cluster>
-        <ry-button variant="primary" onclick="RyToast.success('Project created!'); document.querySelector('#new-project').close();">Create</ry-button>
-        <ry-button variant="ghost" onclick="document.querySelector('#new-project').close();">Cancel</ry-button>
-      </ry-cluster>
-    </ry-stack>
-  </ry-modal>
-  <!-- Drawer (triggered by header button) -->
-  <ry-drawer id="settings-drawer" side="right" title="Quick Settings">
-    <ry-stack gap="md">
-      <ry-field label="Language">
-        <ry-select name="language" value="en">
-          <ry-option value="en">English</ry-option>
-          <ry-option value="es">Spanish</ry-option>
-          <ry-option value="fr">French</ry-option>
-        </ry-select>
-      </ry-field>
-      <ry-field label="Email Notifications">
-        <ry-switch name="email-notifs" checked></ry-switch>
-      </ry-field>
-      <ry-field label="Compact Mode">
-        <ry-switch name="compact"></ry-switch>
-      </ry-field>
-      <ry-alert type="info">Changes are saved automatically.</ry-alert>
-    </ry-stack>
-  </ry-drawer>
-  <script type="module" src="../dist/ry-ui.js"></script>
-</body>
-</html>

package/examples/starter-minimal.html DELETED Viewed

@@ -1,252 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-ry-theme="light">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ry-ui Starter</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ryanhelsing/ry-ui/dist/css/ry-ui.css">
-</head>
-<body style="background: var(--ry-color-bg); color: var(--ry-color-text);">
-  <ry-page>
-    <!-- Header with nav and theme toggle -->
-    <ry-header sticky>
-      <ry-cluster>
-        <ry-logo>ry-ui starter</ry-logo>
-        <ry-divider vertical></ry-divider>
-        <ry-nav>
-          <a href="#" aria-current="page">Dashboard</a>
-          <a href="#">Settings</a>
-          <a href="#">Help</a>
-        </ry-nav>
-      </ry-cluster>
-      <ry-actions>
-        <ry-theme-toggle themes="light,dark"></ry-theme-toggle>
-        <ry-button variant="ghost" size="sm" drawer="settings-drawer">Settings</ry-button>
-        <ry-button size="sm" modal="new-project">New Project</ry-button>
-      </ry-actions>
-    </ry-header>
-    <ry-main>
-      <!-- Alert banner -->
-      <ry-section>
-        <ry-alert type="info" dismissible>
-          This is a starter template built entirely with ry-ui components. No custom CSS needed.
-        </ry-alert>
-      </ry-section>
-      <!-- Stats row -->
-      <ry-section>
-        <h2>Overview</h2>
-        <ry-grid cols="4" cols-sm="2">
-          <ry-card>
-            <ry-stat>
-              <span slot="value">1,284</span>
-              <span slot="label">Total Users</span>
-            </ry-stat>
-          </ry-card>
-          <ry-card>
-            <ry-stat>
-              <span slot="value">$12.4k</span>
-              <span slot="label">Revenue</span>
-            </ry-stat>
-          </ry-card>
-          <ry-card>
-            <ry-stat>
-              <span slot="value">98.2%</span>
-              <span slot="label">Uptime</span>
-            </ry-stat>
-          </ry-card>
-          <ry-card>
-            <ry-stat>
-              <span slot="value">42</span>
-              <span slot="label">Active Projects</span>
-            </ry-stat>
-          </ry-card>
-        </ry-grid>
-      </ry-section>
-      <!-- Tabs section -->
-      <ry-section>
-        <h2>Project Details</h2>
-        <ry-tabs>
-          <ry-tab title="Overview" active>
-            <ry-stack gap="md">
-              <p>This tab shows project overview content. All tab switching is handled by ry-ui automatically.</p>
-              <ry-grid cols="2" cols-sm="1">
-                <ry-card interactive>
-                  <h3>Frontend</h3>
-                  <p>React + TypeScript app deployed to Vercel.</p>
-                  <ry-badge variant="success">Live</ry-badge>
-                </ry-card>
-                <ry-card interactive>
-                  <h3>Backend API</h3>
-                  <p>Node.js service running on AWS Lambda.</p>
-                  <ry-badge variant="success">Live</ry-badge>
-                </ry-card>
-              </ry-grid>
-            </ry-stack>
-          </ry-tab>
-          <ry-tab title="Settings">
-            <ry-stack gap="md">
-              <ry-field label="Project Name">
-                <input type="text" value="My Dashboard" placeholder="Enter project name">
-              </ry-field>
-              <ry-field label="Region">
-                <ry-select placeholder="Select region" name="region" value="us-east">
-                  <ry-option value="us-east">US East</ry-option>
-                  <ry-option value="us-west">US West</ry-option>
-                  <ry-option value="eu-west">EU West</ry-option>
-                  <ry-option value="ap-south">Asia Pacific</ry-option>
-                </ry-select>
-              </ry-field>
-              <ry-field label="Notifications">
-                <ry-switch name="notifications" checked></ry-switch>
-              </ry-field>
-              <ry-cluster>
-                <ry-button variant="primary">Save Changes</ry-button>
-                <ry-button variant="ghost">Cancel</ry-button>
-              </ry-cluster>
-            </ry-stack>
-          </ry-tab>
-          <ry-tab title="Activity">
-            <ry-accordion>
-              <ry-accordion-item title="Deploy #42 — Production" open>
-                <p>Deployed by alice@team.com at 2:34 PM. All checks passed.</p>
-                <ry-badge variant="success">Success</ry-badge>
-              </ry-accordion-item>
-              <ry-accordion-item title="Deploy #41 — Staging">
-                <p>Deployed by bob@team.com at 1:12 PM. Warning: slow migration.</p>
-                <ry-badge variant="warning">Warning</ry-badge>
-              </ry-accordion-item>
-              <ry-accordion-item title="Deploy #40 — Production">
-                <p>Rolled back by alice@team.com at 11:05 AM.</p>
-                <ry-badge variant="danger">Rolled Back</ry-badge>
-              </ry-accordion-item>
-            </ry-accordion>
-          </ry-tab>
-        </ry-tabs>
-      </ry-section>
-      <!-- Buttons showcase -->
-      <ry-section>
-        <h2>Actions</h2>
-        <ry-cluster gap="sm">
-          <ry-button variant="primary">Primary</ry-button>
-          <ry-button variant="secondary">Secondary</ry-button>
-          <ry-button variant="outline">Outline</ry-button>
-          <ry-button variant="ghost">Ghost</ry-button>
-          <ry-button variant="danger">Danger</ry-button>
-          <ry-button variant="accent">Accent</ry-button>
-        </ry-cluster>
-        <br>
-        <ry-button-group name="view" value="grid">
-          <ry-button value="grid">Grid</ry-button>
-          <ry-button value="list">List</ry-button>
-          <ry-button value="board">Board</ry-button>
-        </ry-button-group>
-      </ry-section>
-      <!-- Dropdown + Tooltip -->
-      <ry-section>
-        <h2>Menus & Tooltips</h2>
-        <ry-cluster gap="md">
-          <ry-dropdown>
-            <ry-button slot="trigger" variant="outline">Actions Menu</ry-button>
-            <ry-menu>
-              <ry-menu-item>Edit Project</ry-menu-item>
-              <ry-menu-item>Duplicate</ry-menu-item>
-              <ry-menu-item>Archive</ry-menu-item>
-            </ry-menu>
-          </ry-dropdown>
-          <ry-tooltip content="This button sends a toast notification" position="top">
-            <ry-button variant="outline" onclick="RyToast.success('Action completed!')">
-              Try Toast
-            </ry-button>
-          </ry-tooltip>
-          <ry-tooltip content="Dangerous action — cannot be undone" position="top">
-            <ry-button variant="danger" onclick="RyToast.error('Something went wrong!')">
-              Try Error Toast
-            </ry-button>
-          </ry-tooltip>
-        </ry-cluster>
-      </ry-section>
-      <!-- Slider -->
-      <ry-section>
-        <h2>Controls</h2>
-        <ry-grid cols="2" cols-sm="1">
-          <ry-card>
-            <ry-stack gap="sm">
-              <strong>Volume</strong>
-              <ry-slider min="0" max="100" value="65" step="1" labeled></ry-slider>
-            </ry-stack>
-          </ry-card>
-          <ry-card>
-            <ry-stack gap="sm">
-              <strong>Price Range</strong>
-              <ry-slider range start="20" end="80" min="0" max="100" labeled></ry-slider>
-            </ry-stack>
-          </ry-card>
-        </ry-grid>
-      </ry-section>
-    </ry-main>
-    <ry-footer>
-      <ry-cluster>
-        <span>Built with <a href="https://github.com/ryanhelsing/ry-ui">ry-ui</a> — zero custom CSS</span>
-      </ry-cluster>
-    </ry-footer>
-  </ry-page>
-  <!-- Modal (triggered by header button) -->
-  <ry-modal id="new-project" title="Create New Project">
-    <ry-stack gap="md">
-      <ry-field label="Project Name">
-        <input type="text" placeholder="my-awesome-project">
-      </ry-field>
-      <ry-field label="Template">
-        <ry-select placeholder="Choose template" name="template">
-          <ry-option value="blank">Blank</ry-option>
-          <ry-option value="dashboard">Dashboard</ry-option>
-          <ry-option value="landing">Landing Page</ry-option>
-          <ry-option value="docs">Documentation</ry-option>
-        </ry-select>
-      </ry-field>
-      <ry-field label="Private">
-        <ry-switch name="private"></ry-switch>
-      </ry-field>
-      <ry-cluster>
-        <ry-button variant="primary" onclick="RyToast.success('Project created!'); document.querySelector('#new-project').close();">Create</ry-button>
-        <ry-button variant="ghost" onclick="document.querySelector('#new-project').close();">Cancel</ry-button>
-      </ry-cluster>
-    </ry-stack>
-  </ry-modal>
-  <!-- Drawer (triggered by header button) -->
-  <ry-drawer id="settings-drawer" side="right" title="Quick Settings">
-    <ry-stack gap="md">
-      <ry-field label="Language">
-        <ry-select name="language" value="en">
-          <ry-option value="en">English</ry-option>
-          <ry-option value="es">Spanish</ry-option>
-          <ry-option value="fr">French</ry-option>
-        </ry-select>
-      </ry-field>
-      <ry-field label="Email Notifications">
-        <ry-switch name="email-notifs" checked></ry-switch>
-      </ry-field>
-      <ry-field label="Compact Mode">
-        <ry-switch name="compact"></ry-switch>
-      </ry-field>
-      <ry-alert type="info">Changes are saved automatically.</ry-alert>
-    </ry-stack>
-  </ry-drawer>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ryanhelsing/ry-ui/dist/ry-ui.js"></script>
-</body>
-</html>

package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/LICENSE.txt DELETED Viewed

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-Copyright (c) 2026 Luke Watts (https://codepen.io/lukewatts/pen/nVQNEK)
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/README.md DELETED Viewed

@@ -1,7 +0,0 @@
-# CSS Dark Neon LED Volume Dial
-A Pen created on CodePen.
-Original URL: [https://codepen.io/lukewatts/pen/nVQNEK](https://codepen.io/lukewatts/pen/nVQNEK).
-Yet another 100% CSS control dial...thingy. The LED was NOT easy to do. especially the glow on the inside. Even now it's not right but it'll have to do. If the glow was all around it would be fine but the "slice of pie" shape means there's that sharp edge to deal with. If I think of a better way I'll come back. As it is 4 elements for this effect ain't so bad. I'd challenged myself to do it in three but z-index on ::before and ::afters won't behave. Oh well.

package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/dist/index.html DELETED Viewed

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>CSS Dark Neon LED Volume Dial</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
-<link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
-<link rel="stylesheet" href="./style.css">
-  </head>
-  <body>
-  <div class="ring">
-  <div class="led"></div>
-  <div class="inner-glow"></div>
-  <div class="face"></div>
-</div>
-    <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
-  </body>
-</html>