{"_id":"@arc-lang/arc-ui","_rev":"2-c7efccbaf12801e91bb28ffaa0eaff69","name":"@arc-lang/arc-ui","dist-tags":{"latest":"2.4.1"},"versions":{"2.2.0":{"name":"@arc-lang/arc-ui","version":"2.2.0","keywords":["modal","toast","tabs","accordion","tooltip","button","card","input","dropdown","drawer","badge","avatar","skeleton","progress","spinner","alert","switch","breadcrumb","table","pagination","chip","navbar","code","stepper","stat","popover","combobox","command","footer","checkbox","radio","range","liquid-glass","css","arc","ui"],"license":"MIT","_id":"@arc-lang/arc-ui@2.2.0","maintainers":[{"name":"kobecuppens","email":"kobecuppens@hotmail.com"}],"homepage":"https://arc-language.dev","bugs":{"url":"https://github.com/arc-language/arc-ui/issues"},"dist":{"shasum":"25544b7ce017656c44e014a76a2fd5f620f8fdf3","tarball":"https://registry.npmjs.org/@arc-lang/arc-ui/-/arc-ui-2.2.0.tgz","fileCount":44,"integrity":"sha512-mtw7l6WegtFwKosKDbKRZNOEnCG/trDtapx4fGn070ICbmEn/s1DSOxqbxzZQiatnYH5g0nCbz8I+n/hSWBR3g==","signatures":[{"sig":"MEUCICqPFATKuzCbCQNK4Bp3h7t6Wo8Bh/93VElxBa50nlkjAiEAr5gkyOyUrNgrVPeFgX/FmL8fVyJSAwkEjLOGTuOiZKk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":146221},"main":"index.css","gitHead":"e07a8abe1e25c3e9167fbb7f0681faf0b84a6145","scripts":{"size":"du -sh src/*.css js/*.js index.css"},"_npmUser":{"name":"kobecuppens","email":"kobecuppens@hotmail.com"},"repository":{"url":"git+https://github.com/arc-language/arc-ui.git","type":"git"},"_npmVersion":"11.12.1","description":"Liquid glass UI component library — 31 components, CSS-first, arc-animations integration. Zero dependencies.","directories":{},"_nodeVersion":"24.15.0","publishConfig":{"access":"public","provenance":false},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/arc-ui_2.2.0_1779982286615_0.1538521029392148","host":"s3://npm-registry-packages-npm-production"}},"2.4.1":{"name":"@arc-lang/arc-ui","version":"2.4.1","description":"Liquid glass UI component library — 49 components, CSS-first, arc-animations integration. Zero dependencies.","keywords":["modal","toast","tabs","accordion","tooltip","button","card","input","dropdown","drawer","badge","avatar","skeleton","progress","spinner","alert","switch","breadcrumb","table","pagination","chip","navbar","sidebar","code","stepper","stat","popover","combobox","command","footer","rating","timeline","kbd","list","context-menu","tag-input","hero","feature","pricing","testimonial","cta","announce","newsletter","logo-cloud","carousel","lightbox","liquid-glass","css","arc","ui"],"homepage":"https://arc-language.dev","repository":{"type":"git","url":"git+https://github.com/arc-language/arc-ui.git"},"license":"MIT","main":"index.css","scripts":{"size":"du -sh src/*.css js/*.js index.css"},"publishConfig":{"access":"public","provenance":false},"gitHead":"e6fdb9d4cb1889a4e2c00a496485a02f7f49e45a","_id":"@arc-lang/arc-ui@2.4.1","bugs":{"url":"https://github.com/arc-language/arc-ui/issues"},"_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-aOfg5nIcUcAert35F4mqBG4xKwovMWxgjeS2NoLfZKhS8GPIUy+IAeelIDT9bdjBghDqjc85PAp3yykj96sJCg==","shasum":"a66143dfe8261eb260d27baa736a103b612f5f4d","tarball":"https://registry.npmjs.org/@arc-lang/arc-ui/-/arc-ui-2.4.1.tgz","fileCount":69,"unpackedSize":258002,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAuq9XXIT4KMbGsrelQ9kz1UVdOQK6qxSpUk7xrfdhzoAiBI6D39fkLv4Rl1DpxQv90yM8BJ8Kqxec8UtLyLYuVuKA=="}]},"_npmUser":{"name":"kobecuppens","email":"kobecuppens@hotmail.com"},"directories":{},"maintainers":[{"name":"kobecuppens","email":"kobecuppens@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/arc-ui_2.4.1_1779999612667_0.3963845774541732"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-28T15:31:26.273Z","modified":"2026-05-28T20:20:12.943Z","2.2.0":"2026-05-28T15:31:26.765Z","2.4.1":"2026-05-28T20:20:12.810Z"},"bugs":{"url":"https://github.com/arc-language/arc-ui/issues"},"license":"MIT","homepage":"https://arc-language.dev","keywords":["modal","toast","tabs","accordion","tooltip","button","card","input","dropdown","drawer","badge","avatar","skeleton","progress","spinner","alert","switch","breadcrumb","table","pagination","chip","navbar","sidebar","code","stepper","stat","popover","combobox","command","footer","rating","timeline","kbd","list","context-menu","tag-input","hero","feature","pricing","testimonial","cta","announce","newsletter","logo-cloud","carousel","lightbox","liquid-glass","css","arc","ui"],"repository":{"type":"git","url":"git+https://github.com/arc-language/arc-ui.git"},"description":"Liquid glass UI component library — 49 components, CSS-first, arc-animations integration. Zero dependencies.","maintainers":[{"name":"kobecuppens","email":"kobecuppens@hotmail.com"}],"readme":"# arc-ui\n\n[![version](https://img.shields.io/badge/version-2.0.0-blueviolet)](https://github.com/arc-language/arc-ui)\n[![components](https://img.shields.io/badge/components-17-blueviolet)](https://github.com/arc-language/arc-ui)\n[![JS size](https://img.shields.io/badge/JS-~1.5KB%20optional-brightgreen)](https://github.com/arc-language/arc-ui)\n[![dependencies](https://img.shields.io/badge/dependencies-0-brightgreen)](https://github.com/arc-language/arc-ui)\n[![license](https://img.shields.io/badge/license-MIT-blue)](LICENSE)\n[![Part of Arc](https://img.shields.io/badge/Part%20of-Arc-5956f0)](https://arc-language.dev)\n\nLiquid glass UI component library. 17 components, CSS-first, zero dependencies. Configurable via CSS custom properties — change 6 vars to retheme everything.\n\n> **Part of [Arc](https://arc-language.dev)** — the zero-dependency web framework.\n\n**vs. alternatives:**\n| Library | Size | Framework | Deps |\n|---|---|---|---|\n| Headless UI | ~8KB | React only | React |\n| Radix UI | ~20KB+ | React only | React |\n| Floating UI | ~10KB | any | none |\n| **arc-ui** | **~3KB** | **any** | **none** |\n\n---\n\n## Install\n\n```bash\nnpm install arc-ui\n```\n\n**CDN:**\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/arc-ui/index.css\">\n```\n\n---\n\n## Glass Design System\n\narc-ui v2.0 introduces a single configurable token system. Every component inherits from these vars — change them once, retheme everything.\n\n```css\n:root {\n  /* Glass surface */\n  --glass-bg:        rgba(255, 255, 255, 0.10);\n  --glass-bg-hover:  rgba(255, 255, 255, 0.16);\n  --glass-blur:      20px;\n  --glass-saturate:  180%;\n  --glass-border:    rgba(255, 255, 255, 0.25);\n  --glass-shadow:    0 8px 32px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.18);\n\n  /* Accent */\n  --ui-accent:       #5956f0;\n\n  /* Timing */\n  --ui-duration:     var(--anim-duration, 0.2s);  /* auto-inherits arc-animations */\n  --ui-easing:       var(--anim-easing, cubic-bezier(0.16, 1, 0.3, 1));\n}\n```\n\n### arc-animations integration\n\nThree tiers — all CSS, no JS:\n\n**Tier 1 — Timing inheritance (automatic)**\nLoad arc-animations before arc-ui. `--ui-duration` picks up `--anim-duration` automatically via CSS var fallback.\n\n**Tier 2 — Class composability**\n```html\n<div class=\"card animate-float-in\">...</div>\n```\n\n**Tier 3 — Animation override vars**\n```css\n:root {\n  --modal-enter-animation: zoom-in;   /* any arc-animations keyframe */\n  --toast-enter-animation: slide-right;\n}\n```\n\n---\n\n## Components\n\n### Pure CSS (no JS)\n\n| Component | File | Description |\n|---|---|---|\n| Accordion | `src/accordion.css` | `<details>`/`<summary>`, height animation |\n| Tooltip | `src/tooltip.css` | `data-tooltip` attribute, 4 positions |\n| Switch | `src/switch.css` | `<input type=\"checkbox\">` styled |\n| Progress | `src/progress.css` | `--progress-value` CSS var, circular SVG |\n| Skeleton | `src/skeleton.css` | Shimmer animation, prebuilt shapes |\n| Badge | `src/badge.css` | Color variants, dot indicator |\n| Alert | `src/alert.css` | 4 semantic variants |\n| Spinner | `src/spinner.css` | Ring, dots, pulse variants |\n| Avatar | `src/avatar.css` | Image or initials, stack group |\n| Card | `src/card.css` | Glass surface, image/body/footer |\n\n### Requires small JS (~300B each)\n\n| Component | CSS | JS | Description |\n|---|---|---|---|\n| Button | `src/button.css` | — | All variants (loading state via CSS) |\n| Modal | `src/modal.css` | `js/modal.js` | Native `<dialog>`, focus trap |\n| Toast | `src/toast.css` | `js/toast.js` | `Toast.show()` API |\n| Tabs | `src/tabs.css` | `js/tabs.js` | ARIA tabs, keyboard nav |\n| Dropdown | `src/dropdown.css` | `js/dropdown.js` | Toggle, keyboard nav, `ui:select` event |\n| Drawer | `src/drawer.css` | `js/drawer.js` | Slide panel, focus trap, Escape |\n| Input | `src/input.css` | — | input/textarea/select, icon addon |\n\n---\n\n### Button\n\n```html\n<button class=\"btn\">Default</button>\n<button class=\"btn btn--primary\">Primary</button>\n<button class=\"btn btn--ghost\">Ghost</button>\n<button class=\"btn btn--outline\">Outline</button>\n<button class=\"btn btn--danger\">Danger</button>\n<button class=\"btn btn--sm\">Small</button>\n<button class=\"btn btn--lg\">Large</button>\n<button class=\"btn is-loading\">Loading</button>\n```\n\n| CSS property | Default | Description |\n|---|---|---|\n| `--btn-radius` | `var(--ui-radius)` | Border radius |\n| `--btn-padding` | `9px 18px` | Padding |\n| `--btn-font-size` | `14px` | Font size |\n\n---\n\n### Modal\n\nNative `<dialog>` element — backdrop, Escape key, and browser accessibility built in.\n\n```html\n<dialog class=\"modal\" id=\"my-modal\">\n  <div class=\"modal__box\">\n    <button class=\"modal__close\" data-modal-close aria-label=\"Close\">&#10005;</button>\n    <div class=\"modal__header\">\n      <h2 class=\"modal__title\">Confirm</h2>\n      <p class=\"modal__subtitle\">Are you sure?</p>\n    </div>\n    <div class=\"modal__footer\">\n      <button class=\"btn btn--ghost\" data-modal-close>Cancel</button>\n      <button class=\"btn btn--primary\" data-modal-close>Confirm</button>\n    </div>\n  </div>\n</dialog>\n\n<button data-modal-open=\"my-modal\">Open</button>\n<script src=\"https://unpkg.com/arc-ui/js/modal.js\"></script>\n```\n\n| CSS property | Default | Description |\n|---|---|---|\n| `--modal-width` | `540px` | Dialog width |\n| `--modal-radius` | `var(--ui-radius-xl)` | Border radius |\n| `--modal-bg` | `rgba(255,255,255,0.88)` | Glass background |\n| `--modal-blur` | `40px` | Backdrop blur |\n| `--modal-enter-animation` | `modal-in` | Entrance keyframe name |\n\n---\n\n### Toast\n\n```js\nToast.show('Saved!', { type: 'success', icon: '✓' })\nToast.show('Error occurred', { type: 'error', duration: 0 }) // persistent\nToast.show('Warning', { type: 'warning' })\nToast.show('Info message', { type: 'info' })\n```\n\n```html\n<script src=\"https://unpkg.com/arc-ui/js/toast.js\"></script>\n```\n\n| Option | Default | Description |\n|---|---|---|\n| `type` | `''` | `success` / `error` / `warning` / `info` |\n| `duration` | `4000` | Auto-dismiss in ms. `0` = persistent |\n| `icon` | `''` | Icon string prepended to message |\n\n| CSS property | Default |\n|---|---|\n| `--toast-enter-animation` | `toast-in` |\n| `--toast-bg` | `rgba(20,24,36,0.88)` |\n| `--toast-radius` | `var(--ui-radius-lg)` |\n\n---\n\n### Dropdown\n\n```html\n<details class=\"dropdown\">\n  <summary class=\"btn dropdown__trigger\">Options ▾</summary>\n  <div class=\"dropdown__menu\" role=\"menu\">\n    <div class=\"dropdown__label\">Actions</div>\n    <button class=\"dropdown__item\" data-value=\"edit\">\n      <span class=\"dropdown__icon\">✏</span> Edit\n      <span class=\"dropdown__shortcut\">⌘E</span>\n    </button>\n    <div class=\"dropdown__separator\"></div>\n    <button class=\"dropdown__item dropdown__item--danger\" data-value=\"delete\">Delete</button>\n  </div>\n</details>\n<script src=\"https://unpkg.com/arc-ui/js/dropdown.js\"></script>\n```\n\nUses native `<details>` — click-outside and Escape close for free (no JS). JS adds keyboard nav (↑/↓/Tab) and dispatches `ui:select` CustomEvent: `{ value, label, item }`.\n\nVariants: `.dropdown--right`, `.dropdown--up`.\n\n---\n\n### Drawer\n\n```html\n<button data-drawer-open=\"my-drawer\">Open</button>\n\n<div class=\"drawer-overlay\" data-for=\"my-drawer\"></div>\n<aside class=\"drawer\" id=\"my-drawer\" aria-hidden=\"true\">\n  <div class=\"drawer__header\">\n    <h2 class=\"drawer__title\">Title</h2>\n    <button class=\"drawer__close\" data-drawer-close>✕</button>\n  </div>\n  <div class=\"drawer__body\">Content</div>\n  <div class=\"drawer__footer\">\n    <button class=\"btn btn--ghost\" data-drawer-close>Cancel</button>\n    <button class=\"btn btn--primary\">Save</button>\n  </div>\n</aside>\n<script src=\"https://unpkg.com/arc-ui/js/drawer.js\"></script>\n```\n\nVariants: `.drawer--left`, `.drawer--bottom` (bottom sheet). Bottom sheet gets `.drawer__handle` (drag indicator).\n\nFires `ui:drawer-open` / `ui:drawer-close` CustomEvents.\n\n| CSS property | Default |\n|---|---|\n| `--drawer-width` | `320px` |\n| `--drawer-bg` | `rgba(255,255,255,0.88)` |\n| `--drawer-blur` | `32px` |\n| `--drawer-duration` | `var(--ui-duration-slow)` |\n\n---\n\n### Input\n\n```html\n<div class=\"input-group\">\n  <label class=\"input-label\" for=\"email\">Email</label>\n  <div class=\"input-wrap\">\n    <span class=\"input-icon\">✉</span>\n    <input class=\"input\" id=\"email\" type=\"email\" placeholder=\"you@example.com\">\n  </div>\n  <span class=\"input-hint\">We'll never share this.</span>\n</div>\n\n<!-- Error state -->\n<div class=\"input-group is-invalid\">\n  <label class=\"input-label\">Password</label>\n  <input class=\"input\" type=\"password\">\n  <span class=\"input-hint\">Must be at least 8 characters</span>\n</div>\n\n<select class=\"select\">...</select>\n<textarea class=\"textarea\" rows=\"4\"></textarea>\n```\n\n---\n\n### Switch\n\n```html\n<label class=\"switch-label\">\n  <input type=\"checkbox\" class=\"switch\" checked>\n  Enable notifications\n</label>\n```\n\nSizes: `.switch--sm`, `.switch--lg`. Zero JS.\n\n---\n\n### Progress\n\n```html\n<!-- Linear — set --progress-value (0–100) -->\n<div class=\"progress\" style=\"--progress-value:72\">\n  <div class=\"progress__bar\"></div>\n</div>\n\n<!-- Indeterminate -->\n<div class=\"progress progress--indeterminate\">\n  <div class=\"progress__bar\"></div>\n</div>\n\n<!-- Circular SVG ring -->\n<div class=\"progress-ring\" style=\"--progress-value:65\">\n  <svg viewBox=\"0 0 56 56\" class=\"progress-ring__svg\">\n    <circle class=\"progress-ring__track\" cx=\"28\" cy=\"28\" r=\"24\"/>\n    <circle class=\"progress-ring__fill\"  cx=\"28\" cy=\"28\" r=\"24\"/>\n  </svg>\n  <span class=\"progress-ring__label\">65%</span>\n</div>\n```\n\nZero JS — `--progress-value` drives width/`stroke-dashoffset` via CSS calc.\n\n---\n\n### Avatar\n\n```html\n<!-- Initials -->\n<span class=\"avatar\">AB</span>\n<span class=\"avatar avatar--lg avatar--purple\">GH</span>\n\n<!-- Image -->\n<span class=\"avatar\"><img src=\"photo.jpg\" alt=\"Jane\"></span>\n\n<!-- With status -->\n<div class=\"avatar-wrap\">\n  <span class=\"avatar avatar--lg\">JD</span>\n  <span class=\"avatar-status avatar-status--online\"></span>\n</div>\n\n<!-- Stack group -->\n<div class=\"avatar-stack\">\n  <span class=\"avatar avatar--sm\">AB</span>\n  <span class=\"avatar avatar--sm avatar--purple\">CD</span>\n  <span class=\"avatar avatar--sm avatar--pink\">EF</span>\n</div>\n```\n\nSizes: `--xs` (24px), `--sm` (32px), default (40px), `--lg` (56px), `--xl` (80px).\nColor presets: `--purple`, `--pink`, `--orange`, `--teal`.\n\n---\n\n### Tabs\n\n```html\n<div class=\"tabs\">\n  <div class=\"tabs__list\" role=\"tablist\">\n    <button class=\"tabs__tab is-active\" role=\"tab\" aria-selected=\"true\" data-tab=\"panel-1\">Tab 1</button>\n    <button class=\"tabs__tab\" role=\"tab\" aria-selected=\"false\" data-tab=\"panel-2\">Tab 2</button>\n  </div>\n  <div class=\"tabs__panel is-active\" id=\"panel-1\" role=\"tabpanel\">Content 1</div>\n  <div class=\"tabs__panel\" id=\"panel-2\" role=\"tabpanel\">Content 2</div>\n</div>\n<script src=\"https://unpkg.com/arc-ui/js/tabs.js\"></script>\n```\n\nVariants: `.tabs--pills` (glass pill), `.tabs--boxed`.\n\n---\n\n### Accordion\n\n```html\n<div class=\"accordion\">\n  <details class=\"accordion__item\">\n    <summary class=\"accordion__trigger\">Question?</summary>\n    <div class=\"accordion__content\">Answer.</div>\n  </details>\n</div>\n```\n\nZero JS. Height animates in Chrome 129+ via `interpolate-size: allow-keywords`. Add `.accordion--flush` for separator-only style.\n\n---\n\n### Alert\n\n```html\n<div class=\"alert alert--success\">\n  <span class=\"alert__icon\">✓</span>\n  <div>\n    <div class=\"alert__title\">Success</div>\n    <div class=\"alert__text\">Changes saved.</div>\n  </div>\n</div>\n```\n\nVariants: `alert--info`, `alert--success`, `alert--warning`, `alert--error`.\n\n---\n\n### Skeleton\n\n```html\n<div class=\"skeleton skeleton--text\"></div>\n<div class=\"skeleton skeleton--title\"></div>\n<div class=\"skeleton skeleton--avatar\"></div>\n<div class=\"skeleton skeleton--card\"></div>\n```\n\nStatic gray on `prefers-reduced-motion`.\n\n---\n\n### Badge\n\n```html\n<span class=\"badge badge--success\">Active</span>\n<span class=\"badge badge--error\"><span class=\"badge__dot\"></span>Offline</span>\n```\n\nVariants: `--accent`, `--success`, `--error`, `--warning`, `--info`, `--glass`.\nSizes: `--sm`, `--lg`.\n\n---\n\n### Spinner\n\n```html\n<span class=\"spinner\"></span>\n<span class=\"spinner spinner--dots\"></span>\n<span class=\"spinner spinner--pulse\"></span>\n```\n\nSizes: `--sm`, `--lg`.\n\n---\n\n### Tooltip\n\n```html\n<button data-tooltip=\"Save document\">Save</button>\n<button data-tooltip=\"Delete\" class=\"tooltip--below\">Delete</button>\n<button data-tooltip=\"Help\" class=\"tooltip--right\">?</button>\n<button data-tooltip=\"Light glass\" class=\"tooltip--light\">Light</button>\n```\n\nZero JS. Positions: default (above), `.tooltip--below`, `.tooltip--left`, `.tooltip--right`.\n\n| CSS property | Default |\n|---|---|\n| `--tooltip-bg` | `rgba(20,24,36,0.88)` |\n| `--tooltip-blur` | `12px` |\n| `--tooltip-delay` | `0.15s` |\n\n---\n\n## Tree-shaking\n\nImport only what you need:\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/arc-ui/src/base.css\">\n<link rel=\"stylesheet\" href=\"https://unpkg.com/arc-ui/src/button.css\">\n<link rel=\"stylesheet\" href=\"https://unpkg.com/arc-ui/src/modal.css\">\n```\n\n---\n\n## Browser support\n\n| Feature | Chrome | Firefox | Safari | Edge |\n|---------|--------|---------|--------|------|\n| `backdrop-filter` | 76+ | 103+ | 9+ | 79+ |\n| `<dialog>` | 37+ | 98+ | 15.4+ | 79+ |\n| `<details>`/`<summary>` | 12+ | 49+ | 6+ | 79+ |\n| Height animation (`interpolate-size`) | 129+ | — | — | 129+ |\n| CSS custom properties | 49+ | 31+ | 9.1+ | 15+ |\n\nGraceful degradation: `backdrop-filter` unsupported = opaque background. Height animation unsupported = instant expand/collapse.\n\n---\n\n## Accessibility\n\n- **Modal**: focus trapped (Tab/Shift-Tab), Escape closes, native `<dialog>` semantics\n- **Dropdown**: native `<details>`/`<summary>` (Escape + click-outside free), `↑`/`↓`/Tab keyboard nav, `role=\"menu\"`\n- **Drawer**: focus trap, Escape closes, body scroll locked, `aria-hidden`\n- **Tabs**: full ARIA (`role=\"tablist\"`, `aria-selected`), ←/→/Home/End navigation\n- **Accordion**: native `<details>`/`<summary>` — full browser keyboard + screen reader support\n- **Switch**: native `<input type=\"checkbox\">` — full keyboard, screen reader, and form support\n- **Tooltip**: `:focus-visible` triggered (keyboard accessible), not just `:hover`\n- **`prefers-reduced-motion`**: all animations instant, skeleton shimmer static\n\n---\n\n## License\n\n[MIT](LICENSE) © Arc contributors\n","readmeFilename":"README.md"}