@dbcdk/react-components 0.0.9 → 0.0.12

package/dist/components/forms/radio-buttons/RadioButtons.module.css

@@ -0,0 +1,117 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.controlWrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Real input stays for a11y, but visually hidden */
+.input {
+  position: absolute;
+  inset: 0;
+  width: var(--component-size-xs);
+  height: var(--component-size-xs);
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+/* The visible radio */
+.radio {
+  width: var(--component-size-xs);
+  height: var(--component-size-xs);
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  background: var(--color-bg-surface);
+  border: 2px solid rgba(0, 0, 0, 0.25);
+
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    background-color 120ms ease;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  transform: scale(0);
+  transition: transform 120ms ease;
+  background: var(--color-brand);
+}
+
+/* checked state */
+.checked {
+  border-color: var(--color-brand);
+}
+.checked .dot {
+  transform: scale(1);
+}
+
+/* hover (only when not disabled) */
+.input:not(:disabled):hover + .radio {
+  border-color: var(--color-brand-hover);
+}
+
+/* focus ring */
+.input:focus-visible + .radio {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 30%, transparent);
+  border-color: var(--color-brand-strong);
+}
+
+/* disabled */
+.disabled {
+  opacity: 0.5;
+}
+.input:disabled {
+  cursor: not-allowed;
+}
+
+.label {
+  cursor: pointer;
+  user-select: none;
+}
+
+.primary.checked {
+  background: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
+}
+
+.default {
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
+/* Sizes */
+.sm {
+  width: 16px;
+  height: 16px;
+}
+.sm .dot {
+  width: 8px;
+  height: 8px;
+}
+
+.md {
+  width: 20px;
+  height: 20px;
+}
+.md .dot {
+  width: 10px;
+  height: 10px;
+}
+
+.lg {
+  width: 24px;
+  height: 24px;
+}
+.lg .dot {
+  width: 12px;
+  height: 12px;
+}

package/dist/components/forms/select/Select.d.ts

@@ -18,5 +18,5 @@ export type SelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' |
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
 };
-export declare function Select<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, }: SelectProps<T>): React.ReactNode;
+export declare function Select<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, }: SelectProps<T>): React.ReactNode;
 export {};

package/dist/components/forms/select/Select.js

@@ -10,7 +10,7 @@ import { Popover } from '../../popover/Popover';
 import { InputContainer } from '../input-container/InputContainer';
 export function Select({ 
 // InputContainer props
-label, error, helpText, orientation = 'vertical', labelWidth = '120px', fullWidth = true, required, tooltip, tooltipPlacement = 'right', 
+label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, tooltip, tooltipPlacement = 'right', modified = false, 
 // Select props
 id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'outlined', onClear, datakey, dataCy, disabled, }) {
     const generatedId = useId();
@@ -72,10 +72,10 @@ id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'ou
             ids.push(tooltipId);
         return ids.length ? ids.join(' ') : undefined;
     })();
-    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, children: [_jsx(Popover, { ref: popoverRef, trigger: (onClick, icon) => (_jsx(Button, { disabled: disabled, ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
+    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: [_jsx(Popover, { ref: popoverRef, trigger: (onClick, icon) => (_jsx(Button, { disabled: disabled, ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
                         setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
                         onClick(e);
-                    }, size: size, type: "button", "aria-haspopup": "listbox", "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : placeholder }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+                    }, size: size, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : placeholder }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
                         const isSelected = typeof opt.value === 'object' && typeof selectedValue === 'object' && datakey
                             ? (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[datakey]) === opt.value[datakey]
                             : opt.value === selectedValue;

package/dist/components/forms/text-area/Textarea.js

@@ -4,9 +4,9 @@ import { useCallback, useId, useMemo } from 'react';
 import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
 import styles from './Textarea.module.css';
 import { InputContainer } from '../input-container/InputContainer';
-export const Textarea = function Textarea({ value, inputChanged, disabled, rows = 3, showCount, tooltip, tooltipPlacement = 'right', showTooltip, placeholder, adjustHeight, id, 
+export const Textarea = function Textarea({ value, inputChanged, disabled, rows = 3, showCount, tooltip, tooltipPlacement = 'right', showTooltip, placeholder, adjustHeight, id, modified = false, 
 // InputContainer props
-label, error, helpText, orientation = 'horizontal', labelWidth = '120px', fullWidth = false, required, 
+label, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required, 
 // Native textarea props
 className, ...rest }) {
     const generatedId = useId();
@@ -28,6 +28,6 @@ className, ...rest }) {
         placement: tooltipPlacement,
         offset: 8,
     });
-    return (_jsx(InputContainer, { label: label, htmlFor: textareaId, error: error, helpText: helpText, helpTextAddition: showCount ? `${value === null || value === void 0 ? void 0 : value.length} tegn i denne boks` : undefined, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: _jsx("div", { className: styles.container, children: _jsx("div", { ...(tooltipEnabled ? triggerProps : {}), children: inputField }) }) }));
+    return (_jsx(InputContainer, { modified: modified, label: label, htmlFor: textareaId, error: error, helpText: helpText, helpTextAddition: showCount ? `${value === null || value === void 0 ? void 0 : value.length} tegn i denne boks` : undefined, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: _jsx("div", { className: styles.container, children: _jsx("div", { ...(tooltipEnabled ? triggerProps : {}), children: inputField }) }) }));
 };
 Textarea.displayName = 'Textarea';

package/dist/components/forms/text-area/Textarea.module.css

@@ -9,6 +9,14 @@
   font-family: var(--font-family);
 }
 
+.container textarea:disabled {
+  background-color: var(--color-disabled-bg);
+  border: 0;
+  color: var(--color-disabled-fg);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 .internalCount {
   text-align: right;
   font-size: var(--font-size-sm);
@@ -22,5 +30,4 @@
 .container textarea:focus-visible {
   outline: none;
   border-color: var(--color-border-selected);
-  box-shadow: var(--focus-ring);
 }

package/dist/components/headline/Headline.d.ts

@@ -10,13 +10,8 @@ interface HeadlineProps extends React.AriaAttributes {
     subHeadline?: string | JSX.Element;
     addition?: React.ReactNode;
     icon?: React.ReactNode;
-    /**
-     * Optional visual tone override:
-     * - dark: force normal foreground colours
-     * - light: force on-strong/light text
-     * If omitted, the headline simply inherits its colour from its parent.
-     */
+    allowWrap?: boolean;
     tone?: HeadlineTone;
 }
-export declare function Headline({ size, marker, disableMargin, children, severity, weight, subHeadline, addition, icon, tone, }: PropsWithChildren<HeadlineProps>): React.ReactNode;
+export declare function Headline({ size, marker, disableMargin, children, severity, weight, subHeadline, addition, icon, tone, allowWrap, }: PropsWithChildren<HeadlineProps>): React.ReactNode;
 export {};

package/dist/components/headline/Headline.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import styles from './Headline.module.css';
 import { SeverityBgColor } from '../../constants/severity';
 import { Icon } from '../icon/Icon';
-export function Headline({ size = 2, marker, disableMargin, children, severity, weight = 600, subHeadline, addition, icon, tone, }) {
+export function Headline({ size = 2, marker, disableMargin, children, severity, weight = 600, subHeadline, addition, icon, tone, allowWrap = true, }) {
     const Tag = `h${size}`;
     const containerClassName = [styles.headlineContainer, tone ? styles[`tone-${tone}`] : '']
         .filter(Boolean)
@@ -15,8 +15,11 @@ export function Headline({ size = 2, marker, disableMargin, children, severity,
     ]
         .filter(Boolean)
         .join(' ');
+    const textClassName = [styles.text, allowWrap ? styles.wrap : styles.truncate]
+        .filter(Boolean)
+        .join(' ');
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: containerClassName, children: [_jsxs(Tag, { style: {
                             '--font-weight': weight,
                             '--marker-color': severity ? SeverityBgColor[severity] : undefined,
-                        }, className: headlineClassName, children: [icon || (severity && !marker) ? _jsx(Icon, { customIcon: icon, severity: severity }) : null, children] }), addition] }), subHeadline && _jsx("div", { className: styles.subHeadline, children: subHeadline })] }));
+                        }, className: headlineClassName, children: [icon || (severity && !marker) ? (_jsx("span", { className: styles.icon, children: _jsx(Icon, { customIcon: icon, severity: severity }) })) : null, _jsx("span", { className: textClassName, children: children })] }), addition] }), subHeadline && _jsx("div", { className: styles.subHeadline, children: subHeadline })] }));
 }

package/dist/components/headline/Headline.module.css

@@ -3,6 +3,7 @@
   align-items: center;
   gap: var(--spacing-lg);
   flex-wrap: wrap;
+  max-width: 100%;
 }
 
 /* Base headline: inherit colour from parent surface */
@@ -18,8 +19,6 @@
   transition: color var(--transition-fast) var(--ease-standard);
 }
 
-/* Optional tone overrides for special cases (hero sections, etc.) */
-
 .tone-dark .headline {
   color: var(--color-fg-default);
 }
@@ -58,3 +57,63 @@
   margin-block-start: calc(var(--spacing-2xs) * -1);
   line-height: var(--line-height-normal);
 }
+
+.headline {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-weight: var(--font-weight, var(--font-weight-bold));
+  letter-spacing: var(--letter-spacing-tight);
+  color: inherit;
+  line-height: var(--line-height-tight);
+  transition: color var(--transition-fast) var(--ease-standard);
+
+  /* Needed so truncation works inside flex parents */
+  min-width: 0;
+}
+
+/* Truncated variant (single line with ellipsis) */
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.headline {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-weight: var(--font-weight, var(--font-weight-bold));
+  letter-spacing: var(--letter-spacing-tight);
+  color: inherit;
+  line-height: var(--line-height-tight);
+  transition: color var(--transition-fast) var(--ease-standard);
+
+  /* helps inside flex parents */
+  min-width: 0;
+}
+
+.icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* text wrapper must be the shrinkable element */
+.text {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.wrap {
+  white-space: normal;
+  overflow: visible;
+}

package/dist/components/hyperlink/Hyperlink.d.ts

@@ -1,9 +1,22 @@
 import * as React from 'react';
-interface HyperlinkProps {
-    component: React.ReactElement;
-    className?: string;
+type BaseProps = {
+    children: React.ReactNode;
     icon?: React.ReactNode;
-    disableIcon?: boolean;
-}
-export declare function Hyperlink({ component, icon }: HyperlinkProps): React.ReactElement;
+    className?: string;
+    /**
+     * If true, Hyperlink will NOT render <a>.
+     * Instead, it will clone its only child (e.g. Next <Link>) and apply styling/props to it.
+     */
+    asChild?: boolean;
+    variant?: 'primary' | 'secondary';
+    inline?: boolean;
+};
+type AnchorProps = BaseProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    as?: 'a';
+};
+type ButtonProps = BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    as: 'button';
+};
+type HyperlinkProps = AnchorProps | ButtonProps;
+export declare function Hyperlink(props: HyperlinkProps): React.ReactElement;
 export {};

package/dist/components/hyperlink/Hyperlink.js

@@ -1,11 +1,39 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import styles from './Hyperlink.module.css';
-export function Hyperlink({ component, icon }) {
-    const originalProps = component.props;
-    return React.cloneElement(component, {
-        ...originalProps,
-        className: styles.link,
-        onClick: (e) => e.stopPropagation(),
-    }, _jsxs(_Fragment, { children: [_jsx("span", { className: styles.content, children: originalProps.children }), icon && _jsx("span", { className: styles.icon, children: icon })] }));
+function cx(...parts) {
+    return parts.filter(Boolean).join(' ');
+}
+function renderInner(children, icon) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.content, children: children }), icon && _jsx("span", { className: styles.icon, children: icon })] }));
+}
+export function Hyperlink(props) {
+    var _a;
+    const { children, icon, className, asChild, as = 'a', variant = 'primary', inline = true, ...rest } = props;
+    const linkClassName = cx(styles.link, className, variant === 'secondary' ? styles.secondary : styles.primary, inline ? '' : styles.block);
+    if (asChild) {
+        const child = React.Children.only(children);
+        if (!React.isValidElement(child)) {
+            throw new Error('Hyperlink with asChild expects a single valid React element as its child.');
+        }
+        const childProps = (_a = child.props) !== null && _a !== void 0 ? _a : {};
+        return React.cloneElement(child, {
+            ...childProps,
+            ...rest,
+            className: cx(childProps.className, linkClassName),
+            children: renderInner(childProps.children, icon),
+            onClick: (e) => {
+                e.stopPropagation();
+                if (childProps.onClick) {
+                    childProps.onClick(e);
+                }
+            },
+        });
+    }
+    if (as === 'button') {
+        // (Optional) guardrail: avoid accidentally passing href to a button
+        // const { href, ...buttonRest } = rest as any
+        return (_jsx("button", { type: "button", className: linkClassName, ...rest, children: renderInner(children, icon) }));
+    }
+    return (_jsx("a", { onClick: e => e.stopPropagation(), className: linkClassName, ...rest, children: renderInner(children, icon) }));
 }

package/dist/components/hyperlink/Hyperlink.module.css

@@ -2,13 +2,61 @@
   display: inline-flex;
   gap: var(--spacing-xs);
   position: relative;
+  font-weight: normal;
+  background: none;
+  border: none;
+  padding: 0;
   text-decoration: none;
-  color: var(--color-brand);
   font-size: inherit;
+  font-family: inherit;
+  cursor: pointer;
+  color: var(--color-brand);
+  line-height: inherit;
+}
+
+.link.secondary {
+  color: var(--color-fg-default);
 }
 
 .link:hover {
-  text-decoration: underline;
+  color: var(--color-brand);
+}
+
+.link.primary {
+  position: relative;
+  color: var(--color-brand);
+  text-decoration: none;
+}
+
+.link.block {
+  background: var(--color-bg-contextual-subtle);
+  display: inline-block;
+  padding: var(--spacing-xs);
+  &:hover {
+    background-color: var(--color-bg-contextual);
+  }
+}
+
+.link::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 100%;
+  height: 1px;
+  background-color: currentColor;
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 100ms ease;
+}
+
+.link:hover::after {
+  transform: scaleX(1);
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--color-brand);
+  outline-offset: 2px;
 }
 
 .icon {

package/dist/components/icon/Icon.module.css

@@ -4,6 +4,7 @@
   vertical-align: middle;
   gap: var(--spacing-xxs);
   color: var(--color-fg-subtle);
+  font-size: var(--font-size-sm);
 }
 
 .icon {

package/dist/components/interval-select/IntervalSelect.js

@@ -10,7 +10,7 @@ import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTr
 import { Popover } from '../../components/popover/Popover';
 export function IntervalSelect({ 
 // InputContainer props
-label, error, helpText, orientation = 'vertical', labelWidth = '120px', fullWidth = true, required, 
+label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, 
 // tooltip
 tooltip, tooltipPlacement = 'right', 
 // IntervalSelect props

package/dist/components/menu/Menu.d.ts

@@ -2,11 +2,43 @@ import * as React from 'react';
 export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     children: React.ReactNode;
 }
+/**
+ * Use when you need a visual divider inside a Menu.
+ * Renders a non-interactive <li role="separator" />
+ */
+export type MenuSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
 export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
     active?: boolean;
     disabled?: boolean;
 }
+export interface MenuCheckItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
+    label: React.ReactNode;
+    checked: boolean;
+    disabled?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+export interface MenuRadioItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
+    /**
+     * Shared group name for the radio items in this menu section.
+     * (Required by your RadioButton component)
+     */
+    name: string;
+    /**
+     * This option's value.
+     */
+    value: string;
+    /**
+     * Whether this radio option is selected.
+     */
+    checked: boolean;
+    disabled?: boolean;
+    label: string;
+    onValueChange?: (value: string) => void;
+}
 export declare const Menu: React.FC<MenuProps> & {
     Item: React.FC<MenuItemProps>;
+    CheckItem: React.FC<MenuCheckItemProps>;
+    RadioItem: React.FC<MenuRadioItemProps>;
+    Separator: React.FC<MenuSeparatorProps>;
 };

package/dist/components/menu/Menu.js

@@ -2,28 +2,88 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import styles from './Menu.module.css';
+import { Checkbox } from '../forms/checkbox/Checkbox';
+import { RadioButton } from '../forms/radio-buttons/RadioButton';
 const MenuBase = React.forwardRef(({ children, className, ...props }, ref) => (_jsx("ul", { ref: ref, role: "menu", className: [styles.container, className].filter(Boolean).join(' '), ...props, children: children })));
 MenuBase.displayName = 'Menu';
 const isInteractiveEl = (el) => React.isValidElement(el) &&
-    (typeof el.type === 'string' ? el.type === 'a' || el.type === 'button' : true); // allow custom/Next Link components
+    (typeof el.type === 'string' ? el.type === 'a' || el.type === 'button' : true);
+/**
+ * Apply menu styles not only to the interactive element itself,
+ * but also to immediate children (covers cases where the direct child is a <div>
+ * wrapping a button-like thing, or components that render a wrapper).
+ */
+function applyMenuItemPropsToElement(child, opts) {
+    const { active, disabled, role = 'menuitem', tabIndex = -1, className } = opts;
+    const childClass = [styles.item, active ? styles.active : ''].filter(Boolean).join(' ');
+    // Always apply styling to the immediate child
+    const nextImmediate = React.cloneElement(child, {
+        className: [child.props.className, styles.interactiveChild, className]
+            .filter(Boolean)
+            .join(' '),
+    });
+    // If the immediate child is already interactive, we can apply full a11y+styles there
+    if (typeof child.type === 'string' && (child.type === 'a' || child.type === 'button')) {
+        return React.cloneElement(child, {
+            role,
+            tabIndex,
+            'aria-selected': active || undefined,
+            'aria-disabled': disabled || undefined,
+            className: [child.props.className, styles.interactive, childClass, className]
+                .filter(Boolean)
+                .join(' '),
+            ...(child.type === 'button' ? { disabled } : {}),
+        });
+    }
+    // For custom components, we *assume* they forward props.
+    return React.cloneElement(nextImmediate, {
+        role,
+        tabIndex,
+        'aria-selected': active || undefined,
+        'aria-disabled': disabled || undefined,
+        className: [nextImmediate.props.className, styles.interactive, childClass]
+            .filter(Boolean)
+            .join(' '),
+        disabled,
+    });
+}
 const MenuItem = React.forwardRef(({ children, active, disabled, className, ...liProps }, ref) => {
-    // If child is interactive (a/button/NextLink), clone it and style it.
     if (isInteractiveEl(children)) {
         const child = children;
-        const childClass = [styles.item, active ? styles.active : ''].filter(Boolean).join(' ');
-        return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: React.cloneElement(child, {
-                role: 'menuitem',
-                tabIndex: -1,
-                'aria-selected': active || undefined,
-                'aria-disabled': disabled || undefined,
-                className: [child.props.className, styles.interactive, childClass]
-                    .filter(Boolean)
-                    .join(' '),
-            }) }));
+        return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: applyMenuItemPropsToElement(child, { active, disabled }) }));
     }
+    // Fallback: we wrap non-interactive children in a <button>
     return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("button", { role: "menuitem", tabIndex: -1, "aria-selected": active || undefined, "aria-disabled": disabled || undefined, className: [styles.interactive, styles.item, active ? styles.active : '']
                 .filter(Boolean)
                 .join(' '), type: "button", disabled: disabled, children: children }) }));
 });
 MenuItem.displayName = 'Menu.Item';
-export const Menu = Object.assign(MenuBase, { Item: MenuItem });
+/**
+ * Menu checkbox row that uses your Checkbox component.
+ * Note: this is a *control inside a menu*, so we lean on your Checkbox a11y (`role="checkbox"`)
+ * rather than forcing `menuitemcheckbox` roles.
+ */
+const MenuCheckItem = React.forwardRef(({ label, checked, disabled, onCheckedChange, className, ...liProps }, ref) => {
+    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, children: _jsx(Checkbox, { noContainer: true, checked: checked, disabled: disabled, label: label, 
+                // Your Checkbox emits (checked, mouseEvent)
+                onChange: (next, _e) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(next) }) }) }));
+});
+MenuCheckItem.displayName = 'Menu.CheckItem';
+/**
+ * Menu radio row that uses your RadioButton component.
+ * Same note as above: we keep your native radio semantics.
+ */
+const MenuRadioItem = React.forwardRef(({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {
+    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, children: _jsx(RadioButton, { noContainer: true, name: name, value: value, checked: checked, disabled: disabled, label: label, 
+                // Your RadioButton emits (value, changeEvent)
+                onChange: (v, _e) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(v) }) }) }));
+});
+MenuRadioItem.displayName = 'Menu.RadioItem';
+const MenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, role: "separator", className: [styles.separator, className].filter(Boolean).join(' '), ...props })));
+MenuSeparator.displayName = 'Menu.Separator';
+export const Menu = Object.assign(MenuBase, {
+    Item: MenuItem,
+    CheckItem: MenuCheckItem,
+    RadioItem: MenuRadioItem,
+    Separator: MenuSeparator,
+});