design-system-dashboard-devmunity 0.0.6 → 0.1.0

package/.editorconfig

@@ -2,7 +2,7 @@
 root = true
 
 [*]
-indent_size = 2
+indent_size = 4
 indent_style = space
 end_of_line = lf
 charset = utf-8

package/.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit 

package/.vscode/settings.json

@@ -1,23 +1,28 @@
 {
-    "files.associations": {
-        "*.css": "tailwindcss"
-    },
-    "editor.quickSuggestions": {
-        "strings": "on"
-    },
-    "tailwindCSS.classAttributes": [
-        "class",
-        "ui",
-        ".*Styles*",
-        ".*Styles: .*", // <-- This should fix your issue.
-    ],
-    "tailwindCSS.experimental.classRegex": [
-        [
-            "ui:\\s*{([^)]*)\\s*}",
-            "(?:'|\"|`)([^']*)(?:'|\"|`)"
-        ]
-    ],
-    "editor.tabSize": 4,
-    "editor.stickyTabStops": true,
-    "references.preferredLocation": "view"
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+  "tailwindCSS.classAttributes": [
+    "class",
+    "ui",
+    ".*Styles*",
+    ".*Styles: .*", // <-- This should fix your issue.
+  ],
+  "tailwindCSS.experimental.classRegex": [
+    [
+      "ui:\\s*{([^)]*)\\s*}",
+      "(?:'|\"|`)([^']*)(?:'|\"|`)"
+    ]
+  ],
+  "editor.tabSize": 4,
+  "editor.stickyTabStops": true,
+  "references.preferredLocation": "view",
+  "conventionalCommits.scopes": [
+    "dev-infra",
+    "vscode-extension",
+    "components"
+  ]
 }

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [0.1.0](https://github.com/vicventum/design-system-dashboard-devmunity/compare/v0.0.6...v0.1.0) (2025-11-12)
+
+
+### Features
+
+* **components:** :sparkles: Cambia estructura de componentes y agrega nuevo componente AButtonBack ([c3ad2e9](https://github.com/vicventum/design-system-dashboard-devmunity/commit/c3ad2e9fe85f0aa97049ecb6cb2667f6dd1f9c20))
+* **components:** :sparkles: Crea componente BCardHeader ([7e3292f](https://github.com/vicventum/design-system-dashboard-devmunity/commit/7e3292fd60f94b2cc83941f14c6a1b0795d46961))
+
 ## [0.0.6](https://github.com/vicventum/design-system-dashboard-devmunity/compare/v0.0.5...v0.0.6) (2025-11-06)
 
 

package/app/assets/css/themes/components/button.js

@@ -0,0 +1,239 @@
+export default /*ui*/ {
+    slots: {
+        base: [
+            'rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75',
+            'transition-colors',
+        ],
+        label: 'truncate',
+        leadingIcon: 'shrink-0',
+        leadingAvatar: 'shrink-0',
+        leadingAvatarSize: '',
+        trailingIcon: 'shrink-0',
+    },
+    variants: {
+        fieldGroup: {
+            horizontal:
+                'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]',
+            vertical:
+                'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]',
+        },
+        color: {
+            primary: '',
+            secondary: '',
+            success: '',
+            info: '',
+            warning: '',
+            error: '',
+            neutral: '',
+        },
+        variant: {
+            solid: '',
+            outline: '',
+            soft: '',
+            subtle: '',
+            ghost: '',
+            link: '',
+            icon: 'p-2 rounded-full inline-flex items-center justify-center bg-transparent',
+        },
+        size: {
+            xs: {
+                base: 'px-2 py-1 text-xs gap-1',
+                leadingIcon: 'size-4',
+                leadingAvatarSize: '3xs',
+                trailingIcon: 'size-4',
+            },
+            sm: {
+                base: 'px-2.5 py-1.5 text-xs gap-1.5',
+                leadingIcon: 'size-4',
+                leadingAvatarSize: '3xs',
+                trailingIcon: 'size-4',
+            },
+            md: {
+                base: 'px-2.5 py-1.5 text-sm gap-1.5',
+                leadingIcon: 'size-5',
+                leadingAvatarSize: '2xs',
+                trailingIcon: 'size-5',
+            },
+            lg: {
+                base: 'px-3 py-2 text-sm gap-2',
+                leadingIcon: 'size-5',
+                leadingAvatarSize: '2xs',
+                trailingIcon: 'size-5',
+            },
+            xl: {
+                base: 'px-3 py-2 text-base gap-2',
+                leadingIcon: 'size-6',
+                leadingAvatarSize: 'xs',
+                trailingIcon: 'size-6',
+            },
+        },
+        block: {
+            true: {
+                base: 'w-full justify-center',
+                trailingIcon: 'ms-auto',
+            },
+        },
+        square: {
+            true: '',
+        },
+        leading: {
+            true: '',
+        },
+        trailing: {
+            true: '',
+        },
+        loading: {
+            true: '',
+        },
+        active: {
+            true: {
+                base: '',
+            },
+            false: {
+                base: '',
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            color: 'primary',
+            variant: 'solid',
+            class: 'text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
+        },
+        {
+            color: 'primary',
+            variant: 'outline',
+            class: 'ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+        },
+        {
+            color: 'primary',
+            variant: 'soft',
+            class: 'text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10',
+        },
+        {
+            color: 'primary',
+            variant: 'subtle',
+            class: 'text-primary ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/15 active:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+        },
+        {
+            color: 'primary',
+            variant: 'ghost',
+            class: 'text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent',
+        },
+        {
+            color: 'primary',
+            variant: 'link',
+            class: 'text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
+        },
+        {
+            color: 'neutral',
+            variant: 'solid',
+            class: 'text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted',
+        },
+        {
+            color: 'neutral',
+            variant: 'outline',
+            class: 'ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted',
+        },
+        {
+            color: 'neutral',
+            variant: 'soft',
+            class: 'text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated',
+        },
+        {
+            color: 'neutral',
+            variant: 'subtle',
+            class: 'ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted',
+        },
+        {
+            color: 'neutral',
+            variant: 'ghost',
+            class: 'text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent',
+        },
+        {
+            color: 'neutral',
+            variant: 'link',
+            class: 'text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted',
+        },
+        {
+            size: 'xs',
+            square: true,
+            class: 'p-1',
+        },
+        {
+            size: 'sm',
+            square: true,
+            class: 'p-1.5',
+        },
+        {
+            size: 'md',
+            square: true,
+            class: 'p-1.5',
+        },
+        {
+            size: 'lg',
+            square: true,
+            class: 'p-2',
+        },
+        {
+            size: 'xl',
+            square: true,
+            class: 'p-2',
+        },
+        {
+            loading: true,
+            leading: true,
+            class: {
+                leadingIcon: 'animate-spin',
+            },
+        },
+        {
+            loading: true,
+            leading: false,
+            trailing: true,
+            class: {
+                trailingIcon: 'animate-spin',
+            },
+        },
+        {
+            variant: 'icon',
+            color: 'neutral',
+            class: 'text-neutral-700 hover:bg-neutral-100 active:text-neutral/75 disabled:text-neutral aria-disabled:text-neutral focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-neutral',
+        },
+        {
+            variant: 'icon',
+            color: 'primary',
+            class: 'text-primary hover:bg-primary-100 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
+        },
+        {
+            variant: 'icon',
+            color: 'secondary',
+            class: 'text-secondary hover:bg-secondary-100 active:text-secondary/75 disabled:text-secondary aria-disabled:text-secondary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary',
+        },
+        {
+            variant: 'icon',
+            color: 'success',
+            class: 'text-success hover:bg-success-100 active:text-success/75 disabled:text-success aria-disabled:text-success focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success',
+        },
+        {
+            variant: 'icon',
+            color: 'info',
+            class: 'text-info hover:bg-info-100 active:text-info/75 disabled:text-info aria-disabled:text-info focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info',
+        },
+        {
+            variant: 'icon',
+            color: 'warning',
+            class: 'text-warning hover:bg-warning-100 active:text-warning/75 disabled:text-warning aria-disabled:text-warning focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning',
+        },
+        {
+            variant: 'icon',
+            color: 'error',
+            class: 'text-error hover:bg-error-100 active:text-error/75 disabled:text-error aria-disabled:text-error focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error',
+        },
+    ],
+    defaultVariants: {
+        color: 'primary',
+        variant: 'solid',
+        size: 'md',
+    },
+}

package/app/assets/css/themes/index.js

@@ -1 +1,2 @@
 export { default as card } from './components/card.js'
+export { default as button } from './components/button.js'

package/app/components/a/a-button-back.vue

@@ -0,0 +1,33 @@
+<script setup>
+const props = defineProps({
+    icon: {
+        type: String,
+        default: 'heroicons:arrow-left-16-solid',
+        required: false,
+    },
+    to: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    isBackAction: {
+        type: Boolean,
+        default: false,
+        required: true,
+    },
+})
+
+const emit = defineEmits(['on-click'])
+const router = useRouter()
+
+function handleClickLeftButtonIcon() {
+    emit('on-click')
+    if (props.isBackAction && !props.to && props.icon.includes('arrow-left')) {
+        router.back()
+    }
+}
+</script>
+
+<template>
+    <UButton :to="to" :icon="icon" variant="icon" color="neutral" @click="handleClickLeftButtonIcon" />
+</template>

package/app/components/b/card/b-card-header.vue

@@ -0,0 +1,113 @@
+<script lang="jsx" setup>
+import { twMerge } from 'tailwind-merge'
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    subtitle: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    hasBorder: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    variant: {
+        type: String,
+        default: 'main', // main, secondary
+        required: false,
+    },
+    variantSubtitle: {
+        type: String,
+        default: 'main',
+        required: false,
+    },
+    hasLeftButtonIcon: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    leftButtonIcon: {
+        type: String,
+        default: 'heroicons:arrow-left-16-solid',
+        required: false,
+    },
+    leftButtonIconTo: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    classTitle: {
+        type: String,
+        default: '',
+        required: false,
+    },
+})
+
+const emit = defineEmits(['on-click-left-button-icon'])
+
+const headingTag = computed(() => {
+    const tags = {
+        main: 'h2',
+        secondary: 'h3',
+    }
+    return tags[props.variant] ?? tags.main
+})
+
+function handleClickLeftButtonIcon() {
+    emit('on-click-left-button-icon')
+}
+</script>
+
+<template>
+    <BCardInner
+        :class="[
+            'flex items-center justify-between',
+            { 'bg-neutral-50': variant === 'secondary' },
+            { 'border-y border-neutral-200': hasBorder && variant === 'secondary' },
+        ]"
+    >
+        <div class="space-y-1">
+            <div class="flex items-center gap-x-3">
+                <AButtonBack
+                    v-if="hasLeftButtonIcon"
+                    :icon="leftButtonIcon"
+                    :To="leftButtonIconTo"
+                    :is-back-action="leftButtonIconTo"
+                    @on-click="handleClickLeftButtonIcon"
+                />
+                <Component
+                    :is="headingTag"
+                    :class="
+                        twMerge([
+                            'font-bold',
+                            variant === 'main' && 'text-xl',
+                            variant === 'secondary' && 'text-lg',
+                            classTitle,
+                        ])
+                    "
+                >
+                    {{ title }}
+                </Component>
+            </div>
+            <p
+                v-if="subtitle"
+                class="text-sm font-medium"
+                :class="{
+                    'text-neutral-400': variant === 'secondary',
+                }"
+            >
+                {{ subtitle }}
+            </p>
+        </div>
+
+        <div v-if="$slots.actions" class="p-0">
+            <slot name="actions" />
+        </div>
+    </BCardInner>
+</template>

package/app/components/{a/a-card.vue → b/card/b-card.vue}

@@ -1,4 +1,4 @@
-<script setup>
+<script lang="jsx" setup>
 import { computed } from 'vue'
 import { twMerge } from 'tailwind-merge'
 

package/app/components/b/modal/b-modal.vue

@@ -0,0 +1,169 @@
+<script lang="ts" setup>
+import { resolveComponent } from 'vue'
+import { twMerge } from 'tailwind-merge'
+
+const UForm = resolveComponent('UForm')
+
+const props = defineProps({
+    state: {
+        type: Object,
+        default: null,
+        required: false,
+    },
+    schema: {
+        type: Object,
+        default: null,
+        required: false,
+    },
+    title: {
+        type: String,
+        default: '',
+        required: true,
+    },
+    text: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    primaryButtonText: {
+        type: String,
+        default: 'Guardar',
+        required: false,
+    },
+    primaryButtonColor: {
+        type: String,
+        default: 'color-primary',
+        required: true,
+    },
+    secondaryButtonText: {
+        type: String,
+        default: 'Cancelar',
+        required: false,
+    },
+    hasFooter: {
+        type: Boolean,
+        default: true,
+        required: false,
+    },
+    width: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    widthButtons: {
+        type: String,
+        default: 'w-40',
+        required: false,
+    },
+    isPrimaryButtonDisabled: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    isBlockButtons: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    classButton: {
+        type: String,
+        default: 'form',
+        required: false,
+    },
+    hasBodyExpanded: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+})
+
+const emit = defineEmits(['on-click-primary-button', 'on-click-secondary-button', 'on-submit'])
+
+// Model
+
+const isOpen = defineModel({
+    type: Boolean,
+    default: false,
+    required: true,
+})
+const formRef = defineModel('formRef', {
+    type: Object,
+    default: () => {},
+    required: false,
+})
+
+// Data
+
+const uiStyles = reactive({})
+
+// Computed
+
+const formProps = computed(() => {
+    // return props.data ? { ref: 'form', state: props.data, onSubmit: handleSubmit } : {}
+    return props.state ? { ref: 'formRef', state: props.state, schema: props.schema } : {}
+})
+
+// Methods
+
+function handleSubmit() {
+    emit('on-submit')
+}
+function handleClickPrimaryButton() {
+    emit('on-click-primary-button')
+}
+function handleClickSecondaryButton() {
+    isOpen.value = false
+    emit('on-click-secondary-button')
+}
+
+// Watch
+
+watch(
+    () => props.width,
+    (width) => {
+        if (!width) return null
+
+        Object.assign(uiStyles, { width: `${props.width}` })
+    },
+    { immediate: true }
+)
+</script>
+
+<template>
+    <UModal v-model="isOpen" :ui="uiStyles">
+        <component :is="state ? UForm : 'section'" v-bind="formProps" @submit="handleSubmit">
+            <BCard :ui="{ footer: { padding: 'p-0 sm:p-0' } }" :has-body-expanded="hasBodyExpanded">
+                <template #header>
+                    <slot v-if="$slots.header" name="header" />
+                    <BCardHeader v-else :title="title" size="sm">
+                        <template #actions>
+                            <UButton icon="heroicons:x-mark" variant="icon" @click="isOpen = false" />
+                        </template>
+                    </BCardHeader>
+                </template>
+
+                <BCardInner v-if="text" class="p-6">
+                    {{ text }}
+                </BCardInner>
+                <slot v-else />
+
+                <template v-if="hasFooter" #footer>
+                    <slot v-if="$slots.footer" name="footer" />
+                    <BCardInner v-else>
+                        <ABlockActionButtons
+                            :class="twMerge('flex justify-start gap-x-2', classButton)"
+                            :primary-button-color="primaryButtonColor"
+                            :primary-button-text="primaryButtonText"
+                            :secondary-button-text="secondaryButtonText"
+                            :width-buttons="widthButtons"
+                            :is-block-buttons="isBlockButtons"
+                            :is-primary-button-disabled="isPrimaryButtonDisabled"
+                            @on-click-primary-button="handleClickPrimaryButton"
+                            @on-click-secondary-button="handleClickSecondaryButton"
+                        />
+                    </BCardInner>
+                </template>
+            </BCard>
+        </component>
+    </UModal>
+</template>

package/app/pages/test.vue

@@ -2,18 +2,58 @@
 
 <template>
     <div class="h-screen">
-        <ACardInner class="h-full">
-            <ACard :has-footer-divider="false">
+        <UContainer>
+            <BCardInner class="h-full">
+                <BCard :has-footer-divider="false">
+                    <template #header>
+                        <h1>Header</h1>
+                    </template>
+                    <p>Body</p>
+                    <template #footer>
+                        <p>Footer</p>
+                    </template>
+                </BCard>
+                <UCard variant="ghost"> oli </UCard>
+                <AButtonBack icon="heroicons:arrow-left-16-solid" is-back-action />
+            </BCardInner>
+
+            <hr class="my-6" />
+
+            <BCard>
                 <template #header>
-                    <h1>Header</h1>
-                </template>
-                <p>Body</p>
-                <template #footer>
-                    <p>Footer</p>
+                    <BCardHeader title="Crear una nueva actividad" subtitle="Subtitle" has-left-button-icon>
+                        <template #actions>
+                            <UButton label="Action" />
+                        </template>
+                    </BCardHeader>
                 </template>
-            </ACard>
-            <UCard variant="ghost"> oli </UCard>
-            test 1
-        </ACardInner>
+
+                <BCardInner>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci eos perspiciatis
+                    asperiores suscipit voluptate magni excepturi. Doloribus in fugit quam voluptatibus,
+                    molestiae maxime illum explicabo ut corrupti, distinctio atque dolor.
+                </BCardInner>
+
+                <BCardHeader
+                    title="Crear una nueva actividad"
+                    subtitle="Subtitle"
+                    variant="secondary"
+                    variant-subtitle="secondary"
+                    class="my-6"
+                    class-title=""
+                    has-border
+                >
+                    <template #actions>
+                        <UButton label="Action" />
+                    </template>
+                </BCardHeader>
+
+                <BCardInner>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci eos perspiciatis
+                    asperiores suscipit voluptate magni excepturi. Doloribus in fugit quam voluptatibus,
+                    molestiae maxime illum explicabo ut corrupti, distinctio atque dolor.
+                </BCardInner>
+            </BCard>
+        </UContainer>
     </div>
 </template>

package/commitlint.config.js

@@ -0,0 +1 @@
+export default { extends: ['@commitlint/config-conventional'] };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-dashboard-devmunity",
   "type": "module",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -9,7 +9,8 @@
     "preview": "nuxt preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "commit": "cz"
+    "commit": "cz",
+    "prepare": "husky"
   },
   "release": {
     "branches": [
@@ -49,6 +50,8 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "1.3.3",
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/config-conventional": "^20.0.0",
     "@nuxtjs/storybook": "8.3.5",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
@@ -56,6 +59,7 @@
     "@storybook/addon-links": "8.0.8",
     "commitizen": "^4.3.1",
     "cz-conventional-changelog": "^3.3.0",
+    "husky": "^9.1.7",
     "prettier": "3.6.2",
     "prettier-plugin-tailwindcss": "0.7.1",
     "semantic-release": "^25.0.1",

package/tsconfig.json

@@ -1,7 +1,8 @@
 {
-  // "extends": "./tsconfig.json",
-  "exclude": [
-    ".nuxt",
-    "node_modules"
-  ]
-}
+    // "extends": "./tsconfig.json",
+    "extends": "./.nuxt/tsconfig.json",
+    // "exclude": [
+    //     ".nuxt",
+    //     "node_modules"
+    // ]
+}

package/app/components/a/a-card.stories.ts

@@ -1,112 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import ACard from './a-card.vue'
-
-const meta = {
-    title: 'Components/ACard',
-    component: ACard,
-    tags: ['autodocs'],
-    argTypes: {
-        variant: {
-            control: 'select',
-            options: ['outline', 'solid', 'soft'],
-        },
-        as: {
-            control: 'text',
-        },
-        hasBodyExpanded: {
-            control: 'boolean',
-        },
-        hasFooterDivider: {
-            control: 'boolean',
-        },
-    },
-    args: {
-        variant: 'outline',
-        as: 'div',
-        hasBodyExpanded: false,
-        hasFooterDivider: true,
-    },
-} satisfies Meta<typeof ACard>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-    render: (args) => ({
-        components: { ACard },
-        setup() {
-            return { args }
-        },
-        template: `
-        <UButton>Button</UButton>
-      <ACard v-bind="args">
-        <template #header>
-          <div class="p-4">
-            <h3 class="text-lg font-semibold">Card Header</h3>
-          </div>
-        </template>
-        <div class="p-4">
-          <p>This is the card body content.</p>
-        </div>
-        <template #footer>
-          <div class="p-4">
-            <button class="px-4 py-2 bg-blue-500 text-white rounded">Action</button>
-          </div>
-        </template>
-      </ACard>
-    `,
-    }),
-}
-
-export const WithoutHeader: Story = {
-    render: (args) => ({
-        components: { ACard },
-        setup() {
-            return { args }
-        },
-        template: `
-      <ACard v-bind="args">
-        <div class="p-4">
-          <p>Card without header</p>
-        </div>
-        <template #footer>
-          <div class="p-4">
-            <button class="px-4 py-2 bg-blue-500 text-white rounded">Action</button>
-          </div>
-        </template>
-      </ACard>
-    `,
-    }),
-}
-
-export const ExpandedBody: Story = {
-    args: {
-        hasBodyExpanded: true,
-    },
-    render: (args) => ({
-        components: { ACard },
-        setup() {
-            return { args }
-        },
-        template: `
-      <div style="height: 400px;">
-        <ACard v-bind="args">
-          <template #header>
-            <div class="p-4">
-              <h3 class="text-lg font-semibold">Expanded Card</h3>
-            </div>
-          </template>
-          <div class="p-4">
-            <p>This card has an expanded body that fills available space.</p>
-            <p class="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-          </div>
-          <template #footer>
-            <div class="p-4">
-              <button class="px-4 py-2 bg-blue-500 text-white rounded">Action</button>
-            </div>
-          </template>
-        </ACard>
-      </div>
-    `,
-    }),
-}