@zentrades-ui/components 0.2.0 → 0.2.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/CHANGELOG.md +65 -0
- package/README.md +38 -2
- package/dist/components.d.ts +2 -44
- package/dist/components.js +225 -604
- package/dist/components.js.map +1 -1
- package/dist/icons.d.ts +1 -47
- package/dist/icons.js +2 -441
- package/dist/icons.js.map +1 -1
- package/dist/index.d.ts +2 -44
- package/dist/index.js +225 -604
- package/dist/index.js.map +1 -1
- package/dist/theme.d.ts +1 -0
- package/package.json +8 -5
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# @zentrades-ui/components
|
|
2
|
+
|
|
3
|
+
## 0.2.2
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- **Improved Checkbox alignment**: Checkbox is now center-aligned when no helper text is provided, and top-aligned (with label) when helper text exists.
|
|
8
|
+
|
|
9
|
+
- **Checkbox now uses Icons library**: Replaced inline SVG icons with `CheckIcon` and `MinusIcon` from `@zentrades-ui/icons` for consistency.
|
|
10
|
+
|
|
11
|
+
- **Added `@zentrades-ui/icons` as dependency**: Icons are now sourced from the dedicated icons package.
|
|
12
|
+
|
|
13
|
+
- **Icons re-exported**: All icons from `@zentrades-ui/icons` are re-exported via `@zentrades-ui/components/icons` for backwards compatibility.
|
|
14
|
+
|
|
15
|
+
## 0.2.1
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Fixed npm package to include README.md and CHANGELOG.md files
|
|
20
|
+
|
|
21
|
+
## 0.2.0
|
|
22
|
+
|
|
23
|
+
### Minor Changes
|
|
24
|
+
|
|
25
|
+
- **Standardized form component API**: All form components now share a consistent API for labels, validation, and helper text.
|
|
26
|
+
|
|
27
|
+
Common props across Input, TextArea, Checkbox, and Switch:
|
|
28
|
+
- `label` - Label text displayed with the input
|
|
29
|
+
- `required` - Shows required indicator (*)
|
|
30
|
+
- `helperText` - Helper text displayed below the input
|
|
31
|
+
- `error` - Error state styling
|
|
32
|
+
- `errorMessage` - Error message (replaces helperText when error is true)
|
|
33
|
+
|
|
34
|
+
- **Enhanced Checkbox component**:
|
|
35
|
+
- Added `required`, `error`, `errorMessage`, and `helperText` props
|
|
36
|
+
- Added `aria-invalid` for accessibility
|
|
37
|
+
- Consistent styling with other form components
|
|
38
|
+
|
|
39
|
+
- **Enhanced Switch component**:
|
|
40
|
+
- Added `label` prop for displaying text next to the switch
|
|
41
|
+
- Added `required`, `error`, `errorMessage`, and `helperText` props
|
|
42
|
+
- Improved accessibility with proper label association
|
|
43
|
+
|
|
44
|
+
- **Comprehensive documentation**: Added detailed README with:
|
|
45
|
+
- Usage examples for all components
|
|
46
|
+
- Form component API reference table
|
|
47
|
+
- Code examples for Input, TextArea, Checkbox, Switch, Select
|
|
48
|
+
- Layout components (Stack, Inline, Box)
|
|
49
|
+
- Feedback components (Button, Toast, Dialog)
|
|
50
|
+
- Data display (Avatar, Badge, Chip)
|
|
51
|
+
- Navigation (Tabs, Breadcrumb, Menu)
|
|
52
|
+
- Overlay components (Drawer, Popover, Tooltip)
|
|
53
|
+
- Loading states (Spinner, Skeleton)
|
|
54
|
+
- Accessibility information
|
|
55
|
+
|
|
56
|
+
### Deprecations
|
|
57
|
+
|
|
58
|
+
- `mandatory` prop on Input and TextArea is deprecated. Use `required` instead.
|
|
59
|
+
- `description` prop on Checkbox is deprecated. Use `helperText` instead.
|
|
60
|
+
|
|
61
|
+
## 0.1.7
|
|
62
|
+
|
|
63
|
+
- Initial stable release
|
|
64
|
+
- Core component library with Radix UI primitives
|
|
65
|
+
- Vanilla Extract CSS-in-JS styling
|
package/README.md
CHANGED
|
@@ -122,6 +122,10 @@ import { Checkbox } from "@zentrades-ui/components";
|
|
|
122
122
|
<Checkbox label="Select all" partialChecked />
|
|
123
123
|
```
|
|
124
124
|
|
|
125
|
+
**Alignment behavior:**
|
|
126
|
+
- Without `helperText`: Checkbox and label are center-aligned
|
|
127
|
+
- With `helperText`: Checkbox aligns with the label (top), helper text appears below the label
|
|
128
|
+
|
|
125
129
|
#### Switch
|
|
126
130
|
|
|
127
131
|
```tsx
|
|
@@ -454,14 +458,46 @@ import { Skeleton } from "@zentrades-ui/components";
|
|
|
454
458
|
<Skeleton variant="circle" width={40} height={40} />
|
|
455
459
|
```
|
|
456
460
|
|
|
461
|
+
## Icons
|
|
462
|
+
|
|
463
|
+
Icons are available from `@zentrades-ui/icons` or re-exported from this package:
|
|
464
|
+
|
|
465
|
+
```tsx
|
|
466
|
+
// Preferred: Direct import from icons package
|
|
467
|
+
import { CheckIcon, SearchIcon, IconByName } from "@zentrades-ui/icons";
|
|
468
|
+
|
|
469
|
+
// Alternative: Import from components (re-exports)
|
|
470
|
+
import { CheckIcon, SearchIcon, IconByName } from "@zentrades-ui/components/icons";
|
|
471
|
+
```
|
|
472
|
+
|
|
473
|
+
### Using Individual Icons
|
|
474
|
+
|
|
475
|
+
```tsx
|
|
476
|
+
import { CheckIcon, ChevronDownIcon } from "@zentrades-ui/icons";
|
|
477
|
+
|
|
478
|
+
<CheckIcon size="24" />
|
|
479
|
+
<ChevronDownIcon size="16" stroke="#666" />
|
|
480
|
+
```
|
|
481
|
+
|
|
482
|
+
### Using IconByName (Dynamic)
|
|
483
|
+
|
|
484
|
+
```tsx
|
|
485
|
+
import { IconByName } from "@zentrades-ui/icons";
|
|
486
|
+
|
|
487
|
+
<IconByName name="check" size="24" />
|
|
488
|
+
<IconByName name="chevron-down" size="16" />
|
|
489
|
+
```
|
|
490
|
+
|
|
491
|
+
See [@zentrades-ui/icons](https://www.npmjs.com/package/@zentrades-ui/icons) for the full list of available icons.
|
|
492
|
+
|
|
457
493
|
## Exports
|
|
458
494
|
|
|
459
495
|
```ts
|
|
460
496
|
// Main entry - all components
|
|
461
497
|
import { Button, Input, ... } from "@zentrades-ui/components";
|
|
462
498
|
|
|
463
|
-
// Icons
|
|
464
|
-
import {
|
|
499
|
+
// Icons (re-exported from @zentrades-ui/icons)
|
|
500
|
+
import { CheckIcon, IconByName, iconNames } from "@zentrades-ui/components/icons";
|
|
465
501
|
|
|
466
502
|
// Theme re-exports
|
|
467
503
|
import { ThemeProvider } from "@zentrades-ui/components/theme";
|
package/dist/components.d.ts
CHANGED
|
@@ -15,6 +15,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
|
15
15
|
import * as ToastPrimitive from '@radix-ui/react-toast';
|
|
16
16
|
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
17
17
|
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
18
|
+
export { AlertCircleIcon, ArrowLeftIcon, ArrowRightIcon, CalendarIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, CloseIcon, CopyIcon, EditIcon, ExternalLinkIcon, FilterIcon, Icon, IconOwnProps, IconProps, IconSize, InfoIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, PlusIcon, SearchIcon, SettingsIcon, SortIcon, TrashIcon, UploadCloudIcon, UserIcon } from '@zentrades-ui/icons';
|
|
18
19
|
import { ClassValue } from 'clsx';
|
|
19
20
|
|
|
20
21
|
/**
|
|
@@ -2238,49 +2239,6 @@ type FileUploadProps = {
|
|
|
2238
2239
|
};
|
|
2239
2240
|
declare function FileUpload({ variant, title, description, dragLabel, compactDragLabel, supportedText, maxSizeLabel, helperText, buttonLabel, chooseFileLabel, files, accept, multiple, disabled, onSelectFiles, onRemoveFile, className, }: FileUploadProps): react_jsx_runtime.JSX.Element;
|
|
2240
2241
|
|
|
2241
|
-
type IconSize = "12" | "16" | "20" | "24" | "32" | "40" | "48";
|
|
2242
|
-
type IconOwnProps = {
|
|
2243
|
-
/** Accessible title for the icon */
|
|
2244
|
-
title?: string;
|
|
2245
|
-
/** Icon content (SVG paths) */
|
|
2246
|
-
children?: ReactNode;
|
|
2247
|
-
/** Icon size in pixels */
|
|
2248
|
-
size?: IconSize;
|
|
2249
|
-
/** SVG viewBox attribute */
|
|
2250
|
-
viewBox?: string;
|
|
2251
|
-
/** Additional class name */
|
|
2252
|
-
className?: string;
|
|
2253
|
-
};
|
|
2254
|
-
type IconProps = IconOwnProps & Omit<React__default.SVGProps<SVGSVGElement>, keyof IconOwnProps>;
|
|
2255
|
-
declare const Icon: React__default.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React__default.RefAttributes<SVGSVGElement>>;
|
|
2256
|
-
declare function ChevronLeftIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2257
|
-
declare function ChevronRightIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2258
|
-
declare function ChevronDownIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2259
|
-
declare function ChevronUpIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2260
|
-
declare function CloseIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2261
|
-
declare function CheckIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2262
|
-
declare function PlusIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2263
|
-
declare function MinusIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2264
|
-
declare function SearchIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2265
|
-
declare function CalendarIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2266
|
-
declare function ClockIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2267
|
-
declare function UploadCloudIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2268
|
-
declare function MoreVerticalIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2269
|
-
declare function MoreHorizontalIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2270
|
-
declare function ArrowLeftIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2271
|
-
declare function ArrowRightIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2272
|
-
declare function InfoIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2273
|
-
declare function AlertCircleIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2274
|
-
declare function CheckCircleIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2275
|
-
declare function TrashIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2276
|
-
declare function EditIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2277
|
-
declare function CopyIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2278
|
-
declare function ExternalLinkIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2279
|
-
declare function FilterIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2280
|
-
declare function SortIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2281
|
-
declare function SettingsIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2282
|
-
declare function UserIcon(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
2283
|
-
|
|
2284
2242
|
type DayInfo = {
|
|
2285
2243
|
date: Date;
|
|
2286
2244
|
day: number;
|
|
@@ -2473,4 +2431,4 @@ interface DateTimeInputProps {
|
|
|
2473
2431
|
}
|
|
2474
2432
|
declare const DateTimeInput: React__default.ForwardRefExoticComponent<DateTimeInputProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
2475
2433
|
|
|
2476
|
-
export { AVATAR_COLORS, Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, AccordionRoot, type AccordionRootProps, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant,
|
|
2434
|
+
export { AVATAR_COLORS, Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, AccordionRoot, type AccordionRootProps, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, AlertDialog, type AlertDialogLayout, type AlertDialogProps, Avatar, type AvatarColor, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Body, Box, type BoxOwnProps, type BoxProps, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbRoot, type BreadcrumbRootProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarArrowButton, type CalendarArrowButtonProps, CalendarDateButton, type CalendarDateButtonProps, CalendarGrid, type CalendarGridProps, type CalendarProps, Caption, Checkbox, type CheckboxProps, Chip, type ChipOutline, type ChipOwnProps, type ChipProps, type ChipVariant, Code, ContentSplitter, type ContentSplitterProps, type DateRange, DateTimeInput, type DateTimeInputMode, type DateTimeInputProps, type DateTimeValue, type DayInfo, Dialog, DialogBody, type DialogBodyProps, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogProps, DialogRoot, type DialogSize, DialogTitle, type DialogTitleProps, DialogTrigger, Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, DrawerCompound, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerOverlay, type DrawerOverlayProps, DrawerPortal, type DrawerProps, DrawerRoot, DrawerSection, type DrawerSectionProps, type DrawerSide, type DrawerSize, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type ExtendableProps, FileUpload, type FileUploadProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingOwnProps, type HeadingVariant, IconButton, type IconButtonProps, type IconPosition, Image, type ImageFit, type ImageLoading, type ImageProps, type InheritableElementProps, Inline, type InlineOwnProps, type InlineProps, Input, type InputProps, Label, type LabelVariant, MONTH_NAMES, MONTH_NAMES_SHORT, Menu, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, MenuLabel, type MenuLabelProps, type MenuProps, MenuRoot, type MenuRootProps, MenuSeparator, type MenuSeparatorProps, MenuSub, type MenuSubProps, MenuTrigger, type MenuTriggerProps, Pagination, PaginationEllipsis, type PaginationEllipsisProps, PaginationInfo, PaginationInfoComplete, type PaginationInfoCompleteProps, PaginationInfoLabel, type PaginationInfoLabelProps, PaginationInfoRange, type PaginationInfoRangeProps, PaginationInfoRoot, type PaginationInfoRootProps, PaginationNext, type PaginationNextProps, PaginationPage, type PaginationPageProps, PaginationPrevious, type PaginationPreviousProps, PaginationRoot, type PaginationRootProps, type PolymorphicForwardRefExoticComponent, type PolymorphicProps, type PolymorphicPropsWithRef, type PolymorphicPropsWithoutRef, type PolymorphicRef, Popover, PopoverAnchor, type PopoverAnchorProps, PopoverClose, PopoverCompound, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverRoot, type PopoverSize, PopoverTrigger, type PopoverTriggerProps, type PropsOf, Select, SelectContent, type SelectContentProps, SelectItem, type SelectItemProps, type SelectOption, type SelectProps, SelectRoot, type SelectRootProps, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, type SimplePopoverProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackOwnProps, type StackProps, Switch, type SwitchProps, type SwitchSize, type TBorderPropertyTypes, type TBoxStyles, type TColorPropertyTypes, type TMarginPaddingPropertyTypes, type TShadowStyles, type TSizeStyles, type TTextStyles, type TTransformStyles, type T_SVGColorPropertyTypes, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, TabsRoot, type TabsRootProps, TabsTrigger, type TabsTriggerProps, type TabsVariant, Text, TextArea, type TextAreaProps, type TextOwnProps, type TextVariant, type TimeFormat$1 as TimeFormat, type TimePeriod, TimePicker, type TimePickerProps, type TimeValue, Toast, type ToastData, type ToastProps, ToastProvider, type ToastVariant, ToastViewport, type ToastViewportPosition, type ToastViewportProps, Tooltip, type TooltipProps, TooltipProvider, type UploadFileItem, WEEKDAYS, applyHeadingVariantStyles, applyTextVariantStyles, borderStyles, boxStyles, cn, colorStyles, formatDate, formatInputDate, getColorFromString, getDefaultMaxDate, getDefaultMinDate, getInitials, isDateBetween, isSameDay, isWithinBounds, marginPaddingStyles, parseInputDate, shadowStyles, sizeStyles, svgColorStyles, textStyles, transformStyles, useCalendarDays, useToast };
|