@vespera-ui/vue 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +45 -0
  2. package/dist/index.cjs +272 -0
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.d.cts +297 -0
  5. package/dist/index.d.ts +297 -0
  6. package/dist/index.js +233 -0
  7. package/dist/index.js.map +1 -0
  8. package/package.json +45 -0
package/README.md ADDED
@@ -0,0 +1,45 @@
1
+ # @vespera-ui/vue
2
+
3
+ [Vue 3](https://vuejs.org) components for the [Vespera](https://github.com/forgialabs/vespera-ui)
4
+ design system. Thin wrappers over `@vespera-ui/css` — they emit the same classes as
5
+ `@vespera-ui/react`, so theming via `.vsp-root` works identically across frameworks.
6
+
7
+ ```bash
8
+ npm install @vespera-ui/vue @vespera-ui/css
9
+ ```
10
+
11
+ ```ts
12
+ // main.ts
13
+ import '@vespera-ui/css';
14
+ ```
15
+
16
+ ```vue
17
+ <script setup lang="ts">
18
+ import { ref } from 'vue';
19
+ import { Button, Field, Input, Switch } from '@vespera-ui/vue';
20
+
21
+ const name = ref('');
22
+ const on = ref(true);
23
+ </script>
24
+
25
+ <template>
26
+ <div class="vsp-root" data-theme="dark">
27
+ <Field label="Name" required>
28
+ <Input v-model="name" placeholder="Ada Lovelace" />
29
+ </Field>
30
+ <Switch v-model="on" />
31
+ <Button variant="primary">Save</Button>
32
+ </div>
33
+ </template>
34
+ ```
35
+
36
+ Form components support `v-model` (`Input`, `Textarea`, `Switch`, `Checkbox`). Buttons expose
37
+ `leading` / `trailing` slots for icons.
38
+
39
+ ## Components
40
+
41
+ `Button`, `IconButton`, `Badge`, `Tag`, `Kbd`, `Divider`, `Spinner`, `Card`, `CardHead`, `Alert`,
42
+ `Field`, `Input`, `Textarea`, `Switch`, `Checkbox`. More are being ported — the CSS layer already
43
+ supports every Vespera component, so wrappers are thin.
44
+
45
+ License: Apache-2.0
package/dist/index.cjs ADDED
@@ -0,0 +1,272 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var index_exports = {};
22
+ __export(index_exports, {
23
+ Alert: () => Alert,
24
+ Badge: () => Badge,
25
+ Button: () => Button,
26
+ Card: () => Card,
27
+ CardHead: () => CardHead,
28
+ Checkbox: () => Checkbox,
29
+ Divider: () => Divider,
30
+ Field: () => Field,
31
+ IconButton: () => IconButton,
32
+ Input: () => Input,
33
+ Kbd: () => Kbd,
34
+ Spinner: () => Spinner,
35
+ Switch: () => Switch,
36
+ Tag: () => Tag,
37
+ Textarea: () => Textarea
38
+ });
39
+ module.exports = __toCommonJS(index_exports);
40
+ var import_vue = require("vue");
41
+ var cx = (...parts) => parts.filter(Boolean).join(" ");
42
+ var Button = (0, import_vue.defineComponent)({
43
+ name: "VspButton",
44
+ props: {
45
+ variant: { type: String, default: "ghost" },
46
+ size: { type: String, default: void 0 },
47
+ loading: Boolean,
48
+ disabled: Boolean
49
+ },
50
+ setup(props, { slots, attrs }) {
51
+ return () => (0, import_vue.h)(
52
+ "button",
53
+ {
54
+ class: cx("btn", `btn-${props.variant}`, props.size === "sm" && "btn-sm"),
55
+ disabled: props.disabled || props.loading,
56
+ ...attrs
57
+ },
58
+ [
59
+ props.loading ? (0, import_vue.h)("span", { class: "ui-spinner", "aria-hidden": "true" }) : slots.leading?.(),
60
+ slots.default?.(),
61
+ slots.trailing?.()
62
+ ]
63
+ );
64
+ }
65
+ });
66
+ var IconButton = (0, import_vue.defineComponent)({
67
+ name: "VspIconButton",
68
+ props: { label: { type: String, default: void 0 } },
69
+ setup(props, { slots, attrs }) {
70
+ return () => (0, import_vue.h)("button", { class: "vsp-icon-btn", type: "button", "aria-label": props.label, ...attrs }, [
71
+ slots.default?.()
72
+ ]);
73
+ }
74
+ });
75
+ var Badge = (0, import_vue.defineComponent)({
76
+ name: "VspBadge",
77
+ props: {
78
+ tone: { type: String, default: "muted" },
79
+ dot: Boolean
80
+ },
81
+ setup(props, { slots }) {
82
+ return () => (0, import_vue.h)("span", { class: cx("badge", `badge-${props.tone}`) }, [
83
+ props.dot ? (0, import_vue.h)("i") : null,
84
+ slots.default?.()
85
+ ]);
86
+ }
87
+ });
88
+ var Tag = (0, import_vue.defineComponent)({
89
+ name: "VspTag",
90
+ emits: ["remove"],
91
+ setup(props, { slots, emit }) {
92
+ return () => (0, import_vue.h)("span", { class: "ui-tag" }, [
93
+ slots.default?.(),
94
+ (0, import_vue.h)("button", { type: "button", "aria-label": "Remove", onClick: () => emit("remove") }, "\xD7")
95
+ ]);
96
+ }
97
+ });
98
+ var Kbd = (0, import_vue.defineComponent)({
99
+ name: "VspKbd",
100
+ setup(_, { slots }) {
101
+ return () => (0, import_vue.h)("kbd", { class: "ui-kbd" }, slots.default?.());
102
+ }
103
+ });
104
+ var Divider = (0, import_vue.defineComponent)({
105
+ name: "VspDivider",
106
+ props: { vertical: Boolean },
107
+ setup(props) {
108
+ return () => (0, import_vue.h)("hr", { class: cx("ui-divider", props.vertical && "v") });
109
+ }
110
+ });
111
+ var Spinner = (0, import_vue.defineComponent)({
112
+ name: "VspSpinner",
113
+ props: { size: { type: String, default: void 0 } },
114
+ setup(props) {
115
+ return () => (0, import_vue.h)("span", { class: cx("ui-spinner", props.size === "lg" && "lg"), "aria-hidden": "true" });
116
+ }
117
+ });
118
+ var Card = (0, import_vue.defineComponent)({
119
+ name: "VspCard",
120
+ props: { pad: Boolean },
121
+ setup(props, { slots, attrs }) {
122
+ return () => (0, import_vue.h)("div", { class: cx("card", props.pad && "card-pad"), ...attrs }, slots.default?.());
123
+ }
124
+ });
125
+ var CardHead = (0, import_vue.defineComponent)({
126
+ name: "VspCardHead",
127
+ props: {
128
+ title: { type: String, default: void 0 },
129
+ desc: { type: String, default: void 0 }
130
+ },
131
+ setup(props, { slots }) {
132
+ return () => (0, import_vue.h)("div", { class: "card-head" }, [
133
+ (0, import_vue.h)("div", { style: { minWidth: 0 } }, [
134
+ (0, import_vue.h)("div", { class: "ttl" }, props.title),
135
+ props.desc ? (0, import_vue.h)("div", { class: "eyebrow", style: { marginTop: "3px" } }, props.desc) : null
136
+ ]),
137
+ slots.right ? (0, import_vue.h)("div", { class: "vsp-top-spacer" }) : null,
138
+ slots.right?.()
139
+ ]);
140
+ }
141
+ });
142
+ var Alert = (0, import_vue.defineComponent)({
143
+ name: "VspAlert",
144
+ props: {
145
+ tone: { type: String, default: "info" },
146
+ title: { type: String, default: void 0 }
147
+ },
148
+ setup(props, { slots }) {
149
+ return () => (0, import_vue.h)("div", { class: cx("ui-alert", props.tone) }, [
150
+ slots.icon?.(),
151
+ (0, import_vue.h)("div", { style: { flex: 1 } }, [
152
+ props.title ? (0, import_vue.h)("div", { class: "ui-alert-title" }, props.title) : null,
153
+ slots.default ? (0, import_vue.h)("div", { class: "ui-alert-body" }, slots.default()) : null
154
+ ]),
155
+ slots.action?.()
156
+ ]);
157
+ }
158
+ });
159
+ var Field = (0, import_vue.defineComponent)({
160
+ name: "VspField",
161
+ props: {
162
+ label: { type: String, default: void 0 },
163
+ required: Boolean,
164
+ hint: { type: String, default: void 0 },
165
+ error: { type: String, default: void 0 },
166
+ htmlFor: { type: String, default: void 0 }
167
+ },
168
+ setup(props, { slots }) {
169
+ return () => (0, import_vue.h)("div", { class: "ui-field" }, [
170
+ props.label ? (0, import_vue.h)("label", { class: "ui-label", for: props.htmlFor }, [
171
+ (0, import_vue.h)("span", null, [
172
+ props.label,
173
+ props.required ? (0, import_vue.h)("span", { class: "req" }, " *") : null
174
+ ])
175
+ ]) : null,
176
+ slots.default?.(),
177
+ props.error || props.hint ? (0, import_vue.h)("span", { class: cx("ui-hint", props.error && "err") }, props.error || props.hint) : null
178
+ ]);
179
+ }
180
+ });
181
+ var Input = (0, import_vue.defineComponent)({
182
+ name: "VspInput",
183
+ props: {
184
+ modelValue: { type: String, default: "" },
185
+ invalid: Boolean
186
+ },
187
+ emits: ["update:modelValue"],
188
+ setup(props, { emit, attrs }) {
189
+ return () => (0, import_vue.h)("input", {
190
+ class: cx("ui-input", props.invalid && "invalid"),
191
+ value: props.modelValue,
192
+ onInput: (e) => emit("update:modelValue", e.target.value),
193
+ ...attrs
194
+ });
195
+ }
196
+ });
197
+ var Textarea = (0, import_vue.defineComponent)({
198
+ name: "VspTextarea",
199
+ props: { modelValue: { type: String, default: "" } },
200
+ emits: ["update:modelValue"],
201
+ setup(props, { attrs, emit }) {
202
+ return () => (0, import_vue.h)("textarea", {
203
+ class: "ui-textarea",
204
+ value: props.modelValue,
205
+ onInput: (e) => emit("update:modelValue", e.target.value),
206
+ ...attrs
207
+ });
208
+ }
209
+ });
210
+ var Switch = (0, import_vue.defineComponent)({
211
+ name: "VspSwitch",
212
+ props: {
213
+ modelValue: Boolean,
214
+ size: { type: String, default: void 0 },
215
+ disabled: Boolean
216
+ },
217
+ emits: ["update:modelValue"],
218
+ setup(props, { emit }) {
219
+ return () => (0, import_vue.h)("button", {
220
+ type: "button",
221
+ disabled: props.disabled,
222
+ class: cx("ui-switch", props.size === "sm" && "sm", props.modelValue && "on"),
223
+ "aria-pressed": String(props.modelValue),
224
+ onClick: () => emit("update:modelValue", !props.modelValue)
225
+ });
226
+ }
227
+ });
228
+ var Checkbox = (0, import_vue.defineComponent)({
229
+ name: "VspCheckbox",
230
+ props: {
231
+ modelValue: Boolean,
232
+ label: { type: String, default: void 0 },
233
+ sub: { type: String, default: void 0 },
234
+ disabled: Boolean
235
+ },
236
+ emits: ["update:modelValue"],
237
+ setup(props, { emit }) {
238
+ const toggle = () => {
239
+ if (!props.disabled) emit("update:modelValue", !props.modelValue);
240
+ };
241
+ return () => (0, import_vue.h)(
242
+ "label",
243
+ { class: "ui-opt", style: { opacity: props.disabled ? 0.5 : 1 }, onClick: toggle },
244
+ [
245
+ (0, import_vue.h)("span", { class: cx("ui-check", props.modelValue && "on") }),
246
+ (0, import_vue.h)("span", null, [
247
+ (0, import_vue.h)("span", null, props.label),
248
+ props.sub ? (0, import_vue.h)("span", { class: "ui-opt-sub" }, props.sub) : null
249
+ ])
250
+ ]
251
+ );
252
+ }
253
+ });
254
+ // Annotate the CommonJS export names for ESM import in node:
255
+ 0 && (module.exports = {
256
+ Alert,
257
+ Badge,
258
+ Button,
259
+ Card,
260
+ CardHead,
261
+ Checkbox,
262
+ Divider,
263
+ Field,
264
+ IconButton,
265
+ Input,
266
+ Kbd,
267
+ Spinner,
268
+ Switch,
269
+ Tag,
270
+ Textarea
271
+ });
272
+ //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @vespera-ui/vue — Vue 3 components for the Vespera design system.\n *\n * Thin wrappers over `@vespera-ui/css`: they emit the same `.vsp-`/`ui-` classes\n * as `@vespera-ui/react`, so theming via `.vsp-root` data-attributes works\n * identically. Import the CSS once and wrap your app in a themed root.\n */\nimport { defineComponent, h, type PropType } from 'vue';\n\nconst cx = (...parts: (string | false | null | undefined)[]) => parts.filter(Boolean).join(' ');\n\nexport type ButtonVariant = 'primary' | 'ghost' | 'subtle' | 'outline' | 'danger';\nexport type BadgeTone = 'pos' | 'neg' | 'warn' | 'info' | 'muted';\nexport type AlertTone = 'info' | 'pos' | 'warn' | 'neg';\n\nexport const Button = defineComponent({\n name: 'VspButton',\n props: {\n variant: { type: String as PropType<ButtonVariant>, default: 'ghost' },\n size: { type: String as PropType<'sm'>, default: undefined },\n loading: Boolean,\n disabled: Boolean,\n },\n setup(props, { slots, attrs }) {\n return () =>\n h(\n 'button',\n {\n class: cx('btn', `btn-${props.variant}`, props.size === 'sm' && 'btn-sm'),\n disabled: props.disabled || props.loading,\n ...attrs,\n },\n [\n props.loading\n ? h('span', { class: 'ui-spinner', 'aria-hidden': 'true' })\n : slots.leading?.(),\n slots.default?.(),\n slots.trailing?.(),\n ],\n );\n },\n});\n\nexport const IconButton = defineComponent({\n name: 'VspIconButton',\n props: { label: { type: String, default: undefined } },\n setup(props, { slots, attrs }) {\n return () =>\n h('button', { class: 'vsp-icon-btn', type: 'button', 'aria-label': props.label, ...attrs }, [\n slots.default?.(),\n ]);\n },\n});\n\nexport const Badge = defineComponent({\n name: 'VspBadge',\n props: {\n tone: { type: String as PropType<BadgeTone>, default: 'muted' },\n dot: Boolean,\n },\n setup(props, { slots }) {\n return () =>\n h('span', { class: cx('badge', `badge-${props.tone}`) }, [\n props.dot ? h('i') : null,\n slots.default?.(),\n ]);\n },\n});\n\nexport const Tag = defineComponent({\n name: 'VspTag',\n emits: ['remove'],\n setup(props, { slots, emit }) {\n return () =>\n h('span', { class: 'ui-tag' }, [\n slots.default?.(),\n h('button', { type: 'button', 'aria-label': 'Remove', onClick: () => emit('remove') }, '×'),\n ]);\n },\n});\n\nexport const Kbd = defineComponent({\n name: 'VspKbd',\n setup(_, { slots }) {\n return () => h('kbd', { class: 'ui-kbd' }, slots.default?.());\n },\n});\n\nexport const Divider = defineComponent({\n name: 'VspDivider',\n props: { vertical: Boolean },\n setup(props) {\n return () => h('hr', { class: cx('ui-divider', props.vertical && 'v') });\n },\n});\n\nexport const Spinner = defineComponent({\n name: 'VspSpinner',\n props: { size: { type: String as PropType<'lg'>, default: undefined } },\n setup(props) {\n return () =>\n h('span', { class: cx('ui-spinner', props.size === 'lg' && 'lg'), 'aria-hidden': 'true' });\n },\n});\n\nexport const Card = defineComponent({\n name: 'VspCard',\n props: { pad: Boolean },\n setup(props, { slots, attrs }) {\n return () =>\n h('div', { class: cx('card', props.pad && 'card-pad'), ...attrs }, slots.default?.());\n },\n});\n\nexport const CardHead = defineComponent({\n name: 'VspCardHead',\n props: {\n title: { type: String, default: undefined },\n desc: { type: String, default: undefined },\n },\n setup(props, { slots }) {\n return () =>\n h('div', { class: 'card-head' }, [\n h('div', { style: { minWidth: 0 } }, [\n h('div', { class: 'ttl' }, props.title),\n props.desc\n ? h('div', { class: 'eyebrow', style: { marginTop: '3px' } }, props.desc)\n : null,\n ]),\n slots.right ? h('div', { class: 'vsp-top-spacer' }) : null,\n slots.right?.(),\n ]);\n },\n});\n\nexport const Alert = defineComponent({\n name: 'VspAlert',\n props: {\n tone: { type: String as PropType<AlertTone>, default: 'info' },\n title: { type: String, default: undefined },\n },\n setup(props, { slots }) {\n return () =>\n h('div', { class: cx('ui-alert', props.tone) }, [\n slots.icon?.(),\n h('div', { style: { flex: 1 } }, [\n props.title ? h('div', { class: 'ui-alert-title' }, props.title) : null,\n slots.default ? h('div', { class: 'ui-alert-body' }, slots.default()) : null,\n ]),\n slots.action?.(),\n ]);\n },\n});\n\nexport const Field = defineComponent({\n name: 'VspField',\n props: {\n label: { type: String, default: undefined },\n required: Boolean,\n hint: { type: String, default: undefined },\n error: { type: String, default: undefined },\n htmlFor: { type: String, default: undefined },\n },\n setup(props, { slots }) {\n return () =>\n h('div', { class: 'ui-field' }, [\n props.label\n ? h('label', { class: 'ui-label', for: props.htmlFor }, [\n h('span', null, [\n props.label,\n props.required ? h('span', { class: 'req' }, ' *') : null,\n ]),\n ])\n : null,\n slots.default?.(),\n props.error || props.hint\n ? h('span', { class: cx('ui-hint', props.error && 'err') }, props.error || props.hint)\n : null,\n ]);\n },\n});\n\nexport const Input = defineComponent({\n name: 'VspInput',\n props: {\n modelValue: { type: String, default: '' },\n invalid: Boolean,\n },\n emits: ['update:modelValue'],\n setup(props, { emit, attrs }) {\n return () =>\n h('input', {\n class: cx('ui-input', props.invalid && 'invalid'),\n value: props.modelValue,\n onInput: (e: Event) => emit('update:modelValue', (e.target as HTMLInputElement).value),\n ...attrs,\n });\n },\n});\n\nexport const Textarea = defineComponent({\n name: 'VspTextarea',\n props: { modelValue: { type: String, default: '' } },\n emits: ['update:modelValue'],\n setup(props, { attrs, emit }) {\n return () =>\n h('textarea', {\n class: 'ui-textarea',\n value: props.modelValue,\n onInput: (e: Event) => emit('update:modelValue', (e.target as HTMLTextAreaElement).value),\n ...attrs,\n });\n },\n});\n\nexport const Switch = defineComponent({\n name: 'VspSwitch',\n props: {\n modelValue: Boolean,\n size: { type: String as PropType<'sm'>, default: undefined },\n disabled: Boolean,\n },\n emits: ['update:modelValue'],\n setup(props, { emit }) {\n return () =>\n h('button', {\n type: 'button',\n disabled: props.disabled,\n class: cx('ui-switch', props.size === 'sm' && 'sm', props.modelValue && 'on'),\n 'aria-pressed': String(props.modelValue),\n onClick: () => emit('update:modelValue', !props.modelValue),\n });\n },\n});\n\nexport const Checkbox = defineComponent({\n name: 'VspCheckbox',\n props: {\n modelValue: Boolean,\n label: { type: String, default: undefined },\n sub: { type: String, default: undefined },\n disabled: Boolean,\n },\n emits: ['update:modelValue'],\n setup(props, { emit }) {\n const toggle = () => {\n if (!props.disabled) emit('update:modelValue', !props.modelValue);\n };\n return () =>\n h(\n 'label',\n { class: 'ui-opt', style: { opacity: props.disabled ? 0.5 : 1 }, onClick: toggle },\n [\n h('span', { class: cx('ui-check', props.modelValue && 'on') }),\n h('span', null, [\n h('span', null, props.label),\n props.sub ? h('span', { class: 'ui-opt-sub' }, props.sub) : null,\n ]),\n ],\n );\n },\n});\n"],"mappings":"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","names":[]}
package/dist/index.d.cts ADDED
@@ -0,0 +1,297 @@
1
+ import * as vue from 'vue';
2
+ import { PropType } from 'vue';
3
+
4
+ type ButtonVariant = 'primary' | 'ghost' | 'subtle' | 'outline' | 'danger';
5
+ type BadgeTone = 'pos' | 'neg' | 'warn' | 'info' | 'muted';
6
+ type AlertTone = 'info' | 'pos' | 'warn' | 'neg';
7
+ declare const Button: vue.DefineComponent<vue.ExtractPropTypes<{
8
+ variant: {
9
+ type: PropType<ButtonVariant>;
10
+ default: string;
11
+ };
12
+ size: {
13
+ type: PropType<"sm">;
14
+ default: undefined;
15
+ };
16
+ loading: BooleanConstructor;
17
+ disabled: BooleanConstructor;
18
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
19
+ [key: string]: any;
20
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
21
+ variant: {
22
+ type: PropType<ButtonVariant>;
23
+ default: string;
24
+ };
25
+ size: {
26
+ type: PropType<"sm">;
27
+ default: undefined;
28
+ };
29
+ loading: BooleanConstructor;
30
+ disabled: BooleanConstructor;
31
+ }>> & Readonly<{}>, {
32
+ loading: boolean;
33
+ disabled: boolean;
34
+ variant: ButtonVariant;
35
+ size: "sm";
36
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
37
+ declare const IconButton: vue.DefineComponent<vue.ExtractPropTypes<{
38
+ label: {
39
+ type: StringConstructor;
40
+ default: undefined;
41
+ };
42
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
43
+ [key: string]: any;
44
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
45
+ label: {
46
+ type: StringConstructor;
47
+ default: undefined;
48
+ };
49
+ }>> & Readonly<{}>, {
50
+ label: string;
51
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
52
+ declare const Badge: vue.DefineComponent<vue.ExtractPropTypes<{
53
+ tone: {
54
+ type: PropType<BadgeTone>;
55
+ default: string;
56
+ };
57
+ dot: BooleanConstructor;
58
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
59
+ [key: string]: any;
60
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
61
+ tone: {
62
+ type: PropType<BadgeTone>;
63
+ default: string;
64
+ };
65
+ dot: BooleanConstructor;
66
+ }>> & Readonly<{}>, {
67
+ dot: boolean;
68
+ tone: BadgeTone;
69
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
70
+ declare const Tag: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
71
+ [key: string]: any;
72
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "remove"[], "remove", vue.PublicProps, Readonly<{}> & Readonly<{
73
+ onRemove?: ((...args: any[]) => any) | undefined;
74
+ }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
75
+ declare const Kbd: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
76
+ [key: string]: any;
77
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
78
+ declare const Divider: vue.DefineComponent<vue.ExtractPropTypes<{
79
+ vertical: BooleanConstructor;
80
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
81
+ [key: string]: any;
82
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
83
+ vertical: BooleanConstructor;
84
+ }>> & Readonly<{}>, {
85
+ vertical: boolean;
86
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
87
+ declare const Spinner: vue.DefineComponent<vue.ExtractPropTypes<{
88
+ size: {
89
+ type: PropType<"lg">;
90
+ default: undefined;
91
+ };
92
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
93
+ [key: string]: any;
94
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
95
+ size: {
96
+ type: PropType<"lg">;
97
+ default: undefined;
98
+ };
99
+ }>> & Readonly<{}>, {
100
+ size: "lg";
101
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
102
+ declare const Card: vue.DefineComponent<vue.ExtractPropTypes<{
103
+ pad: BooleanConstructor;
104
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
105
+ [key: string]: any;
106
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
107
+ pad: BooleanConstructor;
108
+ }>> & Readonly<{}>, {
109
+ pad: boolean;
110
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
111
+ declare const CardHead: vue.DefineComponent<vue.ExtractPropTypes<{
112
+ title: {
113
+ type: StringConstructor;
114
+ default: undefined;
115
+ };
116
+ desc: {
117
+ type: StringConstructor;
118
+ default: undefined;
119
+ };
120
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
121
+ [key: string]: any;
122
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
123
+ title: {
124
+ type: StringConstructor;
125
+ default: undefined;
126
+ };
127
+ desc: {
128
+ type: StringConstructor;
129
+ default: undefined;
130
+ };
131
+ }>> & Readonly<{}>, {
132
+ title: string;
133
+ desc: string;
134
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
135
+ declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
136
+ tone: {
137
+ type: PropType<AlertTone>;
138
+ default: string;
139
+ };
140
+ title: {
141
+ type: StringConstructor;
142
+ default: undefined;
143
+ };
144
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
145
+ [key: string]: any;
146
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
147
+ tone: {
148
+ type: PropType<AlertTone>;
149
+ default: string;
150
+ };
151
+ title: {
152
+ type: StringConstructor;
153
+ default: undefined;
154
+ };
155
+ }>> & Readonly<{}>, {
156
+ title: string;
157
+ tone: AlertTone;
158
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
159
+ declare const Field: vue.DefineComponent<vue.ExtractPropTypes<{
160
+ label: {
161
+ type: StringConstructor;
162
+ default: undefined;
163
+ };
164
+ required: BooleanConstructor;
165
+ hint: {
166
+ type: StringConstructor;
167
+ default: undefined;
168
+ };
169
+ error: {
170
+ type: StringConstructor;
171
+ default: undefined;
172
+ };
173
+ htmlFor: {
174
+ type: StringConstructor;
175
+ default: undefined;
176
+ };
177
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
178
+ [key: string]: any;
179
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
180
+ label: {
181
+ type: StringConstructor;
182
+ default: undefined;
183
+ };
184
+ required: BooleanConstructor;
185
+ hint: {
186
+ type: StringConstructor;
187
+ default: undefined;
188
+ };
189
+ error: {
190
+ type: StringConstructor;
191
+ default: undefined;
192
+ };
193
+ htmlFor: {
194
+ type: StringConstructor;
195
+ default: undefined;
196
+ };
197
+ }>> & Readonly<{}>, {
198
+ label: string;
199
+ error: string;
200
+ required: boolean;
201
+ hint: string;
202
+ htmlFor: string;
203
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
204
+ declare const Input: vue.DefineComponent<vue.ExtractPropTypes<{
205
+ modelValue: {
206
+ type: StringConstructor;
207
+ default: string;
208
+ };
209
+ invalid: BooleanConstructor;
210
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
211
+ [key: string]: any;
212
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
213
+ modelValue: {
214
+ type: StringConstructor;
215
+ default: string;
216
+ };
217
+ invalid: BooleanConstructor;
218
+ }>> & Readonly<{
219
+ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
220
+ }>, {
221
+ invalid: boolean;
222
+ modelValue: string;
223
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
224
+ declare const Textarea: vue.DefineComponent<vue.ExtractPropTypes<{
225
+ modelValue: {
226
+ type: StringConstructor;
227
+ default: string;
228
+ };
229
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
230
+ [key: string]: any;
231
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
232
+ modelValue: {
233
+ type: StringConstructor;
234
+ default: string;
235
+ };
236
+ }>> & Readonly<{
237
+ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
238
+ }>, {
239
+ modelValue: string;
240
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
241
+ declare const Switch: vue.DefineComponent<vue.ExtractPropTypes<{
242
+ modelValue: BooleanConstructor;
243
+ size: {
244
+ type: PropType<"sm">;
245
+ default: undefined;
246
+ };
247
+ disabled: BooleanConstructor;
248
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
249
+ [key: string]: any;
250
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
251
+ modelValue: BooleanConstructor;
252
+ size: {
253
+ type: PropType<"sm">;
254
+ default: undefined;
255
+ };
256
+ disabled: BooleanConstructor;
257
+ }>> & Readonly<{
258
+ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
259
+ }>, {
260
+ disabled: boolean;
261
+ size: "sm";
262
+ modelValue: boolean;
263
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
264
+ declare const Checkbox: vue.DefineComponent<vue.ExtractPropTypes<{
265
+ modelValue: BooleanConstructor;
266
+ label: {
267
+ type: StringConstructor;
268
+ default: undefined;
269
+ };
270
+ sub: {
271
+ type: StringConstructor;
272
+ default: undefined;
273
+ };
274
+ disabled: BooleanConstructor;
275
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
276
+ [key: string]: any;
277
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
278
+ modelValue: BooleanConstructor;
279
+ label: {
280
+ type: StringConstructor;
281
+ default: undefined;
282
+ };
283
+ sub: {
284
+ type: StringConstructor;
285
+ default: undefined;
286
+ };
287
+ disabled: BooleanConstructor;
288
+ }>> & Readonly<{
289
+ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
290
+ }>, {
291
+ disabled: boolean;
292
+ label: string;
293
+ sub: string;
294
+ modelValue: boolean;
295
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
296
+
297
+ export { Alert, type AlertTone, Badge, type BadgeTone, Button, type ButtonVariant, Card, CardHead, Checkbox, Divider, Field, IconButton, Input, Kbd, Spinner, Switch, Tag, Textarea };
package/dist/index.d.ts ADDED
@@ -0,0 +1,297 @@
1
+ import * as vue from 'vue';
2
+ import { PropType } from 'vue';
3
+
4
+ type ButtonVariant = 'primary' | 'ghost' | 'subtle' | 'outline' | 'danger';
5
+ type BadgeTone = 'pos' | 'neg' | 'warn' | 'info' | 'muted';
6
+ type AlertTone = 'info' | 'pos' | 'warn' | 'neg';
7
+ declare const Button: vue.DefineComponent<vue.ExtractPropTypes<{
8
+ variant: {
9
+ type: PropType<ButtonVariant>;
10
+ default: string;
11
+ };
12
+ size: {
13
+ type: PropType<"sm">;
14
+ default: undefined;
15
+ };
16
+ loading: BooleanConstructor;
17
+ disabled: BooleanConstructor;
18
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
19
+ [key: string]: any;
20
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
21
+ variant: {
22
+ type: PropType<ButtonVariant>;
23
+ default: string;
24
+ };
25
+ size: {
26
+ type: PropType<"sm">;
27
+ default: undefined;
28
+ };
29
+ loading: BooleanConstructor;
30
+ disabled: BooleanConstructor;
31
+ }>> & Readonly<{}>, {
32
+ loading: boolean;
33
+ disabled: boolean;
34
+ variant: ButtonVariant;
35
+ size: "sm";
36
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
37
+ declare const IconButton: vue.DefineComponent<vue.ExtractPropTypes<{
38
+ label: {
39
+ type: StringConstructor;
40
+ default: undefined;
41
+ };
42
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
43
+ [key: string]: any;
44
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
45
+ label: {
46
+ type: StringConstructor;
47
+ default: undefined;
48
+ };
49
+ }>> & Readonly<{}>, {
50
+ label: string;
51
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
52
+ declare const Badge: vue.DefineComponent<vue.ExtractPropTypes<{
53
+ tone: {
54
+ type: PropType<BadgeTone>;
55
+ default: string;
56
+ };
57
+ dot: BooleanConstructor;
58
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
59
+ [key: string]: any;
60
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
61
+ tone: {
62
+ type: PropType<BadgeTone>;
63
+ default: string;
64
+ };
65
+ dot: BooleanConstructor;
66
+ }>> & Readonly<{}>, {
67
+ dot: boolean;
68
+ tone: BadgeTone;
69
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
70
+ declare const Tag: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
71
+ [key: string]: any;
72
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "remove"[], "remove", vue.PublicProps, Readonly<{}> & Readonly<{
73
+ onRemove?: ((...args: any[]) => any) | undefined;
74
+ }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
75
+ declare const Kbd: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
76
+ [key: string]: any;
77
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
78
+ declare const Divider: vue.DefineComponent<vue.ExtractPropTypes<{
79
+ vertical: BooleanConstructor;
80
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
81
+ [key: string]: any;
82
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
83
+ vertical: BooleanConstructor;
84
+ }>> & Readonly<{}>, {
85
+ vertical: boolean;
86
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
87
+ declare const Spinner: vue.DefineComponent<vue.ExtractPropTypes<{
88
+ size: {
89
+ type: PropType<"lg">;
90
+ default: undefined;
91
+ };
92
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
93
+ [key: string]: any;
94
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
95
+ size: {
96
+ type: PropType<"lg">;
97
+ default: undefined;
98
+ };
99
+ }>> & Readonly<{}>, {
100
+ size: "lg";
101
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
102
+ declare const Card: vue.DefineComponent<vue.ExtractPropTypes<{
103
+ pad: BooleanConstructor;
104
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
105
+ [key: string]: any;
106
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
107
+ pad: BooleanConstructor;
108
+ }>> & Readonly<{}>, {
109
+ pad: boolean;
110
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
111
+ declare const CardHead: vue.DefineComponent<vue.ExtractPropTypes<{
112
+ title: {
113
+ type: StringConstructor;
114
+ default: undefined;
115
+ };
116
+ desc: {
117
+ type: StringConstructor;
118
+ default: undefined;
119
+ };
120
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
121
+ [key: string]: any;
122
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
123
+ title: {
124
+ type: StringConstructor;
125
+ default: undefined;
126
+ };
127
+ desc: {
128
+ type: StringConstructor;
129
+ default: undefined;
130
+ };
131
+ }>> & Readonly<{}>, {
132
+ title: string;
133
+ desc: string;
134
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
135
+ declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
136
+ tone: {
137
+ type: PropType<AlertTone>;
138
+ default: string;
139
+ };
140
+ title: {
141
+ type: StringConstructor;
142
+ default: undefined;
143
+ };
144
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
145
+ [key: string]: any;
146
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
147
+ tone: {
148
+ type: PropType<AlertTone>;
149
+ default: string;
150
+ };
151
+ title: {
152
+ type: StringConstructor;
153
+ default: undefined;
154
+ };
155
+ }>> & Readonly<{}>, {
156
+ title: string;
157
+ tone: AlertTone;
158
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
159
+ declare const Field: vue.DefineComponent<vue.ExtractPropTypes<{
160
+ label: {
161
+ type: StringConstructor;
162
+ default: undefined;
163
+ };
164
+ required: BooleanConstructor;
165
+ hint: {
166
+ type: StringConstructor;
167
+ default: undefined;
168
+ };
169
+ error: {
170
+ type: StringConstructor;
171
+ default: undefined;
172
+ };
173
+ htmlFor: {
174
+ type: StringConstructor;
175
+ default: undefined;
176
+ };
177
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
178
+ [key: string]: any;
179
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
180
+ label: {
181
+ type: StringConstructor;
182
+ default: undefined;
183
+ };
184
+ required: BooleanConstructor;
185
+ hint: {
186
+ type: StringConstructor;
187
+ default: undefined;
188
+ };
189
+ error: {
190
+ type: StringConstructor;
191
+ default: undefined;
192
+ };
193
+ htmlFor: {
194
+ type: StringConstructor;
195
+ default: undefined;
196
+ };
197
+ }>> & Readonly<{}>, {
198
+ label: string;
199
+ error: string;
200
+ required: boolean;
201
+ hint: string;
202
+ htmlFor: string;
203
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
204
+ declare const Input: vue.DefineComponent<vue.ExtractPropTypes<{
205
+ modelValue: {
206
+ type: StringConstructor;
207
+ default: string;
208
+ };
209
+ invalid: BooleanConstructor;
210
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
211
+ [key: string]: any;
212
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
213
+ modelValue: {
214
+ type: StringConstructor;
215
+ default: string;
216
+ };
217
+ invalid: BooleanConstructor;
218
+ }>> & Readonly<{
219
+ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
220
+ }>, {
221
+ invalid: boolean;
222
+ modelValue: string;
223
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
224
+ declare const Textarea: vue.DefineComponent<vue.ExtractPropTypes<{
225
+ modelValue: {
226
+ type: StringConstructor;
227
+ default: string;
228
+ };
229
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
230
+ [key: string]: any;
231
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
232
+ modelValue: {
233
+ type: StringConstructor;
234
+ default: string;
235
+ };
236
+ }>> & Readonly<{
237
+ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
238
+ }>, {
239
+ modelValue: string;
240
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
241
+ declare const Switch: vue.DefineComponent<vue.ExtractPropTypes<{
242
+ modelValue: BooleanConstructor;
243
+ size: {
244
+ type: PropType<"sm">;
245
+ default: undefined;
246
+ };
247
+ disabled: BooleanConstructor;
248
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
249
+ [key: string]: any;
250
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
251
+ modelValue: BooleanConstructor;
252
+ size: {
253
+ type: PropType<"sm">;
254
+ default: undefined;
255
+ };
256
+ disabled: BooleanConstructor;
257
+ }>> & Readonly<{
258
+ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
259
+ }>, {
260
+ disabled: boolean;
261
+ size: "sm";
262
+ modelValue: boolean;
263
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
264
+ declare const Checkbox: vue.DefineComponent<vue.ExtractPropTypes<{
265
+ modelValue: BooleanConstructor;
266
+ label: {
267
+ type: StringConstructor;
268
+ default: undefined;
269
+ };
270
+ sub: {
271
+ type: StringConstructor;
272
+ default: undefined;
273
+ };
274
+ disabled: BooleanConstructor;
275
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
276
+ [key: string]: any;
277
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
278
+ modelValue: BooleanConstructor;
279
+ label: {
280
+ type: StringConstructor;
281
+ default: undefined;
282
+ };
283
+ sub: {
284
+ type: StringConstructor;
285
+ default: undefined;
286
+ };
287
+ disabled: BooleanConstructor;
288
+ }>> & Readonly<{
289
+ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
290
+ }>, {
291
+ disabled: boolean;
292
+ label: string;
293
+ sub: string;
294
+ modelValue: boolean;
295
+ }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
296
+
297
+ export { Alert, type AlertTone, Badge, type BadgeTone, Button, type ButtonVariant, Card, CardHead, Checkbox, Divider, Field, IconButton, Input, Kbd, Spinner, Switch, Tag, Textarea };
package/dist/index.js ADDED
@@ -0,0 +1,233 @@
1
+ // src/index.ts
2
+ import { defineComponent, h } from "vue";
3
+ var cx = (...parts) => parts.filter(Boolean).join(" ");
4
+ var Button = defineComponent({
5
+ name: "VspButton",
6
+ props: {
7
+ variant: { type: String, default: "ghost" },
8
+ size: { type: String, default: void 0 },
9
+ loading: Boolean,
10
+ disabled: Boolean
11
+ },
12
+ setup(props, { slots, attrs }) {
13
+ return () => h(
14
+ "button",
15
+ {
16
+ class: cx("btn", `btn-${props.variant}`, props.size === "sm" && "btn-sm"),
17
+ disabled: props.disabled || props.loading,
18
+ ...attrs
19
+ },
20
+ [
21
+ props.loading ? h("span", { class: "ui-spinner", "aria-hidden": "true" }) : slots.leading?.(),
22
+ slots.default?.(),
23
+ slots.trailing?.()
24
+ ]
25
+ );
26
+ }
27
+ });
28
+ var IconButton = defineComponent({
29
+ name: "VspIconButton",
30
+ props: { label: { type: String, default: void 0 } },
31
+ setup(props, { slots, attrs }) {
32
+ return () => h("button", { class: "vsp-icon-btn", type: "button", "aria-label": props.label, ...attrs }, [
33
+ slots.default?.()
34
+ ]);
35
+ }
36
+ });
37
+ var Badge = defineComponent({
38
+ name: "VspBadge",
39
+ props: {
40
+ tone: { type: String, default: "muted" },
41
+ dot: Boolean
42
+ },
43
+ setup(props, { slots }) {
44
+ return () => h("span", { class: cx("badge", `badge-${props.tone}`) }, [
45
+ props.dot ? h("i") : null,
46
+ slots.default?.()
47
+ ]);
48
+ }
49
+ });
50
+ var Tag = defineComponent({
51
+ name: "VspTag",
52
+ emits: ["remove"],
53
+ setup(props, { slots, emit }) {
54
+ return () => h("span", { class: "ui-tag" }, [
55
+ slots.default?.(),
56
+ h("button", { type: "button", "aria-label": "Remove", onClick: () => emit("remove") }, "\xD7")
57
+ ]);
58
+ }
59
+ });
60
+ var Kbd = defineComponent({
61
+ name: "VspKbd",
62
+ setup(_, { slots }) {
63
+ return () => h("kbd", { class: "ui-kbd" }, slots.default?.());
64
+ }
65
+ });
66
+ var Divider = defineComponent({
67
+ name: "VspDivider",
68
+ props: { vertical: Boolean },
69
+ setup(props) {
70
+ return () => h("hr", { class: cx("ui-divider", props.vertical && "v") });
71
+ }
72
+ });
73
+ var Spinner = defineComponent({
74
+ name: "VspSpinner",
75
+ props: { size: { type: String, default: void 0 } },
76
+ setup(props) {
77
+ return () => h("span", { class: cx("ui-spinner", props.size === "lg" && "lg"), "aria-hidden": "true" });
78
+ }
79
+ });
80
+ var Card = defineComponent({
81
+ name: "VspCard",
82
+ props: { pad: Boolean },
83
+ setup(props, { slots, attrs }) {
84
+ return () => h("div", { class: cx("card", props.pad && "card-pad"), ...attrs }, slots.default?.());
85
+ }
86
+ });
87
+ var CardHead = defineComponent({
88
+ name: "VspCardHead",
89
+ props: {
90
+ title: { type: String, default: void 0 },
91
+ desc: { type: String, default: void 0 }
92
+ },
93
+ setup(props, { slots }) {
94
+ return () => h("div", { class: "card-head" }, [
95
+ h("div", { style: { minWidth: 0 } }, [
96
+ h("div", { class: "ttl" }, props.title),
97
+ props.desc ? h("div", { class: "eyebrow", style: { marginTop: "3px" } }, props.desc) : null
98
+ ]),
99
+ slots.right ? h("div", { class: "vsp-top-spacer" }) : null,
100
+ slots.right?.()
101
+ ]);
102
+ }
103
+ });
104
+ var Alert = defineComponent({
105
+ name: "VspAlert",
106
+ props: {
107
+ tone: { type: String, default: "info" },
108
+ title: { type: String, default: void 0 }
109
+ },
110
+ setup(props, { slots }) {
111
+ return () => h("div", { class: cx("ui-alert", props.tone) }, [
112
+ slots.icon?.(),
113
+ h("div", { style: { flex: 1 } }, [
114
+ props.title ? h("div", { class: "ui-alert-title" }, props.title) : null,
115
+ slots.default ? h("div", { class: "ui-alert-body" }, slots.default()) : null
116
+ ]),
117
+ slots.action?.()
118
+ ]);
119
+ }
120
+ });
121
+ var Field = defineComponent({
122
+ name: "VspField",
123
+ props: {
124
+ label: { type: String, default: void 0 },
125
+ required: Boolean,
126
+ hint: { type: String, default: void 0 },
127
+ error: { type: String, default: void 0 },
128
+ htmlFor: { type: String, default: void 0 }
129
+ },
130
+ setup(props, { slots }) {
131
+ return () => h("div", { class: "ui-field" }, [
132
+ props.label ? h("label", { class: "ui-label", for: props.htmlFor }, [
133
+ h("span", null, [
134
+ props.label,
135
+ props.required ? h("span", { class: "req" }, " *") : null
136
+ ])
137
+ ]) : null,
138
+ slots.default?.(),
139
+ props.error || props.hint ? h("span", { class: cx("ui-hint", props.error && "err") }, props.error || props.hint) : null
140
+ ]);
141
+ }
142
+ });
143
+ var Input = defineComponent({
144
+ name: "VspInput",
145
+ props: {
146
+ modelValue: { type: String, default: "" },
147
+ invalid: Boolean
148
+ },
149
+ emits: ["update:modelValue"],
150
+ setup(props, { emit, attrs }) {
151
+ return () => h("input", {
152
+ class: cx("ui-input", props.invalid && "invalid"),
153
+ value: props.modelValue,
154
+ onInput: (e) => emit("update:modelValue", e.target.value),
155
+ ...attrs
156
+ });
157
+ }
158
+ });
159
+ var Textarea = defineComponent({
160
+ name: "VspTextarea",
161
+ props: { modelValue: { type: String, default: "" } },
162
+ emits: ["update:modelValue"],
163
+ setup(props, { attrs, emit }) {
164
+ return () => h("textarea", {
165
+ class: "ui-textarea",
166
+ value: props.modelValue,
167
+ onInput: (e) => emit("update:modelValue", e.target.value),
168
+ ...attrs
169
+ });
170
+ }
171
+ });
172
+ var Switch = defineComponent({
173
+ name: "VspSwitch",
174
+ props: {
175
+ modelValue: Boolean,
176
+ size: { type: String, default: void 0 },
177
+ disabled: Boolean
178
+ },
179
+ emits: ["update:modelValue"],
180
+ setup(props, { emit }) {
181
+ return () => h("button", {
182
+ type: "button",
183
+ disabled: props.disabled,
184
+ class: cx("ui-switch", props.size === "sm" && "sm", props.modelValue && "on"),
185
+ "aria-pressed": String(props.modelValue),
186
+ onClick: () => emit("update:modelValue", !props.modelValue)
187
+ });
188
+ }
189
+ });
190
+ var Checkbox = defineComponent({
191
+ name: "VspCheckbox",
192
+ props: {
193
+ modelValue: Boolean,
194
+ label: { type: String, default: void 0 },
195
+ sub: { type: String, default: void 0 },
196
+ disabled: Boolean
197
+ },
198
+ emits: ["update:modelValue"],
199
+ setup(props, { emit }) {
200
+ const toggle = () => {
201
+ if (!props.disabled) emit("update:modelValue", !props.modelValue);
202
+ };
203
+ return () => h(
204
+ "label",
205
+ { class: "ui-opt", style: { opacity: props.disabled ? 0.5 : 1 }, onClick: toggle },
206
+ [
207
+ h("span", { class: cx("ui-check", props.modelValue && "on") }),
208
+ h("span", null, [
209
+ h("span", null, props.label),
210
+ props.sub ? h("span", { class: "ui-opt-sub" }, props.sub) : null
211
+ ])
212
+ ]
213
+ );
214
+ }
215
+ });
216
+ export {
217
+ Alert,
218
+ Badge,
219
+ Button,
220
+ Card,
221
+ CardHead,
222
+ Checkbox,
223
+ Divider,
224
+ Field,
225
+ IconButton,
226
+ Input,
227
+ Kbd,
228
+ Spinner,
229
+ Switch,
230
+ Tag,
231
+ Textarea
232
+ };
233
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @vespera-ui/vue — Vue 3 components for the Vespera design system.\n *\n * Thin wrappers over `@vespera-ui/css`: they emit the same `.vsp-`/`ui-` classes\n * as `@vespera-ui/react`, so theming via `.vsp-root` data-attributes works\n * identically. Import the CSS once and wrap your app in a themed root.\n */\nimport { defineComponent, h, type PropType } from 'vue';\n\nconst cx = (...parts: (string | false | null | undefined)[]) => parts.filter(Boolean).join(' ');\n\nexport type ButtonVariant = 'primary' | 'ghost' | 'subtle' | 'outline' | 'danger';\nexport type BadgeTone = 'pos' | 'neg' | 'warn' | 'info' | 'muted';\nexport type AlertTone = 'info' | 'pos' | 'warn' | 'neg';\n\nexport const Button = defineComponent({\n name: 'VspButton',\n props: {\n variant: { type: String as PropType<ButtonVariant>, default: 'ghost' },\n size: { type: String as PropType<'sm'>, default: undefined },\n loading: Boolean,\n disabled: Boolean,\n },\n setup(props, { slots, attrs }) {\n return () =>\n h(\n 'button',\n {\n class: cx('btn', `btn-${props.variant}`, props.size === 'sm' && 'btn-sm'),\n disabled: props.disabled || props.loading,\n ...attrs,\n },\n [\n props.loading\n ? h('span', { class: 'ui-spinner', 'aria-hidden': 'true' })\n : slots.leading?.(),\n slots.default?.(),\n slots.trailing?.(),\n ],\n );\n },\n});\n\nexport const IconButton = defineComponent({\n name: 'VspIconButton',\n props: { label: { type: String, default: undefined } },\n setup(props, { slots, attrs }) {\n return () =>\n h('button', { class: 'vsp-icon-btn', type: 'button', 'aria-label': props.label, ...attrs }, [\n slots.default?.(),\n ]);\n },\n});\n\nexport const Badge = defineComponent({\n name: 'VspBadge',\n props: {\n tone: { type: String as PropType<BadgeTone>, default: 'muted' },\n dot: Boolean,\n },\n setup(props, { slots }) {\n return () =>\n h('span', { class: cx('badge', `badge-${props.tone}`) }, [\n props.dot ? h('i') : null,\n slots.default?.(),\n ]);\n },\n});\n\nexport const Tag = defineComponent({\n name: 'VspTag',\n emits: ['remove'],\n setup(props, { slots, emit }) {\n return () =>\n h('span', { class: 'ui-tag' }, [\n slots.default?.(),\n h('button', { type: 'button', 'aria-label': 'Remove', onClick: () => emit('remove') }, '×'),\n ]);\n },\n});\n\nexport const Kbd = defineComponent({\n name: 'VspKbd',\n setup(_, { slots }) {\n return () => h('kbd', { class: 'ui-kbd' }, slots.default?.());\n },\n});\n\nexport const Divider = defineComponent({\n name: 'VspDivider',\n props: { vertical: Boolean },\n setup(props) {\n return () => h('hr', { class: cx('ui-divider', props.vertical && 'v') });\n },\n});\n\nexport const Spinner = defineComponent({\n name: 'VspSpinner',\n props: { size: { type: String as PropType<'lg'>, default: undefined } },\n setup(props) {\n return () =>\n h('span', { class: cx('ui-spinner', props.size === 'lg' && 'lg'), 'aria-hidden': 'true' });\n },\n});\n\nexport const Card = defineComponent({\n name: 'VspCard',\n props: { pad: Boolean },\n setup(props, { slots, attrs }) {\n return () =>\n h('div', { class: cx('card', props.pad && 'card-pad'), ...attrs }, slots.default?.());\n },\n});\n\nexport const CardHead = defineComponent({\n name: 'VspCardHead',\n props: {\n title: { type: String, default: undefined },\n desc: { type: String, default: undefined },\n },\n setup(props, { slots }) {\n return () =>\n h('div', { class: 'card-head' }, [\n h('div', { style: { minWidth: 0 } }, [\n h('div', { class: 'ttl' }, props.title),\n props.desc\n ? h('div', { class: 'eyebrow', style: { marginTop: '3px' } }, props.desc)\n : null,\n ]),\n slots.right ? h('div', { class: 'vsp-top-spacer' }) : null,\n slots.right?.(),\n ]);\n },\n});\n\nexport const Alert = defineComponent({\n name: 'VspAlert',\n props: {\n tone: { type: String as PropType<AlertTone>, default: 'info' },\n title: { type: String, default: undefined },\n },\n setup(props, { slots }) {\n return () =>\n h('div', { class: cx('ui-alert', props.tone) }, [\n slots.icon?.(),\n h('div', { style: { flex: 1 } }, [\n props.title ? h('div', { class: 'ui-alert-title' }, props.title) : null,\n slots.default ? h('div', { class: 'ui-alert-body' }, slots.default()) : null,\n ]),\n slots.action?.(),\n ]);\n },\n});\n\nexport const Field = defineComponent({\n name: 'VspField',\n props: {\n label: { type: String, default: undefined },\n required: Boolean,\n hint: { type: String, default: undefined },\n error: { type: String, default: undefined },\n htmlFor: { type: String, default: undefined },\n },\n setup(props, { slots }) {\n return () =>\n h('div', { class: 'ui-field' }, [\n props.label\n ? h('label', { class: 'ui-label', for: props.htmlFor }, [\n h('span', null, [\n props.label,\n props.required ? h('span', { class: 'req' }, ' *') : null,\n ]),\n ])\n : null,\n slots.default?.(),\n props.error || props.hint\n ? h('span', { class: cx('ui-hint', props.error && 'err') }, props.error || props.hint)\n : null,\n ]);\n },\n});\n\nexport const Input = defineComponent({\n name: 'VspInput',\n props: {\n modelValue: { type: String, default: '' },\n invalid: Boolean,\n },\n emits: ['update:modelValue'],\n setup(props, { emit, attrs }) {\n return () =>\n h('input', {\n class: cx('ui-input', props.invalid && 'invalid'),\n value: props.modelValue,\n onInput: (e: Event) => emit('update:modelValue', (e.target as HTMLInputElement).value),\n ...attrs,\n });\n },\n});\n\nexport const Textarea = defineComponent({\n name: 'VspTextarea',\n props: { modelValue: { type: String, default: '' } },\n emits: ['update:modelValue'],\n setup(props, { attrs, emit }) {\n return () =>\n h('textarea', {\n class: 'ui-textarea',\n value: props.modelValue,\n onInput: (e: Event) => emit('update:modelValue', (e.target as HTMLTextAreaElement).value),\n ...attrs,\n });\n },\n});\n\nexport const Switch = defineComponent({\n name: 'VspSwitch',\n props: {\n modelValue: Boolean,\n size: { type: String as PropType<'sm'>, default: undefined },\n disabled: Boolean,\n },\n emits: ['update:modelValue'],\n setup(props, { emit }) {\n return () =>\n h('button', {\n type: 'button',\n disabled: props.disabled,\n class: cx('ui-switch', props.size === 'sm' && 'sm', props.modelValue && 'on'),\n 'aria-pressed': String(props.modelValue),\n onClick: () => emit('update:modelValue', !props.modelValue),\n });\n },\n});\n\nexport const Checkbox = defineComponent({\n name: 'VspCheckbox',\n props: {\n modelValue: Boolean,\n label: { type: String, default: undefined },\n sub: { type: String, default: undefined },\n disabled: Boolean,\n },\n emits: ['update:modelValue'],\n setup(props, { emit }) {\n const toggle = () => {\n if (!props.disabled) emit('update:modelValue', !props.modelValue);\n };\n return () =>\n h(\n 'label',\n { class: 'ui-opt', style: { opacity: props.disabled ? 0.5 : 1 }, onClick: toggle },\n [\n h('span', { class: cx('ui-check', props.modelValue && 'on') }),\n h('span', null, [\n h('span', null, props.label),\n props.sub ? h('span', { class: 'ui-opt-sub' }, props.sub) : null,\n ]),\n ],\n );\n },\n});\n"],"mappings":"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","names":[]}
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@vespera-ui/vue",
3
+ "version": "0.1.0",
4
+ "description": "Vespera design system — Vue 3 components.",
5
+ "license": "Apache-2.0",
6
+ "type": "module",
7
+ "main": "./dist/index.cjs",
8
+ "module": "./dist/index.js",
9
+ "types": "./dist/index.d.ts",
10
+ "exports": {
11
+ ".": {
12
+ "types": "./dist/index.d.ts",
13
+ "import": "./dist/index.js",
14
+ "require": "./dist/index.cjs"
15
+ }
16
+ },
17
+ "files": [
18
+ "dist"
19
+ ],
20
+ "scripts": {
21
+ "build": "tsup",
22
+ "typecheck": "tsc --noEmit"
23
+ },
24
+ "peerDependencies": {
25
+ "vue": ">=3.3"
26
+ },
27
+ "devDependencies": {
28
+ "vue": "^3.5.13"
29
+ },
30
+ "publishConfig": {
31
+ "access": "public"
32
+ },
33
+ "repository": {
34
+ "type": "git",
35
+ "url": "git+https://github.com/forgialabs/vespera-ui.git",
36
+ "directory": "packages/vue"
37
+ },
38
+ "keywords": [
39
+ "vespera",
40
+ "vue",
41
+ "vue3",
42
+ "design-system",
43
+ "ui"
44
+ ]
45
+ }