{"_id":"@emanuelrista/primo-ui-kit","name":"@emanuelrista/primo-ui-kit","dist-tags":{"latest":"1.1.4"},"versions":{"1.1.4":{"name":"@emanuelrista/primo-ui-kit","version":"1.1.4","type":"module","description":"Primo UI Kit - A comprehensive React component library with Tailwind CSS","author":{"name":"Primo Team"},"license":"MIT","keywords":["react","components","ui-kit","tailwind","design-system"],"main":"./dist/primo-ui-kit.umd.cjs","module":"./dist/primo-ui-kit.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/primo-ui-kit.js","require":"./dist/primo-ui-kit.umd.cjs"},"./styles":"./dist/primo-ui-kit.css"},"scripts":{"dev":"vite","build":"vite build && npm run build:types","build:types":"node scripts/generate-types.js","preview":"vite preview","prepublishOnly":"npm run build"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"devDependencies":{"@tailwindcss/postcss":"^4.1.16","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^5.1.0","autoprefixer":"^10.4.21","postcss":"^8.5.6","react":"^19.2.0","react-dom":"^19.2.0","tailwindcss":"^4.1.16","vite":"^7.1.12"},"_id":"@emanuelrista/primo-ui-kit@1.1.4","gitHead":"77a1957a653d05bd6f01cdf3441e016f80deba3d","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-sz/7R9uhO2pBgCiOANAIpvgz+imCtUHMbk48PjzP/htu4SGHvQVCLMyxUYz2GgBafDX6Geph4clo1lIg/G3w6Q==","shasum":"aecd757e7c353788163b4f86ac2b21d79b6ded08","tarball":"https://registry.npmjs.org/@emanuelrista/primo-ui-kit/-/primo-ui-kit-1.1.4.tgz","fileCount":6,"unpackedSize":159328,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQChK8ebR4GuDoY0TTDMfs52cvg5M4ZQyRuCB7kiipjNPwIhALqzosmiyMndHTuJqsiF23Il5Zmq3zj3mRimCQfg2wge"}]},"_npmUser":{"name":"emanuelrista","email":"e.rista@outlook.it"},"directories":{},"maintainers":[{"name":"emanuelrista","email":"e.rista@outlook.it"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/primo-ui-kit_1.1.4_1766419565516_0.22583408352390055"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-22T16:06:05.360Z","1.1.4":"2025-12-22T16:06:05.652Z","modified":"2025-12-22T16:06:06.059Z"},"maintainers":[{"name":"emanuelrista","email":"e.rista@outlook.it"}],"description":"Primo UI Kit - A comprehensive React component library with Tailwind CSS","keywords":["react","components","ui-kit","tailwind","design-system"],"author":{"name":"Primo Team"},"license":"MIT","readme":"# Primo UI Kit\n\nA comprehensive React component library built with Tailwind CSS, featuring customizable components with a consistent design system.\n\n## Installation\n\n```bash\nnpm install @emanuelrista/primo-ui-kit\n```\n\n## Setup\n\nImport the styles in your main application file:\n\n```javascript\nimport '@emanuelrista/primo-ui-kit/styles'\n```\n\nMake sure you have React 18+ or 19+ installed as a peer dependency.\n\n## Components\n\n### Button\n\nA versatile button component with multiple variants and sizes.\n\n```jsx\nimport { Button } from '@emanuelrista/primo-ui-kit'\n\nfunction App() {\n return (\n
\n \n \n \n
\n )\n}\n```\n\n**Props:**\n- `variant`: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'outline' | 'ghost'\n- `size`: 'xs' | 'sm' | 'md' | 'lg'\n- `disabled`: boolean\n- `fullWidth`: boolean\n- `onClick`: function\n\n### Modal\n\nA customizable modal dialog with backdrop and animations.\n\n```jsx\nimport { Modal, Button } from '@emanuelrista/primo-ui-kit'\nimport { useState } from 'react'\n\nfunction App() {\n const [isOpen, setIsOpen] = useState(false)\n\n return (\n <>\n \n setIsOpen(false)}\n title=\"My Modal\"\n size=\"md\"\n footer={\n \n }\n >\n

This is the modal content

\n \n \n )\n}\n```\n\n**Props:**\n- `isOpen`: boolean (required)\n- `onClose`: function (required)\n- `title`: string\n- `size`: 'sm' | 'md' | 'lg' | 'xl' | 'full'\n- `showCloseButton`: boolean\n- `closeOnBackdropClick`: boolean\n- `footer`: ReactNode\n\n### Bootbox\n\nA dialog component for displaying alerts, confirmations, and custom content with different visual variants.\n\n```jsx\nimport { Bootbox, Button } from '@emanuelrista/primo-ui-kit'\nimport { useState } from 'react'\n\nfunction App() {\n const [showAlert, setShowAlert] = useState(false)\n const [showConfirm, setShowConfirm] = useState(false)\n const [showCustom, setShowCustom] = useState(false)\n\n // Alert type - Simple message with OK button\n const handleAlertExample = () => {\n setShowAlert(true)\n }\n\n // Confirm type - Yes/No confirmation\n const handleConfirmExample = () => {\n setShowConfirm(true)\n }\n\n // Custom type - Custom content with actions\n const handleCustomExample = () => {\n setShowCustom(true)\n }\n\n return (\n <>\n \n \n \n\n {/* Alert Type */}\n setShowAlert(false)}\n type=\"alert\"\n variant=\"danger\"\n title=\"Azione non permessa\"\n message=\"Non รจ possibile spostare un appuntamento nel passato.\"\n closeText=\"OK\"\n />\n\n {/* Confirm Type */}\n setShowConfirm(false)}\n onConfirm={() => {\n console.log('Confirmed!')\n setShowConfirm(false)\n }}\n type=\"confirm\"\n variant=\"primary\"\n title=\"Conferma\"\n message=\"Confermi la modifica dell'appuntamento?\"\n confirmText=\"Conferma\"\n cancelText=\"Annulla\"\n />\n\n {/* Custom Type */}\n setShowCustom(false)}\n onConfirm={() => {\n console.log('Custom action confirmed')\n setShowCustom(false)\n }}\n type=\"custom\"\n variant=\"primary\"\n title=\"Modifica appuntamento\"\n confirmText=\"Conferma\"\n cancelText=\"Annulla\"\n >\n
\n

Conferma modifica appuntamento

\n \n \n
\n \n \n )\n}\n```\n\n**Props:**\n- `isOpen`: boolean (required) - Controls bootbox visibility\n- `onClose`: function (required) - Called when closing the bootbox\n- `onConfirm`: function - Called when confirm button is clicked (for confirm/custom types)\n- `type`: 'alert' | 'confirm' | 'custom' - Type of bootbox\n - `alert`: Shows title, message, and single OK button\n - `confirm`: Shows title, message, Cancel and Confirm buttons\n - `custom`: Shows title, custom content, Cancel and Confirm buttons\n- `variant`: 'primary' | 'warning' | 'info' | 'danger' - Visual style variant\n - `primary`: Violet header (#9985B5)\n - `warning`: Yellow header (#D4A017)\n - `info`: Light blue header (#5B9BD5)\n - `danger`: Red header (#D9534F)\n- `title`: string - Bootbox title displayed in colored header\n- `message`: string - Message to display (for alert/confirm types)\n- `children`: ReactNode - Custom content (for custom type)\n- `confirmText`: string - Text for confirm button (default: 'Conferma')\n- `cancelText`: string - Text for cancel button (default: 'Annulla')\n- `closeText`: string - Text for close button in alert type (default: 'OK')\n- `closeOnBackdropClick`: boolean - Allow closing by clicking backdrop (default: false)\n- `closeOnEscape`: boolean - Allow closing by pressing ESC key (default: false)\n\n### Input\n\nForm input component with label, validation, and helper text.\n\n```jsx\nimport { Input } from '@emanuelrista/primo-ui-kit'\n\nfunction App() {\n const [value, setValue] = useState('')\n\n return (\n setValue(e.target.value)}\n required\n helperText=\"We'll never share your email\"\n />\n )\n}\n```\n\n**Props:**\n- `label`: string\n- `type`: string\n- `value`: string\n- `onChange`: function\n- `error`: string\n- `helperText`: string\n- `required`: boolean\n- `disabled`: boolean\n- `fullWidth`: boolean\n- `size`: 'sm' | 'md' | 'lg'\n\n### Select\n\nDropdown select component with options.\n\n```jsx\nimport { Select } from '@emanuelrista/primo-ui-kit'\n\nfunction App() {\n const options = [\n { value: '1', label: 'Option 1' },\n { value: '2', label: 'Option 2' },\n { value: '3', label: 'Option 3' }\n ]\n\n return (\n setSelectedValue(e.target.value)}\n placeholder=\"Select...\"\n />\n )\n}\n```\n\n### TextArea\n\nMulti-line text input component.\n\n```jsx\nimport { TextArea } from '@emanuelrista/primo-ui-kit'\n\nfunction App() {\n return (\n setDescription(e.target.value)}\n />\n )\n}\n```\n\n### Table\n\nData table component with customizable columns and rows.\n\n```jsx\nimport { Table } from '@emanuelrista/primo-ui-kit'\n\nfunction App() {\n const columns = [\n { header: 'Name', align: 'left' },\n { header: 'Email', align: 'left' },\n { header: 'Status', align: 'center' }\n ]\n\n const data = [\n { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },\n { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' }\n ]\n\n return (\n (\n <>\n {item.name}\n {item.email}\n {item.status}\n \n )}\n hoverable\n striped\n />\n )\n}\n```\n\n### Card\n\nContainer component for grouping content.\n\n```jsx\nimport { Card } from '@emanuelrista/primo-ui-kit'\n\nfunction App() {\n return (\n Action}\n >\n

Card content goes here

\n \n )\n}\n```\n\n### Badge\n\nSmall status or label indicator.\n\n```jsx\nimport { Badge } from '@emanuelrista/primo-ui-kit'\n\nfunction App() {\n return (\n
\n Active\n Error\n Pending\n
\n )\n}\n```\n\n### Alert\n\nAlert messages for notifications and feedback.\n\n```jsx\nimport { Alert } from '@emanuelrista/primo-ui-kit'\n\nfunction App() {\n return (\n
\n \n Your action was completed successfully.\n \n console.log('Closed')}>\n An error occurred.\n \n
\n )\n}\n```\n\n### Spinner\n\nLoading spinner component.\n\n```jsx\nimport { Spinner } from '@emanuelrista/primo-ui-kit'\n\nfunction App() {\n return (\n
\n \n \n
\n )\n}\n```\n\n### Skeleton\n\nLoading placeholder component.\n\n```jsx\nimport { Skeleton } from '@emanuelrista/primo-ui-kit'\n\nfunction App() {\n return (\n
\n \n \n \n
\n )\n}\n```\n\n### SelectSearchable\n\nAdvanced select component with search functionality and multi-select support.\n\n```jsx\nimport { SelectSearchable } from '@emanuelrista/primo-ui-kit'\nimport { useState } from 'react'\n\nfunction App() {\n const [value, setValue] = useState('')\n const [multiValue, setMultiValue] = useState([])\n\n const options = [\n { value: '1', label: 'Option 1' },\n { value: '2', label: 'Option 2' },\n { value: '3', label: 'Option 3' },\n { value: '4', label: 'Option 4', disabled: true }\n ]\n\n return (\n
\n {/* Single Select */}\n setValue(e.target.value)}\n placeholder=\"Search or select...\"\n searchPlaceholder=\"Type to search...\"\n />\n\n {/* Multi Select */}\n setMultiValue(e.target.value)}\n multiple\n placeholder=\"Select multiple options\"\n />\n
\n )\n}\n```\n\n**Props:**\n- `label`: string\n- `options`: SelectOption[]\n- `value`: string | string[]\n- `onChange`: function\n- `error`: string\n- `helperText`: string\n- `disabled`: boolean\n- `required`: boolean\n- `fullWidth`: boolean\n- `placeholder`: string\n- `size`: 'sm' | 'md' | 'lg'\n- `searchPlaceholder`: string\n- `noResultsText`: string\n- `multiple`: boolean\n\n### Loader\n\nFlexible loading component that can display either a spinner or skeleton with different layout variants.\n\n```jsx\nimport { Loader } from '@emanuelrista/primo-ui-kit'\n\nfunction App() {\n return (\n
\n {/* Spinner variants */}\n \n \n\n {/* Overlay loader */}\n
\n \n
\n\n {/* Skeleton loader */}\n \n
\n )\n}\n```\n\n**Props:**\n- `type`: 'spinner' | 'skeleton'\n- `variant`: 'inline' | 'overlay' | 'block'\n- `size`: 'sm' | 'md' | 'lg' | 'xl'\n- `color`: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'white'\n- `text`: string\n- `skeletonProps`: SkeletonProps\n- `className`: string\n\n### Tooltip\n\nCustomizable tooltip component with multiple positions and variants.\n\n```jsx\nimport { Tooltip } from '@emanuelrista/primo-ui-kit'\n\nfunction App() {\n return (\n
\n \n \n \n\n \n \n \n
\n )\n}\n```\n\n**Props:**\n- `children`: ReactNode (required)\n- `content`: ReactNode (required)\n- `variant`: 'primary' | 'warning' | 'danger'\n- `title`: string\n- `position`: 'top' | 'bottom' | 'left' | 'right'\n- `className`: string\n\n### Accordion\n\nExpandable/collapsible content component that can be used standalone or as table rows.\n\n```jsx\nimport { Accordion } from '@emanuelrista/primo-ui-kit'\n\nfunction App() {\n return (\n
\n {/* Standalone accordion */}\n \n

This is the expanded content

\n
\n }\n defaultExpanded={false}\n onToggle={(isExpanded) => console.log('Expanded:', isExpanded)}\n >\n

Click to expand

\n \n\n {/* Table row accordion */}\n \n \n Additional row details\n }\n >\n \n \n \n \n
Column 1Column 2
\n \n )\n}\n```\n\n**Props:**\n- `children`: ReactNode (required)\n- `expandedContent`: ReactNode (required)\n- `defaultExpanded`: boolean\n- `asTableRow`: boolean\n- `className`: string\n- `arrowClassName`: string\n- `contentClassName`: string\n- `onToggle`: function\n\n### Checkbox\n\nCheckbox input component with label and validation.\n\n```jsx\nimport { Checkbox } from '@emanuelrista/primo-ui-kit'\nimport { useState } from 'react'\n\nfunction App() {\n const [checked, setChecked] = useState(false)\n\n return (\n setChecked(e.target.checked)}\n required\n helperText=\"You must accept to continue\"\n />\n )\n}\n```\n\n**Props:**\n- `label`: string\n- `checked`: boolean\n- `onChange`: function\n- `disabled`: boolean\n- `error`: boolean | string\n- `helperText`: string\n- `required`: boolean\n- `className`: string\n\n### Toggle\n\nToggle switch component for boolean states.\n\n```jsx\nimport { Toggle } from '@emanuelrista/primo-ui-kit'\nimport { useState } from 'react'\n\nfunction App() {\n const [enabled, setEnabled] = useState(false)\n\n return (\n \n )\n}\n```\n\n**Props:**\n- `checked`: boolean\n- `onChange`: function\n- `disabled`: boolean\n- `label`: string\n- `error`: string\n- `helperText`: string\n- `required`: boolean\n- `className`: string\n\n### DateTimePicker\n\nDate and time picker input component.\n\n```jsx\nimport { DateTimePicker } from '@emanuelrista/primo-ui-kit'\nimport { useState } from 'react'\n\nfunction App() {\n const [date, setDate] = useState('')\n const [datetime, setDatetime] = useState('')\n\n return (\n
\n {/* Date only */}\n setDate(e.target.value)}\n required\n />\n\n {/* Date and time */}\n setDatetime(e.target.value)}\n showTime\n fullWidth\n />\n
\n )\n}\n```\n\n**Props:**\n- `label`: string\n- `value`: string\n- `onChange`: function\n- `error`: string\n- `helperText`: string\n- `disabled`: boolean\n- `required`: boolean\n- `fullWidth`: boolean\n- `size`: 'sm' | 'md' | 'lg'\n- `showTime`: boolean\n- `className`: string\n\n### Toast\n\nToast notification component with auto-dismiss and customizable position.\n\n```jsx\nimport { Toast } from '@emanuelrista/primo-ui-kit'\nimport { useState } from 'react'\n\nfunction App() {\n const [showToast, setShowToast] = useState(false)\n\n return (\n
\n \n\n {showToast && (\n setShowToast(false)}\n position=\"top-right\"\n duration={5000}\n autoClose\n >\n Your changes have been saved successfully.\n \n )}\n
\n )\n}\n```\n\n**Props:**\n- `children`: ReactNode (required)\n- `variant`: 'success' | 'danger' | 'warning' | 'info'\n- `title`: string\n- `onClose`: function\n- `showIcon`: boolean\n- `className`: string\n- `duration`: number (milliseconds, default: 5000)\n- `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'\n- `autoClose`: boolean\n\n### InfoBox\n\nSimple informational box component for displaying contextual information.\n\n```jsx\nimport { InfoBox } from '@emanuelrista/primo-ui-kit'\n\nfunction App() {\n return (\n
\n \n

This is an informational message.

\n \n\n \n

Please review this carefully before proceeding.

\n \n\n \n

This action requires administrator privileges.

\n \n
\n )\n}\n```\n\n**Props:**\n- `children`: ReactNode (required)\n- `variant`: 'info' | 'warning' | 'danger'\n- `className`: string\n\n### Navbar\n\nNavigation bar container component.\n\n```jsx\nimport { Navbar, NavbarItem } from '@emanuelrista/primo-ui-kit'\n\nfunction App() {\n const [activeTab, setActiveTab] = useState('home')\n\n return (\n \n setActiveTab('home')}\n >\n Home\n \n setActiveTab('about')}\n >\n About\n \n setActiveTab('contact')}\n >\n Contact\n \n \n )\n}\n```\n\n**Navbar Props:**\n- `children`: ReactNode (required)\n- `className`: string\n\n**NavbarItem Props:**\n- `children`: ReactNode (required)\n- `active`: boolean\n- `onClick`: function\n- `href`: string\n- `className`: string\n\n## Theme Customization\n\nThe UI kit uses a comprehensive color system that can be customized. The default colors are:\n\n- **Primary**: #9985B5 (Purple)\n- **Secondary**: #B6C224 (Lime)\n- **Danger**: #D9534F (Red)\n- **Warning**: #D4A017 (Gold)\n- **Success**: #5A9E6F (Green)\n- **Info**: #5B9BD5 (Blue)\n\nAll components are built with customization in mind. You can:\n\n1. Override styles using the `className` prop\n2. Use Tailwind utility classes directly\n3. Customize the theme by overriding CSS variables\n\n## TypeScript Support\n\nFull TypeScript support is included with type definitions for all components.\n\n```typescript\nimport {\n ButtonProps,\n ModalProps,\n TableProps,\n InputProps,\n SelectProps,\n SelectSearchableProps,\n TextAreaProps,\n CardProps,\n BadgeProps,\n AlertProps,\n SpinnerProps,\n SkeletonProps,\n LoaderProps,\n BootboxProps,\n TooltipProps,\n AccordionProps,\n CheckboxProps,\n ToggleProps,\n DateTimePickerProps,\n ToastProps,\n InfoBoxProps,\n NavbarProps,\n NavbarItemProps\n} from '@emanuelrista/primo-ui-kit'\n```\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## License\n\nMIT\n# primo-lab-ui-kit\n","readmeFilename":"README.md","_rev":"1-7f708fc820c5e0458524d4339c2e2886"}