{"_id":"@bitfootco/skogen","_rev":"12-8063af9177e050ed1382b28b687fd47b","name":"@bitfootco/skogen","dist-tags":{"latest":"1.2.0"},"versions":{"0.1.2":{"name":"@bitfootco/skogen","version":"0.1.2","author":{"name":"The Bitfoot Company"},"license":"MIT","_id":"@bitfootco/skogen@0.1.2","maintainers":[{"name":"lukechanning","email":"luke@bitfoot.co"}],"homepage":"https://github.com/bitfootco/skogen#readme","bugs":{"url":"https://github.com/bitfootco/skogen/issues"},"dist":{"shasum":"171b5c3fa6ffe50f4dfcae22f63a66cfc61c1890","tarball":"https://registry.npmjs.org/@bitfootco/skogen/-/skogen-0.1.2.tgz","fileCount":35,"integrity":"sha512-/kKTlUnPzURGiF/9+m7+vqrP3aaSl6cWW3vsmXQuX1z8+S13o9Z3tXSLgY++InTdqmBQ7k1cgFcJhvYuFAEgfA==","signatures":[{"sig":"MEUCIQDb+xgIlZ+QljxkjT/CkhL1y/+ZVim/1OosgBvgJ6mxPwIgIn6tEehdACHT+pOd43mo6rb045UNMWpAcuqZndhuQBI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":142019},"main":"dist/main.js","types":"dist/types.d.ts","module":"dist/module.js","source":"src/index.ts","gitHead":"278ab8e42a227e5b4c54b1d5e08286f29bd66653","scripts":{"dev":"parcel watch","test":"jest","build":"parcel build"},"_npmUser":{"name":"lukechanning","email":"luke@bitfoot.co"},"prettier":{"plugins":["@trivago/prettier-plugin-sort-imports","prettier-plugin-tailwindcss"],"importOrder":["","^@internal/(.*)$","^[./].*(?","^@internal/(.*)$","^[./].*(?","^@internal/(.*)$","^[./].*(?","^@internal/(.*)$","^[./].*(?","^@internal/(.*)$","^[./].*(?","^@internal/(.*)$","^[./].*(?","^@internal/(.*)$","^[./].*(?","^@internal/(.*)$","^[./].*(?","^@internal/(.*)$","^[./].*(? A Tailwind CSS + React component library built to be simple, effective, and maintainable.\n\n[![CI](https://github.com/bitfootco/skogen/actions/workflows/ci.yml/badge.svg)](https://github.com/bitfootco/skogen/actions/workflows/ci.yml)\n[![npm version](https://img.shields.io/npm/v/@bitfootco/skogen)](https://www.npmjs.com/package/@bitfootco/skogen)\n[![license](https://img.shields.io/npm/l/@bitfootco/skogen)](LICENSE)\n[![Storybook](https://img.shields.io/badge/storybook-live-ff4785)](https://bitfootco.github.io/skogen/)\n\n## Installation\n\n```bash\nnpm install @bitfootco/skogen\n```\n\n**Peer dependencies** — make sure these are already in your project:\n\n```bash\nnpm install react react-dom tailwindcss\n```\n\n## Quick Start\n\n### 1. Import the CSS\n\nAdd the Skogen stylesheet to your project's CSS entry file:\n\n```css\n@import \"tailwindcss\";\n@import \"@bitfootco/skogen/styles/index.css\";\n```\n\n### 2. Register the Tailwind plugin\n\nAdd the `@plugin` directive to your CSS entry file, after the imports:\n\n```css\n@import \"@bitfootco/skogen/styles/index.css\";\n@import \"tailwindcss\";\n@plugin \"@bitfootco/skogen/plugin\";\n```\n\n### 3. Use components\n\n```tsx\nimport { Button, InputField, Badge } from '@bitfootco/skogen';\n\nexport default function App() {\n return (\n
\n \n
\n );\n}\n```\n\n## Components\n\n| Component | Description | Key props |\n|-----------|-------------|-----------|\n| `Badge` | Status/label indicator | `color`, `variant` (solid/outlined/pill), `size`, `Icon` |\n| `Button` | Clickable action element | `color`, `variant` (solid/outlined/text), `size`, `disabled`, `Icon`, `LinkComponent` |\n| `Checkbox` | Boolean toggle input | `checked`, `label`, `onChange` |\n| `Divider` | Horizontal rule | `size` (sm/md/lg/xl) |\n| `InputField` | Text input with label | `label`, `value`, `error`, `size`, `type`, `disabled` |\n| `InputMask` | Formatted text input | `mask`, `value`, `onChange` |\n| `Select` | Dropdown selector | `options`, `selected`, `multiple`, `label` |\n| `TextArea` | Multi-line text input | `label`, `value`, `error`, `size`, `disabled`, `fullWidth` |\n| `Typography` | Text with consistent styles | `variant` (h1–h6/p), `color`, `component` |\n\n## Tailwind Plugin\n\nThe `skogen` Tailwind plugin generates utility classes for the default primary and secondary brand colours at all standard Tailwind shade steps (50–950):\n\n```\ntext-primary bg-primary border-primary\ntext-primary-500 bg-primary-500 border-primary-500\ntext-secondary bg-secondary border-secondary\n...\n```\n\nIt also generates:\n- `.text-default` — auto-contrasting text (white on dark, black on light)\n- `.text-button-default` / `.text-button-secondary` — button text contrast\n- `.bg-default` — default background\n\nDefault colours are blue-800 (`#1e40af`) for primary and violet-800 (`#5b21b6`) for secondary.\n\n### Palette Utility\n\nGenerate a Tailwind-compatible colour palette from any hex colour:\n\n```ts\nimport { paletteGenerator } from '@bitfootco/skogen';\n\nconst palette = paletteGenerator('#e11d48');\n// { '50': '#fff1f4', '100': '#ffe2e9', ..., '950': '#4c0010' }\n```\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## Security\n\nSee [SECURITY.md](SECURITY.md).\n\n## License\n\nMIT © [The Bitfoot Company](https://bitfoot.co)\n","readmeFilename":"README.md"}