@x-plat/design-system 0.1.1

package/dist/layout/index.cjs

@@ -0,0 +1,188 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/layout/index.ts
+var layout_exports = {};
+__export(layout_exports, {
+  BREAKPOINT_KEYS_ORDERED: () => BREAKPOINT_KEYS_ORDERED,
+  FullGrid: () => FullGrid_default,
+  FullScreen: () => FullScreen_default,
+  GridItem: () => Item_default,
+  Header: () => Header_default,
+  Layout: () => Layout_default,
+  SideBar: () => SideBar_default,
+  SideBarContext: () => SideBarContext_default,
+  useSideBarContext: () => useSideBarContext
+});
+module.exports = __toCommonJS(layout_exports);
+
+// node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/layout/Grid/FullGrid/FullGrid.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FullGrid = (props) => {
+  const { children, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-full-grid", className), children });
+};
+FullGrid.displayName = "FullGrid";
+var FullGrid_default = FullGrid;
+
+// src/layout/Grid/FullScreen/FullScreen.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FullScreen = (props) => {
+  const { children, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: clsx_default("lib-xplat-full-screen", className), children });
+};
+FullScreen.displayName = "FullScreen";
+var FullScreen_default = FullScreen;
+
+// src/tokens/breakpoints.ts
+var BREAKPOINT_KEYS_ORDERED = ["laptop", "tablet", "mobile"];
+
+// src/layout/Grid/Item/Item.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var calculateSpans = (column) => {
+  const spans = {};
+  let inherited = column.default;
+  for (const key of BREAKPOINT_KEYS_ORDERED) {
+    inherited = column[key] ?? inherited;
+    spans[key] = inherited;
+  }
+  return spans;
+};
+var GridItem = ({ column, children, className }) => {
+  const spans = calculateSpans(column);
+  const style = {};
+  style["--column-default"] = spans[BREAKPOINT_KEYS_ORDERED[0]];
+  Object.entries(spans).forEach(([key, value]) => {
+    style[`--column-${key}`] = value;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
+};
+GridItem.displayName = "GridItem";
+var Item_default = GridItem;
+
+// src/layout/Header/Header.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Header = ({
+  logo,
+  centerContent,
+  rightContent
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lib-xplat-layout-header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: logo }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: centerContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: rightContent })
+  ] });
+};
+Header.displayName = "Header";
+var Header_default = Header;
+
+// src/layout/Layout/Layout.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Layout = (props) => {
+  const { header, sideBar, children } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lib-xplat-layout-content-wrapper", children: [
+    sideBar && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: sideBar }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lib-xplat-layout-content", children: [
+      header && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lib-xplat-layout-conent-header", children: header }),
+      children
+    ] })
+  ] }) });
+};
+Layout.displayName = "Layout";
+var Layout_default = Layout;
+
+// src/layout/SideBar/SideBar.tsx
+var import_react2 = __toESM(require("react"), 1);
+
+// src/layout/SideBar/SideBarContext.tsx
+var import_react = __toESM(require("react"), 1);
+var SideBarContext = import_react.default.createContext(null);
+var useSideBarContext = () => {
+  const ctx = import_react.default.useContext(SideBarContext);
+  if (!ctx) throw new Error("Error");
+  return ctx;
+};
+var SideBarContext_default = SideBarContext;
+
+// src/layout/SideBar/SideBar.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SideBar = (props) => {
+  const { children, className } = props;
+  const [isOpen, setIsOpen] = import_react2.default.useState(true);
+  const handleSwitchSideBar = () => {
+    setIsOpen((prev) => !prev);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    SideBarContext_default.Provider,
+    {
+      value: { isSidebarOpen: isOpen, handleSwitchSideBar },
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "div",
+        {
+          className: clsx_default(
+            "lib-xplat-layout-sidebar",
+            isOpen ? "large" : "small",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+};
+SideBar.displayName = "SideBar";
+var SideBar_default = SideBar;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BREAKPOINT_KEYS_ORDERED,
+  FullGrid,
+  FullScreen,
+  GridItem,
+  Header,
+  Layout,
+  SideBar,
+  SideBarContext,
+  useSideBarContext
+});

package/dist/layout/index.css

@@ -0,0 +1,112 @@
+/* src/layout/Grid/FullGrid/fullgrid.scss */
+.lib-xplat-full-grid {
+  display: grid;
+  flex: 1;
+  grid-template-columns: repeat(12, 1fr);
+}
+@media (min-width: 0px) and (max-width: 768px) {
+  .lib-xplat-full-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+@media (min-width: 768px) and (max-width: 1024px) {
+  .lib-xplat-full-grid {
+    grid-template-columns: repeat(8, 1fr);
+  }
+}
+@media (min-width: 1024px) and (max-width: 9999px) {
+  .lib-xplat-full-grid {
+    grid-template-columns: repeat(12, 1fr);
+  }
+}
+
+/* src/layout/Grid/FullScreen/fullscreen.scss */
+.lib-xplat-full-screen {
+  display: grid;
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+  grid-template-columns: repeat(12, 1fr);
+}
+@media (min-width: 0px) and (max-width: 768px) {
+  .lib-xplat-full-screen {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+@media (min-width: 768px) and (max-width: 1024px) {
+  .lib-xplat-full-screen {
+    grid-template-columns: repeat(8, 1fr);
+  }
+}
+@media (min-width: 1024px) and (max-width: 9999px) {
+  .lib-xplat-full-screen {
+    grid-template-columns: repeat(12, 1fr);
+  }
+}
+
+/* src/layout/Grid/Item/item.scss */
+.lib-xplat-grid-item {
+  grid-column: span var(--column-default);
+}
+@media (min-width: 0px) and (max-width: 768px) {
+  .lib-xplat-grid-item {
+    grid-column: span var(--column-mobile);
+  }
+}
+@media (min-width: 768px) and (max-width: 1024px) {
+  .lib-xplat-grid-item {
+    grid-column: span var(--column-tablet);
+  }
+}
+@media (min-width: 1024px) and (max-width: 9999px) {
+  .lib-xplat-grid-item {
+    grid-column: span var(--column-laptop);
+  }
+}
+
+/* src/layout/Header/header.scss */
+.lib-xplat-layout-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid #E5E5E5;
+  background-color: #FFFFFF;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* src/layout/Layout/layout.scss */
+.lib-xplat-layout {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #FAFAFA;
+}
+.lib-xplat-layout > .lib-xplat-layout-content-wrapper {
+  display: flex;
+  height: 100%;
+}
+.lib-xplat-layout > .lib-xplat-layout-content-wrapper > .lib-xplat-layout-content {
+  flex: 1;
+  overflow: auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.lib-xplat-layout > .lib-xplat-layout-content-wrapper > .lib-xplat-layout-content > .lib-xplat-layout-conent-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+/* src/layout/SideBar/sidebar.scss */
+.lib-xplat-layout-sidebar {
+  transition: all 0.3s ease-in-out;
+}
+.lib-xplat-layout-sidebar.large {
+  width: 260px;
+}
+.lib-xplat-layout-sidebar.small {
+  width: 72px;
+}

package/dist/layout/index.d.cts

@@ -0,0 +1,8 @@
+export { FullGrid } from './Grid/FullGrid/index.cjs';
+export { FullScreen } from './Grid/FullScreen/index.cjs';
+export { GridItem } from './Grid/Item/index.cjs';
+export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor } from '../breakpoints-DsXkJgdl.cjs';
+export { Header } from './Header/index.cjs';
+export { Layout } from './Layout/index.cjs';
+export { SideBar, SideBarContext, useSideBarContext } from './SideBar/index.cjs';
+import 'react';

package/dist/layout/index.d.ts

@@ -0,0 +1,8 @@
+export { FullGrid } from './Grid/FullGrid/index.js';
+export { FullScreen } from './Grid/FullScreen/index.js';
+export { GridItem } from './Grid/Item/index.js';
+export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor } from '../breakpoints-DsXkJgdl.js';
+export { Header } from './Header/index.js';
+export { Layout } from './Layout/index.js';
+export { SideBar, SideBarContext, useSideBarContext } from './SideBar/index.js';
+import 'react';

package/dist/layout/index.js

@@ -0,0 +1,143 @@
+// node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/layout/Grid/FullGrid/FullGrid.tsx
+import { jsx } from "react/jsx-runtime";
+var FullGrid = (props) => {
+  const { children, className } = props;
+  return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-full-grid", className), children });
+};
+FullGrid.displayName = "FullGrid";
+var FullGrid_default = FullGrid;
+
+// src/layout/Grid/FullScreen/FullScreen.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FullScreen = (props) => {
+  const { children, className } = props;
+  return /* @__PURE__ */ jsx2("div", { className: clsx_default("lib-xplat-full-screen", className), children });
+};
+FullScreen.displayName = "FullScreen";
+var FullScreen_default = FullScreen;
+
+// src/tokens/breakpoints.ts
+var BREAKPOINT_KEYS_ORDERED = ["laptop", "tablet", "mobile"];
+
+// src/layout/Grid/Item/Item.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var calculateSpans = (column) => {
+  const spans = {};
+  let inherited = column.default;
+  for (const key of BREAKPOINT_KEYS_ORDERED) {
+    inherited = column[key] ?? inherited;
+    spans[key] = inherited;
+  }
+  return spans;
+};
+var GridItem = ({ column, children, className }) => {
+  const spans = calculateSpans(column);
+  const style = {};
+  style["--column-default"] = spans[BREAKPOINT_KEYS_ORDERED[0]];
+  Object.entries(spans).forEach(([key, value]) => {
+    style[`--column-${key}`] = value;
+  });
+  return /* @__PURE__ */ jsx3("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
+};
+GridItem.displayName = "GridItem";
+var Item_default = GridItem;
+
+// src/layout/Header/Header.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var Header = ({
+  logo,
+  centerContent,
+  rightContent
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "lib-xplat-layout-header", children: [
+    /* @__PURE__ */ jsx4("div", { children: logo }),
+    /* @__PURE__ */ jsx4("div", { children: centerContent }),
+    /* @__PURE__ */ jsx4("div", { children: rightContent })
+  ] });
+};
+Header.displayName = "Header";
+var Header_default = Header;
+
+// src/layout/Layout/Layout.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var Layout = (props) => {
+  const { header, sideBar, children } = props;
+  return /* @__PURE__ */ jsx5("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs2("div", { className: "lib-xplat-layout-content-wrapper", children: [
+    sideBar && /* @__PURE__ */ jsx5(Fragment, { children: sideBar }),
+    /* @__PURE__ */ jsxs2("div", { className: "lib-xplat-layout-content", children: [
+      header && /* @__PURE__ */ jsx5("div", { className: "lib-xplat-layout-conent-header", children: header }),
+      children
+    ] })
+  ] }) });
+};
+Layout.displayName = "Layout";
+var Layout_default = Layout;
+
+// src/layout/SideBar/SideBar.tsx
+import React2 from "react";
+
+// src/layout/SideBar/SideBarContext.tsx
+import React from "react";
+var SideBarContext = React.createContext(null);
+var useSideBarContext = () => {
+  const ctx = React.useContext(SideBarContext);
+  if (!ctx) throw new Error("Error");
+  return ctx;
+};
+var SideBarContext_default = SideBarContext;
+
+// src/layout/SideBar/SideBar.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var SideBar = (props) => {
+  const { children, className } = props;
+  const [isOpen, setIsOpen] = React2.useState(true);
+  const handleSwitchSideBar = () => {
+    setIsOpen((prev) => !prev);
+  };
+  return /* @__PURE__ */ jsx6(
+    SideBarContext_default.Provider,
+    {
+      value: { isSidebarOpen: isOpen, handleSwitchSideBar },
+      children: /* @__PURE__ */ jsx6(
+        "div",
+        {
+          className: clsx_default(
+            "lib-xplat-layout-sidebar",
+            isOpen ? "large" : "small",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+};
+SideBar.displayName = "SideBar";
+var SideBar_default = SideBar;
+export {
+  BREAKPOINT_KEYS_ORDERED,
+  FullGrid_default as FullGrid,
+  FullScreen_default as FullScreen,
+  Item_default as GridItem,
+  Header_default as Header,
+  Layout_default as Layout,
+  SideBar_default as SideBar,
+  SideBarContext_default as SideBarContext,
+  useSideBarContext
+};