@wallarm-org/design-system 0.23.0 → 0.23.1

package/dist/components/Alert/AlertIcon.js

@@ -47,7 +47,7 @@ const AlertIcon = ({ ref, icon, ...props })=>{
         ...props,
         ref: setRefs,
         "data-testid": testId,
-        className: "py-2 shrink-0",
+        className: "flex py-2 shrink-0",
         children: icon || /*#__PURE__*/ jsx(IconComponent, {
             size: "lg",
             className: alertIconVariants({

package/dist/components/CodeSnippet/internal/CodeLine.js

@@ -19,7 +19,7 @@ const CodeLine = ({ lineConfig, lineHeightClass, showInlineGutter = false, lineN
                         children: lineNumber
                     }),
                     lineConfig?.prefix !== void 0 && /*#__PURE__*/ jsx("span", {
-                        className: cn('shrink-0 select-none px-8 text-center flex items-center justify-center', colorStyles?.text),
+                        className: cn('shrink-0 select-none px-8 text-center', colorStyles?.text),
                         children: lineConfig.prefix
                     })
                 ]

package/dist/components/CodeSnippet/internal/PrefixColumn.js

@@ -6,12 +6,12 @@ const PrefixColumn = ({ visibleDisplayItems, lines, lineHeightClass })=>/*#__PUR
         "data-slot": "code-snippet-prefix",
         children: visibleDisplayItems.map((item)=>{
             if ('fold-summary' === item.type) return /*#__PURE__*/ jsx("span", {
-                className: cn(lineHeightClass, 'flex h-lh items-center justify-center px-8')
+                className: cn(lineHeightClass, 'px-8 text-center')
             }, `fold-${item.fold.id}`);
             const lineConfig = lines.get(item.lineNumber);
             const colorStyles = lineConfig?.color ? LINE_COLOR_STYLES[lineConfig.color] : void 0;
             return /*#__PURE__*/ jsx("span", {
-                className: cn(lineHeightClass, 'flex h-lh items-center justify-center px-8', colorStyles?.text, colorStyles?.bg),
+                className: cn(lineHeightClass, 'px-8 text-center', colorStyles?.text, colorStyles?.bg),
                 children: lineConfig?.prefix
             }, item.lineNumber);
         })

package/dist/components/Toast/ToastIcon.js

@@ -3,7 +3,7 @@ import { useTestId } from "../../utils/testId.js";
 const ToastIcon = ({ children })=>{
     const testId = useTestId('icon');
     return /*#__PURE__*/ jsx("div", {
-        className: "shrink-0 pt-2 pb-2",
+        className: "flex shrink-0 pt-2 pb-2",
         "data-part": "toast-icon",
         "data-testid": testId,
         children: children

package/dist/icons/SvgIcon.d.ts

@@ -1,7 +1,7 @@
 import type { FC, ReactNode, Ref, SVGProps } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const iconVariants: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+    size?: "inherit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SvgIconNativeProps = SVGProps<SVGSVGElement>;
 type SvgIconVariantProps = VariantProps<typeof iconVariants>;

package/dist/icons/SvgIcon.js

@@ -4,6 +4,7 @@ import { cn } from "../utils/cn.js";
 const iconVariants = cva('', {
     variants: {
         size: {
+            inherit: 'icon-inherit',
             xs: 'icon-xs',
             sm: 'icon-sm',
             md: 'icon-md',
@@ -13,22 +14,30 @@ const iconVariants = cva('', {
         }
     },
     defaultVariants: {
-        size: 'md'
+        size: 'inherit'
     }
 });
-const SvgIcon = ({ children, title, size = 'md', className, ref, ...props })=>/*#__PURE__*/ jsxs("svg", {
+const SvgIcon = ({ children, title, size = 'inherit', className, ref, ...props })=>{
+    const isDecorative = !title;
+    return /*#__PURE__*/ jsxs("svg", {
         ref: ref,
         xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": isDecorative,
+        focusable: false,
+        ...title && {
+            role: 'img'
+        },
         ...props,
         className: cn(iconVariants({
             size
         }), className),
         children: [
-            /*#__PURE__*/ jsx("title", {
+            title && /*#__PURE__*/ jsx("title", {
                 children: title
             }),
             children
         ]
     });
+};
 SvgIcon.displayName = 'SvgIcon';
 export { SvgIcon };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.22.1",
-  "generatedAt": "2026-04-10T08:52:45.369Z",
+  "version": "0.23.0",
+  "generatedAt": "2026-04-10T09:45:32.033Z",
   "components": [
     {
       "name": "Alert",
@@ -27250,27 +27250,27 @@
         },
         {
           "name": "UpdateLoadingToSuccess",
-          "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    <div className='flex flex-col gap-12'>\n      <div className='flex gap-8 flex-wrap'>\n        <Button onClick={createToast}>Create loading toast</Button>\n        <Button onClick={updateToast}>Update to success</Button>\n      </div>\n    </div>\n  );\n}"
+          "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}"
         },
         {
           "name": "SimpleWithActions",
-          "code": "() => {\n  const toast = useToast();\n\n  return (\n    <div className='flex flex-col gap-12'>\n      <div className='flex gap-8 flex-wrap'>\n        <Button\n          onClick={() =>\n            toast.create({\n              title: 'Message sent',\n              type: 'success',\n              variant: 'simple',\n              actions: (\n                <ToastActions>\n                  <Button variant='secondary' size='small' color='neutral-alt' onClick={() => {}}>\n                    Undo\n                  </Button>\n                </ToastActions>\n              ),\n            })\n          }\n        >\n          Simple Toast with Action\n        </Button>\n        <Button\n          onClick={() =>\n            toast.create({\n              title: 'Connection restored',\n              type: 'info',\n              variant: 'simple',\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        >\n          Simple Toast with Two Actions\n        </Button>\n      </div>\n    </div>\n  );\n}"
+          "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}"
         },
         {
           "name": "ExtendedWithActions",
-          "code": "() => {\n  const toast = useToast();\n\n  return (\n    <div className='flex flex-col gap-12'>\n      <div className='flex gap-8 flex-wrap'>\n        <Button\n          onClick={() =>\n            toast.create({\n              title: 'Extended Toast',\n              description: 'This is an extended toast with default layout.',\n              type: 'success',\n              variant: 'extended',\n              actions: (\n                <ToastActions>\n                  <Button variant='secondary' size='small' color='neutral-alt' onClick={() => {}}>\n                    Action\n                  </Button>\n                </ToastActions>\n              ),\n            })\n          }\n        >\n          Extended Toast with Action\n        </Button>\n        <Button\n          onClick={() =>\n            toast.create({\n              title: 'File processed',\n              description: 'Your file has been processed successfully.',\n              type: 'info',\n              variant: 'extended',\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        >\n          Extended Toast with Two Actions\n        </Button>\n      </div>\n    </div>\n  );\n}"
+          "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}"
         },
         {
           "name": "LongText",
-          "code": "() => {\n  const toast = useToast();\n\n  return (\n    <div className='flex flex-col gap-12'>\n      <div className='flex gap-8 flex-wrap'>\n        <Button\n          onClick={() =>\n            toast.create({\n              title:\n                'This is a very very very long title that will be truncated after a certain number of lines',\n              variant: 'simple',\n              type: 'info',\n            })\n          }\n        >\n          Simple with long title\n        </Button>\n        <Button\n          onClick={() =>\n            toast.create({\n              title:\n                'This is a very very very long title that will be truncated after a certain number of lines' +\n                'This is a very very very long title that will be truncated after a certain number of lines' +\n                'This is a very very very long title that will be truncated after a certain number of lines' +\n                'This is a very very very long title that will be truncated after a certain number of lines',\n              variant: 'extended',\n              description:\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.' +\n                'This allows for better space management while still providing access to all the information.' +\n                'This allows for better space management while still providing access to all the information.' +\n                'This allows for better space management while still providing access to all the information.',\n              type: 'info',\n            })\n          }\n        >\n          Extended with long text\n        </Button>\n      </div>\n    </div>\n  );\n}"
+          "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}"
         },
         {
           "name": "WithoutCloseButton",
-          "code": "() => {\n  const toast = useToast();\n\n  return (\n    <div className='flex flex-col gap-12'>\n      <div className='flex gap-8 flex-wrap'>\n        <Button\n          onClick={() =>\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            })\n          }\n        >\n          Non-closable Toast\n        </Button>\n      </div>\n    </div>\n  );\n}"
+          "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}"
         },
         {
           "name": "CustomIcon",
-          "code": "() => {\n  const toast = useToast();\n\n  return (\n    <div className='flex flex-col gap-12'>\n      <div className='flex gap-8 flex-wrap'>\n        <Button\n          onClick={() =>\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            })\n          }\n        >\n          Custom Icon with own color\n        </Button>\n        <Button\n          onClick={() =>\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            })\n          }\n        >\n          Custom Icon without color\n        </Button>\n      </div>\n    </div>\n  );\n}"
+          "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}"
         }
       ]
     },

package/dist/theme/icon.css

@@ -10,4 +10,15 @@
 @utility icon-* {
     width: --value(--icon-*);
     height: --value(--icon-*);
+    vertical-align: --value(--icon-valign, -0.125em);
+    display: inline-block;
+    flex-shrink: 0;
+}
+
+@utility icon-inherit {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.125em;
+    display: inline-block;
+    flex-shrink: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.23.0",
+  "version": "0.23.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",