@dbcdk/react-components 0.0.110 → 0.0.112

package/dist/components/forms/input/Input.cjs

@@ -47,6 +47,7 @@ const Input = react.forwardRef(function Input2({
   buttonDisabled = false,
   buttonLabel,
   buttonIcon,
+  buttonAriaLabel,
   trailingLabel,
   id,
   tooltipOpenOnFocus = true,
@@ -172,6 +173,7 @@ const Input = react.forwardRef(function Input2({
                 type: "button",
                 variant: trailingButtonVariant,
                 size: inputSize,
+                "aria-label": buttonAriaLabel,
                 children: [
                   buttonIcon != null ? buttonIcon : null,
                   buttonLabel != null ? buttonLabel : null

package/dist/components/forms/input/Input.d.ts

@@ -16,6 +16,7 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
     buttonDisabled?: boolean;
     buttonLabel?: string;
     buttonIcon?: React.ReactNode;
+    buttonAriaLabel?: string;
     trailingLabel?: string;
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';

package/dist/components/forms/input/Input.js

@@ -41,6 +41,7 @@ const Input = forwardRef(function Input2({
   buttonDisabled = false,
   buttonLabel,
   buttonIcon,
+  buttonAriaLabel,
   trailingLabel,
   id,
   tooltipOpenOnFocus = true,
@@ -166,6 +167,7 @@ const Input = forwardRef(function Input2({
                 type: "button",
                 variant: trailingButtonVariant,
                 size: inputSize,
+                "aria-label": buttonAriaLabel,
                 children: [
                   buttonIcon != null ? buttonIcon : null,
                   buttonLabel != null ? buttonLabel : null

package/dist/components/media-card/MediaCard.cjs

@@ -2,17 +2,24 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var styles = require('./MediaCard.module.css');
 var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var React__default = /*#__PURE__*/_interopDefault(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
 function MediaCard({
   src,
   alt,
   href,
+  component: Component,
+  linkElement,
   loading = false,
   aspectRatio = "1 / 1",
   objectFit = "cover",
@@ -24,12 +31,13 @@ function MediaCard({
   imageClassName,
   linkProps
 }) {
-  const isInteractive = Boolean(href);
+  var _a;
+  const isInteractive = Boolean(href || Component || linkElement);
   const hasCaption = showCaption && (caption || meta);
   const content = /* @__PURE__ */ jsxRuntime.jsx(
     "figure",
     {
-      className: [styles__default.default.root, isInteractive ? styles__default.default.interactive : "", className != null ? className : ""].join(" "),
+      className: cx(styles__default.default.root, isInteractive ? styles__default.default.interactive : void 0, className),
       style: { "--media-card-aspect-ratio": aspectRatio },
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.media, children: [
         loading || !src ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: "100%" }) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -37,7 +45,7 @@ function MediaCard({
           {
             src,
             alt,
-            className: [styles__default.default.image, imageClassName != null ? imageClassName : ""].join(" "),
+            className: cx(styles__default.default.image, imageClassName),
             style: {
               objectFit,
               objectPosition
@@ -51,10 +59,29 @@ function MediaCard({
       ] })
     }
   );
-  if (!href) {
+  if (!isInteractive) {
     return content;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: styles__default.default.link, ...linkProps, children: content });
+  const wrapperProps = {
+    ...linkProps,
+    ...href ? { href } : {},
+    className: cx(styles__default.default.link, linkProps == null ? void 0 : linkProps.className),
+    children: content
+  };
+  if (linkElement) {
+    const child = linkElement;
+    const childProps = (_a = child.props) != null ? _a : {};
+    return React__default.default.cloneElement(child, {
+      ...childProps,
+      ...wrapperProps,
+      className: cx(childProps.className, wrapperProps.className),
+      href: href != null ? href : childProps.href
+    });
+  }
+  if (Component) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...wrapperProps });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { ...wrapperProps });
 }
 
 exports.MediaCard = MediaCard;

package/dist/components/media-card/MediaCard.d.ts

@@ -1,9 +1,11 @@
-import type { AnchorHTMLAttributes, CSSProperties, ReactNode } from 'react';
+import type { AnchorHTMLAttributes, CSSProperties, ElementType, ReactElement, ReactNode } from 'react';
 type AspectRatio = '1 / 1' | '4 / 3' | '3 / 4' | '16 / 9' | string;
 export type MediaCardProps = {
     src?: string;
     alt: string;
     href?: string;
+    component?: ElementType<any>;
+    linkElement?: ReactElement<any>;
     loading?: boolean;
     aspectRatio?: AspectRatio;
     objectFit?: CSSProperties['objectFit'];
@@ -15,5 +17,5 @@ export type MediaCardProps = {
     imageClassName?: string;
     linkProps?: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'children'>;
 };
-export declare function MediaCard({ src, alt, href, loading, aspectRatio, objectFit, objectPosition, caption, meta, showCaption, className, imageClassName, linkProps, }: MediaCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function MediaCard({ src, alt, href, component: Component, linkElement, loading, aspectRatio, objectFit, objectPosition, caption, meta, showCaption, className, imageClassName, linkProps, }: MediaCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/media-card/MediaCard.js

@@ -1,12 +1,18 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
 import styles from './MediaCard.module.css';
 import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
 
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
 function MediaCard({
   src,
   alt,
   href,
+  component: Component,
+  linkElement,
   loading = false,
   aspectRatio = "1 / 1",
   objectFit = "cover",
@@ -18,12 +24,13 @@ function MediaCard({
   imageClassName,
   linkProps
 }) {
-  const isInteractive = Boolean(href);
+  var _a;
+  const isInteractive = Boolean(href || Component || linkElement);
   const hasCaption = showCaption && (caption || meta);
   const content = /* @__PURE__ */ jsx(
     "figure",
     {
-      className: [styles.root, isInteractive ? styles.interactive : "", className != null ? className : ""].join(" "),
+      className: cx(styles.root, isInteractive ? styles.interactive : void 0, className),
       style: { "--media-card-aspect-ratio": aspectRatio },
       children: /* @__PURE__ */ jsxs("div", { className: styles.media, children: [
         loading || !src ? /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: "100%" }) : /* @__PURE__ */ jsx(
@@ -31,7 +38,7 @@ function MediaCard({
           {
             src,
             alt,
-            className: [styles.image, imageClassName != null ? imageClassName : ""].join(" "),
+            className: cx(styles.image, imageClassName),
             style: {
               objectFit,
               objectPosition
@@ -45,10 +52,29 @@ function MediaCard({
       ] })
     }
   );
-  if (!href) {
+  if (!isInteractive) {
     return content;
   }
-  return /* @__PURE__ */ jsx("a", { href, className: styles.link, ...linkProps, children: content });
+  const wrapperProps = {
+    ...linkProps,
+    ...href ? { href } : {},
+    className: cx(styles.link, linkProps == null ? void 0 : linkProps.className),
+    children: content
+  };
+  if (linkElement) {
+    const child = linkElement;
+    const childProps = (_a = child.props) != null ? _a : {};
+    return React.cloneElement(child, {
+      ...childProps,
+      ...wrapperProps,
+      className: cx(childProps.className, wrapperProps.className),
+      href: href != null ? href : childProps.href
+    });
+  }
+  if (Component) {
+    return /* @__PURE__ */ jsx(Component, { ...wrapperProps });
+  }
+  return /* @__PURE__ */ jsx("a", { ...wrapperProps });
 }
 
 export { MediaCard };

package/dist/components/media-card/MediaCard.module.css

@@ -62,8 +62,7 @@
   background: var(--overlay-scrim);
   backdrop-filter: blur(var(--backdrop-blur));
 
-  font-size: var(--font-size-md);
-  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
   line-height: var(--line-height-tight);
   letter-spacing: var(--letter-spacing-wide);
 }

package/dist/components/search-box/SearchBox.cjs

@@ -34,6 +34,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   onButtonClick,
   buttonLabel,
   buttonIcon,
+  buttonAriaLabel,
   fullWidth = false,
   value,
   onChange,
@@ -120,6 +121,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   }, [result]);
   const showInputIcon = !onButtonClick || !!buttonLabel || !!buttonIcon;
   const trailingButtonIcon = onButtonClick && !buttonLabel && !buttonIcon ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}) : buttonIcon;
+  const trailingButtonAriaLabel = buttonAriaLabel != null ? buttonAriaLabel : onButtonClick && !buttonLabel ? "S\xF8g" : void 0;
   const activeOptionId = activeIndex !== null && (result == null ? void 0 : result.length) ? `${listboxId}-option-${activeIndex}` : void 0;
   const inputProps = {
     ...rest,
@@ -147,6 +149,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
             onButtonClick,
             buttonLabel,
             buttonIcon: trailingButtonIcon,
+            buttonAriaLabel: trailingButtonAriaLabel,
             ...inputProps,
             placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
           }
@@ -228,6 +231,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
                 onButtonClick,
                 buttonLabel,
                 buttonIcon: trailingButtonIcon,
+                buttonAriaLabel: trailingButtonAriaLabel,
                 ...inputProps,
                 onKeyDown: (e) => {
                   var _a3;

package/dist/components/search-box/SearchBox.d.ts

@@ -23,6 +23,7 @@ type SearchBoxProps<T extends Record<string, unknown>> = {
     onButtonClick?: () => void;
     buttonLabel?: string;
     buttonIcon?: React.ReactNode;
+    buttonAriaLabel?: string;
 } & React.InputHTMLAttributes<HTMLInputElement>;
 type SearchBoxComponent = <T extends Record<string, unknown>>(props: SearchBoxProps<T> & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;
 export declare const SearchBox: SearchBoxComponent;

package/dist/components/search-box/SearchBox.js

@@ -28,6 +28,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
   onButtonClick,
   buttonLabel,
   buttonIcon,
+  buttonAriaLabel,
   fullWidth = false,
   value,
   onChange,
@@ -114,6 +115,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
   }, [result]);
   const showInputIcon = !onButtonClick || !!buttonLabel || !!buttonIcon;
   const trailingButtonIcon = onButtonClick && !buttonLabel && !buttonIcon ? /* @__PURE__ */ jsx(Search, {}) : buttonIcon;
+  const trailingButtonAriaLabel = buttonAriaLabel != null ? buttonAriaLabel : onButtonClick && !buttonLabel ? "S\xF8g" : void 0;
   const activeOptionId = activeIndex !== null && (result == null ? void 0 : result.length) ? `${listboxId}-option-${activeIndex}` : void 0;
   const inputProps = {
     ...rest,
@@ -141,6 +143,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
             onButtonClick,
             buttonLabel,
             buttonIcon: trailingButtonIcon,
+            buttonAriaLabel: trailingButtonAriaLabel,
             ...inputProps,
             placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
           }
@@ -222,6 +225,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
                 onButtonClick,
                 buttonLabel,
                 buttonIcon: trailingButtonIcon,
+                buttonAriaLabel: trailingButtonAriaLabel,
                 ...inputProps,
                 onKeyDown: (e) => {
                   var _a3;

package/dist/components/theme-button/ThemeButton.cjs

@@ -16,10 +16,7 @@ const THEME_OPTIONS = [
 function ThemeMenuSection() {
   const { theme, switchTheme } = useTheme.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu.Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, {}),
-      "Udseende"
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: "Udseende" }),
     THEME_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
       Menu.Menu.RadioItem,
       {

package/dist/components/theme-button/ThemeButton.js

@@ -14,10 +14,7 @@ const THEME_OPTIONS = [
 function ThemeMenuSection() {
   const { theme, switchTheme } = useTheme();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Menu.Header, { children: [
-      /* @__PURE__ */ jsx(Palette, {}),
-      "Udseende"
-    ] }),
+    /* @__PURE__ */ jsx(Menu.Header, { children: "Udseende" }),
     THEME_OPTIONS.map((option) => /* @__PURE__ */ jsx(
       Menu.RadioItem,
       {

package/dist/styles/themes/dbc/base.css

@@ -99,6 +99,7 @@
   --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
 
   /* Elevation & Overlay */
+  --overlay-scrim-subtle: rgba(0, 0, 0, 0.2);
   --overlay-scrim: rgba(0, 0, 0, 0.5);
   --backdrop-blur: 8px;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.110",
+  "version": "0.0.112",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",