@charpente-ui/vue 1.0.0-beta.4 → 1.1.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Front Factory
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -6,7 +6,23 @@
 
 ## Introduction
 
-Charpente UI is a headless CSS Vue component library.
+A logic-first, headless UI library for Vue 3. The accessibility and logic you need, without the CSS you don't.
+
+## Philosophy: Don't Reinvent the Wheel
+
+**Charpente UI** is built on a simple promise: We handle the boring stuff, you handle the design.
+
+Most UI libraries are bloated because they try to impose a visual style. **Charpente UI** is headless. We provide the
+"chassis" _(HTML structure and complex input logic)_ and you bring the "paint" _(Tailwind, CSS Modules, or
+Styled Components)_.
+
+### Core Principles:
+
+* **Zero Style:** No CSS included. Total freedom for your UI.
+* **Transparent Wrapper:** We don't hide native HTML. Attributes like type, placeholder, or required work exactly like
+  standard HTML via attribute inheritance.
+* **Smart Logic:** Complex components like `CCheckbox` or `CRadio` handle array management and state internally so you
+  don't have to "take the lead" on complex boilerplate.
 
 ## Installing
 
@@ -17,21 +33,61 @@ npm install @charpente-ui/vue
 ## Usage
 
 ```vue
-import { CButton } from '@charpente-ui/vue';
+<script setup>
+    import { ref } from 'vue';
+    import { CInput, CButton, CLabel } from '@charpente-ui/vue';
+
+    const email = ref('');
+</script>
 
 <template>
-    <CButton>Click me</CButton>
+    <div class="form-group">
+        <CLabel for="email-field">Email Address</CLabel>
+
+        <CInput id="email-field" v-model="email" type="email" placeholder="hello@world.com"
+                class="my-custom-input-style"/>
+
+        <CButton @click="submit" class="btn-primary">
+            Subscribe
+        </CButton>
+    </div>
 </template>
 ```
 
+## Component Reference
+
+1. **Form Inputs** **(CInput, CTextarea, CSelect)**
+
+These components are thin wrappers around native elements. They use `v-model` and automatically link with labels via
+`useId()`. Full attribute inheritance.
+
+2. **Selection Logic** _(CCheckbox, CRadio)_
+
+Managing checkbox arrays in Vue can be repetitive. **Charpente UI** simplifies this:
+
+```vue
+<CCheckbox v-model="tags" value="foo"/>
+<CCheckbox v-model="tags" value="bar"/>
+```
+
+3. **Polymorphic Elements** _(CButton)_
+
+The button can change its HTML tag while keeping its behavior.
+
+```vue
+<CButton as="a" href="/login">Login Link</CButton>
+<CButton as="RouterLink" to="/dashboard">Dashboard</CButton>
+```
+
 ## Components
 
-| Name     | Status | Tag         |
-|----------|--------|-------------|
-| Button   | Ready  | `CButton`   |
-| Input    | Ready  | `CInput`    |
-| Label    | Ready  | `CLabel`    |
-| Textarea | Ready  | `CTextarea` |
-| Checkbox | Ready  | `CCheckbox` |
-| Radio    | Ready  | `CRadio`    |
-| Select   | Ready  | `CSelect`   |
+| Name     | Core Logic                                                                       | Tag         | Status |
+|----------|----------------------------------------------------------------------------------|-------------|--------|
+| Button   | **Polymorphic:** Switches tags _(a, button, etc...)_ while keeping logic.        | `CButton`   | Ready  |
+| Checkbox | **Smart Toggle:** Handles array state and booleans natively.                     | `CCheckbox` | Ready  |
+| Form     | **Auto-Submit:** Integrated `preventDefault` and event handling.                 | `CForm`     | Ready  |
+| Input    | **Auto-ID:** Auto-links to labels via `useId()` and full attributes inheritance. | `CInput`    | Ready  |
+| Label    | **Context-Aware:** Simple, accessible binding for any input.                     | `CLabel`    | Ready  |
+| Radio    | **Selection:** Minimalist wrapper for native radio input.                        | `CRadio`    | Ready  |
+| Select   | **Native Wrapper:** Easy option management without the boilerplate.              | `CSelect`   | Ready  |
+| Textarea | **Flexible Binding:** Auto-ID and reactive model management.                     | `CTextarea` | Ready  |

package/dist/charpente.js

@@ -113,10 +113,10 @@ const T = /* @__PURE__ */ n({
   emits: ["update:modelValue"],
   setup(t) {
     const e = m(t, "modelValue"), o = c(), s = p(() => o.id || v());
-    return (l, a) => _((u(), d("textarea", i({
-      id: s.value,
-      "onUpdate:modelValue": a[0] || (a[0] = (r) => e.value = r)
-    }, l.$attrs), null, 16, D)), [
+    return (l, a) => _((u(), d("textarea", i(l.$attrs, {
+      "onUpdate:modelValue": a[0] || (a[0] = (r) => e.value = r),
+      id: s.value
+    }), null, 16, D)), [
       [I, e.value]
     ]);
   }

package/dist/charpente.umd.cjs

@@ -1 +1 @@
-(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.Charpente={},n.Vue))})(this,(function(n,e){"use strict";const i=e.defineComponent({inheritAttrs:!1,__name:"BaseButton",props:{as:{default:"button"}},setup(o){return(t,s)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.as),e.normalizeProps(e.guardReactiveProps(t.$attrs)),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16))}}),m=["id","value"],c=e.defineComponent({inheritAttrs:!1,__name:"BaseCheckbox",props:e.mergeModels({value:{}},{modelValue:{type:[Boolean,Array]},modelModifiers:{}}),emits:["update:modelValue"],setup(o){const t=e.useModel(o,"modelValue"),s=e.useAttrs(),r=e.computed(()=>s.id||e.useId());return(a,l)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",e.mergeProps({type:"checkbox"},a.$attrs,{"onUpdate:modelValue":l[0]||(l[0]=d=>t.value=d),id:r.value,value:o.value}),null,16,m)),[[e.vModelCheckbox,t.value]])}}),p=["id"],u=e.defineComponent({inheritAttrs:!1,__name:"BaseInput",props:{modelValue:{},modelModifiers:{}},emits:["update:modelValue"],setup(o){const t=e.useModel(o,"modelValue"),s=e.useAttrs(),r=e.computed(()=>s.id||e.useId());return(a,l)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",e.mergeProps(a.$attrs,{"onUpdate:modelValue":l[0]||(l[0]=d=>t.value=d),id:r.value}),null,16,p)),[[e.vModelDynamic,t.value]])}}),f=["for"],_=e.defineComponent({inheritAttrs:!1,__name:"BaseLabel",props:{for:{}},setup(o){const t=o;return(s,r)=>(e.openBlock(),e.createElementBlock("label",e.mergeProps(s.$attrs,{for:t.for}),[e.renderSlot(s.$slots,"default")],16,f))}}),h=["id","value"],B=e.defineComponent({inheritAttrs:!1,__name:"BaseRadio",props:e.mergeModels({value:{}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(o){const t=e.useModel(o,"modelValue"),s=e.useAttrs(),r=e.computed(()=>s.id||e.useId());return(a,l)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",e.mergeProps({type:"radio"},a.$attrs,{"onUpdate:modelValue":l[0]||(l[0]=d=>t.value=d),id:r.value,value:o.value}),null,16,h)),[[e.vModelRadio,t.value]])}}),V=["id"],$=e.defineComponent({inheritAttrs:!1,__name:"BaseSelect",props:{modelValue:{},modelModifiers:{}},emits:["update:modelValue"],setup(o){const t=e.useModel(o,"modelValue"),s=e.useAttrs(),r=e.computed(()=>s.id||e.useId());return(a,l)=>e.withDirectives((e.openBlock(),e.createElementBlock("select",e.mergeProps(a.$attrs,{"onUpdate:modelValue":l[0]||(l[0]=d=>t.value=d),id:r.value}),[e.renderSlot(a.$slots,"default")],16,V)),[[e.vModelSelect,t.value]])}}),C=["id"],k=e.defineComponent({inheritAttrs:!1,__name:"BaseTextarea",props:{modelValue:{},modelModifiers:{}},emits:["update:modelValue"],setup(o){const t=e.useModel(o,"modelValue"),s=e.useAttrs(),r=e.computed(()=>s.id||e.useId());return(a,l)=>e.withDirectives((e.openBlock(),e.createElementBlock("textarea",e.mergeProps({id:r.value,"onUpdate:modelValue":l[0]||(l[0]=d=>t.value=d)},a.$attrs),null,16,C)),[[e.vModelText,t.value]])}});n.CButton=i,n.CCheckbox=c,n.CInput=u,n.CLabel=_,n.CRadio=B,n.CSelect=$,n.CTextarea=k,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
+(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.Charpente={},n.Vue))})(this,(function(n,e){"use strict";const i=e.defineComponent({inheritAttrs:!1,__name:"BaseButton",props:{as:{default:"button"}},setup(o){return(t,s)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.as),e.normalizeProps(e.guardReactiveProps(t.$attrs)),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16))}}),m=["id","value"],c=e.defineComponent({inheritAttrs:!1,__name:"BaseCheckbox",props:e.mergeModels({value:{}},{modelValue:{type:[Boolean,Array]},modelModifiers:{}}),emits:["update:modelValue"],setup(o){const t=e.useModel(o,"modelValue"),s=e.useAttrs(),r=e.computed(()=>s.id||e.useId());return(a,l)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",e.mergeProps({type:"checkbox"},a.$attrs,{"onUpdate:modelValue":l[0]||(l[0]=d=>t.value=d),id:r.value,value:o.value}),null,16,m)),[[e.vModelCheckbox,t.value]])}}),p=["id"],u=e.defineComponent({inheritAttrs:!1,__name:"BaseInput",props:{modelValue:{},modelModifiers:{}},emits:["update:modelValue"],setup(o){const t=e.useModel(o,"modelValue"),s=e.useAttrs(),r=e.computed(()=>s.id||e.useId());return(a,l)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",e.mergeProps(a.$attrs,{"onUpdate:modelValue":l[0]||(l[0]=d=>t.value=d),id:r.value}),null,16,p)),[[e.vModelDynamic,t.value]])}}),f=["for"],_=e.defineComponent({inheritAttrs:!1,__name:"BaseLabel",props:{for:{}},setup(o){const t=o;return(s,r)=>(e.openBlock(),e.createElementBlock("label",e.mergeProps(s.$attrs,{for:t.for}),[e.renderSlot(s.$slots,"default")],16,f))}}),h=["id","value"],B=e.defineComponent({inheritAttrs:!1,__name:"BaseRadio",props:e.mergeModels({value:{}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(o){const t=e.useModel(o,"modelValue"),s=e.useAttrs(),r=e.computed(()=>s.id||e.useId());return(a,l)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",e.mergeProps({type:"radio"},a.$attrs,{"onUpdate:modelValue":l[0]||(l[0]=d=>t.value=d),id:r.value,value:o.value}),null,16,h)),[[e.vModelRadio,t.value]])}}),V=["id"],$=e.defineComponent({inheritAttrs:!1,__name:"BaseSelect",props:{modelValue:{},modelModifiers:{}},emits:["update:modelValue"],setup(o){const t=e.useModel(o,"modelValue"),s=e.useAttrs(),r=e.computed(()=>s.id||e.useId());return(a,l)=>e.withDirectives((e.openBlock(),e.createElementBlock("select",e.mergeProps(a.$attrs,{"onUpdate:modelValue":l[0]||(l[0]=d=>t.value=d),id:r.value}),[e.renderSlot(a.$slots,"default")],16,V)),[[e.vModelSelect,t.value]])}}),C=["id"],k=e.defineComponent({inheritAttrs:!1,__name:"BaseTextarea",props:{modelValue:{},modelModifiers:{}},emits:["update:modelValue"],setup(o){const t=e.useModel(o,"modelValue"),s=e.useAttrs(),r=e.computed(()=>s.id||e.useId());return(a,l)=>e.withDirectives((e.openBlock(),e.createElementBlock("textarea",e.mergeProps(a.$attrs,{"onUpdate:modelValue":l[0]||(l[0]=d=>t.value=d),id:r.value}),null,16,C)),[[e.vModelText,t.value]])}});n.CButton=i,n.CCheckbox=c,n.CInput=u,n.CLabel=_,n.CRadio=B,n.CSelect=$,n.CTextarea=k,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));

package/dist/components/BaseCheckbox.d.ts

@@ -1,12 +1,12 @@
 type __VLS_Props = {
-    value?: any;
+    value?: unknown;
 };
 type __VLS_PublicProps = {
-    modelValue?: boolean | any[];
+    modelValue?: boolean | unknown[];
 } & __VLS_Props;
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean | any[]) => any;
+    "update:modelValue": (value: boolean | unknown[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean | any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | unknown[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/BaseForm.d.ts

@@ -0,0 +1,21 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    submit: (event: Event) => any;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    onSubmit?: ((event: Event) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BaseRadio.d.ts

@@ -1,12 +1,12 @@
 type __VLS_Props = {
-    value: any;
+    value: unknown;
 };
 type __VLS_PublicProps = {
-    modelValue?: any;
+    modelValue?: unknown;
 } & __VLS_Props;
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: any) => any;
+    "update:modelValue": (value: unknown) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/BaseSelect.d.ts

@@ -1,5 +1,5 @@
 type __VLS_PublicProps = {
-    modelValue?: any;
+    modelValue?: unknown;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -11,9 +11,9 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: any) => any;
+    "update:modelValue": (value: unknown) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/__tests__/BaseButton.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/BaseCheckbox.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/BaseForm.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/BaseInput.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/BaseLabel.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/BaseSelect.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/BaseTextarea.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,10 +1,14 @@
 {
     "name": "@charpente-ui/vue",
-    "version": "1.0.0-beta.4",
+    "version": "1.1.0",
     "description": "Charpente UI is a headless CSS Vue component library.",
     "type": "module",
     "scripts": {
+        "lint:js": "eslint --fix .",
+        "lint": "npm-run-all --parallel lint:*",
         "build": "vite build",
+        "test": "vitest",
+        "test:coverage": "vitest run --coverage",
         "prepare": "husky && npm run build",
         "release": "semantic-release"
     },
@@ -24,17 +28,43 @@
     "devDependencies": {
         "@commitlint/cli": "^20.4.2",
         "@commitlint/config-conventional": "^20.4.2",
+        "@front-factory/eslint-config": "^1.3.1",
         "@semantic-release/changelog": "^6.0.3",
         "@semantic-release/git": "^10.0.1",
         "@semantic-release/github": "^12.0.6",
         "@vitejs/plugin-vue": "^6.0.4",
+        "@vitest/coverage-v8": "^4.0.18",
+        "@vue/test-utils": "^2.4.6",
         "conventional-changelog-conventionalcommits": "^9.1.0",
+        "eslint": "^10.0.2",
+        "eslint-plugin-vue": "^10.8.0",
         "husky": "^9.1.7",
+        "jsdom": "^28.1.0",
+        "npm-run-all2": "^8.0.4",
         "semantic-release": "^25.0.3",
+        "typescript-eslint": "^8.56.1",
         "vite": "^7.3.1",
         "vite-plugin-dts": "^4.5.4",
+        "vitest": "^4.0.18",
         "vue": "^3.5.29"
     },
+    "keywords": [
+        "vue",
+        "components",
+        "framework",
+        "charpente",
+        "ui",
+        "headless"
+    ],
+    "license": "MIT",
+    "homepage": "https://github.com/charpente-ui/vue",
+    "bugs": {
+        "url": "https://github.com/charpente-ui/vue/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/charpente-ui/vue.git"
+    },
     "files": [
         "dist"
     ],