@mekari/pixel3-tag 0.0.0

package/dist/chunk-AGP5VIAA.mjs

@@ -0,0 +1,19 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/tag.machines.ts
+import { createMachine } from "xstate";
+function tagMachine(context) {
+  return createMachine({
+    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgBcBDKfEABy1gEsDqsMyAPRARgCZ0BPN95f5EA */
+    id: "tag",
+    context,
+    predictableActionArguments: true
+  });
+}
+__name(tagMachine, "tagMachine");
+
+export {
+  tagMachine
+};

package/dist/chunk-ETUG5QZG.mjs

@@ -0,0 +1,45 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/tag.connects.ts
+import { computed, getCurrentInstance } from "vue";
+import { cx } from "@mekari/pixel3-styled-system/css";
+function tagConnect(state, send, classes) {
+  const {
+    id,
+    isClosable,
+    onClick,
+    onClose
+  } = state.context;
+  const isClickable = computed(() => {
+    var _a, _b;
+    return !!((_b = (_a = getCurrentInstance()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
+  }).value;
+  return {
+    isClosable,
+    rootProps: {
+      id,
+      onClick,
+      class: cx(classes.root, "group"),
+      style: {
+        "--mp-tag--cursor": isClickable ? "pointer" : void 0
+      },
+      "data-pixel-component": "MpTag"
+    },
+    closeProps: {
+      id: `${id}-close`,
+      variant: "ghost",
+      size: "sm",
+      leftIcon: "remove-tag",
+      onClick: onClose,
+      class: classes.close,
+      "data-pixel-component": "MpTagClose"
+    }
+  };
+}
+__name(tagConnect, "tagConnect");
+
+export {
+  tagConnect
+};

package/dist/chunk-GRJUHSTY.mjs

@@ -0,0 +1,36 @@
+import {
+  useTag
+} from "./chunk-J6ICIHXS.mjs";
+import {
+  tagEmits,
+  tagProps
+} from "./chunk-Q6L3MIBC.mjs";
+
+// src/tag.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent, reactive } from "vue";
+import { MpButton } from "@mekari/pixel3-button";
+var MpTag = defineComponent({
+  name: "MpTag",
+  props: tagProps,
+  emits: tagEmits,
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      as: Component
+    } = reactive(props);
+    const api = useTag(props, emit);
+    return () => _createVNode(Component, api.value.rootProps, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots), api.value.isClosable && _createVNode(MpButton, api.value.closeProps, null)];
+      }
+    });
+  }
+});
+
+export {
+  MpTag
+};

package/dist/chunk-J6ICIHXS.mjs

@@ -0,0 +1,38 @@
+import {
+  tagConnect
+} from "./chunk-ETUG5QZG.mjs";
+import {
+  tagMachine
+} from "./chunk-AGP5VIAA.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/tag.hooks.ts
+import { computed, ref } from "vue";
+import { useMachine } from "@xstate/vue";
+import { useId } from "@mekari/pixel3-utils";
+import { tagSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+var useTag = /* @__PURE__ */ __name((props, emit) => {
+  var _a;
+  const context = ref(props);
+  const {
+    state,
+    send
+  } = useMachine(tagMachine({
+    ...context.value,
+    id: (_a = context.value.id) != null ? _a : `mp-tag-${useId()}`,
+    onClick: (evt) => emit("click", evt),
+    onClose: (evt) => {
+      evt.stopPropagation();
+      emit("close", evt);
+    }
+  }));
+  const [tagProps] = tagSlotRecipe.splitVariantProps(context.value);
+  const classes = tagSlotRecipe(tagProps);
+  return computed(() => tagConnect(state.value, send, classes));
+}, "useTag");
+
+export {
+  useTag
+};

package/dist/chunk-Q6L3MIBC.mjs

@@ -0,0 +1,29 @@
+// src/modules/tag.props.ts
+import { declareEmit } from "@mekari/pixel3-utils";
+var tagProps = {
+  as: {
+    type: String,
+    default: "button"
+  },
+  id: {
+    type: String
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  variant: {
+    type: String,
+    default: "gray"
+  },
+  isClosable: {
+    type: Boolean,
+    default: false
+  }
+};
+var tagEmits = declareEmit(["click", "close"]);
+
+export {
+  tagProps,
+  tagEmits
+};

package/dist/chunk-QZ7VFGWC.mjs

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};

package/dist/index.d.mts

@@ -0,0 +1,4 @@
+export { MpTag } from './tag.mjs';
+import './modules/tag.types.mjs';
+import '@mekari/pixel3-utils';
+import 'vue';

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { MpTag } from './tag.js';
+import './modules/tag.types.js';
+import '@mekari/pixel3-utils';
+import 'vue';

package/dist/index.js

@@ -0,0 +1,159 @@
+"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.ts
+var src_exports = {};
+__export(src_exports, {
+  MpTag: () => MpTag
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/tag.tsx
+var import_vue4 = require("vue");
+var import_vue5 = require("vue");
+
+// src/modules/tag.props.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var tagProps = {
+  as: {
+    type: String,
+    default: "button"
+  },
+  id: {
+    type: String
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  variant: {
+    type: String,
+    default: "gray"
+  },
+  isClosable: {
+    type: Boolean,
+    default: false
+  }
+};
+var tagEmits = (0, import_pixel3_utils.declareEmit)(["click", "close"]);
+
+// src/modules/tag.hooks.ts
+var import_vue2 = require("vue");
+var import_vue3 = require("@xstate/vue");
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+
+// src/modules/tag.machines.ts
+var import_xstate = require("xstate");
+function tagMachine(context) {
+  return (0, import_xstate.createMachine)({
+    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgBcBDKfEABy1gEsDqsMyAPRARgCZ0BPN95f5EA */
+    id: "tag",
+    context,
+    predictableActionArguments: true
+  });
+}
+__name(tagMachine, "tagMachine");
+
+// src/modules/tag.connects.ts
+var import_vue = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+function tagConnect(state, send, classes) {
+  const {
+    id,
+    isClosable,
+    onClick,
+    onClose
+  } = state.context;
+  const isClickable = (0, import_vue.computed)(() => {
+    var _a, _b;
+    return !!((_b = (_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
+  }).value;
+  return {
+    isClosable,
+    rootProps: {
+      id,
+      onClick,
+      class: (0, import_css.cx)(classes.root, "group"),
+      style: {
+        "--mp-tag--cursor": isClickable ? "pointer" : void 0
+      },
+      "data-pixel-component": "MpTag"
+    },
+    closeProps: {
+      id: `${id}-close`,
+      variant: "ghost",
+      size: "sm",
+      leftIcon: "remove-tag",
+      onClick: onClose,
+      class: classes.close,
+      "data-pixel-component": "MpTagClose"
+    }
+  };
+}
+__name(tagConnect, "tagConnect");
+
+// src/modules/tag.hooks.ts
+var useTag = /* @__PURE__ */ __name((props, emit) => {
+  var _a;
+  const context = (0, import_vue2.ref)(props);
+  const {
+    state,
+    send
+  } = (0, import_vue3.useMachine)(tagMachine({
+    ...context.value,
+    id: (_a = context.value.id) != null ? _a : `mp-tag-${(0, import_pixel3_utils2.useId)()}`,
+    onClick: (evt) => emit("click", evt),
+    onClose: (evt) => {
+      evt.stopPropagation();
+      emit("close", evt);
+    }
+  }));
+  const [tagProps2] = import_recipes.tagSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.tagSlotRecipe)(tagProps2);
+  return (0, import_vue2.computed)(() => tagConnect(state.value, send, classes));
+}, "useTag");
+
+// src/tag.tsx
+var import_pixel3_button = require("@mekari/pixel3-button");
+var MpTag = (0, import_vue5.defineComponent)({
+  name: "MpTag",
+  props: tagProps,
+  emits: tagEmits,
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      as: Component
+    } = (0, import_vue5.reactive)(props);
+    const api = useTag(props, emit);
+    return () => (0, import_vue4.createVNode)(Component, api.value.rootProps, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots), api.value.isClosable && (0, import_vue4.createVNode)(import_pixel3_button.MpButton, api.value.closeProps, null)];
+      }
+    });
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpTag
+});

package/dist/index.mjs

@@ -0,0 +1,11 @@
+import {
+  MpTag
+} from "./chunk-GRJUHSTY.mjs";
+import "./chunk-J6ICIHXS.mjs";
+import "./chunk-ETUG5QZG.mjs";
+import "./chunk-AGP5VIAA.mjs";
+import "./chunk-Q6L3MIBC.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpTag
+};

package/dist/metafile-cjs.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/tag.props.ts":{"bytes":777,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"./tag.types","kind":"import-statement","external":true}],"format":"esm"},"src/modules/tag.machines.ts":{"bytes":461,"imports":[{"path":"xstate","kind":"import-statement","external":true},{"path":"./tag.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/tag.connects.ts":{"bytes":1039,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"./tag.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/tag.hooks.ts":{"bytes":1004,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@xstate/vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/tag.machines.ts","kind":"import-statement","original":"./tag.machines"},{"path":"src/modules/tag.connects.ts","kind":"import-statement","original":"./tag.connects"},{"path":"./tag.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/tag.tsx":{"bytes":876,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/tag.props.ts","kind":"import-statement","original":"./modules/tag.props"},{"path":"src/modules/tag.hooks.ts","kind":"import-statement","original":"./modules/tag.hooks"},{"path":"@mekari/pixel3-button","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":163,"imports":[{"path":"src/tag.tsx","kind":"import-statement","original":"./tag"}],"format":"esm"},"src/modules/tag.types.ts":{"bytes":837,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@xstate/vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"xstate","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-button","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":115},"src/tag.tsx":{"bytesInOutput":715},"src/modules/tag.props.ts":{"bytesInOutput":400},"src/modules/tag.hooks.ts":{"bytesInOutput":890},"src/modules/tag.machines.ts":{"bytesInOutput":314},"src/modules/tag.connects.ts":{"bytesInOutput":945}},"bytes":4567},"dist/tag.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@xstate/vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"xstate","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-button","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/tag.tsx","inputs":{"src/tag.tsx":{"bytesInOutput":830},"src/modules/tag.props.ts":{"bytesInOutput":400},"src/modules/tag.hooks.ts":{"bytesInOutput":890},"src/modules/tag.machines.ts":{"bytesInOutput":314},"src/modules/tag.connects.ts":{"bytesInOutput":945}},"bytes":4550},"dist/modules/tag.connects.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/tag.connects.ts","inputs":{"src/modules/tag.connects.ts":{"bytesInOutput":1097}},"bytes":2122},"dist/modules/tag.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@xstate/vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"xstate","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/tag.hooks.ts","inputs":{"src/modules/tag.hooks.ts":{"bytesInOutput":1021},"src/modules/tag.machines.ts":{"bytesInOutput":314},"src/modules/tag.connects.ts":{"bytesInOutput":945}},"bytes":3391},"dist/modules/tag.machines.js":{"imports":[{"path":"xstate","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/tag.machines.ts","inputs":{"src/modules/tag.machines.ts":{"bytesInOutput":466}},"bytes":1491},"dist/modules/tag.props.js":{"imports":[{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/tag.props.ts","inputs":{"src/modules/tag.props.ts":{"bytesInOutput":567}},"bytes":1509},"dist/modules/tag.types.js":{"imports":[],"exports":[],"entryPoint":"src/modules/tag.types.ts","inputs":{"src/modules/tag.types.ts":{"bytesInOutput":78}},"bytes":778}}}

package/dist/metafile-esm.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/tag.props.ts":{"bytes":777,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"./tag.types","kind":"import-statement","external":true}],"format":"esm"},"src/modules/tag.machines.ts":{"bytes":461,"imports":[{"path":"xstate","kind":"import-statement","external":true},{"path":"./tag.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/tag.connects.ts":{"bytes":1039,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"./tag.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/tag.hooks.ts":{"bytes":1004,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@xstate/vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/tag.machines.ts","kind":"import-statement","original":"./tag.machines"},{"path":"src/modules/tag.connects.ts","kind":"import-statement","original":"./tag.connects"},{"path":"./tag.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/tag.tsx":{"bytes":876,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/tag.props.ts","kind":"import-statement","original":"./modules/tag.props"},{"path":"src/modules/tag.hooks.ts","kind":"import-statement","original":"./modules/tag.hooks"},{"path":"@mekari/pixel3-button","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":163,"imports":[{"path":"src/tag.tsx","kind":"import-statement","original":"./tag"}],"format":"esm"},"src/modules/tag.types.ts":{"bytes":837,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-GRJUHSTY.mjs","kind":"import-statement"},{"path":"dist/chunk-J6ICIHXS.mjs","kind":"import-statement"},{"path":"dist/chunk-ETUG5QZG.mjs","kind":"import-statement"},{"path":"dist/chunk-AGP5VIAA.mjs","kind":"import-statement"},{"path":"dist/chunk-Q6L3MIBC.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpTag"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":223},"dist/tag.mjs":{"imports":[{"path":"dist/chunk-GRJUHSTY.mjs","kind":"import-statement"},{"path":"dist/chunk-J6ICIHXS.mjs","kind":"import-statement"},{"path":"dist/chunk-ETUG5QZG.mjs","kind":"import-statement"},{"path":"dist/chunk-AGP5VIAA.mjs","kind":"import-statement"},{"path":"dist/chunk-Q6L3MIBC.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpTag"],"entryPoint":"src/tag.tsx","inputs":{},"bytes":223},"dist/chunk-GRJUHSTY.mjs":{"imports":[{"path":"dist/chunk-J6ICIHXS.mjs","kind":"import-statement"},{"path":"dist/chunk-Q6L3MIBC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-button","kind":"import-statement","external":true}],"exports":["MpTag"],"inputs":{"src/tag.tsx":{"bytesInOutput":649}},"bytes":798},"dist/modules/tag.connects.mjs":{"imports":[{"path":"dist/chunk-ETUG5QZG.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["tagConnect"],"entryPoint":"src/modules/tag.connects.ts","inputs":{},"bytes":111},"dist/modules/tag.hooks.mjs":{"imports":[{"path":"dist/chunk-J6ICIHXS.mjs","kind":"import-statement"},{"path":"dist/chunk-ETUG5QZG.mjs","kind":"import-statement"},{"path":"dist/chunk-AGP5VIAA.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useTag"],"entryPoint":"src/modules/tag.hooks.ts","inputs":{},"bytes":167},"dist/chunk-J6ICIHXS.mjs":{"imports":[{"path":"dist/chunk-ETUG5QZG.mjs","kind":"import-statement"},{"path":"dist/chunk-AGP5VIAA.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@xstate/vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["useTag"],"inputs":{"src/modules/tag.hooks.ts":{"bytesInOutput":765}},"bytes":971},"dist/chunk-ETUG5QZG.mjs":{"imports":[{"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}],"exports":["tagConnect"],"inputs":{"src/modules/tag.connects.ts":{"bytesInOutput":909}},"bytes":1016},"dist/modules/tag.machines.mjs":{"imports":[{"path":"dist/chunk-AGP5VIAA.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["tagMachine"],"entryPoint":"src/modules/tag.machines.ts","inputs":{},"bytes":111},"dist/chunk-AGP5VIAA.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"xstate","kind":"import-statement","external":true}],"exports":["tagMachine"],"inputs":{"src/modules/tag.machines.ts":{"bytesInOutput":296}},"bytes":403},"dist/modules/tag.props.mjs":{"imports":[{"path":"dist/chunk-Q6L3MIBC.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["tagEmits","tagProps"],"entryPoint":"src/modules/tag.props.ts","inputs":{},"bytes":131},"dist/chunk-Q6L3MIBC.mjs":{"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["tagEmits","tagProps"],"inputs":{"src/modules/tag.props.ts":{"bytesInOutput":368}},"bytes":432},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151},"dist/modules/tag.types.mjs":{"imports":[],"exports":[],"entryPoint":"src/modules/tag.types.ts","inputs":{"src/modules/tag.types.ts":{"bytesInOutput":0}},"bytes":0}}}

package/dist/modules/tag.connects.d.mts

@@ -0,0 +1,10 @@
+import { TagState, TagSend, TagClasses, TagApiMachine } from './tag.types.mjs';
+import '@mekari/pixel3-utils';
+
+/**
+ * Exported tag connects.
+ */
+
+declare function tagConnect(state: TagState, send: TagSend, classes: TagClasses): TagApiMachine;
+
+export { tagConnect };

package/dist/modules/tag.connects.d.ts

@@ -0,0 +1,10 @@
+import { TagState, TagSend, TagClasses, TagApiMachine } from './tag.types.js';
+import '@mekari/pixel3-utils';
+
+/**
+ * Exported tag connects.
+ */
+
+declare function tagConnect(state: TagState, send: TagSend, classes: TagClasses): TagApiMachine;
+
+export { tagConnect };

package/dist/modules/tag.connects.js

@@ -0,0 +1,66 @@
+"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/modules/tag.connects.ts
+var tag_connects_exports = {};
+__export(tag_connects_exports, {
+  tagConnect: () => tagConnect
+});
+module.exports = __toCommonJS(tag_connects_exports);
+var import_vue = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+function tagConnect(state, send, classes) {
+  const {
+    id,
+    isClosable,
+    onClick,
+    onClose
+  } = state.context;
+  const isClickable = (0, import_vue.computed)(() => {
+    var _a, _b;
+    return !!((_b = (_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
+  }).value;
+  return {
+    isClosable,
+    rootProps: {
+      id,
+      onClick,
+      class: (0, import_css.cx)(classes.root, "group"),
+      style: {
+        "--mp-tag--cursor": isClickable ? "pointer" : void 0
+      },
+      "data-pixel-component": "MpTag"
+    },
+    closeProps: {
+      id: `${id}-close`,
+      variant: "ghost",
+      size: "sm",
+      leftIcon: "remove-tag",
+      onClick: onClose,
+      class: classes.close,
+      "data-pixel-component": "MpTagClose"
+    }
+  };
+}
+__name(tagConnect, "tagConnect");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  tagConnect
+});

package/dist/modules/tag.connects.mjs

@@ -0,0 +1,7 @@
+import {
+  tagConnect
+} from "../chunk-ETUG5QZG.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  tagConnect
+};

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

@@ -0,0 +1,7 @@
+import * as vue from 'vue';
+import { TagDefinedContext, TagApiMachine } from './tag.types.mjs';
+import * as _mekari_pixel3_utils from '@mekari/pixel3-utils';
+
+declare const useTag: (props: TagDefinedContext, emit: CallableFunction) => vue.ComputedRef<TagApiMachine<_mekari_pixel3_utils.PropTypes>>;
+
+export { useTag };

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

@@ -0,0 +1,7 @@
+import * as vue from 'vue';
+import { TagDefinedContext, TagApiMachine } from './tag.types.js';
+import * as _mekari_pixel3_utils from '@mekari/pixel3-utils';
+
+declare const useTag: (props: TagDefinedContext, emit: CallableFunction) => vue.ComputedRef<TagApiMachine<_mekari_pixel3_utils.PropTypes>>;
+
+export { useTag };

package/dist/modules/tag.hooks.js

@@ -0,0 +1,105 @@
+"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/modules/tag.hooks.ts
+var tag_hooks_exports = {};
+__export(tag_hooks_exports, {
+  useTag: () => useTag
+});
+module.exports = __toCommonJS(tag_hooks_exports);
+var import_vue2 = require("vue");
+var import_vue3 = require("@xstate/vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+
+// src/modules/tag.machines.ts
+var import_xstate = require("xstate");
+function tagMachine(context) {
+  return (0, import_xstate.createMachine)({
+    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgBcBDKfEABy1gEsDqsMyAPRARgCZ0BPN95f5EA */
+    id: "tag",
+    context,
+    predictableActionArguments: true
+  });
+}
+__name(tagMachine, "tagMachine");
+
+// src/modules/tag.connects.ts
+var import_vue = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+function tagConnect(state, send, classes) {
+  const {
+    id,
+    isClosable,
+    onClick,
+    onClose
+  } = state.context;
+  const isClickable = (0, import_vue.computed)(() => {
+    var _a, _b;
+    return !!((_b = (_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
+  }).value;
+  return {
+    isClosable,
+    rootProps: {
+      id,
+      onClick,
+      class: (0, import_css.cx)(classes.root, "group"),
+      style: {
+        "--mp-tag--cursor": isClickable ? "pointer" : void 0
+      },
+      "data-pixel-component": "MpTag"
+    },
+    closeProps: {
+      id: `${id}-close`,
+      variant: "ghost",
+      size: "sm",
+      leftIcon: "remove-tag",
+      onClick: onClose,
+      class: classes.close,
+      "data-pixel-component": "MpTagClose"
+    }
+  };
+}
+__name(tagConnect, "tagConnect");
+
+// src/modules/tag.hooks.ts
+var useTag = /* @__PURE__ */ __name((props, emit) => {
+  var _a;
+  const context = (0, import_vue2.ref)(props);
+  const {
+    state,
+    send
+  } = (0, import_vue3.useMachine)(tagMachine({
+    ...context.value,
+    id: (_a = context.value.id) != null ? _a : `mp-tag-${(0, import_pixel3_utils.useId)()}`,
+    onClick: (evt) => emit("click", evt),
+    onClose: (evt) => {
+      evt.stopPropagation();
+      emit("close", evt);
+    }
+  }));
+  const [tagProps] = import_recipes.tagSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.tagSlotRecipe)(tagProps);
+  return (0, import_vue2.computed)(() => tagConnect(state.value, send, classes));
+}, "useTag");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTag
+});

package/dist/modules/tag.hooks.mjs

@@ -0,0 +1,9 @@
+import {
+  useTag
+} from "../chunk-J6ICIHXS.mjs";
+import "../chunk-ETUG5QZG.mjs";
+import "../chunk-AGP5VIAA.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  useTag
+};

package/dist/modules/tag.machines.d.mts

@@ -0,0 +1,10 @@
+import * as xstate from 'xstate';
+import { TagDefinedContext, TagProps } from './tag.types.mjs';
+import '@mekari/pixel3-utils';
+
+declare function tagMachine(context: TagDefinedContext): xstate.StateMachine<Pick<Partial<TagProps>, "id"> & Omit<TagProps, "id">, any, xstate.AnyEventObject, {
+    value: any;
+    context: Pick<Partial<TagProps>, "id"> & Omit<TagProps, "id">;
+}, xstate.BaseActionObject, xstate.ServiceMap, xstate.ResolveTypegenMeta<xstate.TypegenDisabled, xstate.AnyEventObject, xstate.BaseActionObject, xstate.ServiceMap>>;
+
+export { tagMachine };

package/dist/modules/tag.machines.d.ts

@@ -0,0 +1,10 @@
+import * as xstate from 'xstate';
+import { TagDefinedContext, TagProps } from './tag.types.js';
+import '@mekari/pixel3-utils';
+
+declare function tagMachine(context: TagDefinedContext): xstate.StateMachine<Pick<Partial<TagProps>, "id"> & Omit<TagProps, "id">, any, xstate.AnyEventObject, {
+    value: any;
+    context: Pick<Partial<TagProps>, "id"> & Omit<TagProps, "id">;
+}, xstate.BaseActionObject, xstate.ServiceMap, xstate.ResolveTypegenMeta<xstate.TypegenDisabled, xstate.AnyEventObject, xstate.BaseActionObject, xstate.ServiceMap>>;
+
+export { tagMachine };

package/dist/modules/tag.machines.js

@@ -0,0 +1,40 @@
+"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/modules/tag.machines.ts
+var tag_machines_exports = {};
+__export(tag_machines_exports, {
+  tagMachine: () => tagMachine
+});
+module.exports = __toCommonJS(tag_machines_exports);
+var import_xstate = require("xstate");
+function tagMachine(context) {
+  return (0, import_xstate.createMachine)({
+    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgBcBDKfEABy1gEsDqsMyAPRARgCZ0BPN95f5EA */
+    id: "tag",
+    context,
+    predictableActionArguments: true
+  });
+}
+__name(tagMachine, "tagMachine");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  tagMachine
+});

package/dist/modules/tag.machines.mjs

@@ -0,0 +1,7 @@
+import {
+  tagMachine
+} from "../chunk-AGP5VIAA.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  tagMachine
+};

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

@@ -0,0 +1,28 @@
+import { TagSize, TagVariant } from './tag.types.mjs';
+import { PropType } from 'vue';
+import '@mekari/pixel3-utils';
+
+declare const tagProps: {
+    as: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    id: {
+        type: PropType<string | undefined>;
+    };
+    size: {
+        type: PropType<TagSize | undefined>;
+        default: string;
+    };
+    variant: {
+        type: PropType<TagVariant | undefined>;
+        default: string;
+    };
+    isClosable: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+};
+declare const tagEmits: ("click" | "close")[];
+
+export { tagEmits, tagProps };

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

@@ -0,0 +1,28 @@
+import { TagSize, TagVariant } from './tag.types.js';
+import { PropType } from 'vue';
+import '@mekari/pixel3-utils';
+
+declare const tagProps: {
+    as: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    id: {
+        type: PropType<string | undefined>;
+    };
+    size: {
+        type: PropType<TagSize | undefined>;
+        default: string;
+    };
+    variant: {
+        type: PropType<TagVariant | undefined>;
+        default: string;
+    };
+    isClosable: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+};
+declare const tagEmits: ("click" | "close")[];
+
+export { tagEmits, tagProps };

package/dist/modules/tag.props.js

@@ -0,0 +1,54 @@
+"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/tag.props.ts
+var tag_props_exports = {};
+__export(tag_props_exports, {
+  tagEmits: () => tagEmits,
+  tagProps: () => tagProps
+});
+module.exports = __toCommonJS(tag_props_exports);
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var tagProps = {
+  as: {
+    type: String,
+    default: "button"
+  },
+  id: {
+    type: String
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  variant: {
+    type: String,
+    default: "gray"
+  },
+  isClosable: {
+    type: Boolean,
+    default: false
+  }
+};
+var tagEmits = (0, import_pixel3_utils.declareEmit)(["click", "close"]);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  tagEmits,
+  tagProps
+});

package/dist/modules/tag.props.mjs

@@ -0,0 +1,9 @@
+import {
+  tagEmits,
+  tagProps
+} from "../chunk-Q6L3MIBC.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  tagEmits,
+  tagProps
+};

package/dist/modules/tag.types.d.mts

@@ -0,0 +1,32 @@
+import { Optional, PropTypes } from '@mekari/pixel3-utils';
+
+/**
+ * Exported tag types.
+ */
+
+type TagVariant = 'gray' | 'red';
+type TagSize = 'sm' | 'md';
+interface TagProps {
+    id?: string;
+    size?: TagSize;
+    variant?: TagVariant;
+    isClosable?: boolean;
+    onClick?: (evt: MouseEvent | TouchEvent) => void;
+    onClose?: (evt: MouseEvent | TouchEvent) => void;
+}
+type TagDefinedContext = Optional<TagProps, 'id'>;
+interface TagApiMachine<T extends PropTypes = PropTypes> {
+    isClosable?: boolean;
+    rootProps?: T['element'];
+    closeProps?: T['element'];
+}
+interface TagClasses {
+    root?: string;
+    close?: string;
+}
+interface TagState {
+    context: TagProps;
+}
+type TagSend = CallableFunction;
+
+export { TagApiMachine, TagClasses, TagDefinedContext, TagProps, TagSend, TagSize, TagState, TagVariant };

package/dist/modules/tag.types.d.ts

@@ -0,0 +1,32 @@
+import { Optional, PropTypes } from '@mekari/pixel3-utils';
+
+/**
+ * Exported tag types.
+ */
+
+type TagVariant = 'gray' | 'red';
+type TagSize = 'sm' | 'md';
+interface TagProps {
+    id?: string;
+    size?: TagSize;
+    variant?: TagVariant;
+    isClosable?: boolean;
+    onClick?: (evt: MouseEvent | TouchEvent) => void;
+    onClose?: (evt: MouseEvent | TouchEvent) => void;
+}
+type TagDefinedContext = Optional<TagProps, 'id'>;
+interface TagApiMachine<T extends PropTypes = PropTypes> {
+    isClosable?: boolean;
+    rootProps?: T['element'];
+    closeProps?: T['element'];
+}
+interface TagClasses {
+    root?: string;
+    close?: string;
+}
+interface TagState {
+    context: TagProps;
+}
+type TagSend = CallableFunction;
+
+export { TagApiMachine, TagClasses, TagDefinedContext, TagProps, TagSend, TagSize, TagState, TagVariant };

package/dist/modules/tag.types.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/tag.types.ts
+var tag_types_exports = {};
+module.exports = __toCommonJS(tag_types_exports);

package/dist/tag.d.mts

@@ -0,0 +1,58 @@
+import { TagSize, TagVariant } from './modules/tag.types.mjs';
+import * as vue from 'vue';
+import '@mekari/pixel3-utils';
+
+/**
+ * MpTag component used to display label that can optionally be selected and unselected or removed.
+ */
+declare const MpTag: vue.DefineComponent<{
+    as: {
+        type: vue.PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    size: {
+        type: vue.PropType<TagSize | undefined>;
+        default: string;
+    };
+    variant: {
+        type: vue.PropType<TagVariant | undefined>;
+        default: string;
+    };
+    isClosable: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "close")[], "click" | "close", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: vue.PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    size: {
+        type: vue.PropType<TagSize | undefined>;
+        default: string;
+    };
+    variant: {
+        type: vue.PropType<TagVariant | undefined>;
+        default: string;
+    };
+    isClosable: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
+    size: TagSize | undefined;
+    variant: TagVariant | undefined;
+    isClosable: boolean | undefined;
+    as: keyof HTMLElementTagNameMap;
+}, {}>;
+
+export { MpTag };

package/dist/tag.d.ts

@@ -0,0 +1,58 @@
+import { TagSize, TagVariant } from './modules/tag.types.js';
+import * as vue from 'vue';
+import '@mekari/pixel3-utils';
+
+/**
+ * MpTag component used to display label that can optionally be selected and unselected or removed.
+ */
+declare const MpTag: vue.DefineComponent<{
+    as: {
+        type: vue.PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    size: {
+        type: vue.PropType<TagSize | undefined>;
+        default: string;
+    };
+    variant: {
+        type: vue.PropType<TagVariant | undefined>;
+        default: string;
+    };
+    isClosable: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "close")[], "click" | "close", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: vue.PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    size: {
+        type: vue.PropType<TagSize | undefined>;
+        default: string;
+    };
+    variant: {
+        type: vue.PropType<TagVariant | undefined>;
+        default: string;
+    };
+    isClosable: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
+    size: TagSize | undefined;
+    variant: TagVariant | undefined;
+    isClosable: boolean | undefined;
+    as: keyof HTMLElementTagNameMap;
+}, {}>;
+
+export { MpTag };

package/dist/tag.js

@@ -0,0 +1,157 @@
+"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/tag.tsx
+var tag_exports = {};
+__export(tag_exports, {
+  MpTag: () => MpTag
+});
+module.exports = __toCommonJS(tag_exports);
+var import_vue4 = require("vue");
+var import_vue5 = require("vue");
+
+// src/modules/tag.props.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var tagProps = {
+  as: {
+    type: String,
+    default: "button"
+  },
+  id: {
+    type: String
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  variant: {
+    type: String,
+    default: "gray"
+  },
+  isClosable: {
+    type: Boolean,
+    default: false
+  }
+};
+var tagEmits = (0, import_pixel3_utils.declareEmit)(["click", "close"]);
+
+// src/modules/tag.hooks.ts
+var import_vue2 = require("vue");
+var import_vue3 = require("@xstate/vue");
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+
+// src/modules/tag.machines.ts
+var import_xstate = require("xstate");
+function tagMachine(context) {
+  return (0, import_xstate.createMachine)({
+    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgBcBDKfEABy1gEsDqsMyAPRARgCZ0BPN95f5EA */
+    id: "tag",
+    context,
+    predictableActionArguments: true
+  });
+}
+__name(tagMachine, "tagMachine");
+
+// src/modules/tag.connects.ts
+var import_vue = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+function tagConnect(state, send, classes) {
+  const {
+    id,
+    isClosable,
+    onClick,
+    onClose
+  } = state.context;
+  const isClickable = (0, import_vue.computed)(() => {
+    var _a, _b;
+    return !!((_b = (_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
+  }).value;
+  return {
+    isClosable,
+    rootProps: {
+      id,
+      onClick,
+      class: (0, import_css.cx)(classes.root, "group"),
+      style: {
+        "--mp-tag--cursor": isClickable ? "pointer" : void 0
+      },
+      "data-pixel-component": "MpTag"
+    },
+    closeProps: {
+      id: `${id}-close`,
+      variant: "ghost",
+      size: "sm",
+      leftIcon: "remove-tag",
+      onClick: onClose,
+      class: classes.close,
+      "data-pixel-component": "MpTagClose"
+    }
+  };
+}
+__name(tagConnect, "tagConnect");
+
+// src/modules/tag.hooks.ts
+var useTag = /* @__PURE__ */ __name((props, emit) => {
+  var _a;
+  const context = (0, import_vue2.ref)(props);
+  const {
+    state,
+    send
+  } = (0, import_vue3.useMachine)(tagMachine({
+    ...context.value,
+    id: (_a = context.value.id) != null ? _a : `mp-tag-${(0, import_pixel3_utils2.useId)()}`,
+    onClick: (evt) => emit("click", evt),
+    onClose: (evt) => {
+      evt.stopPropagation();
+      emit("close", evt);
+    }
+  }));
+  const [tagProps2] = import_recipes.tagSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.tagSlotRecipe)(tagProps2);
+  return (0, import_vue2.computed)(() => tagConnect(state.value, send, classes));
+}, "useTag");
+
+// src/tag.tsx
+var import_pixel3_button = require("@mekari/pixel3-button");
+var MpTag = (0, import_vue5.defineComponent)({
+  name: "MpTag",
+  props: tagProps,
+  emits: tagEmits,
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      as: Component
+    } = (0, import_vue5.reactive)(props);
+    const api = useTag(props, emit);
+    return () => (0, import_vue4.createVNode)(Component, api.value.rootProps, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots), api.value.isClosable && (0, import_vue4.createVNode)(import_pixel3_button.MpButton, api.value.closeProps, null)];
+      }
+    });
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpTag
+});

package/dist/tag.mjs

@@ -0,0 +1,11 @@
+import {
+  MpTag
+} from "./chunk-GRJUHSTY.mjs";
+import "./chunk-J6ICIHXS.mjs";
+import "./chunk-ETUG5QZG.mjs";
+import "./chunk-AGP5VIAA.mjs";
+import "./chunk-Q6L3MIBC.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpTag
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@mekari/pixel3-tag",
+  "description": "Mekari Pixel 3 | Tag component is used to display label that can optionally be selected and unselected or removed",
+  "version": "0.0.0",
+  "license": "LGPL-3.0",
+  "author": "Dirga Prakesha <dirga.prakesha@mekari.com>",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@xstate/vue": "2.0.0",
+    "xstate": "4.35.0",
+    "@mekari/pixel3-button": "0.0.0",
+    "@mekari/pixel3-styled-system": "0.0.0",
+    "@mekari/pixel3-utils": "0.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "vue": "^3.3.7",
+    "@pandacss/dev": "0.10.0"
+  },
+  "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:css": "pnpm build && pnpm css:gen",
+    "build:fast": "tsup",
+    "build:types": "tsup src --dts-only",
+    "build:external": "tsup src/index.tsx --external @acme-org/styled-system",
+    "types:check": "tsc --noEmit",
+    "css:gen": "panda cssgen --outfile dist/styles.css",
+    "replace-config": "clean-package",
+    "restore-config": "clean-package restore"
+  }
+}