@wallarm-org/design-system 0.77.5 → 0.77.6
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { cva } from "class-variance-authority";
|
|
2
2
|
import { BadgeColorEnum } from "./constants.js";
|
|
3
3
|
import { generateBadgeVariants } from "./generateBadgeVariants.js";
|
|
4
|
-
const badgeVariants = cva('inline-flex items-center gap-4', {
|
|
4
|
+
const badgeVariants = cva('inline-flex items-center gap-4 w-fit', {
|
|
5
5
|
variants: {
|
|
6
6
|
variant: {
|
|
7
7
|
default: '',
|
|
@@ -6,7 +6,7 @@ const CalendarContent = /*#__PURE__*/ forwardRef(({ children, className }, ref)=
|
|
|
6
6
|
children: /*#__PURE__*/ jsx(DatePicker.Positioner, {
|
|
7
7
|
children: /*#__PURE__*/ jsx(DatePicker.Content, {
|
|
8
8
|
ref: ref,
|
|
9
|
-
className: cn('flex bg-bg-surface-2 rounded-12 shadow-md', 'border border-border-primary-light', 'z-
|
|
9
|
+
className: cn('flex bg-bg-surface-2 rounded-12 shadow-md', 'border border-border-primary-light', 'z-[calc(var(--drawer-positioner-z-index)+(var(--layer-index,0)*var(--drawer-level-ratio)))]', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className),
|
|
10
10
|
children: children
|
|
11
11
|
})
|
|
12
12
|
})
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.77.
|
|
3
|
-
"generatedAt": "2026-07-
|
|
2
|
+
"version": "0.77.5",
|
|
3
|
+
"generatedAt": "2026-07-27T10:30:02.552Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Accordion",
|
|
@@ -24643,6 +24643,11 @@
|
|
|
24643
24643
|
"code": "() => {\n const collection = createListCollection({\n items: [\n { label: 'React', value: 'react' },\n { label: 'Vue', value: 'vue' },\n { label: 'Angular', value: 'angular' },\n ],\n });\n\n return (\n <Dialog>\n <DialogTrigger asChild>\n <Button>Open dialog with nested select</Button>\n </DialogTrigger>\n\n <DialogContent>\n <DialogHeader>\n <DialogTitle>[Level 1] Main Dialog</DialogTitle>\n\n <Dialog>\n <DialogTrigger asChild>\n <Button variant='ghost' color='neutral' size='small'>\n <PanelRight />\n Open nested dialog\n </Button>\n </DialogTrigger>\n\n <DialogContent>\n <DialogHeader>\n <DialogTitle>[Level 2] With Select</DialogTitle>\n </DialogHeader>\n\n <DialogBody>\n <VStack gap={12} align='start'>\n <Select collection={collection} data-testid='nested-select'>\n <SelectButton />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(item => (\n <SelectOption key={item.value} item={item}>\n <SelectOptionText>{item.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n\n <DropdownMenu data-testid='nested-dropdown'>\n <DropdownMenuTrigger asChild>\n <Button variant='outline' color='neutral'>\n Open menu\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuItem>First action</DropdownMenuItem>\n <DropdownMenuItem>Second action</DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </VStack>\n </DialogBody>\n </DialogContent>\n </Dialog>\n </DialogHeader>\n\n <DialogBody>\n <ContentPlaceholder height={200} />\n </DialogBody>\n </DialogContent>\n </Dialog>\n );\n}",
|
|
24644
24644
|
"description": "Select and DropdownMenu opened inside a nested dialog must render above the nested dialog, not underneath it"
|
|
24645
24645
|
},
|
|
24646
|
+
{
|
|
24647
|
+
"name": "WithNestedCalendar",
|
|
24648
|
+
"code": "() => {\n return (\n <Dialog>\n <DialogTrigger asChild>\n <Button>Open dialog with nested calendar</Button>\n </DialogTrigger>\n\n <DialogContent>\n <DialogHeader>\n <DialogTitle>[Level 1] Main Dialog</DialogTitle>\n\n <Dialog>\n <DialogTrigger asChild>\n <Button variant='ghost' color='neutral' size='small'>\n <PanelRight />\n Open nested dialog\n </Button>\n </DialogTrigger>\n\n <DialogContent>\n <DialogHeader>\n <DialogTitle>[Level 2] With Calendar</DialogTitle>\n </DialogHeader>\n\n <DialogBody>\n <Calendar type='single'>\n <CalendarTrigger asChild>\n <Button variant='outline' color='neutral'>\n Open calendar\n </Button>\n </CalendarTrigger>\n <CalendarContent>\n <CalendarBody>\n <CalendarGrids />\n </CalendarBody>\n </CalendarContent>\n </Calendar>\n </DialogBody>\n </DialogContent>\n </Dialog>\n </DialogHeader>\n\n <DialogBody>\n <ContentPlaceholder height={200} />\n </DialogBody>\n </DialogContent>\n </Dialog>\n );\n}",
|
|
24649
|
+
"description": "Calendar opened inside a nested dialog must render above the nested dialog, not underneath it"
|
|
24650
|
+
},
|
|
24646
24651
|
{
|
|
24647
24652
|
"name": "Controlled",
|
|
24648
24653
|
"code": "() => {\n const [open, setOpen] = useState(false);\n\n return (\n <>\n <Button onClick={() => setOpen(true)}>Open Controlled Dialog</Button>\n\n <Dialog open={open} onOpenChange={setOpen}>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Controlled Dialog</DialogTitle>\n </DialogHeader>\n\n <DialogBody>\n <div className='py-12'>\n <p className='mb-16'>This dialog is controlled externally.</p>\n <ContentPlaceholder />\n </div>\n </DialogBody>\n\n <DialogFooter>\n <DialogClose asChild>\n <Button variant='ghost' color='neutral' size='large'>\n Cancel\n </Button>\n </DialogClose>\n <Button variant='primary' color='brand' size='large'>\n Save Changes\n </Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </>\n );\n}",
|