@archbase/components 3.0.0

package/src/markdown/components/CodeBlock.tsx

@@ -0,0 +1,197 @@
+import { useMemo } from 'react';
+import type { ReactNode } from 'react';
+import { Box, Code, Paper, useMantineTheme } from '@mantine/core';
+import type { CodeBlockProps } from '../ArchbaseMarkdown.types';
+
+/**
+ * Mapeamento de temas para cores
+ */
+const THEME_COLORS: Record<string, { bg: string; text: string; border: string }> = {
+  'atom-one-dark': { bg: '#282c34', text: '#abb2bf', border: '#3e4451' },
+  'atom-one-light': { bg: '#fafafa', text: '#383a42', border: '#e0e0e0' },
+  'github-dark': { bg: '#0d1117', text: '#c9d1d9', border: '#30363d' },
+  'github-light': { bg: '#ffffff', text: '#24292f', border: '#d0d7de' },
+  'monokai': { bg: '#272822', text: '#f8f8f2', border: '#3e3d32' },
+  'nord': { bg: '#2e3440', text: '#d8dee9', border: '#3b4252' },
+  'dracula': { bg: '#282a36', text: '#f8f8f2', border: '#44475a' },
+  'cool': { bg: '#1c1c1c', text: '#b0b0b0', border: '#333333' },
+  'high-contrast': { bg: '#000000', text: '#ffffff', border: '#ffffff' },
+};
+
+/**
+ * Mapeamento de linguagem para aliases comuns
+ */
+const LANGUAGE_ALIASES: Record<string, string> = {
+  js: 'javascript',
+  ts: 'typescript',
+  tsx: 'typescript',
+  jsx: 'javascript',
+  py: 'python',
+  rb: 'ruby',
+  rs: 'rust',
+  go: 'golang',
+  sh: 'shell',
+  bash: 'shell',
+  zsh: 'shell',
+  yaml: 'yml',
+  json: 'javascript',
+  xml: 'markup',
+  html: 'markup',
+  svg: 'markup',
+};
+
+/**
+ * Normaliza o nome da linguagem para detecção de sintaxe
+ */
+function normalizeLanguage(lang?: string): string | undefined {
+  if (!lang) return undefined;
+  const normalized = lang.toLowerCase().trim();
+  return LANGUAGE_ALIASES[normalized] || normalized;
+}
+
+/**
+ * Simples syntax highlighting (substituto para react-syntax-highlighter)
+ * Divide o código em linhas e aplica cores básicas
+ */
+function highlightCode(code: string, language?: string): Array<{ line: string; highlight: boolean }> {
+  if (!code) return [];
+
+  const lines = code.split('\n');
+  return lines.map((line) => ({
+    line: line || ' ', // Preserva linhas vazias
+    highlight: false,
+  }));
+}
+
+/**
+ * Componente para renderização de blocos de código
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock
+ *   language="typescript"
+ *   value="const x = 42;"
+ *   showLineNumbers
+ *   theme="github-dark"
+ * />
+ * ```
+ */
+export function ArchbaseCodeBlock({
+  language,
+  value,
+  className,
+  showLineNumbers = false,
+  theme = 'github-dark',
+}: CodeBlockProps) {
+  const mantineTheme = useMantineTheme();
+  const normalizedLanguage = normalizeLanguage(language);
+  const themeColors = THEME_COLORS[theme] || THEME_COLORS['github-dark'];
+
+  const lines = useMemo(() => {
+    if (!value) return [];
+    return highlightCode(value, normalizedLanguage);
+  }, [value, normalizedLanguage]);
+
+  if (!value) {
+    return null;
+  }
+
+  const maxLineDigits = lines.length.toString().length;
+
+  return (
+    <Paper
+      shadow="sm"
+      withBorder
+      p="md"
+      className={className}
+      style={{
+        backgroundColor: themeColors.bg,
+        borderColor: themeColors.border,
+        borderRadius: mantineTheme.radius.md,
+        overflow: 'auto',
+        maxHeight: '600px',
+      }}
+    >
+      {/* Language indicator */}
+      {normalizedLanguage && (
+        <Box
+          pos="absolute"
+          top={8}
+          right={8}
+          px="xs"
+          py={4}
+          style={{
+            backgroundColor: themeColors.border,
+            color: themeColors.text,
+            borderRadius: mantineTheme.radius.sm,
+            fontSize: '0.75rem',
+            textTransform: 'uppercase',
+            fontWeight: 600,
+          }}
+        >
+          {normalizedLanguage}
+        </Box>
+      )}
+      <Code
+        block
+        style={{
+          color: themeColors.text,
+          fontFamily: '"Fira Code", "JetBrains Mono", Consolas, Monaco, monospace',
+          fontSize: '0.875rem',
+          lineHeight: '1.7',
+          backgroundColor: 'transparent',
+          padding: 0,
+          paddingTop: showLineNumbers ? '1.5rem' : 0,
+        }}
+      >
+        {lines.map((line, index) => (
+          <div key={index} style={{ display: 'flex', gap: '1rem' }}>
+            {showLineNumbers && (
+              <span
+                style={{
+                  color: mantineTheme.colors.gray[6],
+                  minWidth: `${maxLineDigits}ch`,
+                  textAlign: 'right',
+                  userSelect: 'none',
+                  opacity: 0.5,
+                }}
+              >
+                {index + 1}
+              </span>
+            )}
+            <span style={{ whiteSpace: 'pre' }}>{line.line}</span>
+          </div>
+        ))}
+      </Code>
+    </Paper>
+  );
+}
+
+/**
+ * Componente para código inline
+ */
+export function ArchbaseInlineCode({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  const mantineTheme = useMantineTheme();
+
+  return (
+    <Code
+      className={className}
+      style={{
+        backgroundColor: mantineTheme.colors.gray[1],
+        color: mantineTheme.colors.gray[9],
+        padding: '0.125rem 0.375rem',
+        borderRadius: mantineTheme.radius.sm,
+        fontSize: '0.875em',
+        fontFamily: '"Fira Code", "JetBrains Mono", Consolas, Monaco, monospace',
+      }}
+    >
+      {children}
+    </Code>
+  );
+}

package/src/markdown/components/LinkRenderer.tsx

@@ -0,0 +1,98 @@
+import { Anchor, Tooltip } from '@mantine/core';
+import { IconExternalLink } from '@tabler/icons-react';
+import type { LinkRendererProps } from '../ArchbaseMarkdown.types';
+
+/**
+ * Verifica se uma URL é externa ao domínio atual
+ */
+function isExternalUrl(href: string): boolean {
+  if (!href) return false;
+
+  // Verifica se é um link âncora
+  if (href.startsWith('#')) return false;
+
+  // Verifica se é um protocolo relativo ou mailto/tel
+  if (href.startsWith('mailto:') || href.startsWith('tel:') || href.startsWith('/')) {
+    return false;
+  }
+
+  // Verifica se tem protocolo (http, https, etc)
+  if (/^[a-z]+:\/\//i.test(href)) {
+    // Se tiver servidor, compara com o domínio atual
+    if (typeof window !== 'undefined') {
+      try {
+        const url = new URL(href, window.location.origin);
+        return url.hostname !== window.location.hostname;
+      } catch {
+        return true;
+      }
+    }
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Renderizador de links para Markdown
+ *
+ * @example
+ * ```tsx
+ * <LinkRenderer
+ *   href="https://example.com"
+ *   openExternalInNewTab
+ *   onClick={(href) => console.log('Clicked:', href)}
+ * >
+ *   Link Text
+ * </LinkRenderer>
+ * ```
+ */
+export function ArchbaseLinkRenderer({
+  href = '#',
+  children,
+  openExternalInNewTab = true,
+  onClick,
+}: LinkRendererProps) {
+  const isExternal = isExternalUrl(href);
+  const shouldOpenInNewTab = openExternalInNewTab && isExternal;
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (onClick) {
+      const result = onClick(href);
+      if (result === false) {
+        e.preventDefault();
+        return;
+      }
+    }
+
+    if (shouldOpenInNewTab) {
+      e.preventDefault();
+      window.open(href, '_blank', 'noopener,noreferrer');
+    }
+  };
+
+  const anchor = (
+    <Anchor
+      href={href}
+      target={shouldOpenInNewTab ? '_blank' : undefined}
+      rel={shouldOpenInNewTab ? 'noopener noreferrer' : undefined}
+      onClick={handleClick}
+      style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
+    >
+      {children}
+      {isExternal && (
+        <IconExternalLink size={14} style={{ opacity: 0.6, flexShrink: 0 }} />
+      )}
+    </Anchor>
+  );
+
+  if (isExternal) {
+    return (
+      <Tooltip label={href} position="top" openDelay={500}>
+        {anchor}
+      </Tooltip>
+    );
+  }
+
+  return anchor;
+}

package/src/markdown/index.ts

@@ -0,0 +1,29 @@
+/**
+ * ArchbaseMarkdown - Markdown Renderer Component
+ *
+ * Baseado em react-markdown com plugins remark/rehype.
+ * Suporta GitHub Flavored Markdown, syntax highlighting,
+ * HTML inline, e componentes customizados.
+ */
+
+// Main component
+export { ArchbaseMarkdown } from './ArchbaseMarkdown';
+
+// Sub-components
+export { ArchbaseCodeBlock, ArchbaseInlineCode } from './components/CodeBlock';
+export { ArchbaseLinkRenderer } from './components/LinkRenderer';
+
+// Types
+export type {
+  ArchbaseMarkdownProps,
+  CodeOptions,
+  CodeInlineStyle,
+  LinkOptions,
+  ListOptions,
+  PluginOptions,
+  CustomComponents,
+  SyntaxHighlightTheme,
+  TableOptions,
+  CodeBlockProps,
+  LinkRendererProps,
+} from './ArchbaseMarkdown.types';

package/src/masonry/ArchbaseMasonry.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseMasonry.context.d.ts","sourceRoot":"","sources":["ArchbaseMasonry.context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,WAAW,2BAA2B,CAAC,CAAC,EAAE,EAAE;IACjD,gCAAgC;IAChC,UAAU,CAAC,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACvC,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACpD,wBAAwB;IACxB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,iEAAiE;IACjE,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3D,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3D;AACD,QAAA,MAAM,sBAAsB,sDAEvB,CAAC;AACN,eAAO,MAAM,uBAAuB,uDAAkC,CAAC;AACvE,eAAe,sBAAsB,CAAC"}

package/src/masonry/ArchbaseMasonry.context.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ArchbaseDataSource, IArchbaseDataSourceBase } from '@archbase/data';
+
+export interface ArchbaseMasonryContextValue<T, ID> {
+	/** Fonte de dados do masonry (V1 ou V2) */
+	dataSource?: IArchbaseDataSourceBase<T>;
+	/** Function para notificar o masonry que o item foi selecionado */
+	handleSelectItem?: (index: number, data: T) => void;
+	/** Id do masonry pai */
+	ownerId?: any;
+	/** Cor de fundo do item ativo definido globalmente no masonry */
+	activeBackgroundColor?: string;
+	/** Cor da fonte do item ativo definido globalmente no masonry */
+	activeColor?: string;
+	/** Evento gerado quando o mouse está sobre um item */
+	onItemEnter?: (event: React.MouseEvent, data: any) => void;
+	/** Evento gerado quando o mouse sai de um item */
+	onItemLeave?: (event: React.MouseEvent, data: any) => void;
+}
+const ArchbaseMasonryContext = React.createContext<
+	ArchbaseMasonryContextValue<any, any>
+>({});
+export const ArchbaseMasonryProvider = ArchbaseMasonryContext.Provider;
+export default ArchbaseMasonryContext;

package/src/masonry/ArchbaseMasonry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseMasonry.d.ts","sourceRoot":"","sources":["ArchbaseMasonry.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA6C,MAAM,OAAO,CAAC;AAkCpF,MAAM,WAAW,8BAA8B,CAAC,CAAC,EAAE,GAAG;IACrD,YAAY;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,iBAAiB;IACjB,EAAE,EAAE,GAAG,CAAC;IACR,qCAAqC;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,UAAU,EAAE,CAAC,CAAC;IACd,mDAAmD;IACnD,QAAQ,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,oBAAoB;IACpC,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuD1D,CAAC;AAEF,UAAU,8BAA8B;IACvC,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,8BAA8B,CA8B9E,CAAC"}

package/src/masonry/ArchbaseMasonry.tsx

@@ -0,0 +1,156 @@
+/**
+ * ArchbaseMasonry — layout masonry responsivo com provider de contexto.
+ * @status stable
+ */
+import React, { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+
+const DEFAULT_COLUMNS_COUNT = 1;
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useEffect : useEffect;
+
+const useHasMounted = () => {
+	const [hasMounted, setHasMounted] = useState(false);
+	useIsomorphicLayoutEffect(() => {
+		setHasMounted(true);
+	}, []);
+	return hasMounted;
+};
+
+const useWindowWidth = () => {
+	const hasMounted = useHasMounted();
+	const [width, setWidth] = useState(0);
+
+	const handleResize = useCallback(() => {
+		if (!hasMounted) return;
+		setWidth(window.innerWidth);
+	}, [hasMounted]);
+
+	useIsomorphicLayoutEffect(() => {
+		if (hasMounted) {
+			window.addEventListener('resize', handleResize);
+			handleResize();
+			return () => window.removeEventListener('resize', handleResize);
+		}
+	}, [hasMounted, handleResize]);
+
+	return width;
+};
+
+export interface ArchbaseMasonryCustomItemProps<T, _ID> {
+	/** Chave */
+	key: string;
+	/** Id do item */
+	id: any;
+	/** Indicador se o Item está ativo */
+	active: boolean;
+	/** Indice dentro da lista */
+	index: number;
+	/** Registro contendo dados de uma linha na lista */
+	recordData: T;
+	/** Indicador se item da lista está desabilitado */
+	disabled: boolean;
+}
+
+export interface ArchbaseMasonryProps {
+	children: ReactNode | ReactNode[];
+	columnsCount?: number;
+	gutter?: string;
+	className?: string | null;
+	style?: React.CSSProperties;
+}
+
+export const ArchbaseMasonry: React.FC<ArchbaseMasonryProps> = ({
+	children,
+	columnsCount = 3,
+	gutter = 'px',
+	className = null,
+	style = {},
+}) => {
+	const getColumns = (): ReactNode[][] => {
+		const columns: ReactNode[][] = Array.from({ length: columnsCount }, () => []);
+		React.Children.forEach(children, (child, index) => {
+			if (React.isValidElement(child)) {
+				columns[index % columnsCount].push(child);
+			}
+		});
+		return columns;
+	};
+
+	const renderColumns = (): React.JSX.Element[] => {
+		return getColumns().map((column, i) => (
+			<div
+				key={i}
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					justifyContent: 'flex-start',
+					alignContent: 'stretch',
+					flex: 1,
+					width: 0,
+					gap: gutter,
+				}}
+			>
+				{column.map((item, index) => (
+					<React.Fragment key={index}>{item}</React.Fragment>
+				))}
+			</div>
+		));
+	};
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'row',
+				justifyContent: 'center',
+				alignContent: 'stretch',
+				boxSizing: 'border-box',
+				width: '100%',
+				gap: gutter,
+				...style,
+			}}
+			className={className!}
+		>
+			{renderColumns()}
+		</div>
+	);
+};
+
+interface ArchbaseMasonryResponsiveProps {
+	columnsCountBreakPoints?: Record<number, number>;
+	children: React.ReactNode | React.ReactNode[];
+	className?: string | null;
+	style?: React.CSSProperties | null;
+}
+
+export const ArchbaseMasonryResponsive: React.FC<ArchbaseMasonryResponsiveProps> = ({
+	columnsCountBreakPoints = {
+		350: 1,
+		750: 2,
+		900: 3,
+		1200: 4,
+	},
+	children,
+	className = null,
+	style = null,
+}) => {
+	const windowWidth = useWindowWidth();
+	const columnsCount = useMemo(() => {
+		const breakPoints = Object.keys(columnsCountBreakPoints).sort((a, b) => Number(a) - Number(b));
+		let count = breakPoints.length > 0 ? columnsCountBreakPoints[breakPoints[0]] : DEFAULT_COLUMNS_COUNT;
+
+		breakPoints.forEach((breakPoint) => {
+			if (Number(breakPoint) < windowWidth) {
+				count = columnsCountBreakPoints[breakPoint];
+			}
+		});
+
+		return count;
+	}, [windowWidth, columnsCountBreakPoints]);
+
+	return (
+		<ArchbaseMasonry className={className!} style={style!} columnsCount={columnsCount}>
+			{children}
+		</ArchbaseMasonry>
+	);
+};

package/src/masonry/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,EAAE,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAC5F,OAAO,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,YAAY,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AACxE,YAAY,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,CAAC"}

package/src/masonry/index.ts

@@ -0,0 +1,5 @@
+import ArchbaseMasonryContext, { ArchbaseMasonryProvider } from './ArchbaseMasonry.context';
+export { ArchbaseMasonry, ArchbaseMasonryResponsive } from './ArchbaseMasonry';
+export type { ArchbaseMasonryCustomItemProps } from './ArchbaseMasonry';
+export type { ArchbaseMasonryContextValue } from './ArchbaseMasonry.context';
+export { ArchbaseMasonryContext, ArchbaseMasonryProvider };

package/src/navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,WAAW,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC"}

package/src/navigation/index.ts

@@ -0,0 +1,4 @@
+// Navigation Components - TODO: Implement
+export { NavLink as ArchbaseNavLink } from '@mantine/core';
+export { Breadcrumbs as ArchbaseBreadcrumbs } from '@mantine/core';
+export { Pagination as ArchbasePagination } from '@mantine/core';

package/src/notification/ArchbaseAlert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseAlert.d.ts","sourceRoot":"","sources":["ArchbaseAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,UAAU,EAAE,YAAY,EAAE,YAAY,EAAY,MAAM,eAAe,CAAC;AACxF,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACrD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,YAAY,CAAC;CAC/B;AAMD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAiDtD"}

package/src/notification/ArchbaseAlert.tsx

@@ -0,0 +1,77 @@
+/**
+ * ArchbaseAlert — wrapper de alerta (Mantine Alert) para feedback rápido.
+ * @status stable
+ */
+import { Alert, AlertProps, AlertVariant, MantineColor, useProps } from '@mantine/core';
+import React, { useEffect, useState } from 'react';
+
+export interface ArchbaseAlertProps extends AlertProps {
+	title?: React.ReactNode;
+	variant?: AlertVariant | string;
+	children: React.ReactNode;
+	color?: MantineColor;
+	titleColor?: MantineColor;
+	icon?: React.ReactNode;
+	withCloseButton?: boolean;
+	onClose?: () => void;
+	autoClose?: number;
+	closeButtonLabel?: string;
+	radius?: string | number | undefined;
+	withBorder?: boolean;
+	backgroundColor?: MantineColor;
+}
+
+const defaultProps: Partial<ArchbaseAlertProps> = {
+	variant: 'light',
+};
+
+export function ArchbaseAlert(props: ArchbaseAlertProps) {
+	const {
+		className,
+		color,
+		radius,
+		withCloseButton,
+		title,
+		icon,
+		children,
+		onClose,
+		classNames,
+		unstyled,
+		variant,
+		titleColor,
+		autoClose = 0,
+	} = useProps('ArchbaseAlert', defaultProps, props);
+	const [started] = useState(false);
+
+	useEffect(() => {
+		if (autoClose > 0 && !started) {
+			setTimeout(() => (onClose ? onClose() : null), autoClose);
+		}
+	}, [autoClose]);
+
+	return (
+		<Alert
+			onClose={onClose}
+			classNames={classNames}
+			styles={(theme) => ({
+				title: {
+					color: titleColor,
+				},
+
+				leftIcon: {
+					marginRight: theme.spacing.md,
+				},
+			})}
+			unstyled={unstyled}
+			icon={icon}
+			title={title}
+			className={className}
+			color={color}
+			radius={radius}
+			variant={variant}
+			withCloseButton={withCloseButton}
+		>
+			{children}
+		</Alert>
+	);
+}

package/src/notification/ArchbaseDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseDialog.d.ts","sourceRoot":"","sources":["ArchbaseDialog.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAU,MAAM,iBAAiB,CAAC;AAW5D,OAAc,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,qBAAa,cAAc;IAC1B,MAAM,CAAC,sBAAsB,UAAW,MAAM,YAAY,MAAM,aAAa,MAAM,IAAI,YAAY,MAAM,IAAI,UAW3G;IAEF,MAAM,CAAC,QAAQ,YAAa,SAAS,UAAU,MAAM,cAAc,MAAM,IAAI,UAsB3E;IAEF,MAAM,CAAC,WAAW,YAAa,SAAS,UAAU,MAAM,cAAc,MAAM,IAAI,UAsB9E;IAEF,MAAM,CAAC,WAAW,YAAa,SAAS,UAAU,MAAM,cAAc,MAAM,IAAI,UAsB9E;IAEF,MAAM,CAAC,SAAS,YAAa,SAAS,UAAU,MAAM,cAAc,MAAM,IAAI,UAuB5E;IAEF,MAAM,CAAC,oBAAoB,UAAW,MAAM,WAAW,MAAM,kBAAkB,MAAM,cAAc,MAAM,IAAI,UAU3G;IAEF,MAAM,CAAC,eAAe,UACd,MAAM,gBACC,MAAM,UACZ,MAAM,kBACE,kBAAkB,CAAC,GAAG,CAAC,GAAG,SAAS,cACvC,MAAM,IAAI,aACX,MAAM,IAAI,UA4BpB;CACF;AAED,eAAO,MAAM,oBAAoB,iCAI9B,iBAAiB,CAAC;IAAE,OAAO,EAAE,SAAS,CAAC;IAAC,aAAa,CAAC,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,4CA6B9F,CAAC"}