@reltio/design 0.1.0 → 0.2.0

package/components/Markdown/Markdown.module.css.js

@@ -2,227 +2,205 @@ import styleInject from 'style-inject';
 import json from './Markdown.module.css.json';
 styleInject(`
 /* Error fallback when markdown fails to parse */
-._error_1ixrx_2 {
+.Markdown_error__L29wd {
 	white-space: pre-wrap;
 	word-break: break-word;
 }
 
 /* ── Root ── */
-._root_1ixrx_8 {
+.Markdown_root__L29wd {
 	word-wrap: break-word;
-	line-height: var(--reltio-markdown-line-height, 1.5);
-	font-family: var(--reltio-markdown-font-family, "Roboto Flex", sans-serif);
-	font-size: var(--reltio-markdown-font-size, 14px);
-	font-weight: var(--reltio-markdown-font-weight, 400);
-	letter-spacing: var(--reltio-markdown-letter-spacing, 0.15px);
-	color: var(--reltio-markdown-color-text, #0e0e25);
+	line-height: 1.5;
+	font-family: "Roboto Flex", sans-serif;
+	font-size: 14px;
+	font-weight: 400;
+	letter-spacing: 0.15px;
+	color: var(--reltio-color-text);
 }
 
 /* ── Paragraphs ── */
-._root_1ixrx_8 p {
+.Markdown_root__L29wd p {
 	margin: 8px 0 7px 0;
-	line-height: var(--reltio-markdown-line-height, 1.5);
+	line-height: 1.5;
 }
 
-._root_1ixrx_8 p:not(:last-child) {
-	margin-bottom: var(--reltio-markdown-paragraph-margin-bottom, 0.5rem);
+.Markdown_root__L29wd p:not(:last-child) {
+	margin-bottom: 0.5rem;
 }
 
 /* ── Headings ── */
-._root_1ixrx_8 h1,
-._root_1ixrx_8 h2,
-._root_1ixrx_8 h3,
-._root_1ixrx_8 h4,
-._root_1ixrx_8 h5,
-._root_1ixrx_8 h6 {
-	margin: var(--reltio-markdown-heading-margin, 1rem 0 0.5rem 0);
+.Markdown_root__L29wd h1,
+.Markdown_root__L29wd h2,
+.Markdown_root__L29wd h3,
+.Markdown_root__L29wd h4,
+.Markdown_root__L29wd h5,
+.Markdown_root__L29wd h6 {
+	margin: 1rem 0 0.5rem 0;
 	font-weight: 600;
 	font-family: "Libre Franklin", sans-serif;
 }
 
-._root_1ixrx_8 h1 {
-	font-size: var(--reltio-markdown-heading1-size, 1.5rem);
+.Markdown_root__L29wd h1 {
+	font-size: 1.5rem;
 }
 
-._root_1ixrx_8 h2 {
-	font-size: var(--reltio-markdown-heading2-size, 1.25rem);
+.Markdown_root__L29wd h2 {
+	font-size: 1.25rem;
 }
 
-._root_1ixrx_8 h3 {
-	font-size: var(--reltio-markdown-heading3-size, 1.1rem);
+.Markdown_root__L29wd h3 {
+	font-size: 1.1rem;
 }
 
-._root_1ixrx_8 h4 {
-	font-size: var(--reltio-markdown-heading4-size, 1rem);
+.Markdown_root__L29wd h4 {
+	font-size: 1rem;
 }
 
-._root_1ixrx_8 h5 {
-	font-size: var(--reltio-markdown-heading5-size, 0.95rem);
+.Markdown_root__L29wd h5 {
+	font-size: 0.95rem;
 }
 
-._root_1ixrx_8 h6 {
-	font-size: var(--reltio-markdown-heading6-size, 0.9rem);
+.Markdown_root__L29wd h6 {
+	font-size: 0.9rem;
 }
 
 /* ── Emphasis ── */
-._root_1ixrx_8 strong {
+.Markdown_root__L29wd strong {
 	font-weight: 600;
 }
 
-._root_1ixrx_8 em {
+.Markdown_root__L29wd em {
 	font-style: italic;
 }
 
 /* ── Lists ── */
-._root_1ixrx_8 ul,
-._root_1ixrx_8 ol {
-	margin: var(--reltio-markdown-list-margin, 0.5rem 0);
-	padding-left: var(--reltio-markdown-list-padding-left, 1.5rem);
+.Markdown_root__L29wd ul,
+.Markdown_root__L29wd ol {
+	margin: 0.5rem 0;
+	padding-left: 1.5rem;
 }
 
-._root_1ixrx_8 li {
-	margin: var(--reltio-markdown-list-item-margin, 0.25rem 0);
+.Markdown_root__L29wd li {
+	margin: 0.25rem 0;
 }
 
 /* ── Code ── */
-._root_1ixrx_8 pre {
+.Markdown_root__L29wd pre {
 	overflow-x: auto;
 	margin: 0;
-	background-color: #e3e3f2;
+	background-color: var(--reltio-color-surface-2);
 	border-radius: 8px;
 	padding: 16px;
-	border: 1px solid #e3e3f2;
+	border: 1px solid var(--reltio-color-border-2);
 }
 
-._root_1ixrx_8 code {
-	font-family: var(--reltio-markdown-code-font-family, monospace);
-	font-size: var(--reltio-markdown-code-font-size, 0.9em);
-	background-color: var(--reltio-markdown-color-code-background, #f5f5f5);
-	padding: var(--reltio-markdown-code-padding, 0.2em 0.4em);
-	border-radius: var(--reltio-markdown-code-border-radius, 3px);
+.Markdown_root__L29wd code {
+	font-family: monospace;
+	font-size: 0.9em;
+	background-color: var(--reltio-color-surface-2);
+	padding: 0.2em 0.4em;
+	border-radius: 3px;
+	border: 1px solid var(--reltio-color-border-2);
 }
 
-._root_1ixrx_8 pre code {
+.Markdown_root__L29wd pre code {
 	background-color: transparent;
 	padding: 0;
+	border: none;
+	border-radius: 0;
 }
 
 /* ── Links ── */
-._root_1ixrx_8 a {
-	color: var(--reltio-markdown-color-link, #0000cc);
+.Markdown_root__L29wd a {
+	color: var(--reltio-color-primary);
 	text-decoration: underline;
 }
 
-._root_1ixrx_8 a:hover {
+.Markdown_root__L29wd a:hover {
 	text-decoration: none;
 }
 
 /* ── Blockquote ── */
-._root_1ixrx_8 blockquote {
-	border-left: var(--reltio-markdown-blockquote-border-width, 4px) solid
-		var(--reltio-markdown-color-blockquote-border, #ddd);
-	margin: var(--reltio-markdown-blockquote-margin, 1rem 0);
-	padding-left: var(--reltio-markdown-blockquote-padding-left, 1rem);
-	color: var(--reltio-markdown-color-blockquote-text, #666);
+.Markdown_root__L29wd blockquote {
+	border-left: 4px solid var(--reltio-color-border-2);
+	margin: 1rem 0;
+	padding-left: 1rem;
+	color: var(--reltio-color-text-secondary);
 }
 
 /* ── Tables ── */
-._tableWrapper_1ixrx_127 {
-	font-family: var(--reltio-markdown-base-font, "Roboto Flex", sans-serif);
+.Markdown_tableWrapper__L29wd {
 	width: 100%;
-	border-collapse: collapse;
-	position: relative;
-	color: var(--color-text, #0e0e25);
-	background-color: #ffffff;
-	border: 1px solid #9898b34d;
+	border: 1px solid var(--reltio-color-border-2);
 	border-radius: 16px;
 	overflow: auto;
-	box-sizing: border-box;
-	font-size: 14px;
 }
 
-._tableWrapper_1ixrx_127 table {
+.Markdown_tableWrapper__L29wd table {
 	width: 100%;
 	border-collapse: collapse;
+	font-family: "Roboto Flex", sans-serif;
+	color: var(--reltio-color-text);
+	background-color: var(--reltio-color-surface-1);
+	font-size: 14px;
 }
 
-._tableWrapper_1ixrx_127 thead {
+.Markdown_tableWrapper__L29wd thead {
 	position: sticky;
 	top: 0;
 	z-index: 1;
-	box-shadow: 0 1px 0 #9898b34d;
+	box-shadow: 0 1px 0 var(--reltio-color-border-2);
 }
 
-._tableWrapper_1ixrx_127 th {
+.Markdown_tableWrapper__L29wd th {
 	padding: 16px;
 	font-weight: 600;
 	text-align: left;
-	border-right: 1px solid #9898b34d;
-	background-color: #e3e3f2;
+	border-right: 1px solid var(--reltio-color-border-2);
+	background-color: var(--reltio-color-surface-2);
 }
 
-._tableWrapper_1ixrx_127 th:last-child {
+.Markdown_tableWrapper__L29wd th:last-child {
 	border-right: none;
 }
 
-._tableWrapper_1ixrx_127 td {
+.Markdown_tableWrapper__L29wd td {
 	padding: 8px 16px;
-	border-bottom: 1px solid #9898b34d;
-	border-right: 1px solid #9898b34d;
+	border-bottom: 1px solid var(--reltio-color-border-2);
+	border-right: 1px solid var(--reltio-color-border-2);
 	text-align: left;
-	background-color: var(--reltio-markdown-color-table-cell-background, #ffffff);
+	background-color: var(--reltio-color-surface-1);
 }
 
-._tableWrapper_1ixrx_127 td:last-child {
+.Markdown_tableWrapper__L29wd td:last-child {
 	border-right: none;
 }
 
-._tableWrapper_1ixrx_127 tr:hover td {
-	background-color: var(--color-table-row-hover, #f5f5fa);
+.Markdown_tableWrapper__L29wd tr:hover td {
+	background-color: var(--reltio-color-surface-2);
 }
 
-._tableWrapper_1ixrx_127 tr:last-child td {
+.Markdown_tableWrapper__L29wd tr:last-child td {
 	border-bottom: none;
 }
 
 /* ── Strikethrough ── */
-._root_1ixrx_8 del {
+.Markdown_root__L29wd del {
 	text-decoration: line-through;
-	color: var(--reltio-markdown-color-del, #595972);
+	color: var(--reltio-color-text-placeholder);
 }
 
 /* ── Checkboxes ── */
-._root_1ixrx_8 input[type="checkbox"] {
-	margin-right: var(--reltio-spacing-xs, 8px);
+.Markdown_root__L29wd input[type="checkbox"] {
+	margin-right: 8px;
 	cursor: not-allowed;
 }
 
 /* ── Horizontal rule ── */
-._root_1ixrx_8 hr {
+.Markdown_root__L29wd hr {
 	border: none;
-	border-top: 1px solid var(--color-border, #ddd);
+	border-top: 1px solid var(--reltio-color-border-2);
 	margin: 1.5rem 0;
 }
-
-/* ── Responsive ── */
-@media (max-width: 768px) {
-	._tableWrapper_1ixrx_127 table {
-		display: block;
-		overflow-x: auto;
-		-webkit-overflow-scrolling: touch;
-	}
-
-	._root_1ixrx_8 h1 {
-		font-size: 1.3rem;
-	}
-
-	._root_1ixrx_8 h2 {
-		font-size: 1.15rem;
-	}
-
-	._root_1ixrx_8 h3 {
-		font-size: 1.05rem;
-	}
-}
 `);
 export default json;

package/components/Markdown/Markdown.module.css.json

@@ -1 +1 @@
-{ "error": "_error_1ixrx_2", "root": "_root_1ixrx_8", "tableWrapper": "_tableWrapper_1ixrx_127" }
+{ "error": "Markdown_error__L29wd", "root": "Markdown_root__L29wd", "tableWrapper": "Markdown_tableWrapper__L29wd" }

package/components/Markdown/Markdown.types.d.ts

@@ -1,54 +1,4 @@
-import type React from "react";
-/**
- * CSS custom properties for the Markdown component.
- */
-export type MarkdownCSSVariables = {
-    /** Base typography */
-    "--reltio-markdown-font-family"?: string;
-    "--reltio-markdown-font-size"?: string;
-    "--reltio-markdown-font-weight"?: string;
-    "--reltio-markdown-line-height"?: string;
-    "--reltio-markdown-letter-spacing"?: string;
-    "--reltio-markdown-base-font"?: string;
-    /** Heading sizes */
-    "--reltio-markdown-heading1-size"?: string;
-    "--reltio-markdown-heading2-size"?: string;
-    "--reltio-markdown-heading3-size"?: string;
-    "--reltio-markdown-heading4-size"?: string;
-    "--reltio-markdown-heading5-size"?: string;
-    "--reltio-markdown-heading6-size"?: string;
-    /** Code */
-    "--reltio-markdown-code-font-family"?: string;
-    "--reltio-markdown-code-font-size"?: string;
-    "--reltio-markdown-color-code-background"?: string;
-    "--reltio-markdown-code-padding"?: string;
-    "--reltio-markdown-code-border-radius"?: string;
-    /** Colors */
-    "--reltio-markdown-color-text"?: string;
-    "--reltio-markdown-color-link"?: string;
-    "--reltio-markdown-color-blockquote-border"?: string;
-    "--reltio-markdown-color-blockquote-text"?: string;
-    "--reltio-markdown-color-table-cell-background"?: string;
-    /** Spacing */
-    "--reltio-markdown-paragraph-margin-bottom"?: string;
-    "--reltio-markdown-heading-margin"?: string;
-    "--reltio-markdown-list-margin"?: string;
-    "--reltio-markdown-list-padding-left"?: string;
-    "--reltio-markdown-list-item-margin"?: string;
-    "--reltio-markdown-blockquote-margin"?: string;
-    "--reltio-markdown-blockquote-padding-left"?: string;
-    "--reltio-markdown-blockquote-border-width"?: string;
-};
 /**
  * Props for the Markdown component
  */
-export type MarkdownProps = {
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Additional inline styles and CSS variable overrides
-     */
-    style?: React.CSSProperties & MarkdownCSSVariables;
-};
+export type MarkdownProps = React.ComponentPropsWithoutRef<"div">;

package/components/Skeleton/Skeleton.d.ts

@@ -4,4 +4,4 @@ import type { SkeletonProps } from "./Skeleton.types";
  * (moving gradient) animation. Used as a loading placeholder to reserve space
  * and indicate that content is loading. Full width by default.
  */
-export declare const Skeleton: ({ rows, className, ...rest }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Skeleton: ({ rows, size, className, style, ...rest }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;

package/components/Skeleton/Skeleton.js

@@ -8,9 +8,10 @@ const DEFAULT_ROWS = 3;
  * (moving gradient) animation. Used as a loading placeholder to reserve space
  * and indicate that content is loading. Full width by default.
  */
-export const Skeleton = ({ rows = DEFAULT_ROWS, className, ...rest }) => {
+export const Skeleton = ({ rows = DEFAULT_ROWS, size, className, style, ...rest }) => {
     const rowCount = Math.max(1, Math.floor(Number(rows)) || DEFAULT_ROWS);
+    const rowStyle = size ? { height: size } : undefined;
     return (
     // biome-ignore lint/a11y/useSemanticElements: status role is correct for loading placeholder; output is for calculation results
-    _jsx("div", { className: classNames(styles.skeletonRoot, className), "aria-busy": "true", "aria-label": DEFAULT_LABEL, role: "status", ...rest, children: Array.from({ length: rowCount }, (_, i) => (_jsx("div", { className: styles.row, "aria-hidden": "true" }, i))) }));
+    _jsx("div", { className: classNames(styles.skeletonRoot, className), "aria-busy": "true", "aria-label": DEFAULT_LABEL, role: "status", style: style, ...rest, children: Array.from({ length: rowCount }, (_, i) => (_jsx("div", { className: classNames(styles.row), style: rowStyle, "aria-hidden": "true" }, i))) }));
 };

package/components/Skeleton/Skeleton.module.css.js

@@ -1,46 +1,44 @@
 import styleInject from 'style-inject';
 import json from './Skeleton.module.css.json';
 styleInject(`
-._skeletonRoot_1e8wa_1 {
-	--reltio-skeleton-row-height: 16px;
-	--reltio-skeleton-row-gap: 12px;
+.Skeleton_skeletonRoot__L29wd {
 	width: 100%;
 	display: flex;
 	flex-direction: column;
-	gap: var(--reltio-skeleton-row-gap, 12px);
+	gap: 12px;
 }
 
-._row_1e8wa_10 {
+.Skeleton_row__L29wd {
 	width: 100%;
-	height: var(--reltio-skeleton-row-height, 16px);
-	background-color: #f5f5fa;
+	height: 16px;
+	background-color: var(--reltio-color-surface-2);
 	overflow: hidden;
 	position: relative;
 }
 
-._row_1e8wa_10::before {
+.Skeleton_row__L29wd::before {
 	content: "";
 	position: absolute;
 	top: 0;
 	left: 0;
 	bottom: 0;
-	background-color: #9898b34d;
-	animation: _indeterminate1_1e8wa_1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
+	background-color: var(--reltio-color-bg-transparent-1);
+	animation: Skeleton_indeterminate1__L29wd 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
 		infinite;
 }
 
-._row_1e8wa_10::after {
+.Skeleton_row__L29wd::after {
 	content: "";
 	position: absolute;
 	top: 0;
 	left: 0;
 	bottom: 0;
-	background-color: #9898b34d;
-	animation: _indeterminate2_1e8wa_1 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+	background-color: var(--reltio-color-bg-transparent-1);
+	animation: Skeleton_indeterminate2__L29wd 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
 	animation-delay: 1.15s;
 }
 
-@keyframes _indeterminate1_1e8wa_1 {
+@keyframes Skeleton_indeterminate1__L29wd {
 	0% {
 		left: -35%;
 		right: 100%;
@@ -55,7 +53,7 @@ styleInject(`
 	}
 }
 
-@keyframes _indeterminate2_1e8wa_1 {
+@keyframes Skeleton_indeterminate2__L29wd {
 	0% {
 		left: -200%;
 		right: 100%;

package/components/Skeleton/Skeleton.module.css.json

@@ -1 +1 @@
-{ "skeletonRoot": "_skeletonRoot_1e8wa_1", "row": "_row_1e8wa_10", "indeterminate1": "_indeterminate1_1e8wa_1", "indeterminate2": "_indeterminate2_1e8wa_1" }
+{ "skeletonRoot": "Skeleton_skeletonRoot__L29wd", "row": "Skeleton_row__L29wd", "indeterminate1": "Skeleton_indeterminate1__L29wd", "indeterminate2": "Skeleton_indeterminate2__L29wd" }

package/components/Skeleton/Skeleton.types.d.ts

@@ -1,31 +1,13 @@
-import type React from "react";
+import type { HtmlProps } from "../../utils/types";
 /**
  * Props for the Skeleton component
  */
-export type SkeletonProps = {
+export type SkeletonProps = Omit<HtmlProps<"div", {
     /**
      * Number of rectangular placeholder bars to display
      * @default 3
      */
     rows?: number;
-    /**
-     * Size (number) passed to styles; affects line height and line gap of placeholder bars (e.g. pixels).
-     * @default 16
-     */
-    size?: number;
-    /**
-     * Accessible label for screen readers. When not provided, a default label is used.
-     */
-    label?: string;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Inline styles (e.g. for CSS variable overrides)
-     */
-    style?: React.CSSProperties & {
-        "--reltio-skeleton-row-height"?: string;
-        "--reltio-skeleton-row-gap"?: string;
-    };
-} & Omit<React.ComponentPropsWithoutRef<"div">, "children" | "className" | "style">;
+    /** Height of each row bar (e.g. "16px", "1rem", "2em"). Defaults to 16px. */
+    size?: string;
+}>, "children">;

package/components/TextArea/TextArea.d.ts

@@ -1,22 +1,3 @@
-export declare const TextArea: import("react").ForwardRefExoticComponent<{
-    label?: string;
-    error?: boolean;
-    supportingText?: string;
-    toolbar?: import("react").ReactNode;
-    style?: import("react").CSSProperties & {
-        "--reltio-textarea-font-family"?: string;
-        "--reltio-textarea-font-size"?: string;
-        "--reltio-textarea-line-height"?: string;
-        "--reltio-textarea-color-text"?: string;
-        "--reltio-textarea-color-border"?: string;
-        "--reltio-textarea-color-border-focus"?: string;
-        "--reltio-textarea-color-background"?: string;
-        "--reltio-textarea-color-error"?: string;
-        "--reltio-textarea-color-label"?: string;
-        "--reltio-textarea-color-supporting-text"?: string;
-        "--reltio-textarea-border-radius"?: string;
-        "--reltio-textarea-padding"?: string;
-        "--reltio-textarea-min-height"?: string;
-        "--reltio-textarea-max-height"?: string;
-    };
-} & Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "style"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+import type React from "react";
+import type { TextAreaProps } from "./TextArea.types";
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/components/TextArea/TextArea.js

@@ -1,13 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
+import { forwardRef } from "react";
 import { classNames } from "../../utils/classNames";
 import styles from "./TextArea.module.css";
-export const TextArea = forwardRef(({ label, error, supportingText, toolbar, className, id: providedId, ...rest }, ref) => {
-    const generatedId = useId();
-    const textareaId = providedId || generatedId;
-    const supportingTextId = `${textareaId}-supporting`;
+export const TextArea = forwardRef(({ label, error, supportingText, toolbar, className, ...rest }, ref) => {
     const hasValue = String(rest.value ?? rest.defaultValue ?? "").length > 0;
-    return (_jsxs("div", { "data-error": error || undefined, "data-disabled": rest.disabled || undefined, "data-has-value": hasValue || undefined, className: classNames(styles.root, className), children: [_jsxs("label", { htmlFor: textareaId, className: classNames(styles.inputContainer), children: [_jsx("textarea", { ref: ref, id: textareaId, className: classNames(styles.textarea), placeholder: label || rest.placeholder, "aria-invalid": error || undefined, "aria-describedby": supportingText ? supportingTextId : undefined, ...rest }), label && _jsx("span", { className: classNames(styles.label), children: label }), toolbar && (_jsx("div", { className: classNames(styles.toolbar), children: toolbar }))] }), supportingText && (_jsx("div", { id: supportingTextId, className: classNames(styles.supportingText), children: supportingText }))] }));
+    return (_jsxs("div", { "data-error": error || undefined, "data-disabled": rest.disabled || undefined, "data-has-value": hasValue || undefined, className: classNames(styles.root, className), children: [_jsxs("label", { className: classNames(styles.inputContainer), children: [_jsx("textarea", { ref: ref, className: classNames(styles.textarea), placeholder: label || rest.placeholder, "aria-invalid": error || undefined, ...rest }), label && _jsx("span", { className: classNames(styles.label), children: label }), toolbar && (_jsx("div", { className: classNames(styles.toolbar), children: toolbar }))] }), supportingText && (_jsx("div", { className: classNames(styles.supportingText), children: supportingText }))] }));
 });
 TextArea.displayName = "TextArea";