@grandbazar/ui-baza 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -5
- package/dist/index.cjs +788 -198
- package/dist/index.d.ts +290 -44
- package/dist/index.js +771 -201
- package/dist/style.css +543 -277
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -129,13 +129,17 @@ Currently available components:
|
|
|
129
129
|
- **Button** - Flexible button component with various styles and states.
|
|
130
130
|
- **Checkbox** - Custom checkbox with state support, custom labels, and full styling.
|
|
131
131
|
- **Chip** - Compact element for displaying tags, filters, or selections.
|
|
132
|
+
- **Counter** - Compact visual indicator for displaying short numeric values like notification counts, unread messages, or status badges.
|
|
132
133
|
- **DatePicker** - Flexible date picker component with calendar interface, date ranges, and internationalization support. Implemented using Compound Components pattern.
|
|
133
134
|
- **DropdownMenu** - Flexible dropdown menu with support for submenus, custom triggers, and rich content. Implemented using Compound Components pattern.
|
|
134
135
|
- **RadioButton** - Radio button component for single selection from multiple options.
|
|
136
|
+
- **Search** - Search input field with icon and clear button. Supports two modes: default (inline icon) and custom (separate search button).
|
|
137
|
+
- **SegmentControl** - Segmented control component for single selection from multiple options with visual button group interface. Implemented using Compound Components pattern.
|
|
135
138
|
- **Switch** - Toggle switch component for binary on/off states with smooth animations.
|
|
136
139
|
- **Tag** - Elements for visual marking using keywords. Help with quick recognition, differentiation, and sorting or navigation through content.
|
|
137
140
|
- **TextField** - Input field component with validation, labels, and various input types support. Implemented using Compound Components pattern.
|
|
138
141
|
- **Pagination** - Navigation component for multi-page content with customizable appearance and behavior.
|
|
142
|
+
- **ProgressBar** - Progress indicator component with linear and step-based variants. Supports multiple sizes and full ARIA accessibility. Implemented using Compound Components pattern.
|
|
139
143
|
|
|
140
144
|
More components coming soon! 🎉
|
|
141
145
|
|
|
@@ -143,33 +147,51 @@ More components coming soon! 🎉
|
|
|
143
147
|
|
|
144
148
|
Basic set of SVG icons for common UI needs:
|
|
145
149
|
|
|
150
|
+
- **IconArrow** - Arrow icon for navigation and directional indicators
|
|
151
|
+
- **IconArrowCircle** - Arrow inside circle for navigation buttons
|
|
152
|
+
- **IconArrowDiagonal** - Diagonal arrow for external links and redirects
|
|
153
|
+
- **IconArrowUTurn** - U-turn arrow for undo/return actions
|
|
146
154
|
- **IconCalendar** - Calendar icon for date pickers and scheduling
|
|
155
|
+
- **IconCharacteristic** - Pattern icon for characteristics and properties
|
|
147
156
|
- **IconCheck** - Checkmark icon for confirmations and completed states
|
|
148
157
|
- **IconChevron** - Arrow/chevron icon for navigation and dropdowns
|
|
158
|
+
- **IconChevronDouble** - Double chevron for fast navigation (first/last page)
|
|
159
|
+
- **IconCollapse** - Collapse icon for expanding/collapsing content
|
|
160
|
+
- **IconFilters** - Filter icon for filtering and sorting options
|
|
149
161
|
- **IconGear** - Settings/gear icon for configuration and preferences
|
|
162
|
+
- **IconLogOut** - Logout icon for sign out actions
|
|
150
163
|
- **IconMinus** - Minus icon for decrements and removal actions
|
|
164
|
+
- **IconPerson** - Person/user icon for profiles and accounts
|
|
151
165
|
- **IconPlus** - Plus icon for increments and add actions
|
|
166
|
+
- **IconPrize** - Prize/gift icon for rewards and bonuses
|
|
167
|
+
- **IconProject** - Project/layers icon for project management
|
|
168
|
+
- **IconQRCode** - QR code icon for scanning and sharing
|
|
169
|
+
- **IconRequest** - Request/branch icon for requests and workflows
|
|
152
170
|
- **IconShopping** - Shopping bag/cart icon for e-commerce and shopping features
|
|
171
|
+
- **IconSort** - Sort icon for sorting options
|
|
153
172
|
- **IconXMark** - Close/remove icon for dismissing and deleting
|
|
154
173
|
|
|
155
174
|
### Icon Variants
|
|
156
175
|
|
|
157
176
|
Some icons provide multiple variants using Compound Components pattern:
|
|
158
177
|
|
|
178
|
+
- **IconArrowCircle.Filled** - Filled version of the arrow circle icon
|
|
179
|
+
- **IconArrowDiagonal.Up** - Upward diagonal arrow variant
|
|
180
|
+
- **IconArrowUTurn.Up** - Upward U-turn arrow variant
|
|
181
|
+
- **IconPerson.Filled** - Filled version of the person icon for active states
|
|
182
|
+
- **IconPrize.Filled** - Filled version of the prize icon for active states
|
|
159
183
|
- **IconShopping.Filled** - Filled version of the shopping icon for active/selected states
|
|
160
184
|
- **IconXMark.Small** - Smaller version of the close icon for compact UI elements
|
|
161
185
|
|
|
162
186
|
```tsx
|
|
163
|
-
import { IconCheck, IconShopping,
|
|
187
|
+
import { IconCheck, IconShopping, IconPerson, IconArrowCircle } from '@grandbazar/ui-baza';
|
|
164
188
|
|
|
165
189
|
function Example() {
|
|
166
190
|
return (
|
|
167
191
|
<div>
|
|
168
192
|
<IconCheck style={{ color: 'green', width: 16, height: 16 }} />
|
|
169
|
-
<IconShopping style={{ color: 'blue', width:
|
|
170
|
-
<IconShopping.Filled style={{ color: '
|
|
171
|
-
<IconXMark style={{ width: 24, height: 24 }} />
|
|
172
|
-
<IconXMark.Small style={{ width: 20, height: 20 }} />
|
|
193
|
+
<IconShopping style={{ color: 'blue', width: 20, height: 20 }} />
|
|
194
|
+
<IconShopping.Filled style={{ color: 'red', width: 24, height: 24 }} />
|
|
173
195
|
</div>
|
|
174
196
|
);
|
|
175
197
|
}
|