@wallarm-org/design-system 0.77.1 → 0.77.3
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/dist/components/ButtonBase/classes.js +2 -2
- package/dist/components/Code/Code.d.ts +1 -1
- package/dist/components/Code/Code.js +1 -0
- package/dist/components/RemoteShell/RemoteShellBreadcrumb.js +1 -0
- package/dist/components/Table/lib/createSelectionColumn.js +1 -1
- package/dist/components/Toast/Toaster.js +1 -1
- package/dist/components/Tooltip/TooltipContent.js +1 -1
- package/dist/metadata/components.json +11 -2
- package/dist/theme/components/toast.css +8 -0
- package/dist/theme/components/tooltip.css +8 -0
- package/dist/theme/index.css +2 -0
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { cva } from "class-variance-authority";
|
|
2
2
|
import { cn } from "../../utils/cn.js";
|
|
3
|
-
const buttonBaseVariants = cva(cn('items-center justify-center min-w-0 rounded-8', 'text-sm font-medium font-sans', 'cursor-pointer overflow-hidden transition-[color,border,box-shadow,opacity]', 'focus-visible:outline-none focus-visible:ring-3', 'data-[focus=true]:outline-none data-[focus=true]:ring-3', '[&_svg]:pointer-events-none [&_svg]:icon-md [&_svg]:shrink-0', 'disabled:cursor-not-allowed disabled:[&_*]:pointer-events-none'), {
|
|
3
|
+
const buttonBaseVariants = cva(cn('items-center justify-center min-w-0 shrink-0 rounded-8', 'text-sm font-medium font-sans whitespace-nowrap', 'cursor-pointer overflow-hidden transition-[color,border,box-shadow,opacity]', 'focus-visible:outline-none focus-visible:ring-3', 'data-[focus=true]:outline-none data-[focus=true]:ring-3', '[&_svg]:pointer-events-none [&_svg]:icon-md [&_svg]:shrink-0', 'disabled:cursor-not-allowed disabled:[&_*]:pointer-events-none'), {
|
|
4
4
|
variants: {
|
|
5
5
|
size: {
|
|
6
6
|
small: 'h-24 px-8 py-2 gap-4',
|
|
@@ -20,7 +20,7 @@ const buttonBaseVariants = cva(cn('items-center justify-center min-w-0 rounded-8
|
|
|
20
20
|
false: ''
|
|
21
21
|
},
|
|
22
22
|
fullWidth: {
|
|
23
|
-
true: 'flex flex-1 basis-full w-full',
|
|
23
|
+
true: 'flex flex-1 shrink basis-full w-full',
|
|
24
24
|
false: 'inline-flex'
|
|
25
25
|
}
|
|
26
26
|
},
|
|
@@ -4,7 +4,7 @@ import type { TestableProps } from '../../utils/testId';
|
|
|
4
4
|
declare const codeVariants: (props?: ({
|
|
5
5
|
size?: "s" | "xs" | "m" | "l" | null | undefined;
|
|
6
6
|
weight?: "bold" | "light" | "regular" | "medium" | null | undefined;
|
|
7
|
-
color?: "primary" | "secondary" | "destructive" | null | undefined;
|
|
7
|
+
color?: "primary" | "secondary" | "destructive" | "primary-alt" | null | undefined;
|
|
8
8
|
italic?: boolean | null | undefined;
|
|
9
9
|
truncate?: boolean | null | undefined;
|
|
10
10
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -15,6 +15,7 @@ const RemoteShellBreadcrumb = ({ ref, className, children, ...props })=>{
|
|
|
15
15
|
children: [
|
|
16
16
|
/*#__PURE__*/ jsx(Breadcrumbs, {
|
|
17
17
|
"data-slot": "nav-breadcrumbs",
|
|
18
|
+
className: "-ml-4",
|
|
18
19
|
children: breadcrumbSegments.map((segment, i)=>{
|
|
19
20
|
const isLast = i === breadcrumbSegments.length - 1;
|
|
20
21
|
if ('scope-switcher' === segment.type) {
|
|
@@ -36,7 +36,7 @@ const Toaster_Toaster = ()=>{
|
|
|
36
36
|
return /*#__PURE__*/ jsx(Portal, {
|
|
37
37
|
children: /*#__PURE__*/ jsx(Toaster, {
|
|
38
38
|
toaster: arkToasterInstance,
|
|
39
|
-
className: cn('fixed bottom-0 right-0 !z-
|
|
39
|
+
className: cn('fixed bottom-0 right-0 !z-(--toast-z-index) flex flex-col gap-12 p-24 max-w-[560px] mx-auto', '[&_[data-scope=toast][data-part=root]]:[translate:var(--x)_var(--y)] [&_[data-scope=toast][data-part=root]]:scale-[var(--scale)] [&_[data-scope=toast][data-part=root]]:z-[var(--z-index)] [&_[data-scope=toast][data-part=root]]:h-[var(--height)] [&_[data-scope=toast][data-part=root]]:opacity-[var(--opacity)] [&_[data-scope=toast][data-part=root]]:[will-change:translate,opacity,scale]', '[&_[data-scope=toast][data-part=root]]:[transition-property:translate,scale,opacity,height,box-shadow] [&_[data-scope=toast][data-part=root]]:[transition-timing-function:ease] [&_[data-scope=toast][data-part=root]]:[transition-duration:300ms]', '[&_[data-scope=toast][data-part=root][data-state=closed]]:[transition-property:translate,scale,opacity] [&_[data-scope=toast][data-part=root][data-state=closed]]:[transition-timing-function:ease] [&_[data-scope=toast][data-part=root][data-state=closed]]:[transition-duration:150ms]', '[&_[data-scope=toast][data-part=root]:nth-child(n+4)]:hidden', '[&_[data-scope=toast][data-part=root]]:after:content-[""] [&_[data-scope=toast][data-part=root]]:after:absolute [&_[data-scope=toast][data-part=root]]:after:inset-0 [&_[data-scope=toast][data-part=root]]:after:rounded-[inherit] [&_[data-scope=toast][data-part=root]]:after:pointer-events-none [&_[data-scope=toast][data-part=root]]:after:z-[1] [&_[data-scope=toast][data-part=root]]:after:opacity-0 [&_[data-scope=toast][data-part=root]]:after:[transition:opacity_300ms_ease]', '[&_[data-scope=toast][data-part=root][data-state=closed]]:after:[transition:opacity_150ms_ease]', '[&_[data-scope=toast][data-part=root]:not([data-first]):not([data-stack])]:after:[background:--alpha(var(--color-white)/50%)] [&_[data-scope=toast][data-part=root]:not([data-first]):not([data-stack])]:after:opacity-100', '[&_[data-scope=toast][data-part=root]:nth-child(2):not([data-stack])]:after:[background:--alpha(var(--color-white)/20%)] [&_[data-scope=toast][data-part=root]:nth-child(2):not([data-stack])]:after:opacity-100'),
|
|
40
40
|
children: (toast)=>/*#__PURE__*/ jsx(Toast, {
|
|
41
41
|
toast: toast
|
|
42
42
|
}, toast.id)
|
|
@@ -7,7 +7,7 @@ import { hasNonTextEnd } from "../../utils/hasNonTextEnd.js";
|
|
|
7
7
|
import { useTestId } from "../../utils/testId.js";
|
|
8
8
|
const tooltipContentVariants = cva([
|
|
9
9
|
'py-4 rounded-8 bg-component-tooltip-bg text-text-primary-alt text-xs font-medium',
|
|
10
|
-
'z-
|
|
10
|
+
'z-(--tooltip-z-index) overflow-hidden',
|
|
11
11
|
'animate-in fade-in-0 zoom-in-95 origin-[--transform-origin]',
|
|
12
12
|
'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
|
|
13
13
|
'data-[side=bottom]:slide-in-from-top-2',
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.77.
|
|
3
|
-
"generatedAt": "2026-07-
|
|
2
|
+
"version": "0.77.2",
|
|
3
|
+
"generatedAt": "2026-07-17T11:07:19.794Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Accordion",
|
|
@@ -17727,6 +17727,7 @@
|
|
|
17727
17727
|
"name": "color",
|
|
17728
17728
|
"options": [
|
|
17729
17729
|
"primary",
|
|
17730
|
+
"primary-alt",
|
|
17730
17731
|
"secondary",
|
|
17731
17732
|
"destructive"
|
|
17732
17733
|
]
|
|
@@ -79299,6 +79300,10 @@
|
|
|
79299
79300
|
"name": "Basic",
|
|
79300
79301
|
"code": "() => {\n return <ToastDemo />;\n}"
|
|
79301
79302
|
},
|
|
79303
|
+
{
|
|
79304
|
+
"name": "WithNestedOverlays",
|
|
79305
|
+
"code": "() => {\n const toast = useToast();\n\n const fireToast = () =>\n toast.create({\n title: 'Saved',\n description: 'This toast must render above every open overlay.',\n type: 'success',\n duration: STATIC_DURATION,\n });\n\n return (\n <Drawer data-testid='overlay-drawer'>\n <DrawerTrigger asChild>\n <Button>Open drawer</Button>\n </DrawerTrigger>\n\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>[Level 1] Drawer</DrawerTitle>\n </DrawerHeader>\n\n <DrawerBody>\n <VStack gap={12} align='start'>\n <Button variant='outline' color='neutral' onClick={fireToast}>\n Show toast from drawer\n </Button>\n\n <Dialog>\n <DialogTrigger asChild>\n <Button variant='ghost' color='neutral'>\n Open nested dialog\n </Button>\n </DialogTrigger>\n\n <DialogContent>\n <DialogHeader>\n <DialogTitle>[Level 2] Dialog</DialogTitle>\n </DialogHeader>\n\n <DialogBody>\n <Button variant='outline' color='neutral' onClick={fireToast}>\n Show toast from nested dialog\n </Button>\n </DialogBody>\n </DialogContent>\n </Dialog>\n </VStack>\n </DrawerBody>\n </DrawerContent>\n </Drawer>\n );\n}"
|
|
79306
|
+
},
|
|
79302
79307
|
{
|
|
79303
79308
|
"name": "UpdateLoadingToSuccess",
|
|
79304
79309
|
"code": "() => {\n const toast = useToast();\n const id = useRef<string | undefined>(undefined);\n\n const createToast = (duration?: number) => {\n id.current = toast.create({\n title: 'Loading',\n description: 'Loading ...',\n type: 'loading',\n variant: 'extended',\n duration,\n });\n };\n\n const updateToast = (duration?: number) => {\n if (!id.current) {\n return;\n }\n\n toast.update({\n id: id.current,\n title: 'Success',\n description: 'Success!',\n type: 'success',\n variant: 'extended',\n duration,\n });\n };\n\n return (\n <VStack gap={16} align='start'>\n <VStack gap={4} align='start'>\n <Text size='sm' color='secondary' weight='medium'>\n With timeout animation\n </Text>\n <HStack gap={8} wrap>\n <Button onClick={() => createToast()}>Create loading toast</Button>\n <Button onClick={() => updateToast()}>Update to success</Button>\n </HStack>\n </VStack>\n <VStack gap={4} align='start'>\n <Text size='sm' color='secondary' weight='medium'>\n Static (for screenshots)\n </Text>\n <HStack gap={8} wrap>\n <Button variant='secondary' onClick={() => createToast(STATIC_DURATION)}>\n Create loading toast\n </Button>\n <Button variant='secondary' onClick={() => updateToast(STATIC_DURATION)}>\n Update to success\n </Button>\n </HStack>\n </VStack>\n </VStack>\n );\n}"
|
|
@@ -80431,6 +80436,10 @@
|
|
|
80431
80436
|
"name": "WithDescription",
|
|
80432
80437
|
"code": "() => (\n <Tooltip>\n <TooltipTrigger asChild>\n <Button variant='outline' color='neutral'>\n <ChevronRight />\n </Button>\n </TooltipTrigger>\n <TooltipContent>\n <Text size='xs' weight='medium'>\n Title\n </Text>\n <Text size='xs'>Description</Text>\n </TooltipContent>\n </Tooltip>\n)"
|
|
80433
80438
|
},
|
|
80439
|
+
{
|
|
80440
|
+
"name": "WithNestedDialog",
|
|
80441
|
+
"code": "() => (\n <Dialog>\n <DialogTrigger asChild>\n <Button>Open dialog with nested tooltip</Button>\n </DialogTrigger>\n\n <DialogContent>\n <DialogHeader>\n <DialogTitle>[Level 1] Main Dialog</DialogTitle>\n </DialogHeader>\n\n <DialogBody>\n <Dialog>\n <DialogTrigger asChild>\n <Button variant='ghost' color='neutral' size='small'>\n Open nested dialog\n </Button>\n </DialogTrigger>\n\n <DialogContent>\n <DialogHeader>\n <DialogTitle>[Level 2] With Tooltip</DialogTitle>\n </DialogHeader>\n\n <DialogBody>\n <Tooltip data-testid='nested-tooltip' interactive>\n <TooltipTrigger asChild>\n <Button variant='outline' color='neutral'>\n Hover me\n </Button>\n </TooltipTrigger>\n <TooltipContent>Tooltip above the dialog</TooltipContent>\n </Tooltip>\n </DialogBody>\n </DialogContent>\n </Dialog>\n </DialogBody>\n </DialogContent>\n </Dialog>\n)"
|
|
80442
|
+
},
|
|
80434
80443
|
{
|
|
80435
80444
|
"name": "WithKbd",
|
|
80436
80445
|
"code": "() => (\n <Tooltip>\n <TooltipTrigger asChild>\n <Button variant='outline' color='neutral'>\n <ChevronRight />\n </Button>\n </TooltipTrigger>\n <TooltipContent>\n Add instance <Kbd>⌘</Kbd>\n </TooltipContent>\n </Tooltip>\n)"
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* Toasts are viewport-level notifications that must stay visible above
|
|
3
|
+
any open drawer/dialog stack and its overlays (positioners compute
|
|
4
|
+
50 + layer * 20, overlays 40 + layer * 20), so they sit on a dedicated
|
|
5
|
+
top tier. Kept below --tooltip-z-index (1000) so tooltips triggered
|
|
6
|
+
from toast controls still render above the toast itself. */
|
|
7
|
+
--toast-z-index: 900;
|
|
8
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* Tooltips never join zag's dismissable layer stack (unlike menus,
|
|
3
|
+
selects, popovers, and dialogs), so they cannot derive a layer-aware
|
|
4
|
+
z-index from --layer-index. Instead they live on a dedicated top tier
|
|
5
|
+
above any realistic overlay stack — drawer/dialog positioners compute
|
|
6
|
+
50 + layer * 20, so 1000 clears dozens of nested levels. */
|
|
7
|
+
--tooltip-z-index: 1000;
|
|
8
|
+
}
|
package/dist/theme/index.css
CHANGED
|
@@ -19,6 +19,8 @@
|
|
|
19
19
|
@import './utilities/code-snippet-bg.css';
|
|
20
20
|
@import './components/drawer.css';
|
|
21
21
|
@import './components/dialog.css';
|
|
22
|
+
@import './components/tooltip.css';
|
|
23
|
+
@import './components/toast.css';
|
|
22
24
|
@import './components/tour.css';
|
|
23
25
|
@import './components/skeleton.css';
|
|
24
26
|
@import './components/accordion.css';
|