reka-ui 0.0.2 → 1.0.0-alpha.10

package/README.md

@@ -1,31 +1,28 @@
 <br />
 <p align="center">
-  <a href="https://github.com/radix-vue/radix-vue">
+  <a href="https://github.com/unovue/reka-ui">
     <img src="https://reka-ui.com/logo.svg" alt="Logo" width="150" />
   </a>
 
 <h1 align="center">
-Radix Vue
+Reka UI
 </h1>
-<p align="center">
-An unofficial Vue port of Radix UI. <br>
-Radix is an unstyled, customisable UI Library with built in accessibility for building top quality design systems.
 
+<p align="center">
+Craft accessible web apps with <a href="https://vuejs.org/">Vue</a>.
 <p>
 
 <p align="center">
-<a href='https://github.com/radix-vue/radix-vue/actions/workflows/test.yml'>
-</a>
-<a href="https://www.npmjs.com/package/radix-vue" target="__blank"><img src="https://img.shields.io/npm/v/radix-vue?style=flat&colorA=002438&colorB=41c399" alt="NPM version"></a>
-<a href="https://www.npmjs.com/package/radix-vue" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/radix-vue?flat&colorA=002438&colorB=41c399"></a>
-<a href="https://github.com/radix-vue/radix-vue" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/radix-vue/radix-vue?flat&colorA=002438&colorB=41c399"></a>
+<a href="https://www.npmjs.com/package/reka-ui" target="__blank"><img src="https://img.shields.io/npm/v/reka-ui?style=flat&colorA=002438&colorB=41c399" alt="NPM version"></a>
+<a href="https://www.npmjs.com/package/reka-ui" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/reka-ui?flat&colorA=002438&colorB=41c399"></a>
+<a href="https://github.com/unovue/reka-ui" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/unovue/reka-ui?flat&colorA=002438&colorB=41c399"></a>
 </p>
 
 <p align="center">
-<a href="https://chat.radix-vue.com"><b>Get involved!</b></a>
+<a href="https://chat.unovue.com"><b>Get involved!</b></a>
 </p>
 <p align="center">
- <a href="https://radix-vue.com">Documentation</a> | <a href="https://reka-ui.com/overview/getting-started.html">Getting Started</a> | <a href="https://reka-ui.com/">Examples</a> | <a href="https://reka-ui.com/overview/introduction.html">Why Radix Vue?</a>
+ <a href="https://reka-ui.com">Documentation</a> | <a href="https://reka-ui.com/docs/overview/getting-started">Getting Started</a> | <a href="https://reka-ui.com/examples">Examples</a> | <a href="https://reka-ui.com/docs/overview/introduction">Why Reka UI?</a>
 </p>
 
 ![hero image](https://reka-ui.com/og.jpg)
@@ -34,22 +31,22 @@ Radix is an unstyled, customisable UI Library with built in accessibility for bu
 ## Installation
 
 ```bash
-pnpm add radix-vue
+pnpm add reka-ui
 ```
 ```bash
-npm install radix-vue
+npm install reka-ui
 ```
 ```bash
-yarn add radix-vue
+yarn add reka-ui
 ```
 
 ## Documentation
 
-For full documentation, visit [radix-vue.com](https://radix-vue.com).
+For full documentation, visit [reka-ui.com](https://reka-ui.com).
 
 ## Releases
 
-For changelog, visit [releases](https://github.com/radix-vue/radix-vue/releases).
+For changelog, visit [releases](https://github.com/unovue/reka-ui/releases).
 
 ## Contributing
 
@@ -61,6 +58,7 @@ We would love to have your contributions! All PRs all welcomed! We need help bui
 
 1. Clone the repo
 2. Run `pnpm i`
+3. Run `pnpm build` to run build `reka-ui` locally
 3. Run `pnpm docs:dev` to run vitepress
 4. Open `http://localhost:5173`
 
@@ -70,20 +68,13 @@ We would love to have your contributions! All PRs all welcomed! We need help bui
 2. Run `pnpm i`
 3. Run `pnpm story:dev` to run histoire (storybook)
 4. Open `http://localhost:6006`
-
-## Authors
-
-- [Khairul Haaziq](https://github.com/khairulhaaziq)
-- [Mujahid Anuar](https://github.com/mujahidfa)
-- [Zernonia](https://github.com/zernonia)
+5. Run `pnpm test` to test changes
 
 ## Credits
 
 All credits go to these open-source works and resources
 
-- [Radix UI](https://radix-ui.com) for doing all the hard work to make sure components are accessible
-- [Floating UI](https://floating-ui.com) for creating powerful components that as the base of many Radix Vue components
-- [VueUse](https://vueuse.org) for providing many useful utilities.
-- [Ark UI](https://ark-ui.com) for the `<Primitive>` component
-- [Radix Svelte](https://radix-svelte.com)
+- [Radix UI](https://radix-ui.com)
+- [React Spectrum](https://react-spectrum.adobe.com/index.html)
+- [Floating UI](https://floating-ui.com)
 - [Headless UI](https://headlessui.com)

package/dist/Accordion/AccordionContent.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+const vue = require('vue');
+require('@vueuse/core');
+const Accordion_AccordionItem = require('./AccordionItem.cjs');
+const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
+const Collapsible_CollapsibleContent = require('../Collapsible/CollapsibleContent.cjs');
+const Accordion_AccordionRoot = require('./AccordionRoot.cjs');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "AccordionContent",
+  props: {
+    forceMount: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const rootContext = Accordion_AccordionRoot.injectAccordionRootContext();
+    const itemContext = Accordion_AccordionItem.injectAccordionItemContext();
+    shared_useForwardExpose.useForwardExpose();
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(Collapsible_CollapsibleContent._sfc_main), {
+        role: "region",
+        "as-child": props.asChild,
+        "force-mount": props.forceMount,
+        "aria-labelledby": vue.unref(itemContext).triggerId,
+        "data-state": vue.unref(itemContext).dataState.value,
+        "data-disabled": vue.unref(itemContext).dataDisabled.value,
+        "data-orientation": vue.unref(rootContext).orientation,
+        style: { "--reka-accordion-content-width": "var(--reka-collapsible-content-width)", "--reka-accordion-content-height": "var(--reka-collapsible-content-height)" },
+        onContentFound: _cache[0] || (_cache[0] = ($event) => vue.unref(rootContext).changeModelValue(vue.unref(itemContext).value.value))
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["as-child", "force-mount", "aria-labelledby", "data-state", "data-disabled", "data-orientation"]);
+    };
+  }
+});
+
+exports._sfc_main = _sfc_main;
+//# sourceMappingURL=AccordionContent.cjs.map

package/dist/Accordion/AccordionContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContent.cjs","sources":["../../src/Accordion/AccordionContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { CollapsibleContentProps } from '../Collapsible'\n\nexport interface AccordionContentProps extends CollapsibleContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { useForwardExpose } from '@/shared'\nimport { CollapsibleContent } from '../Collapsible'\nimport { injectAccordionItemContext } from './AccordionItem.vue'\nimport { injectAccordionRootContext } from './AccordionRoot.vue'\n\nconst props = defineProps<AccordionContentProps>()\n\nconst rootContext = injectAccordionRootContext()\nconst itemContext = injectAccordionItemContext()\n\nuseForwardExpose()\n</script>\n\n<template>\n  <CollapsibleContent\n    role=\"region\"\n    :as-child=\"props.asChild\"\n    :force-mount=\"props.forceMount\"\n    :aria-labelledby=\"itemContext.triggerId\"\n    :data-state=\"itemContext.dataState.value\"\n    :data-disabled=\"itemContext.dataDisabled.value\"\n    :data-orientation=\"rootContext.orientation\"\n    style=\"\n      --reka-accordion-content-width: var(--reka-collapsible-content-width);\n      --reka-accordion-content-height: var(--reka-collapsible-content-height);\n    \"\n    @content-found=\"rootContext.changeModelValue(itemContext.value.value)\"\n  >\n    <slot />\n  </CollapsibleContent>\n</template>\n"],"names":["injectAccordionRootContext","injectAccordionItemContext","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,cAAcA,kDAA2B,EAAA;AAC/C,IAAA,MAAM,cAAcC,kDAA2B,EAAA;AAE/C,IAAiBC,wCAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Accordion/AccordionContent.js

@@ -0,0 +1,42 @@
+import { defineComponent, openBlock, createBlock, unref, withCtx, renderSlot } from 'vue';
+import '@vueuse/core';
+import { i as injectAccordionItemContext } from './AccordionItem.js';
+import { u as useForwardExpose } from '../shared/useForwardExpose.js';
+import { _ as _sfc_main$1 } from '../Collapsible/CollapsibleContent.js';
+import { i as injectAccordionRootContext } from './AccordionRoot.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AccordionContent",
+  props: {
+    forceMount: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const rootContext = injectAccordionRootContext();
+    const itemContext = injectAccordionItemContext();
+    useForwardExpose();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), {
+        role: "region",
+        "as-child": props.asChild,
+        "force-mount": props.forceMount,
+        "aria-labelledby": unref(itemContext).triggerId,
+        "data-state": unref(itemContext).dataState.value,
+        "data-disabled": unref(itemContext).dataDisabled.value,
+        "data-orientation": unref(rootContext).orientation,
+        style: { "--reka-accordion-content-width": "var(--reka-collapsible-content-width)", "--reka-accordion-content-height": "var(--reka-collapsible-content-height)" },
+        onContentFound: _cache[0] || (_cache[0] = ($event) => unref(rootContext).changeModelValue(unref(itemContext).value.value))
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["as-child", "force-mount", "aria-labelledby", "data-state", "data-disabled", "data-orientation"]);
+    };
+  }
+});
+
+export { _sfc_main as _ };
+//# sourceMappingURL=AccordionContent.js.map

package/dist/Accordion/AccordionContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContent.js","sources":["../../src/Accordion/AccordionContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { CollapsibleContentProps } from '../Collapsible'\n\nexport interface AccordionContentProps extends CollapsibleContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { useForwardExpose } from '@/shared'\nimport { CollapsibleContent } from '../Collapsible'\nimport { injectAccordionItemContext } from './AccordionItem.vue'\nimport { injectAccordionRootContext } from './AccordionRoot.vue'\n\nconst props = defineProps<AccordionContentProps>()\n\nconst rootContext = injectAccordionRootContext()\nconst itemContext = injectAccordionItemContext()\n\nuseForwardExpose()\n</script>\n\n<template>\n  <CollapsibleContent\n    role=\"region\"\n    :as-child=\"props.asChild\"\n    :force-mount=\"props.forceMount\"\n    :aria-labelledby=\"itemContext.triggerId\"\n    :data-state=\"itemContext.dataState.value\"\n    :data-disabled=\"itemContext.dataDisabled.value\"\n    :data-orientation=\"rootContext.orientation\"\n    style=\"\n      --reka-accordion-content-width: var(--reka-collapsible-content-width);\n      --reka-accordion-content-height: var(--reka-collapsible-content-height);\n    \"\n    @content-found=\"rootContext.changeModelValue(itemContext.value.value)\"\n  >\n    <slot />\n  </CollapsibleContent>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,cAAc,0BAA2B,EAAA;AAC/C,IAAA,MAAM,cAAc,0BAA2B,EAAA;AAE/C,IAAiB,gBAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Accordion/AccordionHeader.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+const vue = require('vue');
+const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
+const Primitive_Primitive = require('../Primitive/Primitive.cjs');
+const Accordion_AccordionRoot = require('./AccordionRoot.cjs');
+const Accordion_AccordionItem = require('./AccordionItem.cjs');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "AccordionHeader",
+  props: {
+    asChild: { type: Boolean },
+    as: { default: "h3" }
+  },
+  setup(__props) {
+    const props = __props;
+    const rootContext = Accordion_AccordionRoot.injectAccordionRootContext();
+    const itemContext = Accordion_AccordionItem.injectAccordionItemContext();
+    shared_useForwardExpose.useForwardExpose();
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(Primitive_Primitive.Primitive), {
+        as: props.as,
+        "as-child": props.asChild,
+        "data-orientation": vue.unref(rootContext).orientation,
+        "data-state": vue.unref(itemContext).dataState.value,
+        "data-disabled": vue.unref(itemContext).dataDisabled.value
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["as", "as-child", "data-orientation", "data-state", "data-disabled"]);
+    };
+  }
+});
+
+exports._sfc_main = _sfc_main;
+//# sourceMappingURL=AccordionHeader.cjs.map

package/dist/Accordion/AccordionHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionHeader.cjs","sources":["../../src/Accordion/AccordionHeader.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface AccordionHeaderProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { useForwardExpose } from '@/shared'\nimport { injectAccordionItemContext } from './AccordionItem.vue'\nimport { injectAccordionRootContext } from './AccordionRoot.vue'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<AccordionHeaderProps>(), {\n  as: 'h3',\n})\n\nconst rootContext = injectAccordionRootContext()\nconst itemContext = injectAccordionItemContext()\n\nuseForwardExpose()\n</script>\n\n<template>\n  <Primitive\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :data-orientation=\"rootContext.orientation\"\n    :data-state=\"itemContext.dataState.value\"\n    :data-disabled=\"itemContext.dataDisabled.value\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectAccordionRootContext","injectAccordionItemContext","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,kDAA2B,EAAA;AAC/C,IAAA,MAAM,cAAcC,kDAA2B,EAAA;AAE/C,IAAiBC,wCAAA,EAAA;;;;;;;;;;;;;;;;;;;;"}

package/dist/Accordion/AccordionHeader.js

@@ -0,0 +1,36 @@
+import { defineComponent, openBlock, createBlock, unref, withCtx, renderSlot } from 'vue';
+import { u as useForwardExpose } from '../shared/useForwardExpose.js';
+import { P as Primitive } from '../Primitive/Primitive.js';
+import { i as injectAccordionRootContext } from './AccordionRoot.js';
+import { i as injectAccordionItemContext } from './AccordionItem.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AccordionHeader",
+  props: {
+    asChild: { type: Boolean },
+    as: { default: "h3" }
+  },
+  setup(__props) {
+    const props = __props;
+    const rootContext = injectAccordionRootContext();
+    const itemContext = injectAccordionItemContext();
+    useForwardExpose();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), {
+        as: props.as,
+        "as-child": props.asChild,
+        "data-orientation": unref(rootContext).orientation,
+        "data-state": unref(itemContext).dataState.value,
+        "data-disabled": unref(itemContext).dataDisabled.value
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["as", "as-child", "data-orientation", "data-state", "data-disabled"]);
+    };
+  }
+});
+
+export { _sfc_main as _ };
+//# sourceMappingURL=AccordionHeader.js.map

package/dist/Accordion/AccordionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionHeader.js","sources":["../../src/Accordion/AccordionHeader.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface AccordionHeaderProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { useForwardExpose } from '@/shared'\nimport { injectAccordionItemContext } from './AccordionItem.vue'\nimport { injectAccordionRootContext } from './AccordionRoot.vue'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<AccordionHeaderProps>(), {\n  as: 'h3',\n})\n\nconst rootContext = injectAccordionRootContext()\nconst itemContext = injectAccordionItemContext()\n\nuseForwardExpose()\n</script>\n\n<template>\n  <Primitive\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :data-orientation=\"rootContext.orientation\"\n    :data-state=\"itemContext.dataState.value\"\n    :data-disabled=\"itemContext.dataDisabled.value\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,0BAA2B,EAAA;AAC/C,IAAA,MAAM,cAAc,0BAA2B,EAAA;AAE/C,IAAiB,gBAAA,EAAA;;;;;;;;;;;;;;;;;;;;"}

package/dist/Accordion/AccordionItem.cjs

@@ -0,0 +1,85 @@
+'use strict';
+
+const vue = require('vue');
+const Accordion_AccordionRoot = require('./AccordionRoot.cjs');
+const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
+const Collapsible_CollapsibleRoot = require('../Collapsible/CollapsibleRoot.cjs');
+const shared_createContext = require('../shared/createContext.cjs');
+const shared_useArrowNavigation = require('../shared/useArrowNavigation.cjs');
+
+const [injectAccordionItemContext, provideAccordionItemContext] = shared_createContext.createContext("AccordionItem");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "AccordionItem",
+  props: {
+    disabled: { type: Boolean },
+    value: {},
+    unmountOnHide: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const rootContext = Accordion_AccordionRoot.injectAccordionRootContext();
+    const open = vue.computed(
+      () => rootContext.isSingle.value ? props.value === rootContext.modelValue.value : Array.isArray(rootContext.modelValue.value) && rootContext.modelValue.value.includes(props.value)
+    );
+    const disabled = vue.computed(() => {
+      return rootContext.disabled.value || props.disabled;
+    });
+    const dataDisabled = vue.computed(() => disabled.value ? "" : undefined);
+    const dataState = vue.computed(
+      () => open.value ? "open" /* Open */ : "closed" /* Closed */
+    );
+    __expose({ open, dataDisabled });
+    const { currentRef, currentElement } = shared_useForwardExpose.useForwardExpose();
+    provideAccordionItemContext({
+      open,
+      dataState,
+      disabled,
+      dataDisabled,
+      triggerId: "",
+      currentRef,
+      currentElement,
+      value: vue.computed(() => props.value)
+    });
+    function handleArrowKey(e) {
+      const target = e.target;
+      const allCollectionItems = Array.from(rootContext.parentElement.value?.querySelectorAll("[data-reka-collection-item]") ?? []);
+      const collectionItemIndex = allCollectionItems.findIndex((item) => item === target);
+      if (collectionItemIndex === -1)
+        return null;
+      shared_useArrowNavigation.useArrowNavigation(
+        e,
+        currentElement.value,
+        rootContext.parentElement.value,
+        {
+          arrowKeyOptions: rootContext.orientation,
+          dir: rootContext.direction.value,
+          focus: true
+        }
+      );
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(Collapsible_CollapsibleRoot._sfc_main), {
+        "data-orientation": vue.unref(rootContext).orientation,
+        "data-disabled": dataDisabled.value,
+        "data-state": dataState.value,
+        disabled: disabled.value,
+        open: open.value,
+        as: props.as,
+        "as-child": props.asChild,
+        "unmount-on-hide": vue.unref(rootContext).unmountOnHide.value,
+        onKeydown: vue.withKeys(handleArrowKey, ["up", "down", "left", "right", "home", "end"])
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default", { open: open.value })
+        ]),
+        _: 3
+      }, 8, ["data-orientation", "data-disabled", "data-state", "disabled", "open", "as", "as-child", "unmount-on-hide"]);
+    };
+  }
+});
+
+exports._sfc_main = _sfc_main;
+exports.injectAccordionItemContext = injectAccordionItemContext;
+//# sourceMappingURL=AccordionItem.cjs.map

package/dist/Accordion/AccordionItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.cjs","sources":["../../src/Accordion/AccordionItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, VNodeRef } from 'vue'\nimport type { CollapsibleRootProps } from '../Collapsible'\nimport { injectAccordionRootContext } from './AccordionRoot.vue'\nimport { createContext, useArrowNavigation, useForwardExpose } from '@/shared'\n\nenum AccordionItemState {\n  Open = 'open',\n  Closed = 'closed',\n}\n\nexport interface AccordionItemProps\n  extends Omit<CollapsibleRootProps, 'open' | 'defaultOpen' | 'onOpenChange'> {\n  /**\n   * Whether or not an accordion item is disabled from user interaction.\n   * When `true`, prevents the user from interacting with the item.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean\n  /**\n   * A string value for the accordion item. All items within an accordion should use a unique value.\n   */\n  value: string\n}\n\ninterface AccordionItemContext {\n  open: ComputedRef<boolean>\n  dataState: ComputedRef<AccordionItemState>\n  disabled: ComputedRef<boolean>\n  dataDisabled: ComputedRef<'' | undefined>\n  triggerId: string\n  currentRef: VNodeRef\n  currentElement: ComputedRef<HTMLElement | undefined>\n  value: ComputedRef<string>\n}\n\nexport const [injectAccordionItemContext, provideAccordionItemContext]\n  = createContext<AccordionItemContext>('AccordionItem')\n</script>\n\n<script setup lang=\"ts\">\nimport { CollapsibleRoot } from '@/Collapsible'\nimport { computed } from 'vue'\n\nconst props = defineProps<AccordionItemProps>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst rootContext = injectAccordionRootContext()\n\nconst open = computed(() =>\n  rootContext.isSingle.value\n    ? props.value === rootContext.modelValue.value\n    : Array.isArray(rootContext.modelValue.value)\n      && rootContext.modelValue.value.includes(props.value),\n)\n\nconst disabled = computed(() => {\n  return (rootContext.disabled.value || props.disabled)\n})\n\nconst dataDisabled = computed(() => (disabled.value ? '' : undefined))\n\nconst dataState = computed(() =>\n  open.value ? AccordionItemState.Open : AccordionItemState.Closed,\n)\n\ndefineExpose({ open, dataDisabled })\nconst { currentRef, currentElement } = useForwardExpose()\n\nprovideAccordionItemContext({\n  open,\n  dataState,\n  disabled,\n  dataDisabled,\n  triggerId: '',\n  currentRef,\n  currentElement,\n  value: computed(() => props.value),\n})\n\nfunction handleArrowKey(e: KeyboardEvent) {\n  const target = e.target as HTMLElement\n  const allCollectionItems: HTMLElement[] = Array.from(rootContext.parentElement.value?.querySelectorAll('[data-reka-collection-item]') ?? [])\n\n  const collectionItemIndex = allCollectionItems.findIndex(item => item === target)\n  if (collectionItemIndex === -1)\n    return null\n\n  useArrowNavigation(\n    e,\n    currentElement.value,\n    rootContext.parentElement.value!,\n    {\n      arrowKeyOptions: rootContext.orientation,\n      dir: rootContext.direction.value,\n      focus: true,\n    },\n  )\n}\n</script>\n\n<template>\n  <CollapsibleRoot\n    :data-orientation=\"rootContext.orientation\"\n    :data-disabled=\"dataDisabled\"\n    :data-state=\"dataState\"\n    :disabled=\"disabled\"\n    :open=\"open\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :unmount-on-hide=\"rootContext.unmountOnHide.value\"\n    @keydown.up.down.left.right.home.end=\"handleArrowKey\"\n  >\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"],"names":["createContext","injectAccordionRootContext","computed","useForwardExpose","useArrowNavigation"],"mappings":";;;;;;;;;AAqCO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjEA,mCAAoC,eAAe;;;;;;;;;;;AAOvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AASd,IAAA,MAAM,cAAcC,kDAA2B,EAAA;AAE/C,IAAA,MAAM,IAAO,GAAAC,YAAA;AAAA,MAAS,MACpB,YAAY,QAAS,CAAA,KAAA,GACjB,MAAM,KAAU,KAAA,WAAA,CAAY,WAAW,KACvC,GAAA,KAAA,CAAM,QAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CACvC,IAAA,WAAA,CAAY,WAAW,KAAM,CAAA,QAAA,CAAS,MAAM,KAAK;AAAA,KAC1D;AAEA,IAAM,MAAA,QAAA,GAAWA,aAAS,MAAM;AAC9B,MAAQ,OAAA,WAAA,CAAY,QAAS,CAAA,KAAA,IAAS,KAAM,CAAA,QAAA;AAAA,KAC7C,CAAA;AAED,IAAA,MAAM,eAAeA,YAAS,CAAA,MAAO,QAAS,CAAA,KAAA,GAAQ,KAAK,SAAU,CAAA;AAErE,IAAA,MAAM,SAAY,GAAAA,YAAA;AAAA,MAAS,MACzB,IAAK,CAAA,KAAA,GAAQ,MAA0B,cAAA,QAAA;AAAA,KACzC;AAEA,IAAa,QAAA,CAAA,EAAE,IAAM,EAAA,YAAA,EAAc,CAAA;AACnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAA4B,2BAAA,CAAA;AAAA,MAC1B,IAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,UAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAO,EAAAD,YAAA,CAAS,MAAM,KAAA,CAAM,KAAK;AAAA,KAClC,CAAA;AAED,IAAA,SAAS,eAAe,CAAkB,EAAA;AACxC,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA;AACjB,MAAM,MAAA,kBAAA,GAAoC,KAAM,CAAA,IAAA,CAAK,WAAY,CAAA,aAAA,CAAc,OAAO,gBAAiB,CAAA,6BAA6B,CAAK,IAAA,EAAE,CAAA;AAE3I,MAAA,MAAM,mBAAsB,GAAA,kBAAA,CAAmB,SAAU,CAAA,CAAA,IAAA,KAAQ,SAAS,MAAM,CAAA;AAChF,MAAA,IAAI,mBAAwB,KAAA,EAAA;AAC1B,QAAO,OAAA,IAAA;AAET,MAAAE,4CAAA;AAAA,QACE,CAAA;AAAA,QACA,cAAe,CAAA,KAAA;AAAA,QACf,YAAY,aAAc,CAAA,KAAA;AAAA,QAC1B;AAAA,UACE,iBAAiB,WAAY,CAAA,WAAA;AAAA,UAC7B,GAAA,EAAK,YAAY,SAAU,CAAA,KAAA;AAAA,UAC3B,KAAO,EAAA;AAAA;AACT,OACF;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Accordion/AccordionItem.js

@@ -0,0 +1,82 @@
+import { defineComponent, computed, openBlock, createBlock, unref, withKeys, withCtx, renderSlot } from 'vue';
+import { i as injectAccordionRootContext } from './AccordionRoot.js';
+import { u as useForwardExpose } from '../shared/useForwardExpose.js';
+import { _ as _sfc_main$1 } from '../Collapsible/CollapsibleRoot.js';
+import { c as createContext } from '../shared/createContext.js';
+import { u as useArrowNavigation } from '../shared/useArrowNavigation.js';
+
+const [injectAccordionItemContext, provideAccordionItemContext] = createContext("AccordionItem");
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AccordionItem",
+  props: {
+    disabled: { type: Boolean },
+    value: {},
+    unmountOnHide: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const rootContext = injectAccordionRootContext();
+    const open = computed(
+      () => rootContext.isSingle.value ? props.value === rootContext.modelValue.value : Array.isArray(rootContext.modelValue.value) && rootContext.modelValue.value.includes(props.value)
+    );
+    const disabled = computed(() => {
+      return rootContext.disabled.value || props.disabled;
+    });
+    const dataDisabled = computed(() => disabled.value ? "" : undefined);
+    const dataState = computed(
+      () => open.value ? "open" /* Open */ : "closed" /* Closed */
+    );
+    __expose({ open, dataDisabled });
+    const { currentRef, currentElement } = useForwardExpose();
+    provideAccordionItemContext({
+      open,
+      dataState,
+      disabled,
+      dataDisabled,
+      triggerId: "",
+      currentRef,
+      currentElement,
+      value: computed(() => props.value)
+    });
+    function handleArrowKey(e) {
+      const target = e.target;
+      const allCollectionItems = Array.from(rootContext.parentElement.value?.querySelectorAll("[data-reka-collection-item]") ?? []);
+      const collectionItemIndex = allCollectionItems.findIndex((item) => item === target);
+      if (collectionItemIndex === -1)
+        return null;
+      useArrowNavigation(
+        e,
+        currentElement.value,
+        rootContext.parentElement.value,
+        {
+          arrowKeyOptions: rootContext.orientation,
+          dir: rootContext.direction.value,
+          focus: true
+        }
+      );
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), {
+        "data-orientation": unref(rootContext).orientation,
+        "data-disabled": dataDisabled.value,
+        "data-state": dataState.value,
+        disabled: disabled.value,
+        open: open.value,
+        as: props.as,
+        "as-child": props.asChild,
+        "unmount-on-hide": unref(rootContext).unmountOnHide.value,
+        onKeydown: withKeys(handleArrowKey, ["up", "down", "left", "right", "home", "end"])
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", { open: open.value })
+        ]),
+        _: 3
+      }, 8, ["data-orientation", "data-disabled", "data-state", "disabled", "open", "as", "as-child", "unmount-on-hide"]);
+    };
+  }
+});
+
+export { _sfc_main as _, injectAccordionItemContext as i };
+//# sourceMappingURL=AccordionItem.js.map

package/dist/Accordion/AccordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.js","sources":["../../src/Accordion/AccordionItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, VNodeRef } from 'vue'\nimport type { CollapsibleRootProps } from '../Collapsible'\nimport { injectAccordionRootContext } from './AccordionRoot.vue'\nimport { createContext, useArrowNavigation, useForwardExpose } from '@/shared'\n\nenum AccordionItemState {\n  Open = 'open',\n  Closed = 'closed',\n}\n\nexport interface AccordionItemProps\n  extends Omit<CollapsibleRootProps, 'open' | 'defaultOpen' | 'onOpenChange'> {\n  /**\n   * Whether or not an accordion item is disabled from user interaction.\n   * When `true`, prevents the user from interacting with the item.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean\n  /**\n   * A string value for the accordion item. All items within an accordion should use a unique value.\n   */\n  value: string\n}\n\ninterface AccordionItemContext {\n  open: ComputedRef<boolean>\n  dataState: ComputedRef<AccordionItemState>\n  disabled: ComputedRef<boolean>\n  dataDisabled: ComputedRef<'' | undefined>\n  triggerId: string\n  currentRef: VNodeRef\n  currentElement: ComputedRef<HTMLElement | undefined>\n  value: ComputedRef<string>\n}\n\nexport const [injectAccordionItemContext, provideAccordionItemContext]\n  = createContext<AccordionItemContext>('AccordionItem')\n</script>\n\n<script setup lang=\"ts\">\nimport { CollapsibleRoot } from '@/Collapsible'\nimport { computed } from 'vue'\n\nconst props = defineProps<AccordionItemProps>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst rootContext = injectAccordionRootContext()\n\nconst open = computed(() =>\n  rootContext.isSingle.value\n    ? props.value === rootContext.modelValue.value\n    : Array.isArray(rootContext.modelValue.value)\n      && rootContext.modelValue.value.includes(props.value),\n)\n\nconst disabled = computed(() => {\n  return (rootContext.disabled.value || props.disabled)\n})\n\nconst dataDisabled = computed(() => (disabled.value ? '' : undefined))\n\nconst dataState = computed(() =>\n  open.value ? AccordionItemState.Open : AccordionItemState.Closed,\n)\n\ndefineExpose({ open, dataDisabled })\nconst { currentRef, currentElement } = useForwardExpose()\n\nprovideAccordionItemContext({\n  open,\n  dataState,\n  disabled,\n  dataDisabled,\n  triggerId: '',\n  currentRef,\n  currentElement,\n  value: computed(() => props.value),\n})\n\nfunction handleArrowKey(e: KeyboardEvent) {\n  const target = e.target as HTMLElement\n  const allCollectionItems: HTMLElement[] = Array.from(rootContext.parentElement.value?.querySelectorAll('[data-reka-collection-item]') ?? [])\n\n  const collectionItemIndex = allCollectionItems.findIndex(item => item === target)\n  if (collectionItemIndex === -1)\n    return null\n\n  useArrowNavigation(\n    e,\n    currentElement.value,\n    rootContext.parentElement.value!,\n    {\n      arrowKeyOptions: rootContext.orientation,\n      dir: rootContext.direction.value,\n      focus: true,\n    },\n  )\n}\n</script>\n\n<template>\n  <CollapsibleRoot\n    :data-orientation=\"rootContext.orientation\"\n    :data-disabled=\"dataDisabled\"\n    :data-state=\"dataState\"\n    :disabled=\"disabled\"\n    :open=\"open\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :unmount-on-hide=\"rootContext.unmountOnHide.value\"\n    @keydown.up.down.left.right.home.end=\"handleArrowKey\"\n  >\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;AAqCO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjE,cAAoC,eAAe;;;;;;;;;;;AAOvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AASd,IAAA,MAAM,cAAc,0BAA2B,EAAA;AAE/C,IAAA,MAAM,IAAO,GAAA,QAAA;AAAA,MAAS,MACpB,YAAY,QAAS,CAAA,KAAA,GACjB,MAAM,KAAU,KAAA,WAAA,CAAY,WAAW,KACvC,GAAA,KAAA,CAAM,QAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CACvC,IAAA,WAAA,CAAY,WAAW,KAAM,CAAA,QAAA,CAAS,MAAM,KAAK;AAAA,KAC1D;AAEA,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,MAAQ,OAAA,WAAA,CAAY,QAAS,CAAA,KAAA,IAAS,KAAM,CAAA,QAAA;AAAA,KAC7C,CAAA;AAED,IAAA,MAAM,eAAe,QAAS,CAAA,MAAO,QAAS,CAAA,KAAA,GAAQ,KAAK,SAAU,CAAA;AAErE,IAAA,MAAM,SAAY,GAAA,QAAA;AAAA,MAAS,MACzB,IAAK,CAAA,KAAA,GAAQ,MAA0B,cAAA,QAAA;AAAA,KACzC;AAEA,IAAa,QAAA,CAAA,EAAE,IAAM,EAAA,YAAA,EAAc,CAAA;AACnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAA4B,2BAAA,CAAA;AAAA,MAC1B,IAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,UAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAO,EAAA,QAAA,CAAS,MAAM,KAAA,CAAM,KAAK;AAAA,KAClC,CAAA;AAED,IAAA,SAAS,eAAe,CAAkB,EAAA;AACxC,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA;AACjB,MAAM,MAAA,kBAAA,GAAoC,KAAM,CAAA,IAAA,CAAK,WAAY,CAAA,aAAA,CAAc,OAAO,gBAAiB,CAAA,6BAA6B,CAAK,IAAA,EAAE,CAAA;AAE3I,MAAA,MAAM,mBAAsB,GAAA,kBAAA,CAAmB,SAAU,CAAA,CAAA,IAAA,KAAQ,SAAS,MAAM,CAAA;AAChF,MAAA,IAAI,mBAAwB,KAAA,EAAA;AAC1B,QAAO,OAAA,IAAA;AAET,MAAA,kBAAA;AAAA,QACE,CAAA;AAAA,QACA,cAAe,CAAA,KAAA;AAAA,QACf,YAAY,aAAc,CAAA,KAAA;AAAA,QAC1B;AAAA,UACE,iBAAiB,WAAY,CAAA,WAAA;AAAA,UAC7B,GAAA,EAAK,YAAY,SAAU,CAAA,KAAA;AAAA,UAC3B,KAAO,EAAA;AAAA;AACT,OACF;AAAA;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Accordion/AccordionRoot.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+const vue = require('vue');
+const shared_useSingleOrMultipleValue = require('../shared/useSingleOrMultipleValue.cjs');
+const shared_useDirection = require('../shared/useDirection.cjs');
+const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
+const Primitive_Primitive = require('../Primitive/Primitive.cjs');
+const shared_createContext = require('../shared/createContext.cjs');
+
+const [injectAccordionRootContext, provideAccordionRootContext] = shared_createContext.createContext("AccordionRoot");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "AccordionRoot",
+  props: {
+    collapsible: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    dir: {},
+    orientation: { default: "vertical" },
+    unmountOnHide: { type: Boolean, default: true },
+    asChild: { type: Boolean },
+    as: {},
+    type: {},
+    modelValue: {},
+    defaultValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { dir, disabled, unmountOnHide } = vue.toRefs(props);
+    const direction = shared_useDirection.useDirection(dir);
+    const { modelValue, changeModelValue, isSingle } = shared_useSingleOrMultipleValue.useSingleOrMultipleValue(props, emits);
+    const { forwardRef, currentElement: parentElement } = shared_useForwardExpose.useForwardExpose();
+    provideAccordionRootContext({
+      disabled,
+      direction,
+      orientation: props.orientation,
+      parentElement,
+      isSingle,
+      collapsible: props.collapsible,
+      modelValue,
+      changeModelValue,
+      unmountOnHide
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(Primitive_Primitive.Primitive), {
+        ref: vue.unref(forwardRef),
+        "as-child": _ctx.asChild,
+        as: _ctx.as
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default", { modelValue: vue.unref(modelValue) })
+        ]),
+        _: 3
+      }, 8, ["as-child", "as"]);
+    };
+  }
+});
+
+exports._sfc_main = _sfc_main;
+exports.injectAccordionRootContext = injectAccordionRootContext;
+//# sourceMappingURL=AccordionRoot.cjs.map

package/dist/Accordion/AccordionRoot.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionRoot.cjs","sources":["../../src/Accordion/AccordionRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue, DataOrientation, Direction, SingleOrMultipleProps, SingleOrMultipleType } from '@/shared/types'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface AccordionRootProps<T = string | string[]>\n  extends PrimitiveProps, SingleOrMultipleProps<T> {\n  /**\n   * When type is \"single\", allows closing content when clicking trigger for an open item.\n   * When type is \"multiple\", this prop has no effect.\n   *\n   * @defaultValue false\n   */\n  collapsible?: boolean\n\n  /**\n   * When `true`, prevents the user from interacting with the accordion and all its items\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean\n\n  /**\n   * The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode.\n   *\n   * @defaultValue \"ltr\"\n   */\n  dir?: Direction\n\n  /**\n   * The orientation of the accordion.\n   *\n   * @defaultValue \"vertical\"\n   */\n  orientation?: DataOrientation\n\n  /**\n   * When `true`, the element will be unmounted on closed state.\n   *\n   * @defaultValue `true`\n   */\n  unmountOnHide?: boolean\n}\n\nexport type AccordionRootEmits<T extends SingleOrMultipleType = SingleOrMultipleType> = {\n  /**\n   * Event handler called when the expanded state of an item changes\n   */\n  'update:modelValue': [value: (T extends 'single' ? string : string[]) | undefined]\n}\n\nexport type AccordionRootContext<P extends AccordionRootProps> = {\n  disabled: Ref<P['disabled']>\n  direction: Ref<P['dir']>\n  orientation: P['orientation']\n  parentElement: Ref<HTMLElement | undefined>\n  changeModelValue: (value: string) => void\n  isSingle: ComputedRef<boolean>\n  modelValue: Ref<AcceptableValue | AcceptableValue[] | undefined>\n  collapsible: boolean\n  unmountOnHide: Ref<boolean>\n}\n\nexport const [injectAccordionRootContext, provideAccordionRootContext]\n  = createContext<AccordionRootContext<AccordionRootProps>>('AccordionRoot')\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends (string | string[]), ExplicitType extends SingleOrMultipleType\">\nimport { Primitive } from '@/Primitive'\nimport { useSingleOrMultipleValue } from '@/shared/useSingleOrMultipleValue'\nimport { toRefs } from 'vue'\n\nconst props = withDefaults(defineProps<AccordionRootProps<T>>(), {\n  disabled: false,\n  orientation: 'vertical',\n  collapsible: false,\n  unmountOnHide: true,\n})\n\nconst emits = defineEmits<AccordionRootEmits<ExplicitType>>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current active value */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { dir, disabled, unmountOnHide } = toRefs(props)\nconst direction = useDirection(dir)\n\nconst { modelValue, changeModelValue, isSingle } = useSingleOrMultipleValue(props, emits)\n\nconst { forwardRef, currentElement: parentElement } = useForwardExpose()\n\nprovideAccordionRootContext({\n  disabled,\n  direction,\n  orientation: props.orientation,\n  parentElement,\n  isSingle,\n  collapsible: props.collapsible,\n  modelValue,\n  changeModelValue,\n  unmountOnHide,\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n  >\n    <slot :model-value=\"modelValue\" />\n  </Primitive>\n</template>\n"],"names":["createContext","toRefs","useDirection","useSingleOrMultipleValue","useForwardExpose"],"mappings":";;;;;;;;;AAgEO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjEA,mCAAwD,eAAe;;;;;;;;;;;;;;;;;AAQ3E,IAAA,MAAM,KAAQ,GAAA,OAAA;AAOd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,EAAE,GAAK,EAAA,QAAA,EAAU,aAAc,EAAA,GAAIC,WAAO,KAAK,CAAA;AACrD,IAAM,MAAA,SAAA,GAAYC,iCAAa,GAAG,CAAA;AAElC,IAAA,MAAM,EAAE,UAAY,EAAA,gBAAA,EAAkB,UAAa,GAAAC,wDAAA,CAAyB,OAAO,KAAK,CAAA;AAExF,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,aAAA,KAAkBC,wCAAiB,EAAA;AAEvE,IAA4B,2BAAA,CAAA;AAAA,MAC1B,QAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,aAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,UAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/Accordion/AccordionRoot.js

@@ -0,0 +1,58 @@
+import { defineComponent, toRefs, openBlock, createBlock, unref, withCtx, renderSlot } from 'vue';
+import { u as useSingleOrMultipleValue } from '../shared/useSingleOrMultipleValue.js';
+import { u as useDirection } from '../shared/useDirection.js';
+import { u as useForwardExpose } from '../shared/useForwardExpose.js';
+import { P as Primitive } from '../Primitive/Primitive.js';
+import { c as createContext } from '../shared/createContext.js';
+
+const [injectAccordionRootContext, provideAccordionRootContext] = createContext("AccordionRoot");
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AccordionRoot",
+  props: {
+    collapsible: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    dir: {},
+    orientation: { default: "vertical" },
+    unmountOnHide: { type: Boolean, default: true },
+    asChild: { type: Boolean },
+    as: {},
+    type: {},
+    modelValue: {},
+    defaultValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { dir, disabled, unmountOnHide } = toRefs(props);
+    const direction = useDirection(dir);
+    const { modelValue, changeModelValue, isSingle } = useSingleOrMultipleValue(props, emits);
+    const { forwardRef, currentElement: parentElement } = useForwardExpose();
+    provideAccordionRootContext({
+      disabled,
+      direction,
+      orientation: props.orientation,
+      parentElement,
+      isSingle,
+      collapsible: props.collapsible,
+      modelValue,
+      changeModelValue,
+      unmountOnHide
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), {
+        ref: unref(forwardRef),
+        "as-child": _ctx.asChild,
+        as: _ctx.as
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", { modelValue: unref(modelValue) })
+        ]),
+        _: 3
+      }, 8, ["as-child", "as"]);
+    };
+  }
+});
+
+export { _sfc_main as _, injectAccordionRootContext as i };
+//# sourceMappingURL=AccordionRoot.js.map

package/dist/Accordion/AccordionRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionRoot.js","sources":["../../src/Accordion/AccordionRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue, DataOrientation, Direction, SingleOrMultipleProps, SingleOrMultipleType } from '@/shared/types'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface AccordionRootProps<T = string | string[]>\n  extends PrimitiveProps, SingleOrMultipleProps<T> {\n  /**\n   * When type is \"single\", allows closing content when clicking trigger for an open item.\n   * When type is \"multiple\", this prop has no effect.\n   *\n   * @defaultValue false\n   */\n  collapsible?: boolean\n\n  /**\n   * When `true`, prevents the user from interacting with the accordion and all its items\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean\n\n  /**\n   * The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode.\n   *\n   * @defaultValue \"ltr\"\n   */\n  dir?: Direction\n\n  /**\n   * The orientation of the accordion.\n   *\n   * @defaultValue \"vertical\"\n   */\n  orientation?: DataOrientation\n\n  /**\n   * When `true`, the element will be unmounted on closed state.\n   *\n   * @defaultValue `true`\n   */\n  unmountOnHide?: boolean\n}\n\nexport type AccordionRootEmits<T extends SingleOrMultipleType = SingleOrMultipleType> = {\n  /**\n   * Event handler called when the expanded state of an item changes\n   */\n  'update:modelValue': [value: (T extends 'single' ? string : string[]) | undefined]\n}\n\nexport type AccordionRootContext<P extends AccordionRootProps> = {\n  disabled: Ref<P['disabled']>\n  direction: Ref<P['dir']>\n  orientation: P['orientation']\n  parentElement: Ref<HTMLElement | undefined>\n  changeModelValue: (value: string) => void\n  isSingle: ComputedRef<boolean>\n  modelValue: Ref<AcceptableValue | AcceptableValue[] | undefined>\n  collapsible: boolean\n  unmountOnHide: Ref<boolean>\n}\n\nexport const [injectAccordionRootContext, provideAccordionRootContext]\n  = createContext<AccordionRootContext<AccordionRootProps>>('AccordionRoot')\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends (string | string[]), ExplicitType extends SingleOrMultipleType\">\nimport { Primitive } from '@/Primitive'\nimport { useSingleOrMultipleValue } from '@/shared/useSingleOrMultipleValue'\nimport { toRefs } from 'vue'\n\nconst props = withDefaults(defineProps<AccordionRootProps<T>>(), {\n  disabled: false,\n  orientation: 'vertical',\n  collapsible: false,\n  unmountOnHide: true,\n})\n\nconst emits = defineEmits<AccordionRootEmits<ExplicitType>>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current active value */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { dir, disabled, unmountOnHide } = toRefs(props)\nconst direction = useDirection(dir)\n\nconst { modelValue, changeModelValue, isSingle } = useSingleOrMultipleValue(props, emits)\n\nconst { forwardRef, currentElement: parentElement } = useForwardExpose()\n\nprovideAccordionRootContext({\n  disabled,\n  direction,\n  orientation: props.orientation,\n  parentElement,\n  isSingle,\n  collapsible: props.collapsible,\n  modelValue,\n  changeModelValue,\n  unmountOnHide,\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n  >\n    <slot :model-value=\"modelValue\" />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;AAgEO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjE,cAAwD,eAAe;;;;;;;;;;;;;;;;;AAQ3E,IAAA,MAAM,KAAQ,GAAA,OAAA;AAOd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,EAAE,GAAK,EAAA,QAAA,EAAU,aAAc,EAAA,GAAI,OAAO,KAAK,CAAA;AACrD,IAAM,MAAA,SAAA,GAAY,aAAa,GAAG,CAAA;AAElC,IAAA,MAAM,EAAE,UAAY,EAAA,gBAAA,EAAkB,UAAa,GAAA,wBAAA,CAAyB,OAAO,KAAK,CAAA;AAExF,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,aAAA,KAAkB,gBAAiB,EAAA;AAEvE,IAA4B,2BAAA,CAAA;AAAA,MAC1B,QAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,aAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,UAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;"}