{"_id":"@aerokidz/ui","_rev":"2-ff500d018a71c869fc45941415445a64","name":"@aerokidz/ui","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aerokidz/ui","version":"1.0.0","keywords":["design-system","aerokidz","tailwind","css"],"author":{"name":"Antigravity"},"license":"MIT","_id":"@aerokidz/ui@1.0.0","maintainers":[{"name":"aerokidztech","email":"aerokidz.id@gmail.com"}],"dist":{"shasum":"83142302814650e330d76d4f6cdc94c0ba3fcf10","tarball":"https://registry.npmjs.org/@aerokidz/ui/-/ui-1.0.0.tgz","fileCount":5,"integrity":"sha512-gh+XnfXfUzrzGBzVt3xA6rNPZ1+NpFKnK/t3tnSj6zWjq1TIpNUOGTweU/6CsbyjUlsBmBz+5mD1FB4xmJl3KQ==","signatures":[{"sig":"MEUCIQD2GWa46ii87sib0EnNi6SSOwr02PgnsyoTI0bRUfgB+wIgB+btjCwLA9d5RYMo/j9LLpP9NWr3nyACWKSt2HxyEG8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9979},"main":"src/tokens.js","module":"src/tokens.js","exports":{".":"./src/tokens.js","./base.css":"./src/base.css","./tailwind-preset":"./src/tailwind-preset.js"},"gitHead":"61cfa6a10f0a28a3b9a34f032cf3064a87211421","_npmUser":{"name":"aerokidztech","email":"aerokidz.id@gmail.com"},"_npmVersion":"10.8.2","description":"Design system for Aerokidz projects","directories":{},"_nodeVersion":"20.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ui_1.0.0_1775400433214_0.6309934897617306","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aerokidz/ui","version":"1.0.1","description":"Design system for Aerokidz projects","main":"src/tokens.js","module":"src/tokens.js","exports":{".":"./src/tokens.js","./base.css":"./src/base.css","./tailwind-preset":"./src/tailwind-preset.js"},"keywords":["design-system","aerokidz","tailwind","css"],"author":{"name":"Antigravity"},"license":"MIT","publishConfig":{"access":"public"},"_id":"@aerokidz/ui@1.0.1","gitHead":"611800554e188fb50b03ba16b0f0df6e8b8e4412","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-+tNZIAY6RQuUqBiDHdpYbu4RVPs2Xge7PXmfFK5YDk2TeZRGivn88hSnCiP7aET/sBqN2QepWDbRBRXTJB9JJg==","shasum":"32acd88bd39503afea992ce357ac89cd48b86b7a","tarball":"https://registry.npmjs.org/@aerokidz/ui/-/ui-1.0.1.tgz","fileCount":5,"unpackedSize":10098,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCfCpy3ddEL3pCk1uKoEM1NaSeF90M+9UXFZYVB2XpLawIgbidUCULHG3sd0NHAAiaab0BcPEQ2NuYP6CE1YdrzRNw="}]},"_npmUser":{"name":"aerokidztech","email":"aerokidz.id@gmail.com"},"directories":{},"maintainers":[{"name":"aerokidztech","email":"aerokidz.id@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_1.0.1_1775449359229_0.40046756954598806"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-05T14:47:13.076Z","modified":"2026-04-06T04:22:39.548Z","1.0.0":"2026-04-05T14:47:13.380Z","1.0.1":"2026-04-06T04:22:39.390Z"},"author":{"name":"Antigravity"},"license":"MIT","keywords":["design-system","aerokidz","tailwind","css"],"description":"Design system for Aerokidz projects","maintainers":[{"name":"aerokidztech","email":"aerokidz.id@gmail.com"}],"readme":"# Aerokidz UI\n\nA unified design system for Aerokidz projects, compatible with Nuxt.js and Next.js.\n\n## Installation\n\nThis design system is intended to be used as a shared local package within the Aerokidz workspace, or as an NPM package once published.\n\n## GitHub Actions & NPM Publishing\nTo automate the publishing to NPM, you must:\n1. Generate an **Automation Token** on [npm.js](https://www.npmjs.com/).\n2. Add the token to your GitHub repository secrets:\n   - Go to **Settings** > **Secrets and variables** > **Actions**.\n   - Create a new repository secret named `NPM_TOKEN`.\n   - The workflow in `.github/workflows/publish-design-system.yml` will then automatically publish the package to NPM whenever changes are pushed to the `main` branch.\n\n## Usage\n\n### 🚀 Next.js (Backoffice)\n\n#### 1. Tailwind CSS v4 Configuration\nIn your `src/app/globals.css`, you can import the base styles and use the tokens in the `@theme` block:\n\n```css\n@import \"tailwindcss\";\n@import \"../../../design-system/src/base.css\";\n\n@theme {\n  --color-primary-50: #FDFFE6;\n  --color-primary-100: #FAFEB8;\n  --color-primary-200: #F6FE8B;\n  --color-primary-300: #F3FD5D;\n  --color-primary-400: #EFFD30;\n  --color-primary-500: #DCED03;\n  --color-primary-600: #C1CF02;\n  --color-primary-700: #97A202;\n  --color-primary-800: #6C7401;\n  --color-primary-900: #424701;\n  --color-primary-950: #181900;\n  \n  --font-sans: 'Poppins', ui-sans-serif, system-ui;\n}\n```\n\n#### 2. Programmatic Access\n```javascript\nimport tokens from '@/../design-system';\n\nconst primaryColor = tokens.colors.primary.DEFAULT;\n```\n\n---\n\n### 🟢 Nuxt.js (Webstore)\n\n#### 1. Global CSS\nIn your `nuxt.config.ts`, reference the shared base CSS:\n\n```typescript\nexport default defineNuxtConfig({\n  css: [\n    '../../design-system/src/base.css',\n    '~/assets/css/global.css'\n  ],\n})\n```\n\n#### 2. Tailwind (if used)\nIf you add Tailwind to Nuxt, add the preset to your `tailwind.config.js`:\n\n```javascript\nmodule.exports = {\n  presets: [\n    require('../../design-system/src/tailwind-preset')\n  ],\n  // ...\n}\n```\n\n## Design Tokens\n\n### Colors\n- **Primary**: `#DCED03` (Vibrant Yellow/Green)\n- **Dark**: `#000116` (Deep Navy)\n- **Secondary Dark**: `#1a1a2e`\n\n### Typography\n- **Font Family**: Poppins\n- **Weights**: 400 (Regular) to 800 (ExtraBold)\n\n### Components/Effects\n- **Glassmorphism**: Use `.glass` class.\n- **Brand Glow**: Use `.glow` or `box-shadow: var(--shadow-glow)`.\n","readmeFilename":"README.md"}