@krrli/cm-designsystem 1.20.1 → 1.20.2

package/dist/components/navi-button/NaviButton.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { tv } from "tailwind-variants";
+import { cn, tv } from "tailwind-variants";
+import { AccessibleButton, } from "../accessible-button/AccessibleButton";
 import { Label } from "../typography/Label";
 const naviButtonStyles = tv({
     base: [
@@ -24,6 +25,10 @@ const naviButtonStyles = tv({
         },
     },
 });
-export const NaviButton = ({ intent = "secondary", ...props }) => {
-    return (_jsxs("button", { className: naviButtonStyles({ intent, ...props }), onClick: props.onClick, "aria-label": props.label, children: [props.children, _jsx(Label, { as: "span", size: "sm", children: props.label })] }));
+/**
+ * A navigation-style button component that combines an accessible,
+ * keyboard-friendly button foundation with variant-based styling.
+ */
+export const NaviButton = ({ intent = "secondary", className, ...props }) => {
+    return (_jsxs(AccessibleButton, { className: cn(className, naviButtonStyles({ intent, ...props })), ...props, children: [props.icon && _jsx(props.icon, { className: props.iconClassName }), _jsx(Label, { as: "span", size: "md", children: props.children })] }));
 };

package/dist/components/navi-button/NaviButton.test.js

@@ -6,7 +6,7 @@ import { NaviButton } from "./NaviButton";
 describe("NaviButton", () => {
     test("should render button with icon", async () => {
         // Arrange
-        render(_jsx(NaviButton, { label: "button", onClick: vi.fn(), children: _jsx(Mumble, {}) }));
+        render(_jsx(NaviButton, { onClick: vi.fn(), icon: Mumble, children: "button" }));
         // Assert
         expect(screen.getByRole("button")).toBeVisible();
         expect(screen.getByRole("button")).toHaveTextContent("button");
@@ -15,7 +15,7 @@ describe("NaviButton", () => {
     test("should call onClick when clicked", () => {
         // Arrange
         const onClick = vi.fn();
-        render(_jsx(NaviButton, { label: "button", onClick: onClick, children: _jsx(Mumble, {}) }));
+        render(_jsx(NaviButton, { onClick: onClick, icon: Mumble, children: "button" }));
         fireEvent.click(screen.getByRole("button"));
         expect(onClick).toHaveBeenCalled();
     });

package/dist/components/navi-user-button/NaviUserButton.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
 import { type VariantProps } from "tailwind-variants";
+import { type BaseAccessibleButtonProps } from "../accessible-button/AccessibleButton";
 declare const naviUserButtonStyles: import("tailwind-variants").TVReturnType<{
     intent: {
         secondary: string[];
@@ -15,12 +15,30 @@ declare const naviUserButtonStyles: import("tailwind-variants").TVReturnType<{
 }, undefined, string[], unknown, unknown, undefined>>;
 type NaviUserButtonVariants = VariantProps<typeof naviUserButtonStyles>;
 type NaviUserButtonIntent = "secondary";
-interface NaviUserButtonProps extends NaviUserButtonVariants {
-    ariaLabel: string;
+/**
+ * Props for the NaviUserButton component.
+ *
+ * @inheritdoc BaseAccessibleButtonProps
+ * @inheritdoc NaviUserButtonVariants
+ */
+interface NaviUserButtonProps extends NaviUserButtonVariants, BaseAccessibleButtonProps {
+    /**
+     * Visual intent of the button (controls background color, hover, and active styles).
+     */
     intent?: NaviUserButtonIntent;
+    /**
+     * Source URL for the user avatar image.
+     */
     src: string;
-    onClick: () => void;
-    children: React.ReactNode;
+    /**
+     * Accessible alt text describing the avatar.
+     * Required for proper screen reader support.
+     */
+    alt: string;
 }
-export declare const NaviUserButton: ({ intent, ...props }: NaviUserButtonProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A user-focused navigation button that displays a user avatar and behaves
+ * like an accessible, keyboard-friendly button.
+ */
+export declare const NaviUserButton: React.FC<NaviUserButtonProps>;
 export {};

package/dist/components/navi-user-button/NaviUserButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { tv } from "tailwind-variants";
+import { cn, tv } from "tailwind-variants";
+import { AccessibleButton, } from "../accessible-button/AccessibleButton";
 import { Avatar } from "../avatar/Avatar";
 const naviUserButtonStyles = tv({
     base: [
@@ -24,6 +24,10 @@ const naviUserButtonStyles = tv({
         },
     },
 });
-export const NaviUserButton = ({ intent = "secondary", ...props }) => {
-    return (_jsx("button", { className: naviUserButtonStyles({ intent, ...props }), onClick: props.onClick, "aria-label": props.ariaLabel, children: _jsx(Avatar, { label: props.ariaLabel, size: "sm", src: props.src, children: props.children }) }));
+/**
+ * A user-focused navigation button that displays a user avatar and behaves
+ * like an accessible, keyboard-friendly button.
+ */
+export const NaviUserButton = ({ intent = "secondary", className, ...props }) => {
+    return (_jsx(AccessibleButton, { className: cn(className, naviUserButtonStyles({ intent, ...props })), ...props, children: _jsx(Avatar, { alt: props.alt, size: "sm", src: props.src }) }));
 };

package/dist/components/round-button/RoundButton.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import { type BaseAccessibleButtonProps } from "../accessible-button/AccessibleButton";
 import type { IconBaseProps } from "../icons/IconBase";
 declare const roundButtonStyles: import("tailwind-variants").TVReturnType<{
     intent: {
@@ -15,11 +16,29 @@ declare const roundButtonStyles: import("tailwind-variants").TVReturnType<{
 }, undefined, string[], unknown, unknown, undefined>>;
 type RoundButtonVariants = VariantProps<typeof roundButtonStyles>;
 type RoundButtonIntent = "primary";
-interface RoundButtonProps extends RoundButtonVariants {
+/**
+ * Props for the RoundButton component.
+ *
+ * @inheritdoc BaseAccessibleButtonProps
+ * @inheritdoc RoundButtonVariants
+ */
+interface RoundButtonProps extends RoundButtonVariants, BaseAccessibleButtonProps {
+    /**
+     * Visual intent of the button (controls background color, hover, and active styles).
+     */
     intent?: RoundButtonIntent;
+    /**
+     * Accessible label for the button, used by screen readers.
+     */
     ariaLabel: string;
-    onClick: () => void;
-    children: React.ReactElement<IconBaseProps>;
+    /**
+     * Icon element rendered alongside the button label.
+     */
+    icon: React.ComponentType<IconBaseProps>;
 }
-export declare const RoundButton: ({ intent, ...props }: RoundButtonProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A circular, icon-only button component that provides full accessibility,
+ * keyboard interaction, and visual feedback through hover and active states.
+ */
+export declare const RoundButton: React.FC<RoundButtonProps>;
 export {};

package/dist/components/round-button/RoundButton.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { tv } from "tailwind-variants";
+import { cn, tv } from "tailwind-variants";
+import { AccessibleButton, } from "../accessible-button/AccessibleButton";
 const roundButtonStyles = tv({
     base: [
         "text-white",
@@ -23,6 +24,10 @@ const roundButtonStyles = tv({
         },
     },
 });
-export const RoundButton = ({ intent = "primary", ...props }) => {
-    return (_jsx("button", { className: roundButtonStyles({ intent }), onClick: props.onClick, "aria-label": props.ariaLabel, children: props.children }));
+/**
+ * A circular, icon-only button component that provides full accessibility,
+ * keyboard interaction, and visual feedback through hover and active states.
+ */
+export const RoundButton = ({ intent = "primary", className, ...props }) => {
+    return (_jsx(AccessibleButton, { className: cn(className, roundButtonStyles({ intent })), ...props, children: _jsx(props.icon, {}) }));
 };

package/dist/components/round-button/RoundButton.test.js

@@ -6,15 +6,16 @@ import { RoundButton } from "./RoundButton";
 describe("RoundButton", () => {
     test("should render button with icon", async () => {
         // Arrange
-        render(_jsx(RoundButton, { onClick: vi.fn(), ariaLabel: "Mumble", children: _jsx(Mumble, {}) }));
+        render(_jsx(RoundButton, { onClick: vi.fn(), ariaLabel: "Mumble", icon: Mumble }));
         // Assert
         expect(screen.getByRole("button")).toBeVisible();
+        expect(screen.getByLabelText("Mumble")).toBeVisible();
         expect(screen.getByText("Mumble")).toBeVisible();
     });
     test("should call onChange when second tab clicked", () => {
         // Arrange
         const onClick = vi.fn();
-        render(_jsx(RoundButton, { onClick: onClick, ariaLabel: "Mumble", children: _jsx(Mumble, {}) }));
+        render(_jsx(RoundButton, { onClick: onClick, ariaLabel: "Mumble", icon: Mumble }));
         fireEvent.click(screen.getByRole("button"));
         expect(onClick).toHaveBeenCalled();
     });

package/dist/components/timed-button/TimedButton.d.ts

@@ -1,4 +1,6 @@
 import { type VariantProps } from "tailwind-variants";
+import { type BaseAccessibleButtonProps } from "../accessible-button/AccessibleButton";
+import type { IconBaseProps } from "../icons/IconBase";
 declare const timedButtonStyles: import("tailwind-variants").TVReturnType<{
     pressed: {
         false: {};
@@ -46,11 +48,32 @@ declare const timedButtonStyles: import("tailwind-variants").TVReturnType<{
     label: string[];
 }, undefined, unknown, unknown, undefined>>;
 type TimedButtonVariants = VariantProps<typeof timedButtonStyles>;
-interface TimedButtonProps extends TimedButtonVariants {
-    onClick: () => void;
-    icon?: React.ReactNode;
-    label?: string;
-    labelActive?: string;
+/**
+ * Props for the TimedButton component.
+ *
+ * @inheritdoc BaseAccessibleButtonProps
+ * @inheritdoc TimedButtonVariants
+ */
+interface TimedButtonProps extends TimedButtonVariants, BaseAccessibleButtonProps {
+    /**
+     * Optional icon element rendered alongside the button label.
+     */
+    icon?: React.ComponentType<IconBaseProps>;
+    /**
+     * Default label displayed on the button.
+     *
+     * This is the visible text before the button is clicked or activated.
+     */
+    label: string;
+    /**
+     * Active label displayed temporarily after the button is clicked.
+     *
+     * Typically used to show feedback, e.g., `"Link copied!"`.
+     */
+    labelActive: string;
 }
-export declare const TimedButton: ({ onClick, icon, label, labelActive, }: TimedButtonProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A button component that temporarily changes its label when pressed.
+ */
+export declare const TimedButton: React.FC<TimedButtonProps>;
 export {};

package/dist/components/timed-button/TimedButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { tv } from "tailwind-variants";
-import { Share } from "../icons/generated";
+import { cn, tv } from "tailwind-variants";
+import { AccessibleButton, } from "../accessible-button/AccessibleButton";
 import { Label } from "../typography/Label";
 const timedButtonStyles = tv({
     slots: {
@@ -22,7 +22,7 @@ const timedButtonStyles = tv({
             "hover:bg-slate-100",
             "overflow-hidden",
         ],
-        icon: ["inline-flex"],
+        icon: ["w-4", "h-4", "inline-flex"],
         label: ["transition-opacity", "duration-350", "ease-in-out"],
     },
     variants: {
@@ -72,7 +72,10 @@ const timedButtonStyles = tv({
         animating: false,
     },
 });
-export const TimedButton = ({ onClick, icon = _jsx(Share, {}), label = "Copy Link", labelActive = "Link copied", }) => {
+/**
+ * A button component that temporarily changes its label when pressed.
+ */
+export const TimedButton = ({ className, onClick, ...props }) => {
     const [pressed, setPressed] = useState(false);
     const [animating, setAnimating] = useState(false);
     const timeoutsRef = useRef([]);
@@ -88,7 +91,7 @@ export const TimedButton = ({ onClick, icon = _jsx(Share, {}), label = "Copy Lin
         // Klick -> Pressed
         setPressed(true);
         setAnimating(true);
-        onClick();
+        onClick?.();
         // Hover -> Pressed: Dissolve über 350ms
         const timeout1 = setTimeout(() => setAnimating(false), 350);
         timeoutsRef.current.push(timeout1);
@@ -102,5 +105,5 @@ export const TimedButton = ({ onClick, icon = _jsx(Share, {}), label = "Copy Lin
         }, 1000);
         timeoutsRef.current.push(timeout2);
     };
-    return (_jsxs("button", { className: base(), onClick: handleClick, children: [_jsx("span", { className: iconClass(), "aria-hidden": "true", "aria-label": "Share", children: icon }), _jsx("span", { className: labelClass(), children: _jsx(Label, { as: "span", size: "md", children: pressed ? labelActive : label }) })] }));
+    return (_jsxs(AccessibleButton, { className: cn(className, base(props)), onClick: handleClick, ...props, children: [props.icon && _jsx(props.icon, { className: iconClass(), "aria-hidden": "true" }), _jsx(Label, { as: "span", size: "md", className: labelClass(), children: pressed ? props.labelActive : props.label })] }));
 };

package/dist/components/timed-button/TimedButton.test.js

@@ -1,31 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { describe, expect, test, vi } from "vitest";
+import { Share } from "../icons/generated";
 import { TimedButton } from "./TimedButton";
 describe("TimedButton", () => {
     test("should render icon and label", async () => {
         // Arrange
-        render(_jsx(TimedButton, { onClick: function () { }, label: "Copy Link", labelActive: "Link Copied" }));
+        render(_jsx(TimedButton, { onClick: function () { }, icon: Share, label: "Copy Link", labelActive: "Link Copied" }));
         const button = screen.getByRole("button");
         expect(button).toBeVisible();
         expect(button).toHaveTextContent("Copy Link");
         // Icon prüfen
-        expect(screen.getByLabelText("Share")).toBeInTheDocument();
+        expect(screen.getByText("Share")).toBeInTheDocument();
     });
     test("renders initial state and toggles correctly", async () => {
         // Arrange
         const onClick = vi.fn();
-        render(_jsx(TimedButton, { onClick: onClick, label: "Copy Link", labelActive: "Link Copied" }));
+        render(_jsx(TimedButton, { onClick: onClick, icon: Share, label: "Copy Link", labelActive: "Link Copied" }));
         const button = screen.getByRole("button");
         expect(button).toBeVisible();
         // Initial state with Likes
         expect(button).toHaveTextContent("Copy Link");
-        expect(screen.getByLabelText("Share")).toBeInTheDocument();
+        expect(screen.getByText("Share")).toBeInTheDocument();
         // Simulate click
         fireEvent.click(button);
         // Immediate state after click: "Liked" label + HeartFilled
         expect(button).toHaveTextContent("Link Copied");
-        expect(screen.getByLabelText("Share")).toBeInTheDocument();
+        expect(screen.getByText("Share")).toBeInTheDocument();
         expect(onClick).toHaveBeenCalled();
         // Wait for animation + likes count update (1s delay + 350ms animation)
         await waitFor(() => {

package/dist/components/typography/AccessibleTypography.d.ts

@@ -0,0 +1,33 @@
+import { type JSX } from "react";
+/**
+ * Props for the Typography component.
+ */
+export interface AccessibleTypographyProps {
+    /**
+     * The HTML tag to render (e.g., "p", "h1", "span").
+     * Determines the semantic element used for the text.
+     */
+    as?: keyof JSX.IntrinsicElements;
+    /**
+     * Additional Tailwind or custom class names to apply.
+     */
+    className?: string;
+    /**
+     * Defines the ARIA role of the element.
+     */
+    role?: string;
+    /**
+     * The accessible label associated with this element.
+     * Useful when the visible text isn’t descriptive enough.
+     */
+    ariaLabel?: string;
+    /**
+     * The content to be rendered inside the element.
+     */
+    children: React.ReactNode;
+}
+/**
+ * A flexible, semantic, accessible typography component that allows you
+ * to set the HTML tag and optionally make it clickable.
+ */
+export declare const AccessibleTypography: React.FC<AccessibleTypographyProps>;

package/dist/components/typography/AccessibleTypography.js

@@ -0,0 +1,11 @@
+import { createElement } from "react";
+/**
+ * A flexible, semantic, accessible typography component that allows you
+ * to set the HTML tag and optionally make it clickable.
+ */
+export const AccessibleTypography = (props) => {
+    return createElement(props.as ?? "span", {
+        className: props.className,
+        "aria-label": props.ariaLabel,
+    }, props.children);
+};

package/dist/components/typography/Heading.d.ts

@@ -1,17 +1,24 @@
-import { type JSX } from "react";
 import { type VariantProps } from "tailwind-variants";
+import { type AccessibleTypographyProps } from "./AccessibleTypography";
 import { headingStyles } from "./styles";
+import type { JSX } from "react";
 type HeadingVariants = VariantProps<typeof headingStyles>;
 type HeadingSize = "1" | "2" | "3" | "4";
-interface HeadingProps extends HeadingVariants {
-    size: HeadingSize;
+/**
+ * Heading component props.
+ *
+ * @inheritDoc TypographyProps
+ * @inheritDoc HeadingVariants
+ */
+interface HeadingProps extends HeadingVariants, AccessibleTypographyProps {
     as: keyof JSX.IntrinsicElements;
-    className?: string;
-    children: React.ReactNode;
+    /**
+     * Controls the visual size of the heading.
+     */
+    size: HeadingSize;
 }
-export declare const Heading: ({ as, className, ...props }: HeadingProps) => import("react").ReactElement<{
-    role: string;
-    "aria-level": HeadingSize;
-    className: string;
-}, string | import("react").JSXElementConstructor<any>>;
+/**
+ * A semantic, accessible Heading component built on top of the AccessibleTypography component.
+ */
+export declare const Heading: React.FC<HeadingProps>;
 export {};

package/dist/components/typography/Heading.js

@@ -1,11 +1,11 @@
-import { createElement } from "react";
-import { twMerge } from "tailwind-merge";
-import {} from "tailwind-variants";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "tailwind-variants";
+import { AccessibleTypography, } from "./AccessibleTypography";
 import { headingStyles } from "./styles";
+/**
+ * A semantic, accessible Heading component built on top of the AccessibleTypography component.
+ */
 export const Heading = ({ as, className, ...props }) => {
-    return createElement(as, {
-        role: "heading",
-        "aria-level": props.size,
-        className: twMerge(className, headingStyles(props)),
-    }, props.children);
+    const styles = cn(className, headingStyles(props));
+    return _jsx(AccessibleTypography, { as: as, className: styles, ...props });
 };

package/dist/components/typography/Label.d.ts

@@ -1,15 +1,22 @@
-import { type JSX } from "react";
 import { type VariantProps } from "tailwind-variants";
+import { type AccessibleTypographyProps } from "./AccessibleTypography";
 import { labelStyles } from "./styles";
 type LabelVariants = VariantProps<typeof labelStyles>;
 type LabelSize = "xl" | "lg" | "md" | "sm";
-interface LabelProps extends LabelVariants {
+/**
+ * Label component props.
+ *
+ * @inheritDoc TypographyProps
+ * @inheritDoc LabelVariants
+ */
+interface LabelProps extends LabelVariants, AccessibleTypographyProps {
+    /**
+     * Controls the visual size of the label.
+     */
     size: LabelSize;
-    as?: keyof JSX.IntrinsicElements;
-    className?: string;
-    children: React.ReactNode;
 }
-export declare const Label: ({ as, className, ...props }: LabelProps) => import("react").ReactElement<{
-    className: string;
-}, string | import("react").JSXElementConstructor<any>>;
+/**
+ * A semantic, accessible Label component built on top of the AccessibleTypography component.
+ */
+export declare const Label: React.FC<LabelProps>;
 export {};

package/dist/components/typography/Label.js

@@ -1,7 +1,11 @@
-import { createElement } from "react";
-import { twMerge } from "tailwind-merge";
-import {} from "tailwind-variants";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "tailwind-variants";
+import { AccessibleTypography, } from "./AccessibleTypography";
 import { labelStyles } from "./styles";
+/**
+ * A semantic, accessible Label component built on top of the AccessibleTypography component.
+ */
 export const Label = ({ as = "label", className, ...props }) => {
-    return createElement(as, { className: twMerge(className, labelStyles(props)) }, props.children);
+    const styles = cn(className, labelStyles(props));
+    return _jsx(AccessibleTypography, { as: as, className: styles, ...props });
 };

package/dist/components/typography/Paragraph.d.ts

@@ -1,15 +1,22 @@
-import { type JSX } from "react";
 import { type VariantProps } from "tailwind-variants";
+import { type AccessibleTypographyProps } from "./AccessibleTypography";
 import { paragraphStyles } from "./styles";
 type ParagraphVariants = VariantProps<typeof paragraphStyles>;
 type ParagraphSize = "lg" | "md";
-interface ParagraphProps extends ParagraphVariants {
+/**
+ * Paragraph component props.
+ *
+ * @inheritDoc TypographyProps
+ * @inheritDoc ParagraphVariants
+ */
+interface ParagraphProps extends ParagraphVariants, AccessibleTypographyProps {
+    /**
+     * Controls the visual size of the paragraph.
+     */
     size: ParagraphSize;
-    as?: keyof JSX.IntrinsicElements;
-    className?: string;
-    children: React.ReactNode;
 }
-export declare const Paragraph: ({ as, className, ...props }: ParagraphProps) => import("react").ReactElement<{
-    className: string;
-}, string | import("react").JSXElementConstructor<any>>;
+/**
+ * A semantic, accessible Paragraph component built on top of the AccessibleTypography component.
+ */
+export declare const Paragraph: React.FC<ParagraphProps>;
 export {};

package/dist/components/typography/Paragraph.js

@@ -1,7 +1,11 @@
-import { createElement } from "react";
-import { twMerge } from "tailwind-merge";
-import {} from "tailwind-variants";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "tailwind-variants";
+import { AccessibleTypography, } from "./AccessibleTypography";
 import { paragraphStyles } from "./styles";
+/**
+ * A semantic, accessible Paragraph component built on top of the AccessibleTypography component.
+ */
 export const Paragraph = ({ as = "p", className, ...props }) => {
-    return createElement(as, { className: twMerge(className, paragraphStyles(props)) }, props.children);
+    const styles = cn(className, paragraphStyles(props));
+    return _jsx(AccessibleTypography, { as: as, className: styles, ...props });
 };

package/dist/components/typography/Placeholder.d.ts

@@ -1,13 +1,17 @@
-import { type JSX } from "react";
 import { type VariantProps } from "tailwind-variants";
+import { type AccessibleTypographyProps } from "./AccessibleTypography";
 import { placeholderStyles } from "./styles";
 type PlaceholderVariants = VariantProps<typeof placeholderStyles>;
-interface PlaceholderProps extends PlaceholderVariants {
-    as?: keyof JSX.IntrinsicElements;
-    className?: string;
-    children: React.ReactNode;
+/**
+ * Placeholder component props.
+ *
+ * @inheritDoc TypographyProps
+ * @inheritDoc PlaceholderVariants
+ */
+interface PlaceholderProps extends PlaceholderVariants, AccessibleTypographyProps {
 }
-export declare const Placeholder: ({ as, className, ...props }: PlaceholderProps) => import("react").ReactElement<{
-    className: string;
-}, string | import("react").JSXElementConstructor<any>>;
+/**
+ * A semantic, accessible Placeholder component built on top of the AccessibleTypography component.
+ */
+export declare const Placeholder: React.FC<PlaceholderProps>;
 export {};

package/dist/components/typography/Placeholder.js

@@ -1,7 +1,11 @@
-import { createElement } from "react";
-import { twMerge } from "tailwind-merge";
-import {} from "tailwind-variants";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "tailwind-variants";
+import { AccessibleTypography, } from "./AccessibleTypography";
 import { placeholderStyles } from "./styles";
+/**
+ * A semantic, accessible Placeholder component built on top of the AccessibleTypography component.
+ */
 export const Placeholder = ({ as = "span", className, ...props }) => {
-    return createElement(as, { className: twMerge(className, placeholderStyles(props)) }, props.children);
+    const styles = cn(className, placeholderStyles(props));
+    return _jsx(AccessibleTypography, { as: as, className: styles, ...props });
 };

package/dist/components/typography/ValidationMessage.d.ts

@@ -1,15 +1,22 @@
-import { type JSX } from "react";
 import { type VariantProps } from "tailwind-variants";
+import { type AccessibleTypographyProps } from "./AccessibleTypography";
 import { validationMessageStyles } from "./styles";
 type ValidationMessageVariants = VariantProps<typeof validationMessageStyles>;
 type ValidationMessageType = "error";
-interface ValidationMessageProps extends ValidationMessageVariants {
-    as?: keyof JSX.IntrinsicElements;
+/**
+ * ValidationMessage component props.
+ *
+ * @inheritDoc TypographyProps
+ * @inheritDoc ValidationMessageVariants
+ */
+interface ValidationMessageProps extends ValidationMessageVariants, AccessibleTypographyProps {
+    /**
+     * Controls the visual variant of the validation message.
+     */
     type?: ValidationMessageType;
-    className?: string;
-    children: React.ReactNode;
 }
-export declare const ValidationMessage: ({ as, type, className, ...props }: ValidationMessageProps) => import("react").ReactElement<{
-    className: string;
-}, string | import("react").JSXElementConstructor<any>>;
+/**
+ * A semantic, accessible ValidationMessage component built on top of the AccessibleTypography component.
+ */
+export declare const ValidationMessage: React.FC<ValidationMessageProps>;
 export {};

package/dist/components/typography/ValidationMessage.js

@@ -1,9 +1,11 @@
-import { createElement } from "react";
-import { twMerge } from "tailwind-merge";
-import {} from "tailwind-variants";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "tailwind-variants";
+import { AccessibleTypography, } from "./AccessibleTypography";
 import { validationMessageStyles } from "./styles";
+/**
+ * A semantic, accessible ValidationMessage component built on top of the AccessibleTypography component.
+ */
 export const ValidationMessage = ({ as = "span", type = "error", className, ...props }) => {
-    return createElement(as, {
-        className: twMerge(className, validationMessageStyles({ type, ...props })),
-    }, props.children);
+    const styles = cn(className, validationMessageStyles({ type, ...props }));
+    return _jsx(AccessibleTypography, { as: as, className: styles, ...props });
 };