@skewedaspect/sleekspace-ui 0.9.0 → 0.10.0

package/src/static/components/switchInput.ts

@@ -9,8 +9,8 @@
 
 import type { ComponentKind, ComponentSize } from '../types';
 
+import type { H } from '../h';
 import { composeClasses } from '../classes';
-import { escapeAttr } from '../escape';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -26,24 +26,22 @@ export interface SwitchStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function switchInput(props : SwitchStaticProps = {}, children = '') : string
+export function switchInput<T>(h : H<T>, props : SwitchStaticProps = {}, children ?: T | T[]) : T
 {
     const classes = composeClasses({ base: 'sk-switch', 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 trackEl = `<span class="sk-switch-track"><span class="sk-switch-thumb"></span></span>`;
-    const labelEl = `<span class="sk-switch-label">${ children }</span>`;
+    const inputEl = h('input', inputAttrs);
+    const thumbEl = h('span', { class: 'sk-switch-thumb' });
+    const trackEl = h('span', { class: 'sk-switch-track' }, thumbEl);
+    const labelEl = h('span', { class: 'sk-switch-label' }, children);
 
-    return `<label class="${ escapeAttr(classes) }">${ inputEl }${ trackEl }${ labelEl }</label>`;
+    return h('label', { class: classes }, [ inputEl, trackEl, labelEl ]);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/table.ts

@@ -17,7 +17,7 @@
 
 import type { StaticCustomColors, TableKind, TableVariant } from '../types';
 
-import { escapeAttr } from '../escape';
+import type { H } from '../h';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -35,7 +35,7 @@ export interface TableStaticProps extends StaticCustomColors
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function table(props : TableStaticProps = {}, children = '') : string
+export function table<T>(h : H<T>, props : TableStaticProps = {}, children ?: T | T[]) : T
 {
     const kind = props.kind ?? 'neutral';
     const variant = props.variant ?? 'default';
@@ -61,28 +61,26 @@ export function table(props : TableStaticProps = {}, children = '') : string
     if(!innerBorders) { tableClasses.push('sk-no-inner-borders'); }
     if(subtle) { tableClasses.push('sk-subtle'); }
 
-    const tableAttrs : string[] = [ `class="${ escapeAttr(tableClasses.join(' ')) }"` ];
+    const tableAttrs : Record<string, unknown> = { class: tableClasses.join(' ') };
 
     // Custom color vars — match Vue's useCustomColors('table', ...) output
     const styleParts : string[] = [];
     if(typeof props.baseColor === 'string')
     {
-        styleParts.push(`--sk-table-color-base: ${ escapeAttr(props.baseColor) };`);
+        styleParts.push(`--sk-table-color-base: ${ props.baseColor };`);
     }
     if(typeof props.textColor === 'string')
     {
-        styleParts.push(`--sk-table-fg: ${ escapeAttr(props.textColor) };`);
+        styleParts.push(`--sk-table-fg: ${ props.textColor };`);
     }
     if(styleParts.length > 0)
     {
-        tableAttrs.push(`style="${ styleParts.join(' ') }"`);
+        tableAttrs.style = styleParts.join(' ');
     }
 
-    const wrapperAttr = `class="${ escapeAttr(wrapperClasses.join(' ')) }"`;
+    const wrapperAttrs : Record<string, unknown> = { class: wrapperClasses.join(' ') };
 
-    return `<div ${ wrapperAttr }>`
-        + `<table ${ tableAttrs.join(' ') }>${ children }</table>`
-        + '</div>';
+    return h('div', wrapperAttrs, h('table', tableAttrs, children));
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/tag.ts

@@ -14,7 +14,7 @@
 
 import type { ComponentKind, StaticCustomColors, TagSize, TagVariant } from '../types';
 
-import { escapeAttr } from '../escape';
+import type { H } from '../h';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -38,7 +38,7 @@ const REMOVE_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="2
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function tag(props : TagStaticProps = {}, children = '') : string
+export function tag<T>(h : H<T>, props : TagStaticProps = {}, children ?: T | T[]) : T
 {
     const kind = props.kind ?? 'neutral';
     const variant = props.variant ?? 'solid';
@@ -47,30 +47,36 @@ export function tag(props : TagStaticProps = {}, children = '') : string
     const classes : string[] = [ 'sk-tag', `sk-${ kind }`, `sk-${ variant }`, `sk-${ size }` ];
     if(props.removable) { classes.push('sk-removable'); }
 
-    const attrs : string[] = [ `class="${ escapeAttr(classes.join(' ')) }"` ];
+    const attrs : Record<string, unknown> = { class: classes.join(' ') };
 
     // Custom color vars — match Vue's useCustomColors('tag', ...) output
     const styleParts : string[] = [];
     if(typeof props.baseColor === 'string')
     {
-        styleParts.push(`--sk-tag-color-base: ${ escapeAttr(props.baseColor) };`);
+        styleParts.push(`--sk-tag-color-base: ${ props.baseColor };`);
     }
     if(typeof props.textColor === 'string')
     {
-        styleParts.push(`--sk-tag-fg: ${ escapeAttr(props.textColor) };`);
+        styleParts.push(`--sk-tag-fg: ${ props.textColor };`);
     }
     if(styleParts.length > 0)
     {
-        attrs.push(`style="${ styleParts.join(' ') }"`);
+        attrs.style = styleParts.join(' ');
     }
 
-    const contentSpan = `<span class="sk-tag-content">${ children }</span>`;
+    const contentEl = h('span', { class: 'sk-tag-content' }, children);
+    const inner : T[] = [ contentEl ];
 
-    const removeButton = props.removable
-        ? `<button type="button" class="sk-tag-remove" aria-label="Remove">${ REMOVE_SVG }</button>`
-        : '';
+    if(props.removable)
+    {
+        const removeEl = h(
+            'button',
+            { 'type': 'button', 'class': 'sk-tag-remove', 'aria-label': 'Remove', 'innerHTML': REMOVE_SVG }
+        );
+        inner.push(removeEl);
+    }
 
-    return `<span ${ attrs.join(' ') }>${ contentSpan }${ removeButton }</span>`;
+    return h('span', attrs, inner);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/tagsInput.ts

@@ -8,8 +8,8 @@
 
 import type { ComponentKind, ComponentSize } from '../types';
 
+import type { H } from '../h';
 import { composeClasses } from '../classes';
-import { escapeAttr } from '../escape';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -22,14 +22,14 @@ export interface TagsInputStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function tagsInput(props : TagsInputStaticProps = {}, children = '') : string
+export function tagsInput<T>(h : H<T>, props : TagsInputStaticProps = {}, children ?: T | T[]) : T
 {
     const classes = composeClasses(
         { base: 'sk-tags-input', kind: true, size: true },
         props as Record<string, unknown>
     );
 
-    return `<div class="${ escapeAttr(classes) }">${ children }</div>`;
+    return h('div', { class: classes }, children);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/textarea.ts

@@ -7,8 +7,8 @@
 
 import type { ComponentKind, ComponentSize } from '../types';
 
+import type { H } from '../h';
 import { composeClasses } from '../classes';
-import { escapeAttr } from '../escape';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -26,28 +26,23 @@ export interface TextareaStaticProps
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function textarea(props : TextareaStaticProps = {}, children = '') : string
+export function textarea<T>(h : H<T>, props : TextareaStaticProps = {}, children ?: T | T[]) : T
 {
     const classes = composeClasses({ base: 'sk-textarea', kind: true, size: true }, props as Record<string, unknown>);
-    const attrs : string[] = [ `class="${ escapeAttr(classes) }"` ];
+    const attrs : Record<string, unknown> = { class: classes };
 
     const passthroughString = [ '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 `<textarea ${ attrs.join(' ') }>${ children }</textarea>`;
+    return h('textarea', attrs, children);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/toolbar.ts

@@ -15,7 +15,7 @@
 
 import type { StaticCustomColors, ToolbarCorner, ToolbarKind, ToolbarOrientation } from '../types';
 
-import { escapeAttr } from '../escape';
+import type { H } from '../h';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -38,7 +38,7 @@ const DEFAULT_CORNERS : ToolbarCorner[] = [ 'top-left', 'top-right', 'bottom-rig
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function toolbar(props : ToolbarStaticProps = {}, children = '') : string
+export function toolbar<T>(h : H<T>, props : ToolbarStaticProps = {}, children ?: T | T[]) : T
 {
     const kind = props.kind;
     const orientation = props.orientation ?? 'horizontal';
@@ -51,24 +51,21 @@ export function toolbar(props : ToolbarStaticProps = {}, children = '') : string
     parts.push(`sk-${ orientation }`);
     for(const corner of corners) { parts.push(`sk-cut-${ corner }`); }
 
-    const attrs : string[] = [ `class="${ escapeAttr(parts.join(' ')) }"`, 'role="toolbar"' ];
+    const attrs : Record<string, unknown> = { class: parts.join(' '), role: 'toolbar' };
 
     // Custom color vars
     const styleParts : string[] = [];
     if(typeof props.baseColor === 'string')
     {
-        styleParts.push(`--sk-toolbar-color-base: ${ escapeAttr(props.baseColor) };`);
+        styleParts.push(`--sk-toolbar-color-base: ${ props.baseColor };`);
     }
     if(typeof props.textColor === 'string')
     {
-        styleParts.push(`--sk-toolbar-fg: ${ escapeAttr(props.textColor) };`);
-    }
-    if(styleParts.length > 0)
-    {
-        attrs.push(`style="${ styleParts.join(' ') }"`);
+        styleParts.push(`--sk-toolbar-fg: ${ props.textColor };`);
     }
+    if(styleParts.length > 0) { attrs.style = styleParts.join(' '); }
 
-    return `<div ${ attrs.join(' ') }>${ children }</div>`;
+    return h('div', attrs, children);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/components/tooltip.ts

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

package/src/static/generated/defaults.ts

@@ -16,6 +16,17 @@ export const DEFAULTS : Record<string, Record<string, unknown>> =
         subtle: false,
         showIcon: undefined,
     },
+    autocomplete:
+    {
+        kind: undefined,
+        size: undefined,
+        placeholder: 'Search...',
+        disabled: false,
+        openOnFocus: true,
+        openOnClick: false,
+        clearable: false,
+        ignoreFilter: false,
+    },
     avatar:
     {
         src: undefined,
@@ -34,13 +45,14 @@ export const DEFAULTS : Record<string, Record<string, unknown>> =
     button:
     {
         type: 'button',
-        kind: 'neutral',
+        kind: undefined,
         variant: 'solid',
-        size: 'md',
+        size: undefined,
         disabled: false,
         loading: false,
         pressed: false,
         dense: false,
+        corners: undefined,
         href: undefined,
         to: undefined,
     },
@@ -77,7 +89,7 @@ export const DEFAULTS : Record<string, Record<string, unknown>> =
     'color-picker':
     {
         kind: undefined,
-        size: 'md',
+        size: undefined,
         format: 'hexa',
         showAlpha: true,
         disabled: false,
@@ -124,7 +136,8 @@ export const DEFAULTS : Record<string, Record<string, unknown>> =
     {
         type: 'text',
         kind: undefined,
-        size: 'md',
+        size: undefined,
+        corners: undefined,
         placeholder: undefined,
         disabled: false,
         readonly: false,
@@ -135,7 +148,7 @@ export const DEFAULTS : Record<string, Record<string, unknown>> =
     listbox:
     {
         kind: undefined,
-        size: 'md',
+        size: undefined,
         placeholder: 'Search...',
         disabled: false,
     },
@@ -160,7 +173,7 @@ export const DEFAULTS : Record<string, Record<string, unknown>> =
     'number-input':
     {
         kind: undefined,
-        size: 'md',
+        size: undefined,
         placeholder: undefined,
         disabled: false,
         readonly: false,
@@ -169,6 +182,8 @@ export const DEFAULTS : Record<string, Record<string, unknown>> =
         min: undefined,
         max: undefined,
         step: 1,
+        showSteppers: true,
+        corners: undefined,
     },
     page:
     {
@@ -247,9 +262,10 @@ export const DEFAULTS : Record<string, Record<string, unknown>> =
     select:
     {
         kind: undefined,
-        size: 'md',
+        size: undefined,
         placeholder: 'Select...',
         disabled: false,
+        corners: undefined,
     },
     sidebar:
     {
@@ -337,7 +353,7 @@ export const DEFAULTS : Record<string, Record<string, unknown>> =
     'tags-input':
     {
         kind: undefined,
-        size: 'md',
+        size: undefined,
         placeholder: 'Add tag...',
         disabled: false,
         max: undefined,
@@ -348,7 +364,7 @@ export const DEFAULTS : Record<string, Record<string, unknown>> =
     textarea:
     {
         kind: undefined,
-        size: 'md',
+        size: undefined,
         placeholder: undefined,
         disabled: false,
         readonly: false,

package/src/static/generated/propTypes.ts

@@ -22,6 +22,18 @@ export interface SkAlertStaticProps extends ComponentCustomColors
     showIcon ? : boolean;
 }
 
+export interface SkAutocompleteStaticProps extends ComponentCustomColors
+{
+    kind ? : SkAutocompleteKind;
+    size ? : SkAutocompleteSize;
+    placeholder ? : string;
+    disabled ? : boolean;
+    openOnFocus ? : boolean;
+    openOnClick ? : boolean;
+    clearable ? : boolean;
+    ignoreFilter ? : boolean;
+}
+
 export interface SkAvatarStaticProps extends ComponentCustomColors
 {
     src ? : string;
@@ -49,6 +61,7 @@ export interface SkButtonStaticProps extends ComponentCustomColors
     loading ? : boolean;
     pressed ? : boolean;
     dense ? : boolean;
+    corners ? : SkButtonCorner[];
     href ? : string;
     to ? : string | Record<string, any>;
 }
@@ -129,8 +142,8 @@ export interface SkFieldStaticProps extends ComponentCustomColors
     labelPosition ? : SkFieldLabelPosition;
     id ? : string;
     state ? : boolean | null;
-    validKind ? : string;
-    invalidKind ? : string;
+    validKind ? : ComponentKind;
+    invalidKind ? : ComponentKind;
 }
 
 export interface SkGroupStaticProps extends ComponentCustomColors
@@ -143,6 +156,7 @@ export interface SkInputStaticProps extends ComponentCustomColors
     type ? : SkInputType;
     kind ? : SkInputKind;
     size ? : SkInputSize;
+    corners ? : SkInputCorner[];
     placeholder ? : string;
     disabled ? : boolean;
     readonly ? : boolean;
@@ -191,6 +205,8 @@ export interface SkNumberInputStaticProps extends ComponentCustomColors
     min ? : number;
     max ? : number;
     step ? : number;
+    showSteppers ? : boolean;
+    corners ? : SkNumberInputCorner[];
 }
 
 export interface SkPageStaticProps extends ComponentCustomColors
@@ -282,6 +298,7 @@ export interface SkSelectStaticProps extends ComponentCustomColors
     size ? : SkSelectSize;
     placeholder ? : string;
     disabled ? : boolean;
+    corners ? : SkSelectCorner[];
 }
 
 export interface SkSidebarStaticProps extends ComponentCustomColors

package/src/static/h.ts

@@ -0,0 +1,16 @@
+//----------------------------------------------------------------------------------------------------------------------
+// H Adapter — Hyperscript-style createElement signature.
+//
+// Every static helper takes an `h` adapter as its first argument. The adapter is whatever
+// createElement-like function the consumer's framework provides — Vue's `h`, React's
+// `createElement`, or the `stringH` shipped here for plain HTML-string output.
+//
+// Attribute conventions are HTML-style: `class` (not `className`), `style` as a CSS string.
+// Vue's `h` normalises these natively. React consumers should wrap their adapter to remap.
+//----------------------------------------------------------------------------------------------------------------------
+
+export type HAttrs = Record<string, unknown> | null;
+
+export type H<T> = (tag : string, attrs : HAttrs, children ?: T | T[]) => T;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/index.ts

@@ -12,6 +12,8 @@ export { composeClasses } from './classes';
 export type { ClassSpec, ListFlagSpec, SingleChoiceFlagSpec } from './classes';
 export { render } from './render';
 export type { RenderSpec } from './render';
+export { stringH } from './stringH';
+export type { H, HAttrs } from './h';
 
 // Shared types
 export type * from './types';
@@ -81,6 +83,12 @@ export type { ButtonStaticProps } from './components/button';
 export { input } from './components/input';
 export type { InputStaticProps } from './components/input';
 
+export { inputGroup } from './components/inputGroup';
+export type { InputGroupStaticProps } from './components/inputGroup';
+
+export { inputGroupAddon } from './components/inputGroupAddon';
+export type { InputGroupAddonStaticProps } from './components/inputGroupAddon';
+
 export { textarea } from './components/textarea';
 export type { TextareaStaticProps } from './components/textarea';
 

package/src/static/render.test.ts

@@ -1,10 +1,14 @@
 //----------------------------------------------------------------------------------------------------------------------
 // Render Core Tests
+//
+// Verifies render() against the stringH adapter. The output is HTML strings, but render()
+// itself is adapter-agnostic — feed it Vue's h or React.createElement to get framework VNodes.
 //----------------------------------------------------------------------------------------------------------------------
 
 import { describe, expect, it } from 'vitest';
 
 import { type RenderSpec, render } from './render';
+import { stringH } from './stringH';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -24,59 +28,59 @@ describe('render', () =>
 {
     it('emits a bare tag with base class when no props', () =>
     {
-        expect(render(PANEL_SPEC, {}, '')).toBe('<div class="sk-panel"></div>');
+        expect(render(stringH, PANEL_SPEC, {}, '')).toBe('<div class="sk-panel"></div>');
     });
 
     it('appends children verbatim', () =>
     {
-        expect(render(PANEL_SPEC, {}, 'Hello')).toBe('<div class="sk-panel">Hello</div>');
+        expect(render(stringH, PANEL_SPEC, {}, 'Hello')).toBe('<div class="sk-panel">Hello</div>');
     });
 
     it('embeds nested HTML children', () =>
     {
-        expect(render(PANEL_SPEC, {}, '<span>inner</span>'))
+        expect(render(stringH, PANEL_SPEC, {}, '<span>inner</span>'))
             .toBe('<div class="sk-panel"><span>inner</span></div>');
     });
 
     it('includes classes from prop modifiers', () =>
     {
-        expect(render(PANEL_SPEC, { kind: 'primary', size: 'lg' }, 'x'))
+        expect(render(stringH, PANEL_SPEC, { kind: 'primary', size: 'lg' }, 'x'))
             .toBe('<div class="sk-panel sk-primary sk-lg sk-size-lg">x</div>');
     });
 
     it('emits custom color inline style from baseColor / textColor', () =>
     {
-        expect(render(PANEL_SPEC, { baseColor: '#f00', textColor: '#fff' }, 'x'))
+        expect(render(stringH, PANEL_SPEC, { baseColor: '#f00', textColor: '#fff' }, 'x'))
             .toBe('<div class="sk-panel" style="--sk-panel-color-base: #f00; --sk-panel-fg: #fff;">x</div>');
     });
 
     it('uses tag="button" when spec overrides', () =>
     {
         const spec : RenderSpec = { tag: 'button', classSpec: { base: 'sk-button' } };
-        expect(render(spec, {}, 'Save')).toBe('<button class="sk-button" type="button">Save</button>');
+        expect(render(stringH, spec, {}, 'Save')).toBe('<button class="sk-button" type="button">Save</button>');
     });
 
     it('omits type="button" for non-button tags', () =>
     {
-        expect(render(PANEL_SPEC, {}, 'x')).not.toMatch(/type="button"/);
+        expect(render(stringH, PANEL_SPEC, {}, 'x')).not.toMatch(/type="button"/);
     });
 
     it('respects `extraAttrs` from the spec', () =>
     {
         const spec : RenderSpec = { tag: 'div', classSpec: { base: 'sk-alert' }, extraAttrs: { role: 'alert' } };
-        expect(render(spec, {}, 'warning')).toBe('<div class="sk-alert" role="alert">warning</div>');
+        expect(render(stringH, spec, {}, 'warning')).toBe('<div class="sk-alert" role="alert">warning</div>');
     });
 
     it('escapes attribute values containing dangerous characters', () =>
     {
-        expect(render(PANEL_SPEC, { baseColor: '"><script>' }, 'x'))
+        expect(render(stringH, PANEL_SPEC, { baseColor: '"><script>' }, 'x'))
             .toContain('style="--sk-panel-color-base: &quot;&gt;&lt;script&gt;;"');
     });
 
     it('renders void/self-closing elements without children when spec.void is true', () =>
     {
         const spec : RenderSpec = { tag: 'input', classSpec: { base: 'sk-input' }, void: true };
-        expect(render(spec, {}, '')).toBe('<input class="sk-input" />');
+        expect(render(stringH, spec, {}, '')).toBe('<input class="sk-input" />');
     });
 });