@prestack/thread-ui 0.1.9 → 0.1.11

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

@@ -1,76 +0,0 @@
-import { variant } from '../variant.ts'
-
-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'],
-} as const)

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

@@ -1,72 +0,0 @@
-import { variant } from '../variant.ts'
-
-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'],
-} as const)

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

@@ -1,55 +0,0 @@
-import { variant } from '../variant.ts'
-
-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'],
-} as const)

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

@@ -1,76 +0,0 @@
-import { variant } from '../variant.ts'
-
-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'],
-} as const)

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

@@ -1,74 +0,0 @@
-import { variant } from '../variant.ts'
-
-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'],
-} as const)

package/dist/ui/variants/var_card.ts

@@ -1,17 +0,0 @@
-import { variant } from '../variant.ts'
-
-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'],
-} as const)

package/dist/ui/variants/var_chip.ts

@@ -1,13 +0,0 @@
-import { variant } from '../variant.ts'
-
-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'],
-} as const)

package/dist/ui/variants/var_choice.ts

@@ -1,15 +0,0 @@
-import { variant } from '../variant.ts'
-
-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: [],
-} as const)

package/dist/ui/variants/var_framed.ts

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

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

@@ -1,11 +0,0 @@
-import { variant } from '../variant.ts'
-
-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: [],
-} as const)

package/dist/ui/variants/var_input.ts

@@ -1,43 +0,0 @@
-import { variant } from '../variant.ts'
-
-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'],
-} as const)

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

@@ -1,29 +0,0 @@
-import { variant } from '../variant.ts'
-
-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'],
-} as const)

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

@@ -1,34 +0,0 @@
-import { variant } from '../variant.ts'
-
-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'],
-} as const)

package/dist/ui/variants/var_rule.ts

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

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

@@ -1,12 +0,0 @@
-import { variant } from '../variant.ts'
-
-export const SKELETON_BLOCK = variant({
-  id: 'skeleton-block',
-  sets: [
-    { property: 'background', is: 'colour-sunken' },
-    { property: 'borderRadius', is: 'radius-sm' },
-    { property: 'minHeight', is: 'control-sm' },
-    { property: 'animation', is: 'animation-waiting' },
-  ],
-  reacts: [],
-} as const)

package/dist/ui/variants/var_spinner-turning.ts

@@ -1,12 +0,0 @@
-import { variant } from '../variant.ts'
-
-export const SPINNER_TURNING = variant({
-  id: 'spinner-turning',
-  sets: [
-    { property: 'width', is: 'icon-md' },
-    { property: 'height', is: 'icon-md' },
-    { property: 'color', is: 'colour-accent' },
-    { property: 'animation', is: 'animation-working' },
-  ],
-  reacts: [],
-} as const)

package/dist/ui/variants/var_stat-tile.ts

@@ -1,13 +0,0 @@
-import { variant } from '../variant.ts'
-
-export const STAT_TILE = variant({
-  id: 'stat-tile',
-  material: 'flat',
-  sets: [
-    { property: 'color', is: 'colour-ink' },
-    { property: 'borderRadius', is: 'radius-md' },
-    { property: 'padding', is: 'space-4' },
-    { property: 'gap', is: 'space-2' },
-  ],
-  reacts: ['focus', 'hover'],
-} as const)

package/dist/ui/variants/var_tab-bar.ts

@@ -1,15 +0,0 @@
-import { variant } from '../variant.ts'
-
-export const TAB_BAR = variant({
-  id: 'tab-bar',
-  material: 'flat',
-  sets: [
-    { property: 'color', is: 'colour-ink' },
-    { property: 'borderRadius', is: 'radius-lg' },
-    { property: 'minHeight', is: 'control-md' },
-    { property: 'padding', is: 'space-1' },
-    { property: 'gap', is: 'space-1' },
-    { property: 'transition', is: 'motion-quick ease-out' },
-  ],
-  reacts: ['focus', 'hover'],
-} as const)

package/dist/ui/variants/var_tap-target.ts

@@ -1,25 +0,0 @@
-import { variant } from '../variant.ts'
-
-export const TAP_TARGET = variant({
-  id: 'tap-target',
-  sets: [{ property: 'borderRadius', is: 'radius-md' }],
-  states: [
-    {
-      when: ['tapped'],
-      sets: [{ property: 'animation', is: 'animation-flash' }],
-    },
-    {
-      when: ['pressing'],
-      sets: [{ property: 'animation', is: 'animation-press' }],
-    },
-    {
-      when: ['carrying', 'pressing'],
-      sets: [{ property: 'animation', is: 'animation-hover-lift' }],
-    },
-    {
-      when: ['carrying'],
-      sets: [{ property: 'animation', is: 'animation-hover-lift' }],
-    },
-  ],
-  reacts: ['tapped', 'pressing', 'carrying'],
-} as const)