@exponential_app/eui 0.3.0 → 0.4.0

package/fixtures/specimens.json

@@ -37,14 +37,7 @@
               {
                 "id": "c0-box",
                 "component": "Box",
-                "props": {
-                  "style": {
-                    "display": "flex",
-                    "flexDirection": "column",
-                    "gap": "$spacing.md",
-                    "padding": "$spacing.lg"
-                  }
-                },
+                "props": {},
                 "children": [
                   {
                     "id": "c0-t1",
@@ -62,7 +55,13 @@
                       "variant": "muted"
                     }
                   }
-                ]
+                ],
+                "style": {
+                  "display": "flex",
+                  "flexDirection": "column",
+                  "gap": "$spacing.md",
+                  "padding": "$spacing.lg"
+                }
               }
             ]
           }
@@ -456,11 +455,41 @@
                 }
               },
               {
-                "id": "c1-separator",
-                "component": "Separator",
+                "id": "c1-bar",
+                "component": "Stack",
                 "props": {
-                  "orientation": "vertical"
-                }
+                  "direction": "horizontal",
+                  "gap": "md",
+                  "align": "center"
+                },
+                "children": [
+                  {
+                    "id": "c1-a",
+                    "component": "Text",
+                    "props": {
+                      "text": "Inbox",
+                      "variant": "body"
+                    }
+                  },
+                  {
+                    "id": "c1-separator",
+                    "component": "Separator",
+                    "props": {
+                      "orientation": "vertical"
+                    },
+                    "style": {
+                      "height": 20
+                    }
+                  },
+                  {
+                    "id": "c1-b",
+                    "component": "Text",
+                    "props": {
+                      "text": "Drafts",
+                      "variant": "body"
+                    }
+                  }
+                ]
               }
             ]
           }
@@ -557,7 +586,8 @@
                 "component": "List",
                 "props": {
                   "direction": "horizontal",
-                  "divided": true
+                  "divided": true,
+                  "gap": "lg"
                 },
                 "children": [
                   {
@@ -1583,7 +1613,7 @@
                     "component": "Row",
                     "props": {
                       "title": "Release 0.18",
-                      "meta": "4 runs",
+                      "meta": "4 steps",
                       "pressable": true
                     }
                   },
@@ -1632,7 +1662,7 @@
                     "component": "Row",
                     "props": {
                       "title": "Release 0.17",
-                      "meta": "3 runs",
+                      "meta": "3 steps",
                       "pressable": true
                     }
                   }
@@ -2599,6 +2629,53 @@
         ]
       }
     },
+    {
+      "id": "exponential-ui-zoomable-image",
+      "component": "ZoomableImage",
+      "title": "ZoomableImage",
+      "node": {
+        "id": "specimen-zoomable-image",
+        "component": "Box",
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "gap": "$spacing.lg",
+          "padding": "$spacing.xl",
+          "maxWidth": 720
+        },
+        "children": [
+          {
+            "id": "specimen-zoomable-image-case-0",
+            "component": "Stack",
+            "props": {
+              "direction": "vertical",
+              "gap": "xs",
+              "align": "stretch"
+            },
+            "children": [
+              {
+                "id": "specimen-zoomable-image-case-0-label",
+                "component": "Text",
+                "props": {
+                  "text": "example",
+                  "variant": "caption"
+                }
+              },
+              {
+                "id": "c0-zoomable-image",
+                "component": "ZoomableImage",
+                "props": {
+                  "src": "https://example.com/screenshot.png",
+                  "alt": "Screenshot",
+                  "naturalWidth": 1440,
+                  "naturalHeight": 900
+                }
+              }
+            ]
+          }
+        ]
+      }
+    },
     {
       "id": "exponential-ui-icon",
       "component": "Icon",
@@ -3189,7 +3266,7 @@
                 "id": "specimen-carousel-case-0-label",
                 "component": "Text",
                 "props": {
-                  "text": "example",
+                  "text": "counter · thumbnails",
                   "variant": "caption"
                 }
               },
@@ -3198,7 +3275,13 @@
                 "component": "Carousel",
                 "props": {
                   "page": 0,
-                  "indicators": true
+                  "indicators": true,
+                  "counter": true,
+                  "thumbnails": [
+                    "https://example.com/1.jpg",
+                    "https://example.com/2.jpg",
+                    "https://example.com/3.jpg"
+                  ]
                 },
                 "children": [
                   {
@@ -3335,8 +3418,8 @@
                       "value": "issue"
                     },
                     {
-                      "label": "Run",
-                      "value": "run"
+                      "label": "Session",
+                      "value": "session"
                     }
                   ],
                   "value": "issue"
@@ -3354,7 +3437,7 @@
                     "id": "c0-p2",
                     "component": "Text",
                     "props": {
-                      "text": "The run panel.",
+                      "text": "The session panel.",
                       "variant": "body"
                     }
                   }
@@ -7493,6 +7576,98 @@
                 }
               }
             ]
+          },
+          {
+            "id": "specimen-table-case-3",
+            "component": "Stack",
+            "props": {
+              "direction": "vertical",
+              "gap": "xs",
+              "align": "stretch"
+            },
+            "children": [
+              {
+                "id": "specimen-table-case-3-label",
+                "component": "Text",
+                "props": {
+                  "text": "wide · scrolls",
+                  "variant": "caption"
+                }
+              },
+              {
+                "id": "c3-wide",
+                "component": "Table",
+                "props": {
+                  "columns": [
+                    {
+                      "key": "issue",
+                      "label": "Issue",
+                      "width": 96
+                    },
+                    {
+                      "key": "title",
+                      "label": "Title"
+                    },
+                    {
+                      "key": "board",
+                      "label": "Board"
+                    },
+                    {
+                      "key": "assignee",
+                      "label": "Assignee"
+                    },
+                    {
+                      "key": "status",
+                      "label": "Status",
+                      "type": "badge"
+                    },
+                    {
+                      "key": "summary",
+                      "label": "Summary",
+                      "truncate": true
+                    },
+                    {
+                      "key": "estimate",
+                      "label": "Estimate",
+                      "type": "number",
+                      "align": "end"
+                    }
+                  ],
+                  "rows": [
+                    {
+                      "id": "a",
+                      "issue": "APP-9",
+                      "title": "Fix crash when uploading HEIC photos from the share sheet",
+                      "board": "Mobile",
+                      "assignee": "Alice Lindqvist",
+                      "status": "In progress",
+                      "summary": "The share extension hands over a file URL the uploader cannot read once the sheet closes",
+                      "estimate": 3
+                    },
+                    {
+                      "id": "b",
+                      "issue": "APP-21",
+                      "title": "Offline queue for issue edits",
+                      "board": "Sync",
+                      "assignee": "Bob Okafor",
+                      "status": "Todo",
+                      "summary": "Edits made without a connection are lost on relaunch",
+                      "estimate": 8
+                    },
+                    {
+                      "id": "c",
+                      "issue": "APP-18",
+                      "title": "Reduce cold start below 800 ms",
+                      "board": "Performance",
+                      "assignee": "Chen Wei",
+                      "status": "Done",
+                      "summary": "Defer the sync bootstrap until after the first frame",
+                      "estimate": 5
+                    }
+                  ]
+                }
+              }
+            ]
           }
         ]
       }
@@ -11145,6 +11320,527 @@
         ]
       }
     },
+    {
+      "id": "exponential-ui-motion",
+      "component": "Motion",
+      "title": "Motion",
+      "node": {
+        "id": "specimen-motion",
+        "component": "Box",
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "gap": "$spacing.lg",
+          "padding": "$spacing.xl",
+          "maxWidth": 720
+        },
+        "children": [
+          {
+            "id": "specimen-motion-case-0",
+            "component": "Stack",
+            "props": {
+              "direction": "vertical",
+              "gap": "xs",
+              "align": "stretch"
+            },
+            "children": [
+              {
+                "id": "specimen-motion-case-0-label",
+                "component": "Text",
+                "props": {
+                  "text": "example",
+                  "variant": "caption"
+                }
+              },
+              {
+                "id": "c0-motion",
+                "component": "Motion",
+                "props": {
+                  "size": [
+                    48,
+                    48
+                  ],
+                  "duration": 1000,
+                  "layers": [
+                    {
+                      "type": "shape",
+                      "transform": {
+                        "position": [
+                          24,
+                          24
+                        ],
+                        "rotation": {
+                          "keys": [
+                            {
+                              "t": 0,
+                              "v": 0
+                            },
+                            {
+                              "t": 1000,
+                              "v": 360
+                            }
+                          ]
+                        }
+                      },
+                      "shapes": [
+                        {
+                          "type": "ellipse",
+                          "size": [
+                            36,
+                            36
+                          ]
+                        },
+                        {
+                          "type": "trim",
+                          "end": 70
+                        },
+                        {
+                          "type": "stroke",
+                          "color": "$color.primary",
+                          "width": 4
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            ]
+          },
+          {
+            "id": "specimen-motion-case-1",
+            "component": "Stack",
+            "props": {
+              "direction": "vertical",
+              "gap": "xs",
+              "align": "stretch"
+            },
+            "children": [
+              {
+                "id": "specimen-motion-case-1-label",
+                "component": "Text",
+                "props": {
+                  "text": "direction · forward",
+                  "variant": "caption"
+                }
+              },
+              {
+                "id": "c1-motion",
+                "component": "Motion",
+                "props": {
+                  "size": [
+                    48,
+                    48
+                  ],
+                  "duration": 1000,
+                  "layers": [
+                    {
+                      "type": "shape",
+                      "transform": {
+                        "position": [
+                          24,
+                          24
+                        ],
+                        "rotation": {
+                          "keys": [
+                            {
+                              "t": 0,
+                              "v": 0
+                            },
+                            {
+                              "t": 1000,
+                              "v": 360
+                            }
+                          ]
+                        }
+                      },
+                      "shapes": [
+                        {
+                          "type": "ellipse",
+                          "size": [
+                            36,
+                            36
+                          ]
+                        },
+                        {
+                          "type": "trim",
+                          "end": 70
+                        },
+                        {
+                          "type": "stroke",
+                          "color": "$color.primary",
+                          "width": 4
+                        }
+                      ]
+                    }
+                  ],
+                  "direction": "forward"
+                }
+              }
+            ]
+          },
+          {
+            "id": "specimen-motion-case-2",
+            "component": "Stack",
+            "props": {
+              "direction": "vertical",
+              "gap": "xs",
+              "align": "stretch"
+            },
+            "children": [
+              {
+                "id": "specimen-motion-case-2-label",
+                "component": "Text",
+                "props": {
+                  "text": "direction · reverse",
+                  "variant": "caption"
+                }
+              },
+              {
+                "id": "c2-motion",
+                "component": "Motion",
+                "props": {
+                  "size": [
+                    48,
+                    48
+                  ],
+                  "duration": 1000,
+                  "layers": [
+                    {
+                      "type": "shape",
+                      "transform": {
+                        "position": [
+                          24,
+                          24
+                        ],
+                        "rotation": {
+                          "keys": [
+                            {
+                              "t": 0,
+                              "v": 0
+                            },
+                            {
+                              "t": 1000,
+                              "v": 360
+                            }
+                          ]
+                        }
+                      },
+                      "shapes": [
+                        {
+                          "type": "ellipse",
+                          "size": [
+                            36,
+                            36
+                          ]
+                        },
+                        {
+                          "type": "trim",
+                          "end": 70
+                        },
+                        {
+                          "type": "stroke",
+                          "color": "$color.primary",
+                          "width": 4
+                        }
+                      ]
+                    }
+                  ],
+                  "direction": "reverse"
+                }
+              }
+            ]
+          },
+          {
+            "id": "specimen-motion-case-3",
+            "component": "Stack",
+            "props": {
+              "direction": "vertical",
+              "gap": "xs",
+              "align": "stretch"
+            },
+            "children": [
+              {
+                "id": "specimen-motion-case-3-label",
+                "component": "Text",
+                "props": {
+                  "text": "direction · alternate",
+                  "variant": "caption"
+                }
+              },
+              {
+                "id": "c3-motion",
+                "component": "Motion",
+                "props": {
+                  "size": [
+                    48,
+                    48
+                  ],
+                  "duration": 1000,
+                  "layers": [
+                    {
+                      "type": "shape",
+                      "transform": {
+                        "position": [
+                          24,
+                          24
+                        ],
+                        "rotation": {
+                          "keys": [
+                            {
+                              "t": 0,
+                              "v": 0
+                            },
+                            {
+                              "t": 1000,
+                              "v": 360
+                            }
+                          ]
+                        }
+                      },
+                      "shapes": [
+                        {
+                          "type": "ellipse",
+                          "size": [
+                            36,
+                            36
+                          ]
+                        },
+                        {
+                          "type": "trim",
+                          "end": 70
+                        },
+                        {
+                          "type": "stroke",
+                          "color": "$color.primary",
+                          "width": 4
+                        }
+                      ]
+                    }
+                  ],
+                  "direction": "alternate"
+                }
+              }
+            ]
+          },
+          {
+            "id": "specimen-motion-case-4",
+            "component": "Stack",
+            "props": {
+              "direction": "vertical",
+              "gap": "xs",
+              "align": "stretch"
+            },
+            "children": [
+              {
+                "id": "specimen-motion-case-4-label",
+                "component": "Text",
+                "props": {
+                  "text": "fit · contain",
+                  "variant": "caption"
+                }
+              },
+              {
+                "id": "c4-motion",
+                "component": "Motion",
+                "props": {
+                  "size": [
+                    48,
+                    48
+                  ],
+                  "duration": 1000,
+                  "layers": [
+                    {
+                      "type": "shape",
+                      "transform": {
+                        "position": [
+                          24,
+                          24
+                        ],
+                        "rotation": {
+                          "keys": [
+                            {
+                              "t": 0,
+                              "v": 0
+                            },
+                            {
+                              "t": 1000,
+                              "v": 360
+                            }
+                          ]
+                        }
+                      },
+                      "shapes": [
+                        {
+                          "type": "ellipse",
+                          "size": [
+                            36,
+                            36
+                          ]
+                        },
+                        {
+                          "type": "trim",
+                          "end": 70
+                        },
+                        {
+                          "type": "stroke",
+                          "color": "$color.primary",
+                          "width": 4
+                        }
+                      ]
+                    }
+                  ],
+                  "fit": "contain"
+                }
+              }
+            ]
+          },
+          {
+            "id": "specimen-motion-case-5",
+            "component": "Stack",
+            "props": {
+              "direction": "vertical",
+              "gap": "xs",
+              "align": "stretch"
+            },
+            "children": [
+              {
+                "id": "specimen-motion-case-5-label",
+                "component": "Text",
+                "props": {
+                  "text": "fit · cover",
+                  "variant": "caption"
+                }
+              },
+              {
+                "id": "c5-motion",
+                "component": "Motion",
+                "props": {
+                  "size": [
+                    48,
+                    48
+                  ],
+                  "duration": 1000,
+                  "layers": [
+                    {
+                      "type": "shape",
+                      "transform": {
+                        "position": [
+                          24,
+                          24
+                        ],
+                        "rotation": {
+                          "keys": [
+                            {
+                              "t": 0,
+                              "v": 0
+                            },
+                            {
+                              "t": 1000,
+                              "v": 360
+                            }
+                          ]
+                        }
+                      },
+                      "shapes": [
+                        {
+                          "type": "ellipse",
+                          "size": [
+                            36,
+                            36
+                          ]
+                        },
+                        {
+                          "type": "trim",
+                          "end": 70
+                        },
+                        {
+                          "type": "stroke",
+                          "color": "$color.primary",
+                          "width": 4
+                        }
+                      ]
+                    }
+                  ],
+                  "fit": "cover"
+                }
+              }
+            ]
+          },
+          {
+            "id": "specimen-motion-case-6",
+            "component": "Stack",
+            "props": {
+              "direction": "vertical",
+              "gap": "xs",
+              "align": "stretch"
+            },
+            "children": [
+              {
+                "id": "specimen-motion-case-6-label",
+                "component": "Text",
+                "props": {
+                  "text": "fit · fill",
+                  "variant": "caption"
+                }
+              },
+              {
+                "id": "c6-motion",
+                "component": "Motion",
+                "props": {
+                  "size": [
+                    48,
+                    48
+                  ],
+                  "duration": 1000,
+                  "layers": [
+                    {
+                      "type": "shape",
+                      "transform": {
+                        "position": [
+                          24,
+                          24
+                        ],
+                        "rotation": {
+                          "keys": [
+                            {
+                              "t": 0,
+                              "v": 0
+                            },
+                            {
+                              "t": 1000,
+                              "v": 360
+                            }
+                          ]
+                        }
+                      },
+                      "shapes": [
+                        {
+                          "type": "ellipse",
+                          "size": [
+                            36,
+                            36
+                          ]
+                        },
+                        {
+                          "type": "trim",
+                          "end": 70
+                        },
+                        {
+                          "type": "stroke",
+                          "color": "$color.primary",
+                          "width": 4
+                        }
+                      ]
+                    }
+                  ],
+                  "fit": "fill"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    },
     {
       "id": "exponential-ui-demo",
       "component": null,