@mekari/pixel3-tabs 0.0.0

package/dist/index.js

@@ -0,0 +1,379 @@
+"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, {
+  MpTab: () => MpTab,
+  MpTabList: () => MpTabList,
+  MpTabPanel: () => MpTabPanel,
+  MpTabPanels: () => MpTabPanels,
+  MpTabs: () => MpTabs
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/tabs.tsx
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+var import_vue4 = require("vue");
+
+// src/modules/tabs.props.ts
+var tabsProps = {
+  modelValue: {
+    type: Number
+  },
+  defaultValue: {
+    type: Number,
+    default: 0
+  },
+  id: {
+    type: String
+  },
+  isManual: {
+    type: Boolean
+  },
+  variantColor: {
+    type: String,
+    default: "blue"
+  },
+  isShowBorder: {
+    type: Boolean,
+    default: true
+  }
+};
+var tabProps = {
+  id: {
+    type: String
+  },
+  isSelected: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: String
+  }
+};
+var selectedBorderProps = {
+  isSelected: {
+    type: Boolean,
+    default: false
+  }
+};
+var tabPanelProps = {
+  isSelected: {
+    type: Boolean
+  },
+  value: {
+    type: String
+  },
+  isKeepAlive: {
+    type: Boolean,
+    default: true
+  }
+};
+
+// src/modules/tabs.hooks.ts
+var import_vue = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+
+// src/modules/tabs.context.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [TabsProvider, useTabsContext] = (0, import_pixel3_utils.usePixelCreateContext)("TabsContext");
+
+// src/modules/tabs.hooks.ts
+function useTabs(props, emit) {
+  const selectedTab = (0, import_vue.ref)(props.defaultValue);
+  const selected = props.isManual ? (0, import_vue.computed)(() => props.modelValue) : selectedTab;
+  const id = (0, import_vue.computed)(() => props.id || `tabs-${(0, import_pixel3_utils2.useId)(4)}`);
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpTabs",
+      id: id.value
+    };
+  });
+  function onChangeTab(value) {
+    if (!props.isManual) {
+      selectedTab.value = value;
+    }
+    emit("change", value);
+    emit("update:modelValue", value);
+  }
+  __name(onChangeTab, "onChangeTab");
+  return {
+    selectedTab: selected,
+    onChangeTab,
+    rootAttrs,
+    id
+  };
+}
+__name(useTabs, "useTabs");
+function useTabList() {
+  const {
+    rootProps,
+    onChangeTab,
+    selectedTab,
+    id
+  } = useTabsContext();
+  const {
+    isShowBorder
+  } = rootProps;
+  const rootAttrs = (0, import_vue.reactive)({
+    "data-border": isShowBorder.value,
+    class: (0, import_css.css)({
+      position: "relative",
+      "&[data-border=true]": {
+        _before: {
+          content: '""',
+          height: "1px",
+          background: "gray.100",
+          position: "absolute",
+          right: 0,
+          left: 0,
+          bottom: "1px"
+        }
+      }
+    })
+  });
+  const tabListAttrs = (0, import_vue.reactive)({
+    "data-pixel-component": "MpTabList",
+    class: (0, import_recipes.tabListRecipe)()
+  });
+  return {
+    tabsProps: rootProps,
+    onChangeTab,
+    selectedTab,
+    rootAttrs,
+    tabListAttrs,
+    tabsId: id
+  };
+}
+__name(useTabList, "useTabList");
+function useTab(props, attrs) {
+  const {
+    rootProps,
+    id: tabsId
+  } = useTabsContext();
+  const {
+    variantColor
+  } = rootProps;
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      role: "tab",
+      "data-pixel-component": "MpTab",
+      class: ["group", (0, import_recipes.tabRecipe)({
+        isSelected: props.isSelected,
+        variantColor: (0, import_vue.unref)(variantColor)
+      })],
+      id: props.id || `tab:${tabsId.value}-${attrs.index}`
+    };
+  });
+  const tabSelectedBorderAttrs = (0, import_vue.computed)(() => {
+    return {
+      isSelected: props.isSelected
+    };
+  });
+  return {
+    rootAttrs,
+    tabSelectedBorderAttrs
+  };
+}
+__name(useTab, "useTab");
+function useTabPanels() {
+  const {
+    selectedTab
+  } = useTabsContext();
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpTabPanels"
+    };
+  });
+  return {
+    rootAttrs,
+    selectedTab
+  };
+}
+__name(useTabPanels, "useTabPanels");
+function useTabPanel(props) {
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpTabPanel",
+      style: {
+        display: props.isKeepAlive ? props.isSelected ? "unset" : "none" : ""
+      }
+    };
+  });
+  return {
+    rootAttrs
+  };
+}
+__name(useTabPanel, "useTabPanel");
+
+// src/tabs.tsx
+var MpTabs = (0, import_vue3.defineComponent)({
+  name: "MpTabs",
+  props: tabsProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      rootAttrs,
+      selectedTab,
+      onChangeTab,
+      id
+    } = useTabs(props, emit);
+    TabsProvider({
+      selectedTab,
+      onChangeTab,
+      rootProps: (0, import_vue4.toRefs)(props),
+      id
+    });
+    return () => {
+      return (0, import_vue2.createVNode)("div", rootAttrs.value, [slots.default()]);
+    };
+  }
+});
+
+// src/tab-list.tsx
+var import_vue5 = require("vue");
+var import_vue6 = require("vue");
+var MpTabList = (0, import_vue6.defineComponent)({
+  name: "MpTabList",
+  setup(props, {
+    slots
+  }) {
+    const {
+      rootAttrs,
+      tabListAttrs,
+      onChangeTab,
+      selectedTab
+    } = useTabList();
+    return () => {
+      const clones = slots.default().map((vnode, index) => {
+        const clone = (0, import_vue6.cloneVNode)(vnode, {
+          isSelected: selectedTab.value === index,
+          index,
+          "aria-selected": selectedTab.value === index,
+          onClick: () => {
+            onChangeTab(index);
+          }
+        });
+        return clone;
+      });
+      return (0, import_vue5.createVNode)("div", rootAttrs, [(0, import_vue5.createVNode)("div", tabListAttrs, [clones])]);
+    };
+  }
+});
+
+// src/tab.tsx
+var import_vue7 = require("vue");
+var import_vue8 = require("vue");
+var import_recipes2 = require("@mekari/pixel3-styled-system/recipes");
+var MpTab = (0, import_vue8.defineComponent)({
+  name: "MpTab",
+  props: tabProps,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const {
+      rootAttrs,
+      tabSelectedBorderAttrs
+    } = useTab(props, attrs);
+    return () => {
+      return (0, import_vue7.createVNode)("button", rootAttrs.value, [slots.default(), (0, import_vue7.createVNode)(MpTabSelectedBorder, tabSelectedBorderAttrs.value, null)]);
+    };
+  }
+});
+var MpTabSelectedBorder = (0, import_vue8.defineComponent)({
+  name: "MpTabSelectedBorder",
+  props: selectedBorderProps,
+  setup(props) {
+    const {
+      rootProps
+    } = useTabsContext();
+    const {
+      variantColor
+    } = rootProps;
+    return () => {
+      return (0, import_vue7.createVNode)("div", {
+        "class": (0, import_recipes2.selectedBorderRecipe)({
+          isSelected: props.isSelected,
+          variantColor: (0, import_vue8.unref)(variantColor)
+        }),
+        "data-pixel-component": "MpTabSelectedBorder"
+      }, null);
+    };
+  }
+});
+
+// src/tab-panels.tsx
+var import_vue9 = require("vue");
+var import_vue10 = require("vue");
+var MpTabPanels = (0, import_vue10.defineComponent)({
+  name: "MpTabPanels",
+  setup(props, {
+    slots
+  }) {
+    const {
+      rootAttrs,
+      selectedTab
+    } = useTabPanels();
+    return () => {
+      const clones = slots.default().map((vnode, index) => {
+        const clone = (0, import_vue10.cloneVNode)(vnode, {
+          isSelected: selectedTab.value === index
+        });
+        return clone;
+      });
+      return (0, import_vue9.createVNode)("div", rootAttrs.value, [clones]);
+    };
+  }
+});
+
+// src/tab-panel.tsx
+var import_vue11 = require("vue");
+var import_vue12 = require("vue");
+var MpTabPanel = (0, import_vue12.defineComponent)({
+  name: "MpTabPanel",
+  props: tabPanelProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      rootAttrs
+    } = useTabPanel(props);
+    return () => {
+      const renderNode = (0, import_vue11.createVNode)("div", rootAttrs.value, [(0, import_vue11.createTextVNode)(" "), slots.default(), (0, import_vue11.createTextVNode)(" ")]);
+      return props.isKeepAlive ? renderNode : props.isSelected ? renderNode : null;
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpTab,
+  MpTabList,
+  MpTabPanel,
+  MpTabPanels,
+  MpTabs
+});

package/dist/index.mjs

@@ -0,0 +1,26 @@
+import {
+  MpTabList
+} from "./chunk-JEXLKDPT.mjs";
+import {
+  MpTabPanel
+} from "./chunk-BCRB3ASV.mjs";
+import {
+  MpTabPanels
+} from "./chunk-JQQ5YTMJ.mjs";
+import {
+  MpTab
+} from "./chunk-LAMJMXQC.mjs";
+import {
+  MpTabs
+} from "./chunk-5R2IYROF.mjs";
+import "./chunk-DKZ3Z2UI.mjs";
+import "./chunk-QVDBBOCQ.mjs";
+import "./chunk-S5AGDSR2.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpTab,
+  MpTabList,
+  MpTabPanel,
+  MpTabPanels,
+  MpTabs
+};

package/dist/metafile-cjs.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/tabs.props.ts":{"bytes":1609,"imports":[],"format":"esm"},"src/modules/tabs.context.ts":{"bytes":559,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"},"src/modules/tabs.hooks.ts":{"bytes":3111,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"src/modules/tabs.context.ts","kind":"import-statement","original":"./tabs.context"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/tabs.tsx":{"bytes":838,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/tabs.props.ts","kind":"import-statement","original":"./modules/tabs.props"},{"path":"src/modules/tabs.hooks.ts","kind":"import-statement","original":"./modules/tabs.hooks"},{"path":"src/modules/tabs.context.ts","kind":"import-statement","original":"./modules/tabs.context"}],"format":"esm"},"src/tab-list.tsx":{"bytes":919,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/tabs.hooks.ts","kind":"import-statement","original":"./modules/tabs.hooks"}],"format":"esm"},"src/tab.tsx":{"bytes":1322,"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/tabs.props.ts","kind":"import-statement","original":"./modules/tabs.props"},{"path":"src/modules/tabs.hooks.ts","kind":"import-statement","original":"./modules/tabs.hooks"},{"path":"src/modules/tabs.context.ts","kind":"import-statement","original":"./modules/tabs.context"}],"format":"esm"},"src/tab-panels.tsx":{"bytes":705,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/tabs.hooks.ts","kind":"import-statement","original":"./modules/tabs.hooks"}],"format":"esm"},"src/tab-panel.tsx":{"bytes":744,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/tabs.hooks.ts","kind":"import-statement","original":"./modules/tabs.hooks"},{"path":"src/modules/tabs.props.ts","kind":"import-statement","original":"./modules/tabs.props"}],"format":"esm"},"src/index.tsx":{"bytes":218,"imports":[{"path":"src/tabs.tsx","kind":"import-statement","original":"./tabs"},{"path":"src/tab-list.tsx","kind":"import-statement","original":"./tab-list"},{"path":"src/tab.tsx","kind":"import-statement","original":"./tab"},{"path":"src/tab-panels.tsx","kind":"import-statement","original":"./tab-panels"},{"path":"src/tab-panel.tsx","kind":"import-statement","original":"./tab-panel"}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"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},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.tsx","inputs":{"src/index.tsx":{"bytesInOutput":235},"src/tabs.tsx":{"bytesInOutput":623},"src/modules/tabs.props.ts":{"bytesInOutput":687},"src/modules/tabs.hooks.ts":{"bytesInOutput":3166},"src/modules/tabs.context.ts":{"bytesInOutput":159},"src/tab-list.tsx":{"bytesInOutput":799},"src/tab.tsx":{"bytesInOutput":1137},"src/tab-panels.tsx":{"bytesInOutput":577},"src/tab-panel.tsx":{"bytesInOutput":556}},"bytes":9235},"dist/tab-list.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/tab-list.tsx","inputs":{"src/tab-list.tsx":{"bytesInOutput":937},"src/modules/tabs.hooks.ts":{"bytesInOutput":1094},"src/modules/tabs.context.ts":{"bytesInOutput":159}},"bytes":3316},"dist/tab-panel.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/tab-panel.tsx","inputs":{"src/tab-panel.tsx":{"bytesInOutput":693},"src/modules/tabs.hooks.ts":{"bytesInOutput":547},"src/modules/tabs.context.ts":{"bytesInOutput":159},"src/modules/tabs.props.ts":{"bytesInOutput":155}},"bytes":2713},"dist/tab-panels.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/tab-panels.tsx","inputs":{"src/tab-panels.tsx":{"bytesInOutput":722},"src/modules/tabs.hooks.ts":{"bytesInOutput":511},"src/modules/tabs.context.ts":{"bytesInOutput":159}},"bytes":2524},"dist/tab.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},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/tab.tsx","inputs":{"src/tab.tsx":{"bytesInOutput":1252},"src/modules/tabs.props.ts":{"bytesInOutput":230},"src/modules/tabs.hooks.ts":{"bytesInOutput":936},"src/modules/tabs.context.ts":{"bytesInOutput":159}},"bytes":3719},"dist/tabs.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/tabs.tsx","inputs":{"src/tabs.tsx":{"bytesInOutput":743},"src/modules/tabs.props.ts":{"bytesInOutput":302},"src/modules/tabs.hooks.ts":{"bytesInOutput":978},"src/modules/tabs.context.ts":{"bytesInOutput":159}},"bytes":3327},"dist/modules/tabs.context.js":{"imports":[{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/tabs.context.ts","inputs":{"src/modules/tabs.context.ts":{"bytesInOutput":355}},"bytes":1310},"dist/modules/tabs.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/tabs.hooks.ts","inputs":{"src/modules/tabs.hooks.ts":{"bytesInOutput":3432},"src/modules/tabs.context.ts":{"bytesInOutput":159}},"bytes":4728},"dist/modules/tabs.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/tabs.props.ts","inputs":{"src/modules/tabs.props.ts":{"bytesInOutput":947}},"bytes":1931}}}

package/dist/metafile-esm.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/tabs.props.ts":{"bytes":1609,"imports":[],"format":"esm"},"src/modules/tabs.context.ts":{"bytes":559,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"},"src/modules/tabs.hooks.ts":{"bytes":3111,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"src/modules/tabs.context.ts","kind":"import-statement","original":"./tabs.context"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/tabs.tsx":{"bytes":838,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/tabs.props.ts","kind":"import-statement","original":"./modules/tabs.props"},{"path":"src/modules/tabs.hooks.ts","kind":"import-statement","original":"./modules/tabs.hooks"},{"path":"src/modules/tabs.context.ts","kind":"import-statement","original":"./modules/tabs.context"}],"format":"esm"},"src/tab-list.tsx":{"bytes":919,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/tabs.hooks.ts","kind":"import-statement","original":"./modules/tabs.hooks"}],"format":"esm"},"src/tab.tsx":{"bytes":1322,"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/tabs.props.ts","kind":"import-statement","original":"./modules/tabs.props"},{"path":"src/modules/tabs.hooks.ts","kind":"import-statement","original":"./modules/tabs.hooks"},{"path":"src/modules/tabs.context.ts","kind":"import-statement","original":"./modules/tabs.context"}],"format":"esm"},"src/tab-panels.tsx":{"bytes":705,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/tabs.hooks.ts","kind":"import-statement","original":"./modules/tabs.hooks"}],"format":"esm"},"src/tab-panel.tsx":{"bytes":744,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/tabs.hooks.ts","kind":"import-statement","original":"./modules/tabs.hooks"},{"path":"src/modules/tabs.props.ts","kind":"import-statement","original":"./modules/tabs.props"}],"format":"esm"},"src/index.tsx":{"bytes":218,"imports":[{"path":"src/tabs.tsx","kind":"import-statement","original":"./tabs"},{"path":"src/tab-list.tsx","kind":"import-statement","original":"./tab-list"},{"path":"src/tab.tsx","kind":"import-statement","original":"./tab"},{"path":"src/tab-panels.tsx","kind":"import-statement","original":"./tab-panels"},{"path":"src/tab-panel.tsx","kind":"import-statement","original":"./tab-panel"}],"format":"esm"}},"outputs":{"dist/modules/tabs.props.mjs":{"imports":[{"path":"dist/chunk-DKZ3Z2UI.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["selectedBorderProps","tabPanelProps","tabProps","tabsProps"],"entryPoint":"src/modules/tabs.props.ts","inputs":{},"bytes":213},"dist/index.mjs":{"imports":[{"path":"dist/chunk-JEXLKDPT.mjs","kind":"import-statement"},{"path":"dist/chunk-BCRB3ASV.mjs","kind":"import-statement"},{"path":"dist/chunk-JQQ5YTMJ.mjs","kind":"import-statement"},{"path":"dist/chunk-LAMJMXQC.mjs","kind":"import-statement"},{"path":"dist/chunk-5R2IYROF.mjs","kind":"import-statement"},{"path":"dist/chunk-DKZ3Z2UI.mjs","kind":"import-statement"},{"path":"dist/chunk-QVDBBOCQ.mjs","kind":"import-statement"},{"path":"dist/chunk-S5AGDSR2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpTab","MpTabList","MpTabPanel","MpTabPanels","MpTabs"],"entryPoint":"src/index.tsx","inputs":{"src/index.tsx":{"bytesInOutput":0}},"bytes":452},"dist/tab-list.mjs":{"imports":[{"path":"dist/chunk-JEXLKDPT.mjs","kind":"import-statement"},{"path":"dist/chunk-QVDBBOCQ.mjs","kind":"import-statement"},{"path":"dist/chunk-S5AGDSR2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpTabList"],"entryPoint":"src/tab-list.tsx","inputs":{},"bytes":169},"dist/chunk-JEXLKDPT.mjs":{"imports":[{"path":"dist/chunk-QVDBBOCQ.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true}],"exports":["MpTabList"],"inputs":{"src/tab-list.tsx":{"bytesInOutput":767}},"bytes":866},"dist/tab-panel.mjs":{"imports":[{"path":"dist/chunk-BCRB3ASV.mjs","kind":"import-statement"},{"path":"dist/chunk-DKZ3Z2UI.mjs","kind":"import-statement"},{"path":"dist/chunk-QVDBBOCQ.mjs","kind":"import-statement"},{"path":"dist/chunk-S5AGDSR2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpTabPanel"],"entryPoint":"src/tab-panel.tsx","inputs":{},"bytes":202},"dist/chunk-BCRB3ASV.mjs":{"imports":[{"path":"dist/chunk-DKZ3Z2UI.mjs","kind":"import-statement"},{"path":"dist/chunk-QVDBBOCQ.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true}],"exports":["MpTabPanel"],"inputs":{"src/tab-panel.tsx":{"bytesInOutput":544}},"bytes":702},"dist/tab-panels.mjs":{"imports":[{"path":"dist/chunk-JQQ5YTMJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QVDBBOCQ.mjs","kind":"import-statement"},{"path":"dist/chunk-S5AGDSR2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpTabPanels"],"entryPoint":"src/tab-panels.tsx","inputs":{},"bytes":173},"dist/chunk-JQQ5YTMJ.mjs":{"imports":[{"path":"dist/chunk-QVDBBOCQ.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true}],"exports":["MpTabPanels"],"inputs":{"src/tab-panels.tsx":{"bytesInOutput":558}},"bytes":663},"dist/tab.mjs":{"imports":[{"path":"dist/chunk-LAMJMXQC.mjs","kind":"import-statement"},{"path":"dist/chunk-DKZ3Z2UI.mjs","kind":"import-statement"},{"path":"dist/chunk-QVDBBOCQ.mjs","kind":"import-statement"},{"path":"dist/chunk-S5AGDSR2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpTab"],"entryPoint":"src/tab.tsx","inputs":{},"bytes":192},"dist/chunk-LAMJMXQC.mjs":{"imports":[{"path":"dist/chunk-DKZ3Z2UI.mjs","kind":"import-statement"},{"path":"dist/chunk-QVDBBOCQ.mjs","kind":"import-statement"},{"path":"dist/chunk-S5AGDSR2.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":["MpTab"],"inputs":{"src/tab.tsx":{"bytesInOutput":1052}},"bytes":1269},"dist/tabs.mjs":{"imports":[{"path":"dist/chunk-5R2IYROF.mjs","kind":"import-statement"},{"path":"dist/chunk-DKZ3Z2UI.mjs","kind":"import-statement"},{"path":"dist/chunk-QVDBBOCQ.mjs","kind":"import-statement"},{"path":"dist/chunk-S5AGDSR2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpTabs"],"entryPoint":"src/tabs.tsx","inputs":{},"bytes":194},"dist/chunk-5R2IYROF.mjs":{"imports":[{"path":"dist/chunk-DKZ3Z2UI.mjs","kind":"import-statement"},{"path":"dist/chunk-QVDBBOCQ.mjs","kind":"import-statement"},{"path":"dist/chunk-S5AGDSR2.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true}],"exports":["MpTabs"],"inputs":{"src/tabs.tsx":{"bytesInOutput":591}},"bytes":787},"dist/chunk-DKZ3Z2UI.mjs":{"imports":[],"exports":["selectedBorderProps","tabPanelProps","tabProps","tabsProps"],"inputs":{"src/modules/tabs.props.ts":{"bytesInOutput":687}},"bytes":793},"dist/modules/tabs.context.mjs":{"imports":[{"path":"dist/chunk-S5AGDSR2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["TabsProvider","useTabsContext"],"entryPoint":"src/modules/tabs.context.ts","inputs":{},"bytes":151},"dist/modules/tabs.hooks.mjs":{"imports":[{"path":"dist/chunk-QVDBBOCQ.mjs","kind":"import-statement"},{"path":"dist/chunk-S5AGDSR2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useTab","useTabList","useTabPanel","useTabPanels","useTabs"],"entryPoint":"src/modules/tabs.hooks.ts","inputs":{},"bytes":247},"dist/chunk-QVDBBOCQ.mjs":{"imports":[{"path":"dist/chunk-S5AGDSR2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["useTab","useTabList","useTabPanel","useTabPanels","useTabs"],"inputs":{"src/modules/tabs.hooks.ts":{"bytesInOutput":2920}},"bytes":3134},"dist/chunk-S5AGDSR2.mjs":{"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["TabsProvider","useTabsContext"],"inputs":{"src/modules/tabs.context.ts":{"bytesInOutput":137}},"bytes":214},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}

package/dist/modules/tabs.context.d.mts

@@ -0,0 +1,12 @@
+import { UseTabsReturn } from './tabs.hooks.mjs';
+import { ToRefs } from 'vue';
+import { TabsProps } from './tabs.props.mjs';
+
+type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+interface UseTabsContext extends UseTabsReturn {
+    rootProps: ToRefs<TabsProps>;
+}
+declare const TabsProvider: (opts: PartialBy<UseTabsContext, "rootAttrs">) => void;
+declare const useTabsContext: (fallback?: PartialBy<UseTabsContext, "rootAttrs"> | undefined) => PartialBy<UseTabsContext, "rootAttrs">;
+
+export { TabsProvider, useTabsContext };

package/dist/modules/tabs.context.d.ts

@@ -0,0 +1,12 @@
+import { UseTabsReturn } from './tabs.hooks.js';
+import { ToRefs } from 'vue';
+import { TabsProps } from './tabs.props.js';
+
+type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+interface UseTabsContext extends UseTabsReturn {
+    rootProps: ToRefs<TabsProps>;
+}
+declare const TabsProvider: (opts: PartialBy<UseTabsContext, "rootAttrs">) => void;
+declare const useTabsContext: (fallback?: PartialBy<UseTabsContext, "rootAttrs"> | undefined) => PartialBy<UseTabsContext, "rootAttrs">;
+
+export { TabsProvider, useTabsContext };

package/dist/modules/tabs.context.js

@@ -0,0 +1,33 @@
+"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/tabs.context.ts
+var tabs_context_exports = {};
+__export(tabs_context_exports, {
+  TabsProvider: () => TabsProvider,
+  useTabsContext: () => useTabsContext
+});
+module.exports = __toCommonJS(tabs_context_exports);
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [TabsProvider, useTabsContext] = (0, import_pixel3_utils.usePixelCreateContext)("TabsContext");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TabsProvider,
+  useTabsContext
+});

package/dist/modules/tabs.context.mjs

@@ -0,0 +1,9 @@
+import {
+  TabsProvider,
+  useTabsContext
+} from "../chunk-S5AGDSR2.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  TabsProvider,
+  useTabsContext
+};

package/dist/modules/tabs.hooks.d.mts

@@ -0,0 +1,56 @@
+import * as vue from 'vue';
+import { TabsProps, TabsEmits, TabProps, TabPanelProps } from './tabs.props.mjs';
+
+declare function useTabs(props: TabsProps, emit: TabsEmits): {
+    selectedTab: vue.Ref<number> | vue.ComputedRef<number | undefined>;
+    onChangeTab: (value: number) => void;
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+        id: string;
+    }>;
+    id: vue.ComputedRef<string>;
+};
+declare function useTabList(): {
+    tabsProps: vue.ToRefs<TabsProps>;
+    onChangeTab: (value: number) => void;
+    selectedTab: vue.Ref<number> | vue.ComputedRef<number | undefined>;
+    rootAttrs: {
+        'data-border': boolean;
+        class: string;
+    };
+    tabListAttrs: {
+        'data-pixel-component': string;
+        class: string;
+    };
+    tabsId: vue.ComputedRef<string>;
+};
+declare function useTab(props: TabProps, attrs: {
+    [x: string]: unknown;
+}): {
+    rootAttrs: vue.ComputedRef<{
+        role: string;
+        'data-pixel-component': string;
+        class: string[];
+        id: string;
+    }>;
+    tabSelectedBorderAttrs: vue.ComputedRef<{
+        isSelected: boolean;
+    }>;
+};
+declare function useTabPanels(): {
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+    }>;
+    selectedTab: vue.Ref<number> | vue.ComputedRef<number | undefined>;
+};
+declare function useTabPanel(props: TabPanelProps): {
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+        style: {
+            display: string;
+        };
+    }>;
+};
+type UseTabsReturn = ReturnType<typeof useTabs>;
+
+export { UseTabsReturn, useTab, useTabList, useTabPanel, useTabPanels, useTabs };

package/dist/modules/tabs.hooks.d.ts

@@ -0,0 +1,56 @@
+import * as vue from 'vue';
+import { TabsProps, TabsEmits, TabProps, TabPanelProps } from './tabs.props.js';
+
+declare function useTabs(props: TabsProps, emit: TabsEmits): {
+    selectedTab: vue.Ref<number> | vue.ComputedRef<number | undefined>;
+    onChangeTab: (value: number) => void;
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+        id: string;
+    }>;
+    id: vue.ComputedRef<string>;
+};
+declare function useTabList(): {
+    tabsProps: vue.ToRefs<TabsProps>;
+    onChangeTab: (value: number) => void;
+    selectedTab: vue.Ref<number> | vue.ComputedRef<number | undefined>;
+    rootAttrs: {
+        'data-border': boolean;
+        class: string;
+    };
+    tabListAttrs: {
+        'data-pixel-component': string;
+        class: string;
+    };
+    tabsId: vue.ComputedRef<string>;
+};
+declare function useTab(props: TabProps, attrs: {
+    [x: string]: unknown;
+}): {
+    rootAttrs: vue.ComputedRef<{
+        role: string;
+        'data-pixel-component': string;
+        class: string[];
+        id: string;
+    }>;
+    tabSelectedBorderAttrs: vue.ComputedRef<{
+        isSelected: boolean;
+    }>;
+};
+declare function useTabPanels(): {
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+    }>;
+    selectedTab: vue.Ref<number> | vue.ComputedRef<number | undefined>;
+};
+declare function useTabPanel(props: TabPanelProps): {
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+        style: {
+            display: string;
+        };
+    }>;
+};
+type UseTabsReturn = ReturnType<typeof useTabs>;
+
+export { UseTabsReturn, useTab, useTabList, useTabPanel, useTabPanels, useTabs };