@dbcdk/react-components 0.0.168 → 0.0.169

package/dist/components/lightbox/Lightbox.module.css

@@ -1,214 +0,0 @@
-.thumbnails {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: var(--spacing-md);
-}
-
-.thumbnailCard {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  min-width: 0;
-  max-width: 100%;
-}
-
-.thumbnailMedia {
-  position: relative;
-  display: flex;
-  min-width: 0;
-  max-width: 100%;
-}
-
-.thumbnailBtn {
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  display: block;
-  flex: none;
-  text-align: left;
-  position: relative;
-  min-width: 0;
-  max-width: 100%;
-}
-
-.thumbnailImg {
-  overflow: hidden;
-  border-radius: var(--border-radius-default);
-  border: 1px solid var(--color-border-default);
-  box-shadow: var(--shadow-sm);
-  transition:
-    transform var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard);
-  min-width: 0;
-  max-width: 100%;
-}
-
-.thumbnailBtn:hover .thumbnailImg {
-  transform: scale(1.02);
-}
-
-.thumbnailImg > img {
-  height: 100%;
-  width: auto;
-  max-width: 100%;
-  display: block;
-}
-
-.thumbnailMeta {
-  flex: 1 1 auto;
-  display: flex;
-  gap: var(--spacing-2xs);
-  min-width: 0;
-  max-width: 100%;
-}
-
-.thumbnailMeta > div {
-  min-width: 0;
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.thumbnailMeta > div > span,
-.thumbnailMeta > div > span > span {
-  min-width: 0;
-}
-
-.thumbnailMeta > div > span:not([aria-hidden='true']) {
-  max-width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.thumbnailFooter {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  min-width: 0;
-  max-width: 100%;
-}
-
-.thumbnailMenuTrigger {
-  flex: 0 0 auto;
-  min-width: 0;
-}
-
-.dialog {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  max-width: none;
-  height: 100%;
-  max-height: none;
-  background: transparent;
-  border: none;
-  outline: none;
-}
-
-.dialog::backdrop {
-  background: color-mix(in srgb, black 85%, transparent);
-}
-
-.panel {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-  padding: var(--spacing-sm);
-  box-sizing: border-box;
-  gap: var(--spacing-sm);
-}
-
-/* ── Toolbar ────────────────────────────────────────────────── */
-
-.toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-md);
-  width: 100%;
-  max-width: min(96vw, 1200px);
-  flex-shrink: 0;
-}
-
-.toolbarInfo {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  color: var(--color-fg-default);
-  font-size: var(--font-size-sm);
-  font-family: var(--font-family);
-  min-width: 0;
-  overflow: hidden;
-}
-
-.titleMain {
-  font-weight: var(--font-weight-medium);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.titleItem {
-  color: var(--color-fg-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.counter {
-  color: var(--color-fg-subtle);
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.toolbarActions {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  flex-shrink: 0;
-}
-
-.buttonAdditionSlot {
-  margin-inline-end: var(--spacing-sm);
-}
-
-.imageArea {
-  width: 100%;
-  max-width: min(96vw, 1200px);
-  background: black;
-  border-radius: var(--border-radius-default);
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  flex: 1 1 0;
-  min-height: 0;
-}
-
-.imageArea > img {
-  max-height: 100%;
-  max-width: 100%;
-  object-fit: contain;
-  display: block;
-}
-
-.nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  max-width: min(96vw, 1200px);
-  flex-shrink: 0;
-}
-
-.navHint {
-  color: var(--color-fg-subtle);
-  font-size: var(--font-size-xs);
-  font-family: var(--font-family);
-}

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

@@ -1,87 +0,0 @@
-'use client';
-'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",
-  objectPosition = "center",
-  caption,
-  meta,
-  showCaption = Boolean(caption || meta),
-  className,
-  imageClassName,
-  linkProps
-}) {
-  var _a;
-  const isInteractive = Boolean(href || Component || linkElement);
-  const hasCaption = showCaption && (caption || meta);
-  const content = /* @__PURE__ */ jsxRuntime.jsx(
-    "figure",
-    {
-      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(
-          "img",
-          {
-            src,
-            alt,
-            className: cx(styles__default.default.image, imageClassName),
-            style: {
-              objectFit,
-              objectPosition
-            }
-          }
-        ),
-        !loading && hasCaption && /* @__PURE__ */ jsxRuntime.jsxs("figcaption", { className: styles__default.default.caption, children: [
-          caption && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.captionText, children: caption }),
-          meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.meta, children: meta })
-        ] })
-      ] })
-    }
-  );
-  if (!isInteractive) {
-    return 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,21 +0,0 @@
-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'];
-    objectPosition?: CSSProperties['objectPosition'];
-    caption?: ReactNode;
-    meta?: ReactNode;
-    showCaption?: boolean;
-    className?: string;
-    imageClassName?: string;
-    linkProps?: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'children'>;
-};
-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,80 +0,0 @@
-'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",
-  objectPosition = "center",
-  caption,
-  meta,
-  showCaption = Boolean(caption || meta),
-  className,
-  imageClassName,
-  linkProps
-}) {
-  var _a;
-  const isInteractive = Boolean(href || Component || linkElement);
-  const hasCaption = showCaption && (caption || meta);
-  const content = /* @__PURE__ */ jsx(
-    "figure",
-    {
-      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(
-          "img",
-          {
-            src,
-            alt,
-            className: cx(styles.image, imageClassName),
-            style: {
-              objectFit,
-              objectPosition
-            }
-          }
-        ),
-        !loading && hasCaption && /* @__PURE__ */ jsxs("figcaption", { className: styles.caption, children: [
-          caption && /* @__PURE__ */ jsx("span", { className: styles.captionText, children: caption }),
-          meta && /* @__PURE__ */ jsx("span", { className: styles.meta, children: meta })
-        ] })
-      ] })
-    }
-  );
-  if (!isInteractive) {
-    return 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

@@ -1,91 +0,0 @@
-.root {
-  --media-card-aspect-ratio: 1 / 1;
-
-  position: relative;
-  margin: 0;
-}
-
-.link {
-  display: block;
-  width: 100%;
-  color: inherit;
-  text-decoration: none;
-  border-radius: var(--border-radius-md);
-}
-
-.link:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-.media {
-  position: relative;
-  aspect-ratio: var(--media-card-aspect-ratio);
-  width: 100%;
-  overflow: hidden;
-  border-radius: var(--border-radius-md);
-  background: var(--card-bg-subtle);
-  box-shadow: var(--shadow-sm);
-}
-
-.image {
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-
-.interactive .image {
-  transition:
-    transform var(--transition-fast) var(--ease-standard),
-    filter var(--transition-fast) var(--ease-standard);
-}
-
-.link:hover .interactive .image {
-  transform: scale(1.02);
-}
-
-.caption {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: var(--spacing-xs);
-
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-sm);
-
-  color: var(--color-fg-inverse);
-  background: var(--overlay-scrim);
-  backdrop-filter: blur(var(--backdrop-blur));
-
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-tight);
-  letter-spacing: var(--letter-spacing-wide);
-}
-
-.captionText {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.meta {
-  flex-shrink: 0;
-  opacity: 0.8;
-  font-weight: var(--font-weight-default);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .interactive .image {
-    transition: none;
-  }
-
-  .link:hover .interactive .image {
-    transform: none;
-  }
-}