independer-design-system 1.2.0

package/README.md

@@ -0,0 +1,100 @@
+# Independer Design System
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+Independer Design System for Nuxt 4.
+
+- [✨  Release Notes](/CHANGELOG.md)
+
+## Features
+
+- ⛰  Create interactive prototypes with the included components
+- 🧑‍💻  Built for Nuxt 4
+- 🧩  Auto-registers components with an `Ind` prefix
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxt module add independer-design-system
+```
+
+That's it! You can now use Independer Design System in your Nuxt app ✨
+
+```vue
+<template>
+  <IndFormInput v-model="name" name="name" label="Naam" />
+  <IndButton label="Versturen" tone="filled-yellow" />
+</template>
+
+<script setup>
+const name = ref('')
+</script>
+```
+
+By default the module registers:
+
+`IndButton`, `IndButtonToggle`, `IndDialog`, `IndModal`, `IndPill`, `IndFormCheckbox`, `IndFormInput`, `IndFormLabel`, `IndFormRadio`, `IndFormRow`, `IndFormSelect`, `IndFormTabs`, and `IndFormTextarea`.
+
+Use the module in `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['independer-design-system'],
+})
+```
+
+Run the local playground to see the base form components in context:
+
+```bash
+npm run dev
+```
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  npm install
+  
+  # Generate type stubs
+  npm run dev:prepare
+  
+  # Develop with the playground
+  npm run dev
+  
+  # Build the playground
+  npm run dev:build
+  
+  # Run ESLint
+  npm run lint
+  
+  # Run Vitest
+  npm run test
+  npm run test:watch
+  
+  # Release new version
+  npm run release
+  ```
+
+</details>
+
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/independer-design-system/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/independer-design-system
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/independer-design-system.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npmjs.com/package/independer-design-system
+
+[license-src]: https://img.shields.io/npm/l/independer-design-system.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/independer-design-system
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -0,0 +1,6 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+type ModuleOptions = Record<string, never>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "independer-design-system",
+  "configKey": "independerDesignSystem",
+  "compatibility": {
+    "nuxt": ">=4.2.0"
+  },
+  "version": "1.2.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,35 @@
+import { createResolver, defineNuxtModule, addComponentsDir } from '@nuxt/kit';
+
+const resolver = createResolver(import.meta.url);
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "independer-design-system",
+    configKey: "independerDesignSystem",
+    compatibility: {
+      nuxt: ">=4.2.0"
+    }
+  },
+  moduleDependencies: {
+    "@nuxt/icon": {
+      version: ">=2.2.1"
+    }
+  },
+  setup(options, nuxt) {
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      prefix: "Ind",
+      pathPrefix: true
+    });
+    nuxt.options.css.push(resolver.resolve("./runtime/assets/style.css"));
+    nuxt.hook("vite:extend", async ({ config }) => {
+      const plugin = await import('@tailwindcss/vite').then((r) => r.default);
+      config.plugins ||= [];
+      config.plugins.push(plugin());
+    });
+    if (nuxt.options.builder !== "@nuxt/vite-builder") {
+      nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
+    }
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/assets/images/checkbox.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.38302 10.5H5.38462H5.39211V10.5L5.39831 10.5C5.57029 10.4978 5.73998 10.4602 5.89673 10.3894L5.69096 9.93371L5.89674 10.3894C6.05293 10.3189 6.19294 10.2169 6.30802 10.0899C6.30843 10.0895 6.30884 10.089 6.30925 10.0886L13.1366 2.62701C13.253 2.5102 13.345 2.37145 13.4074 2.21875C13.4717 2.0613 13.5032 1.89236 13.4998 1.72231C13.4963 1.55225 13.4582 1.38471 13.3876 1.22996C13.317 1.07521 13.2155 0.936558 13.0894 0.822486C12.9633 0.708414 12.8152 0.621332 12.6542 0.566559C12.4932 0.511785 12.3227 0.490468 12.1532 0.503907C11.9837 0.517345 11.8187 0.565259 11.6684 0.644725C11.5233 0.721381 11.3949 0.825844 11.2903 0.952113L5.37232 7.4189L2.65942 4.5314C2.65941 4.53139 2.6594 4.53138 2.6594 4.53137C2.4327 4.29006 2.11944 4.14869 1.78857 4.13818C1.45769 4.12767 1.13608 4.24888 0.894509 4.47531C0.652919 4.70175 0.511171 5.01491 0.500632 5.34593C0.490093 5.67694 0.611637 5.99848 0.838355 6.23983L0.838662 6.24016L4.47209 10.1011C4.47251 10.1015 4.47292 10.102 4.47333 10.1024C4.5895 10.2272 4.72999 10.3268 4.88613 10.3952L5.08669 9.93714L4.88614 10.3952C5.04284 10.4638 5.21196 10.4994 5.38302 10.5Z" fill="#00BC9A" stroke="#00BC9A"/>
+</svg>

package/dist/runtime/assets/style.css

@@ -0,0 +1 @@
+@import url("https://use.typekit.net/uxr2esn.css");@import "tailwindcss";@theme{--container-mobile:320px;--container-tablet:768px;--container-desktop:1136px;--container-desktop-lg:1432px;--breakpoint-tablet:768px;--breakpoint-desktop:1136px;--breakpoint-desktop-lg:1432px;--font-sans:"proxima-nova",system-ui;--font-serif:"roboto-slab",system-ui;--text-xs:.75rem;--text-xs--line-height:1rem;--text-sm:.875rem;--text-sm--line-height:1.25rem;--text-base:1rem;--text-base--line-height:1.5rem;--text-lg:1.125rem;--text-lg--line-height:1.75rem;--text-xl:1.25rem;--text-xl--line-height:1.75rem;--text-2xl:1.5rem;--text-2xl--line-height:2rem;--text-3xl:2rem;--text-3xl--line-height:2.5rem;--text-4xl:2.5rem;--text-4xl--line-height:3rem;--text-5xl:3rem;--text-5xl--line-height:3.5rem;--color-interface:#f2f1fd;--color-transparent:transparent;--color-current:currentColor;--color-purple-100:#f2f1fd;--color-purple-200:#d9d5f8;--color-purple-300:#c1b9f2;--color-purple-400:#aa9ceb;--color-purple-500:#9480e4;--color-purple-600:#8063dc;--color-purple-700:#6e42d2;--color-purple-800:#5532a7;--color-purple-900:#3f247e;--color-purple-1000:#291556;--color-purple-darkest:#291556;--color-purple-dark:#3f247e;--color-purple:#6e42d2;--color-purple-light:#d9d5f8;--color-purple-lighter:#f2f1fd;--color-peach-100:#ffefe7;--color-peach-200:#ffcfb7;--color-peach-300:#f4b18e;--color-peach-400:#d99876;--color-peach-500:#b4856b;--color-peach-600:#976f59;--color-peach-700:#7a5a47;--color-peach-800:#604536;--color-peach-900:#473227;--color-peach-1000:#461000;--color-peach-darkest:#461000;--color-peach-dark:#d99876;--color-peach:#f4b18e;--color-peach-light:#ffcfb7;--color-peach-lighter:#ffefe7;--color-grey-100:#f2f2f2;--color-grey-200:#d7d9da;--color-grey-300:#b3b7c1;--color-grey-400:#a4a7a9;--color-grey-500:#908e84;--color-grey-600:#74787a;--color-grey-700:#626066;--color-grey-800:#4c4b4f;--color-grey-900:#37363a;--color-grey-1000:#232225;--color-grey-darkest:#232225;--color-grey-dark:#74787a;--color-grey:#a4a7a9;--color-grey-light:#d7d9da;--color-grey-lighter:#f2f2f2;--color-blue-100:#e5f4ff;--color-blue-200:#b4dffd;--color-blue-300:#7dc8fa;--color-blue-400:#33b0f5;--color-blue-500:#0097e0;--color-blue-600:#007dc5;--color-blue-700:#0063aa;--color-blue-800:#004b90;--color-blue-900:#003478;--color-blue-1000:#001c60;--color-blue-darkest:#001c60;--color-blue-dark:#007dc5;--color-blue:#33b0f5;--color-blue-light:#e5f4ff;--color-green-100:#e4f6f0;--color-green-200:#abe4d2;--color-green-300:#6ed2b7;--color-green-400:#00bc9a;--color-green-500:#00a281;--color-green-600:#00886a;--color-green-700:#006e52;--color-green-800:#00563c;--color-green-900:#004028;--color-green-1000:#002914;--color-green-darkest:#002914;--color-green-dark:#006e52;--color-green:#00bc9a;--color-green-light:#abe4d2;--color-yellow-100:#fff2bd;--color-yellow-200:#fcd610;--color-yellow-300:#e3bd00;--color-yellow-400:#c8a300;--color-yellow-500:#b08a00;--color-yellow-600:#987200;--color-yellow-700:#7f5a00;--color-yellow-800:#684300;--color-yellow-900:#542e00;--color-yellow-1000:#3e1800;--color-yellow-darkest:#542e00;--color-yellow-dark:#e3bd00;--color-yellow:#fcd610;--color-yellow-light:#fff2bd;--color-orange-100:#fff1e6;--color-orange-200:#ffd1a9;--color-orange-300:#ffae66;--color-orange-400:#f68c12;--color-orange-500:#db7400;--color-orange-600:#c05b00;--color-orange-700:#a54300;--color-orange-800:#8b2800;--color-orange-900:#720a00;--color-orange-1000:#4f0000;--color-orange-darkest:#4f0000;--color-orange-dark:#f68c12;--color-orange:#f68c12;--color-orange-light:#ffd1a9;--color-orange-lighter:#fff1e6;--color-red-100:#ffeff0;--color-red-200:#ffcdd2;--color-red-300:#ffa8b3;--color-red-400:#ff7f94;--color-red-500:#fb4f74;--color-red-600:#e02f5e;--color-red-700:#b7254b;--color-red-800:#901b3a;--color-red-900:#6d1129;--color-red-1000:#490819;--color-red-darkest:#490819;--color-red-dark:#b7254b;--color-red:#e02f5e;--color-red-light:#ffcdd2;--animate-pulse-fast:pulse 1.5s cubic-bezier(0.4,0,0.6,1) infinite;--default-transition-duration:200ms;--default-transition-timing-function:cubic-bezier(0,0,0.2,1);--shadow-default:0 0 1px 0 rgba(0,0,0,.1),0 0 3px 0 rgba(0,0,0,.1),0 0 16px 4px rgba(0,0,0,.05)}.iconify{@apply block w-6 h-6 flex-shrink-0}

package/dist/runtime/components/Button.d.vue.ts

@@ -0,0 +1,40 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    tone: StringConstructor;
+    name: StringConstructor;
+    label: StringConstructor;
+    path: StringConstructor;
+    icon: StringConstructor;
+    loading: BooleanConstructor;
+    disabled: BooleanConstructor;
+    modal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tone: StringConstructor;
+    name: StringConstructor;
+    label: StringConstructor;
+    path: StringConstructor;
+    icon: StringConstructor;
+    loading: BooleanConstructor;
+    disabled: BooleanConstructor;
+    modal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    loading: boolean;
+    disabled: boolean;
+    modal: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+} & {
+    default?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/components/Button.vue

@@ -0,0 +1,110 @@
+<template>
+  <NuxtLink
+    v-if="path && !disabled"
+    :to="path"
+    class="inline-flex justify-center rounded-lg border font-semibold outline-none ring-purple transition-all ease-out focus-visible:border-purple focus-visible:ring-1"
+    :class="[classes, loadingClasses, iconOnly]"
+  >
+    <slot>
+      <Icon
+        v-if="icon"
+        :name="icon"
+        class="h-6 w-6 shrink-0 cursor-pointer"
+        :class="{ 'mr-2': label }"
+      />
+
+      <span :class="{ invisible: loading }">
+        {{ label }}
+      </span>
+
+      <Transition
+        name="fade"
+        mode="in-out"
+      >
+        <Icon
+          v-if="loading"
+          name="eva:loader-outline"
+          class="ml-2 h-6 w-6 shrink-0 animate-spin"
+        />
+      </Transition>
+    </slot>
+  </NuxtLink>
+
+  <button
+    v-else
+    class="inline-flex cursor-pointer justify-center rounded-lg border font-semibold outline-none ring-purple transition-all ease-out focus-visible:border-purple focus-visible:ring-1"
+    :class="[classes, loadingClasses, iconOnly]"
+    :disabled="disabled"
+  >
+    <slot>
+      <Icon
+        v-if="icon"
+        :name="icon"
+        class="h-6 w-6 shrink-0 cursor-pointer"
+        :class="{ 'mr-2': label }"
+      />
+
+      <span :class="{ invisible: loading }">
+        {{ label }}
+      </span>
+
+      <Transition
+        name="fade"
+        mode="in-out"
+      >
+        <div
+          v-if="loading"
+          class="absolute"
+        >
+          <Icon
+            name="eva:loader-outline"
+            class="h-6 w-6 shrink-0 animate-spin"
+          />
+        </div>
+      </Transition>
+    </slot>
+  </button>
+</template>
+
+<script setup>
+import { computed } from "vue";
+defineOptions({
+  name: "IndButton"
+});
+const props = defineProps({
+  tone: String,
+  name: String,
+  label: String,
+  path: String,
+  icon: String,
+  loading: Boolean,
+  disabled: Boolean,
+  modal: {
+    type: Boolean,
+    default: false
+  }
+});
+const classes = computed(() => {
+  return {
+    "filled-yellow": "bg-yellow border-yellow text-yellow-1000 hover:bg-yellow-dark hover:border-yellow-dark active:bg-yellow-300 active:border-yellow-300 disabled:bg-grey-200 disabled:text-grey-500 disabled:border-grey-200 disabled:cursor-not-allowed",
+    "filled-purple": "bg-purple border-purple text-white hover:bg-purple-dark hover:border-purple-dark active:bg-purple-800 active:border-purple-800 disabled:bg-grey-200 disabled:text-grey-500 disabled:border-grey-200 disabled:cursor-not-allowed",
+    "wire-purple": "border-purple text-purple hover:text-purple hover:bg-purple-200 active:bg-purple/40 disabled:bg-transparent disabled:border-grey disabled:text-grey disabled:cursor-not-allowed",
+    "naked-purple": "border-transparent text-purple hover:bg-purple-200 active:bg-purple/40",
+    "wire-white": "bg-transparent border-white text-white hover:bg-black/10 active:bg-black/30 ring-white focus-visible:border-white disabled:bg-transparent disabled:border-grey disabled:text-grey disabled:cursor-not-allowed",
+    "naked-white": "bg-transparent border-white text-white hover:bg-black/10 active:bg-black/30 ring-white focus-visible:border-white",
+    "link": "justify-start px-0 bg-transparent border-transparent text-purple hover:text-purple-dark active:text-purple-900"
+  }[props.tone];
+});
+const iconOnly = computed(() => {
+  if (props.label === void 0 && props.icon !== void 0) {
+    return "p-[0.6875rem]";
+  }
+  return "px-3 py-[0.6875rem]";
+});
+const loadingClasses = computed(() => {
+  if (props.loading) {
+    return "border-grey bg-grey text-grey-dark cursor-not-allowed";
+  }
+  return "";
+});
+</script>

package/dist/runtime/components/Button.vue.d.ts

@@ -0,0 +1,40 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    tone: StringConstructor;
+    name: StringConstructor;
+    label: StringConstructor;
+    path: StringConstructor;
+    icon: StringConstructor;
+    loading: BooleanConstructor;
+    disabled: BooleanConstructor;
+    modal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tone: StringConstructor;
+    name: StringConstructor;
+    label: StringConstructor;
+    path: StringConstructor;
+    icon: StringConstructor;
+    loading: BooleanConstructor;
+    disabled: BooleanConstructor;
+    modal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    loading: boolean;
+    disabled: boolean;
+    modal: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+} & {
+    default?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/components/ButtonToggle.d.vue.ts

@@ -0,0 +1,17 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    state: BooleanConstructor;
+    iconPrimary: StringConstructor;
+    labelPrimary: StringConstructor;
+    iconSecondary: StringConstructor;
+    labelSecondary: StringConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    state: BooleanConstructor;
+    iconPrimary: StringConstructor;
+    labelPrimary: StringConstructor;
+    iconSecondary: StringConstructor;
+    labelSecondary: StringConstructor;
+}>> & Readonly<{}>, {
+    state: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/ButtonToggle.vue

@@ -0,0 +1,40 @@
+<template>
+  <button class="text-purple font-semibold transition-all cursor-pointer hover:text-purple-dark">
+    <Transition
+      name="fade"
+      mode="out-in"
+    >
+      <div
+        v-if="state === false"
+        class="flex gap-2"
+      >
+        <Icon
+          v-if="iconPrimary"
+          :name="iconPrimary"
+        />
+        {{ labelPrimary }}
+      </div>
+
+      <div
+        v-else
+        class="flex gap-2"
+      >
+        <Icon
+          v-if="iconSecondary"
+          :name="iconSecondary"
+        />
+        {{ labelSecondary }}
+      </div>
+    </Transition>
+  </button>
+</template>
+
+<script setup>
+defineProps({
+  state: Boolean,
+  iconPrimary: String,
+  labelPrimary: String,
+  iconSecondary: String,
+  labelSecondary: String
+});
+</script>

package/dist/runtime/components/ButtonToggle.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    state: BooleanConstructor;
+    iconPrimary: StringConstructor;
+    labelPrimary: StringConstructor;
+    iconSecondary: StringConstructor;
+    labelSecondary: StringConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    state: BooleanConstructor;
+    iconPrimary: StringConstructor;
+    labelPrimary: StringConstructor;
+    iconSecondary: StringConstructor;
+    labelSecondary: StringConstructor;
+}>> & Readonly<{}>, {
+    state: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Dialog.d.vue.ts

@@ -0,0 +1,52 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+    classes: StringConstructor;
+    backgroundColorClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+    classes: StringConstructor;
+    backgroundColorClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {
+    show: boolean;
+    size: string;
+    backgroundColorClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+} & {
+    footer?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/components/Dialog.vue

@@ -0,0 +1,116 @@
+<template>
+  <Teleport to="body">
+    <Transition name="dialog-fade">
+      <div
+        v-if="isOpen"
+        class="dialog fixed bottom-4 z-100 grid grid-rows-[auto_1fr_auto] rounded-xl shadow-default desktop:bottom-auto desktop:left-1/2 desktop:top-1/2 desktop:-translate-x-1/2 desktop:-translate-y-1/2"
+        :class="[classes, backgroundColorClass, sizeClasses]"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="title"
+      >
+        <header class="dialog__header grid items-center rounded-t-xl border-b border-purple-light bg-white px-2 py-2">
+          <span class="col-start-2 text-center font-semibold tablet:text-lg">{{ title }}</span>
+
+          <button
+            type="button"
+            class="col-start-3 ml-auto rounded-lg p-3 text-purple transition-all hover:bg-purple-200 hover:ring-purple/20 active:bg-purple/40 active:ring-purple/40"
+            aria-label="Sluiten"
+            @click="close"
+          >
+            <Icon
+              name="eva:close-outline"
+              class="cursor-pointer"
+            />
+          </button>
+        </header>
+
+        <div class="dialog__content relative overflow-y-scroll">
+          <slot />
+        </div>
+
+        <div
+          v-if="$slots.footer"
+          class="flex flex-col justify-end gap-2 border-t border-purple-light px-4 py-4 tablet:flex-row tablet:gap-4 tablet:px-6"
+        >
+          <slot name="footer" />
+        </div>
+      </div>
+    </Transition>
+
+    <Transition name="backdrop-fade">
+      <div
+        v-if="isOpen"
+        class="fixed left-0 top-0 z-90 h-full w-full bg-black/30 backdrop-blur-sm"
+        @click="close"
+      />
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, watch } from "vue";
+defineOptions({
+  name: "IndDialog"
+});
+const emit = defineEmits(["close"]);
+const props = defineProps({
+  title: String,
+  show: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: "medium",
+    validator: (value) => ["small", "medium"].includes(value)
+  },
+  classes: String,
+  backgroundColorClass: {
+    type: String,
+    default: "bg-white"
+  }
+});
+const isOpen = computed(() => props.show);
+let previousBodyOverflow;
+const setBodyLocked = (locked) => {
+  if (!import.meta.client) {
+    return;
+  }
+  if (locked) {
+    previousBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return;
+  }
+  if (previousBodyOverflow !== void 0) {
+    document.body.style.overflow = previousBodyOverflow;
+    previousBodyOverflow = void 0;
+  }
+};
+watch(isOpen, setBodyLocked, { immediate: true });
+onMounted(() => {
+  window.addEventListener("keydown", handleEscape);
+});
+onUnmounted(() => {
+  window.removeEventListener("keydown", handleEscape);
+  setBodyLocked(false);
+});
+const close = () => {
+  emit("close");
+};
+function handleEscape(event) {
+  if (event.key === "Escape" && isOpen.value) {
+    close();
+  }
+}
+const sizeClasses = computed(() => {
+  return {
+    small: "small",
+    medium: "medium"
+  }[props.size];
+});
+</script>
+
+<style>
+@reference "../assets/style.css";.dialog.small{left:1rem;max-height:calc(100dvh - 2rem);width:calc(100% - 32px)}@media screen and (min-width:1136px){.dialog.small{@apply left-1/2 w-[424px]}}.dialog.medium{left:1rem;max-height:calc(100dvh - 2rem);width:calc(100% - 32px)}@media screen and (min-width:1136px){.dialog.medium{@apply left-1/2 desktop:w-[780px]}}.dialog__header{grid-template-columns:3rem minmax(0,1fr) 3rem}.dialog__content{max-height:calc(100dvh - 6rem)}@media screen and (min-width:1136px){.dialog__content{max-height:48rem}}.dialog-fade-enter-active,.dialog-fade-leave-active{@apply transition-all ease-out duration-300 transform-gpu}.dialog-fade-enter-from,.dialog-fade-leave-to{@apply translate-y-full opacity-0 desktop:-translate-y-1/2 desktop:scale-90}.backdrop-fade-enter-active,.backdrop-fade-leave-active{@apply transition-all ease-out duration-400 transform-gpu}.backdrop-fade-enter-from,.backdrop-fade-leave-to{@apply opacity-0}
+</style>

package/dist/runtime/components/Dialog.vue.d.ts

@@ -0,0 +1,52 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+    classes: StringConstructor;
+    backgroundColorClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+    classes: StringConstructor;
+    backgroundColorClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {
+    show: boolean;
+    size: string;
+    backgroundColorClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+} & {
+    footer?: ((props: {}) => any) | undefined;
+};