@poppy-ui/vue 0.5.6 → 0.5.7-beta.0

package/dist/utils/get-validation-message.d.ts

@@ -0,0 +1,22 @@
+type ValidationElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+type ValidationAnyElement = HTMLElement & {
+    validity: ValidityState;
+    checkValidity: () => boolean;
+    value: string;
+    getAttribute: (name: string) => string | null;
+    validationMessage: string;
+};
+/**
+ * Reads element's validity state and returns a localized validation message.
+ * Returns null when element is valid.
+ *
+ * This is a factory function that takes a translation function (t) from vue-i18n.
+ * The consumer is responsible for providing the translation function.
+ *
+ * @param el - The input/textarea/select element to check
+ * @param t - Translation function from vue-i18n's useI18n()
+ * @returns Localized error message or null if valid
+ */
+export declare function getValidationMessage(el: ValidationElement | ValidationAnyElement, t: (key: string, params?: Record<string, string | number>, fallback?: string) => string): string | null;
+export {};
+//# sourceMappingURL=get-validation-message.d.ts.map

package/dist/utils/get-validation-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-validation-message.d.ts","sourceRoot":"","sources":["../../src/utils/get-validation-message.ts"],"names":[],"mappings":"AAAA,KAAK,iBAAiB,GAAG,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,CAAA;AACnF,KAAK,oBAAoB,GAAG,WAAW,GAAG;IACxC,QAAQ,EAAE,aAAa,CAAA;IACvB,aAAa,EAAE,MAAM,OAAO,CAAA;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAA;IAC7C,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAClC,EAAE,EAAE,iBAAiB,GAAG,oBAAoB,EAC5C,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,GACtF,MAAM,GAAG,IAAI,CAqCf"}

package/dist/utils/is-true.d.ts

@@ -0,0 +1,3 @@
+import { Booleanish } from '../types/utils.type';
+export declare function isTrue(value: Booleanish | null | undefined): boolean;
+//# sourceMappingURL=is-true.d.ts.map

package/dist/utils/is-true.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-true.d.ts","sourceRoot":"","sources":["../../src/utils/is-true.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,wBAAgB,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,WAS1D"}

package/dist/utils/path.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Gets a value from an object using a dot-notation path.
+ * Supports nested objects and array indices.
+ *
+ * @example
+ * getByPath({ a: { b: 1 } }, 'a.b') // returns 1
+ * getByPath({ users: [{ name: 'John' }] }, 'users.0.name') // returns 'John'
+ */
+export declare function getByPath(obj: Record<string, unknown>, path: string): unknown;
+/**
+ * Sets a value in an object using a dot-notation path.
+ * Creates intermediate objects/arrays as needed.
+ * Supports nested objects and array indices.
+ *
+ * @example
+ * setByPath({}, 'a.b', 1) // returns { a: { b: 1 } }
+ * setByPath({ users: [] }, 'users.0.name', 'John') // returns { users: [{ name: 'John' }] }
+ */
+export declare function setByPath(obj: Record<string, unknown>, path: string, value: unknown): void;
+//# sourceMappingURL=path.d.ts.map

package/dist/utils/path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["../../src/utils/path.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAmB7E;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CA2C1F"}

package/dist/utils/props.util.d.ts

@@ -0,0 +1,2 @@
+export declare function mergeProps<T extends Record<string, any>, U extends Record<string, any>>(componentProps: T, config: U): T & U;
+//# sourceMappingURL=props.util.d.ts.map

package/dist/utils/props.util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.util.d.ts","sourceRoot":"","sources":["../../src/utils/props.util.ts"],"names":[],"mappings":"AAAA,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACrF,cAAc,EAAE,CAAC,EACjB,MAAM,EAAE,CAAC,GACR,CAAC,GAAG,CAAC,CAOP"}

package/dist/utils/public.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=public.d.ts.map

package/dist/utils/public.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/utils/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAA"}

package/dist/vue.css

@@ -0,0 +1,2 @@
+.dropdown-trigger[data-v-64ff22da]{anchor-name:var(--v4930e95e)}.dropdown[data-v-64ff22da]{position-anchor:var(--v4930e95e)}.accordion-enter-active[data-v-b846d115],.accordion-leave-active[data-v-b846d115]{transition:max-height .2s,opacity .2s;overflow:hidden}.accordion-enter-from[data-v-b846d115],.accordion-leave-to[data-v-b846d115]{opacity:0;max-height:0!important}.select[data-v-9596a9eb]{background-image:initial;background-position:initial;background-size:initial;background-repeat:initial}.anchor-trigger[data-v-9596a9eb]{anchor-name:var(--d83aa5b8)}.anchor-dropdown[data-v-9596a9eb]{position-anchor:var(--d83aa5b8);position-area:block-end center;position-try-fallbacks:flip-block, flip-inline;position-try-order:most-height;left:anchor(left);right:anchor(right);margin-block-start:4px}.dropdown-enter-active[data-v-9596a9eb],.dropdown-leave-active[data-v-9596a9eb]{transition:opacity .15s,transform .15s}.dropdown-enter-from[data-v-9596a9eb],.dropdown-leave-to[data-v-9596a9eb]{opacity:0;transform:translateY(-4px)}.slider-root[data-v-00142c01]{--slider-color:var(--color-base-content);--slider-track-h:.375rem;--slider-thumb-size:1.25rem;width:100%;height:calc(var(--slider-thumb-size) + .5rem);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;align-items:center;display:flex;position:relative}.slider-root.slider--xs[data-v-00142c01]{--slider-track-h:.2rem;--slider-thumb-size:.75rem}.slider-root.slider--sm[data-v-00142c01]{--slider-track-h:.25rem;--slider-thumb-size:1rem}.slider-root.slider--md[data-v-00142c01]{--slider-track-h:.375rem;--slider-thumb-size:1.25rem}.slider-root.slider--lg[data-v-00142c01]{--slider-track-h:.5rem;--slider-thumb-size:1.625rem}.slider-root.slider--xl[data-v-00142c01]{--slider-track-h:.625rem;--slider-thumb-size:2rem}.slider-root.slider--neutral[data-v-00142c01]{--slider-color:var(--color-neutral)}.slider-root.slider--primary[data-v-00142c01]{--slider-color:var(--color-primary)}.slider-root.slider--secondary[data-v-00142c01]{--slider-color:var(--color-secondary)}.slider-root.slider--accent[data-v-00142c01]{--slider-color:var(--color-accent)}.slider-root.slider--info[data-v-00142c01]{--slider-color:var(--color-info)}.slider-root.slider--success[data-v-00142c01]{--slider-color:var(--color-success)}.slider-root.slider--warning[data-v-00142c01]{--slider-color:var(--color-warning)}.slider-root.slider--error[data-v-00142c01]{--slider-color:var(--color-error)}.slider-horizontal[data-v-00142c01]{width:100%}.slider-vertical[data-v-00142c01]{width:var(--slider-thumb-size);flex-direction:column;align-items:center;height:200px}.slider-disabled[data-v-00142c01]{cursor:not-allowed;opacity:.5}.slider-rail[data-v-00142c01]{width:100%;height:var(--slider-track-h);background-color:color-mix(in oklch, var(--slider-color) 20%, var(--color-base-200));pointer-events:none;border-radius:9999px;position:absolute}.slider-vertical .slider-rail[data-v-00142c01]{width:var(--slider-track-h);height:100%}.slider-track[data-v-00142c01]{height:var(--slider-track-h);background-color:var(--slider-color);pointer-events:none;border-radius:9999px;position:absolute}.slider-vertical .slider-track[data-v-00142c01]{width:var(--slider-track-h)}.slider-thumb[data-v-00142c01]{width:var(--slider-thumb-size);height:var(--slider-thumb-size);background-color:var(--color-base-100);border:2px solid var(--slider-color);cursor:pointer;z-index:2;pointer-events:auto;-webkit-user-select:none;user-select:none;border-radius:9999px;position:absolute;box-shadow:0 1px 3px #00000026;display:block!important}.slider-thumb[data-v-00142c01]:hover{transform:scale(1.1);box-shadow:0 2px 6px #0003}.slider-thumb[data-v-00142c01]:active{transform:scale(.95)}.slider-thumb[data-v-00142c01]:focus{outline:2px solid var(--slider-color);outline-offset:2px}.slider-disabled .slider-thumb[data-v-00142c01]{cursor:not-allowed;pointer-events:none;transform:none}.slider-value-label[data-v-00142c01]{background-color:var(--color-base-100);color:var(--color-base-content);white-space:nowrap;opacity:0;visibility:hidden;z-index:3;pointer-events:none;border-radius:4px;padding:4px 8px;font-size:12px;font-weight:500;position:absolute}.slider-value-label-visible[data-v-00142c01]{opacity:1;visibility:visible}.tooltip-anchor[data-v-e6895ed4]{anchor-name:var(--v3d3c7c28);display:inline-block}.tooltip-popover[data-v-e6895ed4]{position-anchor:var(--v3d3c7c28);background:var(--color-base-300);color:var(--color-base-content);white-space:nowrap;inset:unset;border:none;border-radius:.25rem;margin:0;padding:.25rem .5rem;font-size:.875rem;position:fixed}.tooltip-popover.tooltip-top[data-v-e6895ed4]{bottom:calc(anchor(top) + .5rem);justify-self:anchor-center}.tooltip-popover.tooltip-bottom[data-v-e6895ed4]{top:calc(anchor(bottom) + .5rem);justify-self:anchor-center}.tooltip-popover.tooltip-left[data-v-e6895ed4]{right:calc(anchor(left) + .5rem);align-self:anchor-center}.tooltip-popover.tooltip-right[data-v-e6895ed4]{left:calc(anchor(right) + .5rem);align-self:anchor-center}.tooltip-popover.tooltip-neutral[data-v-e6895ed4]{background:var(--color-neutral);color:var(--color-neutral-content)}.tooltip-popover.tooltip-primary[data-v-e6895ed4]{background:var(--color-primary);color:var(--color-primary-content)}.tooltip-popover.tooltip-secondary[data-v-e6895ed4]{background:var(--color-secondary);color:var(--color-secondary-content)}.tooltip-popover.tooltip-accent[data-v-e6895ed4]{background:var(--color-accent);color:var(--color-accent-content)}.tooltip-popover.tooltip-info[data-v-e6895ed4]{background:var(--color-info);color:var(--color-info-content)}.tooltip-popover.tooltip-success[data-v-e6895ed4]{background:var(--color-success);color:var(--color-success-content)}.tooltip-popover.tooltip-warning[data-v-e6895ed4]{background:var(--color-warning);color:var(--color-warning-content)}.tooltip-popover.tooltip-error[data-v-e6895ed4]{background:var(--color-error);color:var(--color-error-content)}
+/*$vite$:1*/

package/package.json

@@ -1,71 +1,121 @@
 {
   "name": "@poppy-ui/vue",
+  "version": "0.5.7-beta.0",
   "type": "module",
-  "version": "0.5.6",
-  "description": "Vue specific wrapper for @poppy-ui/core",
-  "author": "Sukaato <sukaato.dev@proton.me>",
-  "homepage": "https://github.com/CheeseGrinder/poppy-ui#readme",
-  "license": "MIT",
   "repository": {
-    "type": "git",
     "url": "git+https://github.com/CheeseGrinder/poppy-ui.git"
   },
-  "bugs": {
-    "url": "https://github.com/CheeseGrinder/poppy-ui/issues"
-  },
-  "main": "./dist/index.js",
-  "types": "./dist/types/index.d.ts",
   "files": [
-    "dist/",
-    "css/"
-  ],
-  "keywords": [
-    "daisy-ui",
-    "framework",
-    "vue",
-    "stencil",
-    "mobile",
-    "app",
-    "webapp",
-    "electron",
-    "tauri",
-    "progressive web app",
-    "pwa"
+    "dist",
+    "src"
   ],
-  "publishConfig": {
-    "access": "public"
+  "main": "./dist/public.umd.js",
+  "module": "./dist/public.es.js",
+  "types": "./dist/public.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/public.ts",
+      "types": "./dist/public.d.ts",
+      "import": "./dist/public.es.js",
+      "require": "./dist/public.umd.js"
+    },
+    "./components/actions": {
+      "source": "./src/components/actions/public.ts",
+      "types": "./dist/components/actions/public.d.ts",
+      "import": "./dist/components/actions/public.es.js",
+      "require": "./dist/components/actions/public.umd.js"
+    },
+    "./components/app": {
+      "source": "./src/components/app/public.ts",
+      "types": "./dist/components/app/public.d.ts",
+      "import": "./dist/components/app/public.es.js",
+      "require": "./dist/components/app/public.umd.js"
+    },
+    "./components/data": {
+      "source": "./src/components/data/public.ts",
+      "types": "./dist/components/data/public.d.ts",
+      "import": "./dist/components/data/public.es.js",
+      "require": "./dist/components/data/public.umd.js"
+    },
+    "./components/display": {
+      "source": "./src/components/display/public.ts",
+      "types": "./dist/components/display/public.d.ts",
+      "import": "./dist/components/display/public.es.js",
+      "require": "./dist/components/display/public.umd.js"
+    },
+    "./components/feedback": {
+      "source": "./src/components/feedback/public.ts",
+      "types": "./dist/components/feedback/public.d.ts",
+      "import": "./dist/components/feedback/public.es.js",
+      "require": "./dist/components/feedback/public.umd.js"
+    },
+    "./components/layout": {
+      "source": "./src/components/layout/public.ts",
+      "types": "./dist/components/layout/public.d.ts",
+      "import": "./dist/components/layout/public.es.js",
+      "require": "./dist/components/layout/public.umd.js"
+    },
+    "./components/navigation": {
+      "source": "./src/components/navigation/public.ts",
+      "types": "./dist/components/navigation/public.d.ts",
+      "import": "./dist/components/navigation/public.es.js",
+      "require": "./dist/components/navigation/public.umd.js"
+    },
+    "./composables": {
+      "source": "./src/composables/public.ts",
+      "types": "./dist/composables/public.d.ts",
+      "import": "./dist/composables/public.es.js",
+      "require": "./dist/composables/public.umd.js"
+    },
+    "./types": {
+      "source": "./src/types/public.ts",
+      "types": "./dist/types/public.d.ts",
+      "import": "./dist/types/public.es.js",
+      "require": "./dist/types/public.umd.js"
+    }
   },
   "scripts": {
-    "audit-ci": "audit-ci --config ./audit-ci.json",
-    "clean": "rimraf ./css ./dist",
-    "prebuild": "npm run clean",
-    "build": "npm run build:bundle && npm run build:vetur && npm run build:web-types",
-    "postbuild": "npm run copy:css",
-    "build:bundle": "rollup --config rollup.config.mjs",
-    "build:vetur": "node --experimental-json-modules ./scripts/build-vetur.js",
-    "build:web-types": "node --experimental-json-modules ./scripts/build-web-types.js",
-    "copy:css": "node ./scripts/copy-css.js"
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview",
+    "format": "biome format --fix",
+    "format:check": "biome format",
+    "lint": "biome lint --fix",
+    "lint:check": "biome lint",
+    "typecheck": "vue-tsc --build --force --noEmit"
   },
   "dependencies": {
-    "@poppy-ui/core": "0.5.6",
-    "@stencil/vue-output-target": "0.10.7"
+    "@lucide/vue": "^1.17.0",
+    "@tailwindcss/vite": "^4.3.0",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.0",
+    "vue": "^3.5.35"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.9.4",
-    "@poppy-ui/docs": "0.5.6",
-    "@rollup/plugin-typescript": "^12.1.2",
-    "change-case": "^5.4.4",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.38.0",
-    "typescript": "^5.8.2",
-    "vue": "3.5.13"
-  },
-  "vetur": {
-    "tags": "dist/vetur/tags.json",
-    "attributes": "dist/vetur/attributes.json"
-  },
-  "web-types": "dist/web-types.json",
-  "sideEffects": [
-    "css/*.css"
-  ]
+    "@biomejs/biome": "^2.4.16",
+    "@histoire/plugin-vue": "^1.0.0-beta.1",
+    "@intlify/unplugin-vue-i18n": "^11.2.3",
+    "@types/node": "^24.13.1",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitest/browser-playwright": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.8",
+    "@vue/tsconfig": "^0.9.1",
+    "@vueuse/core": "^14.3.0",
+    "daisyui": "^5.5.20",
+    "histoire": "^1.0.0-beta.1",
+    "lefthook": "^2.1.9",
+    "playwright": "^1.60.0",
+    "sass-embedded": "^1.100.0",
+    "typescript": "~6.0.3",
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2",
+    "vite-plugin-vue-devtools": "^8.1.2",
+    "vitest": "^4.1.8",
+    "vue-i18n": "^11.4.5",
+    "vue-router": "^5.1.0",
+    "vue-tsc": "^3.3.3"
+  }
 }

package/src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/ClassWrapper.vue

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { defineComponent, h, type VNode } from 'vue'
+
+export default defineComponent({
+  name: 'ClassWrapper',
+  props: {
+    class: {
+      type: String,
+      default: undefined,
+    },
+    as: {
+      type: String,
+      defauilt: undefined,
+    },
+  },
+  setup(props, { slots }) {
+    const formatChildren = (nodes: VNode[]): VNode[] => {
+      return nodes.flatMap(node => {
+        // Unwrap fragments
+        if (node.type === Symbol.for('v-fgt') && Array.isArray(node.children)) {
+          return formatChildren(node.children as VNode[])
+        }
+
+        // Render for plain text and function component
+        if (typeof node.type === 'function' || node.type === Symbol.for('v-txt')) {
+          return h(props.as || 'div', { class: props.class }, [node])
+        }
+
+        // Render everythings else
+        return h(node, {
+          class: [props.class, node.props?.class].filter(Boolean),
+        })
+      })
+    }
+
+    return () => {
+      const rawChildren = slots.default?.() || []
+      return formatChildren(rawChildren)
+    }
+  },
+})
+</script>

package/src/components/actions/button/Button.story.vue

@@ -0,0 +1,187 @@
+<script lang="ts">
+import { logEvent } from 'histoire/client'
+import { reactive } from 'vue'
+import Button from './Button.vue'
+import type { ButtonProps } from './button.props'
+</script>
+
+<script setup lang="ts">
+const slots = reactive({
+  content: 'Click Me !',
+})
+const state = reactive<ButtonProps>({
+  type: 'button',
+  color: undefined,
+  shape: undefined,
+  disabled: false,
+  loading: false,
+  size: 'md',
+  variant: 'solid',
+  behavior: undefined,
+})
+</script>
+
+<template>
+  <Story group="components" title="Actions/Button" auto-props-disabled>
+    <template #default>
+      <Variant title="Default">
+        <template #controls>
+          <HstText title="Content" v-model="slots.content" />
+          <HstSelect title="Color" v-model="state.color" :options="[{ label: '-- default --', value: undefined }, 'neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error']" />
+          <HstSelect title="Variant" v-model="state.variant" :options="[{ label: '-- default --', value: undefined }, 'solid', 'outline', 'dash', 'soft', 'ghost', 'link']" />
+          <HstSelect title="Behavior" v-model="state.behavior" :options="[{ label: '-- default --', value: undefined }, 'active', 'disabled']" />
+          <HstSelect title="Size" v-model="state.size" :options="[{ label: '-- default --', value: undefined }, 'xs', 'sm', 'md', 'lg', 'xl']" />
+          <HstSelect title="Shape" v-model="state.shape" :options="[{ label: '-- default --', value: undefined }, 'wide', 'block', 'square', 'circle']" />
+          <HstCheckbox title="Loading" v-model="(state.loading as boolean)" />
+          <HstCheckbox title="Disabled" v-model="state.disabled" />
+        </template>
+
+        <Button v-bind="state" @click="logEvent('click', $event)">{{ slots.content }}</Button>
+      </Variant>
+      
+      <Variant title="Colors" >
+        <div class="button-story button-story--colors">
+          <Button @click="logEvent('click', $event)">default</Button>
+          <Button color="neutral" @click="logEvent('click', $event)">neutral</Button>
+          <Button color="primary" @click="logEvent('click', $event)">primary</Button>
+          <Button color="secondary" @click="logEvent('click', $event)">secondary</Button>
+          <Button color="accent" @click="logEvent('click', $event)">accent</Button>
+          <Button color="info" @click="logEvent('click', $event)">info</Button>
+          <Button color="success" @click="logEvent('click', $event)">success</Button>
+          <Button color="warning" @click="logEvent('click', $event)">warning</Button>
+          <Button color="error" @click="logEvent('click', $event)">error</Button>
+        </div>
+      </Variant>
+
+      <Variant title="Sizes">
+        <div class="button-story button-story--sizes">
+            <Button size="xs" @click="logEvent('click', $event)">extra small</Button>
+            <Button size="sm" @click="logEvent('click', $event)">small</Button>
+            <Button size="md" @click="logEvent('click', $event)">medium</Button>
+            <Button size="lg" @click="logEvent('click', $event)">large</Button>
+            <Button size="xl" @click="logEvent('click', $event)">extra large</Button>
+        </div>
+      </Variant>
+
+      <Variant title="Variants">
+        <div class="button-story button-story--variants">
+            <Button @click="logEvent('click', $event)">default</Button>
+            <Button variant="solid" @click="logEvent('click', $event)">solid</Button>
+            <Button variant="outline" @click="logEvent('click', $event)">outline</Button>
+            <Button variant="dash" @click="logEvent('click', $event)">dash</Button>
+            <Button variant="soft" @click="logEvent('click', $event)">soft</Button>
+            <Button variant="ghost" @click="logEvent('click', $event)">ghost</Button>
+            <Button variant="link" @click="logEvent('click', $event)">link</Button>
+        </div>
+      </Variant>
+
+      <Variant title="Shapes">
+        <div class="button-story button-story--shapes">
+            <Button shape="wide" @click="logEvent('click', $event)">wide</Button>
+            <Button shape="block" @click="logEvent('click', $event)">block</Button>
+            <Button shape="square" @click="logEvent('click', $event)">square</Button>
+            <Button shape="circle" @click="logEvent('click', $event)">circle</Button>
+        </div>
+      </Variant>
+
+      <Variant title="Behaviors">
+        <div class="button-story button-story--behaviors">
+            <Button behavior="active" @click="logEvent('click', $event)">active</Button>
+            <Button behavior="disabled" @click="logEvent('click', $event)">disabled</Button>
+        </div>
+      </Variant>
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.button-story {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+</style>
+
+<docs lang="md">
+# Button
+
+## Description
+
+A versatile button component built on top of DaisyUI's `btn` class system.
+Supports all standard HTML button attributes, Vue Router navigation via `to`, configurable colors, variants, sizes and shapes.
+When `to` is provided, the component renders as a `RouterLink` automatically.
+
+## API
+
+### Props
+
+| Prop       | Type                              | Default     | Required | Configurable       | Description                                                                                                       |
+|------------|-----------------------------------|-------------|----------|--------------------|-------------------------------------------------------------------------------------------------------------------|
+| `type`     | `'button' \| 'submit' \| 'reset'` | `'button'`  | :x:      | :x:                | HTML type attribute for the button element.                                                                       |
+| `color`    | `ButtonColor`                     | `undefined` | :x:      | :white_check_mark: | Color theme of the button based on the DaisyUI palette.                                                           |
+| `variant`  | `ButtonVariant`                   | `'solid'`   | :x:      | :white_check_mark: | Visual style of the button.                                                                                       |
+| `size`     | `ButtonSize`                      | `'md'`      | :x:      | :white_check_mark: | Size of the button.                                                                                               |
+| `shape`    | `ButtonShape`                     | `undefined` | :x:      | :white_check_mark: | Shape or width constraint of the button.                                                                          |
+| `behavior` | `ButtonBehavior`                  | `undefined` | :x:      | :x:                | Forces a specific visual state. Use `'disabled'` to apply disabled styling without the HTML `disabled` attribute. |
+| `disabled` | `boolean`                         | `false`     | :x:      | :x:                | Disables interactions. Also sets `aria-disabled="true"` and `tabIndex="-1"` automatically.                        |
+| `loading`  | `Booleanish`                      | `false`     | :x:      | :x:                | Displays a loading spinner and disables the button. Accepts `boolean` or `'true'` / `'false'` strings.            |
+| `to`       | `RouteLocationRaw`                | `undefined` | :x:      | :x:                | If provided, the component renders as a `RouterLink`. Accepts a string path or a route location object.           |
+| `form`     | `string`                          | `undefined` | :x:      | :x:                | ID of the form the button is associated with (native HTML attribute).                                             |
+
+> **Configurable** props can be overridden at the application level via `BUTTON_CONFIG` using the `useComponentConfig` composable, enabling default theming without prop drilling.
+
+> **Configurable**
+> Props can be configured in the Poppy Plugin `install` function via the `Poppy` object. See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+
+### Events
+
+| Event    | Payload      | Description              |
+|----------|--------------|--------------------------|
+| `@click` | `MouseEvent` | Emitted on button click. |
+
+### Slots
+
+| Slot      | Description                                                                                                        |
+|-----------|--------------------------------------------------------------------------------------------------------------------|
+| `default` | Main content of the button (text, icon, etc.).                                                                     |
+| `loading` | Overrides the default spinner shown when `loading` is `true`. Default: `<span class="loading loading-spinner" />`. |
+
+## Note
+
+### Automatic behavior
+
+- **RouterLink rendering** — When `to` is provided, the root element switches from `<button />` to `<RouterLink />` automatically.
+- **Accessibility** — When `behavior="disabled"` or `disabled=true`, the component automatically adds `disabled`, `aria-disabled="true"` and `tabIndex="-1"`.
+- **Attribute inheritance** — Unrecognized HTML attributes (`$attrs`) are forwarded to the root element. The `class` attribute is merged manually to preserve internal class logic.
+
+## Usage
+
+```vue
+<!-- Basic -->
+<Button color="primary">Confirm</Button>
+
+<!-- Loading state -->
+<Button color="primary" :loading="isSubmitting" @click="submit">
+  Submit
+</Button>
+
+<!-- Router navigation -->
+<Button :to="{ name: 'home' }" variant="outline">
+  Back to home
+</Button>
+
+<!-- Submit form -->
+<Button type="submit" color="success" size="lg" shape="wide">
+  Save
+</Button>
+
+<!-- Custom loading slot -->
+<Button color="primary" :loading="true">
+  <template #loading>
+    <MySpinner />
+  </template>
+  Processing…
+</Button>
+```
+</docs>

package/src/components/actions/button/Button.vue

@@ -0,0 +1,103 @@
+<script lang="ts">
+import { useComponentConfig } from '@/composables/use-component-config'
+import type { ComponentClass } from '@/types/utils.type'
+import { clsx, getClass } from '@/utils/build-class.util'
+import { isTrue } from '@/utils/is-true'
+import { computed, useAttrs } from 'vue'
+import { RouterLink } from 'vue-router'
+import { BUTTON_CONFIG } from './button.context'
+import type { ButtonProps } from './button.props'
+import type { ButtonBehavior, ButtonColor, ButtonShape, ButtonSize, ButtonVariant } from './button.types'
+
+const colors: ComponentClass<'btn', ButtonColor> = {
+  neutral: 'btn-neutral',
+  primary: 'btn-primary',
+  secondary: 'btn-secondary',
+  accent: 'btn-accent',
+  info: 'btn-info',
+  success: 'btn-success',
+  warning: 'btn-warning',
+  error: 'btn-error',
+}
+const variants: ComponentClass<'btn', ButtonVariant> = {
+  solid: 'btn-solid',
+  outline: 'btn-outline',
+  dash: 'btn-dash',
+  soft: 'btn-soft',
+  ghost: 'btn-ghost',
+  link: 'btn-link',
+}
+const sizes: ComponentClass<'btn', ButtonSize> = {
+  xs: 'btn-xs',
+  sm: 'btn-sm',
+  md: 'btn-md',
+  lg: 'btn-lg',
+  xl: 'btn-xl',
+}
+const shapes: ComponentClass<'btn', ButtonShape> = {
+  wide: 'btn-wide',
+  block: 'btn-block',
+  square: 'btn-square',
+  circle: 'btn-circle',
+}
+const behaviors: ComponentClass<'btn', ButtonBehavior> = {
+  active: 'btn-active',
+  disabled: 'btn-disabled',
+}
+</script>
+
+<script setup lang="ts">
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const props = defineProps<ButtonProps>()
+const config = useComponentConfig(BUTTON_CONFIG, props, {
+  type: 'button'
+})
+
+const { class: classAttr, ...attrs } = useAttrs()
+
+const tag = computed(() => {
+  return props.to ? RouterLink : 'button'
+})
+
+const extraClasses = computed(() => {
+  return props.disabled ? behaviors.disabled : ''
+})
+
+const disabledAttrs = computed(() =>
+  props.behavior === 'disabled' || isTrue(props.disabled)
+    ? {
+        disabled: true,
+        'aria-disabled': true,
+        tabIndex: -1,
+      }
+    : {},
+)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :type="config.type"
+    class="btn"
+    :class="clsx([
+      getClass(colors, config.color),
+      getClass(variants, config.variant),
+      getClass(sizes, config.size),
+      getClass(shapes, config.shape),
+      getClass(behaviors, config.behavior),
+      extraClasses,
+      classAttr,
+    ])"
+    v-bind="{...attrs, ...disabledAttrs}"
+    :to="config.to"
+    @click="$emit('click', $event)"
+  >
+    <slot v-if="isTrue(config.loading)" name="loading">
+      <span class="loading loading-spinner"></span>
+    </slot>
+    <slot></slot>
+  </component>
+</template>