@prestack/thread-ui 0.0.1

package/dist/ui/variants/var_button-quiet.d.ts

@@ -0,0 +1,119 @@
+export declare const BUTTON_QUIET: {
+    readonly id: "button-quiet";
+    readonly type: "label";
+    readonly icon: "sm";
+    readonly sets: readonly [{
+        readonly property: "display";
+        readonly is: "layout-flex";
+    }, {
+        readonly property: "alignItems";
+        readonly is: "align-centre";
+    }, {
+        readonly property: "justifyContent";
+        readonly is: "align-centre";
+    }, {
+        readonly property: "borderRadius";
+        readonly is: "control-radius";
+    }, {
+        readonly property: "height";
+        readonly is: "control-md";
+    }, {
+        readonly property: "padding";
+        readonly is: "control-pad-y control-pad-x";
+    }, {
+        readonly property: "gap";
+        readonly is: "control-gap";
+    }, {
+        readonly property: "cursor";
+        readonly is: "cursor-press";
+    }, {
+        readonly property: "transition";
+        readonly is: "motion-quick ease-out";
+    }, {
+        readonly property: "background";
+        readonly is: "colour-clear";
+    }, {
+        readonly property: "color";
+        readonly is: "colour-ink-soft";
+    }, {
+        readonly property: "borderWidth";
+        readonly is: "edge-hair";
+    }, {
+        readonly property: "borderStyle";
+        readonly is: "line-off";
+    }, {
+        readonly property: "borderColor";
+        readonly is: "colour-clear";
+    }, {
+        readonly property: "boxShadow";
+        readonly is: "shadow-0";
+    }];
+    readonly states: readonly [{
+        readonly when: readonly ["hover"];
+        readonly sets: readonly [{
+            readonly property: "background";
+            readonly is: "colour-sunken";
+        }, {
+            readonly property: "color";
+            readonly is: "colour-ink";
+        }, {
+            readonly property: "transform";
+            readonly is: "transform-lift";
+        }];
+    }, {
+        readonly when: readonly ["active"];
+        readonly sets: readonly [{
+            readonly property: "background";
+            readonly is: "colour-sunken";
+        }, {
+            readonly property: "transform";
+            readonly is: "transform-press";
+        }];
+    }, {
+        readonly when: readonly ["active", "hover"];
+        readonly sets: readonly [{
+            readonly property: "background";
+            readonly is: "colour-sunken";
+        }, {
+            readonly property: "transform";
+            readonly is: "transform-press";
+        }];
+    }, {
+        readonly when: readonly ["focus"];
+        readonly sets: readonly [{
+            readonly property: "outline";
+            readonly is: "control-ring line-solid colour-accent";
+        }, {
+            readonly property: "outlineOffset";
+            readonly is: "control-ring-offset";
+        }];
+    }, {
+        readonly when: readonly ["loading"];
+        readonly sets: readonly [{
+            readonly property: "opacity";
+            readonly is: "opacity-muted";
+        }];
+    }, {
+        readonly when: readonly ["disabled"];
+        readonly sets: readonly [{
+            readonly property: "color";
+            readonly is: "colour-ink-faint";
+        }, {
+            readonly property: "cursor";
+            readonly is: "cursor-refuse";
+        }];
+    }, {
+        readonly when: readonly ["disabled", "hover"];
+        readonly sets: readonly [{
+            readonly property: "background";
+            readonly is: "colour-clear";
+        }, {
+            readonly property: "color";
+            readonly is: "colour-ink-faint";
+        }, {
+            readonly property: "transform";
+            readonly is: "transform-rest";
+        }];
+    }];
+    readonly reacts: readonly ["active", "disabled", "focus", "hover", "loading"];
+};

package/dist/ui/variants/var_button-quiet.js

@@ -0,0 +1,73 @@
+import { variant } from "../variant.js";
+export const BUTTON_QUIET = variant({
+    id: 'button-quiet',
+    type: 'label',
+    icon: 'sm',
+    sets: [
+        { property: 'display', is: 'layout-flex' },
+        { property: 'alignItems', is: 'align-centre' },
+        { property: 'justifyContent', is: 'align-centre' },
+        { property: 'borderRadius', is: 'control-radius' },
+        { property: 'height', is: 'control-md' },
+        { property: 'padding', is: 'control-pad-y control-pad-x' },
+        { property: 'gap', is: 'control-gap' },
+        { property: 'cursor', is: 'cursor-press' },
+        { property: 'transition', is: 'motion-quick ease-out' },
+        { property: 'background', is: 'colour-clear' },
+        { property: 'color', is: 'colour-ink-soft' },
+        { property: 'borderWidth', is: 'edge-hair' },
+        { property: 'borderStyle', is: 'line-off' },
+        { property: 'borderColor', is: 'colour-clear' },
+        { property: 'boxShadow', is: 'shadow-0' },
+    ],
+    states: [
+        {
+            when: ['hover'],
+            sets: [
+                { property: 'background', is: 'colour-sunken' },
+                { property: 'color', is: 'colour-ink' },
+                { property: 'transform', is: 'transform-lift' },
+            ],
+        },
+        {
+            when: ['active'],
+            sets: [
+                { property: 'background', is: 'colour-sunken' },
+                { property: 'transform', is: 'transform-press' },
+            ],
+        },
+        {
+            when: ['active', 'hover'],
+            sets: [
+                { property: 'background', is: 'colour-sunken' },
+                { property: 'transform', is: 'transform-press' },
+            ],
+        },
+        {
+            when: ['focus'],
+            sets: [
+                { property: 'outline', is: 'control-ring line-solid colour-accent' },
+                { property: 'outlineOffset', is: 'control-ring-offset' },
+            ],
+        },
+        {
+            when: ['loading'],
+            sets: [
+                { property: 'opacity', is: 'opacity-muted' },
+            ],
+        },
+        {
+            when: ['disabled'],
+            sets: [{ property: 'color', is: 'colour-ink-faint' }, { property: 'cursor', is: 'cursor-refuse' }],
+        },
+        {
+            when: ['disabled', 'hover'],
+            sets: [
+                { property: 'background', is: 'colour-clear' },
+                { property: 'color', is: 'colour-ink-faint' },
+                { property: 'transform', is: 'transform-rest' },
+            ],
+        },
+    ],
+    reacts: ['active', 'disabled', 'focus', 'hover', 'loading'],
+});

package/dist/ui/variants/var_card.d.ts

@@ -0,0 +1,30 @@
+export declare const CARD: {
+    readonly id: "card";
+    readonly material: "flat";
+    readonly sets: readonly [{
+        readonly property: "color";
+        readonly is: "colour-ink";
+    }, {
+        readonly property: "display";
+        readonly is: "layout-flex";
+    }, {
+        readonly property: "flexDirection";
+        readonly is: "flow-down";
+    }, {
+        readonly property: "alignItems";
+        readonly is: "align-start";
+    }, {
+        readonly property: "borderRadius";
+        readonly is: "radius-md";
+    }, {
+        readonly property: "padding";
+        readonly is: "space-4";
+    }, {
+        readonly property: "gap";
+        readonly is: "space-3";
+    }];
+    readonly plays: {
+        readonly in: "animation-appear";
+    };
+    readonly reacts: readonly ["focus", "hover"];
+};

package/dist/ui/variants/var_card.js

@@ -0,0 +1,16 @@
+import { variant } from "../variant.js";
+export const CARD = variant({
+    id: 'card',
+    material: 'flat',
+    sets: [
+        { property: 'color', is: 'colour-ink' },
+        { property: 'display', is: 'layout-flex' },
+        { property: 'flexDirection', is: 'flow-down' },
+        { property: 'alignItems', is: 'align-start' },
+        { property: 'borderRadius', is: 'radius-md' },
+        { property: 'padding', is: 'space-4' },
+        { property: 'gap', is: 'space-3' },
+    ],
+    plays: { in: 'animation-appear' },
+    reacts: ['focus', 'hover'],
+});

package/dist/ui/variants/var_chip.d.ts

@@ -0,0 +1,18 @@
+export declare const CHIP: {
+    readonly id: "chip";
+    readonly material: "flat";
+    readonly sets: readonly [{
+        readonly property: "color";
+        readonly is: "colour-ink-soft";
+    }, {
+        readonly property: "borderRadius";
+        readonly is: "radius-pill";
+    }, {
+        readonly property: "padding";
+        readonly is: "space-1 space-3";
+    }, {
+        readonly property: "gap";
+        readonly is: "space-1";
+    }];
+    readonly reacts: readonly ["focus", "hover"];
+};

package/dist/ui/variants/var_chip.js

@@ -0,0 +1,12 @@
+import { variant } from "../variant.js";
+export const CHIP = variant({
+    id: 'chip',
+    material: 'flat',
+    sets: [
+        { property: 'color', is: 'colour-ink-soft' },
+        { property: 'borderRadius', is: 'radius-pill' },
+        { property: 'padding', is: 'space-1 space-3' },
+        { property: 'gap', is: 'space-1' },
+    ],
+    reacts: ['focus', 'hover'],
+});

package/dist/ui/variants/var_choice.d.ts

@@ -0,0 +1,26 @@
+export declare const CHOICE: {
+    readonly id: "choice";
+    readonly sets: readonly [{
+        readonly property: "display";
+        readonly is: "layout-flex";
+    }, {
+        readonly property: "flexDirection";
+        readonly is: "flow-down";
+    }, {
+        readonly property: "alignItems";
+        readonly is: "align-start";
+    }, {
+        readonly property: "gap";
+        readonly is: "space-2";
+    }, {
+        readonly property: "padding";
+        readonly is: "space-3";
+    }, {
+        readonly property: "borderRadius";
+        readonly is: "radius-md";
+    }, {
+        readonly property: "color";
+        readonly is: "colour-ink";
+    }];
+    readonly reacts: readonly [];
+};

package/dist/ui/variants/var_choice.js

@@ -0,0 +1,14 @@
+import { variant } from "../variant.js";
+export const CHOICE = variant({
+    id: 'choice',
+    sets: [
+        { property: 'display', is: 'layout-flex' },
+        { property: 'flexDirection', is: 'flow-down' },
+        { property: 'alignItems', is: 'align-start' },
+        { property: 'gap', is: 'space-2' },
+        { property: 'padding', is: 'space-3' },
+        { property: 'borderRadius', is: 'radius-md' },
+        { property: 'color', is: 'colour-ink' },
+    ],
+    reacts: [],
+});

package/dist/ui/variants/var_framed.d.ts

@@ -0,0 +1,11 @@
+export declare const FRAMED: {
+    readonly id: "framed";
+    readonly sets: readonly [{
+        readonly property: "borderRadius";
+        readonly is: "radius-md";
+    }, {
+        readonly property: "background";
+        readonly is: "colour-sunken";
+    }];
+    readonly reacts: readonly [];
+};

package/dist/ui/variants/var_framed.js

@@ -0,0 +1,9 @@
+import { variant } from "../variant.js";
+export const FRAMED = variant({
+    id: 'framed',
+    sets: [
+        { property: 'borderRadius', is: 'radius-md' },
+        { property: 'background', is: 'colour-sunken' },
+    ],
+    reacts: [],
+});

package/dist/ui/variants/var_glyph-plain.d.ts

@@ -0,0 +1,14 @@
+export declare const GLYPH_PLAIN: {
+    readonly id: "glyph-plain";
+    readonly sets: readonly [{
+        readonly property: "width";
+        readonly is: "icon-md";
+    }, {
+        readonly property: "height";
+        readonly is: "icon-md";
+    }, {
+        readonly property: "color";
+        readonly is: "colour-ink";
+    }];
+    readonly reacts: readonly [];
+};

package/dist/ui/variants/var_glyph-plain.js

@@ -0,0 +1,10 @@
+import { variant } from "../variant.js";
+export const GLYPH_PLAIN = variant({
+    id: 'glyph-plain',
+    sets: [
+        { property: 'width', is: 'icon-md' },
+        { property: 'height', is: 'icon-md' },
+        { property: 'color', is: 'colour-ink' },
+    ],
+    reacts: [],
+});

package/dist/ui/variants/var_input.d.ts

@@ -0,0 +1,61 @@
+export declare const INPUT: {
+    readonly id: "input";
+    readonly material: "flat";
+    readonly sets: readonly [{
+        readonly property: "color";
+        readonly is: "colour-ink";
+    }, {
+        readonly property: "borderRadius";
+        readonly is: "radius-md";
+    }, {
+        readonly property: "minHeight";
+        readonly is: "control-md";
+    }, {
+        readonly property: "padding";
+        readonly is: "space-3 space-4";
+    }, {
+        readonly property: "gap";
+        readonly is: "space-2";
+    }, {
+        readonly property: "transition";
+        readonly is: "motion-quick ease-out";
+    }];
+    readonly states: readonly [{
+        readonly when: readonly ["focus"];
+        readonly sets: readonly [{
+            readonly property: "borderColor";
+            readonly is: "colour-accent";
+        }, {
+            readonly property: "borderWidth";
+            readonly is: "edge-thick";
+        }];
+    }, {
+        readonly when: readonly ["invalid"];
+        readonly sets: readonly [{
+            readonly property: "borderColor";
+            readonly is: "colour-negative";
+        }];
+    }, {
+        readonly when: readonly ["focus", "invalid"];
+        readonly sets: readonly [{
+            readonly property: "borderColor";
+            readonly is: "colour-negative";
+        }, {
+            readonly property: "borderWidth";
+            readonly is: "edge-thick";
+        }];
+    }, {
+        readonly when: readonly ["focus", "hover", "invalid"];
+        readonly sets: readonly [{
+            readonly property: "borderColor";
+            readonly is: "colour-negative";
+        }, {
+            readonly property: "borderWidth";
+            readonly is: "edge-thick";
+        }, {
+            readonly property: "boxShadow";
+            readonly is: "shadow-2";
+        }];
+    }];
+    readonly reacts: readonly ["focus", "hover", "invalid"];
+};

package/dist/ui/variants/var_input.js

@@ -0,0 +1,42 @@
+import { variant } from "../variant.js";
+export const INPUT = variant({
+    id: 'input',
+    material: 'flat',
+    sets: [
+        { property: 'color', is: 'colour-ink' },
+        { property: 'borderRadius', is: 'radius-md' },
+        { property: 'minHeight', is: 'control-md' },
+        { property: 'padding', is: 'space-3 space-4' },
+        { property: 'gap', is: 'space-2' },
+        { property: 'transition', is: 'motion-quick ease-out' },
+    ],
+    states: [
+        {
+            when: ['focus'],
+            sets: [
+                { property: 'borderColor', is: 'colour-accent' },
+                { property: 'borderWidth', is: 'edge-thick' },
+            ],
+        },
+        {
+            when: ['invalid'],
+            sets: [{ property: 'borderColor', is: 'colour-negative' }],
+        },
+        {
+            when: ['focus', 'invalid'],
+            sets: [
+                { property: 'borderColor', is: 'colour-negative' },
+                { property: 'borderWidth', is: 'edge-thick' },
+            ],
+        },
+        {
+            when: ['focus', 'hover', 'invalid'],
+            sets: [
+                { property: 'borderColor', is: 'colour-negative' },
+                { property: 'borderWidth', is: 'edge-thick' },
+                { property: 'boxShadow', is: 'shadow-2' },
+            ],
+        },
+    ],
+    reacts: ['focus', 'hover', 'invalid'],
+});

package/dist/ui/variants/var_link-inline.d.ts

@@ -0,0 +1,39 @@
+export declare const LINK_INLINE: {
+    readonly id: "link-inline";
+    readonly sets: readonly [{
+        readonly property: "color";
+        readonly is: "colour-accent";
+    }, {
+        readonly property: "borderRadius";
+        readonly is: "radius-sm";
+    }, {
+        readonly property: "outlineOffset";
+        readonly is: "space-1";
+    }, {
+        readonly property: "transition";
+        readonly is: "motion-quick ease-out";
+    }];
+    readonly states: readonly [{
+        readonly when: readonly ["hover"];
+        readonly sets: readonly [{
+            readonly property: "color";
+            readonly is: "colour-accent-hover";
+        }];
+    }, {
+        readonly when: readonly ["focus"];
+        readonly sets: readonly [{
+            readonly property: "outline";
+            readonly is: "edge-thick line-solid colour-accent";
+        }];
+    }, {
+        readonly when: readonly ["focus", "hover"];
+        readonly sets: readonly [{
+            readonly property: "color";
+            readonly is: "colour-accent-hover";
+        }, {
+            readonly property: "outline";
+            readonly is: "edge-thick line-solid colour-accent";
+        }];
+    }];
+    readonly reacts: readonly ["focus", "hover"];
+};

package/dist/ui/variants/var_link-inline.js

@@ -0,0 +1,28 @@
+import { variant } from "../variant.js";
+export const LINK_INLINE = variant({
+    id: 'link-inline',
+    sets: [
+        { property: 'color', is: 'colour-accent' },
+        { property: 'borderRadius', is: 'radius-sm' },
+        { property: 'outlineOffset', is: 'space-1' },
+        { property: 'transition', is: 'motion-quick ease-out' },
+    ],
+    states: [
+        {
+            when: ['hover'],
+            sets: [{ property: 'color', is: 'colour-accent-hover' }],
+        },
+        {
+            when: ['focus'],
+            sets: [{ property: 'outline', is: 'edge-thick line-solid colour-accent' }],
+        },
+        {
+            when: ['focus', 'hover'],
+            sets: [
+                { property: 'color', is: 'colour-accent-hover' },
+                { property: 'outline', is: 'edge-thick line-solid colour-accent' },
+            ],
+        },
+    ],
+    reacts: ['focus', 'hover'],
+});

package/dist/ui/variants/var_list-row.d.ts

@@ -0,0 +1,47 @@
+export declare const LIST_ROW: {
+    readonly id: "list-row";
+    readonly material: "flat";
+    readonly sets: readonly [{
+        readonly property: "color";
+        readonly is: "colour-ink";
+    }, {
+        readonly property: "borderRadius";
+        readonly is: "radius-sm";
+    }, {
+        readonly property: "padding";
+        readonly is: "space-3 space-4";
+    }, {
+        readonly property: "gap";
+        readonly is: "space-3";
+    }];
+    readonly states: readonly [{
+        readonly when: readonly ["carrying"];
+        readonly sets: readonly [{
+            readonly property: "opacity";
+            readonly is: "opacity-muted";
+        }];
+    }, {
+        readonly when: readonly ["draggedOver"];
+        readonly sets: readonly [{
+            readonly property: "outline";
+            readonly is: "edge-thick line-solid colour-accent";
+        }, {
+            readonly property: "outlineOffset";
+            readonly is: "space-1";
+        }];
+    }, {
+        readonly when: readonly ["refusing"];
+        readonly sets: readonly [{
+            readonly property: "outline";
+            readonly is: "edge-thick line-dashed colour-negative";
+        }, {
+            readonly property: "outlineOffset";
+            readonly is: "space-1";
+        }];
+    }];
+    readonly plays: {
+        readonly in: "animation-rise";
+        readonly out: "animation-fall";
+    };
+    readonly reacts: readonly ["carrying", "draggedOver", "focus", "hover", "refusing"];
+};

package/dist/ui/variants/var_list-row.js

@@ -0,0 +1,33 @@
+import { variant } from "../variant.js";
+export const LIST_ROW = variant({
+    id: 'list-row',
+    material: 'flat',
+    sets: [
+        { property: 'color', is: 'colour-ink' },
+        { property: 'borderRadius', is: 'radius-sm' },
+        { property: 'padding', is: 'space-3 space-4' },
+        { property: 'gap', is: 'space-3' },
+    ],
+    states: [
+        {
+            when: ['carrying'],
+            sets: [{ property: 'opacity', is: 'opacity-muted' }],
+        },
+        {
+            when: ['draggedOver'],
+            sets: [
+                { property: 'outline', is: 'edge-thick line-solid colour-accent' },
+                { property: 'outlineOffset', is: 'space-1' },
+            ],
+        },
+        {
+            when: ['refusing'],
+            sets: [
+                { property: 'outline', is: 'edge-thick line-dashed colour-negative' },
+                { property: 'outlineOffset', is: 'space-1' },
+            ],
+        },
+    ],
+    plays: { in: 'animation-rise', out: 'animation-fall' },
+    reacts: ['carrying', 'draggedOver', 'focus', 'hover', 'refusing'],
+});

package/dist/ui/variants/var_rule.d.ts

@@ -0,0 +1,11 @@
+export declare const RULE: {
+    readonly id: "rule";
+    readonly sets: readonly [{
+        readonly property: "borderWidth";
+        readonly is: "edge-hair";
+    }, {
+        readonly property: "borderColor";
+        readonly is: "colour-edge";
+    }];
+    readonly reacts: readonly [];
+};

package/dist/ui/variants/var_rule.js

@@ -0,0 +1,9 @@
+import { variant } from "../variant.js";
+export const RULE = variant({
+    id: 'rule',
+    sets: [
+        { property: 'borderWidth', is: 'edge-hair' },
+        { property: 'borderColor', is: 'colour-edge' },
+    ],
+    reacts: [],
+});

package/dist/ui/variants/var_skeleton-block.d.ts

@@ -0,0 +1,17 @@
+export declare const SKELETON_BLOCK: {
+    readonly id: "skeleton-block";
+    readonly sets: readonly [{
+        readonly property: "background";
+        readonly is: "colour-sunken";
+    }, {
+        readonly property: "borderRadius";
+        readonly is: "radius-sm";
+    }, {
+        readonly property: "minHeight";
+        readonly is: "control-sm";
+    }, {
+        readonly property: "animation";
+        readonly is: "animation-waiting";
+    }];
+    readonly reacts: readonly [];
+};