@skewedaspect/sleekspace-ui 0.9.0 → 0.10.0

package/src/static/render.ts

@@ -1,15 +1,20 @@
 //----------------------------------------------------------------------------------------------------------------------
 // Render Core
 //
-// Generic renderer used by every component helper. Takes a `RenderSpec` (element tag, class
-// composition spec, optional extras) and a props object, and emits an HTML string.
+// Generic renderer used by every component helper. Takes an `H` adapter (from the consumer's
+// framework — Vue's h, React's createElement, or stringH for plain HTML-string output), a
+// `RenderSpec` (element tag, class composition spec, optional extras), a props object, and the
+// children to nest inside.
+//
+// The output type is whatever `h` returns — a Vue VNode, a React element, or an HTML string —
+// so consumers compose static helpers naturally with their framework's templating.
 //
 // The output is the class-API form: <tag class="sk-component modifier-classes"> ... </tag>.
 // Custom-element output is NOT emitted here — helpers always produce class-API HTML.
 //----------------------------------------------------------------------------------------------------------------------
 
 import { type ClassSpec, composeClasses } from './classes';
-import { escapeAttr } from './escape';
+import type { H } from './h';
 
 //----------------------------------------------------------------------------------------------------------------------
 
@@ -26,51 +31,61 @@ export interface RenderSpec
 
 //----------------------------------------------------------------------------------------------------------------------
 
-export function render(spec : RenderSpec, props : Record<string, unknown>, children : string) : string
+function buildAttrs(spec : RenderSpec, props : Record<string, unknown>) : Record<string, unknown>
 {
-    const classes = composeClasses(spec.classSpec, props);
-    const attrs : string[] = [ `class="${ escapeAttr(classes) }"` ];
+    const attrs : Record<string, unknown> = { class: composeClasses(spec.classSpec, props) };
 
     if(spec.tag === 'button')
     {
-        attrs.push(`type="button"`);
+        attrs.type = 'button';
     }
 
     if(spec.extraAttrs)
     {
         for(const [ name, value ] of Object.entries(spec.extraAttrs))
         {
-            attrs.push(`${ name }="${ escapeAttr(value) }"`);
+            attrs[name] = value;
         }
     }
 
-    const styleParts : string[] = [];
     if(spec.customColorVars)
     {
+        const styleParts : string[] = [];
         const { base, text: textVar } = spec.customColorVars;
         if(base && typeof props.baseColor === 'string')
         {
-            styleParts.push(`${ base }: ${ escapeAttr(props.baseColor) };`);
+            styleParts.push(`${ base }: ${ props.baseColor };`);
         }
         if(textVar && typeof props.textColor === 'string')
         {
-            styleParts.push(`${ textVar }: ${ escapeAttr(props.textColor) };`);
+            styleParts.push(`${ textVar }: ${ props.textColor };`);
+        }
+        if(styleParts.length > 0)
+        {
+            attrs.style = styleParts.join(' ');
         }
     }
 
-    if(styleParts.length > 0)
-    {
-        attrs.push(`style="${ styleParts.join(' ') }"`);
-    }
+    return attrs;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
 
-    const attrString = attrs.join(' ');
+export function render<T>(
+    h : H<T>,
+    spec : RenderSpec,
+    props : Record<string, unknown>,
+    children ?: T | T[]
+) : T
+{
+    const attrs = buildAttrs(spec, props);
 
     if(spec.void)
     {
-        return `<${ spec.tag } ${ attrString } />`;
+        return h(spec.tag, attrs);
     }
 
-    return `<${ spec.tag } ${ attrString }>${ children }</${ spec.tag }>`;
+    return h(spec.tag, attrs, children);
 }
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/static/specs.test.ts

@@ -20,6 +20,7 @@ const componentsDir = join(here, '..', 'components');
 // Components that are out-of-scope per the design spec (Vue-only, not pure-CSS-eligible)
 const OUT_OF_SCOPE = new Set([
     'Accordion',
+    'Autocomplete',
     'Collapsible',
     'ContextMenu',
     'Listbox',

package/src/static/specs.ts

@@ -183,7 +183,7 @@ export const SPECS : Record<string, RenderSpec> = {
     // Class-only form controls — class-API HTML on native elements
     input: {
         tag: 'input',
-        classSpec: { base: 'sk-input', kind: true, size: true },
+        classSpec: { base: 'sk-input', kind: true, size: true, listFlags: [ { prop: 'corners', family: 'cut' } ] },
         void: true,
     },
 
@@ -194,7 +194,7 @@ export const SPECS : Record<string, RenderSpec> = {
 
     select: {
         tag: 'select',
-        classSpec: { base: 'sk-select', kind: true, size: true },
+        classSpec: { base: 'sk-select', kind: true, size: true, listFlags: [ { prop: 'corners', family: 'cut' } ] },
     },
 
     slider: {
@@ -220,6 +220,26 @@ export const SPECS : Record<string, RenderSpec> = {
     // respective component files. They compose multiple inner elements the generic renderer
     // can't express.
 
+    inputGroup: {
+        tag: 'div',
+        classSpec: {
+            base: 'sk-input-group',
+            kind: true,
+            size: true,
+            listFlags: [ { prop: 'corners', family: 'cut' } ],
+        },
+        customColorVars: { base: '--sk-input-group-color-base', text: '--sk-input-group-fg' },
+    },
+
+    inputGroupAddon: {
+        tag: 'span',
+        classSpec: {
+            base: 'sk-input-group-addon',
+            kind: true,
+            size: true,
+        },
+    },
+
     // Dropdown: disclosure via <details> + <summary>
     dropdown: {
         tag: 'details',

package/src/static/stringH.ts

@@ -0,0 +1,104 @@
+//----------------------------------------------------------------------------------------------------------------------
+// String H Adapter — emits HTML strings.
+//
+// The H adapter for plain HTML-string output. Pass this as the first argument to any static
+// helper to get an HTML string back instead of a framework VNode. Used by the parity tests
+// and by any consumer that wants raw markup (custom SSGs, markdown plugins, etc.).
+//
+// Attribute serialisation rules:
+//   - undefined / null / false  → omitted entirely
+//   - true                       → bare attribute name (e.g. `disabled`)
+//   - innerHTML                  → short-circuits children; value used as raw inner HTML
+//   - everything else            → key="value" with HTML-escaped value
+//
+// Children handling:
+//   - Void elements (see VOID_ELEMENTS) with no children → self-closing `<tag ... />`
+//   - All other elements → always emit a closing tag, even with no children
+//   - String                     → child verbatim (caller-supplied HTML; escape upstream)
+//   - Array                      → joined with no separator
+//----------------------------------------------------------------------------------------------------------------------
+
+import { escapeAttr } from './escape';
+import type { H } from './h';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+// Standard HTML void elements — self-close only these. Everything else gets a closing tag.
+// Includes historical keygen and param for defensive coverage.
+// `progress` is not a spec void element but is treated as void by this library (RenderSpec.void=true)
+// and the component tests assert self-closing output, so it lives here.
+const VOID_ELEMENTS = new Set([
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'keygen',
+    'link',
+    'meta',
+    'param',
+    'progress',
+    'source',
+    'track',
+    'wbr',
+]);
+
+//----------------------------------------------------------------------------------------------------------------------
+
+function attrToString(name : string, value : unknown) : string | null
+{
+    if(value === undefined || value === null || value === false) { return null; }
+    if(value === true) { return name; }
+    return `${ name }="${ escapeAttr(String(value)) }"`;
+}
+
+function serialiseAttrs(attrs : Record<string, unknown> | null) : string
+{
+    if(!attrs) { return ''; }
+
+    const parts : string[] = [];
+    for(const [ name, value ] of Object.entries(attrs))
+    {
+        const part = attrToString(name, value);
+        if(part !== null) { parts.push(part); }
+    }
+    return parts.length > 0 ? ` ${ parts.join(' ') }` : '';
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export const stringH : H<string> = (tag, attrs, children) =>
+{
+    // innerHTML in attrs short-circuits children — emit the tag with the inner HTML as content,
+    // stripping innerHTML from the serialised attributes.
+    if(attrs && typeof attrs.innerHTML === 'string')
+    {
+        const innerHtml = attrs.innerHTML;
+        const otherAttrs = { ...attrs };
+        delete otherAttrs.innerHTML;
+        const attrString = serialiseAttrs(otherAttrs);
+        return `<${ tag }${ attrString }>${ innerHtml }</${ tag }>`;
+    }
+
+    const attrString = serialiseAttrs(attrs);
+
+    // Void elements with no children self-close. Non-void elements always get a closing tag.
+    const isEmpty = children === undefined
+        || children === ''
+        || (Array.isArray(children) && children.length === 0);
+
+    if(VOID_ELEMENTS.has(tag) && isEmpty)
+    {
+        return `<${ tag }${ attrString } />`;
+    }
+
+    const childString = children === undefined
+        ? ''
+        : Array.isArray(children) ? children.join('') : children;
+    return `<${ tag }${ attrString }>${ childString }</${ tag }>`;
+};
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/types.ts

@@ -71,6 +71,7 @@ export type ButtonKind = ComponentKind;
 export type ButtonSize = ComponentSize;
 export type ButtonVariant = ComponentVariant;
 export type ButtonType = 'button' | 'submit' | 'reset';
+export type ButtonCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
 
 //----------------------------------------------------------------------------------------------------------------------
 // Card
@@ -115,6 +116,30 @@ export type PagePanelMode = 'auto' | 'persistent' | 'drawer';
 
 export type PaginationKind = ComponentKind;
 
+//----------------------------------------------------------------------------------------------------------------------
+// Input
+//----------------------------------------------------------------------------------------------------------------------
+
+export type InputCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+
+//----------------------------------------------------------------------------------------------------------------------
+// InputGroup
+//----------------------------------------------------------------------------------------------------------------------
+
+export type InputGroupCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+
+//----------------------------------------------------------------------------------------------------------------------
+// NumberInput
+//----------------------------------------------------------------------------------------------------------------------
+
+export type NumberInputCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+
+//----------------------------------------------------------------------------------------------------------------------
+// Select
+//----------------------------------------------------------------------------------------------------------------------
+
+export type SelectCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+
 //----------------------------------------------------------------------------------------------------------------------
 // Panel
 //----------------------------------------------------------------------------------------------------------------------