@skewedaspect/sleekspace-ui 0.9.0 → 0.10.0

package/src/static/components/alert.ts

@@ -9,8 +9,8 @@
 
 import type { AlertKind, StaticCustomColors } from '../types';
 
+import type { H } from '../h';
 import { composeClasses } from '../classes';
-import { escapeAttr } from '../escape';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -62,7 +62,7 @@ export interface AlertStaticProps extends StaticCustomColors
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function alert(props : AlertStaticProps = {}, children = '') : string
+export function alert<T>(h : H<T>, props : AlertStaticProps = {}, children ?: T | T[]) : T
 {
     const kind = props.kind ?? 'info';
 
@@ -78,25 +78,25 @@ export function alert(props : AlertStaticProps = {}, children = '') : string
         propsWithDefaults as Record<string, unknown>
     );
 
-    const attrs : string[] = [ `class="${ escapeAttr(classes) }"`, 'role="alert"' ];
+    const attrs : Record<string, unknown> = { class: classes, role: 'alert' };
 
     // Custom color vars — match the Vue component's useCustomColors('alert', ...) output.
     const styleParts : string[] = [];
     if(typeof props.baseColor === 'string')
     {
-        styleParts.push(`--sk-alert-color-base: ${ escapeAttr(props.baseColor) };`);
+        styleParts.push(`--sk-alert-color-base: ${ props.baseColor };`);
     }
     if(typeof props.textColor === 'string')
     {
-        styleParts.push(`--sk-alert-fg: ${ escapeAttr(props.textColor) };`);
+        styleParts.push(`--sk-alert-fg: ${ props.textColor };`);
     }
     if(styleParts.length > 0)
     {
-        attrs.push(`style="${ styleParts.join(' ') }"`);
+        attrs.style = styleParts.join(' ');
     }
 
-    // Determine icon HTML: explicit false = no icon; explicit string = custom; undefined = auto
-    let iconHtml = '';
+    // Determine icon: explicit false = no icon; explicit string = custom; undefined = auto
+    let iconEl : T | null = null;
     if(props.icon !== false)
     {
         const iconContent = typeof props.icon === 'string'
@@ -105,13 +105,14 @@ export function alert(props : AlertStaticProps = {}, children = '') : string
 
         if(iconContent !== null)
         {
-            iconHtml = `<div class="sk-alert-icon">${ iconContent }</div>`;
+            iconEl = h('div', { class: 'sk-alert-icon', innerHTML: iconContent });
         }
     }
 
-    const contentHtml = `<div class="sk-alert-content">${ children }</div>`;
+    const contentEl = h('div', { class: 'sk-alert-content' }, children);
 
-    return `<div ${ attrs.join(' ') }>${ iconHtml }${ contentHtml }</div>`;
+    const innerChildren : T[] = iconEl !== null ? [ iconEl, contentEl ] : [ contentEl ];
+    return h('div', attrs, innerChildren);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/avatar.ts

@@ -15,7 +15,8 @@
 
 import type { AvatarSize, ComponentKind, StaticCustomColors } from '../types';
 
-import { escapeAttr } from '../escape';
+import type { H } from '../h';
+import { text } from '../escape';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -39,48 +40,46 @@ const DEFAULT_ICON_SVG = '<svg class="sk-avatar-icon" viewBox="0 0 24 24" fill="
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function avatar(props : AvatarStaticProps = {}) : string
+export function avatar<T>(h : H<T>, props : AvatarStaticProps = {}) : T
 {
     const kind = props.kind ?? 'neutral';
     const size = props.size ?? 'md';
 
     const classes = [ 'sk-avatar', `sk-${ kind }`, `sk-${ size }` ];
-    const attrs : string[] = [ `class="${ escapeAttr(classes.join(' ')) }"` ];
+    const wrapperAttrs : Record<string, unknown> = { class: classes.join(' ') };
 
     // Custom color vars — match Vue's customStyles computed property
     const styleParts : string[] = [];
     if(typeof props.baseColor === 'string')
     {
-        styleParts.push(`--sk-avatar-color-base: ${ escapeAttr(props.baseColor) };`);
+        styleParts.push(`--sk-avatar-color-base: ${ props.baseColor };`);
     }
     if(typeof props.textColor === 'string')
     {
-        styleParts.push(`--sk-avatar-fg: ${ escapeAttr(props.textColor) };`);
+        styleParts.push(`--sk-avatar-fg: ${ props.textColor };`);
     }
     if(styleParts.length > 0)
     {
-        attrs.push(`style="${ styleParts.join(' ') }"`);
+        wrapperAttrs.style = styleParts.join(' ');
     }
 
     // Inner content: image > initials > default icon (matches Vue's v-if / v-else-if / v-else)
-    let inner : string;
     if(props.src)
     {
         const alt = props.alt ?? '';
-        inner = `<img src="${ escapeAttr(props.src) }" alt="${ escapeAttr(alt) }" class="sk-avatar-image">`;
+        // img is void — no children
+        return h('div', wrapperAttrs, h('img', { src: props.src, alt, class: 'sk-avatar-image' }));
     }
-    else if(props.initials)
+
+    if(props.initials)
     {
         // Truncate to 2 chars, uppercase — matches Vue's displayInitials computed
-        const display = props.initials.slice(0, 2).toUpperCase();
-        inner = `<span class="sk-avatar-initials">${ escapeAttr(display) }</span>`;
-    }
-    else
-    {
-        inner = DEFAULT_ICON_SVG;
+        const display = text(props.initials.slice(0, 2).toUpperCase());
+        return h('div', wrapperAttrs, h('span', { class: 'sk-avatar-initials', innerHTML: display }));
     }
 
-    return `<div ${ attrs.join(' ') }>${ inner }</div>`;
+    // Default fallback: inject the SVG via innerHTML so Vue/React treat it as markup, not text.
+    return h('div', { ...wrapperAttrs, innerHTML: DEFAULT_ICON_SVG });
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/breadcrumbs.ts

@@ -7,6 +7,7 @@
 
 import type { BreadcrumbsKind, StaticCustomColors } from '../types';
 
+import type { H } from '../h';
 import { render } from '../render';
 import { SPECS } from '../specs';
 
@@ -20,9 +21,9 @@ export interface BreadcrumbsStaticProps extends StaticCustomColors
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function breadcrumbs(props : BreadcrumbsStaticProps = {}, children = '') : string
+export function breadcrumbs<T>(h : H<T>, props : BreadcrumbsStaticProps = {}, children ?: T | T[]) : T
 {
-    return render(SPECS.breadcrumbs, props as Record<string, unknown>, children);
+    return render(h, SPECS.breadcrumbs, props as Record<string, unknown>, children);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/button.ts

@@ -6,10 +6,10 @@
 // their own <a> with class="sk-button" — this helper emits plain HTML only.
 //----------------------------------------------------------------------------------------------------------------------
 
-import type { ButtonKind, ButtonSize, ButtonType, ButtonVariant, StaticCustomColors } from '../types';
+import type { ButtonCorner, ButtonKind, ButtonSize, ButtonType, ButtonVariant, StaticCustomColors } from '../types';
 
+import type { H } from '../h';
 import { composeClasses } from '../classes';
-import { escapeAttr } from '../escape';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -23,53 +23,49 @@ export interface ButtonStaticProps extends StaticCustomColors
     loading ?: boolean;
     pressed ?: boolean;
     dense ?: boolean;
+    corners ?: ButtonCorner[];
     href ?: string;
 }
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function button(props : ButtonStaticProps = {}, children = '') : string
+export function button<T>(h : H<T>, props : ButtonStaticProps = {}, children ?: T | T[]) : T
 {
-    const classes = composeClasses({
-        base: 'sk-button',
-        kind: true,
-        size: true,
-        variant: true,
-        booleanFlags: [ 'loading', 'pressed', 'dense' ],
-    }, props as Record<string, unknown>);
+    const classes = composeClasses(
+        {
+            base: 'sk-button',
+            kind: true,
+            size: true,
+            variant: true,
+            booleanFlags: [ 'loading', 'pressed', 'dense' ],
+            listFlags: [ { prop: 'corners', family: 'cut' } ],
+        },
+        props as Record<string, unknown>
+    );
 
-    const attrs : string[] = [ `class="${ escapeAttr(classes) }"` ];
     const isAnchor = typeof props.href === 'string';
+    const attrs : Record<string, unknown> = { class: classes };
 
     if(isAnchor)
     {
-        attrs.push(`href="${ escapeAttr(props.href ?? '') }"`);
+        attrs.href = props.href ?? '';
     }
     else
     {
-        const buttonType = props.type ?? 'button';
-        attrs.push(`type="${ escapeAttr(buttonType) }"`);
+        attrs.type = props.type ?? 'button';
     }
 
     if(props.disabled)
     {
-        attrs.push(isAnchor ? 'aria-disabled="true"' : 'disabled');
+        if(isAnchor) { attrs['aria-disabled'] = 'true'; }
+        else { attrs.disabled = true; }
     }
 
-    if(props.loading)
-    {
-        attrs.push('aria-busy="true"');
-    }
-
-    if(props.pressed)
-    {
-        attrs.push('aria-pressed="true"');
-    }
+    if(props.loading) { attrs['aria-busy'] = 'true'; }
+    if(props.pressed) { attrs['aria-pressed'] = 'true'; }
 
     const tag = isAnchor ? 'a' : 'button';
-    const inner = `<span class="sk-button-chrome">${ children }</span>`;
-
-    return `<${ tag } ${ attrs.join(' ') }>${ inner }</${ tag }>`;
+    return h(tag, attrs, h('span', { class: 'sk-button-chrome' }, children));
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/card.ts

@@ -7,6 +7,7 @@
 
 import type { CardKind, StaticCustomColors } from '../types';
 
+import type { H } from '../h';
 import { render } from '../render';
 import { SPECS } from '../specs';
 
@@ -19,9 +20,9 @@ export interface CardStaticProps extends StaticCustomColors
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function card(props : CardStaticProps = {}, children = '') : string
+export function card<T>(h : H<T>, props : CardStaticProps = {}, children ?: T | T[]) : T
 {
-    return render(SPECS.card, props as Record<string, unknown>, children);
+    return render(h, SPECS.card, props as Record<string, unknown>, children);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/checkbox.ts

@@ -8,8 +8,8 @@
 
 import type { ComponentKind, ComponentSize } from '../types';
 
+import type { H } from '../h';
 import { composeClasses } from '../classes';
-import { escapeAttr } from '../escape';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -25,24 +25,21 @@ export interface CheckboxStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function checkbox(props : CheckboxStaticProps = {}, children = '') : string
+export function checkbox<T>(h : H<T>, props : CheckboxStaticProps = {}, children ?: T | T[]) : T
 {
     const classes = composeClasses({ base: 'sk-checkbox', kind: true, size: true }, props as Record<string, unknown>);
 
-    const inputAttrs : string[] = [ 'type="checkbox"' ];
-    if(props.name)
-    {
-        inputAttrs.push(`name="${ escapeAttr(props.name) }"`);
-    }
-    if(props.checked === true) { inputAttrs.push('checked'); }
-    if(props.disabled === true) { inputAttrs.push('disabled'); }
-    if(props.required === true) { inputAttrs.push('required'); }
+    const inputAttrs : Record<string, unknown> = { type: 'checkbox' };
+    if(props.name) { inputAttrs.name = props.name; }
+    if(props.checked === true) { inputAttrs.checked = true; }
+    if(props.disabled === true) { inputAttrs.disabled = true; }
+    if(props.required === true) { inputAttrs.required = true; }
 
-    const inputEl = `<input ${ inputAttrs.join(' ') } />`;
-    const boxEl = `<span class="sk-checkbox-box"></span>`;
-    const labelEl = `<span class="sk-checkbox-label">${ children }</span>`;
+    const inputEl = h('input', inputAttrs);
+    const boxEl = h('span', { class: 'sk-checkbox-box' });
+    const labelEl = h('span', { class: 'sk-checkbox-label' }, children);
 
-    return `<label class="${ escapeAttr(classes) }">${ inputEl }${ boxEl }${ labelEl }</label>`;
+    return h('label', { class: classes }, [ inputEl, boxEl, labelEl ]);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/colorPicker.ts

@@ -7,8 +7,8 @@
 
 import type { ComponentSize } from '../types';
 
+import type { H } from '../h';
 import { composeClasses } from '../classes';
-import { escapeAttr } from '../escape';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -22,24 +22,22 @@ export interface ColorPickerStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function colorPicker(props : ColorPickerStaticProps = {}) : string
+export function colorPicker<T>(h : H<T>, props : ColorPickerStaticProps = {}) : T
 {
     const classes = composeClasses({ base: 'sk-color-picker', size: true }, props as Record<string, unknown>);
-    const attrs : string[] = [ `class="${ escapeAttr(classes) }"`, 'type="color"' ];
+    const attrs : Record<string, unknown> = { class: classes, type: 'color' };
 
     const passthroughString = [ 'value', 'name' ] as const;
     for(const key of passthroughString)
     {
         const val = props[key];
-        if(typeof val === 'string')
-        {
-            attrs.push(`${ key }="${ escapeAttr(val) }"`);
-        }
+        if(typeof val === 'string') { attrs[key] = val; }
     }
 
-    if(props.disabled === true) { attrs.push('disabled'); }
+    if(props.disabled === true) { attrs.disabled = true; }
 
-    return `<input ${ attrs.join(' ') } />`;
+    // void element — no children
+    return h('input', attrs);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/divider.ts

@@ -10,7 +10,7 @@
 
 import type { ComponentKind, ComponentSize, DividerOrientation, DividerVariant } from '../types';
 
-import { escapeAttr } from '../escape';
+import type { H } from '../h';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -24,7 +24,7 @@ export interface DividerStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function divider(props : DividerStaticProps = {}) : string
+export function divider<T>(h : H<T>, props : DividerStaticProps = {}) : T
 {
     const orientation = props.orientation ?? 'horizontal';
     const kind = props.kind ?? 'neutral';
@@ -33,7 +33,8 @@ export function divider(props : DividerStaticProps = {}) : string
     const classes : string[] = [ 'sk-divider', `sk-${ orientation }`, `sk-${ kind }`, `sk-${ size }` ];
     if(props.variant === 'subtle') { classes.push('sk-subtle'); }
 
-    return `<hr class="${ escapeAttr(classes.join(' ')) }" role="separator">`;
+    // hr is void — no children
+    return h('hr', { class: classes.join(' '), role: 'separator' });
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/dropdown.ts

@@ -8,8 +8,9 @@
 
 import type { SemanticKind } from '../types';
 
+import type { H } from '../h';
 import { composeClasses } from '../classes';
-import { escapeAttr } from '../escape';
+import { text } from '../escape';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -23,14 +24,22 @@ export interface DropdownStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function dropdown(props : DropdownStaticProps, children = '') : string
+export function dropdown<T>(h : H<T>, props : DropdownStaticProps, children ?: T | T[]) : T
 {
     const spec = { base: 'sk-dropdown', kind: true, size: true } as const;
     const classes = composeClasses(spec, props as unknown as Record<string, unknown>);
-    const attrs : string[] = [ `class="${ escapeAttr(classes) }"` ];
-    if(props.open) { attrs.push('open'); }
-
-    return `<details ${ attrs.join(' ') }><summary>${ escapeAttr(props.summary) }</summary>${ children }</details>`;
+    const attrs : Record<string, unknown> = { class: classes };
+    if(props.open) { attrs.open = true; }
+
+    const summaryEl = h('summary', { innerHTML: text(props.summary) });
+    const inner : T[] = [ summaryEl ];
+    if(children !== undefined)
+    {
+        if(Array.isArray(children)) { inner.push(...children); }
+        else { inner.push(children); }
+    }
+
+    return h('details', attrs, inner);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/field.ts

@@ -21,7 +21,8 @@
 
 import type { FieldLabelPosition } from '../types';
 
-import { escapeAttr } from '../escape';
+import type { H } from '../h';
+import { text } from '../escape';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -43,44 +44,60 @@ export interface FieldStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function field(props : FieldStaticProps = {}, children = '') : string
+export function field<T>(h : H<T>, props : FieldStaticProps = {}, children ?: T | T[]) : T
 {
     const labelPosition = props.labelPosition ?? 'top';
 
     const classes : string[] = [ 'sk-field', `sk-label-${ labelPosition }` ];
     if(props.error) { classes.push('sk-has-error'); }
 
-    const attrs = `class="${ escapeAttr(classes.join(' ')) }"`;
+    const rootAttrs : Record<string, unknown> = { class: classes.join(' ') };
+
+    const inner : T[] = [];
 
     // Label element (only when label prop is set)
-    let labelHtml = '';
     if(props.label)
     {
-        const forAttr = props.id ? ` for="${ escapeAttr(props.id) }"` : '';
-        const requiredSpan = props.required ? '<span class="sk-field-required">*</span>' : '';
-        labelHtml = `<label${ forAttr } class="sk-field-label">${ escapeAttr(props.label) }${ requiredSpan }</label>`;
+        const labelAttrs : Record<string, unknown> = { class: 'sk-field-label' };
+        if(props.id) { labelAttrs.for = props.id; }
+
+        if(props.required)
+        {
+            // Combine label text + required asterisk as innerHTML so both are real DOM nodes in Vue/React.
+            const requiredSpan = `<span class="sk-field-required">*</span>`;
+            labelAttrs.innerHTML = `${ text(props.label) }${ requiredSpan }`;
+            inner.push(h('label', labelAttrs));
+        }
+        else
+        {
+            labelAttrs.innerHTML = text(props.label);
+            inner.push(h('label', labelAttrs));
+        }
     }
 
     // Input wrapper always emitted
-    const wrapperHtml = `<div class="sk-field-input-wrapper">${ children }</div>`;
+    inner.push(h('div', { class: 'sk-field-input-wrapper' }, children));
 
     // Description (only when set and no error)
-    let descriptionHtml = '';
     if(props.description && !props.error)
     {
-        const idAttr = props.id ? ` id="${ escapeAttr(props.id) }-description"` : '';
-        descriptionHtml = `<p${ idAttr } class="sk-field-description">${ escapeAttr(props.description) }</p>`;
+        const descAttrs : Record<string, unknown> = {
+            class: 'sk-field-description',
+            innerHTML: text(props.description),
+        };
+        if(props.id) { descAttrs.id = `${ props.id }-description`; }
+        inner.push(h('p', descAttrs));
     }
 
     // Error (only when set)
-    let errorHtml = '';
     if(props.error)
     {
-        const idAttr = props.id ? ` id="${ escapeAttr(props.id) }-error"` : '';
-        errorHtml = `<p${ idAttr } class="sk-field-error">${ escapeAttr(props.error) }</p>`;
+        const errAttrs : Record<string, unknown> = { class: 'sk-field-error', innerHTML: text(props.error) };
+        if(props.id) { errAttrs.id = `${ props.id }-error`; }
+        inner.push(h('p', errAttrs));
     }
 
-    return `<div ${ attrs }>${ labelHtml }${ wrapperHtml }${ descriptionHtml }${ errorHtml }</div>`;
+    return h('div', rootAttrs, inner);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/group.ts

@@ -7,6 +7,7 @@
 
 import type { GroupOrientation } from '../types';
 
+import type { H } from '../h';
 import { render } from '../render';
 import { SPECS } from '../specs';
 
@@ -19,9 +20,9 @@ export interface GroupStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function group(props : GroupStaticProps = {}, children = '') : string
+export function group<T>(h : H<T>, props : GroupStaticProps = {}, children ?: T | T[]) : T
 {
-    return render(SPECS.group, props as Record<string, unknown>, children);
+    return render(h, SPECS.group, props as Record<string, unknown>, children);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/input.ts

@@ -5,10 +5,10 @@
 // name, id, and boolean attrs (disabled, readonly, required).
 //----------------------------------------------------------------------------------------------------------------------
 
-import type { ComponentKind, ComponentSize } from '../types';
+import type { ComponentKind, ComponentSize, InputCorner } from '../types';
 
+import type { H } from '../h';
 import { composeClasses } from '../classes';
-import { escapeAttr } from '../escape';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -16,6 +16,7 @@ export interface InputStaticProps
 {
     kind ?: ComponentKind;
     size ?: ComponentSize;
+    corners ?: InputCorner[];
     type ?: string;
     value ?: string;
     placeholder ?: string;
@@ -28,28 +29,32 @@ export interface InputStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function input(props : InputStaticProps = {}) : string
+export function input<T>(h : H<T>, props : InputStaticProps = {}) : T
 {
-    const classes = composeClasses({ base: 'sk-input', kind: true, size: true }, props as Record<string, unknown>);
-    const attrs : string[] = [ `class="${ escapeAttr(classes) }"` ];
+    const classes = composeClasses(
+        {
+            base: 'sk-input',
+            kind: true,
+            size: true,
+            listFlags: [ { prop: 'corners', family: 'cut' } ],
+        },
+        props as Record<string, unknown>
+    );
+    const attrs : Record<string, unknown> = { class: classes };
 
     const passthroughString = [ 'type', 'value', 'placeholder', 'name', 'id' ] as const;
     for(const key of passthroughString)
     {
         const val = props[key];
-        if(typeof val === 'string')
-        {
-            attrs.push(`${ key }="${ escapeAttr(val) }"`);
-        }
+        if(typeof val === 'string') { attrs[key] = val; }
     }
 
-    const passthroughBool = [ 'disabled', 'readonly', 'required' ] as const;
-    for(const key of passthroughBool)
-    {
-        if(props[key] === true) { attrs.push(key); }
-    }
+    if(props.disabled === true) { attrs.disabled = true; }
+    if(props.readonly === true) { attrs.readonly = true; }
+    if(props.required === true) { attrs.required = true; }
 
-    return `<input ${ attrs.join(' ') } />`;
+    // void element — no children
+    return h('input', attrs);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/inputGroup.ts

@@ -0,0 +1,30 @@
+//----------------------------------------------------------------------------------------------------------------------
+// InputGroup Static Helper
+//
+// Thin typed wrapper over the generic render() core. Emits a class-API <div> with sk-input-group
+// modifier classes derived from props.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize, InputGroupCorner, StaticCustomColors } from '../types';
+
+import type { H } from '../h';
+import { render } from '../render';
+import { SPECS } from '../specs';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface InputGroupStaticProps extends StaticCustomColors
+{
+    kind ?: ComponentKind;
+    size ?: ComponentSize;
+    corners ?: InputGroupCorner[];
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function inputGroup<T>(h : H<T>, props : InputGroupStaticProps = {}, children ?: T | T[]) : T
+{
+    return render(h, SPECS.inputGroup, props as Record<string, unknown>, children);
+}
+
+//----------------------------------------------------------------------------------------------------------------------