@mekari/pixel3-accordion 0.0.1 → 0.0.2

package/dist/accordion.d.mts

@@ -0,0 +1,44 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpAccordion: vue.DefineComponent<{
+    defaultIndexOpen: {
+        type: vue.PropType<number>;
+    };
+    isAllowMultiple: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isAllowToggle: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isControlled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "change"[], "change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    defaultIndexOpen: {
+        type: vue.PropType<number>;
+    };
+    isAllowMultiple: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isAllowToggle: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isControlled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    isAllowMultiple: boolean;
+    isAllowToggle: boolean;
+    isControlled: boolean;
+}, {}>;
+
+export { MpAccordion };

package/dist/accordion.d.ts

@@ -0,0 +1,44 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpAccordion: vue.DefineComponent<{
+    defaultIndexOpen: {
+        type: vue.PropType<number>;
+    };
+    isAllowMultiple: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isAllowToggle: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isControlled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "change"[], "change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    defaultIndexOpen: {
+        type: vue.PropType<number>;
+    };
+    isAllowMultiple: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isAllowToggle: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isControlled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    isAllowMultiple: boolean;
+    isAllowToggle: boolean;
+    isControlled: boolean;
+}, {}>;
+
+export { MpAccordion };

package/dist/accordion.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,14 +16,6 @@ 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/accordion.tsx
@@ -33,48 +24,78 @@ __export(accordion_exports, {
   MpAccordion: () => MpAccordion
 });
 module.exports = __toCommonJS(accordion_exports);
-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
+  }
+};
+
+// 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");
+
+// 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 () => {
-      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])])]))]);
+      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]);
     };
   }
 });

package/dist/accordion.mjs

@@ -1,6 +1,10 @@
 import {
   MpAccordion
-} from "./chunk-EJFISPTU.mjs";
+} from "./chunk-QK7KPGDG.mjs";
+import "./chunk-CJKS7PMG.mjs";
+import "./chunk-PFYTMT2T.mjs";
+import "./chunk-6FLZM2UD.mjs";
+import "./chunk-QZ7VFGWC.mjs";
 export {
   MpAccordion
 };

package/dist/chunk-2MFH6MEI.mjs

@@ -0,0 +1,56 @@
+import {
+  useAccordionItemContext
+} from "./chunk-PFYTMT2T.mjs";
+import {
+  accordionHeaderProps
+} from "./chunk-6FLZM2UD.mjs";
+
+// src/header.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { css } from "@mekari/pixel3-styled-system/css";
+var MpAccordionHeader = defineComponent({
+  name: "MpAccordionHeader",
+  props: accordionHeaderProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      isExpanded,
+      onToggle,
+      id
+    } = useAccordionItemContext();
+    return () => {
+      const headerClass = 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 _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()]);
+    };
+  }
+});
+
+export {
+  MpAccordionHeader
+};

package/dist/chunk-6FLZM2UD.mjs

@@ -0,0 +1,69 @@
+// 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"
+  }
+};
+
+export {
+  accordionProps,
+  accordionItemProps,
+  accordionHeaderProps,
+  accordionIconProps
+};

package/dist/chunk-CJKS7PMG.mjs

@@ -0,0 +1,61 @@
+import {
+  useAccordionContext
+} from "./chunk-PFYTMT2T.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/useAccordion.ts
+import { ref, computed } from "vue";
+import { useId } from "@mekari/pixel3-utils";
+function useAccordion(props, emit) {
+  const expandedIndex = 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 || useId(4);
+  const _isExpanded = ref(props.isDefaultIsOpen);
+  const isExpanded = 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");
+
+export {
+  useAccordion,
+  useAccordionItem
+};

package/dist/chunk-GSM3VVNB.mjs

@@ -0,0 +1,37 @@
+import {
+  useAccordionItemContext
+} from "./chunk-PFYTMT2T.mjs";
+import {
+  accordionIconProps
+} from "./chunk-6FLZM2UD.mjs";
+
+// src/icon.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { MpIcon } from "@mekari/pixel3-icon";
+var MpAccordionIcon = defineComponent({
+  name: "MpAccordionIcon",
+  props: accordionIconProps,
+  setup(props) {
+    const {
+      isExpanded
+    } = useAccordionItemContext();
+    return () => {
+      return _createVNode(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);
+    };
+  }
+});
+
+export {
+  MpAccordionIcon
+};

package/dist/chunk-KJJ7ZOJB.mjs

@@ -0,0 +1,49 @@
+import {
+  useAccordionItem
+} from "./chunk-CJKS7PMG.mjs";
+import {
+  AccordionItemProvider
+} from "./chunk-PFYTMT2T.mjs";
+import {
+  accordionItemProps
+} from "./chunk-6FLZM2UD.mjs";
+
+// src/item.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { css } from "@mekari/pixel3-styled-system/css";
+var MpAccordionItem = defineComponent({
+  name: "MpAccordionItem",
+  props: accordionItemProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      isExpanded,
+      onToggle,
+      id
+    } = useAccordionItem(props);
+    AccordionItemProvider({
+      isExpanded,
+      onToggle,
+      id
+    });
+    return () => {
+      return _createVNode("div", {
+        "data-pixel-component": "MpAccordionItem",
+        "class": css({
+          borderBottomWidth: "1px",
+          borderColor: "gray.100",
+          _last: {
+            borderBottomWidth: "1px",
+            borderColor: "gray.100"
+          }
+        })
+      }, [slots.default()]);
+    };
+  }
+});
+
+export {
+  MpAccordionItem
+};

package/dist/chunk-PFYTMT2T.mjs

@@ -0,0 +1,11 @@
+// src/modules/accordion.context.ts
+import { usePixelCreateContext } from "@mekari/pixel3-utils";
+var [AccordionProvider, useAccordionContext] = usePixelCreateContext("AccordionContext");
+var [AccordionItemProvider, useAccordionItemContext] = usePixelCreateContext("AccordionItemContext");
+
+export {
+  AccordionProvider,
+  useAccordionContext,
+  AccordionItemProvider,
+  useAccordionItemContext
+};

package/dist/chunk-QK7KPGDG.mjs

@@ -0,0 +1,47 @@
+import {
+  useAccordion
+} from "./chunk-CJKS7PMG.mjs";
+import {
+  AccordionProvider
+} from "./chunk-PFYTMT2T.mjs";
+import {
+  accordionProps
+} from "./chunk-6FLZM2UD.mjs";
+
+// src/accordion.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent, toRefs, cloneVNode } from "vue";
+var MpAccordion = defineComponent({
+  name: "MpAccordion",
+  props: accordionProps,
+  emits: ["change"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      expandedIndex,
+      onAccordionChange
+    } = useAccordion(props, emit);
+    AccordionProvider({
+      props: toRefs(props),
+      expandedIndex,
+      onAccordionChange
+    });
+    return () => {
+      const children = slots.default ? slots.default() : [];
+      const clone = children.map((node, index) => {
+        return cloneVNode(node, {
+          index
+        });
+      });
+      return _createVNode("div", {
+        "data-pixel-component": "MpAccordion"
+      }, [clone]);
+    };
+  }
+});
+
+export {
+  MpAccordion
+};

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/chunk-SZIA7VIC.mjs

@@ -0,0 +1,38 @@
+import {
+  useAccordionItemContext
+} from "./chunk-PFYTMT2T.mjs";
+
+// src/panel.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { MpCollapse } from "@mekari/pixel3-collapse";
+import { css } from "@mekari/pixel3-styled-system/css";
+var MpAccordionPanel = defineComponent({
+  name: "MpAccordionPanel",
+  setup(_props, {
+    slots
+  }) {
+    const {
+      isExpanded,
+      id
+    } = useAccordionItemContext();
+    return () => {
+      return _createVNode(MpCollapse, {
+        "isOpen": isExpanded.value
+      }, {
+        default: () => [_createVNode("div", {
+          "data-pixel-component": "MpAccordionPanel",
+          "id": `accordin-panel-${id}`,
+          "aria-labelledby": `accordion-header-${id}`,
+          "class": css({
+            py: 3
+          })
+        }, [slots.default()])]
+      });
+    };
+  }
+});
+
+export {
+  MpAccordionPanel
+};

package/dist/header.d.mts

@@ -0,0 +1,18 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpAccordionHeader: vue.DefineComponent<{
+    isClickable: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    isClickable: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>>, {
+    isClickable: boolean;
+}, {}>;
+
+export { MpAccordionHeader };

package/dist/header.d.ts

@@ -0,0 +1,18 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpAccordionHeader: vue.DefineComponent<{
+    isClickable: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    isClickable: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>>, {
+    isClickable: boolean;
+}, {}>;
+
+export { MpAccordionHeader };