@skewedaspect/sleekspace-ui 0.8.1 → 0.9.1

package/src/static/generated/propTypes.ts

@@ -0,0 +1,426 @@
+// Auto-generated — do not edit. Run `npm run generate:static-types` to regenerate.
+// Type references use bare names extracted from each component's Vue file — the types
+// themselves live in the per-component types.ts files. This file is for documentation
+// and drift detection, not direct import. ts-nocheck suppresses unknown-name errors.
+// @ts-nocheck
+
+import type { ComponentCustomColors } from '../../types';
+
+export interface SkAccordionStaticProps extends ComponentCustomColors
+{
+    type ? : SkAccordionType;
+    modelValue ? : string | string[];
+    collapsible ? : boolean;
+    kind ? : SkAccordionKind;
+    disabled ? : boolean;
+}
+
+export interface SkAlertStaticProps extends ComponentCustomColors
+{
+    kind ? : SkAlertKind;
+    subtle ? : boolean;
+    showIcon ? : boolean;
+}
+
+export interface SkAvatarStaticProps extends ComponentCustomColors
+{
+    src ? : string;
+    alt ? : string;
+    initials ? : string;
+    kind ? : ComponentKind;
+    size ? : SkAvatarSize;
+    baseColor ? : string;
+    textColor ? : string;
+}
+
+export interface SkBreadcrumbsStaticProps extends ComponentCustomColors
+{
+    kind ? : SkBreadcrumbsProps['kind'];
+    separator ? : string;
+}
+
+export interface SkButtonStaticProps extends ComponentCustomColors
+{
+    type ? : SkButtonType;
+    kind ? : SkButtonKind;
+    variant ? : SkButtonVariant;
+    size ? : SkButtonSize;
+    disabled ? : boolean;
+    loading ? : boolean;
+    pressed ? : boolean;
+    dense ? : boolean;
+    href ? : string;
+    to ? : string | Record<string, any>;
+}
+
+export interface SkCardStaticProps extends ComponentCustomColors
+{
+    kind ? : SkCardKind;
+    size ? : SkPanelSize;
+    showDecoration ? : boolean;
+    noDecoration ? : boolean;
+    noBorder ? : boolean;
+    title ? : string;
+    headerColor ? : string;
+    scrollable ? : boolean;
+    corners ? : SkPanelCorner[];
+    decorationCorner ? : SkPanelCorner;
+}
+
+export interface SkCheckboxStaticProps extends ComponentCustomColors
+{
+    kind ? : SkCheckboxKind;
+    size ? : SkCheckboxSize;
+    disabled ? : boolean;
+    required ? : boolean;
+    name ? : string;
+    label ? : string;
+}
+
+export interface SkCollapsibleStaticProps extends ComponentCustomColors
+{
+    open ? : boolean;
+    defaultOpen ? : boolean;
+    disabled ? : boolean;
+    kind ? : SkCollapsibleKind;
+    triggerText ? : string;
+}
+
+export interface SkColorPickerStaticProps extends ComponentCustomColors
+{
+    kind ? : SkColorPickerKind;
+    size ? : SkColorPickerSize;
+    format ? : SkColorPickerFormat;
+    showAlpha ? : boolean;
+    disabled ? : boolean;
+    placeholder ? : string;
+    defaultValue ? : string;
+}
+
+export interface SkContextMenuStaticProps extends ComponentCustomColors
+{
+    kind ? : SkContextMenuKind;
+}
+
+export interface SkDividerStaticProps extends ComponentCustomColors
+{
+    orientation ? : SkDividerOrientation;
+    kind ? : ComponentKind;
+    variant ? : SkDividerVariant;
+    size ? : ComponentSize;
+}
+
+export interface SkDropdownStaticProps extends ComponentCustomColors
+{
+    kind ? : SkDropdownKind;
+    triggerText ? : string;
+    side ? : SkDropdownSide;
+    align ? : SkDropdownAlign;
+    sideOffset ? : number;
+    size ? : SkDropdownSize;
+}
+
+export interface SkFieldStaticProps extends ComponentCustomColors
+{
+    label ? : string;
+    description ? : string;
+    error ? : string;
+    required ? : boolean;
+    labelPosition ? : SkFieldLabelPosition;
+    id ? : string;
+    state ? : boolean | null;
+    validKind ? : string;
+    invalidKind ? : string;
+}
+
+export interface SkGroupStaticProps extends ComponentCustomColors
+{
+    orientation ? : SkGroupOrientation;
+}
+
+export interface SkInputStaticProps extends ComponentCustomColors
+{
+    type ? : SkInputType;
+    kind ? : SkInputKind;
+    size ? : SkInputSize;
+    placeholder ? : string;
+    disabled ? : boolean;
+    readonly ? : boolean;
+    required ? : boolean;
+    name ? : string;
+    autocomplete ? : string;
+}
+
+export interface SkListboxStaticProps extends ComponentCustomColors
+{
+    kind ? : SkListboxKind;
+    size ? : SkListboxSize;
+    placeholder ? : string;
+    disabled ? : boolean;
+}
+
+export interface SkModalStaticProps extends ComponentCustomColors
+{
+    kind ? : ComponentKind;
+    size ? : ComponentSize;
+    title ? : string;
+    triggerText ? : string;
+    open ? : boolean;
+    closeOnEscape ? : boolean;
+    closeOnOverlay ? : boolean;
+    noCloseOnEscape ? : boolean;
+    noCloseOnOverlay ? : boolean;
+}
+
+export interface SkNavBarStaticProps extends ComponentCustomColors
+{
+    kind ? : SkNavBarKind;
+    sticky ? : boolean;
+    size ? : SkNavBarSize;
+}
+
+export interface SkNumberInputStaticProps extends ComponentCustomColors
+{
+    kind ? : SkNumberInputKind;
+    size ? : SkNumberInputSize;
+    placeholder ? : string;
+    disabled ? : boolean;
+    readonly ? : boolean;
+    required ? : boolean;
+    name ? : string;
+    min ? : number;
+    max ? : number;
+    step ? : number;
+    showSteppers ? : boolean;
+}
+
+export interface SkPageStaticProps extends ComponentCustomColors
+{
+    fixedHeader ? : boolean;
+    fixedFooter ? : boolean;
+    sidebarWidth ? : string;
+    asideWidth ? : string;
+    sidebarMode ? : SkPagePanelMode;
+    asideMode ? : SkPagePanelMode;
+    sidebarBreakpoint ? : string;
+    asideBreakpoint ? : string;
+    sidebarOpen ? : boolean;
+    asideOpen ? : boolean;
+    theme ? : SkThemeName;
+    flush ? : boolean;
+    noBounce ? : boolean;
+}
+
+export interface SkPaginationStaticProps extends ComponentCustomColors
+{
+    modelValue ? : number;
+    siblingCount ? : number;
+    showFirstLast ? : boolean;
+    showPrevNext ? : boolean;
+    kind ? : SkPaginationProps['kind'];
+    size ? : SkPaginationProps['size'];
+    variant ? : SkPaginationProps['variant'];
+    disabled ? : boolean;
+    total : number;
+}
+
+export interface SkPanelStaticProps extends ComponentCustomColors
+{
+    kind ? : SkPanelKind;
+    size ? : SkPanelSize;
+    showDecoration ? : boolean;
+    noBorder ? : boolean;
+    corners ? : SkPanelCorner[];
+    decorationCorner ? : SkPanelCorner;
+}
+
+export interface SkPopoverStaticProps extends ComponentCustomColors
+{
+    kind ? : ComponentKind;
+    side ? : SkPopoverSide;
+    align ? : SkPopoverAlign;
+    sideOffset ? : number;
+    showArrow ? : boolean;
+    title ? : string;
+    closable ? : boolean;
+    open ? : boolean;
+}
+
+export interface SkProgressStaticProps extends ComponentCustomColors
+{
+    value ? : number | null;
+    max ? : number;
+    kind ? : ComponentKind;
+    size ? : SkProgressSize;
+    showValue ? : boolean;
+    valuePosition ? : SkProgressValuePosition;
+    baseColor ? : string;
+    trackColor ? : string;
+}
+
+export interface SkRadioStaticProps extends ComponentCustomColors
+{
+    label ? : string;
+    disabled ? : boolean;
+    kind ? : SkRadioKind;
+    size ? : SkRadioSize;
+    value : string | number;
+}
+
+export interface SkScrollAreaStaticProps extends ComponentCustomColors
+{
+    type ? : SkScrollAreaType;
+    orientation ? : SkScrollAreaOrientation;
+    kind ? : SkScrollAreaKind;
+    baseColor ? : string;
+    textColor ? : string;
+    fade ? : boolean;
+}
+
+export interface SkSelectStaticProps extends ComponentCustomColors
+{
+    kind ? : SkSelectKind;
+    size ? : SkSelectSize;
+    placeholder ? : string;
+    disabled ? : boolean;
+}
+
+export interface SkSidebarStaticProps extends ComponentCustomColors
+{
+    kind ? : SkSidebarKind;
+    width ? : string;
+    side ? : SkSidebarSide;
+    dense ? : boolean;
+}
+
+export interface SkSkeletonStaticProps extends ComponentCustomColors
+{
+    variant ? : SkSkeletonVariant;
+    width ? : string;
+    height ? : string;
+    animation ? : SkSkeletonAnimation;
+    corners ? : SkSkeletonCorner[];
+    bevel ? : string;
+}
+
+export interface SkSliderStaticProps extends ComponentCustomColors
+{
+    min ? : number;
+    max ? : number;
+    step ? : number;
+    kind ? : ComponentKind;
+    size ? : SkSliderSize;
+    orientation ? : SkSliderOrientation;
+    disabled ? : boolean;
+    name ? : string;
+    minStepsBetweenThumbs ? : number;
+    baseColor ? : string;
+    thumbColor ? : string;
+    modelValue : number | number[];
+}
+
+export interface SkSpinnerStaticProps extends ComponentCustomColors
+{
+    kind ? : ComponentKind;
+    size ? : SkSpinnerSize;
+    variant ? : SkSpinnerVariant;
+    color ? : string;
+}
+
+export interface SkSplitterStaticProps extends ComponentCustomColors
+{
+    direction ? : SkSplitterDirection;
+    kind ? : SkSplitterKind;
+    baseColor ? : string;
+    textColor ? : string;
+}
+
+export interface SkSwitchStaticProps extends ComponentCustomColors
+{
+    label ? : string;
+    labelOn ? : string;
+    labelOff ? : string;
+    kind ? : SkSwitchKind;
+    thumbKind ? : SkSwitchKind;
+    size ? : SkSwitchSize;
+    disabled ? : boolean;
+    disableLabelAnimation ? : boolean;
+    name ? : string;
+    value ? : string;
+    required ? : boolean;
+    modelValue : boolean;
+}
+
+export interface SkTableStaticProps extends ComponentCustomColors
+{
+    kind ? : SkTableKind;
+    variant ? : SkTableVariant;
+    striped ? : boolean;
+    hoverable ? : boolean;
+    bordered ? : boolean;
+    innerBorders ? : boolean;
+    darkBackground ? : boolean;
+    subtle ? : boolean;
+}
+
+export interface SkTabsStaticProps extends ComponentCustomColors
+{
+    orientation ? : SkTabsOrientation;
+    placement ? : SkTabsPlacement;
+    kind ? : ComponentKind;
+    flush ? : boolean;
+    modelValue : string | number;
+}
+
+export interface SkTagStaticProps extends ComponentCustomColors
+{
+    kind ? : ComponentKind;
+    variant ? : SkTagVariant;
+    size ? : SkTagSize;
+    removable ? : boolean;
+}
+
+export interface SkTagsInputStaticProps extends ComponentCustomColors
+{
+    kind ? : SkTagsInputKind;
+    size ? : SkTagsInputSize;
+    placeholder ? : string;
+    disabled ? : boolean;
+    max ? : number;
+    addOnPaste ? : boolean;
+    tagKind ? : string;
+    tagVariant ? : 'solid' | 'outline' | 'ghost';
+}
+
+export interface SkTextareaStaticProps extends ComponentCustomColors
+{
+    kind ? : SkTextareaKind;
+    size ? : SkTextareaSize;
+    placeholder ? : string;
+    disabled ? : boolean;
+    readonly ? : boolean;
+    required ? : boolean;
+    name ? : string;
+    rows ? : number;
+    autocomplete ? : string;
+}
+
+export interface SkToolbarStaticProps extends ComponentCustomColors
+{
+    kind ? : SkToolbarKind;
+    orientation ? : SkToolbarOrientation;
+    corners ? : SkToolbarCorner[];
+    baseColor ? : string;
+    textColor ? : string;
+}
+
+export interface SkTooltipStaticProps extends ComponentCustomColors
+{
+    kind ? : ComponentKind;
+    variant ? : 'solid' | 'outline';
+    side ? : SkTooltipSide;
+    align ? : 'start' | 'center' | 'end';
+    sideOffset ? : number;
+    delayDuration ? : number;
+    showArrow ? : boolean;
+}

package/src/static/index.ts

@@ -0,0 +1,116 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Static Helpers — Public API
+//
+// Re-exports all static helper functions and their prop types, plus core utilities. Consumers
+// import from `@skewedaspect/sleekspace-ui/static` to access the full helper surface without
+// pulling in Vue or any other runtime dependency.
+//----------------------------------------------------------------------------------------------------------------------
+
+// Utilities
+export { text, escapeAttr } from './escape';
+export { composeClasses } from './classes';
+export type { ClassSpec, ListFlagSpec, SingleChoiceFlagSpec } from './classes';
+export { render } from './render';
+export type { RenderSpec } from './render';
+
+// Shared types
+export type * from './types';
+
+// Components — containers
+export { panel } from './components/panel';
+export type { PanelStaticProps } from './components/panel';
+
+export { card } from './components/card';
+export type { CardStaticProps } from './components/card';
+
+export { alert } from './components/alert';
+export type { AlertStaticProps } from './components/alert';
+
+export { divider } from './components/divider';
+export type { DividerStaticProps } from './components/divider';
+
+export { page } from './components/page';
+export type { PageStaticProps } from './components/page';
+
+export { group } from './components/group';
+export type { GroupStaticProps } from './components/group';
+
+export { skeleton } from './components/skeleton';
+export type { SkeletonStaticProps } from './components/skeleton';
+
+export { progress } from './components/progress';
+export type { ProgressStaticProps } from './components/progress';
+
+export { spinner } from './components/spinner';
+export type { SpinnerStaticProps } from './components/spinner';
+
+export { navBar } from './components/navBar';
+export type { NavBarStaticProps } from './components/navBar';
+
+export { toolbar } from './components/toolbar';
+export type { ToolbarStaticProps } from './components/toolbar';
+
+export { sidebar } from './components/sidebar';
+export type { SidebarStaticProps } from './components/sidebar';
+
+export { breadcrumbs } from './components/breadcrumbs';
+export type { BreadcrumbsStaticProps } from './components/breadcrumbs';
+
+export { pagination } from './components/pagination';
+export type { PaginationStaticProps } from './components/pagination';
+
+export { tag } from './components/tag';
+export type { TagStaticProps } from './components/tag';
+
+export { avatar } from './components/avatar';
+export type { AvatarStaticProps } from './components/avatar';
+
+export { field } from './components/field';
+export type { FieldStaticProps } from './components/field';
+
+export { table } from './components/table';
+export type { TableStaticProps } from './components/table';
+
+export { tooltip } from './components/tooltip';
+export type { TooltipStaticProps } from './components/tooltip';
+
+// Form controls (class-only)
+export { button } from './components/button';
+export type { ButtonStaticProps } from './components/button';
+
+export { input } from './components/input';
+export type { InputStaticProps } from './components/input';
+
+export { textarea } from './components/textarea';
+export type { TextareaStaticProps } from './components/textarea';
+
+export { select } from './components/select';
+export type { SelectStaticProps } from './components/select';
+
+export { slider } from './components/slider';
+export type { SliderStaticProps } from './components/slider';
+
+export { colorPicker } from './components/colorPicker';
+export type { ColorPickerStaticProps } from './components/colorPicker';
+
+// Compound form controls
+export { checkbox } from './components/checkbox';
+export type { CheckboxStaticProps } from './components/checkbox';
+
+export { radio } from './components/radio';
+export type { RadioStaticProps } from './components/radio';
+
+export { switchInput } from './components/switchInput';
+export type { SwitchStaticProps } from './components/switchInput';
+
+export { numberInput } from './components/numberInput';
+export type { NumberInputStaticProps } from './components/numberInput';
+
+export { tagsInput } from './components/tagsInput';
+export type { TagsInputStaticProps } from './components/tagsInput';
+
+// Dropdown
+export { dropdown } from './components/dropdown';
+export type { DropdownStaticProps } from './components/dropdown';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/render.test.ts

@@ -0,0 +1,83 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Render Core Tests
+//----------------------------------------------------------------------------------------------------------------------
+
+import { describe, expect, it } from 'vitest';
+
+import { type RenderSpec, render } from './render';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+const PANEL_SPEC : RenderSpec
+    = {
+        tag: 'div',
+        classSpec:
+    {
+        base: 'sk-panel',
+        kind: true,
+        size: true,
+    },
+        customColorVars: { base: '--sk-panel-color-base', text: '--sk-panel-fg' },
+    };
+
+describe('render', () =>
+{
+    it('emits a bare tag with base class when no props', () =>
+    {
+        expect(render(PANEL_SPEC, {}, '')).toBe('<div class="sk-panel"></div>');
+    });
+
+    it('appends children verbatim', () =>
+    {
+        expect(render(PANEL_SPEC, {}, 'Hello')).toBe('<div class="sk-panel">Hello</div>');
+    });
+
+    it('embeds nested HTML children', () =>
+    {
+        expect(render(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'))
+            .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'))
+            .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>');
+    });
+
+    it('omits type="button" for non-button tags', () =>
+    {
+        expect(render(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>');
+    });
+
+    it('escapes attribute values containing dangerous characters', () =>
+    {
+        expect(render(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" />');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/static/render.ts

@@ -0,0 +1,76 @@
+//----------------------------------------------------------------------------------------------------------------------
+// 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.
+//
+// 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';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface RenderSpec
+{
+    tag : string; // HTML tag to render (e.g. "div", "button", "input")
+    classSpec : ClassSpec; // how props map to class modifiers
+    extraAttrs ?: Record<string, string>; // attributes always set (e.g. role="alert")
+    void ?: boolean; // self-closing with no children (e.g. <input />)
+    // Per-component custom-color CSS variable names. If omitted, no inline style is emitted
+    // for custom colors. Matches the Vue component's `useCustomColors` output.
+    customColorVars ?: { base ?: string; text ?: string };
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export function render(spec : RenderSpec, props : Record<string, unknown>, children : string) : string
+{
+    const classes = composeClasses(spec.classSpec, props);
+    const attrs : string[] = [ `class="${ escapeAttr(classes) }"` ];
+
+    if(spec.tag === 'button')
+    {
+        attrs.push(`type="button"`);
+    }
+
+    if(spec.extraAttrs)
+    {
+        for(const [ name, value ] of Object.entries(spec.extraAttrs))
+        {
+            attrs.push(`${ name }="${ escapeAttr(value) }"`);
+        }
+    }
+
+    const styleParts : string[] = [];
+    if(spec.customColorVars)
+    {
+        const { base, text: textVar } = spec.customColorVars;
+        if(base && typeof props.baseColor === 'string')
+        {
+            styleParts.push(`${ base }: ${ escapeAttr(props.baseColor) };`);
+        }
+        if(textVar && typeof props.textColor === 'string')
+        {
+            styleParts.push(`${ textVar }: ${ escapeAttr(props.textColor) };`);
+        }
+    }
+
+    if(styleParts.length > 0)
+    {
+        attrs.push(`style="${ styleParts.join(' ') }"`);
+    }
+
+    const attrString = attrs.join(' ');
+
+    if(spec.void)
+    {
+        return `<${ spec.tag } ${ attrString } />`;
+    }
+
+    return `<${ spec.tag } ${ attrString }>${ children }</${ spec.tag }>`;
+}
+
+//----------------------------------------------------------------------------------------------------------------------