@mekari/pixel3-accordion 0.0.1 → 0.0.2

package/dist/header.js

@@ -0,0 +1,88 @@
+"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/header.tsx
+var header_exports = {};
+__export(header_exports, {
+  MpAccordionHeader: () => MpAccordionHeader
+});
+module.exports = __toCommonJS(header_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+
+// src/modules/accordion.context.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [AccordionProvider, useAccordionContext] = (0, import_pixel3_utils.usePixelCreateContext)("AccordionContext");
+var [AccordionItemProvider, useAccordionItemContext] = (0, import_pixel3_utils.usePixelCreateContext)("AccordionItemContext");
+
+// src/modules/accordion.props.ts
+var accordionHeaderProps = {
+  isClickable: {
+    type: Boolean,
+    default: true
+  }
+};
+
+// src/header.tsx
+var MpAccordionHeader = (0, import_vue2.defineComponent)({
+  name: "MpAccordionHeader",
+  props: accordionHeaderProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      isExpanded,
+      onToggle,
+      id
+    } = useAccordionItemContext();
+    return () => {
+      const headerClass = (0, import_css.css)({
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        outline: 0,
+        gap: 4,
+        transition: "all 0.2s",
+        py: 3,
+        fontWeight: "semiBold",
+        fontSize: "md",
+        color: "dark",
+        _disabled: {
+          opacity: "0.4",
+          cursor: "not-allowed"
+        },
+        cursor: props.isClickable ? "pointer" : "default"
+      });
+      return (0, import_vue.createVNode)("button", {
+        "data-pixel-component": "MpAccordionHeader",
+        "type": "button",
+        "id": `accordion-header-${id}`,
+        "aria-expanded": isExpanded.value,
+        "aria-controls": `accordion-panel-${id}`,
+        "class": headerClass,
+        "onClick": onToggle
+      }, [slots.default()]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpAccordionHeader
+});

package/dist/header.mjs

@@ -0,0 +1,9 @@
+import {
+  MpAccordionHeader
+} from "./chunk-2MFH6MEI.mjs";
+import "./chunk-PFYTMT2T.mjs";
+import "./chunk-6FLZM2UD.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpAccordionHeader
+};

package/dist/icon.d.mts

@@ -0,0 +1,45 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpAccordionIcon: vue.DefineComponent<{
+    name: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    size: {
+        type: vue.PropType<"sm" | "md">;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    variant: {
+        type: vue.PropType<"fill" | "outline" | "duotone">;
+        default: string;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    name: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    size: {
+        type: vue.PropType<"sm" | "md">;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    variant: {
+        type: vue.PropType<"fill" | "outline" | "duotone">;
+        default: string;
+    };
+}>>, {
+    name: string;
+    color: string;
+    size: "sm" | "md";
+    variant: "fill" | "outline" | "duotone";
+}, {}>;
+
+export { MpAccordionIcon };

package/dist/icon.d.ts

@@ -0,0 +1,45 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpAccordionIcon: vue.DefineComponent<{
+    name: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    size: {
+        type: vue.PropType<"sm" | "md">;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    variant: {
+        type: vue.PropType<"fill" | "outline" | "duotone">;
+        default: string;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    name: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    size: {
+        type: vue.PropType<"sm" | "md">;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    variant: {
+        type: vue.PropType<"fill" | "outline" | "duotone">;
+        default: string;
+    };
+}>>, {
+    name: string;
+    color: string;
+    size: "sm" | "md";
+    variant: "fill" | "outline" | "duotone";
+}, {}>;
+
+export { MpAccordionIcon };

package/dist/icon.js

@@ -0,0 +1,81 @@
+"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/icon.tsx
+var icon_exports = {};
+__export(icon_exports, {
+  MpAccordionIcon: () => MpAccordionIcon
+});
+module.exports = __toCommonJS(icon_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_pixel3_icon = require("@mekari/pixel3-icon");
+
+// src/modules/accordion.context.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [AccordionProvider, useAccordionContext] = (0, import_pixel3_utils.usePixelCreateContext)("AccordionContext");
+var [AccordionItemProvider, useAccordionItemContext] = (0, import_pixel3_utils.usePixelCreateContext)("AccordionItemContext");
+
+// src/modules/accordion.props.ts
+var accordionIconProps = {
+  name: {
+    type: String,
+    default: "caret-down"
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  color: {
+    type: String,
+    default: "gray.600"
+  },
+  variant: {
+    type: String,
+    default: "outline"
+  }
+};
+
+// src/icon.tsx
+var MpAccordionIcon = (0, import_vue2.defineComponent)({
+  name: "MpAccordionIcon",
+  props: accordionIconProps,
+  setup(props) {
+    const {
+      isExpanded
+    } = useAccordionItemContext();
+    return () => {
+      return (0, import_vue.createVNode)(import_pixel3_icon.MpIcon, {
+        "name": props.name,
+        "size": props.size,
+        "color": props.color,
+        "variant": props.variant,
+        "style": {
+          transform: isExpanded.value ? "rotate(-180deg)" : "rotate(0)",
+          transition: "transform 0.2s",
+          transformOrigin: "center"
+        }
+      }, null);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpAccordionIcon
+});

package/dist/icon.mjs

@@ -0,0 +1,9 @@
+import {
+  MpAccordionIcon
+} from "./chunk-GSM3VVNB.mjs";
+import "./chunk-PFYTMT2T.mjs";
+import "./chunk-6FLZM2UD.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpAccordionIcon
+};

package/dist/index.d.mts

@@ -0,0 +1,7 @@
+export { MpAccordion } from './accordion.mjs';
+export { MpAccordionItem } from './item.mjs';
+export { MpAccordionHeader } from './header.mjs';
+export { MpAccordionPanel } from './panel.mjs';
+export { MpAccordionIcon } from './icon.mjs';
+import 'vue/jsx-runtime';
+import 'vue';

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { MpAccordion } from './accordion.js';
+export { MpAccordionItem } from './item.js';
+export { MpAccordionHeader } from './header.js';
+export { MpAccordionPanel } from './panel.js';
+export { MpAccordionIcon } from './icon.js';
+import 'vue/jsx-runtime';
+import 'vue';

package/dist/index.js

@@ -1,10 +1,9 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 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 });
@@ -17,70 +16,317 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/index.tsx
+// src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  MpAccordion: () => MpAccordion
+  MpAccordion: () => MpAccordion,
+  MpAccordionHeader: () => MpAccordionHeader,
+  MpAccordionIcon: () => MpAccordionIcon,
+  MpAccordionItem: () => MpAccordionItem,
+  MpAccordionPanel: () => MpAccordionPanel
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/accordion.tsx
-var import_vue = require("vue");
-var accordion = __toESM(require("@zag-js/accordion"));
-var import_vue2 = require("@zag-js/vue");
+var import_vue2 = require("vue");
 var import_vue3 = require("vue");
-var import_recipes = require("@mekari/pixel3-styled-system/recipes");
-var data = [{
-  title: "Watercraft",
-  content: "Sample accordion content"
-}, {
-  title: "Automobiles",
-  content: "Sample accordion content"
-}, {
-  title: "Aircrafts",
-  content: "Sample accordion content"
-}];
-var classNames = (0, import_recipes.accordion)();
+
+// src/modules/accordion.context.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [AccordionProvider, useAccordionContext] = (0, import_pixel3_utils.usePixelCreateContext)("AccordionContext");
+var [AccordionItemProvider, useAccordionItemContext] = (0, import_pixel3_utils.usePixelCreateContext)("AccordionItemContext");
+
+// src/modules/accordion.props.ts
+var accordionProps = {
+  defaultIndexOpen: {
+    type: Number
+  },
+  isAllowMultiple: {
+    type: Boolean,
+    default: false
+  },
+  isAllowToggle: {
+    type: Boolean,
+    default: false
+  },
+  isControlled: {
+    type: Boolean,
+    default: false
+  }
+};
+var accordionItemProps = {
+  id: {
+    type: String
+  },
+  index: {
+    type: Number
+  },
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  isDefaultIsOpen: {
+    type: Boolean,
+    default: false
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  }
+};
+var accordionHeaderProps = {
+  isClickable: {
+    type: Boolean,
+    default: true
+  }
+};
+var accordionIconProps = {
+  name: {
+    type: String,
+    default: "caret-down"
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  color: {
+    type: String,
+    default: "gray.600"
+  },
+  variant: {
+    type: String,
+    default: "outline"
+  }
+};
+
+// src/modules/useAccordion.ts
+var import_vue = require("vue");
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+function useAccordion(props, emit) {
+  const expandedIndex = (0, import_vue.ref)(props.defaultIndexOpen);
+  function onAccordionChange(index, isExpanded) {
+    emit("change", index, isExpanded);
+    expandedIndex.value = index;
+  }
+  __name(onAccordionChange, "onAccordionChange");
+  return {
+    expandedIndex,
+    onAccordionChange
+  };
+}
+__name(useAccordion, "useAccordion");
+function useAccordionItem(props) {
+  const {
+    props: rootProps,
+    expandedIndex,
+    onAccordionChange
+  } = useAccordionContext();
+  const {
+    isAllowMultiple,
+    isControlled
+  } = rootProps;
+  const id = props.id || (0, import_pixel3_utils2.useId)(4);
+  const _isExpanded = (0, import_vue.ref)(props.isDefaultIsOpen);
+  const isExpanded = (0, import_vue.computed)(() => {
+    if (isControlled.value)
+      return props.isOpen;
+    if (!isAllowMultiple.value)
+      return props.index === expandedIndex.value;
+    return _isExpanded.value;
+  });
+  function onToggle() {
+    if (isAllowMultiple.value) {
+      _isExpanded.value = !_isExpanded.value;
+    }
+    onAccordionChange(props.index, _isExpanded.value);
+  }
+  __name(onToggle, "onToggle");
+  return {
+    isExpanded,
+    onToggle,
+    id
+  };
+}
+__name(useAccordionItem, "useAccordionItem");
+
+// src/accordion.tsx
 var MpAccordion = (0, import_vue3.defineComponent)({
-  // eslint-disable-next-line vue/multi-word-component-names
-  name: "Accordion",
-  setup() {
-    const [state, send] = (0, import_vue2.useMachine)(accordion.machine({
-      id: "1",
-      multiple: true
-    }));
-    const apiRef = (0, import_vue3.computed)(() => accordion.connect(state.value, send, import_vue2.normalizeProps));
-    console.log(apiRef.value);
+  name: "MpAccordion",
+  props: accordionProps,
+  emits: ["change"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      expandedIndex,
+      onAccordionChange
+    } = useAccordion(props, emit);
+    AccordionProvider({
+      props: (0, import_vue3.toRefs)(props),
+      expandedIndex,
+      onAccordionChange
+    });
+    return () => {
+      const children = slots.default ? slots.default() : [];
+      const clone = children.map((node, index) => {
+        return (0, import_vue3.cloneVNode)(node, {
+          index
+        });
+      });
+      return (0, import_vue2.createVNode)("div", {
+        "data-pixel-component": "MpAccordion"
+      }, [clone]);
+    };
+  }
+});
+
+// src/item.tsx
+var import_vue4 = require("vue");
+var import_vue5 = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var MpAccordionItem = (0, import_vue5.defineComponent)({
+  name: "MpAccordionItem",
+  props: accordionItemProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      isExpanded,
+      onToggle,
+      id
+    } = useAccordionItem(props);
+    AccordionItemProvider({
+      isExpanded,
+      onToggle,
+      id
+    });
+    return () => {
+      return (0, import_vue4.createVNode)("div", {
+        "data-pixel-component": "MpAccordionItem",
+        "class": (0, import_css.css)({
+          borderBottomWidth: "1px",
+          borderColor: "gray.100",
+          _last: {
+            borderBottomWidth: "1px",
+            borderColor: "gray.100"
+          }
+        })
+      }, [slots.default()]);
+    };
+  }
+});
+
+// src/header.tsx
+var import_vue6 = require("vue");
+var import_vue7 = require("vue");
+var import_css2 = require("@mekari/pixel3-styled-system/css");
+var MpAccordionHeader = (0, import_vue7.defineComponent)({
+  name: "MpAccordionHeader",
+  props: accordionHeaderProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      isExpanded,
+      onToggle,
+      id
+    } = useAccordionItemContext();
+    return () => {
+      const headerClass = (0, import_css2.css)({
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        outline: 0,
+        gap: 4,
+        transition: "all 0.2s",
+        py: 3,
+        fontWeight: "semiBold",
+        fontSize: "md",
+        color: "dark",
+        _disabled: {
+          opacity: "0.4",
+          cursor: "not-allowed"
+        },
+        cursor: props.isClickable ? "pointer" : "default"
+      });
+      return (0, import_vue6.createVNode)("button", {
+        "data-pixel-component": "MpAccordionHeader",
+        "type": "button",
+        "id": `accordion-header-${id}`,
+        "aria-expanded": isExpanded.value,
+        "aria-controls": `accordion-panel-${id}`,
+        "class": headerClass,
+        "onClick": onToggle
+      }, [slots.default()]);
+    };
+  }
+});
+
+// src/panel.tsx
+var import_vue8 = require("vue");
+var import_vue9 = require("vue");
+var import_pixel3_collapse = require("@mekari/pixel3-collapse");
+var import_css3 = require("@mekari/pixel3-styled-system/css");
+var MpAccordionPanel = (0, import_vue9.defineComponent)({
+  name: "MpAccordionPanel",
+  setup(_props, {
+    slots
+  }) {
+    const {
+      isExpanded,
+      id
+    } = useAccordionItemContext();
+    return () => {
+      return (0, import_vue8.createVNode)(import_pixel3_collapse.MpCollapse, {
+        "isOpen": isExpanded.value
+      }, {
+        default: () => [(0, import_vue8.createVNode)("div", {
+          "data-pixel-component": "MpAccordionPanel",
+          "id": `accordin-panel-${id}`,
+          "aria-labelledby": `accordion-header-${id}`,
+          "class": (0, import_css3.css)({
+            py: 3
+          })
+        }, [slots.default()])]
+      });
+    };
+  }
+});
+
+// src/icon.tsx
+var import_vue10 = require("vue");
+var import_vue11 = require("vue");
+var import_pixel3_icon = require("@mekari/pixel3-icon");
+var MpAccordionIcon = (0, import_vue11.defineComponent)({
+  name: "MpAccordionIcon",
+  props: accordionIconProps,
+  setup(props) {
+    const {
+      isExpanded
+    } = useAccordionItemContext();
     return () => {
-      return (0, import_vue.createVNode)("div", (0, import_vue.mergeProps)(api.rootProps, {
-        "class": classNames.root
-      }), [data.map((item) => (0, import_vue.createVNode)("div", (0, import_vue.mergeProps)(api.getItemProps({
-        value: item.title
-      }), {
-        "class": classNames.item
-      }), [(0, import_vue.createVNode)("button", (0, import_vue.mergeProps)(api.getItemTriggerProps({
-        value: item.title
-      }), {
-        "class": classNames.trigger
-      }), [item.title, (0, import_vue.createVNode)("div", null, [(0, import_vue.createTextVNode)("Item Indicator")])]), (0, import_vue.createVNode)("div", (0, import_vue.mergeProps)(api.getItemContentProps({
-        value: item.title
-      }), {
-        "class": classNames.content
-      }), [(0, import_vue.createVNode)("div", null, [item.content])])]))]);
+      return (0, import_vue10.createVNode)(import_pixel3_icon.MpIcon, {
+        "name": props.name,
+        "size": props.size,
+        "color": props.color,
+        "variant": props.variant,
+        "style": {
+          transform: isExpanded.value ? "rotate(-180deg)" : "rotate(0)",
+          transition: "transform 0.2s",
+          transformOrigin: "center"
+        }
+      }, null);
     };
   }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  MpAccordion
+  MpAccordion,
+  MpAccordionHeader,
+  MpAccordionIcon,
+  MpAccordionItem,
+  MpAccordionPanel
 });