@dbcdk/react-components 0.0.5 → 0.0.7

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

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+import { useEffect, useId, useRef, useState } from 'react';
+import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
+import { Button } from '../../button/Button';
+import { ClearButton } from '../../clear-button/ClearButton';
+import { Menu } from '../../menu/Menu';
+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 props
+tooltip, tooltipPlacement = 'right', 
+// Select props
+id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'outlined', onClear, datakey, dataCy, }) {
+    const generatedId = useId();
+    const controlId = id !== null && id !== void 0 ? id : `select-${generatedId}`;
+    const describedById = `${controlId}-desc`;
+    const popoverRef = useRef(null);
+    const optionRefs = useRef([]);
+    const selectedIndex = options.findIndex(o => o.value === selectedValue);
+    const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
+    useEffect(() => {
+        var _a;
+        (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [activeIndex]);
+    const handleKeyDown = (e) => {
+        var _a, _b;
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                setActiveIndex(i => Math.min(i + 1, options.length - 1));
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                setActiveIndex(i => Math.max(i - 1, 0));
+                break;
+            }
+            case 'Enter':
+            case ' ': {
+                e.preventDefault();
+                const opt = options[activeIndex];
+                if (opt) {
+                    onChange(opt.value);
+                    (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                }
+                break;
+            }
+            case 'Escape': {
+                e.preventDefault();
+                (_b = popoverRef.current) === null || _b === void 0 ? void 0 : _b.close();
+                break;
+            }
+        }
+    };
+    const selected = options.find(o => o.value === selectedValue);
+    // Tooltip trigger props (anchor to the Button)
+    const tooltipEnabled = Boolean(tooltip);
+    const { triggerProps, id: tooltipId } = useTooltipTrigger({
+        content: tooltipEnabled ? tooltip : null,
+        placement: tooltipPlacement,
+        offset: 8,
+    });
+    // If you want BOTH tooltip + error/helpText describedby:
+    // merge describedby ids (keeping existing describedById)
+    const describedBy = (() => {
+        const ids = [];
+        if (error || helpText)
+            ids.push(describedById);
+        if (tooltipEnabled)
+            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
+                // IMPORTANT: keep triggerProps last for events, but let our aria-describedby win
+                // We'll spread triggerProps and then override aria-describedby to include both.
+                , { ...(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) => {
+                        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;
+                        const isActive = index === activeIndex;
+                        return (_jsx(Menu.Item, { active: isActive, "aria-selected": isSelected, children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", tabIndex: isActive ? 0 : -1, onClick: () => {
+                                    var _a;
+                                    onChange(opt.value);
+                                    (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                                }, onFocus: () => setActiveIndex(index), style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: isSelected ? _jsx(Check, {}) : null }), opt.label] }) }, String(opt.value)));
+                    }) }) }), (error || helpText) && (_jsx("span", { id: describedById, style: { display: 'none' }, children: error !== null && error !== void 0 ? error : helpText }))] }));
+}

package/dist/components/forms/text-area/Textarea.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { InputContainerProps } from '../input-container/InputContainer';
+export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'disabled'> & Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement'> & {
+    value: string;
+    inputChanged: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    disabled?: boolean;
+    loading?: React.ReactNode;
+    rows?: number;
+    showCount?: boolean;
+    tooltip?: React.ReactNode;
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+    showTooltip?: boolean;
+    adjustHeight?: boolean;
+    placeholder?: string;
+    id?: string;
+};
+export declare const Textarea: React.FC<TextareaProps>;

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

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+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, 
+// InputContainer props
+label, error, helpText, orientation = 'horizontal', labelWidth = '120px', fullWidth = false, required, 
+// Native textarea props
+className, ...rest }) {
+    const generatedId = useId();
+    const textareaId = id !== null && id !== void 0 ? id : `textarea-${generatedId}`;
+    const onInput = useCallback((e) => {
+        const textarea = e.currentTarget;
+        if (adjustHeight) {
+            textarea.style.height = 'auto';
+            textarea.style.height = `${textarea.scrollHeight}px`;
+        }
+        inputChanged(e);
+    }, [inputChanged, adjustHeight]);
+    const inputField = useMemo(() => (_jsx("textarea", { ...rest, id: textareaId, className: [styles.textarea, className].filter(Boolean).join(' '), placeholder: placeholder, rows: rows, value: value, onChange: onInput, disabled: disabled, "aria-invalid": Boolean(error) || undefined })), [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error]);
+    // Enable tooltip if tooltip exists, and if showTooltip is either true or undefined.
+    // (So you can deprecate showTooltip later without breaking callers.)
+    const tooltipEnabled = Boolean(tooltip) && (showTooltip !== null && showTooltip !== void 0 ? showTooltip : true);
+    const { triggerProps } = useTooltipTrigger({
+        content: tooltipEnabled ? tooltip : null,
+        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 }) }) }));
+};
+Textarea.displayName = 'Textarea';

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

@@ -0,0 +1,26 @@
+.container {
+  flex-grow: 1;
+}
+.container textarea {
+  width: 100%;
+  padding: var(--spacing-xs);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-sm);
+  font-family: var(--font-family);
+}
+
+.internalCount {
+  text-align: right;
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-subtle);
+}
+
+.container textarea:hover {
+  border-color: var(--color-border-strong);
+}
+
+.container textarea:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow: var(--focus-ring);
+}

package/dist/components/headline/Headline.js

@@ -1,47 +1,22 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styles from './Headline.module.css';
 import { SeverityBgColor } from '../../constants/severity';
 import { Icon } from '../icon/Icon';
-
-function Headline({
-  size = 2,
-  marker,
-  disableMargin,
-  children,
-  severity,
-  weight = 600,
-  subHeadline,
-  addition,
-  icon,
-  tone
-}) {
-  const Tag = `h${size}`;
-  const containerClassName = [styles.headlineContainer, tone ? styles[`tone-${tone}`] : ""].filter(Boolean).join(" ");
-  const headlineClassName = [
-    styles.headline,
-    disableMargin ? styles.noMargin : "",
-    marker ? styles.marker : ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
-      /* @__PURE__ */ jsxs(
-        Tag,
-        {
-          style: {
-            "--font-weight": weight,
-            "--marker-color": severity ? SeverityBgColor[severity] : void 0
-          },
-          className: headlineClassName,
-          children: [
-            icon || severity && !marker ? /* @__PURE__ */ jsx(Icon, { customIcon: icon, severity }) : null,
-            children
-          ]
-        }
-      ),
-      addition
-    ] }),
-    subHeadline && /* @__PURE__ */ jsx("div", { className: styles.subHeadline, children: subHeadline })
-  ] });
+export function Headline({ size = 2, marker, disableMargin, children, severity, weight = 600, subHeadline, addition, icon, tone, }) {
+    const Tag = `h${size}`;
+    const containerClassName = [styles.headlineContainer, tone ? styles[`tone-${tone}`] : '']
+        .filter(Boolean)
+        .join(' ');
+    const headlineClassName = [
+        styles.headline,
+        disableMargin ? styles.noMargin : '',
+        marker ? styles.marker : '',
+    ]
+        .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 })] }));
 }
-
-export { Headline };

package/dist/components/{link/Link.d.ts → hyperlink/Hyperlink.d.ts}

@@ -1,9 +1,9 @@
 import * as React from 'react';
-interface LinkProps {
+interface HyperlinkProps {
     component: React.ReactElement;
     className?: string;
     icon?: React.ReactNode;
     disableIcon?: boolean;
 }
-export declare function Link({ component, icon, disableIcon }: LinkProps): React.ReactElement;
+export declare function Hyperlink({ component, icon }: HyperlinkProps): React.ReactElement;
 export {};

package/dist/components/hyperlink/Hyperlink.js

@@ -0,0 +1,11 @@
+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 })] }));
+}

package/dist/components/{link/Link.module.css → hyperlink/Hyperlink.module.css}

@@ -3,11 +3,14 @@
   gap: var(--spacing-xs);
   position: relative;
   text-decoration: none;
-  font-weight: bold;
-  color: inherit;
+  color: var(--color-brand);
   font-size: inherit;
 }
 
+.link:hover {
+  text-decoration: underline;
+}
+
 .icon {
   display: flex;
   align-items: center;
@@ -18,15 +21,3 @@
   inline-size: var(--icon-size-sm);
   block-size: var(--icon-size-sm);
 }
-
-.link::after {
-  content: '';
-  display: block;
-  height: var(--border-width-medium);
-  background-color: var(--color-brand);
-  width: 100%;
-  align-self: flex-end;
-  position: absolute;
-  left: 0;
-  bottom: calc(var(--spacing-xxs) * -1);
-}

package/dist/components/icon/Icon.d.ts

@@ -1,8 +1,9 @@
-import { Severity } from '@/constants/severity.types';
-export declare const SeverityIcon: Record<Severity, React.ReactNode>;
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
+export declare const SeverityIcon: Record<Severity, ReactNode>;
 interface IconProps {
     severity?: Severity;
-    customIcon?: React.ReactNode;
+    customIcon?: ReactNode;
     label?: string;
 }
 export declare function Icon({ severity, label, customIcon }: IconProps): JSX.Element;

package/dist/components/icon/Icon.js

@@ -1,20 +1,14 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Building2, CircleAlert, Info, CircleX, CircleCheck } from 'lucide-react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Building2, CircleAlert, CircleCheck, CircleX, Info } from 'lucide-react';
 import styles from './Icon.module.css';
-
-const SeverityIcon = {
-  neutral: /* @__PURE__ */ jsx(CircleCheck, {}),
-  success: /* @__PURE__ */ jsx(CircleCheck, {}),
-  error: /* @__PURE__ */ jsx(CircleX, {}),
-  info: /* @__PURE__ */ jsx(Info, {}),
-  warning: /* @__PURE__ */ jsx(CircleAlert, {}),
-  brand: /* @__PURE__ */ jsx(Building2, {})
+export const SeverityIcon = {
+    neutral: _jsx(CircleCheck, {}),
+    success: _jsx(CircleCheck, {}),
+    error: _jsx(CircleX, {}),
+    info: _jsx(Info, {}),
+    warning: _jsx(CircleAlert, {}),
+    brand: _jsx(Building2, {}),
 };
-function Icon({ severity, label, customIcon }) {
-  return /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [
-    /* @__PURE__ */ jsx("span", { className: `${styles.icon} ${severity ? styles[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }),
-    label && /* @__PURE__ */ jsx("span", { children: label })
-  ] });
+export function Icon({ severity, label, customIcon }) {
+    return (_jsxs("div", { className: `${styles.container}`, children: [_jsx("span", { className: `${styles.icon} ${severity ? styles[severity] : ''} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }), label && _jsx("span", { children: label })] }));
 }
-
-export { Icon, SeverityIcon };

package/dist/components/interval-select/IntervalSelect.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ButtonVariant } from '../../components/button/Button';
+import { InputContainer } from '../../components/forms/input-container/InputContainer';
+type InputContainerProps = React.ComponentProps<typeof InputContainer>;
+export type IntervalOption = {
+    label: string;
+    /** How many minutes back from baseDate (default: now). */
+    minutesAgo: number;
+};
+export type IntervalSelectValue = number | null;
+export type IntervalSelectProps = Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement'> & {
+    id?: string;
+    options: IntervalOption[];
+    selectedValue: IntervalSelectValue;
+    onChange: (date: Date, meta: {
+        minutesAgo: number;
+        option: IntervalOption;
+    }) => void;
+    /** Base date for the calculation; defaults to "now". */
+    baseDate?: Date;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: ButtonVariant;
+    onClear?: () => void;
+    dataCy?: string;
+    tooltip?: React.ReactNode;
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+};
+export declare function IntervalSelect({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, id, options, selectedValue, onChange, baseDate, placeholder, size, variant, onClear, dataCy, }: IntervalSelectProps): React.ReactNode;
+export {};

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

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Clock } from 'lucide-react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { Button } from '../../components/button/Button';
+import { ClearButton } from '../../components/clear-button/ClearButton';
+import { InputContainer } from '../../components/forms/input-container/InputContainer';
+import { Menu } from '../../components/menu/Menu';
+import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTrigger';
+import { Popover } from '../../components/popover/Popover';
+export function IntervalSelect({ 
+// InputContainer props
+label, error, helpText, orientation = 'vertical', labelWidth = '120px', fullWidth = true, required, 
+// tooltip
+tooltip, tooltipPlacement = 'right', 
+// IntervalSelect props
+id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval', size, variant = 'outlined', onClear, dataCy, }) {
+    const generatedId = useId();
+    const controlId = id !== null && id !== void 0 ? id : `interval-select-${generatedId}`;
+    const describedById = `${controlId}-desc`;
+    const popoverRef = useRef(null);
+    const optionRefs = useRef([]);
+    const selectedIndex = useMemo(() => options.findIndex(o => o.minutesAgo === selectedValue), [options, selectedValue]);
+    const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
+    useEffect(() => {
+        var _a;
+        (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [activeIndex]);
+    const selected = useMemo(() => { var _a; return (_a = options.find(o => o.minutesAgo === selectedValue)) !== null && _a !== void 0 ? _a : null; }, [options, selectedValue]);
+    const tooltipEnabled = Boolean(tooltip);
+    const { triggerProps, id: tooltipId } = useTooltipTrigger({
+        content: tooltipEnabled ? tooltip : null,
+        placement: tooltipPlacement,
+        offset: 8,
+    });
+    const describedBy = (() => {
+        const ids = [];
+        if (error || helpText)
+            ids.push(describedById);
+        if (tooltipEnabled)
+            ids.push(tooltipId);
+        return ids.length ? ids.join(' ') : undefined;
+    })();
+    const handleCommit = (opt) => {
+        var _a;
+        const base = baseDate !== null && baseDate !== void 0 ? baseDate : new Date();
+        const dt = new Date(base.getTime() - opt.minutesAgo * 60000);
+        onChange(dt, { minutesAgo: opt.minutesAgo, option: opt });
+        (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    };
+    const handleKeyDown = (e) => {
+        var _a;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                setActiveIndex(i => Math.min(i + 1, options.length - 1));
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setActiveIndex(i => Math.max(i - 1, 0));
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (options[activeIndex])
+                    handleCommit(options[activeIndex]);
+                break;
+            case 'Escape':
+                e.preventDefault();
+                (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                break;
+        }
+    };
+    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, { ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'interval-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: [_jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [_jsx(Clock, { size: 14 }), 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 = opt.minutesAgo === selectedValue;
+                        const isActive = index === activeIndex;
+                        return (_jsx(Menu.Item, { active: isActive, "aria-selected": isSelected, children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", tabIndex: isActive ? 0 : -1, onClick: () => handleCommit(opt), onFocus: () => setActiveIndex(index), style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: isSelected ? _jsx(Check, {}) : null }), opt.label] }) }, opt.minutesAgo));
+                    }) }) }), (error || helpText) && (_jsx("span", { id: describedById, style: { display: 'none' }, children: error !== null && error !== void 0 ? error : helpText }))] }));
+}

package/dist/components/menu/Menu.js

@@ -1,71 +1,29 @@
-import { jsx } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import styles from './Menu.module.css';
-
-const MenuBase = React.forwardRef(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "ul",
-    {
-      ref,
-      role: "menu",
-      className: [styles.container, className].filter(Boolean).join(" "),
-      ...props,
-      children
-    }
-  )
-);
-MenuBase.displayName = "Menu";
-const isInteractiveEl = (el) => React.isValidElement(el) && (typeof el.type === "string" ? el.type === "a" || el.type === "button" : true);
-const MenuItem = React.forwardRef(
-  ({ children, active, disabled, className, ...liProps }, ref) => {
+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
+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 /* @__PURE__ */ jsx(
-        "li",
-        {
-          ref,
-          role: "none",
-          className: [styles.row, className].filter(Boolean).join(" "),
-          ...liProps,
-          children: React.cloneElement(child, {
-            role: "menuitem",
-            tabIndex: -1,
-            "aria-selected": active || void 0,
-            "aria-disabled": disabled || void 0,
-            className: [child.props.className, styles.interactive, childClass].filter(Boolean).join(" ")
-          })
-        }
-      );
+        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 /* @__PURE__ */ jsx(
-      "li",
-      {
-        ref,
-        role: "none",
-        className: [styles.row, className].filter(Boolean).join(" "),
-        ...liProps,
-        children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            role: "menuitem",
-            tabIndex: -1,
-            "aria-selected": active || void 0,
-            "aria-disabled": disabled || void 0,
-            className: [styles.interactive, styles.item, active ? styles.active : ""].filter(Boolean).join(" "),
-            type: "button",
-            disabled,
-            children
-          }
-        )
-      }
-    );
-  }
-);
-MenuItem.displayName = "Menu.Item";
-const Menu = Object.assign(
-  MenuBase,
-  { Item: MenuItem }
-);
-
-export { Menu };
+    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 });

package/dist/components/meta-bar/MetaBar.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import { type ReactNode, type JSX } from 'react';
 export interface MetaItem {
-    label?: React.ReactNode;
-    value: React.ReactNode;
+    label?: ReactNode;
+    value: ReactNode;
 }
 interface MetaBarProps {
     items: MetaItem[];
-    separator?: React.ReactNode;
+    separator?: ReactNode;
 }
 export declare function MetaBar({ items, separator }: MetaBarProps): JSX.Element | null;
 export {};

package/dist/components/meta-bar/MetaBar.js

@@ -1,22 +1,9 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React from 'react';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import styles from './MetaBar.module.css';
-
-function MetaBar({ items, separator = "\u2022" }) {
-  const visibleItems = items.filter(
-    (item) => item.value !== null && item.value !== void 0 && item.value !== ""
-  );
-  if (visibleItems.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: styles.meta, children: visibleItems.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsxs("span", { children: [
-      item.label && /* @__PURE__ */ jsxs("span", { children: [
-        item.label,
-        ": "
-      ] }),
-      /* @__PURE__ */ jsx("span", { children: item.value })
-    ] }),
-    index < visibleItems.length - 1 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles.dot, children: separator })
-  ] }, index)) });
+export function MetaBar({ items, separator = '•' }) {
+    const visibleItems = items.filter(item => item.value !== null && item.value !== undefined && item.value !== '');
+    if (visibleItems.length === 0)
+        return null;
+    return (_jsx("div", { className: styles.meta, children: visibleItems.map((item, index) => (_jsxs(Fragment, { children: [_jsxs("span", { children: [item.label && _jsxs("span", { children: [item.label, ": "] }), _jsx("span", { children: item.value })] }), index < visibleItems.length - 1 && (_jsx("span", { "aria-hidden": "true", className: styles.dot, children: separator }))] }, index))) }));
 }
-
-export { MetaBar };

package/dist/components/nav-bar/NavBar.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import type { ElementType, ReactNode, JSX } from 'react';
 export type NavBarItem = {
-    component?: React.ElementType<any>;
+    component?: ElementType<any>;
     label: string;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     active?: boolean;
     external?: boolean;
     enabled?: boolean;
@@ -11,10 +11,10 @@ export type NavBarItem = {
     children?: NavBarItem[];
 };
 interface NavBarProps {
-    logo?: React.ReactNode;
+    logo?: ReactNode;
     items: NavBarItem[];
     productName?: string;
-    addition?: React.ReactNode;
+    addition?: ReactNode;
 }
 export declare function NavBar({ logo, items, productName, addition }: NavBarProps): JSX.Element;
 export {};