{"_id":"@byloth/clay-vue","name":"@byloth/clay-vue","dist-tags":{"next":"0.1.0-dev.1","latest":"0.1.0-dev.1"},"versions":{"0.1.0-dev.1":{"name":"@byloth/clay-vue","version":"0.1.0-dev.1","description":"Fluffy, friendly & 3D: reusable Vue components based on the Claymorphism UI design style. 🪔","keywords":["Vue.js","Components","Claymorphism","JavaScript","TypeScript","Collection","Library"],"homepage":"https://github.com/Byloth/clay-vue#readme","repository":{"type":"git","url":"git+https://github.com/Byloth/clay-vue.git"},"bugs":{"url":"https://github.com/Byloth/clay-vue/issues"},"author":{"name":"Matteo Bilotta","email":"me@byloth.net","url":"https://www.byloth.dev/"},"license":"Apache-2.0","type":"module","main":"dist/clay-vue.umd.cjs","module":"dist/clay-vue.js","unpkg":"dist/clay-vue.global.js","jsdelivr":"dist/clay-vue.global.js","exports":{".":{"import":{"types":"./src/index.ts","default":"./dist/clay-vue.js"},"require":{"types":"./src/index.ts","default":"./dist/clay-vue.umd.cjs"}},"./vue":{"import":{"types":"./src/vue.ts","default":"./dist/clay-vue.vue.js"},"require":{"types":"./src/vue.ts","default":"./dist/clay-vue.vue.cjs"}},"./style.css":"./dist/clay-vue.css","./scss":{"sass":"./src/assets/scss/_index.scss","default":"./src/assets/scss/_index.scss"},"./package.json":"./package.json"},"types":"src/index.ts","sideEffects":["**/*.css","**/*.scss","./src/index.ts","./dist/clay-vue.js","./dist/clay-vue.umd.cjs","./dist/clay-vue.global.js"],"scripts":{"dev":"storybook dev --port 6006 --no-open","build":"pnpm build:core && pnpm build:storybook","build:core":"vite build && vite build --config vite.vue.config.ts","build:storybook":"storybook build --output-dir .storybook/dist","ci":"pnpm install --frozen-lockfile","preview":"vite preview","lint":"eslint .","test":"pnpm build:core && vitest run","typecheck":"vue-tsc --build --force --noEmit","prepare":"husky","prepack":"pnpm build:core"},"dependencies":{"@vueuse/core":"^14.3.0"},"devDependencies":{"@byloth/eslint-config-nuxt":"^4.0.2","@chromatic-com/storybook":"^5.2.1","@eslint/compat":"^2.1.0","@fortawesome/fontawesome-free":"^7.3.0","@storybook/addon-a11y":"^10.4.6","@storybook/addon-docs":"^10.4.6","@storybook/addon-vitest":"^10.4.6","@storybook/vue3-vite":"^10.4.6","@types/node":"^24.13.2","@vitejs/plugin-vue":"^6.0.7","eslint":"^10.6.0","eslint-plugin-storybook":"^10.4.6","husky":"^9.1.7","publint":"^0.3.21","sass":"^1.101.0","storybook":"^10.4.6","typescript":"^6.0.3","vite":"^8.1.3","vitest":"^4.1.10","vue":"^3.5.39","vue-tsc":"^3.3.6"},"gitHead":"b4995e252566d1562e3d26a2374823db43aa0769","_id":"@byloth/clay-vue@0.1.0-dev.1","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-7CPzzHVvtU+ntQP+3TAQpzdiWN3v6oUERwgjgw1Y5lWpQMz4SXvllZoIG4N+IjZsdSu3EArU0ypSeUGhDG20ng==","shasum":"f7b93459a571cf0fea2963fec67d20fe499c19ab","tarball":"https://registry.npmjs.org/@byloth/clay-vue/-/clay-vue-0.1.0-dev.1.tgz","fileCount":34,"unpackedSize":3122960,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC4QcBRecoMjtEd2VvBaGbCt/VI12WTgm+vE50z6AsenQIgJWjtLeWdS+Rprg3zHgSPyFqvQ/ESY4sSa+r939l3hiE="}]},"_npmUser":{"name":"byloth","email":"me@byloth.dev"},"directories":{},"maintainers":[{"name":"byloth","email":"me@byloth.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/clay-vue_0.1.0-dev.1_1783438704187_0.8889921602365514"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-07T15:38:24.008Z","0.1.0-dev.1":"2026-07-07T15:38:24.342Z","modified":"2026-07-07T15:38:24.551Z"},"maintainers":[{"name":"byloth","email":"me@byloth.dev"}],"description":"Fluffy, friendly & 3D: reusable Vue components based on the Claymorphism UI design style. 🪔","homepage":"https://github.com/Byloth/clay-vue#readme","keywords":["Vue.js","Components","Claymorphism","JavaScript","TypeScript","Collection","Library"],"repository":{"type":"git","url":"git+https://github.com/Byloth/clay-vue.git"},"author":{"name":"Matteo Bilotta","email":"me@byloth.net","url":"https://www.byloth.dev/"},"bugs":{"url":"https://github.com/Byloth/clay-vue/issues"},"license":"Apache-2.0","readme":"# Clay Vue 🪔\n\nFluffy, friendly &amp; 3D: reusable Vue components based on the Claymorphism UI design style.\n\n> ⚠️ **Work in progress** — currently `1.0.0-dev.*`.\n> The stable public API only includes `ClayButton` and `ClayCard`, for now.\n\n## Installation\n\n```sh\npnpm add @byloth/clay-vue\n```\n\n## Usage\n\n### Framework-agnostic (custom elements)\n\nThe package root ships **native custom elements** — Vue's runtime is compiled\nin, so they're ready to use in plain HTML/JS or from any framework:\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@byloth/clay-vue/dist/clay-vue.css\" />\n<script src=\"https://unpkg.com/@byloth/clay-vue\"></script>\n\n<clay-card>\n    <clay-button>Click me!</clay-button>\n</clay-card>\n```\n\nOr, from a bundler:\n\n```ts\nimport \"@byloth/clay-vue\";\nimport \"@byloth/clay-vue/style.css\";\n```\n\nThe elements render in **light DOM**, so the stylesheet and all the\n`--clay-*` design tokens work exactly as with the Vue components.\n\n### With Vue\n\nIn a Vue app, import the components directly from the `/vue` entry —\nhere `vue` stays external: your app provides it (any Vue 3.5+ will do).\n\n```ts\nimport { ClayButton, ClayCard } from \"@byloth/clay-vue/vue\";\n\nimport \"@byloth/clay-vue/style.css\";\n```\n\n```vue\n<template>\n    <ClayCard>\n        <ClayButton>Click me!</ClayButton>\n    </ClayCard>\n</template>\n```\n\n> When other frameworks get first-class adapters, they'll follow the same\n> pattern: `@byloth/clay-vue/react`, `/angular`, `/svelte`, …\n\n### Theming\n\nEvery visual aspect is driven by `--clay-*` CSS custom properties, and all the\nlibrary's styles live in sub-layers of a single `clay` cascade layer: any\nunlayered CSS of yours always wins — no `!important` needed.\n\n```css\n:root\n{\n    --clay-color-primary: hotpink;\n    --clay-button-roundness: 0.5em;\n}\n```\n\nSCSS sources are shipped too, if you prefer the `$clay-*` variables:\n\n```scss\n@use \"pkg:@byloth/clay-vue/scss\" as clay;\n```\n\n### Fonts\n\nThe Claymorphism look is designed around [Baloo 2](https://fonts.google.com/specimen/Baloo+2),\nbut the library **doesn't load any remote font** by itself: add it to your app\nif you want the full look (the font stack gracefully falls back otherwise).\n\n```html\n<link href=\"https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap\" rel=\"stylesheet\" />\n```\n\n## Development\n\n```sh\npnpm install    # install dependencies\npnpm dev        # Storybook dev server on :6006\npnpm build      # library + Storybook build\npnpm lint       # ESLint\npnpm typecheck  # vue-tsc\n```\n","readmeFilename":"README.md","_rev":"1-b49fbca2c7c2980c09fcb04f33f796b9"}