@prestack/thread-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,25 @@
+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)