@exponential_app/eui 0.3.0 → 0.4.0

package/fixtures/theme-resolved.json

@@ -742,6 +742,174 @@
             }
           ]
         },
+        "ZoomableImage": {
+          "root": [
+            {
+              "style": {
+                "backgroundColor": "#00000000"
+              }
+            }
+          ],
+          "image": [
+            {
+              "style": {
+                "borderRadius": "$radius.md"
+              }
+            }
+          ],
+          "pill": [
+            {
+              "style": {
+                "padding": 4,
+                "gap": 2,
+                "borderRadius": "$radius.full",
+                "backgroundColor": "$color.popover",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "boxShadow": "$shadow.lg",
+                "backdropBlur": "$blur.lg"
+              }
+            }
+          ],
+          "zoomOut": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "percent": [
+            {
+              "style": {
+                "height": 28,
+                "paddingHorizontal": "$spacing.md",
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "fontFamily": "$type.family.sans",
+                "fontSize": "$type.size.sm",
+                "lineHeight": "$type.lineHeight.sm",
+                "fontWeight": "$type.weight.medium",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "zoomIn": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "divider": [
+            {
+              "style": {
+                "width": 1,
+                "height": 16,
+                "backgroundColor": "$color.border"
+              }
+            }
+          ],
+          "fit": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            },
+            {
+              "when": {
+                "state": "selected"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            }
+          ]
+        },
         "QrCode": {
           "root": [
             {
@@ -4627,8 +4795,9 @@
           "cell": [
             {
               "style": {
-                "height": "$control.row",
-                "paddingHorizontal": "$spacing.sm"
+                "minHeight": "$control.row",
+                "paddingHorizontal": "$spacing.sm",
+                "paddingVertical": "$spacing.xs"
               }
             },
             {
@@ -4636,7 +4805,7 @@
                 "density": "compact"
               },
               "style": {
-                "height": "$control.rowCompact"
+                "minHeight": "$control.rowCompact"
               }
             }
           ],
@@ -7185,6 +7354,174 @@
             }
           ]
         },
+        "ZoomableImage": {
+          "root": [
+            {
+              "style": {
+                "backgroundColor": "#00000000"
+              }
+            }
+          ],
+          "image": [
+            {
+              "style": {
+                "borderRadius": "$radius.md"
+              }
+            }
+          ],
+          "pill": [
+            {
+              "style": {
+                "padding": 4,
+                "gap": 2,
+                "borderRadius": "$radius.full",
+                "backgroundColor": "$color.popover",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "boxShadow": "$shadow.lg",
+                "backdropBlur": "$blur.lg"
+              }
+            }
+          ],
+          "zoomOut": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "percent": [
+            {
+              "style": {
+                "height": 28,
+                "paddingHorizontal": "$spacing.md",
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "fontFamily": "$type.family.sans",
+                "fontSize": "$type.size.sm",
+                "lineHeight": "$type.lineHeight.sm",
+                "fontWeight": "$type.weight.medium",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "zoomIn": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "divider": [
+            {
+              "style": {
+                "width": 1,
+                "height": 16,
+                "backgroundColor": "$color.border"
+              }
+            }
+          ],
+          "fit": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            },
+            {
+              "when": {
+                "state": "selected"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            }
+          ]
+        },
         "QrCode": {
           "root": [
             {
@@ -11327,8 +11664,9 @@
           "cell": [
             {
               "style": {
-                "height": "$control.row",
-                "paddingHorizontal": "$spacing.sm"
+                "minHeight": "$control.row",
+                "paddingHorizontal": "$spacing.sm",
+                "paddingVertical": "$spacing.xs"
               }
             },
             {
@@ -11336,7 +11674,7 @@
                 "density": "compact"
               },
               "style": {
-                "height": "$control.rowCompact"
+                "minHeight": "$control.rowCompact"
               }
             }
           ],
@@ -13905,94 +14243,262 @@
             },
             {
               "when": {
-                "tone": "success"
+                "tone": "success"
+              },
+              "style": {
+                "color": "$color.success"
+              }
+            },
+            {
+              "when": {
+                "tone": "warning"
+              },
+              "style": {
+                "color": "$color.warning"
+              }
+            },
+            {
+              "when": {
+                "tone": "danger"
+              },
+              "style": {
+                "color": "$color.destructive"
+              }
+            },
+            {
+              "when": {
+                "tone": "info"
+              },
+              "style": {
+                "color": "$color.info"
+              }
+            },
+            {
+              "when": {
+                "tone": "neutral"
+              },
+              "style": {
+                "color": "$color.mutedForeground"
+              }
+            }
+          ]
+        },
+        "Avatar": {
+          "root": [
+            {
+              "style": {
+                "width": "$control.avatarMd",
+                "height": "$control.avatarMd",
+                "borderRadius": "$radius.full"
+              }
+            },
+            {
+              "when": {
+                "size": "sm"
+              },
+              "style": {
+                "width": "$control.avatarSm",
+                "height": "$control.avatarSm"
+              }
+            },
+            {
+              "when": {
+                "size": "lg"
+              },
+              "style": {
+                "width": "$control.avatarLg",
+                "height": "$control.avatarLg"
+              }
+            },
+            {
+              "style": {
+                "borderRadius": "$radius.lg"
+              }
+            }
+          ],
+          "fallback": [
+            {
+              "style": {
+                "backgroundColor": "$color.muted",
+                "color": "$color.mutedForeground",
+                "fontSize": "$type.size.sm",
+                "fontWeight": "$type.weight.medium",
+                "fontFamily": "$type.family.sans"
+              }
+            },
+            {
+              "style": {
+                "backgroundColor": "$color.secondary",
+                "color": "$color.secondaryForeground",
+                "fontWeight": "$type.weight.bold"
+              }
+            }
+          ]
+        },
+        "ZoomableImage": {
+          "root": [
+            {
+              "style": {
+                "backgroundColor": "#00000000"
+              }
+            }
+          ],
+          "image": [
+            {
+              "style": {
+                "borderRadius": "$radius.md"
+              }
+            }
+          ],
+          "pill": [
+            {
+              "style": {
+                "padding": 4,
+                "gap": 2,
+                "borderRadius": "$radius.full",
+                "backgroundColor": "$color.popover",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "boxShadow": "$shadow.lg",
+                "backdropBlur": "$blur.lg"
+              }
+            }
+          ],
+          "zoomOut": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "percent": [
+            {
+              "style": {
+                "height": 28,
+                "paddingHorizontal": "$spacing.md",
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "fontFamily": "$type.family.sans",
+                "fontSize": "$type.size.sm",
+                "lineHeight": "$type.lineHeight.sm",
+                "fontWeight": "$type.weight.medium",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
               },
               "style": {
-                "color": "$color.success"
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
               }
             },
             {
               "when": {
-                "tone": "warning"
+                "state": "disabled"
               },
               "style": {
-                "color": "$color.warning"
+                "opacity": "$opacity.disabled"
               }
-            },
+            }
+          ],
+          "zoomIn": [
             {
-              "when": {
-                "tone": "danger"
-              },
               "style": {
-                "color": "$color.destructive"
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
               }
             },
             {
               "when": {
-                "tone": "info"
+                "state": "hover"
               },
               "style": {
-                "color": "$color.info"
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
               }
             },
             {
               "when": {
-                "tone": "neutral"
+                "state": "disabled"
               },
               "style": {
-                "color": "$color.mutedForeground"
+                "opacity": "$opacity.disabled"
               }
             }
-          ]
-        },
-        "Avatar": {
-          "root": [
+          ],
+          "divider": [
             {
               "style": {
-                "width": "$control.avatarMd",
-                "height": "$control.avatarMd",
-                "borderRadius": "$radius.full"
+                "width": 1,
+                "height": 16,
+                "backgroundColor": "$color.border"
               }
-            },
+            }
+          ],
+          "fit": [
             {
-              "when": {
-                "size": "sm"
-              },
               "style": {
-                "width": "$control.avatarSm",
-                "height": "$control.avatarSm"
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
               }
             },
             {
               "when": {
-                "size": "lg"
+                "state": "hover"
               },
               "style": {
-                "width": "$control.avatarLg",
-                "height": "$control.avatarLg"
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
               }
             },
             {
+              "when": {
+                "state": "disabled"
+              },
               "style": {
-                "borderRadius": "$radius.lg"
-              }
-            }
-          ],
-          "fallback": [
-            {
-              "style": {
-                "backgroundColor": "$color.muted",
-                "color": "$color.mutedForeground",
-                "fontSize": "$type.size.sm",
-                "fontWeight": "$type.weight.medium",
-                "fontFamily": "$type.family.sans"
+                "opacity": "$opacity.disabled"
               }
             },
             {
+              "when": {
+                "state": "selected"
+              },
               "style": {
-                "backgroundColor": "$color.secondary",
-                "color": "$color.secondaryForeground",
-                "fontWeight": "$type.weight.bold"
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
               }
             }
           ]
@@ -18368,8 +18874,9 @@
           "cell": [
             {
               "style": {
-                "height": "$control.row",
-                "paddingHorizontal": "$spacing.sm"
+                "minHeight": "$control.row",
+                "paddingHorizontal": "$spacing.sm",
+                "paddingVertical": "$spacing.xs"
               }
             },
             {
@@ -18377,7 +18884,7 @@
                 "density": "compact"
               },
               "style": {
-                "height": "$control.rowCompact"
+                "minHeight": "$control.rowCompact"
               }
             }
           ],
@@ -21057,6 +21564,174 @@
             }
           ]
         },
+        "ZoomableImage": {
+          "root": [
+            {
+              "style": {
+                "backgroundColor": "#00000000"
+              }
+            }
+          ],
+          "image": [
+            {
+              "style": {
+                "borderRadius": "$radius.md"
+              }
+            }
+          ],
+          "pill": [
+            {
+              "style": {
+                "padding": 4,
+                "gap": 2,
+                "borderRadius": "$radius.full",
+                "backgroundColor": "$color.popover",
+                "borderWidth": "$border.hairline",
+                "borderColor": "$color.border",
+                "boxShadow": "$shadow.lg",
+                "backdropBlur": "$blur.lg"
+              }
+            }
+          ],
+          "zoomOut": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "percent": [
+            {
+              "style": {
+                "height": 28,
+                "paddingHorizontal": "$spacing.md",
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "fontFamily": "$type.family.sans",
+                "fontSize": "$type.size.sm",
+                "lineHeight": "$type.lineHeight.sm",
+                "fontWeight": "$type.weight.medium",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "zoomIn": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            }
+          ],
+          "divider": [
+            {
+              "style": {
+                "width": 1,
+                "height": 16,
+                "backgroundColor": "$color.border"
+              }
+            }
+          ],
+          "fit": [
+            {
+              "style": {
+                "width": 28,
+                "height": 28,
+                "borderRadius": "$radius.full",
+                "color": "$color.foreground",
+                "backgroundColor": "#00000000",
+                "transition": "$motion.fast"
+              }
+            },
+            {
+              "when": {
+                "state": "hover"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            },
+            {
+              "when": {
+                "state": "disabled"
+              },
+              "style": {
+                "opacity": "$opacity.disabled"
+              }
+            },
+            {
+              "when": {
+                "state": "selected"
+              },
+              "style": {
+                "backgroundColor": "$color.accent",
+                "color": "$color.accentForeground"
+              }
+            }
+          ]
+        },
         "QrCode": {
           "root": [
             {
@@ -25199,8 +25874,9 @@
           "cell": [
             {
               "style": {
-                "height": "$control.row",
-                "paddingHorizontal": "$spacing.sm"
+                "minHeight": "$control.row",
+                "paddingHorizontal": "$spacing.sm",
+                "paddingVertical": "$spacing.xs"
               }
             },
             {
@@ -25208,7 +25884,7 @@
                 "density": "compact"
               },
               "style": {
-                "height": "$control.rowCompact"
+                "minHeight": "$control.rowCompact"
               }
             }
           ],