{"_id":"duoop-ui","_rev":"2-35e045f2e5256456a2127e1dd44a214b","name":"duoop-ui","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"duoop-ui","version":"1.0.0","keywords":["react","components","ui","css"],"author":"","license":"Apache-2.0","_id":"duoop-ui@1.0.0","maintainers":[{"name":"gusr0s","email":"roulin.augustin.contact@gmail.com"}],"homepage":"https://duoop-ui.pages.dev/","bugs":{"url":"https://github.com/gus-rlin/Duoop-UI/issues"},"dist":{"shasum":"1e18c8b991fd019a097811fcc5a01971a1e5a2a2","tarball":"https://registry.npmjs.org/duoop-ui/-/duoop-ui-1.0.0.tgz","fileCount":6,"integrity":"sha512-uP9UGvty4jTS6ylIKetp/c3W2pu9bRP1QLcVk7JzlFgL7LuIU56iwIzTvC9MTvmcGeIKoWDwUfo4xoSLMgbM9w==","signatures":[{"sig":"MEQCIEqgzUn/pqClVdAMRuzf5rxlKGmvQWfry9fsbwRIYw/IAiBGACXlIfme3PA8I9+BuNzHVnviMSx8kb97NDxaG09zDg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":505810},"main":"./lib/index.js","type":"module","module":"./lib/index.js","engines":{"node":"^22.18.0 || >=24.11.0"},"exports":{".":"./lib/index.js","./styles.css":"./lib/styles.css","./package.json":"./package.json"},"gitHead":"0f3690812a51f1e5c42b66f1e93c9341cf16383b","scripts":{"dev":"vite --host 127.0.0.1","test":"npm run build -- --logLevel warn && node tests/check-imports.mjs && npm run test:essentials && playwright test && node tests/build-downloads.mjs","build":"vite build","prepack":"npm run build:lib","preview":"vite preview --host 127.0.0.1","build:lib":"vite build --config vite.lib.config.js","test:a11y":"node tests/audit-galleries.mjs","test:pages":"node tests/standalone-pages.mjs","test:package":"node tests/package.mjs","test:essentials":"node tests/essentials.browser.mjs","test:navigation":"node tests/navigation.browser.mjs","test:primitives":"node tests/run-primitives.mjs","test:integration":"node tests/fresh-project.mjs","test:essential-downloads":"node tests/essential-downloads.mjs"},"_npmUser":{"name":"gusr0s","email":"roulin.augustin.contact@gmail.com"},"repository":{"url":"git+https://github.com/gus-rlin/Duoop-UI.git","type":"git"},"_npmVersion":"11.16.0","description":"Tactile React components with plain CSS.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.18.0","dependencies":{"gsap":"^3.15.0","leaflet":"^1.9.4","react-dropzone":"^14.4.1","react-day-picker":"^9.14.0","@radix-ui/react-dialog":"^1.1.23","@radix-ui/react-slider":"^1.4.7","@radix-ui/react-popover":"^1.1.23","@radix-ui/react-tooltip":"^1.2.16"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.2","react":"^19.2.8","fflate":"^0.8.3","prettier":"^3.9.6","react-dom":"^19.2.8","highlight.js":"^11.11.1","@babel/parser":"^8.0.4","@playwright/test":"^1.63.0","@axe-core/playwright":"^4.13.0","@fontsource-variable/dm-sans":"^5.3.0"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/duoop-ui_1.0.0_1788860818468_0.039742371839426305","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"duoop-ui","version":"1.0.1","description":"Tactile React components with plain CSS.","scripts":{"dev":"vite --host 127.0.0.1","build":"vite build","preview":"vite preview --host 127.0.0.1","test":"npm run test:docs && npm run build -- --logLevel warn && node tests/check-imports.mjs && npm run test:essentials && playwright test && node tests/build-downloads.mjs","test:navigation":"node tests/navigation.browser.mjs","test:essentials":"node tests/essentials.browser.mjs","test:essential-downloads":"node tests/essential-downloads.mjs","test:primitives":"node tests/run-primitives.mjs","test:integration":"node tests/fresh-project.mjs","test:pages":"node tests/standalone-pages.mjs","test:a11y":"node tests/audit-galleries.mjs","build:lib":"vite build --config vite.lib.config.js","prepack":"npm run build:lib","test:package":"node tests/package.mjs","test:docs":"node tests/docs.mjs"},"keywords":["react","components","ui","css"],"author":"","license":"Apache-2.0","type":"module","dependencies":{"@radix-ui/react-dialog":"^1.1.23","@radix-ui/react-popover":"^1.1.23","@radix-ui/react-slider":"^1.4.7","@radix-ui/react-tooltip":"^1.2.16","gsap":"^3.15.0","leaflet":"^1.9.4","react-day-picker":"^9.14.0","react-dropzone":"^14.4.1"},"devDependencies":{"@axe-core/playwright":"^4.13.0","@babel/parser":"^8.0.4","@playwright/test":"^1.63.0","prettier":"^3.9.6","vite":"^8.2.2","react":"^19.2.8","react-dom":"^19.2.8","@fontsource-variable/dm-sans":"^5.3.0","fflate":"^0.8.3","highlight.js":"^11.11.1"},"engines":{"node":"^22.18.0 || >=24.11.0"},"main":"./lib/index.js","module":"./lib/index.js","exports":{".":"./lib/index.js","./styles.css":"./lib/styles.css","./package.json":"./package.json"},"sideEffects":["**/*.css"],"repository":{"type":"git","url":"git+https://github.com/gus-rlin/Duoop-UI.git"},"homepage":"https://duoop-ui.com/","peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_id":"duoop-ui@1.0.1","bugs":{"url":"https://github.com/gus-rlin/Duoop-UI/issues"},"_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-eDQawpx63XSRdPN3NsmgECmH3VSFaaIBMHUeQT2xdfClKgMGM+tH6fFPkyfrQrmWMNQ8fUR2BNSRBrSYEcCCMQ==","shasum":"97998cebdac770cddc55923195ff1dc02347c388","tarball":"https://registry.npmjs.org/duoop-ui/-/duoop-ui-1.0.1.tgz","fileCount":6,"unpackedSize":529414,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEY9dmFbpJSsf5vYvYM6d8y05myzDKuhB5Ga130ikParAiEAuDMlZ8FHddGf0cxcXplyTa+TxSjwNZ2IWNIRo5JS/o0="}]},"_npmUser":{"name":"gusr0s","email":"roulin.augustin.contact@gmail.com"},"directories":{},"maintainers":[{"name":"gusr0s","email":"roulin.augustin.contact@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/duoop-ui_1.0.1_1788882190965_0.2434183659340896"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-08T09:46:58.233Z","modified":"2026-09-08T15:43:11.270Z","1.0.0":"2026-09-08T09:46:58.646Z","1.0.1":"2026-09-08T15:43:11.127Z"},"bugs":{"url":"https://github.com/gus-rlin/Duoop-UI/issues"},"license":"Apache-2.0","homepage":"https://duoop-ui.com/","keywords":["react","components","ui","css"],"repository":{"type":"git","url":"git+https://github.com/gus-rlin/Duoop-UI.git"},"description":"Tactile React components with plain CSS.","maintainers":[{"name":"gusr0s","email":"roulin.augustin.contact@gmail.com"}],"readme":"<div align=\"center\">\r\n\r\n<img src=\"public/armadillo-logo.png\" alt=\"Duoop UI armadillo\" width=\"88\" />\r\n\r\n# Duoop UI\r\n\r\n### Interfaces you can feel. Source code you can own.\r\n\r\nTactile React components with crisp outlines, playful motion, and satisfying feedback.\r\n\r\n**46 components across 7 categories — interactive previews, source code, and downloadable examples.**\r\n\r\n[**Explore the live catalog →**](https://duoop-ui.com/) · [Components](https://duoop-ui.com/?page=components) · [Installation](https://duoop-ui.com/?page=installation) · [Page examples](https://duoop-ui.com/?page=examples)\r\n\r\n[![CI](https://github.com/gus-rlin/Duoop-UI/actions/workflows/ci.yml/badge.svg)](https://github.com/gus-rlin/Duoop-UI/actions/workflows/ci.yml)\r\n[![License: Apache 2.0](https://img.shields.io/badge/License-Apache_2.0-303b51?style=flat-square)](LICENSE)\r\n[![React 19](https://img.shields.io/badge/React-19-303b51?style=flat-square&logo=react)](https://react.dev/)\r\n\r\n</div>\r\n\r\n[![Duoop UI live catalog](docs/images/catalog.png)](https://duoop-ui.com/)\r\n\r\n## Why Duoop?\r\n\r\n- **A distinctive feel.** Raised surfaces, short shadows, expressive SVGs, and motion that responds to your actions.\r\n- **Source included.** Preview, inspect, and copy complete JSX and CSS files, including local helpers.\r\n- **Runnable downloads.** Download a Vite project with the displayed example, styles, and dependencies.\r\n- **Plain React and CSS.** No Tailwind setup, custom CLI, or global provider required for a basic button.\r\n- **Interaction matters.** Keyboard behavior, visible focus, reduced motion, and clear action feedback are part of the design.\r\n\r\n**Duoop UI is published on npm as `duoop-ui`.** Install the library with npm to use its components in your React application. This repository contains the library source and documentation site, under Apache 2.0.\r\n\r\n## Install the library\r\n\r\nInstall the published [duoop-ui package](https://www.npmjs.com/package/duoop-ui) in your React 19 application:\r\n\r\n```sh\r\nnpm i duoop-ui\r\n```\r\n\r\nThe package installs its runtime dependencies automatically. React and React DOM are peer dependencies supplied by your React 19 application.\r\n\r\nImport the stylesheet once in your application entry, then import components by name:\r\n\r\n```jsx\r\nimport { Button, Card } from 'duoop-ui';\r\nimport 'duoop-ui/styles.css';\r\n\r\nexport default function App() {\r\n  return <Card><Button onClick={() => alert('Hello!')}>Press me</Button></Card>;\r\n}\r\n```\r\n\r\nThe ESM package contains all public components, their compound components and helpers, including `IconButton`. It excludes the catalogue, demos and development tools. Your bundler can remove unused JavaScript exports; the single stylesheet includes the full collection, the shared foundation and Leaflet styles. The foundation sets page defaults such as body margin and font, so import your application overrides afterwards. DM Sans remains an optional font installation.\r\n\r\nUse a React bundler such as Vite. For Next.js, import the stylesheet in the root layout and use interactive components from a client component; the library entry preserves its `\"use client\"` boundary. Next.js and server rendering have not been separately validated. Dedicated TypeScript declarations are not supplied.\r\n\r\n## Explore the collection\r\n\r\n**46 components · 7 categories**, each with downloadable examples. The collection includes Breadcrumb and Separator, plus Tooltip, Popover, Slider, Calendar, Date Picker, Table, Pagination, Sheet, File Upload, Skeleton and Alert. See [integration notes and verification](docs/essential-components.md).\r\n\r\n| Collection | Explore |\r\n| --- | --- |\r\n| Buttons | [Raised buttons and reactions](https://duoop-ui.com/?category=Buttons) |\r\n| Forms | [Inputs, selection, and validation](https://duoop-ui.com/?category=Forms) |\r\n| Navigation | [Menus and tabs](https://duoop-ui.com/?category=Navigation) |\r\n| Cards | [Cards and composed layouts](https://duoop-ui.com/?category=Cards) |\r\n| Feedback | [Toasts and progress](https://duoop-ui.com/?category=Feedback) |\r\n| Motion | [Animated text and expressive interactions](https://duoop-ui.com/?category=Motion) |\r\n| Display | [Avatars, maps, and more](https://duoop-ui.com/?category=Display) |\r\n\r\nExplore the [outdoor adventure landing page](https://duoop-ui.com/?page=examples&example=landing), the current public page example, with [source](src/examples/LandingPage.jsx), styles and a runnable download. [SettingsPage.jsx](src/examples/SettingsPage.jsx) remains a source-only example in the repository; it is not listed in the public catalog. Example brands, pricing, forms, and persistence are demonstrations; connect your own services when adapting them.\r\n\r\n## Optional: own the source files\r\n\r\nFor direct edits to a component implementation, follow the [source-copy guide](docs/source-installation.md), or choose **Download project** in the catalog for a complete Vite example. These are optional ways to use the same components. The npm installation above is complete on its own.\r\n\r\n## Develop and test\r\n\r\nCatalog tooling requires **Node.js 22.18+ in the 22.x line, or 24.11+**, and npm.\r\n\r\n```sh\r\ngit clone https://github.com/gus-rlin/Duoop-UI.git\r\ncd Duoop-UI\r\nnpm ci\r\nnpm run dev\r\n```\r\n\r\n| Command | Purpose |\r\n| --- | --- |\r\n| `npm run build` | Build the static site into `dist/`. |\r\n| `npm run build:lib` | Build the npm library into `lib/`. |\r\n| `npm pack` | Build and create the installable `duoop-ui-1.0.1.tgz` archive. |\r\n| `npm run test:package` | Install the archive in an isolated app; verify exports, build, styling and interaction. |\r\n| `npm run preview` | Preview the production build. |\r\n| `npm run test:docs` | Check documentation counts, public URLs, local links and documented npm scripts against the project. |\r\n| `npm test` | Run documentation checks, build, check imports, run essentials and public browser/SEO tests, then build downloaded projects. See current limitations in VALIDATION.md. |\r\n| `npm run test:essentials` | Start its own server and check the eleven essential component families. |\r\n| `npm run test:essential-downloads` | Start its own server, download and build essential starters and gallery variants. |\r\n| `npm run test:navigation` | Start its own server and check Breadcrumb and Separator. |\r\n| `npm run test:primitives` | Run detailed primitive suites against a dev server on port 5176. |\r\n| `npm run test:a11y` | Audit galleries against a dev server on port 5176. |\r\n| `npm run test:pages` | Legacy two-page regression script; requires old downloads and selectors. See VALIDATION.md before using. |\r\n| `npm run test:integration` | Verify the optional source-copy guide in a fresh Vite app; requires npm access. |\r\n\r\nInstall Chromium with `npx playwright install chromium`. For a fixed dev port, run `npm run dev -- --port 5176 --strictPort`. Most primitive suites accept `TEST_URL`, but some diagnostic scripts use fixed addresses; keep port 5176 for the combined run. Reports and screenshots go to the ignored `artifacts/` directory.\r\n\r\nGitHub CI runs documentation checks, the production build, import checks, package installation tests, essential-component browser checks, and SEO browser tests. See [VALIDATION.md](VALIDATION.md) for verification scope and known limitations. Automated accessibility checks are not a comprehensive certification.\r\n\r\n## Deployment\r\n\r\nMaintainer instructions for [packing and publishing a new npm release](CONTRIBUTING.md#publish-a-new-npm-release-maintainers) are in the contribution guide.\r\n\r\n### Documentation site\r\n\r\nThe live site is on [Cloudflare Pages](https://duoop-ui.com/). Deploy `dist/` over HTTPS for clipboard access. Query-based deep links do not need route rewrites. Preserve public TXT/XML files and allow required remote demo assets in any CSP. See [SEO.md](SEO.md).\r\n\r\nLegacy personal entries in `duoop-ui.components.v1` are no longer displayed; their stored data is not deleted or rewritten.\r\n\r\n## Contribute\r\n\r\nStart with [CONTRIBUTING.md](CONTRIBUTING.md), follow the [design guidelines](design.md), and use the [issue templates](https://github.com/gus-rlin/Duoop-UI/issues/new/choose) for bugs and ideas.\r\n\r\nUseful entry points: [catalog metadata](src/catalog/catalog.js), [integration recipes](src/catalog/recipes.js), [source bundling](src/catalog/source-bundle.js), and [code documentation](src/components/Button/Documentation.jsx).\r\n\r\nDocumentation ownership and the update checklist are in [CONTRIBUTING.md](CONTRIBUTING.md#keep-documentation-consistent). Catalog counts come from `entries` and `categories` in `src/catalog/catalog.js`; package requirements come from `package.json`; canonical URLs come from `src/catalog/seo.js`. Counts refer to catalog entries, not the larger set of exported compound components and helpers.\r\n\r\nIf Duoop helps you build something, a GitHub star helps others discover it.\r\n\r\n## License\r\n\r\n[Apache License 2.0](LICENSE). Preserve required license and attribution notices. Third-party dependencies and demo assets retain their own terms.\r\n","readmeFilename":"README.md"}