@hortiview/shared-components 0.0.4529 → 0.0.4540

package/dist/components/EmptyView/EmptyView.js

@@ -1,10 +1,249 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Hero as i, HeroContent as n, Icon as h } from "@element/react-components";
-const c = ({
-  title: e = "",
-  subtitle: r = "",
-  icon: t = "dashbord"
-}) => /* @__PURE__ */ o(i, { style: { width: "100%", height: "25vh" }, children: /* @__PURE__ */ o(n, { logo: /* @__PURE__ */ o(h, { iconSize: "large", icon: t }), overline: "", subtitle: r, title: e }) });
+import { jsx as k } from "react/jsx-runtime";
+import { P as e, c as P, _ as C } from "../../index.es-WZ1mqvGz.js";
+import l, { forwardRef as H, useRef as T, useImperativeHandle as O, useMemo as p } from "react";
+import { G as E } from "../../index.es-DYsXox--.js";
+import { d as N } from "../../index.es-BD4kFWFx.js";
+import { I as x } from "../../index.es-Cv6meSAn.js";
+const $ = {
+  /**
+   * Aligns the Hero contents.
+   *
+   * Defaults to **'centered'**.
+   */
+  alignment: e.oneOf(["center-bottom", "center-top", "centered", "left-bottom", "left-center", "left-top", "right-bottom", "right-center", "right-top"]),
+  /**
+   * Content to be rendered inside the Hero.
+   *
+   * Defaults to **null**.
+   */
+  children: e.node,
+  /**
+   * The css class name to be passed through to the component markup.
+   *
+   * Defaults to **undefined**.
+   */
+  className: e.string,
+  /**
+   * Image Url for Hero background image
+   *
+   * Defaults to **null**.
+   */
+  imageUrl: e.string,
+  /**
+   * Adds an overlay over the Hero. Use `overlayProps` to send props to the Hero Overlay component.  See Hero Overlay for prop details.
+   *
+   * Defaults to **false**.
+   */
+  overlay: e.bool,
+  /**
+   * Props sent to Hero Overlay. See Hero Overlay for prop details.
+   *
+   * Defaults to **{}**.
+   */
+  overlayProps: e.object,
+  /**
+   * Override the default background color. Can only be used if background image is omitted.
+   *
+   * Defaults to **empty string**.
+   */
+  themeColor: e.oneOf(["", "surface", "primary", "secondary"])
+}, I = {
+  alignment: "centered",
+  children: null,
+  className: void 0,
+  imageUrl: null,
+  overlay: !1,
+  overlayProps: {},
+  themeColor: ""
+}, j = {
+  /**
+   * Content to be rendered inside the Hero Content.  Will take precedence over props.
+   *
+   * Defaults to **null**.
+   */
+  children: e.node,
+  /**
+   * The css class name to be passed through to the component markup.
+   *
+   * Defaults to **undefined**.
+   */
+  className: e.string,
+  /**
+   * Button to be rendered inside the Hero Content.
+   *
+   * Defaults to **null**.
+   */
+  heroBtn: e.node,
+  /**
+   * Logo to be rendered inside the Hero Content.
+   *
+   * Defaults to **null**.
+   */
+  logo: e.node,
+  /**
+   * Overline text for the Hero Content. Cannot be used with children.
+   *
+   * Defaults to **'Overline'**.
+   */
+  overline: e.string,
+  /**
+   * Adds a padding style to the Hero. Must be a valid CSS padding declaration. i.e. 38px 30px
+   *
+   * Defaults to **null**.
+   */
+  padding: e.string,
+  /**
+   * Passthrough style object.
+   *
+   * Defaults to **null**.
+   */
+  style: e.object,
+  /**
+   * Subtitle text for the Hero Content. Cannot be used with children.
+   *
+   * Defaults to **'Subtitle'**.
+   */
+  subtitle: e.string,
+  /**
+   * Set the color of the text.  Make sure to check for accessibility compliance.
+   *
+   * Defaults to **'on-unknown-black-active'**.
+   */
+  textColor: e.oneOf(["on-unknown-black-active", "on-unknown-white-active", "primary", "secondary", "on-primary", "on-secondary"]),
+  /**
+   * Title text for the Hero Content. Cannot be used with children.
+   *
+   * Defaults to **'Title'**.
+   */
+  title: e.string
+}, B = {
+  children: null,
+  className: void 0,
+  heroBtn: null,
+  logo: null,
+  overline: "Overline",
+  padding: null,
+  style: null,
+  subtitle: "Subtitle",
+  textColor: "on-unknown-black-active",
+  title: "Title"
+}, D = {
+  /**
+   * Content to be rendered inside the Hero Overlay.  Useful for angles or other non semantic elements displayed in the Hero.
+   *
+   * Defaults to **null**.
+   */
+  children: e.node,
+  /**
+   * The css class name to be passed through to the component markup.
+   *
+   * Defaults to **undefined**.
+   */
+  className: e.string,
+  /**
+   * Overlay theme color.
+   *
+   * Defaults to **'dark'**.
+   */
+  overlayThemeColor: e.oneOf(["dark", "light", "surface", "linear-gradient-white-to-bottom", "linear-gradient-white-to-top", "linear-gradient-black-to-bottom", "linear-gradient-black-to-top", "linear-gradient-primary-dark-to-bottom", "linear-gradient-primary-dark-to-top", "linear-gradient-primary-darker-to-bottom", "linear-gradient-primary-darker-to-top", "linear-gradient-primary-to-bottom", "linear-gradient-primary-to-top", "linear-gradient-secondary-dark-to-bottom", "linear-gradient-secondary-dark-to-top", "linear-gradient-secondary-darker-to-bottom", "linear-gradient-secondary-darker-to-top", "linear-gradient-secondary-to-bottom", "linear-gradient-secondary-to-top"]),
+  /**
+   * Position of the Overlay. Use `overlayThemeColor` to change the theme color. If set to leading or trailing be sure to set `alignment` on Hero accordingly to have Hero Content over the overlay.
+   *
+   * Defaults to **'full'**.
+   */
+  position: e.oneOf(["full", "leading", "trailing"])
+}, R = {
+  children: null,
+  className: void 0,
+  overlayThemeColor: "dark",
+  position: "full"
+}, f = /* @__PURE__ */ H((s, i) => {
+  const {
+    children: r,
+    className: c,
+    position: o,
+    overlayThemeColor: t,
+    ...n
+  } = s, a = T();
+  O(i, () => a.current, []);
+  const m = p(() => o !== "none" && P("lmnt", "lmnt-hero-overlay ", !t.includes("gradient") && t !== "surface" && `lmnt-hero-overlay__${t}`, t.includes("gradient") && t !== "surface" && `lmnt-theme--bg-${t}`, t === "surface" && "lmnt-theme-surface-bg", `lmnt-hero-overlay__${o}`, c), [t, o, c]);
+  return /* @__PURE__ */ l.createElement("div", C({
+    className: m
+  }, n), r && r);
+});
+f.displayName = "HeroOverlay";
+f.propTypes = D;
+f.defaultProps = R;
+const h = /* @__PURE__ */ H((s, i) => {
+  const {
+    alignment: r,
+    children: c,
+    className: o,
+    imageUrl: t,
+    style: n,
+    themeColor: a,
+    overlay: m,
+    overlayProps: y,
+    ...g
+  } = s, d = T();
+  O(i, () => d.current, []);
+  const b = p(() => P("lmnt lmnt-hero", a && `lmnt-theme-${a}-bg`, `lmnt-hero__align-${r}`, o), [r, o, a]), u = p(() => t ? {
+    ...n,
+    backgroundImage: `url(${t})`
+  } : n, [t, n]);
+  return /* @__PURE__ */ l.createElement("div", C({
+    ref: d,
+    className: b,
+    style: u
+  }, g), m && /* @__PURE__ */ l.createElement(f, y), c);
+});
+h.displayName = "Hero";
+h.propTypes = $;
+h.defaultProps = I;
+const v = /* @__PURE__ */ H((s, i) => {
+  const {
+    children: r,
+    className: c,
+    heroBtn: o,
+    logo: t,
+    overline: n,
+    padding: a,
+    title: m,
+    style: y,
+    subtitle: g,
+    textColor: d,
+    ...b
+  } = s, u = T(), _ = p(() => P("lmnt lmnt-hero-content", `lmnt-theme-${d}`, c), [c, d]);
+  O(i, () => u.current, []);
+  const w = p(() => ({
+    ...y,
+    padding: a
+  }), [a, y]);
+  return /* @__PURE__ */ l.createElement("div", C({
+    ref: u,
+    className: _
+  }, b, {
+    style: w
+  }), r || /* @__PURE__ */ l.createElement(E, {
+    gap: "dense",
+    direction: "vertical",
+    secondaryAlign: "center"
+  }, t && t, n && /* @__PURE__ */ l.createElement(N, {
+    type: "overline"
+  }, n), m && /* @__PURE__ */ l.createElement(N, {
+    type: "display2"
+  }, m), g && /* @__PURE__ */ l.createElement(N, {
+    type: "display6"
+  }, g), o && o));
+});
+v.displayName = "HeroContent";
+v.propTypes = j;
+v.defaultProps = B;
+const V = ({
+  title: s = "",
+  subtitle: i = "",
+  icon: r = "dashbord"
+}) => /* @__PURE__ */ k(h, { style: { width: "100%", height: "25vh" }, children: /* @__PURE__ */ k(v, { logo: /* @__PURE__ */ k(x, { iconSize: "large", icon: r }), overline: "", subtitle: i, title: s }) });
 export {
-  c as EmptyView
+  V as EmptyView
 };