@grandbazar/ui-baza 1.0.5 → 1.1.1

package/README.md

@@ -124,11 +124,22 @@ 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.
+- **Counter** - Compact visual indicator for displaying short numeric values like notification counts, unread messages, or status badges.
+- **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.
+- **Search** - Search input field with icon and clear button. Supports two modes: default (inline icon) and custom (separate search button).
+- **SegmentControl** - Segmented control component for single selection from multiple options with visual button group interface. Implemented using Compound Components pattern.
 - **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.
+- **ProgressBar** - Progress indicator component with linear and step-based variants. Supports multiple sizes and full ARIA accessibility. Implemented using Compound Components pattern.
 
 More components coming soon! 🎉
 
@@ -136,19 +147,51 @@ More components coming soon! 🎉
 
 Basic set of SVG icons for common UI needs:
 
+- **IconArrow** - Arrow icon for navigation and directional indicators
+- **IconArrowCircle** - Arrow inside circle for navigation buttons
+- **IconArrowDiagonal** - Diagonal arrow for external links and redirects
+- **IconArrowUTurn** - U-turn arrow for undo/return actions
+- **IconCalendar** - Calendar icon for date pickers and scheduling
+- **IconCharacteristic** - Pattern icon for characteristics and properties
 - **IconCheck** - Checkmark icon for confirmations and completed states
-- **IconChevron** - Arrow/chevron icon for navigation and dropdowns  
+- **IconChevron** - Arrow/chevron icon for navigation and dropdowns
+- **IconChevronDouble** - Double chevron for fast navigation (first/last page)
+- **IconCollapse** - Collapse icon for expanding/collapsing content
+- **IconFilters** - Filter icon for filtering and sorting options
+- **IconGear** - Settings/gear icon for configuration and preferences
+- **IconLogOut** - Logout icon for sign out actions
 - **IconMinus** - Minus icon for decrements and removal actions
+- **IconPerson** - Person/user icon for profiles and accounts
 - **IconPlus** - Plus icon for increments and add actions
+- **IconPrize** - Prize/gift icon for rewards and bonuses
+- **IconProject** - Project/layers icon for project management
+- **IconQRCode** - QR code icon for scanning and sharing
+- **IconRequest** - Request/branch icon for requests and workflows
+- **IconShopping** - Shopping bag/cart icon for e-commerce and shopping features
+- **IconSort** - Sort icon for sorting options
+- **IconXMark** - Close/remove icon for dismissing and deleting
+
+### Icon Variants
+
+Some icons provide multiple variants using Compound Components pattern:
+
+- **IconArrowCircle.Filled** - Filled version of the arrow circle icon
+- **IconArrowDiagonal.Up** - Upward diagonal arrow variant
+- **IconArrowUTurn.Up** - Upward U-turn arrow variant
+- **IconPerson.Filled** - Filled version of the person icon for active states
+- **IconPrize.Filled** - Filled version of the prize icon for active states
+- **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, IconPerson, IconArrowCircle } 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: 20, height: 20 }} />
+      <IconShopping.Filled style={{ color: 'red', width: 24, height: 24 }} />
     </div>
   );
 }