@rubin-epo/epo-widget-lib 0.4.3 → 0.5.1-alpha.1

package/dist/atomic/Blinker/Blinker.js

@@ -1,68 +1,62 @@
-import { jsxs as O, jsx as x } from "react/jsx-runtime";
-import { useState as i, useEffect as B } from "react";
-import { tokens as P } from "@rubin-epo/epo-react-lib/styles";
-import R from "../../hooks/useInterval.js";
-import w from "use-resize-observer";
-import { BlinkerContainer as z, BlinkerImages as D, BlinkerControls as K } from "./styles.js";
-import { getClampedArrayIndex as M } from "../../lib/utils.js";
-const I = ({
-  images: t = [],
-  activeIndex: k = 0,
-  autoplay: h = !0,
-  loop: v = !0,
-  interval: g = 200,
-  blinkCallback: l,
-  loadedCallback: d,
-  className: C
+import { jsxs as N, jsx as m } from "react/jsx-runtime";
+import { useState as p } from "react";
+import P from "../../hooks/useInterval.js";
+import { BlinkerContainer as v, BlinkerImages as D, BlinkerControls as L } from "./styles.js";
+import { getClampedArrayIndex as $ } from "../../lib/utils.js";
+const u = ({
+  images: n = [],
+  activeIndex: s = 0,
+  autoplay: B = !0,
+  loop: x = !0,
+  interval: h = 200,
+  blinkCallback: e,
+  loadedCallback: l,
+  className: g,
+  children: k
 }) => {
-  const { ref: y, width: A = 1 } = w(), [c, a] = i(h), [n, f] = i(k), [s, E] = i(!1), { BREAK_MOBILE: S } = P, o = t.length > 1, m = A < parseInt(S);
-  B(() => {
-    l && l(n);
-  }, [n]), B(() => {
-    s && d && d();
-  }, [s]);
-  const p = (e = 0) => {
-    const N = t.length - 1;
-    return M(n + e, N);
-  }, u = () => {
+  const [i, a] = p(B), [d, y] = p(!1), o = n.length > 1, c = (t = 0) => {
+    const A = n.length - 1;
+    return $(s + t, A);
+  }, f = () => {
     if (o) {
-      const e = p(1);
-      v === !1 && e === t.length - 1 && r(), f(e);
+      const t = c(1);
+      x === !1 && t === n.length - 1 && r(), e && e(t);
     }
   }, r = () => {
     a(!1);
-  }, $ = () => {
-    a((e) => !e);
+  }, I = () => {
+    a((t) => !t);
+  }, S = () => {
+    r(), f();
   }, j = () => {
-    r(), u();
-  }, L = () => {
-    r(), f(p(-1));
+    r(), e && e(c(-1));
   };
-  return R(u, o && s && c ? g : null), /* @__PURE__ */ O(z, { className: C, ref: y, children: [
-    /* @__PURE__ */ x(
+  return P(f, o && d && i ? h : null), /* @__PURE__ */ N(v, { className: g, children: [
+    /* @__PURE__ */ m(
       D,
       {
-        loadedCallback: () => E(!0),
-        images: t,
-        activeIndex: n,
-        $isCondensed: m
+        loadedCallback: () => {
+          y(!0), l && l();
+        },
+        images: n,
+        activeIndex: s
       }
     ),
-    o && /* @__PURE__ */ x(
-      K,
+    k,
+    o && /* @__PURE__ */ m(
+      L,
       {
-        isDisabled: !s,
-        playing: c,
-        handleStartStop: $,
-        handleNext: j,
-        handlePrevious: L,
-        $isCondensed: m
+        isDisabled: !d,
+        playing: i,
+        handleStartStop: I,
+        handleNext: S,
+        handlePrevious: j
       }
     )
   ] });
 };
-I.displayName = "Atomic.Blinker";
-const Q = I;
+u.displayName = "Atomic.Blinker";
+const F = u;
 export {
-  Q as default
+  F as default
 };

package/dist/atomic/Blinker/Image/Image.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),n=require("./styles.cjs"),e=({image:t,active:r,loadCallback:l})=>{const{url:s,altText:a}=t;return i.jsx(n.BlinkerImage,{alt:a,src:s,onLoad:l,$active:r})};e.displayName="Atomic.Blinker.Image";const o=e;exports.default=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),o=require("./styles.cjs"),t=({image:i,active:s,loadCallback:e})=>{const{url:r,altText:l}=i;return n.jsx(o.BlinkerImage,{alt:l,src:r,onLoad:()=>e&&e(),style:{"--image-visibility":s?"visible":"hidden"}})};t.displayName="Atomic.Blinker.Image";const u=t;exports.default=u;

package/dist/atomic/Blinker/Image/Image.js

@@ -1,23 +1,23 @@
-import { jsx as i } from "react/jsx-runtime";
-import { BlinkerImage as l } from "./styles.js";
-const e = ({
-  image: a,
-  active: r,
-  loadCallback: t
+import { jsx as n } from "react/jsx-runtime";
+import { BlinkerImage as s } from "./styles.js";
+const i = ({
+  image: r,
+  active: t,
+  loadCallback: e
 }) => {
-  const { url: m, altText: o } = a;
-  return /* @__PURE__ */ i(
-    l,
+  const { url: m, altText: a } = r;
+  return /* @__PURE__ */ n(
+    s,
     {
-      alt: o,
+      alt: a,
       src: m,
-      onLoad: t,
-      $active: r
+      onLoad: () => e && e(),
+      style: { "--image-visibility": t ? "visible" : "hidden" }
     }
   );
 };
-e.displayName = "Atomic.Blinker.Image";
-const c = e;
+i.displayName = "Atomic.Blinker.Image";
+const g = i;
 export {
-  c as default
+  g as default
 };

package/dist/atomic/Blinker/Image/styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),s=e=>e&&e.__esModule?e:{default:e},i=s(t),n=i.default.img`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),n=e=>e&&e.__esModule?e:{default:e},o=n(t),i=o.default.img`
   position: absolute;
   top: 0;
   right: 0;
@@ -13,10 +13,5 @@
   -o-user-drag: none;
   -ms-user-drag: none;
   user-drag: none;
-
-  ${({$active:e})=>e?t.css`
-          visibility: visible;
-        `:t.css`
-          visibility: hidden;
-        `}
-`;exports.BlinkerImage=n;
+  visibility: var(--image-visibility, hidden);
+`;exports.BlinkerImage=i;

package/dist/atomic/Blinker/Image/styles.js

@@ -1,5 +1,5 @@
-import o, { css as e } from "styled-components";
-const r = o.img`
+import e from "styled-components";
+const o = e.img`
   position: absolute;
   top: 0;
   right: 0;
@@ -14,13 +14,8 @@ const r = o.img`
   -o-user-drag: none;
   -ms-user-drag: none;
   user-drag: none;
-
-  ${({ $active: i }) => i ? e`
-          visibility: visible;
-        ` : e`
-          visibility: hidden;
-        `}
+  visibility: var(--image-visibility, hidden);
 `;
 export {
-  r as BlinkerImage
+  o as BlinkerImage
 };

package/dist/atomic/Blinker/Images/Images.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),i=require("react"),j=require("@rubin-epo/epo-react-lib/CircularLoader"),o=require("./styles.cjs"),I=require("../Image/Image.cjs"),q=e=>e&&e.__esModule?e:{default:e},x=q(j),u=({images:e=[],activeIndex:c,className:l,loadedCallback:n})=>{const[r,d]=i.useState(0),[t,g]=i.useState(!0),f=()=>{d(s=>s+1)};return i.useEffect(()=>{g(r!==e.length),t||n&&n()},[r,t]),a.jsxs(o.BlinkContainer,{"data-testid":"blinker-images",className:l,children:[!r&&a.jsx(x.default,{isVisible:t}),a.jsx(o.LoadingContainer,{$isLoading:t,children:e.map((s,m)=>{const{url:L}=s,_=c===m;return a.jsx(I.default,{image:s,active:_,loadCallback:f},L)})})]})};u.displayName="Atomic.Blinker.Images";const b=u;exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),r=require("react"),j=require("@rubin-epo/epo-react-lib/CircularLoader"),o=require("./styles.cjs"),L=require("../Image/Image.cjs"),b=e=>e&&e.__esModule?e:{default:e},p=b(j),l=({images:e=[],activeIndex:u,className:c,loadedCallback:i})=>{const[n,d]=r.useState(0),t=n!==e.length,g=r.useCallback(()=>d(s=>s+1),[]);return r.useEffect(()=>{t||i&&i()},[t]),a.jsxs(o.BlinkContainer,{"data-testid":"blinker-images",className:c,children:[!n&&a.jsx(p.default,{isVisible:t}),a.jsx(o.LoadingContainer,{style:{"--loading-opacity":t?0:1},children:e.map((s,f)=>{const{url:m}=s,_=u===f;return a.jsx(L.default,{image:s,active:_,loadCallback:g},m)})})]})};l.displayName="Atomic.Blinker.Images";const q=l;exports.default=q;

package/dist/atomic/Blinker/Images/Images.js

@@ -1,37 +1,44 @@
-import { jsxs as u, jsx as o } from "react/jsx-runtime";
-import { useState as a, useEffect as L } from "react";
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { useState as p, useCallback as u, useEffect as k } from "react";
 import I from "@rubin-epo/epo-react-lib/CircularLoader";
-import { BlinkContainer as k, LoadingContainer as h } from "./styles.js";
-import x from "../Image/Image.js";
-const n = ({
-  images: r = [],
-  activeIndex: m,
-  className: c,
-  loadedCallback: s
+import { BlinkContainer as L, LoadingContainer as C } from "./styles.js";
+import b from "../Image/Image.js";
+const s = ({
+  images: o = [],
+  activeIndex: n,
+  className: m,
+  loadedCallback: a
 }) => {
-  const [i, d] = a(0), [e, l] = a(!0), g = () => {
-    d((t) => t + 1);
-  };
-  return L(() => {
-    l(i !== r.length), e || s && s();
-  }, [i, e]), /* @__PURE__ */ u(k, { "data-testid": "blinker-images", className: c, children: [
-    !i && /* @__PURE__ */ o(I, { isVisible: e }),
-    /* @__PURE__ */ o(h, { $isLoading: e, children: r.map((t, f) => {
-      const { url: p } = t;
-      return /* @__PURE__ */ o(
-        x,
-        {
-          image: t,
-          active: m === f,
-          loadCallback: g
-        },
-        p
-      );
-    }) })
+  const [r, c] = p(0), e = r !== o.length, l = u(
+    () => c((t) => t + 1),
+    []
+  );
+  return k(() => {
+    e || a && a();
+  }, [e]), /* @__PURE__ */ g(L, { "data-testid": "blinker-images", className: m, children: [
+    !r && /* @__PURE__ */ i(I, { isVisible: e }),
+    /* @__PURE__ */ i(
+      C,
+      {
+        style: { "--loading-opacity": e ? 0 : 1 },
+        children: o.map((t, d) => {
+          const { url: f } = t;
+          return /* @__PURE__ */ i(
+            b,
+            {
+              image: t,
+              active: n === d,
+              loadCallback: l
+            },
+            f
+          );
+        })
+      }
+    )
   ] });
 };
-n.displayName = "Atomic.Blinker.Images";
-const y = n;
+s.displayName = "Atomic.Blinker.Images";
+const A = s;
 export {
-  y as default
+  A as default
 };

package/dist/atomic/Blinker/Images/styles.cjs

@@ -1,15 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),i=t=>t&&t.__esModule?t:{default:t},n=i(e),o=n.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),i=t=>t&&t.__esModule?t:{default:t},e=i(n),o=e.default.div`
   background-color: var(--neutral95, #1f2121);
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
-`,a=n.default.div`
+`,a=e.default.div`
+  opacity: var(--loading-opacity, 0);
   transition: opacity ease var(--DURATION_SLOW, 0.4s);
-
-  ${({$isLoading:t})=>t?e.css`
-          opacity: 0;
-        `:e.css`
-          opacity: 1;
-        `}
 `;exports.BlinkContainer=o;exports.LoadingContainer=a;

package/dist/atomic/Blinker/Images/styles.js

@@ -1,20 +1,15 @@
-import i, { css as t } from "styled-components";
-const e = i.div`
+import t from "styled-components";
+const n = t.div`
   background-color: var(--neutral95, #1f2121);
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
-`, a = i.div`
+`, o = t.div`
+  opacity: var(--loading-opacity, 0);
   transition: opacity ease var(--DURATION_SLOW, 0.4s);
-
-  ${({ $isLoading: n }) => n ? t`
-          opacity: 0;
-        ` : t`
-          opacity: 1;
-        `}
 `;
 export {
-  e as BlinkContainer,
-  a as LoadingContainer
+  n as BlinkContainer,
+  o as LoadingContainer
 };

package/dist/atomic/Blinker/styles.cjs

@@ -1,26 +1,25 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),s=require("./Controls/Controls.cjs"),i=require("./Images/Images.cjs"),o=t=>t&&t.__esModule?t:{default:t},r=o(e),n=r.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),r=require("@rubin-epo/epo-react-lib/styles"),o=require("./Controls/Controls.cjs"),l=require("./Images/Images.cjs"),s=e=>e&&e.__esModule?e:{default:e},t=s(n),a=t.default.div`
+  container: blinker / inline-size;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr min-content;
   justify-items: center;
   position: relative;
   height: 100%;
-`,l=r.default(s.default)`
+`,i=r.token("BREAK_MOBILE"),d=t.default(o.default)`
   grid-row: 2;
+  margin-block-start: var(--PADDING_SMALL, 20px);
 
-  ${({$isCondensed:t})=>t?e.css`
-          margin-block-start: var(--PADDING_SMALL, 20px);
-        `:e.css`
-          margin-block-end: var(--PADDING_SMALL, 20px);
-        `}
-`,a=r.default(i.default)`
+  @container blinker (min-width: ${i}) {
+    margin-block-end: var(--PADDING_SMALL, 20px);
+  }
+`,c=t.default(l.default)`
   aspect-ratio: 1;
+  grid-row: 1;
   width: 100%;
 
-  ${({$isCondensed:t})=>t?e.css`
-          grid-row: 1;
-        `:e.css`
-          position: absolute;
-          grid-row: span 2;
-        `};
-`;exports.BlinkerContainer=n;exports.BlinkerControls=l;exports.BlinkerImages=a;
+  @container blinker (min-width: ${i}) {
+    position: absolute;
+    grid-row: span 2;
+  }
+`;exports.BlinkerContainer=a;exports.BlinkerControls=d;exports.BlinkerImages=c;

package/dist/atomic/Blinker/styles.js

@@ -1,34 +1,34 @@
-import o, { css as r } from "styled-components";
-import i from "./Controls/Controls.js";
-import e from "./Images/Images.js";
-const m = o.div`
+import i from "styled-components";
+import { token as t } from "@rubin-epo/epo-react-lib/styles";
+import n from "./Controls/Controls.js";
+import o from "./Images/Images.js";
+const l = i.div`
+  container: blinker / inline-size;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr min-content;
   justify-items: center;
   position: relative;
   height: 100%;
-`, l = o(i)`
+`, r = t("BREAK_MOBILE"), p = i(n)`
   grid-row: 2;
+  margin-block-start: var(--PADDING_SMALL, 20px);
 
-  ${({ $isCondensed: t }) => t ? r`
-          margin-block-start: var(--PADDING_SMALL, 20px);
-        ` : r`
-          margin-block-end: var(--PADDING_SMALL, 20px);
-        `}
-`, p = o(e)`
+  @container blinker (min-width: ${r}) {
+    margin-block-end: var(--PADDING_SMALL, 20px);
+  }
+`, c = i(o)`
   aspect-ratio: 1;
+  grid-row: 1;
   width: 100%;
 
-  ${({ $isCondensed: t }) => t ? r`
-          grid-row: 1;
-        ` : r`
-          position: absolute;
-          grid-row: span 2;
-        `};
+  @container blinker (min-width: ${r}) {
+    position: absolute;
+    grid-row: span 2;
+  }
 `;
 export {
-  m as BlinkerContainer,
-  l as BlinkerControls,
-  p as BlinkerImages
+  l as BlinkerContainer,
+  p as BlinkerControls,
+  c as BlinkerImages
 };

package/dist/types/CameraFilter.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+
+declare const CameraFilter: FunctionComponent;
+export default CameraFilter;
+
+export { }

package/dist/types/ColorTool.d.ts

@@ -0,0 +1,45 @@
+import { FunctionComponent } from 'react';
+import { ListboxOption } from '@rubin-epo/epo-react-lib/SelectListbox';
+import { Option as Option_2 } from '@rubin-epo/epo-react-lib/Select';
+
+export declare interface AstroCategory {
+    type: string;
+    objects: AstroObject[];
+}
+
+export declare interface AstroObject {
+    name: string;
+    caption?: string;
+    filters: ImageFilter[];
+}
+
+declare const ColorTool: FunctionComponent<ColorToolProps>;
+export default ColorTool;
+
+declare interface ColorToolProps {
+    selectionCallback: (selectedData: AstroObject) => void;
+    data: AstroCategory[];
+    selectedData: AstroObject;
+    objectOptions?: Option_2[];
+    colorOptions?: ListboxOption[];
+    isDisabled?: boolean;
+    isDisplayOnly?: boolean;
+    hideImage?: boolean;
+    hideSubtitle?: boolean;
+}
+
+export declare interface ImageFilter {
+    label: string;
+    defaultColor?: string;
+    color?: string;
+    active: boolean;
+    image: string;
+    isDisabled: boolean;
+    value: number;
+    defaultValue?: number;
+    min: number;
+    max: number;
+    brightness?: number;
+}
+
+export { }

package/dist/types/FilterTool.d.ts

@@ -0,0 +1,16 @@
+import { FunctionComponent } from 'react';
+
+declare type FilterColor = "violet" | "blue" | "green" | "yellow" | "orange" | "red";
+
+declare const FilterTool: FunctionComponent<FilterToolProps>;
+export default FilterTool;
+
+declare interface FilterToolProps {
+    selectionCallback?: (color: FilterColor) => void;
+    selectedColor?: FilterColor | "none";
+    isDisabled?: boolean;
+    id?: string;
+    labelledById?: string;
+}
+
+export { }

package/dist/types/SourceSelector.d.ts

@@ -0,0 +1,28 @@
+import { Alert } from '../../types/astro';
+import { FunctionComponent } from 'react';
+import { ImageShape } from '@rubin-epo/epo-react-lib/Image';
+import { Source } from '../../types/astro';
+
+declare interface BlinkConfig {
+    autoplay?: boolean;
+    loop?: boolean;
+    duration?: number;
+}
+
+declare const SourceSelector: FunctionComponent<SourceSelectorProps>;
+export default SourceSelector;
+
+declare interface SourceSelectorProps {
+    width?: number;
+    height?: number;
+    sources: Source[];
+    alerts?: Alert[];
+    selectedSource?: Source[];
+    images: ImageShape[];
+    selectionCallback?: (data: Source[]) => void;
+    blinkConfig?: BlinkConfig;
+    color?: string;
+    isDisplayOnly?: boolean;
+}
+
+export { }

package/dist/types/cjs/CameraFilter.d.cts

@@ -0,0 +1 @@
+export * from './widgets/CameraFilter/CameraFilter'

package/dist/types/cjs/ColorTool.d.cts

@@ -0,0 +1 @@
+export * from './widgets/ColorTool/ColorTool'

package/dist/types/cjs/FilterTool.d.cts

@@ -0,0 +1 @@
+export * from './widgets/FilterTool/FilterTool'

package/dist/types/cjs/SourceSelector.d.cts

@@ -0,0 +1 @@
+export * from './widgets/SourceSelector/SourceSelector'

package/dist/{atomic/Blinker/Blinker.d.ts → types/cjs/atomic/Blinker/Blinker.d.cts}

@@ -1,8 +1,8 @@
-import { FunctionComponent } from "react";
-import { ImageShape } from "@rubin-epo/epo-react-lib";
+import { FunctionComponent, PropsWithChildren } from "react";
+import { ImageShape } from "@rubin-epo/epo-react-lib/Image";
 export interface BlinkerProps {
     images: ImageShape[];
-    activeIndex?: number;
+    activeIndex: number;
     autoplay?: boolean;
     loop?: boolean;
     interval?: number;
@@ -10,5 +10,5 @@ export interface BlinkerProps {
     loadedCallback?: () => void;
     className?: string;
 }
-declare const Blinker: FunctionComponent<BlinkerProps>;
+declare const Blinker: FunctionComponent<PropsWithChildren<BlinkerProps>>;
 export default Blinker;

package/dist/{atomic/Blinker/Image/Image.d.ts → types/cjs/atomic/Blinker/Image/Image.d.cts}

@@ -1,4 +1,4 @@
-import { ImageShape } from "@rubin-epo/epo-react-lib";
+import { ImageShape } from "@rubin-epo/epo-react-lib/Image";
 import { FunctionComponent } from "react";
 interface ImageProps {
     image: ImageShape;