@getcortexlabs/mavis-web 0.1.0-alpha.1 → 0.1.0-alpha.3

package/src/style.css

@@ -1,3 +1,11 @@
+@font-face {
+  font-family: 'lucide';
+  src: url('./fonts/lucide.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
 .m-screen {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -137,3 +145,82 @@
   -webkit-text-fill-color: currentColor;
   opacity: 1;
 }
+
+.m-icon {
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  user-select: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+.m-sheet {
+  position: fixed;
+  inset: auto 0 0 0;
+  width: 100%;
+  max-width: 560px;
+  max-height: calc(100dvh - 24px);
+  margin: 0 auto;
+  padding: 0;
+  border: 0;
+  border-radius: var(--m-sheet-radius) var(--m-sheet-radius) 0 0;
+  background: var(--m-sheet-surface);
+  overflow: hidden;
+  translate: 0 100%;
+  transition: translate 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.m-sheet[open] {
+  display: flex;
+  flex-direction: column;
+}
+
+.m-sheet:focus {
+  outline: none;
+}
+
+.m-sheet.m-sheet-open {
+  translate: 0 0;
+}
+
+.m-sheet::backdrop {
+  background: rgba(0, 0, 0, 0);
+  transition: background-color 240ms ease-out;
+}
+
+.m-sheet.m-sheet-open::backdrop {
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.m-sheet-full {
+  max-width: none;
+  max-height: none;
+  height: 100dvh;
+  border-radius: 0;
+}
+
+.m-sheet-panel {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  box-sizing: border-box;
+}
+
+.m-sheet-body {
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+html:has(.m-sheet[open]) {
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .m-sheet,
+  .m-sheet::backdrop {
+    transition: none;
+  }
+}

package/src/style.ts

@@ -12,21 +12,32 @@ export function length(value: number | string | undefined) {
   return typeof value === 'number' ? `${value}px` : value
 }
 
+// A prop that was not given leaves its style untouched, so the host's CSS keeps applying.
 export function boxStyle(theme: MavisTheme, props: BoxProps, defaultShrink = 0): CSSProperties {
-  const padding = resolveSpace(theme, props.padding ?? 'none')
-  const x = props.paddingX === undefined ? padding : resolveSpace(theme, props.paddingX)
-  const y = props.paddingY === undefined ? padding : resolveSpace(theme, props.paddingY)
-  return {
+  const style: CSSProperties = {
     boxSizing: 'border-box',
-    padding: `${y}px ${x}px`,
-    borderRadius: length(resolveRadius(theme, props.radius)),
     flexGrow: nonNegative(props.grow, 'grow'),
     flexShrink: nonNegative(props.shrink ?? defaultShrink, 'shrink'),
     minWidth: 0,
-    width: length(resolveDimension(props.width)),
-    height: length(resolveDimension(props.height)),
-    backgroundColor: props.backgroundColor,
   }
+  const padding = props.padding === undefined ? undefined : resolveSpace(theme, props.padding)
+  const x = props.paddingX === undefined ? padding : resolveSpace(theme, props.paddingX)
+  const y = props.paddingY === undefined ? padding : resolveSpace(theme, props.paddingY)
+  if (x !== undefined) {
+    style.paddingLeft = `${x}px`
+    style.paddingRight = `${x}px`
+  }
+  if (y !== undefined) {
+    style.paddingTop = `${y}px`
+    style.paddingBottom = `${y}px`
+  }
+  if (props.radius !== undefined) style.borderRadius = length(resolveRadius(theme, props.radius))
+  const width = length(resolveDimension(props.width))
+  if (width !== undefined) style.width = width
+  const height = length(resolveDimension(props.height))
+  if (height !== undefined) style.height = height
+  if (props.backgroundColor !== undefined) style.backgroundColor = props.backgroundColor
+  return style
 }
 
 /** Native accessibility labels have the same meaning on the DOM renderer. */