@ryanhelsing/ry-ui 1.0.8 → 1.0.10

package/dist/pages/landing.html

@@ -0,0 +1,229 @@
+<ry>
+
+<page>
+
+  <!-- ═══ HEADER ═══ -->
+  <header sticky>
+    <cluster>
+      <strong>ry-ui</strong>
+    </cluster>
+    <cluster>
+      <a href="/demos">Demos</a>
+      <a href="#features">Features</a>
+      <a href="#pricing">Pricing</a>
+      <a href="#faq">FAQ</a>
+      <ry-button variant="outline" size="sm">Sign In</ry-button>
+      <ry-button size="sm">Get Started</ry-button>
+    </cluster>
+  </header>
+
+  <main>
+
+    <!-- ═══ HERO ═══ -->
+    <hero align="center" size="lg">
+      <ry-badge>Open Source</ry-badge>
+      <h1>Build apps faster with<br>universal components</h1>
+      <p>Framework-agnostic, Light DOM web components. Write once in HTML/CSS/JS. Deploy everywhere. No decisions to make. No architecture to debate.</p>
+      <cluster>
+        <ry-button size="lg">Get Started Free</ry-button>
+        <ry-button variant="outline" size="lg">View on GitHub</ry-button>
+      </cluster>
+    </hero>
+
+    <!-- ═══ STATS ═══ -->
+    <section>
+      <grid cols="4">
+        <stat>
+          <span slot="value">32</span>
+          <span slot="label">Components</span>
+        </stat>
+        <stat>
+          <span slot="value">7KB</span>
+          <span slot="label">Gzipped</span>
+        </stat>
+        <stat>
+          <span slot="value">0</span>
+          <span slot="label">Dependencies</span>
+        </stat>
+        <stat>
+          <span slot="value">3</span>
+          <span slot="label">Themes</span>
+        </stat>
+      </grid>
+    </section>
+
+    <!-- ═══ LOGO BAR ═══ -->
+    <section class="ry-logo-bar">
+      <p>Trusted by teams at</p>
+      <cluster>
+        <span>Acme</span>
+        <span>Globex</span>
+        <span>Initech</span>
+        <span>Umbrella</span>
+        <span>Stark</span>
+      </cluster>
+    </section>
+
+    <!-- ═══ FEATURES ═══ -->
+    <section id="features">
+      <hero align="center" size="sm">
+        <h2>Everything you need, nothing you don't</h2>
+        <p>Every app is a composition of the same finite primitives. We built them all — so you never have to again.</p>
+      </hero>
+
+      <feature-grid cols="3">
+        <feature icon="star" align="center">
+          <h3>Zero Dependencies</h3>
+          <p>Pure web standards. No framework lock-in, no build step required, no node_modules bloat.</p>
+        </feature>
+        <feature icon="moon" align="center">
+          <h3>Dark Mode Built In</h3>
+          <p>Every component supports light and dark mode out of the box via CSS custom properties.</p>
+        </feature>
+        <feature icon="settings" align="center">
+          <h3>Fully Themeable</h3>
+          <p>Swap the entire visual layer without touching structure or behavior. Three independent layers.</p>
+        </feature>
+        <feature icon="check" align="center">
+          <h3>Accessible</h3>
+          <p>Keyboard navigation, ARIA attributes, and focus management handled for every component.</p>
+        </feature>
+        <feature icon="download" align="center">
+          <h3>Light DOM</h3>
+          <p>No Shadow DOM. Your CSS works. Your selectors work. Inspect and style anything.</p>
+        </feature>
+        <feature icon="heart" align="center">
+          <h3>Developer Friendly</h3>
+          <p>Clean API, strict TypeScript, comprehensive docs. Read the source in minutes.</p>
+        </feature>
+      </feature-grid>
+    </section>
+
+    <!-- ═══ TESTIMONIALS ═══ -->
+    <section>
+      <hero align="center" size="sm">
+        <h2>Loved by developers</h2>
+        <p>Teams ship faster when they stop reinventing the same UI primitives.</p>
+      </hero>
+
+      <grid cols="3">
+        <testimonial stars="5">
+          <img slot="avatar" src="https://i.pravatar.cc/128?img=1" alt="Sarah Chen">
+          <blockquote>We rebuilt our entire admin dashboard in a weekend. The component library just works — no fighting with frameworks.</blockquote>
+          <span slot="name">Sarah Chen</span>
+          <span slot="role">CTO, Acme Corp</span>
+        </testimonial>
+        <testimonial stars="5">
+          <img slot="avatar" src="https://i.pravatar.cc/128?img=3" alt="Marcus Johnson">
+          <blockquote>Finally, components that don't force you into a specific framework. We use these across React, Vue, and vanilla JS projects.</blockquote>
+          <span slot="name">Marcus Johnson</span>
+          <span slot="role">Lead Engineer, StartupCo</span>
+        </testimonial>
+        <testimonial stars="5">
+          <img slot="avatar" src="https://i.pravatar.cc/128?img=5" alt="Emily Park">
+          <blockquote>The FORM/THEME separation is brilliant. Our design team can iterate on visuals without touching any JavaScript.</blockquote>
+          <span slot="name">Emily Park</span>
+          <span slot="role">Design Lead, BigCo</span>
+        </testimonial>
+      </grid>
+    </section>
+
+    <!-- ═══ PRICING ═══ -->
+    <section id="pricing">
+      <hero align="center" size="sm">
+        <h2>Simple, transparent pricing</h2>
+        <p>Start free. Scale when you're ready.</p>
+      </hero>
+
+      <pricing>
+        <pricing-card>
+          <h3>Starter</h3>
+          <div slot="price">$0<span>/mo</span></div>
+          <ul class="ry-check-list">
+            <li>All components</li>
+            <li>3 themes included</li>
+            <li>Community support</li>
+            <li>MIT licensed</li>
+          </ul>
+          <ry-button variant="outline">Get Started</ry-button>
+        </pricing-card>
+        <pricing-card featured>
+          <h3>Pro</h3>
+          <div slot="price">$29<span>/mo</span></div>
+          <ul class="ry-check-list">
+            <li>Everything in Starter</li>
+            <li>Premium themes</li>
+            <li>Priority support</li>
+            <li>Custom theme builder</li>
+            <li>Figma kit</li>
+          </ul>
+          <ry-button>Choose Pro</ry-button>
+        </pricing-card>
+        <pricing-card>
+          <h3>Enterprise</h3>
+          <div slot="price">Custom</div>
+          <ul class="ry-check-list">
+            <li>Everything in Pro</li>
+            <li>Dedicated support</li>
+            <li>Custom components</li>
+            <li>SLA guarantee</li>
+            <li>On-premise option</li>
+          </ul>
+          <ry-button variant="outline">Contact Sales</ry-button>
+        </pricing-card>
+      </pricing>
+    </section>
+
+    <!-- ═══ FAQ ═══ -->
+    <section id="faq" narrow>
+      <hero align="center" size="sm">
+        <h2>Frequently asked questions</h2>
+      </hero>
+
+      <accordion>
+        <accordion-item title="Do I need a framework to use ry-ui?">
+          No. ry-ui components are vanilla web components that work in any HTML page. They also work seamlessly inside React, Vue, Svelte, Angular, or any other framework.
+        </accordion-item>
+        <accordion-item title="How does theming work?">
+          Every component has three independent layers: Function (JS behavior), Form (CSS layout), and Theme (CSS visuals). You can swap the entire theme without touching layout or behavior. Themes are just CSS files that override design tokens.
+        </accordion-item>
+        <accordion-item title="Is ry-ui accessible?">
+          Yes. All interactive components include proper ARIA attributes, keyboard navigation, and focus management. We follow WAI-ARIA patterns for every component.
+        </accordion-item>
+        <accordion-item title="Can I use my own CSS framework alongside ry-ui?">
+          Absolutely. ry-ui uses Light DOM (no Shadow DOM), so your existing CSS selectors and frameworks work as expected. You can load only the structure CSS and bring your own visual theme.
+        </accordion-item>
+        <accordion-item title="What's the bundle size?">
+          The full JS bundle is ~32KB (7KB gzipped) with zero dependencies. CSS is similarly lightweight. You're shipping less code than most icon libraries.
+        </accordion-item>
+      </accordion>
+    </section>
+
+    <!-- ═══ BOTTOM CTA ═══ -->
+    <hero align="center" size="lg">
+      <h2>Ready to build?</h2>
+      <p>Stop reinventing UI primitives. Start shipping.</p>
+      <cluster>
+        <ry-button size="lg">Get Started Free</ry-button>
+        <ry-button variant="outline" size="lg">Read the Docs</ry-button>
+      </cluster>
+    </hero>
+
+  </main>
+
+  <!-- ═══ FOOTER ═══ -->
+  <footer>
+    <cluster>
+      <span>&copy; 2026 ry-ui. MIT License.</span>
+    </cluster>
+    <cluster>
+      <a href="#">GitHub</a>
+      <a href="#">Docs</a>
+      <a href="#">NPM</a>
+    </cluster>
+  </footer>
+
+</page>
+
+<ry-theme-panel></ry-theme-panel>
+

package/dist/ry-ui.d.ts

@@ -60,6 +60,8 @@ export { RyStat } from './components/ry-stat.js';
 export { RyFeature, RyFeatureGrid } from './components/ry-feature.js';
 export { RyPricing, RyPricingCard } from './components/ry-pricing.js';
 export { RyCarousel } from './components/ry-carousel.js';
+export { RyThemePanel } from './components/ry-theme-panel.js';
+export { RyTestimonial } from './components/ry-testimonial.js';
 export { getIcon, registerIcon, registerIcons, getIconNames } from './core/ry-icons.js';
 import { RyToast as _RyToast } from './components/ry-toast.js';
 declare global {

package/dist/ry-ui.d.ts.map

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