@axinom/mosaic-ui 0.66.0-rc.10 → 0.66.0-rc.12

package/src/components/VisualElements/SvgElement.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export interface SvgElementProps extends React.SVGAttributes<SVGElement> {
+  /** SVG title (tooltip or additional description shown on hover) */
+  title?: string;
+}
+
+/**
+ * Reusable SVG wrapper with accessibility support and default props.
+ * @example
+ * <SvgElement aria-label="Custom icon" title="Custom tooltip">
+ *   <path d="..." />
+ * </SvgElement>
+ */
+export const SvgElement: React.FC<SvgElementProps> = ({
+  children,
+  className,
+  'aria-label': ariaLabel,
+  title,
+  viewBox = '0 0 40 40',
+  ...svgProps
+}) => {
+  // Determine if this is a decorative icon (no accessible label or title)
+  const isDecorative = !ariaLabel && !title;
+
+  return (
+    <svg
+      className={className}
+      viewBox={viewBox}
+      role={isDecorative ? 'presentation' : 'img'}
+      aria-hidden={isDecorative ? 'true' : undefined}
+      aria-label={ariaLabel}
+      focusable="false"
+      {...svgProps}
+    >
+      {title && <title>{title}</title>}
+      {children}
+    </svg>
+  );
+};

package/src/components/VisualElements/index.ts

@@ -0,0 +1,7 @@
+export {
+  DecorativeImageProps,
+  ImgElement,
+  ImgElementProps,
+  MeaningfulImageProps,
+} from './ImgElement';
+export { SvgElement, SvgElementProps } from './SvgElement';

package/src/components/index.ts

@@ -25,4 +25,5 @@ export * from './PageHeader';
 export * from './ProgressBar';
 export * from './Tabs';
 export * from './Utils';
+export * from './VisualElements';
 export * from './models';