@jirawatpyk/aura-react 4.7.1 → 4.8.0

package/dist/esm/layout2.js

@@ -1,138 +0,0 @@
-'use client';
-import * as React from "react";
-import { useStrings } from "./locale.js";
-import { cx } from "./internal.js";
-import { IconButton } from "./IconButton.js";
-import { Drawer } from "./Dialog.js";
-const h = React.createElement;
-const breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
-const ORDER = ["base", "sm", "md", "lg", "xl"];
-function useBreakpoint() {
-  return React.useSyncExternalStore(subscribe, current, function() {
-    return "lg";
-  });
-}
-function current() {
-  let w = window.innerWidth, bp = "base";
-  ORDER.slice(1).forEach(function(k) {
-    if (w >= breakpoints[k]) bp = k;
-  });
-  return bp;
-}
-function subscribe(cb) {
-  window.addEventListener("resize", cb);
-  return function() {
-    window.removeEventListener("resize", cb);
-  };
-}
-function useResponsive(value) {
-  const bp = useBreakpoint();
-  if (value == null || typeof value !== "object") return value;
-  const map = value;
-  for (let i = ORDER.indexOf(bp); i >= 0; i--) if (map[ORDER[i]] !== void 0) return map[ORDER[i]];
-  return void 0;
-}
-function respVars(prefix, value, map) {
-  const style = {};
-  if (value == null) return style;
-  if (typeof value !== "object") value = { base: value };
-  let byBp = value, cur;
-  ORDER.forEach(function(k) {
-    if (byBp[k] !== void 0) cur = map ? map(byBp[k]) : byBp[k];
-    if (cur !== void 0) style["--" + prefix + "-" + k] = cur;
-  });
-  return style;
-}
-const space = function(v) {
-  return typeof v === "number" ? "var(--aura-space-" + v + ")" : v;
-};
-const Stack = React.forwardRef(function Stack2(props, ref) {
-  const style = Object.assign(
-    {},
-    respVars("aura-stack-dir", props.direction || "column"),
-    respVars("aura-stack-gap", props.gap == null ? 4 : props.gap, space),
-    respVars("aura-stack-align", props.align || "stretch"),
-    props.justify ? { justifyContent: props.justify } : null,
-    props.wrap ? { flexWrap: "wrap" } : null,
-    props.style
-  );
-  return h(props.as || "div", { ref, className: cx("aura-stack", props.className), style }, props.children);
-});
-const Grid = React.forwardRef(function Grid2(props, ref) {
-  const style = Object.assign(
-    {},
-    respVars("aura-grid-gap", props.gap == null ? 6 : props.gap, space),
-    props.minItemWidth ? { gridTemplateColumns: "repeat(auto-fill, minmax(min(" + props.minItemWidth + "px, 100%), 1fr))" } : respVars("aura-grid-cols", props.columns || 1),
-    props.style
-  );
-  return h(
-    props.as || "div",
-    { ref, className: cx("aura-grid-layout", props.minItemWidth && "is-auto", props.className), style },
-    props.children
-  );
-});
-const Container = React.forwardRef(function Container2(props, ref) {
-  return h(
-    props.as || "div",
-    {
-      ref,
-      className: cx("aura-container", props.size === "narrow" && "is-narrow", props.className),
-      style: props.style
-    },
-    props.children
-  );
-});
-const AppShell = React.forwardRef(function AppShell2(props, ref) {
-  const t = useStrings();
-  const bp = useBreakpoint();
-  const compact = bp === "base" || bp === "sm" || bp === "md";
-  const st = React.useState(false), open = st[0], setOpen = st[1];
-  React.useEffect(
-    function() {
-      if (!compact) setOpen(false);
-    },
-    [compact]
-  );
-  const navEl = props.nav;
-  const nav = props.nav && React.isValidElement(props.nav) && compact ? React.cloneElement(navEl, {
-    onChange: function(id) {
-      if (navEl.props.onChange) navEl.props.onChange(id);
-      setOpen(false);
-    },
-    className: cx(navEl.props.className, "is-in-drawer")
-  }) : props.nav;
-  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-shell", compact && "is-compact", props.className) }, !compact ? /* @__PURE__ */ React.createElement("div", { className: "aura-shell__nav" }, nav) : null, compact ? /* @__PURE__ */ React.createElement(
-    Drawer,
-    {
-      open,
-      onClose: function() {
-        setOpen(false);
-      },
-      side: "left",
-      size: "nav",
-      "aria-label": props.navLabel || t.navigation,
-      dismissible: true
-    },
-    nav
-  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__main" }, props.header || compact ? /* @__PURE__ */ React.createElement("header", { className: "aura-shell__bar" }, compact ? /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      icon: "menu",
-      label: props.menuLabel || t.openNav,
-      size: "md",
-      onClick: function() {
-        setOpen(true);
-      },
-      "aria-expanded": open
-    }
-  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React.createElement("main", { className: "aura-shell__content", id: props.mainId || "main" }, props.children)));
-});
-export {
-  AppShell,
-  Container,
-  Grid,
-  Stack,
-  breakpoints,
-  useBreakpoint,
-  useResponsive
-};