@x-plat/design-system 0.1.1

package/dist/components/Table/index.d.cts

@@ -0,0 +1,174 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { C as ColorNamespace, a as ColorName, d as ColorProps } from '../../colors-BG91q_uV.cjs';
+
+interface TableProps {
+    className?: string;
+    children: React.ReactNode;
+    rowBorderUse?: boolean;
+    colBorderUse?: boolean;
+    headerSticky?: boolean;
+    stickyShadow?: boolean;
+}
+declare const Table: {
+    (props: TableProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface TableBodyProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const TableBody: {
+    (props: TableBodyProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface TableCellProps {
+    children: React.ReactNode;
+    align?: "start" | "center" | "end";
+    className?: string;
+    isSticky?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLTableCellElement>) => void;
+}
+declare const TableCell: React.FC<TableCellProps>;
+
+interface TableHeaderProps {
+    children: React.ReactNode;
+    className?: string;
+    cellHover?: boolean;
+}
+declare const TableHead: {
+    ({ children, className, cellHover, }: TableHeaderProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface TableRowProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ColorProps<N, C> {
+    className?: string;
+    children: React.ReactNode;
+    type?: "primary" | "secondary";
+    isHover?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLTableRowElement>) => void;
+}
+declare const TableRow: {
+    <N extends ColorNamespace = "xplat", C extends ColorName<N> = keyof {
+        readonly xplat: {
+            readonly red: {
+                readonly 50: "#FFF0F0";
+                readonly 100: "#FFDDDE";
+                readonly 200: "#FFC1C2";
+                readonly 300: "#FF9698";
+                readonly 400: "#FF5A5D";
+                readonly 500: "#FF272B";
+                readonly 600: "#F80409";
+                readonly 700: "#D40105";
+                readonly 800: "#AE0609";
+                readonly 900: "#900C0F";
+            };
+            readonly green: {
+                readonly 50: "#E5F6EA";
+                readonly 100: "#C1E7CC";
+                readonly 200: "#98D8AC";
+                readonly 300: "#6CCA8B";
+                readonly 400: "#47BE72";
+                readonly 500: "#10B259";
+                readonly 600: "#00A34F";
+                readonly 700: "#009143";
+                readonly 800: "#007F38";
+                readonly 900: "#006024";
+            };
+            readonly orange: {
+                readonly 50: "#FFF8EC";
+                readonly 100: "#FFF0D3";
+                readonly 200: "#FFDDA5";
+                readonly 300: "#FFC46D";
+                readonly 400: "#FF9F32";
+                readonly 500: "#FF820A";
+                readonly 600: "#FF6900";
+                readonly 700: "#CC4B02";
+                readonly 800: "#A13A0B";
+                readonly 900: "#82320C";
+            };
+            readonly yellow: {
+                readonly 50: "#FFFDE7";
+                readonly 100: "#FFFAC1";
+                readonly 200: "#FFF186";
+                readonly 300: "#FFE041";
+                readonly 400: "#FFCC0D";
+                readonly 500: "#F0B100";
+                readonly 600: "#D18800";
+                readonly 700: "#A66002";
+                readonly 800: "#894B0A";
+                readonly 900: "#743D0F";
+            };
+            readonly blue: {
+                readonly 50: "#F1F4FD";
+                readonly 100: "#DFE7FA";
+                readonly 200: "#C5D4F8";
+                readonly 300: "#9EB8F2";
+                readonly 400: "#7093EA";
+                readonly 500: "#4D6DE3";
+                readonly 600: "#3950D7";
+                readonly 700: "#303EC5";
+                readonly 800: "#2D35A0";
+                readonly 900: "#29317F";
+            };
+            readonly lightblue: {
+                readonly 50: "#EEFAFF";
+                readonly 100: "#D9F4FF";
+                readonly 200: "#BBEDFF";
+                readonly 300: "#8DE3FF";
+                readonly 400: "#57D0FF";
+                readonly 500: "#30B6FF";
+                readonly 600: "#1999F7";
+                readonly 700: "#1280E3";
+                readonly 800: "#1566B8";
+                readonly 900: "#175791";
+            };
+            readonly purple: {
+                readonly 50: "#FBF6FE";
+                readonly 100: "#F5EAFD";
+                readonly 200: "#EDD8FC";
+                readonly 300: "#E0BAF8";
+                readonly 400: "#CD8DF3";
+                readonly 500: "#B961EB";
+                readonly 600: "#A541DC";
+                readonly 700: "#9230C5";
+                readonly 800: "#782B9E";
+                readonly 900: "#62247F";
+            };
+            readonly pink: {
+                readonly 50: "#FFF4FE";
+                readonly 100: "#FFE7FD";
+                readonly 200: "#FFCFFA";
+                readonly 300: "#FEA9F1";
+                readonly 400: "#FD75E7";
+                readonly 500: "#F553DA";
+                readonly 600: "#D821B6";
+                readonly 700: "#B31892";
+                readonly 800: "#921676";
+                readonly 900: "#781761";
+            };
+            readonly neutral: {
+                readonly 50: "#FAFAFA";
+                readonly 100: "#F5F5F5";
+                readonly 200: "#E5E5E5";
+                readonly 300: "#D4D4D4";
+                readonly 400: "#A1A1A1";
+                readonly 500: "#737373";
+                readonly 600: "#525252";
+                readonly 700: "#404040";
+                readonly 800: "#262626";
+                readonly 900: "#171717";
+            };
+            readonly black: "#000000";
+            readonly white: "#FFFFFF";
+        };
+        readonly test: {
+            readonly default: "#ffffff";
+        };
+    }[N]>(props: TableRowProps<N, C>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Table, TableBody, TableCell, TableHead, TableRow };

package/dist/components/Table/index.d.ts

@@ -0,0 +1,174 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { C as ColorNamespace, a as ColorName, d as ColorProps } from '../../colors-BG91q_uV.js';
+
+interface TableProps {
+    className?: string;
+    children: React.ReactNode;
+    rowBorderUse?: boolean;
+    colBorderUse?: boolean;
+    headerSticky?: boolean;
+    stickyShadow?: boolean;
+}
+declare const Table: {
+    (props: TableProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface TableBodyProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const TableBody: {
+    (props: TableBodyProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface TableCellProps {
+    children: React.ReactNode;
+    align?: "start" | "center" | "end";
+    className?: string;
+    isSticky?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLTableCellElement>) => void;
+}
+declare const TableCell: React.FC<TableCellProps>;
+
+interface TableHeaderProps {
+    children: React.ReactNode;
+    className?: string;
+    cellHover?: boolean;
+}
+declare const TableHead: {
+    ({ children, className, cellHover, }: TableHeaderProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface TableRowProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ColorProps<N, C> {
+    className?: string;
+    children: React.ReactNode;
+    type?: "primary" | "secondary";
+    isHover?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLTableRowElement>) => void;
+}
+declare const TableRow: {
+    <N extends ColorNamespace = "xplat", C extends ColorName<N> = keyof {
+        readonly xplat: {
+            readonly red: {
+                readonly 50: "#FFF0F0";
+                readonly 100: "#FFDDDE";
+                readonly 200: "#FFC1C2";
+                readonly 300: "#FF9698";
+                readonly 400: "#FF5A5D";
+                readonly 500: "#FF272B";
+                readonly 600: "#F80409";
+                readonly 700: "#D40105";
+                readonly 800: "#AE0609";
+                readonly 900: "#900C0F";
+            };
+            readonly green: {
+                readonly 50: "#E5F6EA";
+                readonly 100: "#C1E7CC";
+                readonly 200: "#98D8AC";
+                readonly 300: "#6CCA8B";
+                readonly 400: "#47BE72";
+                readonly 500: "#10B259";
+                readonly 600: "#00A34F";
+                readonly 700: "#009143";
+                readonly 800: "#007F38";
+                readonly 900: "#006024";
+            };
+            readonly orange: {
+                readonly 50: "#FFF8EC";
+                readonly 100: "#FFF0D3";
+                readonly 200: "#FFDDA5";
+                readonly 300: "#FFC46D";
+                readonly 400: "#FF9F32";
+                readonly 500: "#FF820A";
+                readonly 600: "#FF6900";
+                readonly 700: "#CC4B02";
+                readonly 800: "#A13A0B";
+                readonly 900: "#82320C";
+            };
+            readonly yellow: {
+                readonly 50: "#FFFDE7";
+                readonly 100: "#FFFAC1";
+                readonly 200: "#FFF186";
+                readonly 300: "#FFE041";
+                readonly 400: "#FFCC0D";
+                readonly 500: "#F0B100";
+                readonly 600: "#D18800";
+                readonly 700: "#A66002";
+                readonly 800: "#894B0A";
+                readonly 900: "#743D0F";
+            };
+            readonly blue: {
+                readonly 50: "#F1F4FD";
+                readonly 100: "#DFE7FA";
+                readonly 200: "#C5D4F8";
+                readonly 300: "#9EB8F2";
+                readonly 400: "#7093EA";
+                readonly 500: "#4D6DE3";
+                readonly 600: "#3950D7";
+                readonly 700: "#303EC5";
+                readonly 800: "#2D35A0";
+                readonly 900: "#29317F";
+            };
+            readonly lightblue: {
+                readonly 50: "#EEFAFF";
+                readonly 100: "#D9F4FF";
+                readonly 200: "#BBEDFF";
+                readonly 300: "#8DE3FF";
+                readonly 400: "#57D0FF";
+                readonly 500: "#30B6FF";
+                readonly 600: "#1999F7";
+                readonly 700: "#1280E3";
+                readonly 800: "#1566B8";
+                readonly 900: "#175791";
+            };
+            readonly purple: {
+                readonly 50: "#FBF6FE";
+                readonly 100: "#F5EAFD";
+                readonly 200: "#EDD8FC";
+                readonly 300: "#E0BAF8";
+                readonly 400: "#CD8DF3";
+                readonly 500: "#B961EB";
+                readonly 600: "#A541DC";
+                readonly 700: "#9230C5";
+                readonly 800: "#782B9E";
+                readonly 900: "#62247F";
+            };
+            readonly pink: {
+                readonly 50: "#FFF4FE";
+                readonly 100: "#FFE7FD";
+                readonly 200: "#FFCFFA";
+                readonly 300: "#FEA9F1";
+                readonly 400: "#FD75E7";
+                readonly 500: "#F553DA";
+                readonly 600: "#D821B6";
+                readonly 700: "#B31892";
+                readonly 800: "#921676";
+                readonly 900: "#781761";
+            };
+            readonly neutral: {
+                readonly 50: "#FAFAFA";
+                readonly 100: "#F5F5F5";
+                readonly 200: "#E5E5E5";
+                readonly 300: "#D4D4D4";
+                readonly 400: "#A1A1A1";
+                readonly 500: "#737373";
+                readonly 600: "#525252";
+                readonly 700: "#404040";
+                readonly 800: "#262626";
+                readonly 900: "#171717";
+            };
+            readonly black: "#000000";
+            readonly white: "#FFFFFF";
+        };
+        readonly test: {
+            readonly default: "#ffffff";
+        };
+    }[N]>(props: TableRowProps<N, C>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Table, TableBody, TableCell, TableHead, TableRow };

package/dist/components/Table/index.js

@@ -0,0 +1,343 @@
+// 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/components/Table/TableContext.tsx
+import React from "react";
+var TableContext = React.createContext(null);
+var useTableContext = () => {
+  const ctx = React.useContext(TableContext);
+  if (!ctx) throw new Error("Table components must be used inside <Table>");
+  return ctx;
+};
+var TableContext_default = TableContext;
+
+// src/components/Table/Table.tsx
+import { jsx } from "react/jsx-runtime";
+var Table = (props) => {
+  const {
+    className,
+    children,
+    rowBorderUse = true,
+    colBorderUse = true,
+    headerSticky = false,
+    stickyShadow = true
+  } = props;
+  return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-table-wrapper", className), children: /* @__PURE__ */ jsx(
+    TableContext_default.Provider,
+    {
+      value: {
+        rowBorderUse,
+        colBorderUse,
+        headerSticky,
+        stickyShadow
+      },
+      children: /* @__PURE__ */ jsx("table", { className: "lib-xplat-table", children })
+    }
+  ) });
+};
+Table.displayName = "Table";
+var Table_default = Table;
+
+// src/components/Table/TableBody.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TableBody = (props) => {
+  const { children, className } = props;
+  return /* @__PURE__ */ jsx2("tbody", { className, children });
+};
+TableBody.displayName = "TableBody";
+var TableBody_default = TableBody;
+
+// src/components/Table/TableCell.tsx
+import React4 from "react";
+
+// src/components/Table/TableHeadContext.tsx
+import React2 from "react";
+var TableHeadContext = React2.createContext(
+  null
+);
+var useTableHeadContext = () => {
+  const ctx = React2.useContext(TableHeadContext);
+  return ctx;
+};
+var TableHeadContext_default = TableHeadContext;
+
+// src/components/Table/TableRowContext.tsx
+import React3 from "react";
+var TableRowContext = React3.createContext(null);
+var useTableRowContext = () => {
+  const ctx = React3.useContext(TableRowContext);
+  if (!ctx) throw new Error("Table components must be used inside <Table>");
+  return ctx;
+};
+var TableRowContext_default = TableRowContext;
+
+// src/components/Table/TableCell.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var TableCell = (props) => {
+  const {
+    children,
+    align = "center",
+    className,
+    isSticky = false,
+    onClick
+  } = props;
+  const { registerStickyCell, stickyCells } = useTableRowContext();
+  const { stickyShadow } = useTableContext();
+  const headContext = useTableHeadContext();
+  const [left, setLeft] = React4.useState(0);
+  const cellRef = React4.useRef(null);
+  const calculateLeft = React4.useCallback(() => {
+    if (!cellRef.current) return 0;
+    let totalLeft = 0;
+    for (const ref of stickyCells) {
+      if (ref === cellRef) break;
+      if (ref.current) totalLeft += ref.current.offsetWidth;
+    }
+    return totalLeft;
+  }, [stickyCells]);
+  React4.useEffect(() => {
+    if (!isSticky || !cellRef.current) return;
+    registerStickyCell(cellRef);
+    setLeft(calculateLeft());
+    const observer = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        setLeft(calculateLeft());
+      });
+    });
+    if (cellRef.current) observer.observe(cellRef.current);
+    for (const ref of stickyCells) {
+      if (ref.current) observer.observe(ref.current);
+    }
+    return () => observer.disconnect();
+  }, [isSticky, registerStickyCell, calculateLeft]);
+  const CellTag = cellRef.current?.tagName === "TH" ? "th" : "td";
+  const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
+  const enableHover = headContext && headContext.cellHover;
+  return /* @__PURE__ */ jsx3(
+    CellTag,
+    {
+      ref: cellRef,
+      className: clsx_default(
+        `align-${align}`,
+        isSticky && "table-sticky",
+        isLastSticky && stickyShadow && "right-shadow",
+        onClick && "clickable",
+        enableHover && "cell-hover",
+        className
+      ),
+      style: isSticky ? { left } : void 0,
+      onClick,
+      children
+    }
+  );
+};
+TableCell.displayName = "TableCell";
+var TableCell_default = TableCell;
+
+// src/components/Table/TableHead.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var TableHead = ({
+  children,
+  className = "",
+  cellHover = false
+}) => {
+  const { headerSticky } = useTableContext();
+  return /* @__PURE__ */ jsx4(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ jsx4("thead", { className: clsx_default(headerSticky ? "table-sticky" : null, className), children }) });
+};
+TableHead.displayName = "TableHead";
+var TableHead_default = TableHead;
+
+// src/components/Table/TableRow.tsx
+import React5 from "react";
+
+// src/tokens/colors.ts
+var colors = {
+  xplat: {
+    red: {
+      50: "#FFF0F0",
+      100: "#FFDDDE",
+      200: "#FFC1C2",
+      300: "#FF9698",
+      400: "#FF5A5D",
+      500: "#FF272B",
+      600: "#F80409",
+      700: "#D40105",
+      800: "#AE0609",
+      900: "#900C0F"
+    },
+    green: {
+      50: "#E5F6EA",
+      100: "#C1E7CC",
+      200: "#98D8AC",
+      300: "#6CCA8B",
+      400: "#47BE72",
+      500: "#10B259",
+      600: "#00A34F",
+      700: "#009143",
+      800: "#007F38",
+      900: "#006024"
+    },
+    orange: {
+      50: "#FFF8EC",
+      100: "#FFF0D3",
+      200: "#FFDDA5",
+      300: "#FFC46D",
+      400: "#FF9F32",
+      500: "#FF820A",
+      600: "#FF6900",
+      700: "#CC4B02",
+      800: "#A13A0B",
+      900: "#82320C"
+    },
+    yellow: {
+      50: "#FFFDE7",
+      100: "#FFFAC1",
+      200: "#FFF186",
+      300: "#FFE041",
+      400: "#FFCC0D",
+      500: "#F0B100",
+      600: "#D18800",
+      700: "#A66002",
+      800: "#894B0A",
+      900: "#743D0F"
+    },
+    blue: {
+      50: "#F1F4FD",
+      100: "#DFE7FA",
+      200: "#C5D4F8",
+      300: "#9EB8F2",
+      400: "#7093EA",
+      500: "#4D6DE3",
+      600: "#3950D7",
+      700: "#303EC5",
+      800: "#2D35A0",
+      900: "#29317F"
+    },
+    lightblue: {
+      50: "#EEFAFF",
+      100: "#D9F4FF",
+      200: "#BBEDFF",
+      300: "#8DE3FF",
+      400: "#57D0FF",
+      500: "#30B6FF",
+      600: "#1999F7",
+      700: "#1280E3",
+      800: "#1566B8",
+      900: "#175791"
+    },
+    purple: {
+      50: "#FBF6FE",
+      100: "#F5EAFD",
+      200: "#EDD8FC",
+      300: "#E0BAF8",
+      400: "#CD8DF3",
+      500: "#B961EB",
+      600: "#A541DC",
+      700: "#9230C5",
+      800: "#782B9E",
+      900: "#62247F"
+    },
+    pink: {
+      50: "#FFF4FE",
+      100: "#FFE7FD",
+      200: "#FFCFFA",
+      300: "#FEA9F1",
+      400: "#FD75E7",
+      500: "#F553DA",
+      600: "#D821B6",
+      700: "#B31892",
+      800: "#921676",
+      900: "#781761"
+    },
+    neutral: {
+      50: "#FAFAFA",
+      100: "#F5F5F5",
+      200: "#E5E5E5",
+      300: "#D4D4D4",
+      400: "#A1A1A1",
+      500: "#737373",
+      600: "#525252",
+      700: "#404040",
+      800: "#262626",
+      900: "#171717"
+    },
+    black: "#000000",
+    white: "#FFFFFF"
+  },
+  test: {
+    default: "#ffffff"
+  }
+};
+
+// src/util/getColor.ts
+var getColorClass = (namespace, palette, shade) => {
+  const namespaceMap = colors[namespace];
+  const paletteMap = namespaceMap[palette];
+  const hasShade = paletteMap && typeof paletteMap === "object" && shade !== void 0 && shade in paletteMap;
+  return `${String(namespace)}-${String(palette)}${hasShade ? `-${String(shade)}` : ""}`;
+};
+
+// src/components/Table/TableRow.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var TableRow = (props) => {
+  const {
+    children,
+    className,
+    colorNamespace = "xplat",
+    color = "black",
+    colorDepth,
+    type = "secondary",
+    isHover,
+    onClick
+  } = props;
+  const { rowBorderUse } = useTableContext();
+  const [stickyCells, setStickyCells] = React5.useState([]);
+  const registerStickyCell = (ref) => {
+    setStickyCells((prev) => {
+      if (prev.includes(ref)) return prev;
+      return [...prev, ref];
+    });
+  };
+  const colorClass = getColorClass(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  return /* @__PURE__ */ jsx5(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx5(
+    "tr",
+    {
+      className: clsx_default(
+        rowBorderUse ? "table-bottom-border" : null,
+        type,
+        colorClass,
+        isHover && "hover",
+        onClick && "clickable",
+        className
+      ),
+      onClick,
+      children
+    }
+  ) });
+};
+TableRow.displayName = "TableRow";
+var TableRow_default = TableRow;
+export {
+  Table_default as Table,
+  TableBody_default as TableBody,
+  TableCell_default as TableCell,
+  TableHead_default as TableHead,
+  TableRow_default as TableRow
+};