@reltio/design 0.1.0 → 0.2.0

package/components/Details/Details.js

@@ -10,13 +10,11 @@ import styles from "./Details.module.css";
  * with improved visual design, accessibility, and consistent styling
  * aligned with the design system.
  */
-export const Details = ({ open: initialOpen = false, children, className, style, ...rest }) => {
+export const Details = ({ open: initialOpen = false, children, className, ...rest }) => {
     const [isOpen, setIsOpen] = useState(initialOpen);
-    // Update internal state when open prop changes
     useEffect(() => {
         setIsOpen(initialOpen);
     }, [initialOpen]);
-    // Extract summary from children
     let summary = "Details";
     const contentChildren = [];
     React.Children.forEach(children, (child) => {
@@ -29,12 +27,9 @@ export const Details = ({ open: initialOpen = false, children, className, style,
             contentChildren.push(child);
         }
     });
-    // Handle toggle
     const handleToggle = (event) => {
         const detailsElement = event.currentTarget;
         setIsOpen(detailsElement.open);
     };
-    // Compose className using classNames utility
-    const composedClassName = classNames(styles.root, className);
-    return (_jsxs("details", { className: composedClassName, style: style, onToggle: handleToggle, open: initialOpen, ...rest, children: [_jsxs("summary", { className: styles.summary, children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: _jsx(CodeBrackets, { size: "small" }) }), _jsx("span", { className: styles.summaryText, children: summary }), _jsx("span", { className: classNames(styles.chevron, isOpen && styles.chevronOpen), children: isOpen ? (_jsx(ExpandLess, { size: "small", "aria-hidden": "true" })) : (_jsx(ExpandMore, { size: "small", "aria-hidden": "true" })) })] }), _jsx("div", { className: styles.content, children: contentChildren })] }));
+    return (_jsxs("details", { className: classNames(styles.root, className), onToggle: handleToggle, open: initialOpen, ...rest, children: [_jsxs("summary", { className: classNames(styles.summary), children: [_jsx("span", { className: classNames(styles.icon), "aria-hidden": "true", children: _jsx(CodeBrackets, { size: "small" }) }), _jsx("span", { className: classNames(styles.summaryText), children: summary }), _jsx("span", { className: classNames(styles.chevron, isOpen && styles.chevronOpen), children: isOpen ? (_jsx(ExpandLess, { size: "small", "aria-hidden": "true" })) : (_jsx(ExpandMore, { size: "small", "aria-hidden": "true" })) })] }), _jsx("div", { className: classNames(styles.content), children: contentChildren })] }));
 };

package/components/Details/Details.module.css.js

@@ -1,29 +1,27 @@
 import styleInject from 'style-inject';
 import json from './Details.module.css.json';
 styleInject(`
-/* Override via --reltio-details-* on .root or parent; fallbacks = light values */
-._root_1njq6_1 {
+.Details_root__L29wd {
 	margin: 1rem 0;
-	background-color: var(--reltio-details-background-color, #fff);
-	border: var(--reltio-details-border-width, 0.5px) solid
-		var(--reltio-details-border-color, #e3e3f2);
-	border-radius: var(--reltio-details-border-radius, 12px);
+	background-color: var(--reltio-color-surface-1);
+	border: 0.5px solid var(--reltio-color-border-2);
+	border-radius: 12px;
 	overflow: hidden;
 	padding: 0;
-	font-family: var(--reltio-details-font-family, "Roboto Flex", sans-serif);
-	font-size: var(--reltio-details-font-size, 14px);
+	font-family: "Roboto Flex", sans-serif;
+	font-size: 14px;
 }
 
-._summary_1njq6_14 {
+.Details_summary__L29wd {
 	display: flex;
 	align-items: center;
-	gap: var(--reltio-details-summary-gap, 8px);
+	gap: 8px;
 	cursor: pointer;
 	user-select: none;
 	list-style: none;
-	color: var(--reltio-details-summary-text-color, #0e0e25);
-	line-height: var(--reltio-details-summary-line-height, 1.71);
-	padding: var(--reltio-details-summary-padding, 12px);
+	color: var(--reltio-color-text);
+	line-height: 1.71;
+	padding: 12px;
 	margin: 0;
 	border-bottom-left-radius: 0;
 	border-bottom-right-radius: 0;
@@ -31,19 +29,23 @@ styleInject(`
 	font-weight: 500;
 }
 
-._summary_1njq6_14:hover {
-	background-color: var(--reltio-details-summary-hover-bg, #b2b2ff4d);
+.Details_summary__L29wd:hover {
+	background-color: color-mix(
+		in srgb,
+		var(--reltio-color-primary) 12%,
+		transparent
+	);
 }
 
-._summary_1njq6_14::-webkit-details-marker {
+.Details_summary__L29wd::-webkit-details-marker {
 	display: none;
 }
 
-._summary_1njq6_14::marker {
+.Details_summary__L29wd::marker {
 	display: none;
 }
 
-._icon_1njq6_43 {
+.Details_icon__L29wd {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -51,55 +53,66 @@ styleInject(`
 	flex-shrink: 0;
 }
 
-._summaryText_1njq6_51 {
+.Details_summaryText__L29wd {
 	flex: 1;
-	font-weight: var(--reltio-details-title-font-weight, 500);
-	letter-spacing: var(--reltio-details-title-letter-spacing, 0.045px);
+	font-weight: 500;
+	letter-spacing: 0.045px;
 }
 
-._chevron_1njq6_57 {
+.Details_chevron__L29wd {
 	flex-shrink: 0;
-	transition: transform var(--reltio-details-transition-duration, 195ms)
-		var(--reltio-details-transition-ease, cubic-bezier(0.4, 0, 0.2, 1));
-	color: var(--reltio-details-chevron-color, #0e0e25);
-	width: var(--reltio-details-chevron-size, 24px);
-	height: var(--reltio-details-chevron-size, 24px);
+	transition: transform 195ms cubic-bezier(0.4, 0, 0.2, 1);
+	color: var(--reltio-color-text);
+	width: 24px;
+	height: 24px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
-._chevronOpen_1njq6_69 {
+.Details_chevronOpen__L29wd {
 	transform: rotate(180deg);
 }
 
-._content_1njq6_73 {
-	padding: 0 var(--reltio-details-content-padding, 12px)
-		var(--reltio-details-content-padding, 12px)
-		var(--reltio-details-content-padding, 12px);
-	color: var(--reltio-details-content-text-color, #0e0e25);
-	line-height: var(--reltio-details-content-line-height, 1.71);
+.Details_content__L29wd {
+	padding: 0 12px 12px 12px;
+	color: var(--reltio-color-text);
+	line-height: 1.71;
 }
 
-._content_1njq6_73 pre {
+.Details_content__L29wd pre {
 	margin: 0;
-	background-color: var(--reltio-details-code-background-color, #f5f5fa);
-	border-radius: var(--reltio-details-content-pre-radius, 8px);
-	padding: var(--reltio-details-content-pre-padding, 16px);
+	background-color: var(--reltio-color-surface-2);
+	border-radius: 8px;
+	padding: 16px;
+	border: 1px solid var(--reltio-color-border-2);
 }
 
-._content_1njq6_73 code {
-	color: var(--reltio-details-content-code-color, #0e0e25);
-	background-color: #f5f5f5;
+.Details_content__L29wd code {
+	color: var(--reltio-color-text);
+	background-color: var(--reltio-color-surface-2);
 	padding: 0.2em 0.4em;
 	border-radius: 3px;
 	font-family: monospace;
 	font-size: 0.9em;
 }
 
-._content_1njq6_73 p {
-	margin-top: var(--reltio-details-content-p-margin, 8px);
-	margin-bottom: var(--reltio-details-content-p-margin, 8px);
+[data-theme="dark"] .Details_root__L29wd {
+	background-color: var(--reltio-color-surface-2);
+}
+
+[data-theme="dark"] .Details_content__L29wd pre,
+[data-theme="dark"] .Details_content__L29wd code {
+	background-color: color-mix(
+		in srgb,
+		var(--reltio-color-border-2) 40%,
+		var(--reltio-color-surface-2)
+	);
+}
+
+.Details_content__L29wd p {
+	margin-top: 8px;
+	margin-bottom: 8px;
 }
 `);
 export default json;

package/components/Details/Details.module.css.json

@@ -1 +1 @@
-{ "root": "_root_1njq6_1", "summary": "_summary_1njq6_14", "icon": "_icon_1njq6_43", "summaryText": "_summaryText_1njq6_51", "chevron": "_chevron_1njq6_57", "chevronOpen": "_chevronOpen_1njq6_69", "content": "_content_1njq6_73" }
+{ "root": "Details_root__L29wd", "summary": "Details_summary__L29wd", "icon": "Details_icon__L29wd", "summaryText": "Details_summaryText__L29wd", "chevron": "Details_chevron__L29wd", "chevronOpen": "Details_chevronOpen__L29wd", "content": "Details_content__L29wd" }

package/components/Details/Details.types.d.ts

@@ -1,55 +1,8 @@
-import type React from "react";
-/**
- * CSS custom properties supported by Details (for style overrides).
- * Values are CSS strings (e.g. colors, lengths, var(...)).
- */
-/** Order matches Details.module.css (.root → .summary → .chevron → .content). */
-export type DetailsStyleVars = {
-    "--reltio-details-background-color"?: string;
-    "--reltio-details-border-color"?: string;
-    "--reltio-details-border-radius"?: string;
-    "--reltio-details-border-width"?: string;
-    "--reltio-details-font-family"?: string;
-    "--reltio-details-font-size"?: string;
-    "--reltio-details-summary-text-color"?: string;
-    "--reltio-details-summary-hover-bg"?: string;
-    "--reltio-details-summary-padding"?: string;
-    "--reltio-details-summary-gap"?: string;
-    "--reltio-details-summary-line-height"?: string;
-    "--reltio-details-title-font-weight"?: string;
-    "--reltio-details-title-letter-spacing"?: string;
-    "--reltio-details-chevron-size"?: string;
-    "--reltio-details-chevron-color"?: string;
-    "--reltio-details-transition-duration"?: string;
-    "--reltio-details-transition-ease"?: string;
-    "--reltio-details-content-text-color"?: string;
-    "--reltio-details-content-line-height"?: string;
-    "--reltio-details-content-padding"?: string;
-    "--reltio-details-content-code-color"?: string;
-    "--reltio-details-content-pre-padding"?: string;
-    "--reltio-details-content-pre-radius"?: string;
-    "--reltio-details-content-p-margin"?: string;
-    "--reltio-details-code-background-color"?: string;
-};
+import type { HtmlProps } from "../../utils/types";
 /**
  * Props for the Details component
  */
-export type DetailsProps = {
-    /**
-     * Whether the details element is initially open
-     * @default false
-     */
+export type DetailsProps = HtmlProps<"details", {
+    /** @default false */
     open?: boolean;
-    /**
-     * Content of the details element (can include summary and other content)
-     */
-    children: React.ReactNode;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Additional CSS variables (and standard style props)
-     */
-    style?: React.CSSProperties & DetailsStyleVars;
-} & Omit<React.DetailsHTMLAttributes<HTMLDetailsElement>, "open" | "className" | "style" | "children">;
+}>;

package/components/ErrorMessage/ErrorMessage.js

@@ -8,5 +8,5 @@ const DEFAULT_MESSAGE = "Something went wrong. Please try again.";
  * Uses role="alert" and aria-live for screen reader announcements.
  */
 export const ErrorMessage = ({ children, className, ...rest }) => {
-    return (_jsxs("div", { className: classNames(styles.root, className), role: "alert", "aria-live": "polite", ...rest, children: [_jsx("span", { className: styles.iconWrapper, "aria-hidden": "true", children: _jsx(ErrorCircle, { size: "small", color: "error" }) }), _jsx("p", { className: styles.text, children: children || DEFAULT_MESSAGE })] }));
+    return (_jsxs("div", { className: classNames(styles.root, className), role: "alert", "aria-live": "polite", ...rest, children: [_jsx("span", { className: classNames(styles.iconWrapper), "aria-hidden": "true", children: _jsx(ErrorCircle, { size: "small", color: "error" }) }), _jsx("p", { className: classNames(styles.text), children: children || DEFAULT_MESSAGE })] }));
 };

package/components/ErrorMessage/ErrorMessage.module.css.js

@@ -1,31 +1,19 @@
 import styleInject from 'style-inject';
 import json from './ErrorMessage.module.css.json';
 styleInject(`
-/* CSS Custom Properties - All defined on .root with --reltio-error-message- prefix */
-._root_gqx9m_1 {
-	--reltio-error-message-bg: #fef2f2;
-	--reltio-error-message-border-color: #fecaca;
-	--reltio-error-message-text-color: #b91c1c;
-	--reltio-error-message-icon-color: #dc2626;
-	--reltio-error-message-padding: 12px 16px;
-	--reltio-error-message-gap: 8px;
-	--reltio-error-message-border-radius: 8px;
-	--reltio-error-message-border-width: 1px;
-	--reltio-error-message-icon-size: 20px;
-
+.ErrorMessage_root__L29wd {
 	display: flex;
 	align-items: flex-start;
-	gap: var(--reltio-error-message-gap, 8px);
-	padding: var(--reltio-error-message-padding, 12px 16px);
-	background-color: var(--reltio-error-message-bg, #fef2f2);
-	border: var(--reltio-error-message-border-width, 1px) solid
-		var(--reltio-error-message-border-color, #fecaca);
-	border-radius: var(--reltio-error-message-border-radius, 8px);
+	gap: 8px;
+	padding: 12px 16px;
+	background-color: var(--reltio-color-error-soft);
+	border: 1px solid var(--reltio-color-error);
+	border-radius: 8px;
 	box-sizing: border-box;
 }
 
-._text_gqx9m_24 {
-	color: var(--reltio-error-message-text-color, #b91c1c);
+.ErrorMessage_text__L29wd {
+	color: var(--reltio-color-error-font);
 	font-size: 14px;
 	line-height: 1.5;
 	margin: 0;
@@ -33,16 +21,16 @@ styleInject(`
 	min-width: 0;
 }
 
-._iconWrapper_gqx9m_33 {
+.ErrorMessage_iconWrapper__L29wd {
 	flex-shrink: 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: var(--reltio-error-message-icon-size, 20px);
-	height: var(--reltio-error-message-icon-size, 20px);
+	width: 20px;
+	height: 20px;
 }
 
-._iconWrapper_gqx9m_33 svg {
+.ErrorMessage_iconWrapper__L29wd svg {
 	width: 100%;
 	height: 100%;
 }

package/components/ErrorMessage/ErrorMessage.module.css.json

@@ -1 +1 @@
-{ "root": "_root_gqx9m_1", "text": "_text_gqx9m_24", "iconWrapper": "_iconWrapper_gqx9m_33" }
+{ "root": "ErrorMessage_root__L29wd", "text": "ErrorMessage_text__L29wd", "iconWrapper": "ErrorMessage_iconWrapper__L29wd" }

package/components/ErrorMessage/ErrorMessage.types.d.ts

@@ -1,14 +1,11 @@
 import type React from "react";
+import type { HtmlProps } from "../../utils/types";
 /**
  * Props for the ErrorMessage component
  */
-export type ErrorMessageProps = {
+export type ErrorMessageProps = HtmlProps<"div", {
     /**
      * Custom error message text. When not provided or empty, a default message is shown.
      */
     children?: React.ReactNode | null;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-} & Omit<React.ComponentPropsWithoutRef<"div">, "children" | "className">;
+}>;

package/components/Markdown/Markdown.d.ts

@@ -5,4 +5,4 @@ import type { MarkdownProps } from "./Markdown.types";
  * (GFM), raw HTML rendering with proper sanitization, and optional
  * tag-to-component overrides via the components prop.
  */
-export declare const Markdown: ({ children, className, style, }: React.PropsWithChildren<MarkdownProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Markdown: ({ children, className, style, ...rest }: MarkdownProps) => import("react/jsx-runtime").JSX.Element;

package/components/Markdown/Markdown.js

@@ -10,12 +10,12 @@ import { allowedOverrides, baseOverrides } from "./markdownOverrides";
  * (GFM), raw HTML rendering with proper sanitization, and optional
  * tag-to-component overrides via the components prop.
  */
-export const Markdown = ({ children, className, style, }) => {
+export const Markdown = ({ children, className, style, ...rest }) => {
     if (children === null || children === undefined) {
         return null;
     }
     const composedClassName = classNames(styles.root, className);
-    return (_jsx("div", { className: composedClassName, style: style, children: _jsx(ErrorBoundary, { fallback: _jsx("pre", { className: styles.error, children: children }), children: _jsx(MarkdownToJsx, { options: {
+    return (_jsx("div", { className: composedClassName, style: style, ...rest, children: _jsx(ErrorBoundary, { fallback: _jsx("pre", { className: classNames(styles.error), children: children }), children: _jsx(MarkdownToJsx, { options: {
                     overrides: {
                         ...baseOverrides,
                         ...allowedOverrides,