@mekari/pixel3-table 0.0.0

package/dist/chunk-3GSGQUM7.mjs

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/modules/table.props.ts
+var tableProps = {
+  isHoverable: {
+    type: Boolean,
+    default: true
+  }
+};
+var tableHeadProps = {
+  isFixed: {
+    type: Boolean
+  }
+};
+var tableCellProps = {
+  as: {
+    type: String,
+    default: "th"
+  },
+  isFixed: {
+    type: Boolean
+  }
+};
+var tableContainerProps = {
+  hasShadow: {
+    type: Boolean
+  }
+};
+
+export {
+  __name,
+  tableProps,
+  tableHeadProps,
+  tableCellProps,
+  tableContainerProps
+};

package/dist/chunk-WI56UCYK.mjs

@@ -0,0 +1,187 @@
+import {
+  __name,
+  tableCellProps,
+  tableContainerProps,
+  tableHeadProps,
+  tableProps
+} from "./chunk-3GSGQUM7.mjs";
+
+// src/table.tsx
+import { isVNode as _isVNode, createVNode as _createVNode } from "vue";
+import { defineComponent, ref, onMounted } from "vue";
+import { tableRecipe, tableContainerRecipe } from "@mekari/pixel3-styled-system/recipes";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !_isVNode(s);
+}
+__name(_isSlot, "_isSlot");
+var MpTable = defineComponent({
+  name: "MpTable",
+  props: tableProps,
+  setup(props, {
+    slots
+  }) {
+    const classes = tableRecipe();
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        isHoverable
+      } = props;
+      return _createVNode("table", {
+        "class": classes,
+        "data-pixel-component": "MpTable",
+        "data-table-hoverable": isHoverable ? true : void 0
+      }, [children]);
+    };
+  }
+});
+var MpTableHead = defineComponent({
+  name: "MpTableHead",
+  props: tableHeadProps,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        isFixed
+      } = props;
+      return _createVNode("thead", {
+        "data-pixel-component": "MpTableHead",
+        "data-table-head-fixed": isFixed ? true : void 0
+      }, [children]);
+    };
+  }
+});
+var MpTableBody = defineComponent({
+  name: "MpTableBody",
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const children = slots.default && slots.default();
+      return _createVNode("tbody", {
+        "data-pixel-component": "MpTableBody"
+      }, [children]);
+    };
+  }
+});
+var MpTableRow = defineComponent({
+  name: "MpTableRow",
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const children = slots.default && slots.default();
+      return _createVNode("tr", {
+        "data-pixel-component": "MpTableRow"
+      }, [children]);
+    };
+  }
+});
+var MpTableCell = defineComponent({
+  name: "MpTableCell",
+  props: tableCellProps,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        as: Component,
+        isFixed
+      } = props;
+      return _createVNode(Component, {
+        "data-pixel-component": "MpTableCell",
+        "data-table-cell-fixed": isFixed ? true : void 0
+      }, _isSlot(children) ? children : {
+        default: () => [children]
+      });
+    };
+  }
+});
+var MpTableContainer = defineComponent({
+  name: "MpTableContainer",
+  props: tableContainerProps,
+  emits: ["scroll"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const classes = tableContainerRecipe();
+    const showLeftShadow = ref(false);
+    const showRightShadow = ref(false);
+    const tableContainer = ref(null);
+    onMounted(() => {
+      if (props.hasShadow) {
+        handleShadow(tableContainer.value);
+      }
+    });
+    const setShadowStyle = /* @__PURE__ */ __name((clientWidth, scrollWidth, scrollLeft) => {
+      const isScrollRightEnd = Math.round(scrollLeft) >= scrollWidth - clientWidth;
+      const isScrollLeftEnd = scrollLeft === 0;
+      const isScrollBoth = !isScrollLeftEnd && !isScrollRightEnd;
+      if (isScrollLeftEnd) {
+        showRightShadow.value = true;
+        showLeftShadow.value = false;
+      }
+      if (isScrollBoth) {
+        showRightShadow.value = true;
+        showLeftShadow.value = true;
+      }
+      if (isScrollRightEnd) {
+        showRightShadow.value = false;
+        showLeftShadow.value = true;
+      }
+    }, "setShadowStyle");
+    const handleShadow = /* @__PURE__ */ __name((el) => {
+      const element = el;
+      if (element) {
+        const {
+          clientWidth,
+          scrollWidth,
+          scrollLeft
+        } = element;
+        const isHorizontalScroll = clientWidth < scrollWidth;
+        if (isHorizontalScroll) {
+          setShadowStyle(clientWidth, scrollWidth, scrollLeft);
+        } else {
+          showRightShadow.value = false;
+          showLeftShadow.value = false;
+        }
+      }
+    }, "handleShadow");
+    const onScroll = /* @__PURE__ */ __name((e) => {
+      if (props.hasShadow) {
+        handleShadow(e.target);
+        emit("scroll", e);
+      }
+    }, "onScroll");
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        hasShadow
+      } = props;
+      return _createVNode("div", {
+        "class": classes,
+        "data-pixel-component": "MpTableContainer",
+        "data-table-has-left-shadow": showLeftShadow.value ? true : void 0,
+        "data-table-has-right-shadow": showRightShadow.value ? true : void 0
+      }, [_createVNode("div", {
+        "ref": tableContainer,
+        "onScroll": onScroll,
+        "style": {
+          overflowX: hasShadow ? "scroll" : void 0
+        }
+      }, [children])]);
+    };
+  }
+});
+
+export {
+  MpTable,
+  MpTableHead,
+  MpTableBody,
+  MpTableRow,
+  MpTableCell,
+  MpTableContainer
+};

package/dist/index.d.mts

@@ -0,0 +1,2 @@
+export { MpTable, MpTableBody, MpTableCell, MpTableContainer, MpTableHead, MpTableRow } from './table.mjs';
+import 'vue';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { MpTable, MpTableBody, MpTableCell, MpTableContainer, MpTableHead, MpTableRow } from './table.js';
+import 'vue';

package/dist/index.js

@@ -0,0 +1,240 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  MpTable: () => MpTable,
+  MpTableBody: () => MpTableBody,
+  MpTableCell: () => MpTableCell,
+  MpTableContainer: () => MpTableContainer,
+  MpTableHead: () => MpTableHead,
+  MpTableRow: () => MpTableRow
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/table.tsx
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+
+// src/modules/table.props.ts
+var tableProps = {
+  isHoverable: {
+    type: Boolean,
+    default: true
+  }
+};
+var tableHeadProps = {
+  isFixed: {
+    type: Boolean
+  }
+};
+var tableCellProps = {
+  as: {
+    type: String,
+    default: "th"
+  },
+  isFixed: {
+    type: Boolean
+  }
+};
+var tableContainerProps = {
+  hasShadow: {
+    type: Boolean
+  }
+};
+
+// src/table.tsx
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue.isVNode)(s);
+}
+__name(_isSlot, "_isSlot");
+var MpTable = (0, import_vue2.defineComponent)({
+  name: "MpTable",
+  props: tableProps,
+  setup(props, {
+    slots
+  }) {
+    const classes = (0, import_recipes.tableRecipe)();
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        isHoverable
+      } = props;
+      return (0, import_vue.createVNode)("table", {
+        "class": classes,
+        "data-pixel-component": "MpTable",
+        "data-table-hoverable": isHoverable ? true : void 0
+      }, [children]);
+    };
+  }
+});
+var MpTableHead = (0, import_vue2.defineComponent)({
+  name: "MpTableHead",
+  props: tableHeadProps,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        isFixed
+      } = props;
+      return (0, import_vue.createVNode)("thead", {
+        "data-pixel-component": "MpTableHead",
+        "data-table-head-fixed": isFixed ? true : void 0
+      }, [children]);
+    };
+  }
+});
+var MpTableBody = (0, import_vue2.defineComponent)({
+  name: "MpTableBody",
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const children = slots.default && slots.default();
+      return (0, import_vue.createVNode)("tbody", {
+        "data-pixel-component": "MpTableBody"
+      }, [children]);
+    };
+  }
+});
+var MpTableRow = (0, import_vue2.defineComponent)({
+  name: "MpTableRow",
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const children = slots.default && slots.default();
+      return (0, import_vue.createVNode)("tr", {
+        "data-pixel-component": "MpTableRow"
+      }, [children]);
+    };
+  }
+});
+var MpTableCell = (0, import_vue2.defineComponent)({
+  name: "MpTableCell",
+  props: tableCellProps,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        as: Component,
+        isFixed
+      } = props;
+      return (0, import_vue.createVNode)(Component, {
+        "data-pixel-component": "MpTableCell",
+        "data-table-cell-fixed": isFixed ? true : void 0
+      }, _isSlot(children) ? children : {
+        default: () => [children]
+      });
+    };
+  }
+});
+var MpTableContainer = (0, import_vue2.defineComponent)({
+  name: "MpTableContainer",
+  props: tableContainerProps,
+  emits: ["scroll"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const classes = (0, import_recipes.tableContainerRecipe)();
+    const showLeftShadow = (0, import_vue2.ref)(false);
+    const showRightShadow = (0, import_vue2.ref)(false);
+    const tableContainer = (0, import_vue2.ref)(null);
+    (0, import_vue2.onMounted)(() => {
+      if (props.hasShadow) {
+        handleShadow(tableContainer.value);
+      }
+    });
+    const setShadowStyle = /* @__PURE__ */ __name((clientWidth, scrollWidth, scrollLeft) => {
+      const isScrollRightEnd = Math.round(scrollLeft) >= scrollWidth - clientWidth;
+      const isScrollLeftEnd = scrollLeft === 0;
+      const isScrollBoth = !isScrollLeftEnd && !isScrollRightEnd;
+      if (isScrollLeftEnd) {
+        showRightShadow.value = true;
+        showLeftShadow.value = false;
+      }
+      if (isScrollBoth) {
+        showRightShadow.value = true;
+        showLeftShadow.value = true;
+      }
+      if (isScrollRightEnd) {
+        showRightShadow.value = false;
+        showLeftShadow.value = true;
+      }
+    }, "setShadowStyle");
+    const handleShadow = /* @__PURE__ */ __name((el) => {
+      const element = el;
+      if (element) {
+        const {
+          clientWidth,
+          scrollWidth,
+          scrollLeft
+        } = element;
+        const isHorizontalScroll = clientWidth < scrollWidth;
+        if (isHorizontalScroll) {
+          setShadowStyle(clientWidth, scrollWidth, scrollLeft);
+        } else {
+          showRightShadow.value = false;
+          showLeftShadow.value = false;
+        }
+      }
+    }, "handleShadow");
+    const onScroll = /* @__PURE__ */ __name((e) => {
+      if (props.hasShadow) {
+        handleShadow(e.target);
+        emit("scroll", e);
+      }
+    }, "onScroll");
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        hasShadow
+      } = props;
+      return (0, import_vue.createVNode)("div", {
+        "class": classes,
+        "data-pixel-component": "MpTableContainer",
+        "data-table-has-left-shadow": showLeftShadow.value ? true : void 0,
+        "data-table-has-right-shadow": showRightShadow.value ? true : void 0
+      }, [(0, import_vue.createVNode)("div", {
+        "ref": tableContainer,
+        "onScroll": onScroll,
+        "style": {
+          overflowX: hasShadow ? "scroll" : void 0
+        }
+      }, [children])]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpTable,
+  MpTableBody,
+  MpTableCell,
+  MpTableContainer,
+  MpTableHead,
+  MpTableRow
+});

package/dist/index.mjs

@@ -0,0 +1,17 @@
+import {
+  MpTable,
+  MpTableBody,
+  MpTableCell,
+  MpTableContainer,
+  MpTableHead,
+  MpTableRow
+} from "./chunk-WI56UCYK.mjs";
+import "./chunk-3GSGQUM7.mjs";
+export {
+  MpTable,
+  MpTableBody,
+  MpTableCell,
+  MpTableContainer,
+  MpTableHead,
+  MpTableRow
+};

package/dist/metafile-cjs.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/table.props.ts":{"bytes":567,"imports":[],"format":"esm"},"src/table.tsx":{"bytes":5014,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/table.props.ts","kind":"import-statement","original":"./modules/table.props"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.tsx":{"bytes":188,"imports":[{"path":"src/table.tsx","kind":"import-statement","original":"./table"}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.tsx","inputs":{"src/index.tsx":{"bytesInOutput":297},"src/table.tsx":{"bytesInOutput":4969},"src/modules/table.props.ts":{"bytesInOutput":319}},"bytes":6739},"dist/table.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/table.tsx","inputs":{"src/table.tsx":{"bytesInOutput":5272},"src/modules/table.props.ts":{"bytesInOutput":319}},"bytes":6727},"dist/modules/table.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/table.props.ts","inputs":{"src/modules/table.props.ts":{"bytesInOutput":598}},"bytes":1591}}}

package/dist/metafile-esm.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/table.props.ts":{"bytes":567,"imports":[],"format":"esm"},"src/table.tsx":{"bytes":5014,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/table.props.ts","kind":"import-statement","original":"./modules/table.props"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.tsx":{"bytes":188,"imports":[{"path":"src/table.tsx","kind":"import-statement","original":"./table"}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-WI56UCYK.mjs","kind":"import-statement"},{"path":"dist/chunk-3GSGQUM7.mjs","kind":"import-statement"}],"exports":["MpTable","MpTableBody","MpTableCell","MpTableContainer","MpTableHead","MpTableRow"],"entryPoint":"src/index.tsx","inputs":{"src/index.tsx":{"bytesInOutput":0}},"bytes":261},"dist/table.mjs":{"imports":[{"path":"dist/chunk-WI56UCYK.mjs","kind":"import-statement"},{"path":"dist/chunk-3GSGQUM7.mjs","kind":"import-statement"}],"exports":["MpTable","MpTableBody","MpTableCell","MpTableContainer","MpTableHead","MpTableRow"],"entryPoint":"src/table.tsx","inputs":{},"bytes":261},"dist/chunk-WI56UCYK.mjs":{"imports":[{"path":"dist/chunk-3GSGQUM7.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["MpTable","MpTableBody","MpTableCell","MpTableContainer","MpTableHead","MpTableRow"],"inputs":{"src/table.tsx":{"bytesInOutput":4719}},"bytes":4961},"dist/modules/table.props.mjs":{"imports":[{"path":"dist/chunk-3GSGQUM7.mjs","kind":"import-statement"}],"exports":["tableCellProps","tableContainerProps","tableHeadProps","tableProps"],"entryPoint":"src/modules/table.props.ts","inputs":{},"bytes":197},"dist/chunk-3GSGQUM7.mjs":{"imports":[],"exports":["__name","tableCellProps","tableContainerProps","tableHeadProps","tableProps"],"inputs":{"src/modules/table.props.ts":{"bytesInOutput":319}},"bytes":574}}}

package/dist/modules/table.props.d.mts

@@ -0,0 +1,29 @@
+import { PropType } from 'vue';
+
+declare const tableProps: {
+    isHoverable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+declare const tableHeadProps: {
+    isFixed: {
+        type: BooleanConstructor;
+    };
+};
+declare const tableCellProps: {
+    as: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    isFixed: {
+        type: BooleanConstructor;
+    };
+};
+declare const tableContainerProps: {
+    hasShadow: {
+        type: BooleanConstructor;
+    };
+};
+
+export { tableCellProps, tableContainerProps, tableHeadProps, tableProps };

package/dist/modules/table.props.d.ts

@@ -0,0 +1,29 @@
+import { PropType } from 'vue';
+
+declare const tableProps: {
+    isHoverable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+declare const tableHeadProps: {
+    isFixed: {
+        type: BooleanConstructor;
+    };
+};
+declare const tableCellProps: {
+    as: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    isFixed: {
+        type: BooleanConstructor;
+    };
+};
+declare const tableContainerProps: {
+    hasShadow: {
+        type: BooleanConstructor;
+    };
+};
+
+export { tableCellProps, tableContainerProps, tableHeadProps, tableProps };

package/dist/modules/table.props.js

@@ -0,0 +1,60 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/table.props.ts
+var table_props_exports = {};
+__export(table_props_exports, {
+  tableCellProps: () => tableCellProps,
+  tableContainerProps: () => tableContainerProps,
+  tableHeadProps: () => tableHeadProps,
+  tableProps: () => tableProps
+});
+module.exports = __toCommonJS(table_props_exports);
+var tableProps = {
+  isHoverable: {
+    type: Boolean,
+    default: true
+  }
+};
+var tableHeadProps = {
+  isFixed: {
+    type: Boolean
+  }
+};
+var tableCellProps = {
+  as: {
+    type: String,
+    default: "th"
+  },
+  isFixed: {
+    type: Boolean
+  }
+};
+var tableContainerProps = {
+  hasShadow: {
+    type: Boolean
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  tableCellProps,
+  tableContainerProps,
+  tableHeadProps,
+  tableProps
+});

package/dist/modules/table.props.mjs

@@ -0,0 +1,12 @@
+import {
+  tableCellProps,
+  tableContainerProps,
+  tableHeadProps,
+  tableProps
+} from "../chunk-3GSGQUM7.mjs";
+export {
+  tableCellProps,
+  tableContainerProps,
+  tableHeadProps,
+  tableProps
+};

package/dist/table.d.mts

@@ -0,0 +1,63 @@
+import * as vue from 'vue';
+
+declare const MpTable: vue.DefineComponent<{
+    isHoverable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    isHoverable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    isHoverable: boolean;
+}, {}>;
+declare const MpTableHead: vue.DefineComponent<{
+    isFixed: {
+        type: BooleanConstructor;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    isFixed: {
+        type: BooleanConstructor;
+    };
+}>>, {
+    isFixed: boolean;
+}, {}>;
+declare const MpTableBody: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const MpTableRow: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const MpTableCell: vue.DefineComponent<{
+    as: {
+        type: vue.PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    isFixed: {
+        type: BooleanConstructor;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: vue.PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    isFixed: {
+        type: BooleanConstructor;
+    };
+}>>, {
+    isFixed: boolean;
+    as: keyof HTMLElementTagNameMap;
+}, {}>;
+declare const MpTableContainer: vue.DefineComponent<{
+    hasShadow: {
+        type: BooleanConstructor;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "scroll"[], "scroll", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    hasShadow: {
+        type: BooleanConstructor;
+    };
+}>> & {
+    onScroll?: ((...args: any[]) => any) | undefined;
+}, {
+    hasShadow: boolean;
+}, {}>;
+
+export { MpTable, MpTableBody, MpTableCell, MpTableContainer, MpTableHead, MpTableRow };

package/dist/table.d.ts

@@ -0,0 +1,63 @@
+import * as vue from 'vue';
+
+declare const MpTable: vue.DefineComponent<{
+    isHoverable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    isHoverable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    isHoverable: boolean;
+}, {}>;
+declare const MpTableHead: vue.DefineComponent<{
+    isFixed: {
+        type: BooleanConstructor;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    isFixed: {
+        type: BooleanConstructor;
+    };
+}>>, {
+    isFixed: boolean;
+}, {}>;
+declare const MpTableBody: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const MpTableRow: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const MpTableCell: vue.DefineComponent<{
+    as: {
+        type: vue.PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    isFixed: {
+        type: BooleanConstructor;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: vue.PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    isFixed: {
+        type: BooleanConstructor;
+    };
+}>>, {
+    isFixed: boolean;
+    as: keyof HTMLElementTagNameMap;
+}, {}>;
+declare const MpTableContainer: vue.DefineComponent<{
+    hasShadow: {
+        type: BooleanConstructor;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "scroll"[], "scroll", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    hasShadow: {
+        type: BooleanConstructor;
+    };
+}>> & {
+    onScroll?: ((...args: any[]) => any) | undefined;
+}, {
+    hasShadow: boolean;
+}, {}>;
+
+export { MpTable, MpTableBody, MpTableCell, MpTableContainer, MpTableHead, MpTableRow };

package/dist/table.js

@@ -0,0 +1,238 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/table.tsx
+var table_exports = {};
+__export(table_exports, {
+  MpTable: () => MpTable,
+  MpTableBody: () => MpTableBody,
+  MpTableCell: () => MpTableCell,
+  MpTableContainer: () => MpTableContainer,
+  MpTableHead: () => MpTableHead,
+  MpTableRow: () => MpTableRow
+});
+module.exports = __toCommonJS(table_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+
+// src/modules/table.props.ts
+var tableProps = {
+  isHoverable: {
+    type: Boolean,
+    default: true
+  }
+};
+var tableHeadProps = {
+  isFixed: {
+    type: Boolean
+  }
+};
+var tableCellProps = {
+  as: {
+    type: String,
+    default: "th"
+  },
+  isFixed: {
+    type: Boolean
+  }
+};
+var tableContainerProps = {
+  hasShadow: {
+    type: Boolean
+  }
+};
+
+// src/table.tsx
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue.isVNode)(s);
+}
+__name(_isSlot, "_isSlot");
+var MpTable = (0, import_vue2.defineComponent)({
+  name: "MpTable",
+  props: tableProps,
+  setup(props, {
+    slots
+  }) {
+    const classes = (0, import_recipes.tableRecipe)();
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        isHoverable
+      } = props;
+      return (0, import_vue.createVNode)("table", {
+        "class": classes,
+        "data-pixel-component": "MpTable",
+        "data-table-hoverable": isHoverable ? true : void 0
+      }, [children]);
+    };
+  }
+});
+var MpTableHead = (0, import_vue2.defineComponent)({
+  name: "MpTableHead",
+  props: tableHeadProps,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        isFixed
+      } = props;
+      return (0, import_vue.createVNode)("thead", {
+        "data-pixel-component": "MpTableHead",
+        "data-table-head-fixed": isFixed ? true : void 0
+      }, [children]);
+    };
+  }
+});
+var MpTableBody = (0, import_vue2.defineComponent)({
+  name: "MpTableBody",
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const children = slots.default && slots.default();
+      return (0, import_vue.createVNode)("tbody", {
+        "data-pixel-component": "MpTableBody"
+      }, [children]);
+    };
+  }
+});
+var MpTableRow = (0, import_vue2.defineComponent)({
+  name: "MpTableRow",
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const children = slots.default && slots.default();
+      return (0, import_vue.createVNode)("tr", {
+        "data-pixel-component": "MpTableRow"
+      }, [children]);
+    };
+  }
+});
+var MpTableCell = (0, import_vue2.defineComponent)({
+  name: "MpTableCell",
+  props: tableCellProps,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        as: Component,
+        isFixed
+      } = props;
+      return (0, import_vue.createVNode)(Component, {
+        "data-pixel-component": "MpTableCell",
+        "data-table-cell-fixed": isFixed ? true : void 0
+      }, _isSlot(children) ? children : {
+        default: () => [children]
+      });
+    };
+  }
+});
+var MpTableContainer = (0, import_vue2.defineComponent)({
+  name: "MpTableContainer",
+  props: tableContainerProps,
+  emits: ["scroll"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const classes = (0, import_recipes.tableContainerRecipe)();
+    const showLeftShadow = (0, import_vue2.ref)(false);
+    const showRightShadow = (0, import_vue2.ref)(false);
+    const tableContainer = (0, import_vue2.ref)(null);
+    (0, import_vue2.onMounted)(() => {
+      if (props.hasShadow) {
+        handleShadow(tableContainer.value);
+      }
+    });
+    const setShadowStyle = /* @__PURE__ */ __name((clientWidth, scrollWidth, scrollLeft) => {
+      const isScrollRightEnd = Math.round(scrollLeft) >= scrollWidth - clientWidth;
+      const isScrollLeftEnd = scrollLeft === 0;
+      const isScrollBoth = !isScrollLeftEnd && !isScrollRightEnd;
+      if (isScrollLeftEnd) {
+        showRightShadow.value = true;
+        showLeftShadow.value = false;
+      }
+      if (isScrollBoth) {
+        showRightShadow.value = true;
+        showLeftShadow.value = true;
+      }
+      if (isScrollRightEnd) {
+        showRightShadow.value = false;
+        showLeftShadow.value = true;
+      }
+    }, "setShadowStyle");
+    const handleShadow = /* @__PURE__ */ __name((el) => {
+      const element = el;
+      if (element) {
+        const {
+          clientWidth,
+          scrollWidth,
+          scrollLeft
+        } = element;
+        const isHorizontalScroll = clientWidth < scrollWidth;
+        if (isHorizontalScroll) {
+          setShadowStyle(clientWidth, scrollWidth, scrollLeft);
+        } else {
+          showRightShadow.value = false;
+          showLeftShadow.value = false;
+        }
+      }
+    }, "handleShadow");
+    const onScroll = /* @__PURE__ */ __name((e) => {
+      if (props.hasShadow) {
+        handleShadow(e.target);
+        emit("scroll", e);
+      }
+    }, "onScroll");
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        hasShadow
+      } = props;
+      return (0, import_vue.createVNode)("div", {
+        "class": classes,
+        "data-pixel-component": "MpTableContainer",
+        "data-table-has-left-shadow": showLeftShadow.value ? true : void 0,
+        "data-table-has-right-shadow": showRightShadow.value ? true : void 0
+      }, [(0, import_vue.createVNode)("div", {
+        "ref": tableContainer,
+        "onScroll": onScroll,
+        "style": {
+          overflowX: hasShadow ? "scroll" : void 0
+        }
+      }, [children])]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpTable,
+  MpTableBody,
+  MpTableCell,
+  MpTableContainer,
+  MpTableHead,
+  MpTableRow
+});

package/dist/table.mjs

@@ -0,0 +1,17 @@
+import {
+  MpTable,
+  MpTableBody,
+  MpTableCell,
+  MpTableContainer,
+  MpTableHead,
+  MpTableRow
+} from "./chunk-WI56UCYK.mjs";
+import "./chunk-3GSGQUM7.mjs";
+export {
+  MpTable,
+  MpTableBody,
+  MpTableCell,
+  MpTableContainer,
+  MpTableHead,
+  MpTableRow
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@mekari/pixel3-table",
+  "description": "Table component for mekari pixel 3",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@mekari/pixel3-styled-system": "0.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.7"
+  },
+  "devDependencies": {
+    "vue": "^3.3.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:fast": "tsup",
+    "build:types": "tsup src --dts-only",
+    "build:external": "tsup src/index.tsx --external",
+    "types:check": "tsc --noEmit",
+    "replace-config": "clean-package",
+    "restore-config": "clean-package restore"
+  }
+}