@wallarm-org/design-system 0.23.0 → 0.23.1
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/Alert/AlertIcon.js +1 -1
- package/dist/components/CodeSnippet/internal/CodeLine.js +1 -1
- package/dist/components/CodeSnippet/internal/PrefixColumn.js +2 -2
- package/dist/components/Toast/ToastIcon.js +1 -1
- package/dist/icons/SvgIcon.d.ts +1 -1
- package/dist/icons/SvgIcon.js +12 -3
- package/dist/metadata/components.json +8 -8
- package/dist/theme/icon.css +11 -0
- package/package.json +1 -1
|
@@ -47,7 +47,7 @@ const AlertIcon = ({ ref, icon, ...props })=>{
|
|
|
47
47
|
...props,
|
|
48
48
|
ref: setRefs,
|
|
49
49
|
"data-testid": testId,
|
|
50
|
-
className: "py-2 shrink-0",
|
|
50
|
+
className: "flex py-2 shrink-0",
|
|
51
51
|
children: icon || /*#__PURE__*/ jsx(IconComponent, {
|
|
52
52
|
size: "lg",
|
|
53
53
|
className: alertIconVariants({
|
|
@@ -19,7 +19,7 @@ const CodeLine = ({ lineConfig, lineHeightClass, showInlineGutter = false, lineN
|
|
|
19
19
|
children: lineNumber
|
|
20
20
|
}),
|
|
21
21
|
lineConfig?.prefix !== void 0 && /*#__PURE__*/ jsx("span", {
|
|
22
|
-
className: cn('shrink-0 select-none px-8 text-center
|
|
22
|
+
className: cn('shrink-0 select-none px-8 text-center', colorStyles?.text),
|
|
23
23
|
children: lineConfig.prefix
|
|
24
24
|
})
|
|
25
25
|
]
|
|
@@ -6,12 +6,12 @@ const PrefixColumn = ({ visibleDisplayItems, lines, lineHeightClass })=>/*#__PUR
|
|
|
6
6
|
"data-slot": "code-snippet-prefix",
|
|
7
7
|
children: visibleDisplayItems.map((item)=>{
|
|
8
8
|
if ('fold-summary' === item.type) return /*#__PURE__*/ jsx("span", {
|
|
9
|
-
className: cn(lineHeightClass, '
|
|
9
|
+
className: cn(lineHeightClass, 'px-8 text-center')
|
|
10
10
|
}, `fold-${item.fold.id}`);
|
|
11
11
|
const lineConfig = lines.get(item.lineNumber);
|
|
12
12
|
const colorStyles = lineConfig?.color ? LINE_COLOR_STYLES[lineConfig.color] : void 0;
|
|
13
13
|
return /*#__PURE__*/ jsx("span", {
|
|
14
|
-
className: cn(lineHeightClass, '
|
|
14
|
+
className: cn(lineHeightClass, 'px-8 text-center', colorStyles?.text, colorStyles?.bg),
|
|
15
15
|
children: lineConfig?.prefix
|
|
16
16
|
}, item.lineNumber);
|
|
17
17
|
})
|
|
@@ -3,7 +3,7 @@ import { useTestId } from "../../utils/testId.js";
|
|
|
3
3
|
const ToastIcon = ({ children })=>{
|
|
4
4
|
const testId = useTestId('icon');
|
|
5
5
|
return /*#__PURE__*/ jsx("div", {
|
|
6
|
-
className: "shrink-0 pt-2 pb-2",
|
|
6
|
+
className: "flex shrink-0 pt-2 pb-2",
|
|
7
7
|
"data-part": "toast-icon",
|
|
8
8
|
"data-testid": testId,
|
|
9
9
|
children: children
|
package/dist/icons/SvgIcon.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { FC, ReactNode, Ref, SVGProps } from 'react';
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const iconVariants: (props?: ({
|
|
4
|
-
size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
|
|
4
|
+
size?: "inherit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
|
|
5
5
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
6
|
type SvgIconNativeProps = SVGProps<SVGSVGElement>;
|
|
7
7
|
type SvgIconVariantProps = VariantProps<typeof iconVariants>;
|
package/dist/icons/SvgIcon.js
CHANGED
|
@@ -4,6 +4,7 @@ import { cn } from "../utils/cn.js";
|
|
|
4
4
|
const iconVariants = cva('', {
|
|
5
5
|
variants: {
|
|
6
6
|
size: {
|
|
7
|
+
inherit: 'icon-inherit',
|
|
7
8
|
xs: 'icon-xs',
|
|
8
9
|
sm: 'icon-sm',
|
|
9
10
|
md: 'icon-md',
|
|
@@ -13,22 +14,30 @@ const iconVariants = cva('', {
|
|
|
13
14
|
}
|
|
14
15
|
},
|
|
15
16
|
defaultVariants: {
|
|
16
|
-
size: '
|
|
17
|
+
size: 'inherit'
|
|
17
18
|
}
|
|
18
19
|
});
|
|
19
|
-
const SvgIcon = ({ children, title, size = '
|
|
20
|
+
const SvgIcon = ({ children, title, size = 'inherit', className, ref, ...props })=>{
|
|
21
|
+
const isDecorative = !title;
|
|
22
|
+
return /*#__PURE__*/ jsxs("svg", {
|
|
20
23
|
ref: ref,
|
|
21
24
|
xmlns: "http://www.w3.org/2000/svg",
|
|
25
|
+
"aria-hidden": isDecorative,
|
|
26
|
+
focusable: false,
|
|
27
|
+
...title && {
|
|
28
|
+
role: 'img'
|
|
29
|
+
},
|
|
22
30
|
...props,
|
|
23
31
|
className: cn(iconVariants({
|
|
24
32
|
size
|
|
25
33
|
}), className),
|
|
26
34
|
children: [
|
|
27
|
-
/*#__PURE__*/ jsx("title", {
|
|
35
|
+
title && /*#__PURE__*/ jsx("title", {
|
|
28
36
|
children: title
|
|
29
37
|
}),
|
|
30
38
|
children
|
|
31
39
|
]
|
|
32
40
|
});
|
|
41
|
+
};
|
|
33
42
|
SvgIcon.displayName = 'SvgIcon';
|
|
34
43
|
export { SvgIcon };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.
|
|
3
|
-
"generatedAt": "2026-04-
|
|
2
|
+
"version": "0.23.0",
|
|
3
|
+
"generatedAt": "2026-04-10T09:45:32.033Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Alert",
|
|
@@ -27250,27 +27250,27 @@
|
|
|
27250
27250
|
},
|
|
27251
27251
|
{
|
|
27252
27252
|
"name": "UpdateLoadingToSuccess",
|
|
27253
|
-
"code": "() => {\n const toast = useToast();\n const id = useRef<string | undefined>(undefined);\n\n const createToast = () => {\n id.current = toast.create({\n title: 'Loading',\n description: 'Loading ...',\n type: 'loading',\n variant: 'extended',\n });\n };\n\n const updateToast = () => {\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 });\n };\n\n return (\n <
|
|
27253
|
+
"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}"
|
|
27254
27254
|
},
|
|
27255
27255
|
{
|
|
27256
27256
|
"name": "SimpleWithActions",
|
|
27257
|
-
"code": "() => {\n const toast = useToast();\n\n
|
|
27257
|
+
"code": "() => {\n const toast = useToast();\n\n const single = (duration?: number) =>\n toast.create({\n title: 'Message sent',\n type: 'success',\n variant: 'simple',\n duration,\n actions: (\n <ToastActions>\n <Button variant='secondary' size='small' color='neutral-alt' onClick={() => {}}>\n Undo\n </Button>\n </ToastActions>\n ),\n });\n\n const double = (duration?: number) =>\n toast.create({\n title: 'Connection restored',\n type: 'info',\n variant: 'simple',\n duration,\n actions: (\n <ToastActions>\n <Button variant='secondary' size='small' color='neutral-alt' onClick={() => {}}>\n View\n </Button>\n <Button variant='secondary' size='small' color='neutral-alt' onClick={() => {}}>\n Dismiss\n </Button>\n </ToastActions>\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={() => single()}>Simple Toast with Action</Button>\n <Button onClick={() => double()}>Simple Toast with Two Actions</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={() => single(STATIC_DURATION)}>\n Simple Toast with Action\n </Button>\n <Button variant='secondary' onClick={() => double(STATIC_DURATION)}>\n Simple Toast with Two Actions\n </Button>\n </HStack>\n </VStack>\n </VStack>\n );\n}"
|
|
27258
27258
|
},
|
|
27259
27259
|
{
|
|
27260
27260
|
"name": "ExtendedWithActions",
|
|
27261
|
-
"code": "() => {\n const toast = useToast();\n\n
|
|
27261
|
+
"code": "() => {\n const toast = useToast();\n\n const single = (duration?: number) =>\n toast.create({\n title: 'Extended Toast',\n description: 'This is an extended toast with default layout.',\n type: 'success',\n variant: 'extended',\n duration,\n actions: (\n <ToastActions>\n <Button variant='secondary' size='small' color='neutral-alt' onClick={() => {}}>\n Action\n </Button>\n </ToastActions>\n ),\n });\n\n const double = (duration?: number) =>\n toast.create({\n title: 'File processed',\n description: 'Your file has been processed successfully.',\n type: 'info',\n variant: 'extended',\n duration,\n actions: (\n <ToastActions>\n <Button variant='secondary' size='small' color='neutral-alt' onClick={() => {}}>\n View\n </Button>\n <Button variant='secondary' size='small' color='neutral-alt' onClick={() => {}}>\n Download\n </Button>\n </ToastActions>\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={() => single()}>Extended Toast with Action</Button>\n <Button onClick={() => double()}>Extended Toast with Two Actions</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={() => single(STATIC_DURATION)}>\n Extended Toast with Action\n </Button>\n <Button variant='secondary' onClick={() => double(STATIC_DURATION)}>\n Extended Toast with Two Actions\n </Button>\n </HStack>\n </VStack>\n </VStack>\n );\n}"
|
|
27262
27262
|
},
|
|
27263
27263
|
{
|
|
27264
27264
|
"name": "LongText",
|
|
27265
|
-
"code": "() => {\n const toast = useToast();\n\n
|
|
27265
|
+
"code": "() => {\n const toast = useToast();\n\n const longTitle =\n 'This is a very very very long title that will be truncated after a certain number of lines';\n const veryLongTitle = longTitle.repeat(4);\n const longDescription =\n 'This is a very long description that will be truncated after a certain number of lines. ' +\n 'Hover over the description to see the full text in a tooltip. ' +\n 'This allows for better space management while still providing access to all the information.'.repeat(\n 2,\n );\n\n const simpleLong = (duration?: number) =>\n toast.create({ title: longTitle, variant: 'simple', type: 'info', duration });\n\n const extendedLong = (duration?: number) =>\n toast.create({\n title: veryLongTitle,\n variant: 'extended',\n description: longDescription,\n type: 'info',\n duration,\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={() => simpleLong()}>Simple with long title</Button>\n <Button onClick={() => extendedLong()}>Extended with long text</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={() => simpleLong(STATIC_DURATION)}>\n Simple with long title\n </Button>\n <Button variant='secondary' onClick={() => extendedLong(STATIC_DURATION)}>\n Extended with long text\n </Button>\n </HStack>\n </VStack>\n </VStack>\n );\n}"
|
|
27266
27266
|
},
|
|
27267
27267
|
{
|
|
27268
27268
|
"name": "WithoutCloseButton",
|
|
27269
|
-
"code": "() => {\n const toast = useToast();\n\n
|
|
27269
|
+
"code": "() => {\n const toast = useToast();\n\n const create = (duration?: number) =>\n toast.create({\n title: 'Non-closable toast',\n variant: 'extended',\n description: 'This toast cannot be closed manually.',\n type: 'info',\n closable: false,\n duration,\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={() => create()}>Non-closable Toast</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={() => create(STATIC_DURATION)}>\n Non-closable Toast\n </Button>\n </HStack>\n </VStack>\n </VStack>\n );\n}"
|
|
27270
27270
|
},
|
|
27271
27271
|
{
|
|
27272
27272
|
"name": "CustomIcon",
|
|
27273
|
-
"code": "() => {\n const toast = useToast();\n\n
|
|
27273
|
+
"code": "() => {\n const toast = useToast();\n\n const withColor = (duration?: number) =>\n toast.create({\n title: 'Custom icon toast',\n variant: 'extended',\n description: 'This toast uses a custom icon that overrides the type-based icon.',\n type: 'success',\n icon: <Activity size='lg' className='text-purple-500' />,\n duration,\n });\n\n const withoutColor = (duration?: number) =>\n toast.create({\n title: 'Custom icon with action',\n variant: 'extended',\n description: 'You can use any icon component as a custom icon.',\n type: 'info',\n icon: <Activity />,\n duration,\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={() => withColor()}>Custom Icon with own color</Button>\n <Button onClick={() => withoutColor()}>Custom Icon without color</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={() => withColor(STATIC_DURATION)}>\n Custom Icon with own color\n </Button>\n <Button variant='secondary' onClick={() => withoutColor(STATIC_DURATION)}>\n Custom Icon without color\n </Button>\n </HStack>\n </VStack>\n </VStack>\n );\n}"
|
|
27274
27274
|
}
|
|
27275
27275
|
]
|
|
27276
27276
|
},
|
package/dist/theme/icon.css
CHANGED
|
@@ -10,4 +10,15 @@
|
|
|
10
10
|
@utility icon-* {
|
|
11
11
|
width: --value(--icon-*);
|
|
12
12
|
height: --value(--icon-*);
|
|
13
|
+
vertical-align: --value(--icon-valign, -0.125em);
|
|
14
|
+
display: inline-block;
|
|
15
|
+
flex-shrink: 0;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@utility icon-inherit {
|
|
19
|
+
width: 1em;
|
|
20
|
+
height: 1em;
|
|
21
|
+
vertical-align: -0.125em;
|
|
22
|
+
display: inline-block;
|
|
23
|
+
flex-shrink: 0;
|
|
13
24
|
}
|