@hortiview/shared-components 2.8.6 → 2.8.7

package/dist/index.es-Bgjh6euR.js

@@ -0,0 +1,292 @@
+import { _ as M, c as D, a as E, b as x, d as V, P as e } from "./index-Cpb-8cAN.js";
+import W, { forwardRef as I, useMemo as k, useRef as el, useImperativeHandle as rl, createContext as al, useContext as tl } from "react";
+import { d as nl } from "./index.es-BXj90wb_.js";
+import { _ as B, a as H, b as F, c as J, d as T, e as S, f as L } from "./defineProperty-CmuOyxyf.js";
+var Q = /* @__PURE__ */ al({}), il = {
+  /**
+   * @deprecated _Use `variant`='airy' instead._
+   *
+   * Applies extra padding to each column.
+   *
+   * Defaults to **undefined**.
+   */
+  airy: nl(e.bool, "Grid", 'Use `variant`="airy" instead.'),
+  /**
+   * Accepts GridCol or GridRow.
+   *
+   * Defaults to **null**.
+   */
+  children: e.node.isRequired,
+  /**
+   * The css class name to be passed through to the component markup.
+   *
+   * Defaults to **undefined**.
+   */
+  className: e.string,
+  /**
+   * Sets the column gap for the grid.
+   *
+   * Defaults to **'16px'**.
+   */
+  columnGap: e.oneOfType([e.string, e.number]),
+  /**
+   * Applies 100% height to the grid and direct children rows. Useful when creating a page layout. Be aware all direct children rows will have a 100% height.
+   *
+   * Defaults to **null**.
+   */
+  fullHeight: e.bool,
+  /**
+   * Applies 100% width to the grid and direct children rows. Useful to maintain full width in a flex container.
+   *
+   * Defaults to **null**.
+   */
+  fullWidth: e.bool,
+  /**
+   * Alignment of entire grid: left and right.
+   *
+   * Defaults to **'center'**.
+   */
+  gridAlign: e.oneOf(["center", "left", "right"]),
+  /**
+   * Sets the row gap for the grid.
+   *
+   * Defaults to **'16px'**.
+   */
+  rowGap: e.oneOfType([e.string, e.number]),
+  /**
+   * Styles for the grid.
+   *
+   * Defaults to **undefined**.
+   */
+  style: e.object,
+  /**
+   * If true the grid will have a max width according to your theme's breakpoints.
+   *
+   * Defaults to **false**.
+   */
+  useMaxWidth: e.bool,
+  /**
+   * Select `airy` or `standard` padding.
+   *
+   * Defaults to **'standard'**.
+   */
+  variant: e.oneOf(["standard", "airy", "none"])
+}, ol = {
+  airy: void 0,
+  children: null,
+  className: void 0,
+  columnGap: "16px",
+  fullHeight: null,
+  fullWidth: null,
+  gridAlign: "center",
+  rowGap: "16px",
+  useMaxWidth: !1,
+  variant: "standard"
+}, dl = {
+  /**
+   * Alignment of cell within the row: top, middle, bottom. If omitted the col will stretch to the height of the row.
+   *
+   * Defaults to **undefined**.
+   */
+  align: e.oneOf(["", "top", "middle", "bottom"]),
+  /**
+   * Content to be rendered inside the GridCol. Accepts any valid markup.
+   *
+   * Defaults to **null**.
+   */
+  children: e.node,
+  /**
+   * The css class name to be passed through to the component markup.
+   *
+   * Defaults to **undefined**.
+   */
+  className: e.string,
+  /**
+   * Specifies the number of columns the cell spans.
+   *
+   * Defaults to **null**.
+   */
+  desktopCol: e.number,
+  /**
+   * Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. Set to any valid `grid-column-start`.
+   *
+   * Defaults to **null**.
+   */
+  gridColStart: e.oneOfType([e.string, e.number]),
+  /**
+   * Horizontal alignment of the cell contents of cell content: top, middle, bottom.
+   *
+   * Defaults to **'left'**.
+   */
+  horizontalAlign: e.oneOf(["left", "center", "right"]),
+  /**
+   * Specifies the order of the cell.
+   *
+   * Defaults to **null**.
+   */
+  order: e.number,
+  /**
+   * Specifies the number of columns the cell spans on a phone.
+   *
+   * Defaults to **null**.
+   */
+  phoneCol: e.number,
+  /**
+   * Styles for the grid.
+   *
+   * Defaults to **undefined**.
+   */
+  style: e.object,
+  /**
+   * Specifies the number of columns the cell spans on a tablet.
+   *
+   * Defaults to **null**.
+   */
+  tabletCol: e.number,
+  /**
+   * Vertical alignment of cell content: top, middle, bottom.
+   *
+   * Defaults to **'top'**.
+   */
+  verticalAlign: e.oneOf(["top", "middle", "bottom"])
+}, cl = {
+  align: void 0,
+  children: null,
+  className: void 0,
+  desktopCol: null,
+  gridColStart: null,
+  horizontalAlign: "left",
+  order: null,
+  phoneCol: null,
+  style: void 0,
+  tabletCol: null,
+  verticalAlign: "top"
+}, sl = {
+  /**
+   * Content to be rendered inside the GridRow. Accepts any valid markup.
+   *
+   * Defaults to **null**.
+   */
+  children: e.node.isRequired,
+  /**
+   * The css class name to be passed through to the component markup.
+   *
+   * Defaults to **undefined**.
+   */
+  className: e.string,
+  /**
+   * Styles for the grid.
+   *
+   * Defaults to **undefined**.
+   */
+  style: e.object
+}, ul = {
+  children: null,
+  className: void 0,
+  style: void 0
+}, pl = ["airy", "children", "className", "columnGap", "fullHeight", "fullWidth", "gridAlign", "rowGap", "style", "useMaxWidth", "variant"], s = ol, X = /* @__PURE__ */ I(function(l, n) {
+  var t = l.airy, r = t === void 0 ? s.airy : t, a = l.children, i = a === void 0 ? s.children : a, p = l.className, v = p === void 0 ? s.className : p, f = l.columnGap, c = f === void 0 ? s.columnGap : f, m = l.fullHeight, d = m === void 0 ? s.fullHeight : m, g = l.fullWidth, y = g === void 0 ? s.fullWidth : g, u = l.gridAlign, N = u === void 0 ? s.gridAlign : u, C = l.rowGap, G = C === void 0 ? s.rowGap : C;
+  l.style;
+  var $ = l.useMaxWidth, h = $ === void 0 ? s.useMaxWidth : $, w = l.variant, b = w === void 0 ? s.variant : w, A = M(l, pl), _ = r ? "airy" : b, P = k(function() {
+    return {
+      fullHeight: d,
+      rowGap: G,
+      columnGap: c
+    };
+  }, [c, d, G]), O = el();
+  rl(n, function() {
+    return O.current;
+  }, []);
+  var R = k(function() {
+    return D("lmnt", "mdc-layout-grid", "lmnt-layout-grid", "mdc-layout-grid mdc-layout-grid--align-".concat(N), (_ === "airy" || r) && "mdc-grid-cell-wrapper-airy-tablet mdc-grid-cell-wrapper-airy-desktop", b === "none" && "mdc-grid-cell-wrapper-none-tablet mdc-grid-cell-wrapper-none-desktop mdc-grid-cell-wrapper-none-phone ", y && "lmnt-layout-grid--full-width", d && "lmnt-layout-grid--full-height", h && "lmnt-layout-grid--with-max-width", v);
+  }, [r, v, _, d, y, N, h, b]);
+  return /* @__PURE__ */ W.createElement(Q.Provider, {
+    value: P
+  }, /* @__PURE__ */ W.createElement("div", E({
+    ref: O,
+    className: R
+  }, A), i));
+});
+X.displayName = "Grid";
+X.propTypes = il;
+var ml = ["align", "children", "className", "columns", "desktopCol", "gridColStart", "horizontalAlign", "order", "phoneCol", "style", "tabletCol", "verticalAlign"];
+function q(l, n) {
+  var t = V(l);
+  if (S) {
+    var r = S(l);
+    n && (r = L(r).call(r, function(a) {
+      return T(l, a).enumerable;
+    })), t.push.apply(t, r);
+  }
+  return t;
+}
+function K(l) {
+  for (var n = 1; n < arguments.length; n++) {
+    var t, r, a = arguments[n] != null ? arguments[n] : {};
+    n % 2 ? x(t = q(Object(a), !0)).call(t, function(i) {
+      B(l, i, a[i]);
+    }) : H ? F(l, H(a)) : x(r = q(Object(a))).call(r, function(i) {
+      J(l, i, T(a, i));
+    });
+  }
+  return l;
+}
+var o = cl, Y = /* @__PURE__ */ I(function(l, n) {
+  var t = l.align, r = t === void 0 ? o.align : t, a = l.children, i = a === void 0 ? o.children : a, p = l.className, v = p === void 0 ? o.className : p, f = l.columns, c = f === void 0 ? o.columns : f, m = l.desktopCol, d = m === void 0 ? o.desktopCol : m, g = l.gridColStart, y = g === void 0 ? o.gridColStart : g, u = l.horizontalAlign, N = u === void 0 ? o.horizontalAlign : u, C = l.order, G = C === void 0 ? o.order : C, $ = l.phoneCol, h = $ === void 0 ? o.phoneCol : $, w = l.style, b = w === void 0 ? o.style : w, A = l.tabletCol, _ = A === void 0 ? o.tabletCol : A, P = l.verticalAlign, O = P === void 0 ? o.verticalAlign : P, R = M(l, ml), ll = k(function() {
+    return K(K({}, b), {}, {
+      gridColumnStart: y
+    });
+  }, [y, b]);
+  return /* @__PURE__ */ W.createElement("div", E({
+    ref: n,
+    style: ll,
+    className: D("lmnt", "lmnt-layout-grid__cell--vertical-align-".concat(O), "lmnt-layout-grid__cell--horizontal-align-".concat(N), "mdc-layout-grid__cell", !c && !h && !_ && !d && ["mdc-layout-grid__cell"], G && "mdc-layout-grid__cell--order-".concat(G), r && "mdc-layout-grid__cell--align-".concat(r), c && ["mdc-layout-grid__cell--span-".concat(c)], h && ["mdc-layout-grid__cell--span-".concat(h, "-phone")], _ && ["mdc-layout-grid__cell--span-".concat(_, "-tablet")], d && ["mdc-layout-grid__cell--span-".concat(d, "-desktop")], "lmnt-layout-grid__cell", v)
+  }, R), i);
+});
+Y.displayName = "GridCol";
+Y.propTypes = dl;
+var gl = ["children", "className", "style"];
+function U(l, n) {
+  var t = V(l);
+  if (S) {
+    var r = S(l);
+    n && (r = L(r).call(r, function(a) {
+      return T(l, a).enumerable;
+    })), t.push.apply(t, r);
+  }
+  return t;
+}
+function j(l) {
+  for (var n = 1; n < arguments.length; n++) {
+    var t, r, a = arguments[n] != null ? arguments[n] : {};
+    n % 2 ? x(t = U(Object(a), !0)).call(t, function(i) {
+      B(l, i, a[i]);
+    }) : H ? F(l, H(a)) : x(r = U(Object(a))).call(r, function(i) {
+      J(l, i, T(a, i));
+    });
+  }
+  return l;
+}
+var z = ul, Z = /* @__PURE__ */ I(function(l, n) {
+  var t = l.children, r = t === void 0 ? z.children : t, a = l.className, i = a === void 0 ? z.className : a, p = l.style, v = p === void 0 ? z.style : p, f = M(l, gl), c = tl(Q), m = c.fullHeight, d = c.rowGap, g = c.columnGap, y = k(function() {
+    var u = {
+      rowGap: d,
+      columnGap: g
+    };
+    return m && (u = j(j({}, u), {}, {
+      height: "100%"
+    })), j(j({}, v), u);
+  }, [v, m, d, g]);
+  return /* @__PURE__ */ W.createElement("div", E({
+    ref: n,
+    className: D("lmnt", "mdc-layout-grid__inner", "lmnt-layout-grid__inner", i),
+    style: y
+  }, f), r);
+});
+Z.displayName = "GridRow";
+Z.propTypes = sl;
+export {
+  X as G,
+  Z as a,
+  Y as b
+};

package/dist/index.es-Bo1Rhtyb.js

@@ -0,0 +1,80 @@
+import { _ as w, a as R, c as D, b as g, d as I, P as d } from "./index-Cpb-8cAN.js";
+import { _ as x, a as v, b as E, c as S, d as _, e as f, f as k } from "./defineProperty-CmuOyxyf.js";
+import q, { forwardRef as H, useMemo as K, useRef as M, useImperativeHandle as W } from "react";
+var z = {
+  /**
+   * Content to be rendered inside the padding component. Accepts any valid markup.
+   *
+   * Defaults to **null**.
+   */
+  children: d.node.isRequired,
+  /**
+   * The css class name to be passed through to the component markup.
+   *
+   * Defaults to **undefined**.
+   */
+  className: d.string,
+  /**
+   * Adds a custom padding style to the child content. Must be a valid CSS padding declaration. i.e. 38px 30px
+   *
+   * Defaults to **null**.
+   */
+  customPadding: d.string,
+  /**
+   * By default a div will be rendered, this allow another tag to be used instead. A block type component is suggested.
+   *
+   * Defaults to **'div'**.
+   */
+  tag: d.oneOfType([d.string, d.elementType]),
+  /**
+   * Applies the specified padding amount. `dense` is 8px, `standard` is 16px, and `airy` is 24px. If `customPadding` is used, this will be ignored.
+   *
+   * Defaults to **'standard'**.
+   */
+  variant: d.oneOf(["dense", "standard", "airy"])
+}, A = {
+  children: null,
+  className: void 0,
+  customPadding: null,
+  tag: "div",
+  variant: "standard"
+}, B = ["tag", "variant", "children", "className", "customPadding", "style"];
+function y(a, r) {
+  var t = I(a);
+  if (f) {
+    var n = f(a);
+    r && (n = k(n).call(n, function(e) {
+      return _(a, e).enumerable;
+    })), t.push.apply(t, n);
+  }
+  return t;
+}
+function P(a) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t, n, e = arguments[r] != null ? arguments[r] : {};
+    r % 2 ? g(t = y(Object(e), !0)).call(t, function(s) {
+      x(a, s, e[s]);
+    }) : v ? E(a, v(e)) : g(n = y(Object(e))).call(n, function(s) {
+      S(a, s, _(e, s));
+    });
+  }
+  return a;
+}
+var i = A, b = /* @__PURE__ */ H(function(a, r) {
+  var t = a.tag, n = t === void 0 ? i.tag : t, e = a.variant, s = e === void 0 ? i.variant : e, c = a.children, O = c === void 0 ? i.children : c, l = a.className, $ = l === void 0 ? i.className : l, o = a.customPadding, u = o === void 0 ? i.customPadding : o, p = a.style, m = p === void 0 ? i.style : p, h = w(a, B), j = K(function() {
+    return P(P({}, m), {}, {
+      padding: u
+    });
+  }, [m, u]), N = n || "div", T = M();
+  return W(r, function() {
+    return T.current;
+  }, []), /* @__PURE__ */ q.createElement(N, R({
+    className: D("lmnt", "lmnt-padding", s === "dense" && "lmnt-padding--dense", s === "standard" && "lmnt-padding--standard", s === "airy" && "lmnt-padding--airy", $),
+    style: j
+  }, h), O);
+});
+b.displayName = "Padding";
+b.propTypes = z;
+export {
+  b as P
+};