@rubin-epo/epo-widget-lib 0.9.7 → 0.9.9

package/dist/layout/AspectRatio/index.js

@@ -0,0 +1,24 @@
+import { jsx as i } from "react/jsx-runtime";
+import { AspectRatio as c } from "./styles.js";
+const a = {
+  square: 1,
+  portrait: parseFloat((9 / 16).toFixed(3)),
+  landscape: parseFloat((16 / 9).toFixed(3))
+}, l = ({
+  ratio: t,
+  medScreenRatio: s = t,
+  smallScreenRatio: e = t,
+  children: o,
+  className: r
+}) => {
+  const p = {
+    "--aspect-large-ratio": a[t],
+    "--aspect-med-ratio": a[s],
+    "--aspect-small-ratio": a[e]
+  };
+  return /* @__PURE__ */ i(c, { style: p, className: r, children: o });
+};
+l.displayName = "Layout.AspectRatio";
+export {
+  l as default
+};

package/dist/layout/AspectRatio/styles.cjs

@@ -0,0 +1,16 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),e=require("@rubin-epo/epo-react-lib/styles"),i=t=>t&&t.__esModule?t:{default:t},r=i(a),o=r.default.div`
+  --aspect-ratio: var(--aspect-small-ratio, 1);
+
+  aspect-ratio: var(--aspect-ratio);
+  position: relative;
+  width: calc(var(--widget-max-height, 100vh) * var(--aspect-ratio));
+  max-height: var(--widget-max-height, 100vh);
+  max-width: 100%;
+
+  @container (min-width: ${e.token("BREAK_LARGE_TABLET")}) {
+    --aspect-ratio: var(--aspect-med-ratio, 1);
+  }
+  @container (min-width: ${e.token("BREAK_DESKTOP_SMALL")}) {
+    --aspect-ratio: var(--aspect-large-ratio, 1);
+  }
+`;exports.AspectRatio=o;

package/dist/{widgets/ColorTool/Actions → layout/AspectRatio}/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const Actions: import("styled-components").IStyledComponent<"web", {
+export declare const AspectRatio: import("styled-components").IStyledComponent<"web", {
     ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
     key?: import("react").Key | null | undefined;
     defaultChecked?: boolean | undefined;

package/dist/layout/AspectRatio/styles.js

@@ -0,0 +1,22 @@
+"use client";
+import a from "styled-components";
+import { token as t } from "@rubin-epo/epo-react-lib/styles";
+const r = a.div`
+  --aspect-ratio: var(--aspect-small-ratio, 1);
+
+  aspect-ratio: var(--aspect-ratio);
+  position: relative;
+  width: calc(var(--widget-max-height, 100vh) * var(--aspect-ratio));
+  max-height: var(--widget-max-height, 100vh);
+  max-width: 100%;
+
+  @container (min-width: ${t("BREAK_LARGE_TABLET")}) {
+    --aspect-ratio: var(--aspect-med-ratio, 1);
+  }
+  @container (min-width: ${t("BREAK_DESKTOP_SMALL")}) {
+    --aspect-ratio: var(--aspect-large-ratio, 1);
+  }
+`;
+export {
+  r as AspectRatio
+};

package/dist/layout/Controls/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("../AspectRatio/index.cjs"),t=require("./styles.cjs"),n=({widget:d,controls:s,actions:i,caption:r,className:l})=>e.jsx(o.default,{ratio:"landscape",medScreenRatio:"landscape",smallScreenRatio:"portrait",className:l,children:e.jsxs(t.WidgetLayout,{children:[e.jsxs(t.InteractionRow,{children:[e.jsx(t.Widget,{children:d}),r&&e.jsx(t.PortraitCaption,{children:r}),s&&e.jsx(t.Controls,{children:s})]}),i&&e.jsx(t.Actions,{children:i}),r&&e.jsx(t.LandscapeCaption,{children:r})]})});n.displayName="Layouts.WidgetControls";exports.default=n;

package/dist/layout/Controls/index.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent, ReactNode } from "react";
+interface WidgetControlsProps {
+    widget: ReactNode;
+    controls: ReactNode;
+    actions?: ReactNode;
+    caption?: ReactNode;
+    className?: string;
+}
+declare const WidgetControls: FunctionComponent<WidgetControlsProps>;
+export default WidgetControls;

package/dist/layout/Controls/index.js

@@ -0,0 +1,31 @@
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import n from "../AspectRatio/index.js";
+import { WidgetLayout as l, InteractionRow as s, Widget as c, PortraitCaption as m, Controls as p, Actions as h, LandscapeCaption as C } from "./styles.js";
+const f = ({
+  widget: a,
+  controls: t,
+  actions: i,
+  caption: e,
+  className: d
+}) => /* @__PURE__ */ r(
+  n,
+  {
+    ratio: "landscape",
+    medScreenRatio: "landscape",
+    smallScreenRatio: "portrait",
+    className: d,
+    children: /* @__PURE__ */ o(l, { children: [
+      /* @__PURE__ */ o(s, { children: [
+        /* @__PURE__ */ r(c, { children: a }),
+        e && /* @__PURE__ */ r(m, { children: e }),
+        t && /* @__PURE__ */ r(p, { children: t })
+      ] }),
+      i && /* @__PURE__ */ r(h, { children: i }),
+      e && /* @__PURE__ */ r(C, { children: e })
+    ] })
+  }
+);
+f.displayName = "Layouts.WidgetControls";
+export {
+  f as default
+};

package/dist/layout/Controls/styles.cjs

@@ -0,0 +1,63 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),t=require("@rubin-epo/epo-react-lib/styles"),o=i=>i&&i.__esModule?i:{default:i},e=o(n),a=e.default.div`
+  --default-widget-padding: calc(var(--PADDING_SMALL, 20px) / 2);
+  --widget-gap: var(--widget-padding, var(--default-widget-padding));
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: 100%;
+  gap: var(--widget-gap);
+  overflow-y: auto;
+
+  @container (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
+    --default-widget-padding: var(--PADDING_SMALL, 20px);
+  }
+
+  @container (min-width: ${t.token("BREAK_LARGE_TABLET")}) {
+    height: 100%;
+    overflow-y: initial;
+  }
+`,d=e.default.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: var(--widget-gap);
+
+  @container (min-width: ${t.token("BREAK_LARGE_TABLET")}) {
+    flex-direction: row-reverse;
+  }
+`,l=e.default.div`
+  aspect-ratio: 1;
+  flex: 1 1 auto;
+  max-height: 100%;
+  max-width: 100%;
+  justify-self: center;
+
+  @container (min-width: ${t.token("BREAK_LARGE_TABLET")}) {
+    max-height: unset;
+    height: 100%;
+  }
+`,r=e.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--widget-gap);
+  flex: 0 1 100%;
+`,c=e.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--widget-gap);
+
+  @container (min-width: ${t.token("BREAK_LARGE_TABLET")}) {
+    flex-direction: row;
+  }
+`,s=e.default.div`
+  @container (min-width: ${t.token("BREAK_LARGE_TABLET")}) {
+    display: none;
+  }
+`,g=e.default.div`
+  display: none;
+  @container (min-width: ${t.token("BREAK_LARGE_TABLET")}) {
+    display: block;
+  }
+`;exports.Actions=c;exports.Controls=r;exports.InteractionRow=d;exports.LandscapeCaption=g;exports.PortraitCaption=s;exports.Widget=l;exports.WidgetLayout=a;