@acoyfellow/kumo-vue 0.0.1

package/package/components/field.legacy.js

@@ -0,0 +1,49 @@
+import { defineComponent, h } from "vue";
+const Field = defineComponent({
+  name: "KumoField",
+  inheritAttrs: false,
+  props: {
+    id: { type: String, required: true },
+    label: { type: String, required: true },
+    description: String,
+    error: String,
+    required: Boolean,
+    disabled: Boolean,
+    modelValue: { type: [String, Number], default: "" }
+  },
+  emits: ["update:modelValue", "input", "change", "focus", "blur"],
+  setup(props, { attrs, emit }) {
+    return () => {
+      const descriptionId = props.description ? `${props.id}-description` : void 0;
+      const errorId = props.error ? `${props.id}-error` : void 0;
+      const describedBy = [descriptionId, errorId].filter(Boolean).join(" ") || void 0;
+      return h("div", { class: ["kumo-field", attrs.class] }, [
+        h("label", { class: "kumo-field__label", for: props.id }, [props.label, props.required ? h("span", { "aria-hidden": "true" }, " *") : null]),
+        props.description ? h("div", { class: "kumo-field__description", id: descriptionId }, props.description) : null,
+        h("input", {
+          ...attrs,
+          class: ["kumo-field__input", attrs.class],
+          id: props.id,
+          value: props.modelValue,
+          required: props.required,
+          disabled: props.disabled,
+          "aria-invalid": props.error ? "true" : void 0,
+          "aria-describedby": describedBy,
+          onInput: (event) => {
+            emit("update:modelValue", event.target.value);
+            emit("input", event);
+          },
+          onChange: (event) => emit("change", event),
+          onFocus: (event) => emit("focus", event),
+          onBlur: (event) => emit("blur", event)
+        }),
+        props.error ? h("div", { class: "kumo-field__error", id: errorId, role: "alert" }, props.error) : null
+      ]);
+    };
+  }
+});
+export {
+  Field
+};
+
+export default Field;

package/package/components/field.native-input.d.ts

@@ -0,0 +1,4 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+declare const component: DefineComponent<Record<string, unknown>>;
+export default component;

package/package/components/field.native-input.js

@@ -0,0 +1,21 @@
+import { defineComponent as _defineComponent } from 'vue';
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    ...{ inheritAttrs: false },
+    __name: 'field.native-input',
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const __returned__ = {};
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { renderSlot as _renderSlot, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return (_openBlock(), _createElementBlock("span", _mergeProps(_ctx.$attrs, { "data-kumo-part": "NativeInput" }), [
+        _renderSlot(_ctx.$slots, "default")
+    ], 16 /* FULL_PROPS */));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoFieldNativeInput";
+__sfc__.__file = "components/field.native-input.vue";
+export default __sfc__;

package/package/components/field.semantic.js

@@ -0,0 +1,43 @@
+import { defineComponent as _defineComponent } from 'vue';
+import { computed, useAttrs, useSlots } from 'vue';
+export const modelDigest = "6680d3b6e5ef5e85c4340fd8369a05f55c9a388c2bfb7ada7da9eeb0eccd29f3";
+export const contentBindingDigest = "a6655036dbbdb2cd56a9e62bf5f2f8f75bb6a7bb4d3c5fbf41726fd8666277cd";
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    __name: 'field',
+    props: {
+        observable: { type: null, required: false },
+        fixture: { type: null, required: false },
+        semanticContent: { type: null, required: false }
+    },
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const props = __props;
+        const slots = useSlots();
+        const styles = {};
+        const normalizeSlotContent = (value) => Array.isArray(value) ? value.map(normalizeSlotContent).join('') : value == null || typeof value === 'boolean' ? '' : typeof value === 'string' || typeof value === 'number' ? String(value) : normalizeSlotContent(value.children);
+        const renderContent = () => props.semanticContent ?? normalizeSlotContent(slots.default?.());
+        const fixture = computed(() => props.fixture);
+        const semanticValues = Object.assign({}, useAttrs(), props);
+        const semanticEqual = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+        const fixtureText = (value) => value && typeof value === 'object' ? String(typeof value.text === 'string' ? value.text : '') + (Array.isArray(value.children) ? value.children.map(fixtureText).join('') : '') : '';
+        const __returned__ = { modelDigest, contentBindingDigest, props, slots, styles, normalizeSlotContent, renderContent, fixture, semanticValues, semanticEqual, fixtureText };
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["for"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return (_openBlock(), _createElementBlock("div", null, [
+        _createElementVNode("label", {
+            for: String($setup.props.childId ?? _ctx.$attrs['child-id'] ?? 'field-control')
+        }, _toDisplayString($setup.props.label), 9 /* TEXT, PROPS */, _hoisted_1),
+        _renderSlot(_ctx.$slots, "default")
+    ]));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoField";
+__sfc__.__file = "components/field.vue";
+export default __sfc__;
+
+export { __sfc__ as Field }

package/package/components/grid-item.d.ts

@@ -0,0 +1,8 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+export interface GridItemProps { [key: string]: unknown }
+declare const component: DefineComponent<GridItemProps>;
+export default component;
+export declare const modelDigest: "40f49eae26c10cb50f9eff28ca613e0eb9e5cf415f57f0b763ec8e8cc46f2a16";
+
+export { component as GridItem };

package/package/components/grid-item.js

@@ -0,0 +1,52 @@
+import { defineComponent as _defineComponent } from 'vue';
+import { computed, useAttrs, useSlots } from 'vue';
+export const modelDigest = "40f49eae26c10cb50f9eff28ca613e0eb9e5cf415f57f0b763ec8e8cc46f2a16";
+export const contentBindingDigest = "a6655036dbbdb2cd56a9e62bf5f2f8f75bb6a7bb4d3c5fbf41726fd8666277cd";
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    __name: 'grid-item',
+    props: {
+        children: { type: null, required: false },
+        className: { type: String, required: false },
+        fixture: { type: null, required: false },
+        semanticContent: { type: null, required: false }
+    },
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const props = __props;
+        const slots = useSlots();
+        const styles = {};
+        const normalizeSlotContent = (value) => Array.isArray(value) ? value.map(normalizeSlotContent).join('') : value == null || typeof value === 'boolean' ? '' : typeof value === 'string' || typeof value === 'number' ? String(value) : normalizeSlotContent(value.children);
+        const renderContent = () => props.semanticContent ?? normalizeSlotContent(slots.default?.());
+        const fixture = computed(() => props.fixture);
+        const semanticValues = Object.assign({}, useAttrs(), props);
+        const semanticEqual = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+        const fixtureText = (value) => value && typeof value === 'object' ? String(typeof value.text === 'string' ? value.text : '') + (Array.isArray(value.children) ? value.children.map(fixtureText).join('') : '') : '';
+        const __returned__ = { modelDigest, contentBindingDigest, props, slots, styles, normalizeSlotContent, renderContent, fixture, semanticValues, semanticEqual, fixtureText };
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = {
+    key: 0,
+    class: "p-4"
+};
+const _hoisted_2 = { key: 1 };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return ($setup.semanticEqual($setup.renderContent(), "Cell") && Object.prototype.hasOwnProperty.call($setup.semanticValues, "className") && $setup.semanticEqual($setup.semanticValues.className, "p-4"))
+        ? (_openBlock(), _createElementBlock("div", _hoisted_1, _toDisplayString($setup.renderContent()), 1 /* TEXT */))
+        : ($setup.semanticEqual($setup.renderContent(), "Cell"))
+            ? (_openBlock(), _createElementBlock("div", _hoisted_2, _toDisplayString($setup.renderContent()), 1 /* TEXT */))
+            : (_openBlock(), _createElementBlock("div", {
+                key: 2,
+                class: _normalizeClass([$setup.styles["root"]])
+            }, [
+                _renderSlot(_ctx.$slots, "default")
+            ], 2 /* CLASS */));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoGridItem";
+__sfc__.__file = "components/grid-item.vue";
+export default __sfc__;
+
+export { __sfc__ as GridItem }

package/package/components/grid.d.ts

@@ -0,0 +1,8 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+export interface GridProps { [key: string]: unknown }
+declare const component: DefineComponent<GridProps>;
+export default component;
+export declare const modelDigest: "77368ecd52b54b2d85a270ad010c77b8e23e8c0be9b82414610908b3a84f636d";
+
+export { component as Grid };

package/package/components/grid.js

@@ -0,0 +1,58 @@
+import { defineComponent as _defineComponent } from 'vue';
+import { computed, useAttrs, useSlots } from 'vue';
+export const modelDigest = "77368ecd52b54b2d85a270ad010c77b8e23e8c0be9b82414610908b3a84f636d";
+export const contentBindingDigest = "a6655036dbbdb2cd56a9e62bf5f2f8f75bb6a7bb4d3c5fbf41726fd8666277cd";
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    __name: 'grid',
+    props: {
+        children: { type: null, required: false },
+        className: { type: String, required: false },
+        gap: { type: String, required: false, default: "base" },
+        mobileDivider: { type: Boolean, required: false },
+        variant: { type: null, required: false },
+        fixture: { type: null, required: false },
+        semanticContent: { type: null, required: false }
+    },
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const props = __props;
+        const slots = useSlots();
+        const styles = {};
+        const normalizeSlotContent = (value) => Array.isArray(value) ? value.map(normalizeSlotContent).join('') : value == null || typeof value === 'boolean' ? '' : typeof value === 'string' || typeof value === 'number' ? String(value) : normalizeSlotContent(value.children);
+        const renderContent = () => props.semanticContent ?? normalizeSlotContent(slots.default?.());
+        const fixture = computed(() => props.fixture);
+        const semanticValues = Object.assign({}, useAttrs(), props);
+        const semanticEqual = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+        const fixtureText = (value) => value && typeof value === 'object' ? String(typeof value.text === 'string' ? value.text : '') + (Array.isArray(value.children) ? value.children.map(fixtureText).join('') : '') : '';
+        const __returned__ = { modelDigest, contentBindingDigest, props, slots, styles, normalizeSlotContent, renderContent, fixture, semanticValues, semanticEqual, fixtureText };
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = {
+    key: 0,
+    class: "grid-cols-2 gap-0"
+};
+const _hoisted_2 = {
+    key: 1,
+    class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return ($setup.semanticEqual($setup.renderContent(), "Two") && Object.prototype.hasOwnProperty.call($setup.semanticValues, "gap") && $setup.semanticEqual($setup.semanticValues.gap, "none") && Object.prototype.hasOwnProperty.call($setup.semanticValues, "variant") && $setup.semanticEqual($setup.semanticValues.variant, "side-by-side"))
+        ? (_openBlock(), _createElementBlock("div", _hoisted_1, _toDisplayString($setup.renderContent()), 1 /* TEXT */))
+        : ($setup.semanticEqual($setup.renderContent(), "Cells") && Object.prototype.hasOwnProperty.call($setup.semanticValues, "variant") && $setup.semanticEqual($setup.semanticValues.variant, "3up"))
+            ? (_openBlock(), _createElementBlock("div", _hoisted_2, _toDisplayString($setup.renderContent()), 1 /* TEXT */))
+            : (_openBlock(), _createElementBlock("div", {
+                key: 2,
+                class: _normalizeClass([$setup.styles["root"]])
+            }, [
+                _renderSlot(_ctx.$slots, "default")
+            ], 2 /* CLASS */));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoGrid";
+__sfc__.__file = "components/grid.vue";
+export default __sfc__;
+
+export { __sfc__ as Grid }

package/package/components/input-area.d.ts

@@ -0,0 +1,8 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+export interface InputAreaProps { [key: string]: unknown }
+declare const component: DefineComponent<InputAreaProps>;
+export default component;
+export declare const modelDigest: "3f2ca47762723bd72e47c5da8490058c226bbee67e5518d548fc19ba2c467f14";
+
+export { component as InputArea };

package/package/components/input-area.js

@@ -0,0 +1,70 @@
+import { defineComponent as _defineComponent } from 'vue';
+import { computed, useAttrs, useId, useSlots } from 'vue';
+export const modelDigest = "3f2ca47762723bd72e47c5da8490058c226bbee67e5518d548fc19ba2c467f14";
+export const contentBindingDigest = "a6655036dbbdb2cd56a9e62bf5f2f8f75bb6a7bb4d3c5fbf41726fd8666277cd";
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    ...{ inheritAttrs: false },
+    __name: 'input-area',
+    props: {
+        observable: { type: null, required: false },
+        defaultValue: { type: String, required: false },
+        disabled: { type: Boolean, required: false },
+        label: { type: String, required: false },
+        onChange: { type: null, required: false },
+        "aria-label": { type: null, required: false },
+        ariaLabel: { type: null, required: false },
+        fixture: { type: null, required: false },
+        semanticContent: { type: null, required: false }
+    },
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const props = __props;
+        const nativeAttrs = computed(() => Object.fromEntries(Object.entries(useAttrs()).filter(([name]) => name !== 'id').map(([name, value]) => [name.replace(/[A-Z]/g, letter => '-' + letter.toLowerCase()), value])));
+        const nativeAriaLabel = computed(() => props.ariaLabel ?? props['aria-label']);
+        const controlId = useId();
+        function handleNativeInput(event) {
+            props.onChange?.(event.currentTarget.value);
+        }
+        const slots = useSlots();
+        const styles = {};
+        const normalizeSlotContent = (value) => Array.isArray(value) ? value.map(normalizeSlotContent).join('') : value == null || typeof value === 'boolean' ? '' : typeof value === 'string' || typeof value === 'number' ? String(value) : normalizeSlotContent(value.children);
+        const renderContent = () => props.semanticContent ?? normalizeSlotContent(slots.default?.());
+        const fixture = computed(() => props.fixture);
+        const semanticValues = Object.assign({}, useAttrs(), props);
+        const semanticEqual = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+        const fixtureText = (value) => value && typeof value === 'object' ? String(typeof value.text === 'string' ? value.text : '') + (Array.isArray(value.children) ? value.children.map(fixtureText).join('') : '') : '';
+        const __returned__ = { modelDigest, contentBindingDigest, props, nativeAttrs, nativeAriaLabel, controlId, handleNativeInput, slots, styles, normalizeSlotContent, renderContent, fixture, semanticValues, semanticEqual, fixtureText };
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = ["for"];
+const _hoisted_3 = ["id", "aria-label", "value", "disabled"];
+const _hoisted_4 = ["aria-label", "value", "disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return ($setup.props.label !== undefined)
+        ? (_openBlock(), _createElementBlock("div", _hoisted_1, [
+            _createElementVNode("label", { for: $setup.controlId }, _toDisplayString($setup.props.label), 9 /* TEXT, PROPS */, _hoisted_2),
+            _createElementVNode("textarea", _mergeProps($setup.nativeAttrs, {
+                id: $setup.controlId,
+                "aria-label": $setup.nativeAriaLabel,
+                value: $setup.props.defaultValue,
+                disabled: $setup.props.disabled || undefined,
+                onInput: $setup.handleNativeInput
+            }), _toDisplayString($setup.props.defaultValue), 17 /* TEXT, FULL_PROPS */, _hoisted_3)
+        ]))
+        : (_openBlock(), _createElementBlock("textarea", _mergeProps({ key: 1 }, $setup.nativeAttrs, {
+            "aria-label": $setup.nativeAriaLabel,
+            value: $setup.props.defaultValue,
+            disabled: $setup.props.disabled || undefined,
+            onInput: $setup.handleNativeInput
+        }), _toDisplayString($setup.props.defaultValue), 17 /* TEXT, FULL_PROPS */, _hoisted_4));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoInputArea";
+__sfc__.__file = "components/input-area.vue";
+export default __sfc__;
+
+export { __sfc__ as InputArea }

package/package/components/input-group.addon.d.ts

@@ -0,0 +1,4 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+declare const component: DefineComponent<Record<string, unknown>>;
+export default component;

package/package/components/input-group.addon.js

@@ -0,0 +1,21 @@
+import { defineComponent as _defineComponent } from 'vue';
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    ...{ inheritAttrs: false },
+    __name: 'input-group.addon',
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const __returned__ = {};
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { renderSlot as _renderSlot, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return (_openBlock(), _createElementBlock("span", _mergeProps(_ctx.$attrs, { "data-kumo-part": "Addon" }), [
+        _renderSlot(_ctx.$slots, "default")
+    ], 16 /* FULL_PROPS */));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoInputGroupAddon";
+__sfc__.__file = "components/input-group.addon.vue";
+export default __sfc__;

package/package/components/input-group.button.d.ts

@@ -0,0 +1,4 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+declare const component: DefineComponent<Record<string, unknown>>;
+export default component;

package/package/components/input-group.button.js

@@ -0,0 +1,21 @@
+import { defineComponent as _defineComponent } from 'vue';
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    ...{ inheritAttrs: false },
+    __name: 'input-group.button',
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const __returned__ = {};
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { renderSlot as _renderSlot, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return (_openBlock(), _createElementBlock("span", _mergeProps(_ctx.$attrs, { "data-kumo-part": "Button" }), [
+        _renderSlot(_ctx.$slots, "default")
+    ], 16 /* FULL_PROPS */));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoInputGroupButton";
+__sfc__.__file = "components/input-group.button.vue";
+export default __sfc__;

package/package/components/input-group.d.ts

@@ -0,0 +1,8 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+export interface InputGroupProps { [key: string]: unknown }
+declare const component: DefineComponent<InputGroupProps>;
+export default component;
+export declare const modelDigest: "aec5871cdfdf97c938fb06aeb6a15dedd413550ce59bca231f5fe2e61f6d347c";
+
+export { component as InputGroup };

package/package/components/input-group.input.d.ts

@@ -0,0 +1,4 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+declare const component: DefineComponent<Record<string, unknown>>;
+export default component;

package/package/components/input-group.input.js

@@ -0,0 +1,21 @@
+import { defineComponent as _defineComponent } from 'vue';
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    ...{ inheritAttrs: false },
+    __name: 'input-group.input',
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const __returned__ = {};
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { renderSlot as _renderSlot, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return (_openBlock(), _createElementBlock("span", _mergeProps(_ctx.$attrs, { "data-kumo-part": "Input" }), [
+        _renderSlot(_ctx.$slots, "default")
+    ], 16 /* FULL_PROPS */));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoInputGroupInput";
+__sfc__.__file = "components/input-group.input.vue";
+export default __sfc__;

package/package/components/input-group.js

@@ -0,0 +1,96 @@
+import { defineComponent as _defineComponent } from 'vue';
+import { computed, ref, useAttrs, useId, useSlots } from 'vue';
+export const modelDigest = "aec5871cdfdf97c938fb06aeb6a15dedd413550ce59bca231f5fe2e61f6d347c";
+export const contentBindingDigest = "a6655036dbbdb2cd56a9e62bf5f2f8f75bb6a7bb4d3c5fbf41726fd8666277cd";
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    ...{ inheritAttrs: false },
+    __name: 'input-group',
+    props: {
+        observable: { type: null, required: false },
+        fixture: { type: null, required: false },
+        semanticContent: { type: null, required: false }
+    },
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const props = __props;
+        const inputGroupFixture = computed(() => props.fixture);
+        const fixtureChildren = (node) => node?.children ?? [];
+        const fixturePart = (name) => fixtureChildren(inputGroupFixture.value).find(node => node.export === name);
+        const partText = (node) => node ? String(node.text ?? '') + fixtureChildren(node).map(partText).join('') : '';
+        const inputGroupProps = computed(() => inputGroupFixture.value?.props ?? {});
+        const inputPart = computed(() => fixturePart('.Input'));
+        const inputId = useId();
+        const inputValue = ref('');
+        function trackInput(event) { inputValue.value = event.currentTarget.value; }
+        const slots = useSlots();
+        const styles = {};
+        const normalizeSlotContent = (value) => Array.isArray(value) ? value.map(normalizeSlotContent).join('') : value == null || typeof value === 'boolean' ? '' : typeof value === 'string' || typeof value === 'number' ? String(value) : normalizeSlotContent(value.children);
+        const renderContent = () => props.semanticContent ?? normalizeSlotContent(slots.default?.());
+        const fixture = computed(() => props.fixture);
+        const semanticValues = Object.assign({}, useAttrs(), props);
+        const semanticEqual = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+        const fixtureText = (value) => value && typeof value === 'object' ? String(typeof value.text === 'string' ? value.text : '') + (Array.isArray(value.children) ? value.children.map(fixtureText).join('') : '') : '';
+        const __returned__ = { modelDigest, contentBindingDigest, props, inputGroupFixture, fixtureChildren, fixturePart, partText, inputGroupProps, inputPart, inputId, inputValue, trackInput, slots, styles, normalizeSlotContent, renderContent, fixture, semanticValues, semanticEqual, fixtureText };
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, mergeProps as _mergeProps } from "vue";
+const _hoisted_1 = ["for"];
+const _hoisted_2 = { key: 1 };
+const _hoisted_3 = {
+    key: 0,
+    "data-kumo-part": "Addon"
+};
+const _hoisted_4 = ["id", "aria-label", "disabled", "required", "value"];
+const _hoisted_5 = ["data-variant"];
+const _hoisted_6 = {
+    key: 3,
+    "data-kumo-part": "Suffix"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return (_openBlock(), _createElementBlock("div", _mergeProps(_ctx.$attrs, { "data-kumo-component": "InputGroup" }), [
+        ($setup.inputGroupProps.label !== undefined)
+            ? (_openBlock(), _createElementBlock("label", {
+                key: 0,
+                for: $setup.inputId
+            }, _toDisplayString($setup.inputGroupProps.label), 9 /* TEXT, PROPS */, _hoisted_1))
+            : _createCommentVNode("v-if", true),
+        ($setup.inputGroupProps.description !== undefined)
+            ? (_openBlock(), _createElementBlock("p", _hoisted_2, _toDisplayString($setup.inputGroupProps.description), 1 /* TEXT */))
+            : _createCommentVNode("v-if", true),
+        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList($setup.fixtureChildren($setup.inputGroupFixture), (part, index) => {
+            return (_openBlock(), _createElementBlock(_Fragment, {
+                key: part.export ?? index
+            }, [
+                (part.export === '.Addon')
+                    ? (_openBlock(), _createElementBlock("span", _hoisted_3, _toDisplayString($setup.partText(part)), 1 /* TEXT */))
+                    : (part.export === '.Input')
+                        ? (_openBlock(), _createElementBlock("input", {
+                            key: 1,
+                            id: $setup.inputId,
+                            "aria-label": $setup.inputPart?.props?.['aria-label'],
+                            disabled: $setup.props.disabled || undefined,
+                            required: $setup.inputGroupProps.required,
+                            value: $setup.inputValue,
+                            onInput: $setup.trackInput
+                        }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_4))
+                        : (part.export === '.Button')
+                            ? (_openBlock(), _createElementBlock("button", {
+                                key: 2,
+                                type: "button",
+                                "data-variant": part.props?.variant
+                            }, _toDisplayString($setup.partText(part)), 9 /* TEXT, PROPS */, _hoisted_5))
+                            : (part.export === '.Suffix')
+                                ? (_openBlock(), _createElementBlock("span", _hoisted_6, _toDisplayString($setup.partText(part)), 1 /* TEXT */))
+                                : _createCommentVNode("v-if", true)
+            ], 64 /* STABLE_FRAGMENT */));
+        }), 128 /* KEYED_FRAGMENT */))
+    ], 16 /* FULL_PROPS */));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoInputGroup";
+__sfc__.__file = "components/input-group.vue";
+export default __sfc__;
+
+export { __sfc__ as InputGroup }

package/package/components/input-group.suffix.d.ts

@@ -0,0 +1,4 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+declare const component: DefineComponent<Record<string, unknown>>;
+export default component;

package/package/components/input-group.suffix.js

@@ -0,0 +1,21 @@
+import { defineComponent as _defineComponent } from 'vue';
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    ...{ inheritAttrs: false },
+    __name: 'input-group.suffix',
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const __returned__ = {};
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { renderSlot as _renderSlot, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return (_openBlock(), _createElementBlock("span", _mergeProps(_ctx.$attrs, { "data-kumo-part": "Suffix" }), [
+        _renderSlot(_ctx.$slots, "default")
+    ], 16 /* FULL_PROPS */));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoInputGroupSuffix";
+__sfc__.__file = "components/input-group.suffix.vue";
+export default __sfc__;

package/package/components/input.d.ts

@@ -0,0 +1,8 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+export interface InputProps { [key: string]: unknown }
+declare const component: DefineComponent<InputProps>;
+export default component;
+export declare const modelDigest: "ccce2fdcca8c5218c94732f83446c137e03d4b7dd9548ffde312605374734e2f";
+
+export { component as Input };

package/package/components/input.js

@@ -0,0 +1,70 @@
+import { defineComponent as _defineComponent } from 'vue';
+import { computed, useAttrs, useId, useSlots } from 'vue';
+export const modelDigest = "ccce2fdcca8c5218c94732f83446c137e03d4b7dd9548ffde312605374734e2f";
+export const contentBindingDigest = "a6655036dbbdb2cd56a9e62bf5f2f8f75bb6a7bb4d3c5fbf41726fd8666277cd";
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    ...{ inheritAttrs: false },
+    __name: 'input',
+    props: {
+        observable: { type: null, required: false },
+        defaultValue: { type: String, required: false },
+        disabled: { type: Boolean, required: false },
+        label: { type: String, required: false },
+        onChange: { type: null, required: false },
+        "aria-label": { type: null, required: false },
+        ariaLabel: { type: null, required: false },
+        fixture: { type: null, required: false },
+        semanticContent: { type: null, required: false }
+    },
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const props = __props;
+        const nativeAttrs = computed(() => Object.fromEntries(Object.entries(useAttrs()).filter(([name]) => name !== 'id').map(([name, value]) => [name.replace(/[A-Z]/g, letter => '-' + letter.toLowerCase()), value])));
+        const nativeAriaLabel = computed(() => props.ariaLabel ?? props['aria-label']);
+        const controlId = useId();
+        function handleNativeInput(event) {
+            props.onChange?.(event.currentTarget.value);
+        }
+        const slots = useSlots();
+        const styles = {};
+        const normalizeSlotContent = (value) => Array.isArray(value) ? value.map(normalizeSlotContent).join('') : value == null || typeof value === 'boolean' ? '' : typeof value === 'string' || typeof value === 'number' ? String(value) : normalizeSlotContent(value.children);
+        const renderContent = () => props.semanticContent ?? normalizeSlotContent(slots.default?.());
+        const fixture = computed(() => props.fixture);
+        const semanticValues = Object.assign({}, useAttrs(), props);
+        const semanticEqual = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+        const fixtureText = (value) => value && typeof value === 'object' ? String(typeof value.text === 'string' ? value.text : '') + (Array.isArray(value.children) ? value.children.map(fixtureText).join('') : '') : '';
+        const __returned__ = { modelDigest, contentBindingDigest, props, nativeAttrs, nativeAriaLabel, controlId, handleNativeInput, slots, styles, normalizeSlotContent, renderContent, fixture, semanticValues, semanticEqual, fixtureText };
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = ["for"];
+const _hoisted_3 = ["id", "aria-label", "value", "disabled"];
+const _hoisted_4 = ["aria-label", "value", "disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return ($setup.props.label !== undefined)
+        ? (_openBlock(), _createElementBlock("div", _hoisted_1, [
+            _createElementVNode("label", { for: $setup.controlId }, _toDisplayString($setup.props.label), 9 /* TEXT, PROPS */, _hoisted_2),
+            _createElementVNode("input", _mergeProps($setup.nativeAttrs, {
+                id: $setup.controlId,
+                "aria-label": $setup.nativeAriaLabel,
+                value: $setup.props.defaultValue,
+                disabled: $setup.props.disabled || undefined,
+                onInput: $setup.handleNativeInput
+            }), null, 16 /* FULL_PROPS */, _hoisted_3)
+        ]))
+        : (_openBlock(), _createElementBlock("input", _mergeProps({ key: 1 }, $setup.nativeAttrs, {
+            "aria-label": $setup.nativeAriaLabel,
+            value: $setup.props.defaultValue,
+            disabled: $setup.props.disabled || undefined,
+            onInput: $setup.handleNativeInput
+        }), null, 16 /* FULL_PROPS */, _hoisted_4));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoInput";
+__sfc__.__file = "components/input.vue";
+export default __sfc__;
+
+export { __sfc__ as Input }