morphico 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/README.md +62 -45
  2. package/dist/esm/all.js +50 -0
  3. package/dist/esm/clip.js +283 -0
  4. package/dist/esm/engine.js +25 -0
  5. package/dist/esm/face.js +153 -0
  6. package/dist/esm/geometry.js +459 -0
  7. package/dist/esm/icon.js +41 -0
  8. package/dist/esm/index.js +50 -0
  9. package/dist/esm/morph.js +107 -0
  10. package/dist/esm/roundness.js +37 -0
  11. package/dist/esm/sets/battery.js +87 -0
  12. package/dist/esm/sets/bell.js +101 -0
  13. package/dist/esm/sets/characters.js +43 -0
  14. package/dist/esm/sets/check-mark.js +74 -0
  15. package/dist/esm/sets/checkbox.js +91 -0
  16. package/dist/esm/sets/chevron.js +70 -0
  17. package/dist/esm/sets/condensed.js +137 -0
  18. package/dist/esm/sets/copy.js +87 -0
  19. package/dist/esm/sets/eye.js +105 -0
  20. package/dist/esm/sets/faces.js +482 -0
  21. package/dist/esm/sets/folder.js +112 -0
  22. package/dist/esm/sets/handwritten.js +136 -0
  23. package/dist/esm/sets/lock.js +75 -0
  24. package/dist/esm/sets/lucide.js +66 -0
  25. package/dist/esm/sets/media.js +109 -0
  26. package/dist/esm/sets/menu.js +84 -0
  27. package/dist/esm/sets/mic.js +102 -0
  28. package/dist/esm/sets/radio.js +84 -0
  29. package/dist/esm/sets/round.js +244 -0
  30. package/dist/esm/sets/shapes.js +455 -0
  31. package/dist/esm/sets/slim.js +148 -0
  32. package/dist/esm/sets/square.js +149 -0
  33. package/dist/esm/sets/theme.js +107 -0
  34. package/dist/esm/sets/toggle.js +73 -0
  35. package/dist/esm/sets/volume.js +89 -0
  36. package/dist/esm/sets/weather.js +691 -0
  37. package/dist/esm/sets/wifi.js +68 -0
  38. package/dist/esm/svg.js +31 -0
  39. package/dist/esm/text.js +88 -0
  40. package/dist/esm/types.js +3 -0
  41. package/dist/morphico.js +3764 -3750
  42. package/dist/types/{iconSets.d.ts → all.d.ts} +0 -2
  43. package/dist/types/clip.d.ts +4 -11
  44. package/dist/types/face.d.ts +2 -6
  45. package/dist/types/icon.d.ts +4 -9
  46. package/dist/types/index.d.ts +1 -3
  47. package/dist/types/roundness.d.ts +8 -0
  48. package/dist/types/sets/battery.d.ts +1 -1
  49. package/dist/types/sets/bell.d.ts +1 -1
  50. package/dist/types/sets/checkbox.d.ts +1 -1
  51. package/dist/types/sets/chevron.d.ts +1 -1
  52. package/dist/types/sets/condensed.d.ts +1 -1
  53. package/dist/types/sets/copy.d.ts +1 -1
  54. package/dist/types/sets/eye.d.ts +1 -1
  55. package/dist/types/sets/folder.d.ts +1 -1
  56. package/dist/types/sets/handwritten.d.ts +1 -1
  57. package/dist/types/sets/lock.d.ts +1 -1
  58. package/dist/types/sets/media.d.ts +1 -1
  59. package/dist/types/sets/menu.d.ts +1 -1
  60. package/dist/types/sets/mic.d.ts +1 -1
  61. package/dist/types/sets/radio.d.ts +1 -1
  62. package/dist/types/sets/round.d.ts +1 -1
  63. package/dist/types/sets/slim.d.ts +1 -1
  64. package/dist/types/sets/square.d.ts +1 -1
  65. package/dist/types/sets/theme.d.ts +1 -1
  66. package/dist/types/sets/toggle.d.ts +1 -1
  67. package/dist/types/sets/volume.d.ts +1 -1
  68. package/dist/types/sets/weather.d.ts +1 -1
  69. package/dist/types/sets/wifi.d.ts +1 -1
  70. package/dist/types/text.d.ts +8 -13
  71. package/package.json +95 -3
  72. package/dist/morphico.mjs +0 -4642
@@ -24,5 +24,3 @@ export declare const iconSets: {
24
24
  battery: IconSet;
25
25
  };
26
26
  export type IconSetName = keyof typeof iconSets;
27
- /** A set given by name or as a set object, optionally with sharper corners (`roundness` 0 = sharp … 1 = own). */
28
- export declare const resolveIconSet: (set?: IconSetName | IconSet, roundness?: number) => IconSet;
@@ -29,29 +29,22 @@ export interface ClipChanges {
29
29
  export interface ClipOptions extends ClipChanges, MorphOptions {
30
30
  /** The shape set (default: the built-in shapes, based on Lucide). */
31
31
  set?: IconSet;
32
- /** The shape shown first (default `'circle'`). */
33
- state?: string;
34
32
  }
35
33
  export interface ClipChangeOptions extends ClipChanges, MorphOptions {
36
34
  /** Called when the change ends, with the same result the promise resolves to. */
37
35
  onEnd?: (result: MorphResult) => void;
38
36
  }
39
37
  export interface Clip {
40
- /** The shape shown, or being morphed to. */
41
- readonly state: string;
42
38
  /**
43
39
  * Morphs to the shape `state` and animates the given changes along (move, resize, turn, roundness), or — called with
44
40
  * only an object — animates those changes and keeps the shape. The promise resolves when it ends; an interrupted
45
- * change resolves with `interrupted: true`. Without animation when the user prefers reduced motion.
41
+ * change resolves with `interrupted: true`. Without animation when the user prefers reduced motion; `duration: 0`
42
+ * jumps (e.g. while a slider is dragged).
46
43
  */
47
44
  to(state: string, options?: ClipChangeOptions): Promise<MorphResult>;
48
45
  to(changes: ClipChangeOptions): Promise<MorphResult>;
49
- /** Jumps (no animation), e.g. while a slider is dragged. Stops a running change (it resolves as interrupted). */
50
- set(changes: ClipChanges & {
51
- state?: string;
52
- }): void;
53
46
  /** Stops, removes the hidden <svg> and gives the element back its own clip-path / mask. */
54
47
  destroy(): void;
55
48
  }
56
- /** Cuts `element` out by a morphing shape. */
57
- export declare const clip: (element: HTMLElement | SVGElement, options?: ClipOptions) => Clip;
49
+ /** Cuts `element` out by a morphing shape, `init` first. */
50
+ export declare const clip: (element: HTMLElement | SVGElement, init: string, options?: ClipOptions) => Clip;
@@ -1,8 +1,6 @@
1
1
  import type { MorphOptions, MorphResult } from './morph.js';
2
2
  import type { FaceExpression } from './sets/faces.js';
3
3
  export interface FaceOptions extends MorphOptions {
4
- /** The expression shown first (default `'normal'`). */
5
- state?: FaceExpression;
6
4
  /** Color of the pupils (default `'white'`). Brows, eyes and mouth take the CSS `color`. */
7
5
  pupilColor?: string;
8
6
  /** Blink by itself every few seconds (default `true`). Off when the user prefers reduced motion. */
@@ -15,8 +13,6 @@ export interface FaceChangeOptions extends MorphOptions {
15
13
  onEnd?: (result: MorphResult) => void;
16
14
  }
17
15
  export interface Face {
18
- /** The expression shown, or being morphed to. */
19
- readonly state: FaceExpression;
20
16
  /**
21
17
  * Morphs to another expression. The promise resolves when the morph ends; an interrupted morph resolves with
22
18
  * `interrupted: true`. Without animation when the user prefers reduced motion.
@@ -27,5 +23,5 @@ export interface Face {
27
23
  /** Stops everything and removes the face from the page. */
28
24
  destroy(): void;
29
25
  }
30
- /** Adds a morphing face (an <svg>) to `element`. */
31
- export declare const face: (element: Element, options?: FaceOptions) => Face;
26
+ /** Adds a morphing face (an <svg>) to `element`, showing the expression `init` first. */
27
+ export declare const face: (element: Element, init: FaceExpression, options?: FaceOptions) => Face;
@@ -1,14 +1,11 @@
1
- import type { IconSetName } from './iconSets.js';
2
1
  import type { MorphOptions, MorphResult } from './morph.js';
3
2
  import type { StyleOptions } from './svg.js';
4
3
  import type { IconSet } from './types.js';
5
4
  export interface IconOptions extends MorphOptions, StyleOptions {
6
- /** A built-in set by name (default `'round'`) or a set object. */
7
- set?: IconSetName | IconSet;
5
+ /** The set, e.g. `digitsRound` from `'morphico/sets/round'` or `iconsWeather` from `'morphico/sets/weather'`. */
6
+ set: IconSet;
8
7
  /** Corner roundness: 0 = sharp … 1 = the icon's own corners (default, also the maximum). Icon sets only. */
9
8
  roundness?: number;
10
- /** The state shown first (default: empty, `' '`). */
11
- state?: string;
12
9
  /** CSS width and height of the icon (default `'1em'`: it follows the font size). */
13
10
  size?: string;
14
11
  }
@@ -17,8 +14,6 @@ export interface ChangeOptions extends MorphOptions {
17
14
  onEnd?: (result: MorphResult) => void;
18
15
  }
19
16
  export interface Icon {
20
- /** The state shown, or being morphed to. */
21
- readonly state: string;
22
17
  /**
23
18
  * Morphs to `state` (`'0'`…`'9'`, `'-'`, or `' '` for empty). The promise resolves when the morph ends;
24
19
  * an interrupted morph resolves with `interrupted: true`. Without animation when the user prefers reduced motion.
@@ -27,5 +22,5 @@ export interface Icon {
27
22
  /** Stops any morph and removes the icon from the page. */
28
23
  destroy(): void;
29
24
  }
30
- /** Adds a morphing icon (an <svg>) to `element`. */
31
- export declare const icon: (element: Element, options?: IconOptions) => Icon;
25
+ /** Adds a morphing icon (an <svg>) to `element`, showing `init` first (`''` or `' '` = empty). */
26
+ export declare const icon: (element: Element, init: string, options: IconOptions) => Icon;
@@ -2,18 +2,16 @@ export { clip } from './clip.js';
2
2
  export { easings } from './engine.js';
3
3
  export { face } from './face.js';
4
4
  export { icon } from './icon.js';
5
- export { iconSets } from './iconSets.js';
6
5
  export { faceExpressionNames } from './sets/faces.js';
7
6
  export { text } from './text.js';
8
7
  export type { Clip, ClipChangeOptions, ClipChanges, ClipOptions, ClipOutline, Length } from './clip.js';
9
8
  export type { Easing } from './engine.js';
10
9
  export type { Face, FaceChangeOptions, FaceOptions } from './face.js';
11
10
  export type { ChangeOptions, Icon, IconOptions } from './icon.js';
12
- export type { IconSetName } from './iconSets.js';
13
11
  export type { EasingName, MorphOptions, MorphResult } from './morph.js';
14
12
  export type { FaceExpression } from './sets/faces.js';
15
13
  export type { StyleOptions } from './svg.js';
16
- export type { SetOptions, Text, TextOptions, TextResult } from './text.js';
14
+ export type { Text, TextChangeOptions, TextOptions, TextResult } from './text.js';
17
15
  export type { IconSet, TextLayout } from './types.js';
18
16
  /** Package version, e.g. "0.1.0" (tools/build.ts replaces 'dev'). */
19
17
  export declare const version: string;
@@ -0,0 +1,8 @@
1
+ import type { IconSet } from './types.js';
2
+ /** The set, optionally with sharper corners (`roundness` 0 = sharp … 1 = its own). */
3
+ export declare const resolveIconSet: (iconSet: IconSet, roundness?: number) => IconSet;
4
+ /** The `set` option checked: a set object (names like `'weather'` were accepted before 0.5.0 — say what to do now). */
5
+ export declare const checkedIconSet: (set: unknown, functionName: string) => IconSet;
6
+ /** The second argument: what is shown first. Before 0.5.0 the options came second (with the first state inside) — say
7
+ * so instead of failing somewhere deeper. */
8
+ export declare const checkedInit: (init: unknown, functionName: string) => string;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const batteryIcons: IconSet;
2
+ export declare const iconsBattery: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const bellIcons: IconSet;
2
+ export declare const iconsBell: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const checkboxIcons: IconSet;
2
+ export declare const iconsCheckbox: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const chevronIcons: IconSet;
2
+ export declare const iconsChevron: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const condensedDigits: IconSet;
2
+ export declare const digitsCondensed: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const copyIcons: IconSet;
2
+ export declare const iconsCopy: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const eyeIcons: IconSet;
2
+ export declare const iconsEye: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const folderIcons: IconSet;
2
+ export declare const iconsFolder: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const handwrittenDigits: IconSet;
2
+ export declare const digitsHandwritten: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const lockIcons: IconSet;
2
+ export declare const iconsLock: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const mediaIcons: IconSet;
2
+ export declare const iconsMedia: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const menuIcons: IconSet;
2
+ export declare const iconsMenu: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const micIcons: IconSet;
2
+ export declare const iconsMic: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const radioIcons: IconSet;
2
+ export declare const iconsRadio: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const roundDigits: IconSet;
2
+ export declare const digitsRound: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const slimDigits: IconSet;
2
+ export declare const digitsSlim: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const squareDigits: IconSet;
2
+ export declare const digitsSquare: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const themeIcons: IconSet;
2
+ export declare const iconsTheme: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const toggleIcons: IconSet;
2
+ export declare const iconsToggle: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const volumeIcons: IconSet;
2
+ export declare const iconsVolume: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const weatherIcons: IconSet;
2
+ export declare const iconsWeather: IconSet;
@@ -1,2 +1,2 @@
1
1
  import type { IconSet } from '../types.js';
2
- export declare const wifiIcons: IconSet;
2
+ export declare const iconsWifi: IconSet;
@@ -1,12 +1,9 @@
1
- import type { IconSetName } from './iconSets.js';
2
1
  import type { MorphOptions } from './morph.js';
3
2
  import type { StyleOptions } from './svg.js';
4
3
  import type { IconSet } from './types.js';
5
4
  export interface TextOptions extends MorphOptions, StyleOptions {
6
- /** A built-in set by name (default `'round'`) or a set object. */
7
- set?: IconSetName | IconSet;
8
- /** The text shown first (default: empty). */
9
- value?: string;
5
+ /** A digit set, e.g. `digitsRound` from `'morphico/sets/round'`. */
6
+ set: IconSet;
10
7
  /** CSS height of the line (default `'1em'`: it follows the font size). */
11
8
  size?: string;
12
9
  /** Width of a digit cell in grid units, where a digit is 16 high (default: the set's own). */
@@ -17,25 +14,23 @@ export interface TextOptions extends MorphOptions, StyleOptions {
17
14
  export interface TextResult {
18
15
  /** The text the change was heading to. */
19
16
  value: string;
20
- /** `true` when a newer `set()` (or `destroy()`) took over before every digit finished. */
17
+ /** `true` when a newer `to()` (or `destroy()`) took over before every digit finished. */
21
18
  interrupted: boolean;
22
19
  }
23
- export interface SetOptions extends MorphOptions {
20
+ export interface TextChangeOptions extends MorphOptions {
24
21
  /** Called when every changed digit has finished, with the same result the promise resolves to. */
25
22
  onEnd?: (result: TextResult) => void;
26
23
  }
27
24
  export interface Text {
28
- /** The text shown, or being morphed to (after unsupported characters were removed). */
29
- readonly value: string;
30
25
  /**
31
- * Shows `value`. Unsupported characters are removed first. If the length and every cell's width stay the same,
26
+ * Morphs to `value`. Unsupported characters are removed first. If the length and every cell's width stay the same,
32
27
  * the changed characters morph; otherwise the line is rebuilt without animation. Cells: digits, space and `-` are
33
28
  * one width, `:` `.` `,` half of it, `/` 0.7 of it — so `5` ↔ `-` or `.` ↔ `,` morph, `5` ↔ `:` rebuilds.
34
29
  * Pad with spaces (e.g. `String(count).padStart(3, ' ')`) to keep counters morphing.
35
30
  */
36
- set(value: string, options?: SetOptions): Promise<TextResult>;
31
+ to(value: string, options?: TextChangeOptions): Promise<TextResult>;
37
32
  /** Stops all morphs and removes the line from the page. */
38
33
  destroy(): void;
39
34
  }
40
- /** Adds a line of morphing characters (a <span> of <svg> cells) to `element`. */
41
- export declare const text: (element: Element, options?: TextOptions) => Text;
35
+ /** Adds a line of morphing characters (a <span> of <svg> cells) to `element`, showing `init` first. */
36
+ export declare const text: (element: Element, init: string, options: TextOptions) => Text;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "morphico",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "description": "Morphing line-art icons: smooth SVG path transitions between digits and other states. No dependencies.",
5
5
  "license": "MIT AND ISC",
6
6
  "author": "Raycho Ivanov",
@@ -16,10 +16,102 @@
16
16
  "exports": {
17
17
  ".": {
18
18
  "types": "./dist/types/index.d.ts",
19
- "default": "./dist/morphico.mjs"
19
+ "default": "./dist/esm/index.js"
20
+ },
21
+ "./all": {
22
+ "types": "./dist/types/all.d.ts",
23
+ "default": "./dist/esm/all.js"
24
+ },
25
+ "./sets/round": {
26
+ "types": "./dist/types/sets/round.d.ts",
27
+ "default": "./dist/esm/sets/round.js"
28
+ },
29
+ "./sets/square": {
30
+ "types": "./dist/types/sets/square.d.ts",
31
+ "default": "./dist/esm/sets/square.js"
32
+ },
33
+ "./sets/condensed": {
34
+ "types": "./dist/types/sets/condensed.d.ts",
35
+ "default": "./dist/esm/sets/condensed.js"
36
+ },
37
+ "./sets/slim": {
38
+ "types": "./dist/types/sets/slim.d.ts",
39
+ "default": "./dist/esm/sets/slim.js"
40
+ },
41
+ "./sets/handwritten": {
42
+ "types": "./dist/types/sets/handwritten.d.ts",
43
+ "default": "./dist/esm/sets/handwritten.js"
44
+ },
45
+ "./sets/media": {
46
+ "types": "./dist/types/sets/media.d.ts",
47
+ "default": "./dist/esm/sets/media.js"
48
+ },
49
+ "./sets/menu": {
50
+ "types": "./dist/types/sets/menu.d.ts",
51
+ "default": "./dist/esm/sets/menu.js"
52
+ },
53
+ "./sets/checkbox": {
54
+ "types": "./dist/types/sets/checkbox.d.ts",
55
+ "default": "./dist/esm/sets/checkbox.js"
56
+ },
57
+ "./sets/radio": {
58
+ "types": "./dist/types/sets/radio.d.ts",
59
+ "default": "./dist/esm/sets/radio.js"
60
+ },
61
+ "./sets/folder": {
62
+ "types": "./dist/types/sets/folder.d.ts",
63
+ "default": "./dist/esm/sets/folder.js"
64
+ },
65
+ "./sets/theme": {
66
+ "types": "./dist/types/sets/theme.d.ts",
67
+ "default": "./dist/esm/sets/theme.js"
68
+ },
69
+ "./sets/weather": {
70
+ "types": "./dist/types/sets/weather.d.ts",
71
+ "default": "./dist/esm/sets/weather.js"
72
+ },
73
+ "./sets/eye": {
74
+ "types": "./dist/types/sets/eye.d.ts",
75
+ "default": "./dist/esm/sets/eye.js"
76
+ },
77
+ "./sets/volume": {
78
+ "types": "./dist/types/sets/volume.d.ts",
79
+ "default": "./dist/esm/sets/volume.js"
80
+ },
81
+ "./sets/toggle": {
82
+ "types": "./dist/types/sets/toggle.d.ts",
83
+ "default": "./dist/esm/sets/toggle.js"
84
+ },
85
+ "./sets/lock": {
86
+ "types": "./dist/types/sets/lock.d.ts",
87
+ "default": "./dist/esm/sets/lock.js"
88
+ },
89
+ "./sets/bell": {
90
+ "types": "./dist/types/sets/bell.d.ts",
91
+ "default": "./dist/esm/sets/bell.js"
92
+ },
93
+ "./sets/mic": {
94
+ "types": "./dist/types/sets/mic.d.ts",
95
+ "default": "./dist/esm/sets/mic.js"
96
+ },
97
+ "./sets/chevron": {
98
+ "types": "./dist/types/sets/chevron.d.ts",
99
+ "default": "./dist/esm/sets/chevron.js"
100
+ },
101
+ "./sets/copy": {
102
+ "types": "./dist/types/sets/copy.d.ts",
103
+ "default": "./dist/esm/sets/copy.js"
104
+ },
105
+ "./sets/wifi": {
106
+ "types": "./dist/types/sets/wifi.d.ts",
107
+ "default": "./dist/esm/sets/wifi.js"
108
+ },
109
+ "./sets/battery": {
110
+ "types": "./dist/types/sets/battery.d.ts",
111
+ "default": "./dist/esm/sets/battery.js"
20
112
  }
21
113
  },
22
- "module": "./dist/morphico.mjs",
114
+ "module": "./dist/esm/index.js",
23
115
  "types": "./dist/types/index.d.ts",
24
116
  "jsdelivr": "./dist/morphico.js",
25
117
  "unpkg": "./dist/morphico.js",