@mekari/pixel3-broadcast 0.0.1-dev.0

package/dist/index.js

@@ -0,0 +1,203 @@
+"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, {
+  MpBroadcast: () => MpBroadcast
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/broadcast.tsx
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+
+// src/modules/broadcast.props.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var broadcastProps = {
+  id: {
+    type: String
+  },
+  variant: {
+    type: String,
+    default: "announcement"
+  },
+  content: {
+    type: String
+  },
+  textLink: {
+    type: String
+  },
+  textLinkHref: {
+    type: String
+  },
+  iconName: {
+    type: String
+  },
+  textAdditionalAction: {
+    type: String
+  },
+  hasAdditionalAction: {
+    type: Boolean,
+    default: false
+  },
+  isClosable: {
+    type: Boolean,
+    default: false
+  }
+};
+var broadcastEmits = (0, import_pixel3_utils.declareEmit)(["click-additional-action", "click-text-link", "click-close-button"]);
+
+// src/modules/broadcast.hooks.ts
+var import_vue = require("vue");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+
+// src/modules/broadcast.connects.ts
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+function broadcastConnect(state, emit, classes) {
+  const {
+    id,
+    variant,
+    iconName,
+    content,
+    hasAdditionalAction,
+    isClosable,
+    textLink,
+    textLinkHref,
+    textAdditionalAction
+  } = state;
+  const idx = id != null ? id : `mp-broadcast-${(0, import_pixel3_utils2.useId)()}`;
+  return {
+    variant,
+    iconName,
+    content,
+    textLink,
+    textAdditionalAction,
+    hasAdditionalAction,
+    isClosable,
+    rootProps: {
+      id: idx,
+      class: classes.root,
+      "data-pixel-component": "MpBroadcast"
+    },
+    containerProps: {
+      id: `${idx}-container`,
+      class: classes.container,
+      "data-pixel-component": "MpBroadcastContainer"
+    },
+    wrapperProps: {
+      id: `${idx}-wrapper`,
+      class: classes.wrapper,
+      "data-pixel-component": "MpBroadcastWrapper"
+    },
+    iconProps: {
+      id: `${idx}-icon`,
+      name: iconName,
+      size: "md",
+      variant: "fill",
+      class: classes.icon,
+      "data-pixel-component": "MpBroadcastIcon"
+    },
+    contentProps: {
+      id: `${idx}-content`,
+      class: classes.content,
+      "data-pixel-component": "MpBroadcastContent"
+    },
+    textLinkProps: {
+      id: `${idx}-text-link`,
+      as: "a",
+      href: textLinkHref,
+      weight: "semiBold",
+      onClick: (evt) => emit("click-text-link", evt),
+      class: classes.textLink,
+      "data-pixel-component": "MpBroadcastTextLink"
+    },
+    actionProps: {
+      id: `${idx}-action`,
+      variant: "secondary",
+      size: "sm",
+      "aria-labelledby": textAdditionalAction,
+      onClick: (evt) => emit("click-additional-action", evt),
+      class: classes.action,
+      "data-pixel-component": "MpBroadcastAction"
+    },
+    closeProps: {
+      id: `${idx}-close`,
+      leftIcon: "close",
+      variant: "ghost",
+      size: "sm",
+      "aria-label": "Close button",
+      onClick: (evt) => emit("click-close-button", evt),
+      class: classes.close,
+      "data-pixel-component": "MpBroadcastClose"
+    }
+  };
+}
+__name(broadcastConnect, "broadcastConnect");
+
+// src/modules/broadcast.hooks.ts
+var useBroadcast = /* @__PURE__ */ __name((props, emit) => {
+  const context = (0, import_vue.ref)(props);
+  const [value] = import_recipes.broadcastSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.broadcastSlotRecipe)(value);
+  return (0, import_vue.computed)(() => broadcastConnect(context.value, emit, classes));
+}, "useBroadcast");
+
+// src/modules/broadcast.utils.ts
+var getMaxWidthContent = /* @__PURE__ */ __name((hasAdditionalAction, isClosable) => {
+  let actionWidth = 0;
+  if (hasAdditionalAction)
+    actionWidth += 112;
+  if (isClosable)
+    actionWidth += 42;
+  return `calc(100% - ${actionWidth}px)`;
+}, "getMaxWidthContent");
+
+// src/broadcast.tsx
+var import_pixel3_button = require("@mekari/pixel3-button");
+var import_pixel3_icon = require("@mekari/pixel3-icon");
+var import_pixel3_text = require("@mekari/pixel3-text");
+var MpBroadcast = (0, import_vue3.defineComponent)({
+  name: "MpBroadcast",
+  props: broadcastProps,
+  emits: broadcastEmits,
+  setup(props, {
+    emit
+  }) {
+    const api = useBroadcast(props, emit);
+    return () => (0, import_vue2.createVNode)("div", api.value.rootProps, [(0, import_vue2.createVNode)("div", api.value.containerProps, [(0, import_vue2.createVNode)("div", (0, import_vue2.mergeProps)({
+      "style": {
+        "--mp-broadcast--width": getMaxWidthContent(api.value.hasAdditionalAction, api.value.isClosable)
+      }
+    }, api.value.wrapperProps), [api.value.variant !== "announcement" && api.value.iconName && (0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, api.value.iconProps, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, (0, import_vue2.mergeProps)(api.value.contentProps, {
+      "is-truncated": true
+    }), {
+      default: () => [api.value.content]
+    }), api.value.textLink && (0, import_vue2.createVNode)(import_pixel3_text.MpText, api.value.textLinkProps, {
+      default: () => [api.value.textLink]
+    })]), (0, import_vue2.createVNode)("div", api.value.wrapperProps, [api.value.hasAdditionalAction && (0, import_vue2.createVNode)(import_pixel3_button.MpButton, api.value.actionProps, {
+      default: () => [api.value.textAdditionalAction]
+    }), api.value.isClosable && (0, import_vue2.createVNode)(import_pixel3_button.MpButton, api.value.closeProps, null)])])]);
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpBroadcast
+});

package/dist/index.mjs

@@ -0,0 +1,11 @@
+import {
+  MpBroadcast
+} from "./chunk-2MCZAW3F.mjs";
+import "./chunk-PTIK2HZP.mjs";
+import "./chunk-JP4CQC7M.mjs";
+import "./chunk-5IQVO6NS.mjs";
+import "./chunk-P5REXKKG.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpBroadcast
+};

package/dist/metafile-cjs.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/broadcast.props.ts":{"bytes":1245,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"./broadcast.types","kind":"import-statement","external":true}],"format":"esm"},"src/modules/broadcast.connects.ts":{"bytes":2322,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"./broadcast.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/broadcast.hooks.ts":{"bytes":672,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/broadcast.connects.ts","kind":"import-statement","original":"./broadcast.connects"},{"path":"./broadcast.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/broadcast.utils.ts":{"bytes":389,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/broadcast.tsx":{"bytes":1777,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/broadcast.props.ts","kind":"import-statement","original":"./modules/broadcast.props"},{"path":"src/modules/broadcast.hooks.ts","kind":"import-statement","original":"./modules/broadcast.hooks"},{"path":"src/modules/broadcast.utils.ts","kind":"import-statement","original":"./modules/broadcast.utils"},{"path":"@mekari/pixel3-button","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":246,"imports":[{"path":"src/broadcast.tsx","kind":"import-statement","original":"./broadcast"}],"format":"esm"},"src/modules/broadcast.types.ts":{"bytes":1340,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"dist/broadcast.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":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-button","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/broadcast.tsx","inputs":{"src/broadcast.tsx":{"bytesInOutput":1824},"src/modules/broadcast.props.ts":{"bytesInOutput":629},"src/modules/broadcast.hooks.ts":{"bytesInOutput":472},"src/modules/broadcast.connects.ts":{"bytesInOutput":2098},"src/modules/broadcast.utils.ts":{"bytesInOutput":270}},"bytes":6509},"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":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-button","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":127},"src/broadcast.tsx":{"bytesInOutput":1679},"src/modules/broadcast.props.ts":{"bytesInOutput":629},"src/modules/broadcast.hooks.ts":{"bytesInOutput":472},"src/modules/broadcast.connects.ts":{"bytesInOutput":2098},"src/modules/broadcast.utils.ts":{"bytesInOutput":270}},"bytes":6508},"dist/modules/broadcast.connects.js":{"imports":[{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/broadcast.connects.ts","inputs":{"src/modules/broadcast.connects.ts":{"bytesInOutput":2278}},"bytes":3315},"dist/modules/broadcast.hooks.js":{"imports":[{"path":"vue","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}],"exports":[],"entryPoint":"src/modules/broadcast.hooks.ts","inputs":{"src/modules/broadcast.hooks.ts":{"bytesInOutput":637},"src/modules/broadcast.connects.ts":{"bytesInOutput":2096}},"bytes":3836},"dist/modules/broadcast.props.js":{"imports":[{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/broadcast.props.ts","inputs":{"src/modules/broadcast.props.ts":{"bytesInOutput":838}},"bytes":1798},"dist/modules/broadcast.types.js":{"imports":[],"exports":[],"entryPoint":"src/modules/broadcast.types.ts","inputs":{"src/modules/broadcast.types.ts":{"bytesInOutput":90}},"bytes":796},"dist/modules/broadcast.utils.js":{"imports":[],"exports":[],"entryPoint":"src/modules/broadcast.utils.ts","inputs":{"src/modules/broadcast.utils.ts":{"bytesInOutput":447}},"bytes":1483}}}

package/dist/metafile-esm.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/broadcast.props.ts":{"bytes":1245,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"./broadcast.types","kind":"import-statement","external":true}],"format":"esm"},"src/modules/broadcast.connects.ts":{"bytes":2322,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"./broadcast.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/broadcast.hooks.ts":{"bytes":672,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/broadcast.connects.ts","kind":"import-statement","original":"./broadcast.connects"},{"path":"./broadcast.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/broadcast.utils.ts":{"bytes":389,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/broadcast.tsx":{"bytes":1777,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/broadcast.props.ts","kind":"import-statement","original":"./modules/broadcast.props"},{"path":"src/modules/broadcast.hooks.ts","kind":"import-statement","original":"./modules/broadcast.hooks"},{"path":"src/modules/broadcast.utils.ts","kind":"import-statement","original":"./modules/broadcast.utils"},{"path":"@mekari/pixel3-button","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":246,"imports":[{"path":"src/broadcast.tsx","kind":"import-statement","original":"./broadcast"}],"format":"esm"},"src/modules/broadcast.types.ts":{"bytes":1340,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"dist/broadcast.mjs":{"imports":[{"path":"dist/chunk-2MCZAW3F.mjs","kind":"import-statement"},{"path":"dist/chunk-PTIK2HZP.mjs","kind":"import-statement"},{"path":"dist/chunk-JP4CQC7M.mjs","kind":"import-statement"},{"path":"dist/chunk-5IQVO6NS.mjs","kind":"import-statement"},{"path":"dist/chunk-P5REXKKG.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpBroadcast"],"entryPoint":"src/broadcast.tsx","inputs":{},"bytes":235},"dist/index.mjs":{"imports":[{"path":"dist/chunk-2MCZAW3F.mjs","kind":"import-statement"},{"path":"dist/chunk-PTIK2HZP.mjs","kind":"import-statement"},{"path":"dist/chunk-JP4CQC7M.mjs","kind":"import-statement"},{"path":"dist/chunk-5IQVO6NS.mjs","kind":"import-statement"},{"path":"dist/chunk-P5REXKKG.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpBroadcast"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":235},"dist/chunk-2MCZAW3F.mjs":{"imports":[{"path":"dist/chunk-PTIK2HZP.mjs","kind":"import-statement"},{"path":"dist/chunk-5IQVO6NS.mjs","kind":"import-statement"},{"path":"dist/chunk-P5REXKKG.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},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true}],"exports":["MpBroadcast"],"inputs":{"src/broadcast.tsx":{"bytesInOutput":1403}},"bytes":1643},"dist/modules/broadcast.connects.mjs":{"imports":[{"path":"dist/chunk-JP4CQC7M.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["broadcastConnect"],"entryPoint":"src/modules/broadcast.connects.ts","inputs":{},"bytes":123},"dist/modules/broadcast.hooks.mjs":{"imports":[{"path":"dist/chunk-PTIK2HZP.mjs","kind":"import-statement"},{"path":"dist/chunk-JP4CQC7M.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useBroadcast"],"entryPoint":"src/modules/broadcast.hooks.ts","inputs":{},"bytes":147},"dist/chunk-PTIK2HZP.mjs":{"imports":[{"path":"dist/chunk-JP4CQC7M.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["useBroadcast"],"inputs":{"src/modules/broadcast.hooks.ts":{"bytesInOutput":415}},"bytes":586},"dist/chunk-JP4CQC7M.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["broadcastConnect"],"inputs":{"src/modules/broadcast.connects.ts":{"bytesInOutput":2058}},"bytes":2177},"dist/modules/broadcast.props.mjs":{"imports":[{"path":"dist/chunk-5IQVO6NS.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["broadcastEmits","broadcastProps"],"entryPoint":"src/modules/broadcast.props.ts","inputs":{},"bytes":155},"dist/chunk-5IQVO6NS.mjs":{"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["broadcastEmits","broadcastProps"],"inputs":{"src/modules/broadcast.props.ts":{"bytesInOutput":597}},"bytes":679},"dist/modules/broadcast.types.mjs":{"imports":[],"exports":[],"entryPoint":"src/modules/broadcast.types.ts","inputs":{"src/modules/broadcast.types.ts":{"bytesInOutput":0}},"bytes":0},"dist/modules/broadcast.utils.mjs":{"imports":[{"path":"dist/chunk-P5REXKKG.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["getMaxWidthContent"],"entryPoint":"src/modules/broadcast.utils.ts","inputs":{},"bytes":127},"dist/chunk-P5REXKKG.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["getMaxWidthContent"],"inputs":{"src/modules/broadcast.utils.ts":{"bytesInOutput":270}},"bytes":388},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}

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

@@ -0,0 +1,10 @@
+import { BroadcastState, BroadcastClasses, BroadcastApiMachine } from './broadcast.types.mjs';
+import '@mekari/pixel3-utils';
+
+/**
+ * Exported broadcast connects.
+ */
+
+declare function broadcastConnect(state: BroadcastState, emit: CallableFunction, classes: BroadcastClasses): BroadcastApiMachine;
+
+export { broadcastConnect };

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

@@ -0,0 +1,10 @@
+import { BroadcastState, BroadcastClasses, BroadcastApiMachine } from './broadcast.types.js';
+import '@mekari/pixel3-utils';
+
+/**
+ * Exported broadcast connects.
+ */
+
+declare function broadcastConnect(state: BroadcastState, emit: CallableFunction, classes: BroadcastClasses): BroadcastApiMachine;
+
+export { broadcastConnect };

package/dist/modules/broadcast.connects.js

@@ -0,0 +1,111 @@
+"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/broadcast.connects.ts
+var broadcast_connects_exports = {};
+__export(broadcast_connects_exports, {
+  broadcastConnect: () => broadcastConnect
+});
+module.exports = __toCommonJS(broadcast_connects_exports);
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+function broadcastConnect(state, emit, classes) {
+  const {
+    id,
+    variant,
+    iconName,
+    content,
+    hasAdditionalAction,
+    isClosable,
+    textLink,
+    textLinkHref,
+    textAdditionalAction
+  } = state;
+  const idx = id != null ? id : `mp-broadcast-${(0, import_pixel3_utils.useId)()}`;
+  return {
+    variant,
+    iconName,
+    content,
+    textLink,
+    textAdditionalAction,
+    hasAdditionalAction,
+    isClosable,
+    rootProps: {
+      id: idx,
+      class: classes.root,
+      "data-pixel-component": "MpBroadcast"
+    },
+    containerProps: {
+      id: `${idx}-container`,
+      class: classes.container,
+      "data-pixel-component": "MpBroadcastContainer"
+    },
+    wrapperProps: {
+      id: `${idx}-wrapper`,
+      class: classes.wrapper,
+      "data-pixel-component": "MpBroadcastWrapper"
+    },
+    iconProps: {
+      id: `${idx}-icon`,
+      name: iconName,
+      size: "md",
+      variant: "fill",
+      class: classes.icon,
+      "data-pixel-component": "MpBroadcastIcon"
+    },
+    contentProps: {
+      id: `${idx}-content`,
+      class: classes.content,
+      "data-pixel-component": "MpBroadcastContent"
+    },
+    textLinkProps: {
+      id: `${idx}-text-link`,
+      as: "a",
+      href: textLinkHref,
+      weight: "semiBold",
+      onClick: (evt) => emit("click-text-link", evt),
+      class: classes.textLink,
+      "data-pixel-component": "MpBroadcastTextLink"
+    },
+    actionProps: {
+      id: `${idx}-action`,
+      variant: "secondary",
+      size: "sm",
+      "aria-labelledby": textAdditionalAction,
+      onClick: (evt) => emit("click-additional-action", evt),
+      class: classes.action,
+      "data-pixel-component": "MpBroadcastAction"
+    },
+    closeProps: {
+      id: `${idx}-close`,
+      leftIcon: "close",
+      variant: "ghost",
+      size: "sm",
+      "aria-label": "Close button",
+      onClick: (evt) => emit("click-close-button", evt),
+      class: classes.close,
+      "data-pixel-component": "MpBroadcastClose"
+    }
+  };
+}
+__name(broadcastConnect, "broadcastConnect");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  broadcastConnect
+});

package/dist/modules/broadcast.connects.mjs

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

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

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

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

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

package/dist/modules/broadcast.hooks.js

@@ -0,0 +1,123 @@
+"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/broadcast.hooks.ts
+var broadcast_hooks_exports = {};
+__export(broadcast_hooks_exports, {
+  useBroadcast: () => useBroadcast
+});
+module.exports = __toCommonJS(broadcast_hooks_exports);
+var import_vue = require("vue");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+
+// src/modules/broadcast.connects.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+function broadcastConnect(state, emit, classes) {
+  const {
+    id,
+    variant,
+    iconName,
+    content,
+    hasAdditionalAction,
+    isClosable,
+    textLink,
+    textLinkHref,
+    textAdditionalAction
+  } = state;
+  const idx = id != null ? id : `mp-broadcast-${(0, import_pixel3_utils.useId)()}`;
+  return {
+    variant,
+    iconName,
+    content,
+    textLink,
+    textAdditionalAction,
+    hasAdditionalAction,
+    isClosable,
+    rootProps: {
+      id: idx,
+      class: classes.root,
+      "data-pixel-component": "MpBroadcast"
+    },
+    containerProps: {
+      id: `${idx}-container`,
+      class: classes.container,
+      "data-pixel-component": "MpBroadcastContainer"
+    },
+    wrapperProps: {
+      id: `${idx}-wrapper`,
+      class: classes.wrapper,
+      "data-pixel-component": "MpBroadcastWrapper"
+    },
+    iconProps: {
+      id: `${idx}-icon`,
+      name: iconName,
+      size: "md",
+      variant: "fill",
+      class: classes.icon,
+      "data-pixel-component": "MpBroadcastIcon"
+    },
+    contentProps: {
+      id: `${idx}-content`,
+      class: classes.content,
+      "data-pixel-component": "MpBroadcastContent"
+    },
+    textLinkProps: {
+      id: `${idx}-text-link`,
+      as: "a",
+      href: textLinkHref,
+      weight: "semiBold",
+      onClick: (evt) => emit("click-text-link", evt),
+      class: classes.textLink,
+      "data-pixel-component": "MpBroadcastTextLink"
+    },
+    actionProps: {
+      id: `${idx}-action`,
+      variant: "secondary",
+      size: "sm",
+      "aria-labelledby": textAdditionalAction,
+      onClick: (evt) => emit("click-additional-action", evt),
+      class: classes.action,
+      "data-pixel-component": "MpBroadcastAction"
+    },
+    closeProps: {
+      id: `${idx}-close`,
+      leftIcon: "close",
+      variant: "ghost",
+      size: "sm",
+      "aria-label": "Close button",
+      onClick: (evt) => emit("click-close-button", evt),
+      class: classes.close,
+      "data-pixel-component": "MpBroadcastClose"
+    }
+  };
+}
+__name(broadcastConnect, "broadcastConnect");
+
+// src/modules/broadcast.hooks.ts
+var useBroadcast = /* @__PURE__ */ __name((props, emit) => {
+  const context = (0, import_vue.ref)(props);
+  const [value] = import_recipes.broadcastSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.broadcastSlotRecipe)(value);
+  return (0, import_vue.computed)(() => broadcastConnect(context.value, emit, classes));
+}, "useBroadcast");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useBroadcast
+});

package/dist/modules/broadcast.hooks.mjs

@@ -0,0 +1,8 @@
+import {
+  useBroadcast
+} from "../chunk-PTIK2HZP.mjs";
+import "../chunk-JP4CQC7M.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  useBroadcast
+};

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

@@ -0,0 +1,39 @@
+import { BroadcastVariant } from './broadcast.types.mjs';
+import { PropType } from 'vue';
+import '@mekari/pixel3-utils';
+
+declare const broadcastProps: {
+    id: {
+        type: PropType<string | undefined>;
+    };
+    variant: {
+        type: PropType<BroadcastVariant | undefined>;
+        default: string;
+    };
+    content: {
+        type: PropType<string | undefined>;
+    };
+    textLink: {
+        type: PropType<string | undefined>;
+    };
+    textLinkHref: {
+        type: PropType<string | undefined>;
+    };
+    iconName: {
+        type: PropType<string | undefined>;
+    };
+    textAdditionalAction: {
+        type: PropType<string | undefined>;
+    };
+    hasAdditionalAction: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    isClosable: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+};
+declare const broadcastEmits: ("click-additional-action" | "click-text-link" | "click-close-button")[];
+
+export { broadcastEmits, broadcastProps };

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

@@ -0,0 +1,39 @@
+import { BroadcastVariant } from './broadcast.types.js';
+import { PropType } from 'vue';
+import '@mekari/pixel3-utils';
+
+declare const broadcastProps: {
+    id: {
+        type: PropType<string | undefined>;
+    };
+    variant: {
+        type: PropType<BroadcastVariant | undefined>;
+        default: string;
+    };
+    content: {
+        type: PropType<string | undefined>;
+    };
+    textLink: {
+        type: PropType<string | undefined>;
+    };
+    textLinkHref: {
+        type: PropType<string | undefined>;
+    };
+    iconName: {
+        type: PropType<string | undefined>;
+    };
+    textAdditionalAction: {
+        type: PropType<string | undefined>;
+    };
+    hasAdditionalAction: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    isClosable: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+};
+declare const broadcastEmits: ("click-additional-action" | "click-text-link" | "click-close-button")[];
+
+export { broadcastEmits, broadcastProps };