@prestack/thread-ui 0.0.1

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

@@ -0,0 +1,75 @@
+import { variant } from "../variant.js";
+export const BUTTON_FILL = variant({
+    id: 'button-fill',
+    type: 'label',
+    icon: 'md',
+    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-accent' },
+        { property: 'color', is: 'colour-on-accent' },
+        { 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-accent-hover' },
+                { property: 'transform', is: 'transform-lift' },
+            ],
+        },
+        {
+            when: ['active'],
+            sets: [
+                { property: 'background', is: 'colour-accent-press' },
+                { property: 'transform', is: 'transform-press' },
+            ],
+        },
+        {
+            when: ['active', 'hover'],
+            sets: [
+                { property: 'background', is: 'colour-accent-press' },
+                { 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: 'cursor', is: 'cursor-refuse' },
+                { property: 'background', is: 'colour-sunken' },
+                { property: 'color', is: 'colour-ink-faint' },
+            ],
+        },
+        {
+            when: ['disabled', 'hover'],
+            sets: [
+                { property: 'background', is: 'colour-sunken' },
+                { property: 'transform', is: 'transform-rest' },
+            ],
+        },
+    ],
+    reacts: ['active', 'disabled', 'focus', 'hover', 'loading'],
+});

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

@@ -0,0 +1,113 @@
+export declare const BUTTON_GHOST: {
+    readonly id: "button-ghost";
+    readonly type: "label";
+    readonly icon: "md";
+    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-accent";
+    }, {
+        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-surface-lit";
+        }, {
+            readonly property: "transform";
+            readonly is: "transform-lift";
+        }];
+    }, {
+        readonly when: readonly ["active"];
+        readonly sets: readonly [{
+            readonly property: "background";
+            readonly is: "colour-surface-lit";
+        }, {
+            readonly property: "transform";
+            readonly is: "transform-press";
+        }];
+    }, {
+        readonly when: readonly ["active", "hover"];
+        readonly sets: readonly [{
+            readonly property: "background";
+            readonly is: "colour-surface-lit";
+        }, {
+            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: "transform";
+            readonly is: "transform-rest";
+        }];
+    }];
+    readonly reacts: readonly ["active", "disabled", "focus", "hover", "loading"];
+};

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

@@ -0,0 +1,71 @@
+import { variant } from "../variant.js";
+export const BUTTON_GHOST = variant({
+    id: 'button-ghost',
+    type: 'label',
+    icon: 'md',
+    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-accent' },
+        { 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-surface-lit' },
+                { property: 'transform', is: 'transform-lift' },
+            ],
+        },
+        {
+            when: ['active'],
+            sets: [
+                { property: 'background', is: 'colour-surface-lit' },
+                { property: 'transform', is: 'transform-press' },
+            ],
+        },
+        {
+            when: ['active', 'hover'],
+            sets: [
+                { property: 'background', is: 'colour-surface-lit' },
+                { 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: 'transform', is: 'transform-rest' },
+            ],
+        },
+    ],
+    reacts: ['active', 'disabled', 'focus', 'hover', 'loading'],
+});

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

@@ -0,0 +1,84 @@
+export declare const BUTTON_GLASS: {
+    readonly id: "button-glass";
+    readonly material: "glass";
+    readonly type: "label";
+    readonly icon: "md";
+    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 states: readonly [{
+        readonly when: readonly ["hover"];
+        readonly sets: readonly [{
+            readonly property: "transform";
+            readonly is: "transform-lift";
+        }];
+    }, {
+        readonly when: readonly ["active"];
+        readonly sets: readonly [{
+            readonly property: "transform";
+            readonly is: "transform-press";
+        }];
+    }, {
+        readonly when: readonly ["active", "hover"];
+        readonly sets: readonly [{
+            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: "transform";
+            readonly is: "transform-rest";
+        }];
+    }];
+    readonly reacts: readonly ["active", "disabled", "focus", "hover", "loading"];
+};

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

@@ -0,0 +1,54 @@
+import { variant } from "../variant.js";
+export const BUTTON_GLASS = variant({
+    id: 'button-glass',
+    material: 'glass',
+    type: 'label',
+    icon: 'md',
+    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' },
+    ],
+    states: [
+        {
+            when: ['hover'],
+            sets: [{ property: 'transform', is: 'transform-lift' }],
+        },
+        {
+            when: ['active'],
+            sets: [{ property: 'transform', is: 'transform-press' }],
+        },
+        {
+            when: ['active', 'hover'],
+            sets: [{ 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: 'transform', is: 'transform-rest' }],
+        },
+    ],
+    reacts: ['active', 'disabled', 'focus', 'hover', 'loading'],
+});

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

@@ -0,0 +1,116 @@
+export declare const BUTTON_NORMAL: {
+    readonly id: "button-normal";
+    readonly type: "label";
+    readonly icon: "md";
+    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-surface";
+    }, {
+        readonly property: "color";
+        readonly is: "colour-ink";
+    }, {
+        readonly property: "borderWidth";
+        readonly is: "control-edge";
+    }, {
+        readonly property: "borderStyle";
+        readonly is: "line-solid";
+    }, {
+        readonly property: "borderColor";
+        readonly is: "colour-edge";
+    }, {
+        readonly property: "boxShadow";
+        readonly is: "shadow-0";
+    }];
+    readonly states: readonly [{
+        readonly when: readonly ["hover"];
+        readonly sets: readonly [{
+            readonly property: "background";
+            readonly is: "colour-raised";
+        }, {
+            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: "cursor";
+            readonly is: "cursor-refuse";
+        }, {
+            readonly property: "borderColor";
+            readonly is: "colour-edge-faint";
+        }, {
+            readonly property: "color";
+            readonly is: "colour-ink-faint";
+        }];
+    }, {
+        readonly when: readonly ["disabled", "hover"];
+        readonly sets: readonly [{
+            readonly property: "background";
+            readonly is: "colour-surface";
+        }, {
+            readonly property: "transform";
+            readonly is: "transform-rest";
+        }];
+    }];
+    readonly reacts: readonly ["active", "disabled", "focus", "hover", "loading"];
+};

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

@@ -0,0 +1,75 @@
+import { variant } from "../variant.js";
+export const BUTTON_NORMAL = variant({
+    id: 'button-normal',
+    type: 'label',
+    icon: 'md',
+    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-surface' },
+        { property: 'color', is: 'colour-ink' },
+        { property: 'borderWidth', is: 'control-edge' },
+        { property: 'borderStyle', is: 'line-solid' },
+        { property: 'borderColor', is: 'colour-edge' },
+        { property: 'boxShadow', is: 'shadow-0' },
+    ],
+    states: [
+        {
+            when: ['hover'],
+            sets: [
+                { property: 'background', is: 'colour-raised' },
+                { 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: 'cursor', is: 'cursor-refuse' },
+                { property: 'borderColor', is: 'colour-edge-faint' },
+                { property: 'color', is: 'colour-ink-faint' },
+            ],
+        },
+        {
+            when: ['disabled', 'hover'],
+            sets: [
+                { property: 'background', is: 'colour-surface' },
+                { property: 'transform', is: 'transform-rest' },
+            ],
+        },
+    ],
+    reacts: ['active', 'disabled', 'focus', 'hover', 'loading'],
+});