{"_id":"@_gmdev/skelly","name":"@_gmdev/skelly","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@_gmdev/skelly","version":"1.0.0","description":"A collection of plug & play skeleton components for React","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/types/index.d.ts","publishConfig":{"access":"public"},"scripts":{"build":"rollup -c","test":"vitest run","test:watch":"vitest","storybook":"storybook dev -p 6006","build-storybook":"storybook build","prepublishOnly":"npm run build"},"keywords":["skeleton","react","loading","placeholder","lazy-load","skeleton-loader"],"author":"","license":"MIT","peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@storybook/addon-essentials":"^8.1.0","@storybook/react":"^8.1.0","@storybook/react-vite":"^8.1.0","@testing-library/jest-dom":"^6.4.2","@testing-library/react":"^15.0.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","jsdom":"^24.0.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^4.14.0","rollup-plugin-postcss":"^4.0.2","storybook":"^8.1.0","tslib":"^2.6.2","typescript":"^5.4.0","vitest":"^1.5.0"},"_id":"@_gmdev/skelly@1.0.0","gitHead":"9835de9509483ee3d23121cad90f256e2a247acf","_nodeVersion":"24.4.1","_npmVersion":"11.4.2","dist":{"integrity":"sha512-Jb+dXrQyEiyOGrW6SKWsD2D7NHfBdGQ3ax7UI7qsGVWXSF8gxcPOtOmF3CsuKJNlrt9Io/0sxQHqnrhA2mAjdA==","shasum":"b3e0e0781cd85f46e58d1b068265d285eecc4214","tarball":"https://registry.npmjs.org/@_gmdev/skelly/-/skelly-1.0.0.tgz","fileCount":43,"unpackedSize":145829,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDtyhn05aBqMr6nef4tNXkOLohkf8y3sDtV0O22mxUoEAiEAz295cwNILIGZavF/1a5SfrAclvsmIt9MQWZqQVB9KiE="}]},"_npmUser":{"name":"_gmdev","email":"gabriele.marconetta@gmail.com"},"directories":{},"maintainers":[{"name":"_gmdev","email":"gabriele.marconetta@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/skelly_1.0.0_1779515934932_0.6084385300917439"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-23T05:58:54.756Z","1.0.0":"2026-05-23T05:58:55.067Z","modified":"2026-05-23T05:58:55.290Z"},"maintainers":[{"name":"_gmdev","email":"gabriele.marconetta@gmail.com"}],"description":"A collection of plug & play skeleton components for React","keywords":["skeleton","react","loading","placeholder","lazy-load","skeleton-loader"],"license":"MIT","readme":"# Skelly\n\nA collection of 13 plug & play skeleton components for React. Use them as placeholders while lazy-loading content.\n\n## Installation\n\n```bash\nnpm install @_gmdev/skelly\n```\n\n## Components\n\n### Basic\n\n| Component | Description |\n|-----------|-------------|\n| `SkellyImage` | Square grey placeholder |\n| `SkellyCard` | Card with image area + 3 text lines |\n| `SkellyText` | Paragraph with 4 lines of decreasing width |\n| `SkellyButton` | Rounded rectangle (button) |\n| `SkellyInput` | Rounded rectangle (input field) |\n\n### Composite\n\n| Component | Description |\n|-----------|-------------|\n| `SkellyList` | 3 rows with avatar + 2 text lines each |\n| `SkellyTable` | Header row + 3 data rows (4 columns) |\n| `SkellyNavbar` | Logo + 3 link placeholders |\n\n### Advanced\n\n| Component | Description |\n|-----------|-------------|\n| `SkellyChart` | 5 vertical bars of varying heights + baseline |\n| `SkellyCarousel` | Slide area + 2 arrow circles + 3 dots |\n| `SkellyProfile` | Avatar (80px) + name + bio (2 lines) + 3 stats |\n| `SkellyComment` | Small avatar + speech bubble with 3 lines |\n| `SkellyTimeline` | Vertical line with 3 nodes (dot + 2 text lines) |\n\n## Usage\n\n```tsx\nimport { SkellyCard, SkellyTimeline, SkellyProfile } from '@_gmdev/skelly';\n\nfunction MyComponent() {\n  return (\n    <>\n      <SkellyCard animation=\"shiny\" speed={1500} />\n      <SkellyTimeline animation=\"flicker\" speed={2000} />\n      <SkellyProfile animation=\"shiny\" />\n    </>\n  );\n}\n```\n\n## Props\n\nAll components accept the same props:\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `border` | `string` | `'none'` | CSS border shorthand |\n| `background` | `string` | `'#e0e0e0'` | Background color |\n| `color` | `string` | — | Override color for skeleton elements |\n| `animation` | `'shiny' \\| 'flicker' \\| 'none'` | `'none'` | Animation type |\n| `speed` | `number` | `1500` | Animation duration in ms (shiny & flicker only) |\n\n## Animations\n\n- **shiny** — A diagonal light sweep that passes over the element\n- **flicker** — Opacity oscillation (0.5 → 1.0 → 0.5)\n- **none** — No animation (default)\n\n## Examples\n\n### Chart with shiny animation\n\n```tsx\n<SkellyChart animation=\"shiny\" speed={1500} color=\"#d4d4d4\" />\n```\n\n### Timeline with flicker\n\n```tsx\n<SkellyTimeline animation=\"flicker\" speed={2000} />\n```\n\n### Custom styled profile\n\n```tsx\n<SkellyProfile\n  background=\"#f0f0f0\"\n  border=\"2px solid #ccc\"\n  animation=\"flicker\"\n  speed={2000}\n/>\n```\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Run tests\nnpm test\n\n# Start Storybook\nnpm run storybook\n\n# Build the package\nnpm run build\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-ba7062445e1150f11cb6068d4fdfb913"}