{"_id":"@alphorriese/cib-style","_rev":"4-a527d2004a1dc960999a56300115e6b0","name":"@alphorriese/cib-style","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@alphorriese/cib-style","version":"1.0.0","keywords":["react","components","styled-components","atomic-design","ui-library","storybook"],"author":"","license":"ISC","_id":"@alphorriese/cib-style@1.0.0","maintainers":[{"name":"isaquebc","email":"isaquebc@gmail.com"}],"homepage":"https://github.com/alphorriese/cib-style#readme","bugs":{"url":"https://github.com/alphorriese/cib-style/issues"},"dist":{"shasum":"232ef3ad03a668a4659895f05942afcdf336ef3a","tarball":"https://registry.npmjs.org/@alphorriese/cib-style/-/cib-style-1.0.0.tgz","fileCount":214,"integrity":"sha512-/PH9EWYmsDKHxiWjDUFxaLv9ijhOPAyksgoy8aY2nGyABBT9F4/VtMRcfwOfh2cFJtvIrRwt74e4reRTWp7M/A==","signatures":[{"sig":"MEQCIDqC6oRKcyKIwmmxHjBDETYb8+mvK+dW+rvQkGwzeDnaAiAhpVdDT8E6nQE3QgqV3F0Z2doB58nOgfcO3MuMn7o9jQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":380077},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"7869a6b00c6bb64b068760e7818152acb049bfce","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc -p tsconfig.build.json","storybook":"storybook dev -p 6006","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"isaquebc","email":"isaquebc@gmail.com"},"repository":{"url":"git+https://github.com/alphorriese/cib-style.git","type":"git"},"_npmVersion":"10.9.2","description":"A reusable component library built with React, TypeScript, and styled-components following Atomic Design principles","directories":{},"_nodeVersion":"22.16.0","dependencies":{"react":"^19.2.0","react-dom":"^19.2.0","@mui/material":"^7.3.5","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","styled-components":"^6.1.19","@mui/icons-material":"^7.3.5"},"_hasShrinkwrap":false,"devDependencies":{"storybook":"^10.0.8","typescript":"^5.9.3","@types/react":"^19.2.6","@types/react-dom":"^19.2.3","@storybook/addon-docs":"^10.0.8","@types/styled-components":"^5.1.36","@storybook/react-webpack5":"^10.0.8","@storybook/addon-onboarding":"^10.0.8","@storybook/addon-webpack5-compiler-swc":"^4.0.2"},"_npmOperationalInternal":{"tmp":"tmp/cib-style_1.0.0_1764686800630_0.1923784930202963","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@alphorriese/cib-style","version":"1.0.1","keywords":["react","components","styled-components","atomic-design","ui-library","storybook"],"author":{},"license":"ISC","_id":"@alphorriese/cib-style@1.0.1","maintainers":[{"name":"isaquebc","email":"isaquebc@gmail.com"}],"homepage":"https://github.com/alphorriese/cib-style#readme","bugs":{"url":"https://github.com/alphorriese/cib-style/issues"},"dist":{"shasum":"5625328ce8537545be11d8212aa7af9c78cc893a","tarball":"https://registry.npmjs.org/@alphorriese/cib-style/-/cib-style-1.0.1.tgz","fileCount":233,"integrity":"sha512-XBjaR4+4mL7GbnpP6QD4PcL0tsWRspxPLsBPEmRP3Fa4qxYKpS8L9RG+2JNEpVjSW85aNRHeG/hxaoHL74azIA==","signatures":[{"sig":"MEYCIQD2PXKg5kBmV7wwoeqRTEhoVAHcR/Ou9i3m4A2BHei1JAIhAP5AptvVGZYMW3W8tc1kz7BVTlfW49y3VeO3TGT/jhSl","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":380077},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc -p tsconfig.build.json","storybook":"storybook dev -p 6006","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"isaquebc","email":"isaquebc@gmail.com"},"repository":{"url":"git+https://github.com/alphorriese/cib-style.git","type":"git"},"description":"A reusable component library built with React, TypeScript, and styled-components following Atomic Design principles","directories":{},"dependencies":{"react":"^19.2.0","react-dom":"^19.2.0","@mui/material":"^7.3.5","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","styled-components":"^6.1.19","@mui/icons-material":"^7.3.5"},"_hasShrinkwrap":false,"devDependencies":{"storybook":"^10.0.8","typescript":"^5.9.3","@types/react":"^19.2.6","@types/react-dom":"^19.2.3","@storybook/addon-docs":"^10.0.8","@types/styled-components":"^5.1.36","@storybook/react-webpack5":"^10.0.8","@storybook/addon-onboarding":"^10.0.8","@storybook/addon-webpack5-compiler-swc":"^4.0.2"},"_npmOperationalInternal":{"tmp":"tmp/cib-style_1.0.1_1764689181768_0.060489293432935076","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@alphorriese/cib-style","version":"1.0.2","keywords":["react","components","styled-components","atomic-design","ui-library","storybook"],"author":{},"license":"ISC","_id":"@alphorriese/cib-style@1.0.2","maintainers":[{"name":"isaquebc","email":"isaquebc@gmail.com"}],"homepage":"https://github.com/alphorriese/cib-style#readme","bugs":{"url":"https://github.com/alphorriese/cib-style/issues"},"dist":{"shasum":"7e4865a1798018842548c78609ab6eef05520b72","tarball":"https://registry.npmjs.org/@alphorriese/cib-style/-/cib-style-1.0.2.tgz","fileCount":233,"integrity":"sha512-Xo9S1af4n2MUxYMG2JHhXaWA5NVR1B6DB+QLdlkd8qhzzkea5zRC47cFzFNtWiPaAN9qwjS6Ys77LNgRtnztgw==","signatures":[{"sig":"MEUCIBc6x+448KFT676rPSb3+QgVWE1PFwUUXNieZtawcqe1AiEAiw2hhwPalyLwudrnFFqC9MJWOxM5f6Kp+uTcEq9LF4c=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":380181},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json","storybook":"storybook dev -p 6006","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"isaquebc","email":"isaquebc@gmail.com"},"repository":{"url":"git+https://github.com/alphorriese/cib-style.git","type":"git"},"description":"A reusable component library built with React, TypeScript, and styled-components following Atomic Design principles","directories":{},"dependencies":{"react":"^19.2.0","react-dom":"^19.2.0","@mui/material":"^7.3.5","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","styled-components":"^6.1.19","@mui/icons-material":"^7.3.5"},"_hasShrinkwrap":false,"devDependencies":{"storybook":"^10.0.8","tsc-alias":"^1.8.16","typescript":"^5.9.3","@types/react":"^19.2.6","@types/react-dom":"^19.2.3","@storybook/addon-docs":"^10.0.8","@types/styled-components":"^5.1.36","@storybook/react-webpack5":"^10.0.8","@storybook/addon-onboarding":"^10.0.8","@storybook/addon-webpack5-compiler-swc":"^4.0.2"},"_npmOperationalInternal":{"tmp":"tmp/cib-style_1.0.2_1764689491283_0.6457914615249449","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@alphorriese/cib-style","version":"1.0.3","description":"A reusable component library built with React, TypeScript, and styled-components following Atomic Design principles","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json","prepublishOnly":"npm run build","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/alphorriese/cib-style.git"},"bugs":{"url":"https://github.com/alphorriese/cib-style/issues"},"homepage":"https://github.com/alphorriese/cib-style#readme","keywords":["react","components","styled-components","atomic-design","ui-library","storybook"],"author":"","license":"ISC","dependencies":{"@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^7.3.5","@mui/material":"^7.3.5","react":"^19.2.0","react-dom":"^19.2.0","styled-components":"^6.1.19"},"devDependencies":{"@storybook/addon-docs":"^10.0.8","@storybook/addon-onboarding":"^10.0.8","@storybook/addon-webpack5-compiler-swc":"^4.0.2","@storybook/react-webpack5":"^10.0.8","@types/react":"^19.2.6","@types/react-dom":"^19.2.3","@types/styled-components":"^5.1.36","storybook":"^10.0.8","tsc-alias":"^1.8.16","typescript":"^5.9.3"},"_id":"@alphorriese/cib-style@1.0.3","gitHead":"6d8c4edfd2b3aefb4f5f34cfc6f029086e74ff83","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-tKPFrv+r64CNGPnSlJS0POarhYDgs2uP0acXBhw9ZaTeiQFe24wqNhUEcp6WQsQTWWe8GPEQHZ8ZwHBstZQ9xg==","shasum":"e6a0c4a5dac258861f05ffc655453c1df851da85","tarball":"https://registry.npmjs.org/@alphorriese/cib-style/-/cib-style-1.0.3.tgz","fileCount":214,"unpackedSize":381217,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDWEbRHeFvTmn74HnkkqX9TrIarDjDJYzrhynVpkJz1DQIhAP2OHQfBcIM+NS9D5iOjUxD/ODl2fG+NyEUtIvRoN9BO"}]},"_npmUser":{"name":"isaquebc","email":"isaquebc@gmail.com"},"directories":{},"maintainers":[{"name":"isaquebc","email":"isaquebc@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cib-style_1.0.3_1767639772367_0.6071657537136246"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-02T14:46:40.498Z","modified":"2026-01-05T19:02:52.783Z","1.0.0":"2025-12-02T14:46:40.822Z","1.0.1":"2025-12-02T15:26:21.980Z","1.0.2":"2025-12-02T15:31:31.491Z","1.0.3":"2026-01-05T19:02:52.567Z"},"bugs":{"url":"https://github.com/alphorriese/cib-style/issues"},"license":"ISC","homepage":"https://github.com/alphorriese/cib-style#readme","keywords":["react","components","styled-components","atomic-design","ui-library","storybook"],"repository":{"type":"git","url":"git+https://github.com/alphorriese/cib-style.git"},"description":"A reusable component library built with React, TypeScript, and styled-components following Atomic Design principles","maintainers":[{"name":"isaquebc","email":"isaquebc@gmail.com"}],"readme":"# CIB Style - Component Library\n\nA reusable component library built with **React**, **TypeScript**, and **styled-components** following the **Atomic Design** pattern.\n\n## Features\n\n- ⚛️ Built with React 19 and TypeScript\n- 💅 Styled with styled-components\n- 🎨 Comprehensive theming system with light/dark mode\n- 🌈 Theme-aware components using primary, secondary, background, and foreground colors\n- 📚 Documentation with Storybook\n- 🏗️ Atomic Design pattern (Atoms, Molecules, Organisms, Templates, Pages)\n- 🔄 Reusable across multiple frontend projects\n- 📦 Well-structured component architecture\n\n## Project Structure\n\n```\ncib-style/\n├── src/\n│   ├── components/\n│   │   ├── atoms/           # Basic building blocks (Input, Button, etc.)\n│   │   ├── molecules/       # Simple components made of atoms\n│   │   ├── organisms/       # Complex components made of molecules/atoms\n│   │   ├── templates/       # Page-level layouts\n│   │   └── pages/           # Specific page instances\n│   └── index.ts\n├── .storybook/              # Storybook configuration\n├── stories/                 # Additional stories\n└── package.json\n```\n\n## Component Structure\n\nEach component follows this structure:\n\n```\nComponentName/\n├── ComponentName.tsx        # Component logic and structure\n├── ComponentName.style.ts   # Styled-components CSS\n├── ComponentName.handler.ts # Handler functions (optional)\n├── ComponentName.stories.tsx # Storybook stories\n└── index.ts                # Exports\n```\n\n## Getting Started\n\n### Installation\n\n```bash\nnpm install\n```\n\n### Running Storybook\n\n```bash\nnpm run storybook\n```\n\nThis will start Storybook on `http://localhost:6006`\n\n### Building Storybook\n\n```bash\nnpm run build-storybook\n```\n\n## Available Components\n\n### Organisms\n\n- **FormBuilder** - A dynamic form generator that creates complete forms from configuration:\n  - Renders entire forms based on field configuration object\n  - Supports all input types: text, email, password, number, tel, url, search, date, checkbox, select, multiselect\n  - Built-in validation system:\n    - Required fields\n    - Min/max length\n    - Pattern matching\n    - Email validation\n    - URL validation\n    - Date range validation\n    - Custom validation functions\n  - Validates fields on blur event\n  - Disables submit button when form has errors\n  - Accepts `defaultValues` prop for pre-filling form data\n  - Manages form state internally\n  - `handleSubmit` callback receives complete form data object\n  - Optional reset button with `handleReset` callback\n  - Optional `handleChange` callback for real-time form data updates\n  - Full width and disabled states\n  - Reuses all existing atom components (Input, Button, Checkbox, DateInput, InputList, MultiSelect)\n\n### Molecules\n\n- **InputButton** - An input field with an adjacent button:\n  - Button can display text or Material UI icons\n  - Multiple button variants (primary, secondary, outline, ghost, danger)\n  - Multiple button sizes (small, medium, large)\n  - Supports Enter key to trigger button click\n  - Full width option\n  - Can disable input and button independently\n  - Custom event handlers for both input and button\n\n- **InputIcon** - An input field with an icon inside:\n  - Icon can be positioned left or right\n  - Supports Material UI icons\n  - Icon can be clickable (e.g., for password visibility toggle)\n  - Perfect for search bars, email inputs, password fields\n  - Full width option\n  - Custom event handlers including handleIconClick\n\n### Atoms\n\n- **Input** - A versatile text input component with support for:\n  - Multiple input types (text, password, email, number, tel, url, search)\n  - Label and helper text\n  - Error state and validation\n  - Disabled and read-only states\n  - Full width option\n  - Custom styling via styled-components\n\n- **Button** - A versatile button component with support for:\n  - Multiple variants (primary, secondary, outline, ghost, danger)\n  - Multiple sizes (small, medium, large)\n  - Loading state with spinner\n  - Disabled state\n  - Full width option\n  - Custom event handlers (handleClick, handleFocus, handleBlur)\n\n- **DateInput** - A date input with calendar picker:\n  - Brazilian date format (DD/MM/YYYY) for pt-BR locale\n  - US format (MM/DD/YYYY) for en-US locale\n  - Auto-detects browser locale\n  - Calendar popup for date selection\n  - Always stores dates in UTC\n  - Min/max date validation\n  - Custom event handlers (handleChange, handleBlur, handleFocus, handleCalendarOpen, handleCalendarClose)\n\n- **InputList** - An input field with a datalist for autocomplete suggestions:\n  - HTML5 datalist for native autocomplete\n  - Supports both string arrays and object arrays (with value/label)\n  - Users can select from suggestions or type freely\n  - Multiple input types (text, email, tel, url, search)\n  - handleSelect event triggered when user selects from the list\n  - Perfect for country selectors, language pickers, search suggestions\n  - Full width option\n  - Custom event handlers (handleChange, handleSelect, handleBlur, handleFocus)\n\n- **MultiSelect** - A multi-selection dropdown with chips:\n  - Select multiple options from a searchable dropdown\n  - Selected items displayed as removable chips\n  - Supports both string arrays and object arrays (with value/label)\n  - Keyboard navigation (Arrow keys, Enter, Escape, Backspace)\n  - Optional max selections limit\n  - Searchable/filterable dropdown\n  - Click outside to close\n  - Perfect for skills selection, tags, categories\n  - Full width option\n  - Custom event handlers (handleChange, handleSelect, handleRemove, handleInputChange)\n\n- **Checkbox** - A styled checkbox input with label:\n  - Custom styled checkbox with theme colors\n  - Label support with inline display\n  - Error and helper text\n  - Controlled and uncontrolled modes\n  - Disabled state\n  - Required field indicator\n  - Accessible with proper ARIA attributes\n  - Perfect for agreements, preferences, multi-selection forms\n  - Custom event handlers (handleChange, handleBlur, handleFocus)\n\n## Theming\n\nThe library includes a comprehensive theming system with built-in light and dark themes. All components automatically use theme colors.\n\n### Quick Start with Theme\n\n```tsx\nimport { ThemeProvider, Input } from 'cib-style';\n\nfunction App() {\n  return (\n    <ThemeProvider defaultMode=\"light\">\n      <Input\n        label=\"Email\"\n        type=\"email\"\n        placeholder=\"Enter your email\"\n      />\n    </ThemeProvider>\n  );\n}\n```\n\n### Theme Features\n\n- **Primary & Secondary Colors**: Customizable brand colors\n- **Background & Foreground**: Adaptive colors for light/dark modes\n- **Status Colors**: Success, warning, error, and info states\n- **Spacing & Typography**: Consistent sizing and fonts\n- **Shadows & Border Radius**: Elevation and rounded corners\n\n### Toggle Theme\n\n```tsx\nimport { useTheme } from 'cib-style';\n\nfunction ThemeToggle() {\n  const { mode, toggleTheme } = useTheme();\n  return (\n    <button onClick={toggleTheme}>\n      Switch to {mode === 'light' ? 'Dark' : 'Light'} Mode\n    </button>\n  );\n}\n```\n\nFor detailed theming documentation, see [THEME_GUIDE.md](THEME_GUIDE.md).\n\n## Using Components in Your Projects\n\nTo use these components in your projects, you can import them directly:\n\n### Using FormBuilder (Recommended)\n\nThe easiest way to create forms is using the FormBuilder component:\n\n```tsx\nimport { FormBuilder, ThemeProvider } from 'cib-style';\n\nfunction RegistrationPage() {\n  return (\n    <ThemeProvider defaultMode=\"light\">\n      <FormBuilder\n        fields={[\n          {\n            name: 'email',\n            type: 'email',\n            label: 'Email',\n            placeholder: 'Enter your email',\n            required: true,\n          },\n          {\n            name: 'password',\n            type: 'password',\n            label: 'Password',\n            placeholder: 'Create a password',\n            required: true,\n            minLength: 8,\n            validate: (value) => {\n              if (!/[A-Z]/.test(value)) return 'Must contain uppercase letter';\n              if (!/[0-9]/.test(value)) return 'Must contain a number';\n              return undefined;\n            },\n          },\n          {\n            name: 'birthDate',\n            type: 'date',\n            label: 'Date of Birth',\n            required: true,\n            locale: 'en-US',\n          },\n          {\n            name: 'skills',\n            type: 'multiselect',\n            label: 'Skills',\n            placeholder: 'Select your skills',\n            options: ['JavaScript', 'TypeScript', 'React', 'Node.js'],\n            maxSelections: 3,\n          },\n          {\n            name: 'terms',\n            type: 'checkbox',\n            label: 'I agree to the terms and conditions',\n            required: true,\n          },\n        ]}\n        submitButtonText=\"Register\"\n        showResetButton\n        handleSubmit={(data) => {\n          console.log('Form submitted:', data);\n          // data = { email: '...', password: '...', birthDate: Date, skills: [...], terms: true }\n        }}\n      />\n    </ThemeProvider>\n  );\n}\n```\n\n### Using Individual Components\n\nYou can also use components individually for more control:\n\n```tsx\nimport { Input, Button, DateInput, InputButton, InputList, MultiSelect, Checkbox, ThemeProvider } from 'cib-style';\nimport SearchIcon from '@mui/icons-material/Search';\n\nfunction MyForm() {\n  return (\n    <ThemeProvider defaultMode=\"light\">\n      <Input\n        label=\"Email\"\n        type=\"email\"\n        placeholder=\"Enter your email\"\n        handleChange={(value) => console.log(value)}\n      />\n\n      <InputList\n        label=\"Country\"\n        placeholder=\"Select or type a country\"\n        options={['Brazil', 'United States', 'Canada', 'Mexico']}\n        handleChange={(value) => console.log('Typing:', value)}\n        handleSelect={(value) => console.log('Selected:', value)}\n      />\n\n      <MultiSelect\n        label=\"Skills\"\n        placeholder=\"Select your skills...\"\n        options={['JavaScript', 'TypeScript', 'React', 'Node.js']}\n        handleChange={(values) => console.log('Selected skills:', values)}\n        maxSelections={3}\n      />\n\n      <DateInput\n        label=\"Birth Date\"\n        locale=\"pt-BR\"\n        handleChange={(date, formatted) => {\n          console.log('Date in UTC:', date);\n          console.log('Formatted:', formatted);\n        }}\n      />\n\n      <Checkbox\n        label=\"I agree to the terms and conditions\"\n        required\n        handleChange={(checked) => console.log('Agreed:', checked)}\n      />\n\n      <InputButton\n        label=\"Search\"\n        placeholder=\"Search products...\"\n        buttonIcon={<SearchIcon />}\n        handleButtonClick={(value) => console.log('Search:', value)}\n      />\n\n      <Button\n        variant=\"primary\"\n        handleClick={() => console.log('Submitted!')}\n      >\n        Submit\n      </Button>\n    </ThemeProvider>\n  );\n}\n```\n\n## TypeScript Path Aliases\n\nThe project uses TypeScript path aliases for cleaner imports:\n\n- `@components/*` - src/components/*\n- `@atoms/*` - src/components/atoms/*\n- `@molecules/*` - src/components/molecules/*\n- `@organisms/*` - src/components/organisms/*\n- `@templates/*` - src/components/templates/*\n- `@pages/*` - src/components/pages/*\n\n## Technologies\n\n- **React** 19.2.0\n- **TypeScript** 5.9.3\n- **styled-components** 6.1.19\n- **Storybook** 10.0.8\n\n## License\n\nISC\n","readmeFilename":"README.md"}