@skewedaspect/sleekspace-ui 0.8.1 → 0.9.1

package/src/static/components/input.ts

@@ -0,0 +1,55 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Input Static Helper
+//
+// Emits a void <input class="sk-input" /> with passthrough attrs for type, value, placeholder,
+// name, id, and boolean attrs (disabled, readonly, required).
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '../types';
+
+import { composeClasses } from '../classes';
+import { escapeAttr } from '../escape';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface InputStaticProps
+{
+    kind ?: ComponentKind;
+    size ?: ComponentSize;
+    type ?: string;
+    value ?: string;
+    placeholder ?: string;
+    name ?: string;
+    id ?: string;
+    disabled ?: boolean;
+    readonly ?: boolean;
+    required ?: boolean;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function input(props : InputStaticProps = {}) : string
+{
+    const classes = composeClasses({ base: 'sk-input', kind: true, size: true }, props as Record<string, unknown>);
+    const attrs : string[] = [ `class="${ escapeAttr(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) }"`);
+        }
+    }
+
+    const passthroughBool = [ 'disabled', 'readonly', 'required' ] as const;
+    for(const key of passthroughBool)
+    {
+        if(props[key] === true) { attrs.push(key); }
+    }
+
+    return `<input ${ attrs.join(' ') } />`;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/navBar.ts

@@ -0,0 +1,94 @@
+//----------------------------------------------------------------------------------------------------------------------
+// NavBar Static Helper
+//
+// Emits the full navbar DOM structure matching the Vue component's rendered output:
+//   <nav class="sk-navbar ...">
+//     <div class="sk-navbar-content">
+//       [<div class="sk-navbar-leading">...</div>]   (only when leading prop provided)
+//       [<div class="sk-navbar-brand">...</div>]     (only when brand prop provided)
+//       [<div class="sk-navbar-nav">...</div>]       (only when children provided)
+//       [<div class="sk-navbar-actions">...</div>]   (only when actions prop provided)
+//     </div>
+//   </nav>
+//
+// The `children` argument maps to the default (nav links) slot. Additional slot content is
+// provided via the `leading`, `brand`, and `actions` props.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { NavBarKind, StaticCustomColors } from '../types';
+
+import { composeClasses } from '../classes';
+import { escapeAttr } from '../escape';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface NavBarStaticProps extends StaticCustomColors
+{
+    kind ?: NavBarKind;
+
+    /**
+     * When true (default), applies `sk-sticky` class — matches Vue's `sticky: true` default.
+     * @default true
+     */
+    sticky ?: boolean;
+
+    /** HTML for the leading slot (far-left area, e.g. sidebar toggle). */
+    leading ?: string;
+
+    /** HTML for the brand slot (logo / site name). */
+    brand ?: string;
+
+    /** HTML for the actions slot (right-aligned CTAs / user menu). */
+    actions ?: string;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function navBar(props : NavBarStaticProps = {}, children = '') : string
+{
+    // Sticky defaults to true — matches Vue's withDefaults({ sticky: true })
+    const sticky = props.sticky !== false;
+
+    const classes = composeClasses(
+        {
+            base: 'sk-navbar',
+            kind: true,
+            // Handle sticky manually below (default-true boolean doesn't fit booleanFlags which
+            // only adds the class when prop === true; we need it when prop !== false)
+        },
+        props as Record<string, unknown>
+    );
+
+    // Append sk-sticky when sticky is enabled
+    const fullClasses = sticky ? `${ classes } sk-sticky` : classes;
+
+    const attrs : string[] = [ `class="${ escapeAttr(fullClasses) }"` ];
+
+    // Custom color vars
+    const styleParts : string[] = [];
+    if(typeof props.baseColor === 'string')
+    {
+        styleParts.push(`--sk-navbar-color-base: ${ escapeAttr(props.baseColor) };`);
+    }
+    if(typeof props.textColor === 'string')
+    {
+        styleParts.push(`--sk-navbar-fg: ${ escapeAttr(props.textColor) };`);
+    }
+    if(styleParts.length > 0)
+    {
+        attrs.push(`style="${ styleParts.join(' ') }"`);
+    }
+
+    // Build inner slot regions — each is only emitted when content is non-empty, matching Vue's v-if
+    let inner = '';
+    if(props.leading) { inner += `<div class="sk-navbar-leading">${ props.leading }</div>`; }
+    if(props.brand) { inner += `<div class="sk-navbar-brand">${ props.brand }</div>`; }
+    if(children) { inner += `<div class="sk-navbar-nav">${ children }</div>`; }
+    if(props.actions) { inner += `<div class="sk-navbar-actions">${ props.actions }</div>`; }
+
+    const content = `<div class="sk-navbar-content">${ inner }</div>`;
+
+    return `<nav ${ attrs.join(' ') }>${ content }</nav>`;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/numberInput.ts

@@ -0,0 +1,64 @@
+//----------------------------------------------------------------------------------------------------------------------
+// NumberInput Static Helper
+//
+// Emits a compound <div class="sk-number-input-wrapper">
+// <input class="sk-number-input-field" type="number" ... /></div> structure.
+// Stepper buttons are intentionally omitted — they require JS to function and aren't
+// meaningful in a static/SSG context.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '../types';
+
+import { composeClasses } from '../classes';
+import { escapeAttr } from '../escape';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface NumberInputStaticProps
+{
+    kind ?: ComponentKind;
+    size ?: ComponentSize;
+    value ?: string;
+    min ?: string;
+    max ?: string;
+    step ?: string;
+    name ?: string;
+    placeholder ?: string;
+    disabled ?: boolean;
+    readonly ?: boolean;
+    required ?: boolean;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function numberInput(props : NumberInputStaticProps = {}) : string
+{
+    const wrapperClasses = composeClasses(
+        { base: 'sk-number-input-wrapper', kind: true, size: true },
+        props as Record<string, unknown>
+    );
+
+    const inputAttrs : string[] = [ 'class="sk-number-input-field"', 'type="number"' ];
+
+    const passthroughString = [ 'value', 'min', 'max', 'step', 'name', 'placeholder' ] as const;
+    for(const key of passthroughString)
+    {
+        const val = props[key];
+        if(typeof val === 'string')
+        {
+            inputAttrs.push(`${ key }="${ escapeAttr(val) }"`);
+        }
+    }
+
+    const passthroughBool = [ 'disabled', 'readonly', 'required' ] as const;
+    for(const key of passthroughBool)
+    {
+        if(props[key] === true) { inputAttrs.push(key); }
+    }
+
+    const inputEl = `<input ${ inputAttrs.join(' ') } />`;
+
+    return `<div class="${ escapeAttr(wrapperClasses) }">${ inputEl }</div>`;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/page.ts

@@ -0,0 +1,31 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Page Static Helper
+//
+// Thin typed wrapper over the generic render() core. Emits a class-API <div> with sk-page
+// modifier classes derived from props.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { PagePanelMode } from '../types';
+
+import { render } from '../render';
+import { SPECS } from '../specs';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface PageStaticProps
+{
+    fixedHeader ?: boolean;
+    fixedFooter ?: boolean;
+    flush ?: boolean;
+    sidebarMode ?: PagePanelMode;
+    asideMode ?: PagePanelMode;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function page(props : PageStaticProps = {}, children = '') : string
+{
+    return render(SPECS.page, props as Record<string, unknown>, children);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/pagination.ts

@@ -0,0 +1,27 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Pagination Static Helper
+//
+// Thin typed wrapper over the generic render() core. Emits a class-API <nav aria-label="Pagination">
+// with sk-pagination modifier classes derived from props.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { PaginationKind, StaticCustomColors } from '../types';
+
+import { render } from '../render';
+import { SPECS } from '../specs';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface PaginationStaticProps extends StaticCustomColors
+{
+    kind ?: PaginationKind;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function pagination(props : PaginationStaticProps = {}, children = '') : string
+{
+    return render(SPECS.pagination, props as Record<string, unknown>, children);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/panel.ts

@@ -0,0 +1,33 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Panel Static Helper
+//
+// Thin typed wrapper over the generic render() core. Emits a class-API <div> with sk-panel
+// modifier classes derived from props.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { PanelCorner, PanelKind, PanelSize, StaticCustomColors } from '../types';
+
+import { render } from '../render';
+import { SPECS } from '../specs';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface PanelStaticProps extends StaticCustomColors
+{
+    kind ?: PanelKind;
+    size ?: PanelSize;
+    showDecoration ?: boolean;
+    noBorder ?: boolean;
+    noDecoration ?: boolean;
+    corners ?: PanelCorner[];
+    decorationCorner ?: PanelCorner;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function panel(props : PanelStaticProps = {}, children = '') : string
+{
+    return render(SPECS.panel, props as Record<string, unknown>, children);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/progress.ts

@@ -0,0 +1,31 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Progress Static Helper
+//
+// Thin typed wrapper over the generic render() core. Emits a class-API void <progress /> with
+// sk-progress modifier classes derived from props.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ProgressSize } from '../types';
+
+import { render } from '../render';
+import { SPECS } from '../specs';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface ProgressStaticProps
+{
+    kind ?: ComponentKind;
+    size ?: ProgressSize;
+    indeterminate ?: boolean;
+    value ?: number | null;
+    max ?: number;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function progress(props : ProgressStaticProps = {}, children = '') : string
+{
+    return render(SPECS.progress, props as Record<string, unknown>, children);
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/radio.ts

@@ -0,0 +1,53 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Radio Static Helper
+//
+// Emits a compound <label class="sk-radio"><input type="radio" name="..." value="..." />
+// <span class="sk-radio-dot"></span><span class="sk-radio-label">children</span></label>
+// structure for pure-CSS usage.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '../types';
+
+import { composeClasses } from '../classes';
+import { escapeAttr } from '../escape';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface RadioStaticProps
+{
+    kind ?: ComponentKind;
+    size ?: ComponentSize;
+    name ?: string;
+    value ?: string;
+    checked ?: boolean;
+    disabled ?: boolean;
+    required ?: boolean;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function radio(props : RadioStaticProps = {}, children = '') : string
+{
+    const classes = composeClasses({ base: 'sk-radio', kind: true, size: true }, props as Record<string, unknown>);
+
+    const inputAttrs : string[] = [ 'type="radio"' ];
+    if(props.name)
+    {
+        inputAttrs.push(`name="${ escapeAttr(props.name) }"`);
+    }
+    if(props.value !== undefined)
+    {
+        inputAttrs.push(`value="${ escapeAttr(props.value) }"`);
+    }
+    if(props.checked === true) { inputAttrs.push('checked'); }
+    if(props.disabled === true) { inputAttrs.push('disabled'); }
+    if(props.required === true) { inputAttrs.push('required'); }
+
+    const inputEl = `<input ${ inputAttrs.join(' ') } />`;
+    const dotEl = `<span class="sk-radio-dot"></span>`;
+    const labelEl = `<span class="sk-radio-label">${ children }</span>`;
+
+    return `<label class="${ escapeAttr(classes) }">${ inputEl }${ dotEl }${ labelEl }</label>`;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/select.ts

@@ -0,0 +1,51 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Select Static Helper
+//
+// Emits a non-void <select class="sk-select">children</select> where children are option elements
+// composed by the caller. Passthrough attrs: name, id; booleans: disabled, required.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '../types';
+
+import { composeClasses } from '../classes';
+import { escapeAttr } from '../escape';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface SelectStaticProps
+{
+    kind ?: ComponentKind;
+    size ?: ComponentSize;
+    name ?: string;
+    id ?: string;
+    disabled ?: boolean;
+    required ?: boolean;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function select(props : SelectStaticProps = {}, children = '') : string
+{
+    const classes = composeClasses({ base: 'sk-select', kind: true, size: true }, props as Record<string, unknown>);
+    const attrs : string[] = [ `class="${ escapeAttr(classes) }"` ];
+
+    const passthroughString = [ 'name', 'id' ] as const;
+    for(const key of passthroughString)
+    {
+        const val = props[key];
+        if(typeof val === 'string')
+        {
+            attrs.push(`${ key }="${ escapeAttr(val) }"`);
+        }
+    }
+
+    const passthroughBool = [ 'disabled', 'required' ] as const;
+    for(const key of passthroughBool)
+    {
+        if(props[key] === true) { attrs.push(key); }
+    }
+
+    return `<select ${ attrs.join(' ') }>${ children }</select>`;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/sidebar.ts

@@ -0,0 +1,85 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Sidebar Static Helper
+//
+// Emits the full sidebar DOM structure matching the Vue component's rendered output:
+//   <aside class="sk-sidebar sk-<kind> [sk-sidebar-right] [sk-dense]">
+//     <div class="sk-panel sk-<kind> sk-md sk-cut-<corner> sk-decoration-<corner> sk-sidebar-panel">
+//       <div class="sk-panel-scroll-content">
+//         <nav class="sk-sidebar-nav">children</nav>
+//       </div>
+//     </div>
+//   </aside>
+//
+// The inner panel corner and decoration corner are computed from the `side` prop:
+//   left (default) → bottom-right corner + decoration
+//   right          → bottom-left corner + decoration
+//
+// The panel always uses size 'md' (SkPanel's default) since SkSidebar does not expose a size
+// prop and passes none to SkPanel.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { SidebarKind, SidebarSide, StaticCustomColors } from '../types';
+
+import { escapeAttr } from '../escape';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface SidebarStaticProps extends StaticCustomColors
+{
+    kind ?: SidebarKind;
+    side ?: SidebarSide;
+    dense ?: boolean;
+
+    /** CSS width of the sidebar (not used for class output; here for completeness). */
+    width ?: string;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function sidebar(props : SidebarStaticProps = {}, children = '') : string
+{
+    const kind = props.kind ?? 'neutral';
+    const side = props.side ?? 'left';
+
+    // --- aside classes (mirrors SkSidebar's computed `classes`) ---
+    const asideParts : string[] = [ 'sk-sidebar', `sk-${ kind }` ];
+    if(side === 'right') { asideParts.push('sk-sidebar-right'); }
+    if(props.dense === true) { asideParts.push('sk-dense'); }
+
+    // --- inner panel corner + decoration (mirrors SkSidebar's panelCorners + panelDecorationCorner) ---
+    const panelCorner = side === 'right' ? 'bottom-left' : 'bottom-right';
+
+    // Panel classes match SkPanel's computed `classes` with:
+    //   kind = sidebar kind, size = 'md' (panel default), corners = [panelCorner],
+    //   decorationCorner = panelCorner, plus the sidebar-specific sk-sidebar-panel override
+    const panelParts : string[] = [
+        'sk-panel',
+        `sk-${ kind }`,
+        'sk-md', // SkPanel size default
+        `sk-cut-${ panelCorner }`,
+        `sk-decoration-${ panelCorner }`,
+        'sk-sidebar-panel', // extra class SkSidebar adds to SkPanel
+    ];
+
+    const asideAttrs = `class="${ escapeAttr(asideParts.join(' ')) }"`;
+    const panelAttrs = `class="${ escapeAttr(panelParts.join(' ')) }"`;
+
+    // Custom color styles go on the aside element (matching SkSidebar's sidebarStyles)
+    const asideStyleParts : string[] = [];
+    if(typeof props.baseColor === 'string')
+    {
+        asideStyleParts.push(`--sk-sidebar-color-base: ${ escapeAttr(props.baseColor) };`);
+    }
+
+    const asideStyle = asideStyleParts.length > 0
+        ? ` style="${ asideStyleParts.join(' ') }"`
+        : '';
+
+    const inner = `<div class="sk-panel-scroll-content"><nav class="sk-sidebar-nav">${ children }</nav></div>`;
+
+    return `<aside ${ asideAttrs }${ asideStyle }>`
+        + `<div ${ panelAttrs }>${ inner }</div>`
+        + '</aside>';
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/skeleton.ts

@@ -0,0 +1,66 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Skeleton Static Helper
+//
+// Emits the skeleton DOM structure matching the Vue component's rendered output:
+//   <div class="sk-skeleton sk-<variant> [sk-<animation>] [sk-custom-corners]" [style="..."]>
+//
+// Class families match Vue exactly:
+//   variant   → sk-text / sk-rectangular / sk-circular / sk-square   (sk-${variant})
+//   animation → sk-shimmer / sk-pulse                                 (sk-${animation})
+//              omitted when animation === 'none'
+//
+// Inline style: `width` and `height` props are forwarded as CSS if provided, matching Vue's
+// computed `styles`. Pass width='100%' explicitly (Vue's default) for parity tests. The
+// static helper does NOT apply automatic height-from-width for circular/square — that logic
+// requires knowing both props at render time, and a static helper consumer should pass both
+// when needed.
+//----------------------------------------------------------------------------------------------------------------------
+
+import { escapeAttr } from '../escape';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'square';
+export type SkeletonAnimation = 'shimmer' | 'pulse' | 'none';
+
+export interface SkeletonStaticProps
+{
+    variant ?: SkeletonVariant;
+    animation ?: SkeletonAnimation;
+
+    /** CSS width value, e.g. '200px', '100%'. Emitted as inline style when set. */
+    width ?: string;
+
+    /** CSS height value. Emitted as inline style when set. */
+    height ?: string;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function skeleton(props : SkeletonStaticProps = {}) : string
+{
+    const variant = props.variant ?? 'text';
+    const animation = props.animation ?? 'shimmer';
+
+    const classes : string[] = [ 'sk-skeleton', `sk-${ variant }` ];
+    if(animation !== 'none') { classes.push(`sk-${ animation }`); }
+
+    const attrs : string[] = [ `class="${ escapeAttr(classes.join(' ')) }"` ];
+
+    // Inline style: forward width/height when provided.
+    // For circular/square variants, height = width when only width is set — mirrors Vue's styles computed.
+    const styleParts : string[] = [];
+    const resolvedHeight = props.height
+        ?? ((variant === 'circular' || variant === 'square') && props.width ? props.width : undefined);
+
+    if(typeof props.width === 'string') { styleParts.push(`width: ${ escapeAttr(props.width) };`); }
+    if(typeof resolvedHeight === 'string') { styleParts.push(`height: ${ escapeAttr(resolvedHeight) };`); }
+    if(styleParts.length > 0)
+    {
+        attrs.push(`style="${ styleParts.join(' ') }"`);
+    }
+
+    return `<div ${ attrs.join(' ') }></div>`;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/components/slider.ts

@@ -0,0 +1,50 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Slider Static Helper
+//
+// Emits a void <input class="sk-slider" type="range" /> with passthrough attrs for
+// min, max, step, value, name. All numeric-in-usage props are accepted as strings for
+// clean HTML attribute emission.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '../types';
+
+import { composeClasses } from '../classes';
+import { escapeAttr } from '../escape';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface SliderStaticProps
+{
+    kind ?: ComponentKind;
+    size ?: ComponentSize;
+    min ?: string;
+    max ?: string;
+    step ?: string;
+    value ?: string;
+    name ?: string;
+    disabled ?: boolean;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function slider(props : SliderStaticProps = {}) : string
+{
+    const classes = composeClasses({ base: 'sk-slider', kind: true, size: true }, props as Record<string, unknown>);
+    const attrs : string[] = [ `class="${ escapeAttr(classes) }"`, 'type="range"' ];
+
+    const passthroughString = [ 'min', 'max', 'step', 'value', 'name' ] as const;
+    for(const key of passthroughString)
+    {
+        const val = props[key];
+        if(typeof val === 'string')
+        {
+            attrs.push(`${ key }="${ escapeAttr(val) }"`);
+        }
+    }
+
+    if(props.disabled === true) { attrs.push('disabled'); }
+
+    return `<input ${ attrs.join(' ') } />`;
+}
+
+//----------------------------------------------------------------------------------------------------------------------