{"_id":"@albanese-ui/hero","name":"@albanese-ui/hero","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@albanese-ui/hero","version":"0.0.1","main":"./index.js","types":"./index.d.ts","exports":{".":{"import":"./index.mjs","require":"./index.js"}},"_id":"@albanese-ui/hero@0.0.1","description":"Il componente Hero è un elemento riutilizzabile per creare una sezione visivamente accattivante in cima alla pagina. È ideale per evidenziare il titolo principale di una pagina con un sottotitolo e azioni opzionali, come pulsanti.","_integrity":"sha512-FqKAmsMME4YqTowtBbkm1XzYpbd1lPCOO3PHYmsBEJrrwR5zzTHcDH2SumdO+oEH6SsvHtlWu716gG+SuUKuqw==","_resolved":"/tmp/3d76554a5ad646117b0341f171c5c905/albanese-ui-hero-0.0.1.tgz","_from":"file:albanese-ui-hero-0.0.1.tgz","_nodeVersion":"20.18.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-FqKAmsMME4YqTowtBbkm1XzYpbd1lPCOO3PHYmsBEJrrwR5zzTHcDH2SumdO+oEH6SsvHtlWu716gG+SuUKuqw==","shasum":"b12d0f2bab6f8c484fa3456eafeab419294c7743","tarball":"https://registry.npmjs.org/@albanese-ui/hero/-/hero-0.0.1.tgz","fileCount":13,"unpackedSize":9312,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDUz56PaKht+kBhNU+e7NeEN28gTjXD5PcaJ69S17RaSAIgYQUPsUp/uc54J0TLaWnsRoC6tdP+11tqHnT+O3Epvq8="}]},"_npmUser":{"name":"martinalbanese","email":"albanesemartinax@gmail.com"},"directories":{},"maintainers":[{"name":"martinalbanese","email":"albanesemartinax@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/hero_0.0.1_1738256148429_0.8173717213064442"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-30T16:55:48.335Z","0.0.1":"2025-01-30T16:55:48.649Z","modified":"2025-01-30T16:55:48.961Z"},"maintainers":[{"name":"martinalbanese","email":"albanesemartinax@gmail.com"}],"description":"Il componente Hero è un elemento riutilizzabile per creare una sezione visivamente accattivante in cima alla pagina. È ideale per evidenziare il titolo principale di una pagina con un sottotitolo e azioni opzionali, come pulsanti.","readme":"# Componente Hero - @albanese-ui/hero\n\nIl componente Hero è un elemento riutilizzabile per creare una sezione visivamente accattivante in cima alla pagina. È ideale per evidenziare il titolo principale di una pagina con un sottotitolo e azioni opzionali, come pulsanti.\n\n## Installazione\n\nPer utilizzare il componente nella tua applicazione, assicurati di aver installato la libreria:\n\n```bash\nnpm install @albanese-ui/hero\n```\n\n## Importazione\n\nPuoi importare il componente direttamente dal pacchetto:\n\n```tsx\nimport { Hero } from '@albanese-ui/hero';\n```\n\n## Come utilizzare il componente\n\nEsempio base:\n\n```tsx\nimport { Hero } from '@albanese-ui/hero';\nimport { Button } from '@albanese-ui/button';\n\nfunction App() {\n  return (\n    <div>\n      <Hero \n        title=\"Benvenuti in Albanese UI!\" \n        subtitle=\"Una libreria di componenti UI facili da usare\"\n        theme=\"dark\"\n      >\n        <Button label=\"Scopri di più\" variant=\"solid\" />\n        <Button label=\"Contattaci\" variant=\"outline\" />\n      </Hero>\n    </div>\n  );\n}\n\nexport default App;\n```\n\n## Proprietà del componente\n\n| **Prop**   | **Tipo**            | **Default** | **Descrizione**                                                                                  |\n|------------|---------------------|-------------|--------------------------------------------------------------------------------------------------|\n| `title`    | `string`            | `-`         | Il titolo principale da visualizzare nella sezione Hero.\n| `subtitle`    | `string`            | `-`         | Il sottotitolo da visualizzare sotto il titolo.                                      |\n| `theme`    | `'light' \\| 'dark'` | `'light'`   | La variante del tema per la hero:                                                              |\n|            |                     |             | - **`light`**: tema chiaro con sfondo chiaro e testo scuro (default).                           |\n|            |                     |             | - **`dark`**: tema scuro con sfondo scuro e testo chiaro.                                       |\n| `children` | `React.ReactNode`   | `null`      | Elementi opzionali da aggiungere sotto il titolo e sottotitolo, come pulsanti o altre azioni.  |\n\n## Personalizzazione\n\nGli stili possono essere personalizzati modificando il file CSS Module associato al componente (`hero.module.css`).\n","readmeFilename":"README.md"}