@nexus_js/ui 0.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nexus Contributors
+
+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/README.md

@@ -0,0 +1,17 @@
+# @nexus_js/ui
+
+Nexus Zero-Bundle UI — CSS-only interactive components with 0.0KB of JavaScript.
+
+## Documentation
+
+All guides, API reference, and examples live on **[nexusjs.dev](https://nexusjs.dev)**.
+
+## Links
+
+- **Website:** [https://nexusjs.dev](https://nexusjs.dev)
+- **Repository:** [github.com/bierfor/nexus](https://github.com/bierfor/nexus) (see `packages/ui/`)
+- **Issues:** [github.com/bierfor/nexus/issues](https://github.com/bierfor/nexus/issues)
+
+## License
+
+MIT © Nexus contributors

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@nexus_js/ui",
+  "version": "0.6.0",
+  "description": "Nexus Zero-Bundle UI — CSS-only interactive components with 0.0KB of JavaScript",
+  "type": "module",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles": "./src/styles.css"
+  },
+  "keywords": [
+    "nexus",
+    "ui",
+    "zero-bundle",
+    "css",
+    "components",
+    "no-js",
+    "framework",
+    "full-stack",
+    "svelte",
+    "islands",
+    "ssr",
+    "vite",
+    "server-actions"
+  ],
+  "license": "MIT",
+  "homepage": "https://nexusjs.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bierfor/nexus.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/bierfor/nexus/issues"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/components/accordion.ts

@@ -0,0 +1,22 @@
+/** @zero-bundle */
+export interface AccordionProps {
+  title:    string;
+  children: string;   // raw HTML content
+  open?:    boolean;
+  id?:      string;
+}
+
+export function renderAccordion(props: AccordionProps): string {
+  const { title, children, open = false, id } = props;
+  const detailsAttrs = [
+    open ? 'open' : '',
+    id ? `id="${id}"` : '',
+  ].filter(Boolean).join(' ');
+
+  return `<div class="nx-accordion">
+  <details ${detailsAttrs}>
+    <summary>${title}</summary>
+    <div class="nx-accordion__body">${children}</div>
+  </details>
+</div>`;
+}

package/src/components/modal.ts

@@ -0,0 +1,26 @@
+/**
+ * @zero-bundle — CSS :target modal. Zero JS.
+ * 
+ * Usage:
+ *   Trigger: <a href="#my-modal">Open</a>
+ *   Close:   <a href="#">Close</a>
+ */
+export interface ModalProps {
+  id:       string;
+  title:    string;
+  children: string;   // raw HTML body
+  trigger?: string;   // optional trigger button HTML to prepend
+}
+
+export function renderModal(props: ModalProps): string {
+  const { id, title, children, trigger } = props;
+  const triggerHtml = trigger ? `${trigger}\n` : '';
+
+  return `${triggerHtml}<div id="${id}" class="nx-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="${id}-title">
+  <div class="nx-modal">
+    <a href="#" class="nx-modal__close" aria-label="Close">×</a>
+    <h2 class="nx-modal__title" id="${id}-title">${title}</h2>
+    ${children}
+  </div>
+</div>`;
+}

package/src/components/progress-ring.ts

@@ -0,0 +1,29 @@
+/** @zero-bundle — Pure SVG progress ring. Zero JS. CSS animated. */
+export interface ProgressRingProps {
+  value:    number;    // 0–100
+  size?:    number;    // px, default 64
+  stroke?:  number;    // stroke width, default 6
+  color?:   string;    // CSS color, default #6366f1
+  label?:   string;    // center text override (default: value%)
+}
+
+export function renderProgressRing(props: ProgressRingProps): string {
+  const { value, size = 64, stroke = 6, color = '#6366f1', label } = props;
+  const clamp = Math.max(0, Math.min(100, value));
+  const r      = (size - stroke * 2) / 2;
+  const circ   = 2 * Math.PI * r;
+  const offset = circ - (clamp / 100) * circ;
+  const center = size / 2;
+
+  return `<div class="nx-ring" style="width:${size}px;height:${size}px" role="progressbar" aria-valuenow="${clamp}" aria-valuemin="0" aria-valuemax="100">
+  <svg class="nx-ring__svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+    <circle class="nx-ring__track" cx="${center}" cy="${center}" r="${r}" stroke-width="${stroke}" />
+    <circle class="nx-ring__fill"  cx="${center}" cy="${center}" r="${r}" stroke-width="${stroke}"
+      stroke="${color}"
+      stroke-dasharray="${circ}"
+      stroke-dashoffset="${offset}"
+    />
+  </svg>
+  <span class="nx-ring__label">${label ?? `${clamp}%`}</span>
+</div>`;
+}

package/src/components/tabs.ts

@@ -0,0 +1,30 @@
+/** @zero-bundle — Uses CSS :target for tab switching. Zero JS. */
+export interface TabItem {
+  id:       string;
+  label:    string;
+  content:  string;  // raw HTML
+  default?: boolean;
+}
+
+export interface TabsProps {
+  tabs:   TabItem[];
+  prefix: string;    // unique prefix to avoid ID collisions on the page
+}
+
+export function renderTabs(props: TabsProps): string {
+  const { tabs, prefix } = props;
+  const nav = tabs
+    .map((t) => `<a href="#${prefix}-${t.id}" class="nx-tabs__tab">${t.label}</a>`)
+    .join('\n    ');
+
+  const panels = tabs
+    .map((t) => `<div id="${prefix}-${t.id}" class="nx-tabs__panel${t.default ? ' nx-tabs__panel--default' : ''}">${t.content}</div>`)
+    .join('\n  ');
+
+  return `<div class="nx-tabs">
+  <nav class="nx-tabs__nav">
+    ${nav}
+  </nav>
+  ${panels}
+</div>`;
+}

package/src/components/tooltip.ts

@@ -0,0 +1,14 @@
+/** @zero-bundle — Pure CSS :hover tooltip. Zero JS. */
+export interface TooltipProps {
+  text:     string;    // tooltip label
+  children: string;    // trigger element (raw HTML)
+  position?: 'top' | 'bottom';
+}
+
+export function renderTooltip(props: TooltipProps): string {
+  const { text, children } = props;
+  return `<span class="nx-tooltip" role="tooltip" aria-label="${text}">
+  ${children}
+  <span class="nx-tooltip__content" aria-hidden="true">${text}</span>
+</span>`;
+}

package/src/index.ts

@@ -0,0 +1,132 @@
+/**
+ * @nexus_js/ui — Zero-Bundle Component Library
+ *
+ * Every component in this library generates pure HTML+CSS output.
+ * No JavaScript is shipped to the browser. The Nexus compiler detects
+ * the @zero-bundle annotation and replaces the component with its
+ * static HTML+CSS equivalent at build time.
+ *
+ * Components:
+ *  - Accordion  → <details>/<summary> with animation
+ *  - Tabs       → CSS :target pseudo-class trick
+ *  - Toggle     → <details> + CSS ::marker trick
+ *  - Tooltip    → CSS :hover + aria-label
+ *  - Disclosure → <details> semantic variant
+ *  - Modal      → <dialog> native + :target fallback
+ *  - ProgressRing → SVG-only animated ring
+ *
+ * Usage in .nx files:
+ *
+ * ```nx
+ * ---
+ * import { Accordion } from '@nexus_js/ui';
+ * ---
+ *
+ * <Accordion title="How does Nexus work?">
+ *   It uses islands architecture...
+ * </Accordion>
+ * ```
+ *
+ * The compiler replaces this with the CSS-only HTML at build time.
+ * Zero JS. Zero hydration. Works even with JavaScript disabled.
+ */
+
+export { renderAccordion, type AccordionProps }   from './components/accordion.js';
+export { renderTabs, type TabsProps }              from './components/tabs.js';
+export { renderTooltip, type TooltipProps }        from './components/tooltip.js';
+export { renderModal, type ModalProps }            from './components/modal.js';
+export { renderProgressRing, type ProgressRingProps } from './components/progress-ring.js';
+
+/** @zero-bundle annotation marker — used by the Nexus compiler. */
+export const ZERO_BUNDLE_MARKER = '__nexus_zero_bundle__';
+
+/**
+ * Injects the Zero-Bundle stylesheet into a page's <head>.
+ * Called automatically by the renderer when @nexus_js/ui components are detected.
+ */
+export function getZeroBundleCSS(): string {
+  return `
+/* @nexus_js/ui — Zero-Bundle Component Styles */
+@layer nexus.ui {
+
+/* ── Accordion ── */
+.nx-accordion { border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
+.nx-accordion + .nx-accordion { margin-top: -1px; border-radius: 0; }
+.nx-accordion:first-child { border-radius: 8px 8px 0 0; }
+.nx-accordion:last-child  { border-radius: 0 0 8px 8px; }
+.nx-accordion details { width: 100%; }
+.nx-accordion summary  {
+  list-style: none; display: flex; align-items: center; justify-content: space-between;
+  padding: .875rem 1rem; font-weight: 500; cursor: pointer; user-select: none;
+  background: #fafafa; transition: background .15s;
+}
+.nx-accordion summary:hover { background: #f1f5f9; }
+.nx-accordion summary::after {
+  content: '+'; font-size: 1.25rem; font-weight: 300; color: #94a3b8;
+  transition: transform .2s; will-change: transform;
+}
+.nx-accordion details[open] summary::after { transform: rotate(45deg); }
+.nx-accordion details[open] summary { background: #f8fafc; }
+.nx-accordion__body {
+  padding: 1rem; border-top: 1px solid #e2e8f0;
+  animation: nx-slide-down .2s ease;
+}
+@keyframes nx-slide-down {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Tabs ── */
+.nx-tabs { }
+.nx-tabs__nav  { display: flex; border-bottom: 2px solid #e2e8f0; gap: .5rem; }
+.nx-tabs__tab  {
+  padding: .625rem 1rem; text-decoration: none; color: #64748b; border-radius: 6px 6px 0 0;
+  border: 2px solid transparent; border-bottom: none; font-weight: 500; font-size: .9rem;
+  transition: color .15s, background .15s;
+}
+.nx-tabs__tab:hover { color: #1e293b; background: #f8fafc; }
+.nx-tabs__panel { display: none; padding: 1.25rem 0; animation: nx-fade-in .2s; }
+.nx-tabs__panel:target { display: block; }
+.nx-tabs__panel--default { display: block; }
+.nx-tabs__panel:target ~ .nx-tabs__panel--default { display: none; }
+.nx-tabs__tab--active,
+.nx-tabs__nav a[href]:target-within { color: #6366f1; border-color: #6366f1; background: white; }
+@keyframes nx-fade-in { from { opacity: 0; } to { opacity: 1; } }
+
+/* ── Tooltip ── */
+.nx-tooltip { position: relative; display: inline-block; }
+.nx-tooltip__content {
+  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
+  background: #1e293b; color: #f8fafc; padding: .4rem .75rem; border-radius: 6px;
+  font-size: .8rem; white-space: nowrap; pointer-events: none;
+  opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s;
+}
+.nx-tooltip__content::after {
+  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
+  border: 5px solid transparent; border-top-color: #1e293b;
+}
+.nx-tooltip:hover .nx-tooltip__content,
+.nx-tooltip:focus-within .nx-tooltip__content { opacity: 1; visibility: visible; }
+
+/* ── Modal ── */
+.nx-modal-overlay { display: none; }
+.nx-modal-overlay:target { display: flex; position: fixed; inset: 0; background: rgba(0,0,0,.5); align-items: center; justify-content: center; z-index: 1000; animation: nx-fade-in .2s; }
+.nx-modal {
+  background: white; border-radius: 12px; padding: 1.5rem 2rem; min-width: 320px;
+  max-width: min(90vw, 560px); box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
+  animation: nx-modal-up .25s ease;
+}
+.nx-modal__close { float: right; text-decoration: none; font-size: 1.25rem; color: #94a3b8; line-height: 1; margin: -.25rem -.5rem 0 0; }
+.nx-modal__close:hover { color: #1e293b; }
+.nx-modal__title { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; }
+@keyframes nx-modal-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+
+/* ── Progress Ring ── */
+.nx-ring { display: inline-flex; align-items: center; justify-content: center; position: relative; }
+.nx-ring__svg { transform: rotate(-90deg); }
+.nx-ring__track { fill: none; stroke: #e2e8f0; }
+.nx-ring__fill  { fill: none; stroke: #6366f1; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
+.nx-ring__label { position: absolute; font-weight: 700; font-size: .8rem; color: #1e293b; }
+
+}`;
+}