jvetrau-ds 0.2.14 → 0.2.15

package/components/embed-viewer/embed-viewer.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./embed-viewer.css');
+var classnames = require('../helpers/classnames');
+
+const EmbedViewer = ({
+  src,
+  iframeTitle,
+  description,
+  actions,
+  className = "",
+  ...props
+}) => {
+  const classes = classnames.classnames(
+    "embed-viewer",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children: [
+        description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "embed-viewer__description", children: description }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "iframe",
+          {
+            className: "embed-viewer__frame",
+            src,
+            title: iframeTitle
+          }
+        ),
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "embed-viewer__actions", children: actions })
+      ]
+    }
+  );
+};
+var embed_viewer_default = EmbedViewer;
+
+module.exports = embed_viewer_default;
+//# sourceMappingURL=embed-viewer.cjs.map
+//# sourceMappingURL=embed-viewer.cjs.map

package/components/embed-viewer/embed-viewer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/embed-viewer/embed-viewer.tsx"],"names":["classnames","jsxs","jsx"],"mappings":";;;;;;AAgBA,MAAM,cAEF,CAAC;AAAA,EACH,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,WAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2BAAA,EACZ,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,wBAGFA,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,qBAAA;AAAA,YACV,GAAA;AAAA,YACA,KAAA,EAAO;AAAA;AAAA,SACT;AAAA,QAEC,OAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBACZ,QAAA,EAAA,OAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,oBAAA,GAAQ","file":"embed-viewer.cjs","sourcesContent":["import React from 'react';\n\nimport './embed-viewer.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface EmbedViewerProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  src: string;\n  iframeTitle: string;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n}\n\nconst EmbedViewer: React.FC<\n  EmbedViewerProps\n> = ({\n  src,\n  iframeTitle,\n  description,\n  actions,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'embed-viewer',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {description && (\n        <div className=\"embed-viewer__description\">\n          {description}\n        </div>\n      )}\n\n      <iframe\n        className=\"embed-viewer__frame\"\n        src={src}\n        title={iframeTitle}\n      />\n\n      {actions && (\n        <div className=\"embed-viewer__actions\">\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default EmbedViewer;\n"]}

package/components/embed-viewer/embed-viewer.css

@@ -0,0 +1,115 @@
+.embed-viewer {
+  /* color */
+  --embed-viewer-color:
+    var(--color-text);
+  --embed-viewer-frame-bg:
+    var(--color-bg-media);
+
+  color: var(--embed-viewer-color);
+
+  /* typography */
+  --embed-viewer-description-font-family:
+    var(--font-body-family);
+  --embed-viewer-description-font-size:
+    var(--font-body);
+  --embed-viewer-description-font-weight:
+    var(--font-body-weight);
+  --embed-viewer-description-line-height:
+    var(--font-body-line);
+  --embed-viewer-description-letter-spacing:
+    var(--font-body-letter-spacing);
+
+  /* size */
+  --embed-viewer-gap:
+    var(--margin-item);
+  --embed-viewer-frame-aspect-ratio:
+    16 / 9;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--embed-viewer-gap);
+
+  width: 100%;
+  min-width: 0;
+
+  /* border */
+  --embed-viewer-frame-radius:
+    var(--radius-container);
+
+  /* depth */
+
+  /* motion */
+}
+
+.embed-viewer__description {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font-family:
+    var(--embed-viewer-description-font-family);
+  font-size:
+    var(--embed-viewer-description-font-size);
+  font-weight:
+    var(--embed-viewer-description-font-weight);
+  line-height:
+    var(--embed-viewer-description-line-height);
+  letter-spacing:
+    var(--embed-viewer-description-letter-spacing);
+
+  /* size */
+  min-width: 0;
+  max-width: 100%;
+
+  overflow-wrap: anywhere;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.embed-viewer__frame {
+  /* color */
+  background:
+    var(--embed-viewer-frame-bg);
+
+  /* typography */
+
+  /* size */
+  display: block;
+
+  width: 100%;
+  min-width: 0;
+  aspect-ratio:
+    var(--embed-viewer-frame-aspect-ratio);
+
+  /* border */
+  border: 0;
+  border-radius:
+    var(--embed-viewer-frame-radius);
+
+  /* depth */
+
+  /* motion */
+}
+
+.embed-viewer__actions {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}

package/components/embed-viewer/embed-viewer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './embed-viewer.css';
+export interface EmbedViewerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    src: string;
+    iframeTitle: string;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+}
+declare const EmbedViewer: React.FC<EmbedViewerProps>;
+export default EmbedViewer;

package/components/embed-viewer/embed-viewer.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import './embed-viewer.css';
+import { classnames } from '../helpers/classnames';
+
+const EmbedViewer = ({
+  src,
+  iframeTitle,
+  description,
+  actions,
+  className = "",
+  ...props
+}) => {
+  const classes = classnames(
+    "embed-viewer",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children: [
+        description && /* @__PURE__ */ jsx("div", { className: "embed-viewer__description", children: description }),
+        /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            className: "embed-viewer__frame",
+            src,
+            title: iframeTitle
+          }
+        ),
+        actions && /* @__PURE__ */ jsx("div", { className: "embed-viewer__actions", children: actions })
+      ]
+    }
+  );
+};
+var embed_viewer_default = EmbedViewer;
+
+export { embed_viewer_default as default };
+//# sourceMappingURL=embed-viewer.js.map
+//# sourceMappingURL=embed-viewer.js.map

package/components/embed-viewer/embed-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/embed-viewer/embed-viewer.tsx"],"names":[],"mappings":";;;;AAgBA,MAAM,cAEF,CAAC;AAAA,EACH,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,WAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2BAAA,EACZ,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,wBAGF,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,qBAAA;AAAA,YACV,GAAA;AAAA,YACA,KAAA,EAAO;AAAA;AAAA,SACT;AAAA,QAEC,OAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBACZ,QAAA,EAAA,OAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,oBAAA,GAAQ","file":"embed-viewer.js","sourcesContent":["import React from 'react';\n\nimport './embed-viewer.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface EmbedViewerProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  src: string;\n  iframeTitle: string;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n}\n\nconst EmbedViewer: React.FC<\n  EmbedViewerProps\n> = ({\n  src,\n  iframeTitle,\n  description,\n  actions,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'embed-viewer',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {description && (\n        <div className=\"embed-viewer__description\">\n          {description}\n        </div>\n      )}\n\n      <iframe\n        className=\"embed-viewer__frame\"\n        src={src}\n        title={iframeTitle}\n      />\n\n      {actions && (\n        <div className=\"embed-viewer__actions\">\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default EmbedViewer;\n"]}

package/components/embed-viewer/embed-viewer.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const embedViewerMeta: ComponentMeta;

package/components/embed-viewer/index.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var embedViewer = require('./embed-viewer');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var embedViewer__default = /*#__PURE__*/_interopDefault(embedViewer);
+
+
+
+Object.defineProperty(exports, "EmbedViewer", {
+  enumerable: true,
+  get: function () { return embedViewer__default.default; }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return embedViewer__default.default; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/components/embed-viewer/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}

package/components/embed-viewer/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './embed-viewer';
+export { default as EmbedViewer } from './embed-viewer';
+export type { EmbedViewerProps } from './embed-viewer';

package/components/embed-viewer/index.js

@@ -0,0 +1,3 @@
+export { default as EmbedViewer, default } from './embed-viewer';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/embed-viewer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/components/index.cjs

@@ -17,6 +17,7 @@ var progressbar = require('./progressbar/progressbar');
 var card = require('./card/card');
 var panel = require('./panel/panel');
 var video = require('./video/video');
+var embedViewer = require('./embed-viewer');
 var logo = require('./logo/logo');
 var avatar = require('./avatar/avatar');
 var attach = require('./attach/attach');
@@ -49,6 +50,7 @@ var progressbar__default = /*#__PURE__*/_interopDefault(progressbar);
 var card__default = /*#__PURE__*/_interopDefault(card);
 var panel__default = /*#__PURE__*/_interopDefault(panel);
 var video__default = /*#__PURE__*/_interopDefault(video);
+var embedViewer__default = /*#__PURE__*/_interopDefault(embedViewer);
 var logo__default = /*#__PURE__*/_interopDefault(logo);
 var avatar__default = /*#__PURE__*/_interopDefault(avatar);
 var attach__default = /*#__PURE__*/_interopDefault(attach);
@@ -135,6 +137,10 @@ Object.defineProperty(exports, "Video", {
   enumerable: true,
   get: function () { return video__default.default; }
 });
+Object.defineProperty(exports, "EmbedViewer", {
+  enumerable: true,
+  get: function () { return embedViewer__default.default; }
+});
 Object.defineProperty(exports, "Logo", {
   enumerable: true,
   get: function () { return logo__default.default; }

package/components/index.d.ts

@@ -33,6 +33,8 @@ export { default as Panel } from './panel/panel';
 export type { PanelProps } from './panel/panel';
 export { default as Video } from './video/video';
 export type { VideoProps, VideoQuality, } from './video/video';
+export { default as EmbedViewer } from './embed-viewer';
+export type { EmbedViewerProps } from './embed-viewer';
 export { default as Logo } from './logo/logo';
 export type { LogoProps } from './logo/logo';
 export { default as Avatar } from './avatar/avatar';

package/components/index.js

@@ -15,6 +15,7 @@ export { default as ProgressBar } from './progressbar/progressbar';
 export { default as Card } from './card/card';
 export { default as Panel } from './panel/panel';
 export { default as Video } from './video/video';
+export { default as EmbedViewer } from './embed-viewer';
 export { default as Logo } from './logo/logo';
 export { default as Avatar } from './avatar/avatar';
 export { default as Attach } from './attach/attach';

package/index.cjs

@@ -13,6 +13,7 @@ var formMessage = require('./components/form-message');
 var menu = require('./components/menu');
 var tabs = require('./components/tabs');
 var video = require('./components/video');
+var embedViewer = require('./components/embed-viewer');
 var search = require('./components/search');
 var richedit = require('./components/richedit');
 var tag = require('./components/tag');
@@ -57,6 +58,7 @@ var formMessage__default = /*#__PURE__*/_interopDefault(formMessage);
 var menu__default = /*#__PURE__*/_interopDefault(menu);
 var tabs__default = /*#__PURE__*/_interopDefault(tabs);
 var video__default = /*#__PURE__*/_interopDefault(video);
+var embedViewer__default = /*#__PURE__*/_interopDefault(embedViewer);
 var search__default = /*#__PURE__*/_interopDefault(search);
 var richedit__default = /*#__PURE__*/_interopDefault(richedit);
 var tag__default = /*#__PURE__*/_interopDefault(tag);
@@ -143,6 +145,10 @@ Object.defineProperty(exports, "Video", {
   enumerable: true,
   get: function () { return video__default.default; }
 });
+Object.defineProperty(exports, "EmbedViewer", {
+  enumerable: true,
+  get: function () { return embedViewer__default.default; }
+});
 Object.defineProperty(exports, "Search", {
   enumerable: true,
   get: function () { return search__default.default; }

package/index.d.ts

@@ -28,6 +28,8 @@ export { default as Tabs } from './components/tabs';
 export type { TabItem, TabsProps, } from './components/tabs';
 export { default as Video } from './components/video';
 export type { VideoProps, VideoQuality, } from './components/video';
+export { default as EmbedViewer } from './components/embed-viewer';
+export type { EmbedViewerProps } from './components/embed-viewer';
 export { default as Search } from './components/search';
 export type { SearchProps } from './components/search';
 export { default as RichEdit } from './components/richedit';

package/index.js

@@ -11,6 +11,7 @@ export { default as FormMessage } from './components/form-message';
 export { default as Menu } from './components/menu';
 export { default as Tabs } from './components/tabs';
 export { default as Video } from './components/video';
+export { default as EmbedViewer } from './components/embed-viewer';
 export { default as Search } from './components/search';
 export { default as RichEdit } from './components/richedit';
 export { default as Tag } from './components/tag';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -2584,6 +2584,123 @@
   /* motion */
 }
 
+/* src/components/embed-viewer/embed-viewer.css */
+.embed-viewer {
+  /* color */
+  --embed-viewer-color:
+    var(--color-text);
+  --embed-viewer-frame-bg:
+    var(--color-bg-media);
+
+  color: var(--embed-viewer-color);
+
+  /* typography */
+  --embed-viewer-description-font-family:
+    var(--font-body-family);
+  --embed-viewer-description-font-size:
+    var(--font-body);
+  --embed-viewer-description-font-weight:
+    var(--font-body-weight);
+  --embed-viewer-description-line-height:
+    var(--font-body-line);
+  --embed-viewer-description-letter-spacing:
+    var(--font-body-letter-spacing);
+
+  /* size */
+  --embed-viewer-gap:
+    var(--margin-item);
+  --embed-viewer-frame-aspect-ratio:
+    16 / 9;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--embed-viewer-gap);
+
+  width: 100%;
+  min-width: 0;
+
+  /* border */
+  --embed-viewer-frame-radius:
+    var(--radius-container);
+
+  /* depth */
+
+  /* motion */
+}
+
+.embed-viewer__description {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font-family:
+    var(--embed-viewer-description-font-family);
+  font-size:
+    var(--embed-viewer-description-font-size);
+  font-weight:
+    var(--embed-viewer-description-font-weight);
+  line-height:
+    var(--embed-viewer-description-line-height);
+  letter-spacing:
+    var(--embed-viewer-description-letter-spacing);
+
+  /* size */
+  min-width: 0;
+  max-width: 100%;
+
+  overflow-wrap: anywhere;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.embed-viewer__frame {
+  /* color */
+  background:
+    var(--embed-viewer-frame-bg);
+
+  /* typography */
+
+  /* size */
+  display: block;
+
+  width: 100%;
+  min-width: 0;
+  aspect-ratio:
+    var(--embed-viewer-frame-aspect-ratio);
+
+  /* border */
+  border: 0;
+  border-radius:
+    var(--embed-viewer-frame-radius);
+
+  /* depth */
+
+  /* motion */
+}
+
+.embed-viewer__actions {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 /* src/components/field/field.css */
 .field {
   /* color */