@grandbazar/ui-baza 1.2.1 → 1.2.3

package/README.md

@@ -140,51 +140,84 @@ Currently available components:
 - **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.
+- **Tooltip** - Lightweight tooltip component for contextual hints and helper text.
 
 More components coming soon! 🎉
 
 ## 🎨 Icons
 
-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
-- **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
+All icons are exported from `@grandbazar/ui-baza` and accept standard SVG props (`React.SVGProps<SVGSVGElement>`):
+
+- **IconArrow** - Arrow for direction and navigation.
+- **IconArrowCircle** - Arrow in a circle for compact actions.
+- **IconArrowCircleUp** - Up arrow in a circle for scroll-to-top actions.
+- **IconArrowDiagonal** - Diagonal arrow for external links.
+- **IconArrowUTurn** - U-turn arrow for return/undo style actions.
+- **IconBell** - Notification icon.
+- **IconBox** - Box/package icon for products and inventory.
+- **IconCalendar** - Date and schedule icon.
+- **IconCharacteristic** - Generic attribute/specification marker.
+- **IconCheck** - Confirmation checkmark.
+- **IconCheckCircle** - Checkmark in a circle for success states.
+- **IconChevron** - Chevron for dropdowns and directional hints.
+- **IconChevronDouble** - Double chevron for fast navigation.
+- **IconClock** - Time/duration icon.
+- **IconCollapse** - Collapse/expand state icon.
+- **IconCopy** - Copy/duplicate action icon.
+- **IconDots** - "More actions" menu icon.
+- **IconDownload** - Download action icon.
+- **IconEye** - Visibility and preview icon.
+- **IconFace** - Face/emotion icon for feedback states.
+- **IconFile** - File/document icon.
+- **IconFilters** - Filter controls icon.
+- **IconGear** - Settings/configuration icon.
+- **IconHanger** - Catalog/fashion category icon.
+- **IconHome** - Main page/navigation root icon.
+- **IconInfo** - Informational hint icon.
+- **IconLogOut** - Sign-out action icon.
+- **IconMail** - Email/message icon.
+- **IconMinus** - Remove/decrease action icon.
+- **IconOneCircle** - Number marker in a circle.
+- **IconPerson** - User/profile icon.
+- **IconPhone** - Phone/call icon.
+- **IconPlus** - Add/increase action icon.
+- **IconPrize** - Reward/bonus icon.
+- **IconProject** - Project/layers icon.
+- **IconQRCode** - QR code icon.
+- **IconRequest** - Request/workflow icon.
+- **IconResizeCorner** - Corner resize handle icon.
+- **IconScan** - Scan/recognition icon.
+- **IconSearch** - Search icon.
+- **IconShopping** - Shopping/cart icon.
+- **IconSort** - Sort icon.
+- **IconStar** - Favorite/rating icon.
+- **IconSticker** - Label/sticker icon.
+- **IconStop** - Stop/cancel action icon.
+- **IconSwitch** - Toggle/switch state icon.
+- **IconXMark** - Close/remove icon.
+- **IconXMarkCircle** - Close icon in a circle.
+- **IconLogo** - Brand icons namespace.
 
 ### Icon Variants
 
-Some icons provide multiple variants using Compound Components pattern:
+Some icons provide variants via Compound Components pattern, for example:
 
-- **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
+- **IconArrowCircleUp.Filled** - Filled scroll-up action variant.
+- **IconArrowDiagonal.Up** - Upward diagonal direction variant.
+- **IconEye.Off** - Visibility-off/hidden state variant.
+- **IconFace.Sad** - Negative feedback/emotion variant.
+- **IconFace.Smile** - Positive feedback/emotion variant.
+- **IconXMark.Small** - Compact close icon for tight layouts.
+
+Brand icons are available under `IconLogo`:
+
+- **IconLogo.Google** - Google brand mark.
+- **IconLogo.Telegram** - Telegram brand mark.
+- **IconLogo.VK** - VK brand mark.
+- **IconLogo.Yandex** - Yandex brand mark.
 
 ```tsx
-import { IconCheck, IconShopping, IconPerson, IconArrowCircle } from '@grandbazar/ui-baza';
+import { IconCheck, IconShopping, IconFace, IconLogo } from '@grandbazar/ui-baza';
 
 function Example() {
   return (
@@ -192,6 +225,8 @@ function Example() {
       <IconCheck style={{ color: 'green', width: 16, height: 16 }} />
       <IconShopping style={{ color: 'blue', width: 20, height: 20 }} />
       <IconShopping.Filled style={{ color: 'red', width: 24, height: 24 }} />
+      <IconFace.Sad style={{ color: '#6b7280', width: 24, height: 24 }} />
+      <IconLogo.Google style={{ width: 24, height: 24 }} />
     </div>
   );
 }