@grandbazar/ui-baza 1.0.4 → 1.1.0

package/README.md

@@ -124,10 +124,17 @@ npm run build:lib
 
 Currently available components:
 
+- **Badge** - Compact label component for statuses, counts, and tags with various visual styles.
+- **Breadcrumbs** - Navigation component showing the user's location within the site hierarchy with support for custom separators. Implemented using Compound Components pattern.
 - **Button** - Flexible button component with various styles and states.
 - **Checkbox** - Custom checkbox with state support, custom labels, and full styling.
+- **Chip** - Compact element for displaying tags, filters, or selections.
+- **DatePicker** - Flexible date picker component with calendar interface, date ranges, and internationalization support. Implemented using Compound Components pattern.
+- **DropdownMenu** - Flexible dropdown menu with support for submenus, custom triggers, and rich content. Implemented using Compound Components pattern.
 - **RadioButton** - Radio button component for single selection from multiple options.
 - **Switch** - Toggle switch component for binary on/off states with smooth animations.
+- **Tag** - Elements for visual marking using keywords. Help with quick recognition, differentiation, and sorting or navigation through content.
+- **TextField** - Input field component with validation, labels, and various input types support. Implemented using Compound Components pattern.
 - **Pagination** - Navigation component for multi-page content with customizable appearance and behavior.
 
 More components coming soon! 🎉
@@ -136,19 +143,33 @@ More components coming soon! 🎉
 
 Basic set of SVG icons for common UI needs:
 
+- **IconCalendar** - Calendar icon for date pickers and scheduling
 - **IconCheck** - Checkmark icon for confirmations and completed states
-- **IconChevron** - Arrow/chevron icon for navigation and dropdowns  
+- **IconChevron** - Arrow/chevron icon for navigation and dropdowns
+- **IconGear** - Settings/gear icon for configuration and preferences
 - **IconMinus** - Minus icon for decrements and removal actions
 - **IconPlus** - Plus icon for increments and add actions
+- **IconShopping** - Shopping bag/cart icon for e-commerce and shopping features
+- **IconXMark** - Close/remove icon for dismissing and deleting
+
+### Icon Variants
+
+Some icons provide multiple variants using Compound Components pattern:
+
+- **IconShopping.Filled** - Filled version of the shopping icon for active/selected states
+- **IconXMark.Small** - Smaller version of the close icon for compact UI elements
 
 ```tsx
-import { IconCheck, IconChevron } from '@grandbazar/ui-baza';
+import { IconCheck, IconShopping, IconXMark } from '@grandbazar/ui-baza';
 
 function Example() {
   return (
     <div>
       <IconCheck style={{ color: 'green', width: 16, height: 16 }} />
-      <IconChevron style={{ color: 'blue', width: 20, height: 20 }} />
+      <IconShopping style={{ color: 'blue', width: 24, height: 24 }} />
+      <IconShopping.Filled style={{ color: 'blue', width: 24, height: 24 }} />
+      <IconXMark style={{ width: 24, height: 24 }} />
+      <IconXMark.Small style={{ width: 20, height: 20 }} />
     </div>
   );
 }